/**
 * Tour Booking Korak 1 — PURE CSS (bez Tailwind dependencies).
 *
 * Sesija 5 final-final (2026-05-31). Pošto Tailwind v4 build / load order /
 * specifičnost konflikti ruše Hawaii dizajn, koristim semantičke `.hbk1-*`
 * klase sa direktnim CSS pravilima. Ovaj fajl mora biti UČITAN POSLJEDNJI
 * u head da override-uje sve.
 *
 * Layout: 1:1 paritet sa hawaii-template/rezervacija-korak-1.html
 */

/* ============================================================
   HERO SECTION
   ============================================================ */
.hbk1-hero {
    position: relative;
    height: 343px;
    margin-top: 143px;
}
.hbk1-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.hbk1-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hbk1-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.hbk1-hero__inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 90px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hbk1-hero__title {
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 45px;
    line-height: 55px;
    letter-spacing: 1px;
    text-align: center;
    margin: 0;
}

@media (max-width: 768px) {
    .hbk1-hero { height: 230px; margin-top: 80px; }
    .hbk1-hero__inner { padding: 0 20px; }
    .hbk1-hero__title { font-size: 28px; line-height: 36px; }
}

/* ============================================================
   STEP INDICATORS
   ============================================================ */
.hbk1-steps {
    background: #fff;
    padding: 50px 0;
    margin-top: -150px;
}
@media (max-width: 768px) {
    .hbk1-steps {
    margin-top: 0;

    }
}
.hbk1-steps__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
}
.hbk1-step {
    position: relative;
    width: 205px;
    height: 205px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hbk1-step--active {
    background: #222;
}
.hbk1-step--inactive {
    background: #fff;
    border: 2px solid #e5e5e5;
}
.hbk1-step__num {
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 100px;
    line-height: 60px;
    margin-bottom: 8px;
}
.hbk1-step--active .hbk1-step__num {
    color: #d4af37;
}
.hbk1-step--inactive .hbk1-step__num {
    color: #e5e5e5;
}
.hbk1-step__label {
    position: absolute;
    bottom: 50px;
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
}
.hbk1-step--active .hbk1-step__label  { color: #fff; }
.hbk1-step--inactive .hbk1-step__label { color: #222; }

@media (max-width: 768px) {
    .hbk1-steps { padding: 30px 0; }
    .hbk1-steps__inner { padding: 0 20px; gap: 30px; }
    .hbk1-step { width: 130px; height: 130px; }
    .hbk1-step__num { font-size: 60px; line-height: 40px; }
    .hbk1-step__label { font-size: 14px; bottom: 30px; }
}

/* ============================================================
   BOOKING SECTION (form + summary)
   ============================================================ */
.hbk1-section {
    padding: 50px 0;
    background: #fff;
}
.hbk1-section__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 90px;
}
.hbk1-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 80px;
    align-items: start;
}
.hbk1-form-wrap {
    width: 100%;
    max-width: 673px;
}

@media (max-width: 1023px) {
    .hbk1-grid { grid-template-columns: 1fr; gap: 40px; }
    .hbk1-form-wrap { max-width: 100%; }
}
@media (max-width: 768px) {
    .hbk1-section__inner { padding: 0 20px; }
    .hbk1-section { padding: 30px 0; }
}

/* ============================================================
   FORM ROWS (Date|Time, Full name|Pax, Email|Phone)
   ============================================================ */
.hbk1-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    margin-bottom: 35px;
}
@media (max-width: 640px) {
    .hbk1-row { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 768px) {
    .hbk1-row--name-pax { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   FIELDS
   ============================================================ */
.hbk1-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.hbk1-field__label {
    color: #222;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.35px;
}
/* OR-logic indicator (npr. "ili telefon" pored "Email" label-a). Subtle hint
   da gost zna da nije oba required. */
.hbk1-field__hint {
    color: #888;
    font-weight: 400;
    font-size: 13px;
    font-style: italic;
    letter-spacing: 0.25px;
    margin-left: 4px;
}
.hbk1-field__wrap {
    position: relative;
}
.hbk1-field__input {
    width: 100%;
    height: 40px;
    background: #f5f5f5;
    border: 0;
    border-radius: 0;
    padding: 0 13px;
    color: #222;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.hbk1-field__input:focus {
    box-shadow: 0 0 0 2px #d4af37;
}
.hbk1-field__input::placeholder {
    color: rgba(34, 34, 34, 0.7);
}
.hbk1-field__input--date,
.hbk1-field__input--time {
    color: rgba(34, 34, 34, 0.7);
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
}
/* Sakri default browser ikone na date/time inputu (već imamo SVG u kontejneru) */
.hbk1-field__input--date::-webkit-calendar-picker-indicator,
.hbk1-field__input--time::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    width: 30px;
    height: 100%;
    position: absolute;
    right: 0;
}
.hbk1-field__icon {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* SELECT specifične izmjene — sakri default chevron, koristi naš SVG icon */
select.hbk1-field__input--time {
    cursor: pointer;
    background-image: none;
    padding-right: 40px;
}
select.hbk1-field__input--time:disabled {
    background-color: #f5f5f5;
    color: rgba(34, 34, 34, 0.4);
    cursor: not-allowed;
}

/* =============================================================================
   PREMIUM TIME PICKER (custom dropdown — paritet sa Hawaii gold dizajnom)
   Pair sa `app/views/tours/_detail_booking_inline_hawaii.php` (Time row).
   JS: hawaii-time-picker.js (delegated click handler).
   ============================================================================= */
.hbk1-time-picker {
    position: relative;
    width: 100%;
}
.hbk1-time-picker__native {
    /* Sakri native select — koristi se samo kao form value carrier */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    overflow: hidden;
}
.hbk1-time-picker__trigger {
    width: 100%;
    height: 40px;
    background: #f5f5f5;
    border: 0;
    padding: 0 40px 0 13px;
    color: #222;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}
.hbk1-time-picker__trigger:hover:not(:disabled) {
    background: #efe9d8;
}
.hbk1-time-picker__trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #d4af37;
}
.hbk1-time-picker__trigger:disabled {
    color: rgba(34, 34, 34, 0.4);
    cursor: not-allowed;
}
.hbk1-time-picker__value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(34, 34, 34, 0.7);
}
.hbk1-time-picker--has-value .hbk1-time-picker__value {
    color: #222;
    font-weight: 600;
}
.hbk1-time-picker__chevron {
    color: #9d6321;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.hbk1-time-picker--open .hbk1-time-picker__chevron {
    transform: rotate(180deg);
}

/* Dropdown lista */
.hbk1-time-picker__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 6px 0;
    background: #ffffff;
    border: 1px solid #d4af37;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(34, 34, 34, 0.18), 0 2px 6px rgba(34, 34, 34, 0.08);
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    /* Smooth open animacija */
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}
.hbk1-time-picker--open .hbk1-time-picker__menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}
.hbk1-time-picker__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    color: #222;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    outline: none;
}
.hbk1-time-picker__option:hover,
.hbk1-time-picker__option:focus-visible {
    background: linear-gradient(90deg, #9d6321 0%, #e2dc90 50%, #9d6321 100%);
    color: #ffffff;
}
.hbk1-time-picker__option.is-selected {
    background-color: rgba(212, 175, 55, 0.18);
    color: #222;
    font-weight: 600;
}
.hbk1-time-picker__option.is-selected::after {
    content: '✓';
    margin-left: auto;
    color: #d4af37;
    font-weight: 700;
    font-size: 14px;
}
.hbk1-time-picker__option:hover.is-selected::after,
.hbk1-time-picker__option:focus-visible.is-selected::after {
    color: #ffffff;
}
.hbk1-time-picker__option-time {
    font-variant-numeric: tabular-nums;
}

/* Scrollbar polish — Hawaii gold tint */
.hbk1-time-picker__menu::-webkit-scrollbar { width: 6px; }
.hbk1-time-picker__menu::-webkit-scrollbar-track { background: #f5f5f5; }
.hbk1-time-picker__menu::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 3px; }

/* ============================================================
   FLATPICKR THEME OVERRIDE — Hawaii brand boja (gold #d4af37)
   ============================================================ */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #d4af37 !important;
    border-color: #d4af37 !important;
    color: #fff !important;
}

.flatpickr-day.today {
    border-color: #d4af37 !important;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: #d4af37 !important;
    color: #fff !important;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.15) !important;
    box-shadow: -5px 0 0 rgba(212, 175, 55, 0.15), 5px 0 0 rgba(212, 175, 55, 0.15) !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #222 !important;
    font-family: 'Jost', sans-serif !important;
}

.flatpickr-weekdays .flatpickr-weekday {
    color: #666 !important;
    font-weight: 500 !important;
    font-family: 'Jost', sans-serif !important;
}

/* Hide native date picker icon (na flatpickr alt input je već skriven) */
.hbk1-field__input--date::-webkit-calendar-picker-indicator {
    display: none !important;
}
.hbk1-field__input--date {
    cursor: pointer;
}

/* ============================================================
   LOADING OVERLAY — full-screen spinner za FINISH BOOKING
   ============================================================ */
.hbk-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hbk-overlay-fade-in 0.2s ease-out;
}
.hbk-loading-overlay[hidden] {
    display: none !important;
}
.hbk-loading-overlay__card {
    background: #fff;
    border-radius: 12px;
    padding: 40px 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    text-align: center;
    min-width: 320px;
    max-width: 90vw;
    border: 1px solid rgba(212, 175, 55, 0.15);
}
.hbk-loading-overlay__spinner {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.hbk-loading-overlay__spinner svg {
    animation: hbk-spinner-rotate 1s linear infinite;
}
.hbk-loading-overlay__title {
    font-family: 'Jost', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0 0 8px;
    letter-spacing: 0.3px;
}
.hbk-loading-overlay__subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}
@keyframes hbk-overlay-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hbk-spinner-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* FINISH BOOKING button loading state — disabled + spinner inline */
.hbk1-btn--gold.is-loading,
[data-role="td-step-submit"].is-loading,
[data-role="td-step-submit"]:disabled {
    opacity: 0.7;
    cursor: wait !important;
    pointer-events: none;
    position: relative;
}
.hbk1-btn--gold.is-loading::after,
[data-role="td-step-submit"].is-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hbk-spinner-rotate 0.7s linear infinite;
    vertical-align: middle;
}

/* ============================================================
   PAX COUNTERS (Adults | Divider | Children)
   ============================================================ */
.hbk1-pax {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hbk1-pax__cell {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.hbk1-pax__label {
    color: #091733;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
}
.hbk1-pax__stepper {
    display: flex;
    align-items: center;
    gap: 21px;
}
.hbk1-pax__btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    color: #d4af37;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}
.hbk1-pax__btn--minus { background: rgba(34, 34, 34, 0.7); }
.hbk1-pax__btn--plus  { background: #222; }
.hbk1-pax__btn:hover:not(:disabled) { opacity: 0.85; }
.hbk1-pax__btn:disabled { cursor: not-allowed; opacity: 0.5; }

.hbk1-pax__value {
    color: #091733;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    min-width: 9px;
    text-align: center;
}
.hbk1-pax__divider {
    width: 1px;
    height: 55px;
    background: #d1d5db;
}

/* ============================================================
   PHONE PREFIX (+382 sa Montenegro flag)
   ============================================================ */
.hbk1-phone__prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    pointer-events: none;
}
.hbk1-phone__flag {
    width: 23px;
    height: 15px;
}
.hbk1-phone__code {
    color: rgba(34, 34, 34, 0.9);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
}
.hbk1-phone__sep {
    height: 40px;
    width: 1px;
    background: #d1d5db;
    margin-left: 4px;
}
/* .hbk1-field__input--phone {
    padding-left: 94px;
    padding-right: 13px;
} */

/* ============================================================
   ACTION BUTTONS (GO BACK | NEXT STEP)
   ============================================================ */
.hbk1-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.hbk1-btn {
    width: 227px;
    height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    border: 0;
    text-decoration: none;
}
.hbk1-btn--ghost {
    border: 1px solid #222;
    background: transparent;
    color: #222;
}
.hbk1-btn--ghost:hover { background: #f5f5f5; }
.hbk1-btn--gold {
    background: linear-gradient(to right, #9d6321, #e2dc90, #9d6321);
    color: #fff;
    font-weight: 700;
}
.hbk1-btn--gold:hover { opacity: 0.9; }

@media (max-width: 768px) {
    .hbk1-actions { flex-direction: column; gap: 15px; }
    .hbk1-btn { width: 100%; }
}

/* ============================================================
   RIGHT SUMMARY CARD
   ============================================================ */
.hbk1-summary {
    flex-shrink: 0;
}
.hbk1-summary__card {
    width: 533px;
    background: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.hbk1-summary__head {
    padding: 24px 24px 16px;
}
.hbk1-summary__tour {
    color: #222;
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 0.5px;
    margin: 0;
}
.hbk1-summary__duration {
    color: rgba(34, 34, 34, 0.7);
    font-size: 13px;
    margin: 8px 0 0;
}
.hbk1-summary__meta {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    font-size: 14px;
}
.hbk1-summary__meta-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hbk1-summary__meta-label {
    color: #d4af37;
    font-weight: 700;
    line-height: 17px;
    margin: 0;
}
.hbk1-summary__meta-value {
    color: #222;
    font-weight: 400;
    margin: 0;
}
.hbk1-summary__meta-note {
    color: #222;
    font-weight: 700;
    font-size: 12px;
    line-height: 17px;
    margin: 0;
}
.hbk1-summary__meta-divider {
    width: 1px;
    height: 35px;
    background: rgba(34, 34, 34, 0.1);
}
.hbk1-summary__total {
    background: #222;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hbk1-summary__total-label,
.hbk1-summary__total-amount {
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 25px;
    letter-spacing: 0.5px;
    margin: 0;
}
.hbk1-summary__total-amount strong { font-weight: 700; }

/* Akontacija (avans) + preostali iznos — prikazuje se ispod Total boxa kad
   admin traži avans. Vrijednosti iz server pricing quote-a; tour-booking.js
   skida `hidden` atribut. */
.hbk1-summary__deposit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px 4px;
}
.hbk1-summary__deposit[hidden] { display: none; }
.hbk1-summary__deposit-label {
    color: #222;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 15px;
}
.hbk1-summary__deposit-label small {
    color: #d4af37;
    font-weight: 700;
    margin-left: 4px;
}
.hbk1-summary__deposit-amount {
    color: #d4af37;
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
}
.hbk1-summary__deposit-balance {
    margin: 0;
    padding: 0 24px 16px;
    color: rgba(34, 34, 34, 0.7);
    font-size: 13px;
    line-height: 1.4;
}

/* Popust (tour discount) — vidljiv red iznad Total boxa kad server quote
   vrati discount.amount > 0. tour-booking.js skida `hidden` atribut. */
.hbk1-summary__discount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px 0;
}
.hbk1-summary__discount[hidden] { display: none; }
.hbk1-summary__discount-label {
    color: #222;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 15px;
}
.hbk1-summary__discount-amount {
    color: #16a34a;
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
}

.hbk1-summary__edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #666;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}
.hbk1-summary__edit:hover { color: #d4af37; }

@media (max-width: 1023px) {
    .hbk1-summary { width: 100%; }
    .hbk1-summary__card { width: 100%; }
}
@media (max-width: 640px) {
    .hbk1-summary__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .hbk1-summary__meta-divider { display: none; }
}

/* ============================================================
   STEP VISIBILITY (JS toggluje d-none)
   ============================================================ */
.hbk1-section .td-step.d-none { display: none !important; }

/* ============================================================
   NUKE INHERITED STYLES — pošto tour-detail.css definiše neke
   "globalne" rules koje mogu da utiču na ove elemente.
   ============================================================ */
.hbk1-section .td-bk2-stepper,
.hbk1-section .td-stepper {
    display: none !important;
}

/* ============================================================
   KORAK 2 — Heading + Review + T&C link (paritet sa templejtom)
   ============================================================ */

/* Eyebrow + h2 Total (sa gold underline) */
.hbk2-heading {
    margin-bottom: 50px;
}
.hbk2-heading__eyebrow {
    color: #d4af37;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.hbk2-heading__title {
    color: #222;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 45px;
    line-height: 49px;
    letter-spacing: 1px;
    margin: 0;
    position: relative;
    padding-bottom: 18px;
}
.hbk2-heading__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 3px;
    background: #d4af37;
}
@media (max-width: 768px) {
    .hbk2-heading__title { font-size: 32px; line-height: 36px; }
}

/* Information review */
.hbk2-review {
    margin-bottom: 50px;
}
.hbk2-review__intro {
    color: #222;
    font-size: 16px;
    line-height: 26px;
    margin: 0 0 12px;
}
.hbk2-review__lines {
    color: #222;
    font-size: 16px;
    line-height: 26px;
    margin: 0;
}
.hbk2-review__lines strong {
    font-weight: 700;
}

/* T&C link (paritet sa templejtom) */
.hbk2-tc-link {
    margin-top: 20px;
}
.hbk2-tc-link__text {
    color: #222;
    font-size: 14px;
    line-height: 26px;
    margin: 0;
}
.hbk2-tc-link__btn {
    font-weight: 800;
    text-decoration: underline;
    color: #222;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    transition: color 0.2s;
}
.hbk2-tc-link__btn:hover {
    color: #d4af37;
}

/* ============================================================
   KORAK 2 — collapsibles, pickup, payment cards, consent, modali
   ============================================================ */

/* Collapsible (extras, notes, promo) */
.hbk2-collapsible {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
}
.hbk2-collapsible__summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #222;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.35px;
}
.hbk2-collapsible__summary::-webkit-details-marker { display: none; }
.hbk2-collapsible__icon { color: #d4af37; font-size: 18px; }
.hbk2-collapsible__title { flex: 1; }
.hbk2-collapsible__chev { color: #888; transition: transform 0.2s; }
.hbk2-collapsible[open] .hbk2-collapsible__chev { transform: rotate(180deg); }
.hbk2-collapsible__body {
    padding: 16px 20px 20px;
    border-top: 1px solid #eee;
}

/* Extras list */
.hbk2-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.hbk2-extra:last-child { border-bottom: none; }
.hbk2-extra__label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1; }
.hbk2-extra__body strong { color: #222; font-weight: 600; display: block; }
.hbk2-extra__body small { color: rgba(34, 34, 34, 0.7); font-size: 12px; display: block; margin-top: 2px; }
.hbk2-extra__qty { display: flex; align-items: center; gap: 12px; }
.hbk2-extra__qty-input { width: 60px; height: 32px; background: #f5f5f5; border: 0; padding: 0 8px; text-align: center; }
.hbk2-extra__price { color: #d4af37; font-weight: 700; font-size: 14px; white-space: nowrap; }

/* Pickup */
.hbk2-pickup {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.hbk2-pickup__toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.hbk2-pickup__check { margin-top: 4px; accent-color: #d4af37; }
.hbk2-pickup__body strong { color: #222; font-weight: 600; display: block; margin-bottom: 4px; }
.hbk2-pickup__body strong i { color: #d4af37; margin-right: 6px; }
.hbk2-pickup__body small { color: rgba(34, 34, 34, 0.7); font-size: 13px; }
.hbk2-pickup__addr.d-none { display: none; }

/* Payment radio cards */
.hbk2-pay-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .hbk2-pay-methods { grid-template-columns: 1fr; }
}
.hbk2-pay-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fafafa;
    border: 2px solid #e5e5e5;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.hbk2-pay-card:hover { border-color: #d4af37; }
.hbk2-pay-card.is-checked,
.hbk2-pay-card:has(input:checked) {
    border-color: #d4af37;
    background: #fff;
}
.hbk2-pay-card__radio { position: absolute; opacity: 0; pointer-events: none; }
.hbk2-pay-card__icon { font-size: 32px; color: #d4af37; line-height: 1; }
.hbk2-pay-card__body { flex: 1; min-width: 0; }
.hbk2-pay-card__title { color: #222; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 14px; display: block; margin-bottom: 2px; }
.hbk2-pay-card__desc { color: rgba(34, 34, 34, 0.7); font-size: 12px; display: block; }
.hbk2-pay-card__check { color: #d4af37; font-size: 18px; opacity: 0; transition: opacity 0.2s; }
.hbk2-pay-card.is-checked .hbk2-pay-card__check,
.hbk2-pay-card:has(input:checked) .hbk2-pay-card__check { opacity: 1; }

/* Payment info reveal blocks */
.hbk2-pay-info,
.hbk2-pay-fields {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 20px;
    margin-bottom: 20px;
}

/* Consent (T&C checkbox) */
.hbk2-consent {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.hbk2-consent__label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.hbk2-consent__check { margin-top: 4px; accent-color: #d4af37; }
.hbk2-consent__body { color: #222; font-size: 14px; line-height: 22px; }
.hbk2-consent__link {
    color: #d4af37;
    font-weight: 600;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}
.hbk2-consent__link:hover { color: #b3941f; }

/* Policy modal (T&C / Privacy) */
.td-policy-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.td-policy-modal[hidden] { display: none !important; }
.td-policy-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(34, 34, 34, 0.7);
    cursor: pointer;
}
.td-policy-modal__dialog {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 980px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.td-policy-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
}
.td-policy-modal__title {
    color: #222;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 24px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.td-policy-modal__title i { color: #d4af37; }
.td-policy-modal__close { background: none; border: 0; font-size: 20px; color: #222; cursor: pointer; }
.td-policy-modal__close:hover { color: #d4af37; }
.td-policy-modal__body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
    color: #222;
    font-size: 16px;
    line-height: 26px;
}
.td-policy-modal__footer {
    padding: 20px 30px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
}
.td-policy-modal__cta {
    height: 41px;
    padding: 0 32px;
    background: linear-gradient(to right, #9d6321, #e2dc90, #9d6321);
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
}
.td-policy-modal__cta:hover { opacity: 0.9; }

/* Pomoć: kompenzacija pošto tour-detail.css `.td-step.d-none` već radi */
.d-none { display: none !important; }