/* =========================================================
   Zuzana Booking — Frontend styles (theme-isolated)
   ========================================================= */

/* --- Container — full isolation from theme --- */
.zb-booking {
    max-width: 780px;
    margin: 0 auto;
    background: #fff !important;
    color: #2d2d2d !important;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: left;
}
.zb-booking *,
.zb-booking *::before,
.zb-booking *::after {
    box-sizing: border-box;
}
/* Force dark text on ALL children, override theme white text */
.zb-booking,
.zb-booking div,
.zb-booking span,
.zb-booking p,
.zb-booking h3,
.zb-booking h4,
.zb-booking label,
.zb-booking button {
    color: #2d2d2d !important;
}

@media (max-width: 560px) {
    .zb-booking { padding: 1.5rem 1.25rem; border-radius: 12px; }
}

/* --- Step title --- */
.zb-booking .zb-step-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    color: #1a1a1a !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: -.01em;
    line-height: 1.3;
}
.zb-booking h3,
.zb-booking h4 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- Back button --- */
.zb-booking .zb-back {
    background: none !important;
    border: none !important;
    color: var(--zb-brand, #7a9a5a) !important;
    cursor: pointer;
    font-size: .9rem !important;
    font-weight: 500 !important;
    padding: 0 !important;
    margin-bottom: 1rem;
    display: inline-block;
}
.zb-booking .zb-back:hover { text-decoration: underline; opacity: .8; }

/* ---- STEP 1 — Consultation types ---- */
.zb-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.zb-type-card {
    background: #fff !important;
    border: 2px solid #e8e0e0 !important;
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: border-color .2s, transform .15s, box-shadow .2s;
}
.zb-type-card:hover {
    border-color: var(--zb-brand, #7a9a5a) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--zb-brand-rgb, 122,154,90),.2);
}
.zb-type-card.selected {
    border-color: var(--zb-brand, #7a9a5a) !important;
    background: var(--zb-brand-l, #e8f0e0) !important;
    box-shadow: 0 4px 16px rgba(var(--zb-brand-rgb, 122,154,90),.2);
}
.zb-booking .zb-type-name {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin-bottom: .5rem;
    color: #1a1a1a !important;
}
.zb-booking .zb-type-meta {
    display: flex;
    gap: .75rem;
    color: #777 !important;
    font-size: .9rem !important;
    margin-bottom: .5rem;
}
.zb-booking .zb-type-meta span { color: #777 !important; white-space: nowrap; }
.zb-booking .zb-type-desc {
    font-size: .85rem !important;
    color: #888 !important;
    line-height: 1.5;
}

/* ---- STEP 2 — Calendar ---- */
.zb-calendar-wrap {
    background: #f9f9f7 !important;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e8e8e4;
    max-width: 360px;
}
.zb-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.zb-booking .zb-calendar-header button {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 1.2rem !important;
    color: var(--zb-brand, #7a9a5a) !important;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    padding: 0 !important;
}
.zb-booking .zb-calendar-header button:hover {
    background: var(--zb-brand-l, #e8f0e0) !important;
}
.zb-booking .zb-cal-title {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #1a1a1a !important;
}

.zb-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.zb-booking .zb-cal-dayname {
    text-align: center;
    font-size: .75rem !important;
    color: #999 !important;
    font-weight: 700 !important;
    padding-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.zb-cal-day, .zb-cal-empty {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: .9rem !important;
}
.zb-booking .zb-cal-day.available {
    cursor: pointer;
    background: #fff !important;
    color: #2d2d2d !important;
    font-weight: 600 !important;
    transition: background .15s, color .15s;
    border: 1px solid #eee;
}
.zb-booking .zb-cal-day.available:hover {
    background: var(--zb-brand-l, #e8f0e0) !important;
    border-color: var(--zb-brand, #7a9a5a);
}
.zb-booking .zb-cal-day.selected {
    background: var(--zb-brand, #7a9a5a) !important;
    color: #fff !important;
    border-color: var(--zb-brand, #7a9a5a) !important;
}
.zb-booking .zb-cal-day.today {
    border: 2px solid var(--zb-brand, #7a9a5a) !important;
    font-weight: 800 !important;
    position: relative;
}
.zb-booking .zb-cal-day.today::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--zb-brand, #7a9a5a);
}
.zb-booking .zb-cal-day.disabled {
    color: #ccc !important;
    cursor: default;
    background: transparent !important;
    border: 1px solid transparent;
}
.zb-booking .zb-cal-day.disabled.today {
    border: 2px dashed #ccc !important;
}
.zb-booking .zb-cal-day.disabled.today::after {
    background: #ccc;
}

/* Slots */
.zb-slots-wrap { margin-top: 1.5rem; }
.zb-booking .zb-slots-wrap h4 {
    margin-bottom: .75rem;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}
.zb-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.zb-booking .zb-slot {
    background: #fff !important;
    border: 2px solid #e8e0e0 !important;
    border-radius: 8px;
    padding: .45rem 1rem;
    cursor: pointer;
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: #2d2d2d !important;
    transition: border-color .15s, background .15s;
}
.zb-booking .zb-slot:hover {
    border-color: var(--zb-brand, #7a9a5a) !important;
    background: var(--zb-brand-l, #e8f0e0) !important;
}
.zb-booking .zb-slot.selected {
    border-color: var(--zb-brand, #7a9a5a) !important;
    background: var(--zb-brand, #7a9a5a) !important;
    color: #fff !important;
}

/* ---- STEP 3 — Form ---- */
.zb-summary-bar {
    background: var(--zb-brand-l, #e8f0e0) !important;
    border-left: 4px solid var(--zb-brand, #7a9a5a) !important;
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .95rem !important;
    color: #2d2d2d !important;
}
.zb-booking .zb-summary-bar strong { color: #1a1a1a !important; }

.zb-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 560px) {
    .zb-form-grid { grid-template-columns: 1fr; }
}
.zb-field-full { grid-column: 1 / -1; }
.zb-booking .zb-field label {
    display: block;
    font-size: .85rem !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: .35rem;
}
.zb-booking .zb-field input,
.zb-booking .zb-field textarea {
    width: 100%;
    border: 1.5px solid #ddd !important;
    border-radius: 8px;
    padding: .65rem .85rem;
    font-size: 1rem !important;
    font-family: inherit;
    background: #fff !important;
    color: #2d2d2d !important;
    transition: border-color .15s;
    box-sizing: border-box;
    outline: none;
}
.zb-booking .zb-field input:focus,
.zb-booking .zb-field textarea:focus {
    border-color: var(--zb-brand, #7a9a5a) !important;
    box-shadow: 0 0 0 3px rgba(var(--zb-brand-rgb, 122,154,90),.12);
}
.zb-booking .zb-field input::placeholder,
.zb-booking .zb-field textarea::placeholder {
    color: #bbb !important;
}

/* ---- STEP 4 — Payment ---- */
.zb-payment-box {
    background: #f9f9f7 !important;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e8e8e4;
    max-width: 480px;
}

/* --- Primary button --- */
.zb-booking .zb-btn-primary {
    background: var(--zb-brand, #7a9a5a) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px;
    padding: .85rem 2rem;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background .2s, transform .15s;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    line-height: 1.4;
}
.zb-booking .zb-btn-primary:hover {
    background: var(--zb-brand-d, #6a8a4a) !important;
    transform: translateY(-1px);
}
.zb-booking .zb-btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* --- Error --- */
.zb-booking .zb-error {
    color: #c0392b !important;
    font-size: .9rem !important;
    margin-top: .75rem;
}

/* ---- STEP 5 — Confirmation ---- */
.zb-success {
    text-align: center;
    padding: 3rem 1rem;
}
.zb-success-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.zb-booking .zb-success h3 {
    font-size: 1.6rem !important;
    margin-bottom: .75rem;
    color: #1a1a1a !important;
}
.zb-booking .zb-success-detail {
    font-size: 1.05rem !important;
    color: #666 !important;
    margin-bottom: .5rem;
}

.zb-booking .zb-loading {
    color: #888 !important;
    font-size: .9rem !important;
}

/* ---- STEP 4 — Payment tiles ---- */
.zb-pay-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.zb-pay-tile {
    background: #fff !important;
    border: 2.5px solid #e8e0e0 !important;
    border-radius: 14px;
    padding: 1.1rem .8rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, transform .15s, box-shadow .2s;
}
.zb-pay-tile:hover {
    border-color: var(--zb-brand, #7a9a5a) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--zb-brand-rgb, 122,154,90),.15);
}
.zb-pay-tile.active {
    border-color: var(--zb-brand, #7a9a5a) !important;
    background: var(--zb-brand-l, #e8f0e0) !important;
    box-shadow: 0 4px 16px rgba(var(--zb-brand-rgb, 122,154,90),.15);
}
.zb-pay-tile-icon { font-size: 2rem; margin-bottom: .3rem; }
.zb-booking .zb-pay-tile-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: .4rem;
}
.zb-pay-tile-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.zb-pay-badge {
    display: inline-block;
    font-size: .65rem !important;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(0,0,0,.06);
    color: #666 !important;
    letter-spacing: .01em;
}
.zb-pay-tile.active .zb-pay-badge {
    background: rgba(var(--zb-brand-rgb, 122,154,90),.15);
    color: var(--zb-brand-d, #6a8a4a) !important;
}

/* Legacy tab support (hidden, keep JS working) */
.zb-pay-tabs { display: none; }
.zb-pay-tab { display: none; }

.zb-booking .zb-transfer-intro {
    font-size: .9rem !important;
    color: #666 !important;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* ---- STEP 4b — Transfer instructions ---- */
.zb-transfer-success {
    text-align: center;
    padding: 2rem 1rem;
}
.zb-booking .zb-transfer-success h3 {
    font-size: 1.4rem !important;
    margin-bottom: .5rem;
    color: #1a1a1a !important;
}
.zb-booking .zb-transfer-success p {
    color: #555 !important;
}
.zb-transfer-details {
    background: #f9f9f7 !important;
    border: 2px solid var(--zb-brand, #7a9a5a) !important;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    max-width: 420px;
    margin: 1.25rem auto;
    text-align: left;
}
.zb-transfer-row {
    display: flex;
    justify-content: space-between;
    padding: .45rem 0;
    font-size: .95rem !important;
    border-bottom: 1px solid #e8e8e4;
}
.zb-transfer-row:last-child { border-bottom: none; }
.zb-booking .zb-transfer-row span { color: #888 !important; }
.zb-booking .zb-transfer-row strong { color: #1a1a1a !important; font-weight: 700 !important; }

.zb-qr-wrap {
    margin: 1.5rem auto;
    text-align: center;
}
.zb-qr-wrap canvas {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.zb-booking .zb-qr-label {
    font-size: .8rem !important;
    color: #999 !important;
    margin-top: .5rem;
}
.zb-booking .zb-transfer-note {
    font-size: .85rem !important;
    color: #888 !important;
    margin-top: 1rem;
    line-height: 1.5;
}

/* ---- Credit banner ---- */
.zb-credit-banner {
    background: var(--zb-brand-l, #e8f0e0) !important;
    border: 2px solid var(--zb-brand, #7a9a5a) !important;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .95rem !important;
    color: #2d2d2d !important;
    text-align: center;
}
.zb-booking .zb-credit-banner strong { color: var(--zb-brand-d, #6a8a4a) !important; font-size: 1.1rem !important; }

/* ---- Bundle card badge ---- */
.zb-type-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--zb-brand, #7a9a5a), var(--zb-brand-d, #6a8a4a)) !important;
    color: #fff !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    padding: 2px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}
.zb-type-card.zb-type-bundle {
    border-color: var(--zb-brand, #7a9a5a) !important;
    background: var(--zb-brand-l, #e8f0e0) !important;
}

/* ---- Stripe Payment Element overrides ---- */
.zb-booking #zb-payment-element {
    background: #fff;
    border-radius: 8px;
    padding: .5rem;
}