/**
 * HotelHuddle Hub-Specific CSS
 * Styles for hotelhuddle.com homepage — nav dropdowns, brand scroller, hub tabs, footer
 * Version: 20260728a
 */

/* ===== Navigation Dropdowns ===== */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: flex; align-items: center; gap: .25rem; cursor: pointer; background: none; border: none; font: inherit; color: inherit; padding: .5rem .75rem; }
.nav-dropdown-toggle::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; margin-left: .25rem; opacity: .6; }
.nav-dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.nav-chevron { width: 12px; height: 12px; transition: transform .2s ease; flex-shrink: 0; opacity: .6; }
.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--border-subtle, rgba(0,0,0,.08)); border-radius: 0 0 10px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .5rem 0; z-index: 200; }
.nav-dropdown-menu.is-open { display: block; }
.nav-dropdown-link { display: block; padding: .5rem 1rem; color: var(--text-primary, #1a1d2e); text-decoration: none; font-size: .875rem; transition: background .15s; white-space: nowrap; }
.nav-dropdown-link:hover { background: var(--bg-card-active, rgba(30,58,95,.08)); text-decoration: none; }
.nav-dropdown-sub { position: relative; }
.nav-dropdown-sub > .nav-dropdown-link::after { content: '→'; float: right; opacity: .4; }
.nav-dropdown-sub .nav-dropdown-menu { top: 0; left: 100%; border-radius: 10px; }
.nav-item--login .nav-dropdown-menu { right: 0; left: auto; }

/* ===== Brand Scroller ===== */
.hh-brand-scroller { overflow: hidden; padding: 2rem 0; background: var(--bg-primary, #F8F9FC); }
.hh-brand-scroller-overflow { overflow: hidden; width: 100%; }
.hh-brand-scroller-track { display: flex; gap: 1.5rem; animation: brand-scroll 30s linear infinite; width: max-content; }
.hh-brand-scroller-track:hover { animation-play-state: paused; }
@keyframes brand-scroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* ===== Hub Tabs ===== */
.hub-tabs-container { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: .75rem auto 1rem; padding: 0 2rem; box-sizing: border-box; min-width: 0; }
.hub-tabs { display: flex; flex-wrap: wrap; gap: 2px; background: rgba(0,0,0,.08); border-radius: 10px 10px 0 0; padding: 3px 3px 0; }
.hub-tab { flex: 1; min-width: 120px; padding: .65rem 1rem; border: none; background: transparent; color: var(--text-muted, #5a6078); font-size: .85rem; font-weight: 600; cursor: pointer; border-radius: 8px 8px 0 0; transition: background .2s, color .2s; text-align: center; }
.hub-tab:hover { background: rgba(0,0,0,.04); color: var(--text-primary, #1a1d2e); }
.hub-tab.active { background: #fff; color: var(--accent, #1e3a5f); font-weight: 700; }
.hub-tab-panels { background: #fff; border-radius: 0 0 12px 12px; padding: 1.5rem; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.hub-tab-panel { display: none; }
.hub-tab-panel.active { display: block; }
.hub-tab-heading { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #1a1d2e); margin: 0 0 .25rem; }
.hub-tab-desc { font-size: .875rem; color: var(--text-muted, #5a6078); margin: 0 0 1rem; }
.hub-form-wrapper { min-height: 100px; }

/* ===== Hero Text Row ===== */
.hh-hero-text-row { display: flex; align-items: center; gap: 2rem; width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; min-width: 0; }

/* ===== Main Content ===== */
.hh-main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }

/* ===== Footer Legal ===== */
.hh-footer-legal { border-top: 1px solid rgba(255,255,255,.1); padding: 1.5rem 2rem; text-align: center; }
.hh-footer-legal-links { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; font-size: .8rem; }
.hh-footer-legal-links a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
.hh-footer-legal-links a:hover { color: rgba(255,255,255,.9); text-decoration: underline; }
.hh-footer-legal-sep { color: rgba(255,255,255,.3); }

/* ===== Typed Text ===== */
.typed-text { display: inline; }

/* ===== Time Slot Field ===== */
.hero-field-time { flex: 1 1 150px; min-width: 0; }
.hero-field-time .form-select { width: 100%; padding: .625rem 2.5rem .625rem 1rem; background: var(--bg, #f8f9fc); color: var(--text, #1a1d2e); border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 8px; font-size: .9rem; outline: 0; transition: border-color .2s; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eaf2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px; }
.hero-field-time .form-select:focus { border-color: var(--accent, #1e3a5f); }

/* ===== Price Field ===== */
.hero-field-price { flex: 0 0 120px; max-width: 120px; }
.hero-price-input-wrapper { position: relative; }
.hero-price-prefix { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1rem; font-weight: 700; color: var(--text-muted, #5a6078); pointer-events: none; z-index: 1; }
.hero-price-input { width: 100%; padding: .625rem 1rem .625rem 2rem !important; background: var(--bg, #f8f9fc); color: var(--text, #1a1d2e); border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 8px; font-size: .9rem; outline: 0; transition: border-color .2s; -moz-appearance: textfield; }
.hero-price-input::-webkit-inner-spin-button, .hero-price-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hero-price-input:focus { border-color: var(--accent-2, #1a2d4a); }
.hero-price-input::placeholder { color: var(--text-muted, #5a6078); }

/* ===== Multi-Destination (BMT) Form ===== */
.hero-form.hero-form--itinerary { display: flex; flex-direction: column; gap: 0; background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; flex-wrap: nowrap !important; align-items: stretch !important; }
.bmt-actions { display: flex; flex-direction: row; gap: .75rem; margin-top: .75rem; }
.bmt-actions .bmt-add-dest-btn { flex: 1; justify-content: center; }
.bmt-actions .hero-submit-btn { flex: 1; }
.bmt-dest-row { display: flex; align-items: flex-start; gap: .5rem; padding: .625rem .75rem; background: var(--bg, #f8f9fc); border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 12px; margin-bottom: .75rem; position: relative; }
.bmt-dest-row:first-child { margin-top: 10px; }
.bmt-dest-number { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; background: var(--accent, #1e3a5f); color: #fff; font-size: .75rem; font-weight: 700; border-radius: 50%; margin-top: .5rem; }
.bmt-dest-remove { position: absolute; top: 4px; right: 8px; background: none; border: none; color: var(--text-muted, #5a6078); font-size: 1.25rem; cursor: pointer; line-height: 1; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .2s, color .2s; }
.bmt-dest-remove:hover { background: rgba(220,38,38,.1); color: #dc2626; }
.bmt-dest-fields { flex: 1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.bmt-dest-city { flex: 1.8; min-width: 120px; }
.bmt-dest-dates { flex: 1.4; min-width: 140px; }
.bmt-dest-rooms { flex: 2.2; min-width: 0; display: flex; flex-direction: column; gap: .25rem; align-items: stretch; }
.bmt-dest-rooms .bmt-room-selectors-row { display: flex; flex-direction: row; gap: .5rem; align-items: center; }
.bmt-city-autocomplete, .bmt-date-input { width: 100%; padding: .625rem 1rem; background: #fff; color: var(--text, #1a1d2e); border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 8px; font-size: .9rem; outline: 0; transition: border-color .2s; }
.bmt-city-autocomplete:focus, .bmt-date-input:focus { border-color: var(--accent, #1e3a5f); }
.bmt-city-autocomplete::placeholder, .bmt-date-input::placeholder { color: var(--text-muted, #5a6078); }
.bmt-room-selector { display: flex; flex-direction: column; gap: .2rem; }
.bmt-room-selector-label { font-size: .7rem; font-weight: 700; color: #5a6078; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.bmt-room-selector-control { display: flex; align-items: center; gap: 0; }
.bmt-room-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border, rgba(0,0,0,.08)); background: var(--bg, #f8f9fc); color: var(--text, #1a1d2e); border-radius: 8px; cursor: pointer; transition: background .2s, border-color .2s; flex-shrink: 0; }
.bmt-room-btn:hover { background: var(--accent, #1e3a5f); color: #fff; border-color: var(--accent, #1e3a5f); }
.bmt-room-btn svg { width: 14px; height: 14px; }
.bmt-room-select { width: 44px; height: 28px; text-align: center; border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 0; background: #fff; color: var(--text, #1a1d2e); font-size: .8rem; font-weight: 700; padding: 0 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; outline: 0; }
.bmt-room-select:focus { border-color: var(--accent, #1e3a5f); }
.bmt-add-dest-wrapper { display: flex; justify-content: space-between; align-items: center; margin: .5rem 0 0; gap: 12px; }
.bmt-add-dest-btn { display: inline-flex; align-items: center; gap: 4px; padding: 10px 28px; background: var(--accent, #1e3a5f); color: #fff; border: 2px solid var(--accent, #1e3a5f); border-radius: 6px; font-size: .95rem; font-weight: 700; cursor: pointer; transition: all .2s; font-family: inherit; }
.bmt-add-dest-btn:hover { background: #2a5298; border-color: #2a5298; }
.bmt-add-icon { font-size: 1.1rem; font-weight: 700; line-height: 1; }
.bmt-cost-summary { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 0; font-size: .9rem; color: var(--text-muted, #5a6078); border-top: 1px solid var(--border, rgba(0,0,0,.08)); margin-top: .5rem; }
.bmt-cost-label { font-weight: 700; color: var(--text, #1a1d2e); }
.bmt-cost-detail { color: var(--text-muted, #5a6078); }

@media (max-width: 768px) {
    .bmt-dest-fields { flex-direction: column; }
    .bmt-dest-city, .bmt-dest-dates { flex: 1 1 100%; min-width: 0; }
    .bmt-dest-rooms { flex: 1 1 100%; min-width: 0; flex-direction: column; align-items: stretch; }
    .bmt-dest-rooms .bmt-room-selectors-row { flex-direction: column; }
    .bmt-dest-row { padding: .75rem; }
}