/* app-buttons.css — DoreshTzion site CSS (split from app.css): DTZ button system + legacy .btn-dtz. @split-marker */

/* ===== Folded in from the former demo.css ===== */
.dtz.button {
    height: 50px;
    border-radius: 8px;
    padding-top: 10px;
    padding-right: 14px;
    padding-bottom: 10px;
    padding-left: 14px;
}


.dtz.button.typ-header {
    font-weight: 700;
    font-size: 32px;
    line-height: 30px;
    letter-spacing: 1%;
}


.dtz.button.large {
    height: 60px;
    border-radius: 8px;
    padding-top: 10px;
    padding-right: 14px;
    padding-bottom: 10px;
    padding-left: 14px;
}


.dtz.button.large.typ-header {
    font-weight: 700;
    font-size: 35px;
    line-height: 30px;
    letter-spacing: 0%;
}


.dtz.button.small {
    height: 30px;
    border-radius: 8px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
}


.dtz.button.small.typ-header {
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0%;
}

.qa-button-nav {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    background: var(--dtz-bronze);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}


button.btn-dtz-primary-bg {
    background: var(--dtz-blue) !important;
    border-radius: 8px !important;
    color: white;
}

button.btn-dtz-secondary-bg {
    background: var(--dtz-bronze) !important;
    border-radius: 8px !important;
    color: #fff;
    font-weight: bold;
}

.btn-dtz-bg {
    background: var(--dtz-bg);
    border-radius: 8px !important;
    border: 1px solid var(--dtz-bronze) !important;
}

.btn.btn-nav{
    font-size: 16px;
    font-family: "Heebo";
    margin-left: 10px;
    width: 220px;
    height: 42px;
    border-radius: 8px;
    background: var(--dtz-bg);
    border: 10px;
    box-shadow: none;
    color: var(--dtz-blue);
}


.btn.btn-primary.bg-bronze.btn.btn-decrease-quantity:hover,
.btn.btn-primary.bg-bronze.btn.btn-decrease-quantity:active,
.btn.btn-primary.bg-bronze.btn.btn-increment-quantity:hover,
.btn.btn-primary.bg-bronze.btn.btn-increment-quantity:active{
    background-color: var(--dtz-bronze);
    color: white !important;
}


.btn.btn-increment-quantity:active,
.btn.btn-decrease-quantity:active{
    background-color: var(--dtz-bronze);
    color: white !important;
}


.btn.btn-increment-quantity:hover span,
.btn.btn-decrease-quantity:hover span{
    color: white !important;
}


.btn.btn-increment-quantity:active span,
.btn.btn-decrease-quantity:active span{
    color: white !important;
}


.btn-dtz-editable{
    background-color: transparent;
    color: var(--dtz-bronze);
    padding: 0.375rem 0.75rem;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
    border: 0;
}


.btn-dtz-editable:hover {
    background-color: var(--dtz-bronze);
    color: #ffffff;
}


.btn-dtz-editable-danger {
    border-color: var(--dtz-danger); /* Bootstrap's standard danger red */
    color: var(--dtz-danger);
}


.btn-dtz-editable-danger:hover {
    background-color: var(--dtz-danger);
    color: #ffffff;
}


.btn-dtz-new {
    background-color: var(--dtz-bronze);
    color: #ffffff;
}


.btn-dtz-label{
    background-color: transparent;
    color: var(--dtz-text-dark);
    font-size: 14px;
}


.btn-dtz-select{
    color: var(--dtz-text-dark);
    font-size: 14px;
}

/* ===== end demo.css fold ===== */


/* ===== Secondary button ===== */
.btn-dtz-secondary-bg { background-color: var(--dtz-bronze); border-color: var(--dtz-bronze); color: #fff; }

/* ===========================================================================
   DTZ Button System — shared, reusable buttons used across the whole site.
   One fixed size everywhere: Heebo 700, 15px, padding 6px 10px, radius 4px.
   Usage: base class .dtz-btn + exactly one variant. Works on <button> and <a>,
   with or without an inline icon.
   NOTE: distinct from the LEGACY .btn-dtz and .btn-dtz-secondary-bg classes
   (Shop/Cart/Admin), still in use. Migrate those here and delete them when unused.
   Variants (the 2 reference styles from the books page topic filter):
     .dtz-btn-primary    solid blue background, light text
     .dtz-btn-secondary  light cream background, blue text + border
   Modifiers (combine with a variant):
     .dtz-btn-block      stretch to the full width of the container (form CTA)
   =========================================================================== */
.dtz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Heebo', Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 10px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--hover-transition), color var(--hover-transition);
}
.dtz-btn i   { font-size: 0.85em; line-height: 1; }
.dtz-btn img { height: 1.15em; width: auto; }
.dtz-btn:focus { outline: none; }
.dtz-btn:focus-visible { box-shadow: var(--focus-ring); }
.dtz-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* Block modifier — stretch to the full width of the container (e.g. a form CTA). */
.dtz-btn-block { display: flex; width: 100%; }

/* Primary — solid blue with light text */
.dtz-btn-primary {
    background: var(--dtz-blue);
    color: #fff;
    border-color: var(--dtz-blue);
}
@media (hover: hover) {
    .dtz-btn-primary:hover { background: var(--dtz-blue-hover); color: #fff; }
}

/* Secondary — light cream with blue text and border */
.dtz-btn-secondary {
    background: var(--dtz-bg);
    color: var(--dtz-blue);
    border-color: var(--dtz-blue);
}
@media (hover: hover) {
    /* Opaque hover so the button looks the same on light AND dark backgrounds
       (a translucent overlay would reveal a dark banner behind the button). */
    .dtz-btn-secondary:hover { background: var(--dtz-bg-hover); color: var(--dtz-blue); }
}

/* -- Shop / Cart -- */
.btn-dtz { background-color: var(--dtz-blue); border-color: var(--dtz-blue); color: #fff; font-family: inherit; transition: background-color var(--hover-transition), border-color var(--hover-transition), box-shadow var(--hover-transition); }
@media (hover: hover) {
    .btn-dtz:hover { background-color: var(--dtz-blue-hover); border-color: var(--dtz-blue-hover); color: #fff; }
}
.btn-dtz:focus         { outline: none; }
.btn-dtz:focus-visible { box-shadow: var(--focus-ring); }
.cart-badge { position: absolute; top: -6px; right: -6px; background: var(--dtz-bronze); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: bold; }

/* ===== Lesson action mini-buttons (listen / download / open) =====
   Shared by LessonCard, the home lesson strip and the lesson detail page.
   Hover/focus styling is added by app-interactions.css (loads last). */
.lesson-link {
    width: 38px;
    height: 38px;
    border-radius: 30px;
    margin-top: -20px;
    margin-left: 15px;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.lesson-link.bronza { background: var(--dtz-bronze); }
.lesson-link.blue   { background: var(--dtz-blue); }
.lesson-links       { display: flex; justify-content: flex-end; padding-left: 16px; }
/* Three action buttons grouped as a single tight unit with a small gap. */
.lesson-link-group  { gap: 8px; }
.lesson-link-group .lesson-link { margin-left: 0; }