/* ===================================================================
   Experiencia Turismo — Tours Portal
   loja.css — Main stylesheet  (redesign 2025)
   =================================================================== */

/* CSS VARIABLES */
:root {
    /* Brand colours */
    --primary:           #6366f1;
    --primary-dark:      #4f46e5;
    --primary-light:     #eef2ff;
    --primary-rgb:       99, 102, 241;

    --secondary:         #f97316;
    --secondary-dark:    #ea6c0a;
    --secondary-light:   #fff7ed;
    --secondary-rgb:     249, 115, 22;

    /* Neutrals */
    --bg:                #ffffff;
    --surface:           #f8fafc;
    --text:              #0f172a;
    --text-2:            #475569;
    --text-3:            #94a3b8;
    --border:            #e2e8f0;
    --white:             #ffffff;

    /* Feedback */
    --success:           #22c55e;
    --success-light:     #f0fdf4;
    --warning:           #f59e0b;
    --warning-light:     #fffbeb;
    --danger:            #ef4444;
    --danger-light:      #fef2f2;
    --info:              #3b82f6;
    --info-light:        #eff6ff;

    /* Shadows */
    --shadow-xs:         0 1px 2px  rgba(0,0,0,.05);
    --shadow-sm:         0 2px 6px  rgba(0,0,0,.07);
    --shadow:            0 2px 12px rgba(0,0,0,.08);
    --shadow-md:         0 4px 20px rgba(0,0,0,.10);
    --shadow-lg:         0 8px 36px rgba(0,0,0,.13);
    --shadow-xl:         0 16px 56px rgba(0,0,0,.16);

    /* Radii */
    --radius-xs:         6px;
    --radius-sm:         10px;
    --radius:            14px;
    --radius-lg:         20px;
    --radius-xl:         28px;

    /* Motion */
    --transition:        0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --header-h:          80px;

    /* Typography */
    --font:              'Inter', system-ui, -apple-system, sans-serif;
}

/* RESET & BASE */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    scroll-behavior:       smooth;
    font-size:             16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:              var(--font);
    font-size:                1rem;
    line-height:              1.6;
    color:                    var(--text);
    background-color:         var(--bg);
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
}

a {
    color:           var(--primary);
    text-decoration: none;
    transition:      color var(--transition);
}
a:hover { color: var(--primary-dark); }

img {
    max-width:  100%;
    height:     auto;
    display:    block;
}

ul   { list-style: none; padding: 0; margin: 0; }
select, input, textarea, button { font-family: var(--font); }

h1, h2, h3, h4, h5, h6 {
    font-weight:  700;
    color:        var(--text);
    line-height:  1.25;
}

/* UTILITIES */
.container {
    max-width: 1440px;
    margin:    0 auto;
    padding:   0 1.25rem;
    width:     100%;
}

.sr-only {
    position:  absolute;
    width:     1px;
    height:    1px;
    padding:   0;
    margin:    -1px;
    overflow:  hidden;
    clip:      rect(0,0,0,0);
    white-space: nowrap;
    border:    0;
}

.text-primary   { color: var(--primary)   !important; }
.text-secondary { color: var(--secondary) !important; }
.text-muted     { color: var(--text-2)    !important; }
.text-sm        { font-size: 0.875rem; }
.text-xs        { font-size: 0.75rem;  }
.fw-medium      { font-weight: 500; }
.fw-semibold    { font-weight: 600; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem;  }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem;    }

.rounded-pill   { border-radius: 50rem !important; }
.overflow-hidden { overflow: hidden; }

/* Generic badges */
.badge-primary {
    display:        inline-flex;
    align-items:    center;
    padding:        0.2rem 0.6rem;
    border-radius:  50rem;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background:     var(--primary);
    color:          var(--white);
}
.badge-secondary {
    background: var(--secondary);
    color:      var(--white);
}
.badge-success {
    background: rgba(34,197,94,.12);
    color:      #15803d;
}
.badge-warning {
    background: rgba(245,158,11,.12);
    color:      #b45309;
}
.badge-danger {
    background: rgba(239,68,68,.12);
    color:      #b91c1c;
}
.badge-info {
    background: rgba(59,130,246,.12);
    color:      #1d4ed8;
}
.badge-outline {
    background:  transparent;
    border:      1.5px solid var(--border);
    color:       var(--text-2);
}

/* BUTTONS */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.4rem;
    font-weight:     600;
    font-size:       0.9rem;
    line-height:     1;
    border:          none;
    border-radius:   var(--radius-sm);
    cursor:          pointer;
    text-decoration: none;
    padding:         0.625rem 1.25rem;
    transition:      background-color var(--transition),
                     box-shadow var(--transition),
                     transform var(--transition),
                     color var(--transition),
                     border-color var(--transition);
    white-space:     nowrap;
    user-select:     none;
}
.btn:focus-visible {
    outline:        2px solid var(--primary);
    outline-offset: 3px;
}
.btn:active { transform: scale(0.98) !important; }

/* Primary */
.btn-primary {
    background: var(--primary);
    color:      var(--white);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background:  var(--primary-dark);
    color:       var(--white);
    transform:   scale(1.02);
    box-shadow:  0 4px 18px rgba(var(--primary-rgb), .38);
}

/* Secondary / orange */
.btn-secondary {
    background: var(--secondary);
    color:      var(--white);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--secondary-dark);
    color:      var(--white);
    transform:  scale(1.02);
    box-shadow: 0 4px 18px rgba(var(--secondary-rgb), .38);
}

/* Outline */
.btn-outline {
    background:   transparent;
    border:       2px solid var(--primary);
    color:        var(--primary);
}
.btn-outline:hover,
.btn-outline:focus-visible {
    background:  var(--primary);
    color:       var(--white);
    transform:   scale(1.02);
    box-shadow:  0 4px 14px rgba(var(--primary-rgb), .30);
}

.btn-outline-primary {
    background:   transparent;
    border:       2px solid var(--primary) !important;
    color:        var(--primary) !important;
    font-weight:  600;
    transition:   all var(--transition);
}
.btn-outline-primary:hover {
    background:  var(--primary) !important;
    color:       var(--white) !important;
    transform:   scale(1.02);
}

/* Ghost */
.btn-ghost {
    background:   transparent;
    color:        var(--text-2);
    border:       1.5px solid var(--border);
}
.btn-ghost:hover {
    background:  var(--surface);
    color:       var(--text);
    border-color: var(--text-3);
    transform:   scale(1.02);
}

.btn-ghost-icon {
    background:   transparent;
    border:       none;
    color:        var(--text);
    padding:      0.35rem 0.5rem;
    border-radius: var(--radius-xs);
    transition:   background-color var(--transition), color var(--transition);
    display:      inline-flex;
    align-items:  center;
    text-decoration: none;
    font-size:    1.1rem;
}
.btn-ghost-icon:hover {
    background-color: var(--primary-light);
    color:            var(--primary);
}

/* WhatsApp button */
.btn-wa {
    background:  #25d366;
    color:       var(--white);
    font-weight: 600;
    border:      none;
    transition:  background-color var(--transition), transform var(--transition);
}
.btn-wa:hover {
    background: #1ebe5d;
    color:      var(--white);
    transform:  translateY(-1px);
}

/* Size modifiers */
.btn-sm  { padding: 0.4rem 0.85rem;  font-size: 0.8rem; }
.btn-lg  { padding: 0.8rem 1.75rem;  font-size: 1rem; }
.btn-xl  { padding: 1rem 2.25rem;    font-size: 1.05rem; }
.btn-block { width: 100%; }

/* Loading state */
.btn-loading { position: relative; pointer-events: none; opacity: .72; }
.btn-loading::after {
    content:      '';
    position:     absolute;
    right:        0.75rem;
    top:          50%;
    transform:    translateY(-50%);
    width:        14px;
    height:       14px;
    border:       2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation:    spin .6s linear infinite;
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* INPUTS */
.form-control,
.form-select {
    width:       100%;
    border:      1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size:   0.875rem;
    font-family: var(--font);
    color:       var(--text);
    padding:     0.6rem 0.9rem;
    background:  var(--white);
    transition:  border-color var(--transition), box-shadow var(--transition);
    line-height: 1.5;
    appearance:  none;
    -webkit-appearance: none;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(var(--primary-rgb), .16);
    outline:      none;
}
.form-control::placeholder { color: var(--text-3); }
.form-control.is-invalid,
.form-select.is-invalid  { border-color: var(--danger); }
.form-control.is-valid,
.form-select.is-valid    { border-color: var(--success); }

.invalid-feedback {
    font-size:  0.78rem;
    color:      var(--danger);
    margin-top: 0.25rem;
}
.valid-feedback {
    font-size:  0.78rem;
    color:      var(--success);
    margin-top: 0.25rem;
}
.form-text  { font-size: 0.78rem; color: var(--text-2); margin-top: 0.25rem; }
.form-label { font-size: 0.85rem; font-weight: 500; color: var(--text); margin-bottom: 0.35rem; }

.input-group {
    display:   flex;
    position:  relative;
    align-items: stretch;
}
.input-group .form-control { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .btn           { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; flex-shrink: 0; }
.input-group-icon {
    position:  absolute;
    left:      0.85rem;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--text-3);
    font-size: 0.95rem;
    pointer-events: none;
}
.input-group .form-control.has-icon { padding-left: 2.4rem; }

/* NAVBAR */
.et-navbar {
    position:     fixed;
    top:          0;
    left:         0;
    right:        0;
    z-index:      1040;
    height:       var(--header-h);
    background:   var(--white);
    border-bottom: 1px solid var(--border);
    display:      flex;
    align-items:  center;
    transition:   height var(--transition),
                  box-shadow var(--transition),
                  background-color var(--transition);
}
.et-navbar .container {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    height:          100%;
}

.et-navbar.scrolled {
    height:           64px;
    backdrop-filter:  blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background:       rgba(255,255,255,.92);
    box-shadow:       var(--shadow-md);
}

/* Brand */
.et-brand {
    display:         flex;
    align-items:     center;
    gap:             0.6rem;
    text-decoration: none;
    color:           var(--text);
    flex-shrink:     0;
}
/* brand-monogram = the square icon box with "ET" */
.brand-monogram {
    width:           40px;
    height:          40px;
    background:      linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius:   var(--radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    font-size:       0.85rem;
    font-weight:     800;
    letter-spacing:  -0.5px;
    flex-shrink:     0;
    box-shadow:      0 2px 8px rgba(var(--primary-rgb),.35);
}
.brand-icon {
    width:           40px;
    height:          40px;
    background:      linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius:   var(--radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--white);
    font-size:       1.15rem;
    flex-shrink:     0;
    box-shadow:      0 2px 8px rgba(var(--primary-rgb),.3);
}
.brand-text {
    display:        flex;
    flex-direction: column;
    line-height:    1.15;
}
.brand-main {
    font-size:   0.95rem;
    font-weight: 700;
    color:       var(--text);
}
.brand-sub {
    font-size:      0.7rem;
    font-weight:    500;
    color:          var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Nav links — higher specificity to beat Bootstrap's navbar-light .navbar-nav .nav-link */
.et-navbar .navbar-nav .nav-link,
.et-navbar .nav-link {
    font-size:     0.88rem;
    font-weight:   500;
    color:         var(--text-2) !important;
    padding:       0.4rem 0.85rem;
    border-radius: var(--radius-sm);
    transition:    background-color var(--transition), color var(--transition);
}
.et-navbar .navbar-nav .nav-link:hover,
.et-navbar .navbar-nav .nav-link.active,
.et-navbar .nav-link:hover,
.et-navbar .nav-link.active {
    color:            var(--primary) !important;
    background-color: var(--primary-light);
}

/* Cart badge */
.cart-badge {
    position:        absolute;
    top:             -4px;
    right:           -4px;
    min-width:       18px;
    height:          18px;
    background:      var(--secondary);
    color:           var(--white);
    font-size:       0.62rem;
    font-weight:     700;
    border-radius:   50rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0 4px;
    line-height:     1;
    pointer-events:  none;
}

/* Language buttons */
.lang-switcher { display: flex; align-items: center; gap: 2px; }
.lang-btn {
    background:    transparent;
    border:        1px solid var(--border);
    border-radius: var(--radius-xs);
    padding:       0.2rem 0.45rem;
    font-size:     0.72rem;
    font-weight:   600;
    color:         var(--text-2);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    gap:           3px;
    transition:    border-color var(--transition), color var(--transition), background-color var(--transition);
    line-height:   1.5;
}
.lang-btn:hover          { border-color: var(--primary); color: var(--primary); }
.lang-btn--active        { background: var(--primary); border-color: var(--primary); color: var(--white); }
.lang-flag               { font-size: 0.9rem; line-height: 1; }
.lang-label              { letter-spacing: 0.03em; }
.navbar-toggler:focus    { box-shadow: none; }

/* Navbar spacer (push content below fixed bar) */
.navbar-offset { margin-top: var(--header-h); }

/* HERO */
.catalog-hero {
    position:    relative;
    min-height:  520px;
    background:  linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:       var(--white);
    display:     flex;
    align-items: center;
    overflow:    hidden;
    padding:     4rem 0 3rem;
}
.catalog-hero::before {
    content:     '';
    position:    absolute;
    inset:       0;
    background:  url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.catalog-hero::after {
    content:    '';
    position:   absolute;
    bottom:     -2px;
    left:       0;
    right:      0;
    height:     56px;
    background: var(--white);
    clip-path:  ellipse(55% 100% at 50% 100%);
}

.catalog-hero .container { position: relative; z-index: 2; }

.catalog-hero h1 {
    font-size:     2.5rem;
    font-weight:   800;
    color:         var(--white);
    margin-bottom: 0.75rem;
    line-height:   1.15;
}
.catalog-hero p {
    color:      rgba(255,255,255,.85);
    font-size:  1.1rem;
    max-width:  580px;
    margin-bottom: 1.75rem;
}

/* Hero search box */
.hero-search-box {
    background:    var(--white);
    border-radius: var(--radius-xl);
    box-shadow:    var(--shadow-xl);
    display:       flex;
    align-items:   center;
    padding:       0.5rem 0.5rem 0.5rem 1.25rem;
    max-width:     560px;
    gap:           0.5rem;
}
.hero-search-box .hero-search-icon {
    color:      var(--primary);
    font-size:  1.1rem;
    flex-shrink: 0;
}
.hero-search-box input {
    flex:        1;
    border:      none;
    outline:     none;
    font-size:   0.95rem;
    color:       var(--text);
    background:  transparent;
    font-family: var(--font);
    min-width:   0;
}
.hero-search-box input::placeholder { color: var(--text-3); }
.hero-search-box .btn {
    border-radius: var(--radius-lg);
    flex-shrink:   0;
}

/* Hero chips (glass pills) */
.hero-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    margin-top: 1.25rem;
}
.hero-chip {
    display:        inline-flex;
    align-items:    center;
    gap:            0.35rem;
    padding:        0.3rem 0.9rem;
    border-radius:  50rem;
    background:     rgba(255,255,255,.20);
    backdrop-filter: blur(8px);
    color:          var(--white);
    font-size:      0.82rem;
    font-weight:    500;
    text-decoration: none;
    border:         1px solid rgba(255,255,255,.25);
    transition:     background-color var(--transition);
    cursor:         pointer;
}
.hero-chip:hover {
    background: rgba(255,255,255,.32);
    color:      var(--white);
}

/* Legacy page-hero */
.page-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:      var(--white);
    padding:    3.5rem 0 2.5rem;
    position:   relative;
    overflow:   hidden;
}
.page-hero::before {
    content:     '';
    position:    absolute;
    inset:       0;
    background:  url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.page-hero h1  { color: var(--white); font-size: 2.2rem; margin-bottom: 0.5rem; }
.page-hero p   { color: rgba(255,255,255,.8); font-size: 1.05rem; max-width: 560px; }

/* FILTER BAR */
.filter-bar {
    background:    var(--white);
    border-bottom: 1px solid var(--border);
    padding:       0.7rem 0;
    position:      sticky;
    top:           var(--header-h);
    z-index:       100;
    box-shadow:    var(--shadow-xs);
}
.filter-bar-inner {
    display:     flex;
    align-items: center;
    gap:         0.45rem;
    overflow-x:  auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding:     0 0.25rem;
}
.filter-bar-inner::-webkit-scrollbar { display: none; }

.filter-pill {
    display:      inline-flex;
    align-items:  center;
    gap:          0.35rem;
    padding:      0.38rem 1rem;
    border:       1.5px solid var(--border);
    border-radius: 50rem;
    font-size:    0.83rem;
    font-weight:  500;
    color:        var(--text-2);
    background:   var(--white);
    cursor:       pointer;
    white-space:  nowrap;
    transition:   all var(--transition);
    text-decoration: none;
    flex-shrink:  0;
}
.filter-pill:hover {
    border-color:     var(--primary);
    color:            var(--primary);
    background-color: var(--primary-light);
}
.filter-pill.active {
    border-color:     var(--primary);
    background-color: var(--primary);
    color:            var(--white);
    font-weight:      600;
}
.filter-pill.active .filter-pill-count { opacity: 0.75; }

.filter-pill-count {
    font-size:   0.72rem;
    font-weight: 600;
    opacity:     0.55;
    margin-left: 1px;
}
.filter-bar-sep {
    width:        1px;
    height:       24px;
    background:   var(--border);
    flex-shrink:  0;
    margin:       0 0.1rem;
}

/* CATEGORY CARDS */
.categories-scroll {
    display:    flex;
    gap:        1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding:    0.25rem 0 1rem;
}
.categories-scroll::-webkit-scrollbar { display: none; }

.cat-card {
    flex-shrink:     0;
    width:           160px;
    min-height:      180px;
    background:      var(--white);
    border:          1.5px solid var(--border);
    border-radius:   var(--radius);
    padding:         1.25rem 1rem 1rem;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             0.6rem;
    text-decoration: none;
    color:           inherit;
    transition:      transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    box-shadow:      var(--shadow-xs);
    cursor:          pointer;
}
.cat-card:hover {
    transform:   translateY(-4px);
    box-shadow:  var(--shadow-lg);
    border-color: var(--primary);
    color:        inherit;
}

.cat-card-icon {
    width:           64px;
    height:          64px;
    border-radius:   var(--radius);
    background:      linear-gradient(135deg, var(--primary-light) 0%, rgba(99,102,241,.15) 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.75rem;
    flex-shrink:     0;
    transition:      background var(--transition);
}
.cat-card:hover .cat-card-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.cat-card:hover .cat-card-icon i { color: var(--white); }

.cat-card-name {
    font-size:   0.88rem;
    font-weight: 600;
    color:       var(--text);
    line-height: 1.3;
}
.cat-card-count {
    font-size:   0.75rem;
    color:       var(--text-3);
    font-weight: 500;
}

/* SECTION HEADINGS */
.section-heading {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.5rem;
    flex-wrap:       wrap;
}
.section-heading-text { flex: 1; min-width: 0; }
.section-title {
    font-size:     1.75rem;
    font-weight:   700;
    color:         var(--text);
    margin-bottom: 0.2rem;
    line-height:   1.2;
}
.section-subtitle {
    font-size: 1rem;
    color:     var(--text-2);
}
.section-cta-link {
    display:     inline-flex;
    align-items: center;
    gap:         0.3rem;
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--primary);
    white-space: nowrap;
    transition:  gap var(--transition), color var(--transition);
}
.section-cta-link:hover {
    color: var(--primary-dark);
    gap:   0.55rem;
}

/* TOUR CARD */
.tour-card {
    background:      var(--white);
    border-radius:   var(--radius);
    overflow:        hidden;
    border:          1.5px solid var(--border);
    box-shadow:      var(--shadow-sm);
    transition:      transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display:         flex;
    flex-direction:  column;
    position:        relative;
}
.tour-card:hover {
    transform:    translateY(-3px);
    box-shadow:   var(--shadow-md);
    border-color: rgba(var(--primary-rgb), .2);
}

.tour-card-link {
    display:        flex;
    flex-direction: column;
    flex:           1;
    text-decoration: none;
    color:          inherit;
}

/* Image wrapper */
.tour-card-img-wrap {
    position:   relative;
    overflow:   hidden;
    height:     220px;
    flex-shrink: 0;
    background: var(--surface);
}
.tour-card-img {
    width:      100%;
    height:     220px;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-card:hover .tour-card-img { transform: scale(1.04); }

.tour-card-img-placeholder {
    width:           100%;
    height:          220px;
    background:      linear-gradient(135deg, var(--primary-light), var(--border));
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--primary);
    font-size:       2.5rem;
    flex-shrink:     0;
}

/* Badges on image */
.tour-card-badges {
    position: absolute;
    top:      12px;
    left:     12px;
    display:  flex;
    flex-wrap: wrap;
    gap:      5px;
    z-index:  2;
}
.tour-card-badge {
    padding:        0.2rem 0.6rem;
    border-radius:  50rem;
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height:    1.4;
}
.badge-hot          { background: var(--secondary); color: var(--white); }
.badge-new          { background: var(--primary);   color: var(--white); }
.badge-free-cancel  { background: var(--success-light); color: #15803d; font-size: 0.65rem; }

/* Favourite heart button */
.tour-card-fav {
    position:        absolute;
    top:             10px;
    right:           10px;
    z-index:         3;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      rgba(255,255,255,.88);
    border:          none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    font-size:       1rem;
    color:           var(--text-3);
    transition:      background-color var(--transition), color var(--transition), transform var(--transition);
    backdrop-filter: blur(4px);
}
.tour-card-fav:hover         { background: var(--white); color: var(--danger); transform: scale(1.12); }
.tour-card-fav.is-fav        { color: var(--danger); background: var(--white); }

/* Card body */
.tour-card-body {
    padding:        1rem 1.1rem;
    display:        flex;
    flex-direction: column;
    flex:           1;
}
.tour-card-title {
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--text);
    line-height: 1.35;
    margin-bottom: 0.5rem;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}
.tour-card-meta {
    font-size:   0.78rem;
    color:       var(--text-2);
    display:     flex;
    align-items: center;
    gap:         0.65rem;
    margin-bottom: 0.75rem;
    flex-wrap:   wrap;
}
.tour-card-meta i    { color: var(--primary); font-size: 0.7rem; }
.tour-card-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Rating stars */
.tour-card-stars {
    display:     inline-flex;
    align-items: center;
    gap:         0.15rem;
    color:       #f59e0b;
    font-size:   0.75rem;
}
.tour-card-stars-count { color: var(--text-3); font-size: 0.72rem; margin-left: 0.15rem; }

/* Card footer (price + CTA) */
.tour-card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto;
    padding-top:     0.85rem;
    border-top:      1.5px solid var(--border);
}
.tour-card-price {
    font-size:   1.2rem;
    font-weight: 800;
    color:       var(--secondary);
    line-height: 1;
}
.tour-card-price small {
    font-size:  0.65rem;
    font-weight: 400;
    color:      var(--text-3);
    display:    block;
    margin-top: 2px;
    line-height: 1.3;
}
.tour-card-price-old {
    font-size:   0.78rem;
    color:       var(--text-3);
    text-decoration: line-through;
    font-weight: 400;
}
.tour-card-btn {
    padding:       0.38rem 0.9rem;
    font-size:     0.8rem;
    font-weight:   600;
    border-radius: var(--radius-sm);
    background:    var(--primary);
    color:         var(--white);
    border:        none;
    cursor:        pointer;
    text-decoration: none;
    transition:    background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    white-space:   nowrap;
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
}
.tour-card-btn:hover {
    background: var(--primary-dark);
    color:      var(--white);
    transform:  scale(1.04);
    box-shadow: 0 3px 10px rgba(var(--primary-rgb),.3);
}

/* CAROUSELS */
.carousel-wrap {
    position: relative;
    padding:  0 52px;
}
.carousel-track {
    display:                    flex;
    gap:                        1rem;
    overflow-x:                 auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    scroll-behavior:            smooth;
    scroll-snap-type:           x mandatory;
    padding-bottom:             0.25rem;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; flex-shrink: 0; }

.carousel-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--white);
    border:          1.5px solid var(--border);
    box-shadow:      var(--shadow-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    font-size:       1rem;
    color:           var(--text-2);
    z-index:         5;
    transition:      background-color var(--transition), box-shadow var(--transition),
                     color var(--transition), border-color var(--transition);
    flex-shrink:     0;
}
.carousel-btn:hover {
    background:   var(--primary);
    border-color: var(--primary);
    color:        var(--white);
    box-shadow:   var(--shadow-lg);
}
.carousel-btn--prev { left: 0; }
.carousel-btn--next { right: 0; }
.carousel-btn:disabled { opacity: .35; pointer-events: none; }

/* TOURS GRID */
.tours-section { padding: 2rem 0 4rem; }

.tours-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   1.5rem;
}

/* Empty state */
.catalog-empty {
    grid-column: 1 / -1;
    text-align:  center;
    padding:     4rem 1rem;
    color:       var(--text-2);
}
.catalog-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; color: var(--border); }
.catalog-empty h3   { font-size: 1.35rem; margin-bottom: 0.5rem; }
.catalog-empty p    { max-width: 380px; margin: 0 auto 1.5rem; }

/* Active filter tags */
.catalog-active-filters {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.45rem;
    margin-bottom: 1rem;
    align-items: center;
}
.active-filter-tag {
    display:      inline-flex;
    align-items:  center;
    gap:          0.3rem;
    padding:      0.28rem 0.75rem;
    border-radius: 50rem;
    background:   var(--primary-light);
    color:        var(--primary);
    font-size:    0.8rem;
    font-weight:  500;
}
.active-filter-tag .remove-tag {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       currentColor;
    font-size:   0.9rem;
    line-height: 1;
    padding:     0;
    margin-left: 2px;
    opacity:     0.6;
    transition:  opacity var(--transition);
}
.active-filter-tag .remove-tag:hover { opacity: 1; }
.catalog-clear-all {
    font-size:  0.8rem;
    color:      var(--text-3);
    cursor:     pointer;
    background: none;
    border:     none;
    font-family: var(--font);
    transition: color var(--transition);
    padding:    0.28rem 0.5rem;
    text-decoration: underline;
}
.catalog-clear-all:hover { color: var(--danger); }

/* Pagination */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.35rem;
    margin-top:      2.5rem;
    flex-wrap:       wrap;
}
.page-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border-radius:   var(--radius-xs);
    border:          1.5px solid var(--border);
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--text-2);
    text-decoration: none;
    transition:      all var(--transition);
    cursor:          pointer;
    background:      var(--white);
}
.page-link:hover         { border-color: var(--primary); color: var(--primary); }
.page-link.active        { background: var(--primary); border-color: var(--primary); color: var(--white); font-weight: 700; }
.page-link.disabled      { opacity: .4; pointer-events: none; }

/* DESTINATIONS */
.destinations-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
}

.dest-card {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--radius-xl);
    aspect-ratio:  3 / 4;
    display:       block;
    text-decoration: none;
    cursor:        pointer;
    background:    var(--surface);
}
.dest-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display:    block;
}
.dest-card:hover img { transform: scale(1.07); }

/* Gradient overlay */
.dest-card::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0)     30%,
        rgba(0,0,0,.6)    70%,
        rgba(0,0,0,.85)   100%
    );
    transition: opacity var(--transition);
}
.dest-card:hover::after { opacity: 0.9; }

.dest-card-body {
    position:  absolute;
    bottom:    0;
    left:      0;
    right:     0;
    padding:   1.25rem 1.1rem;
    z-index:   2;
}
.dest-card-name {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--white);
    line-height: 1.25;
    margin-bottom: 0.2rem;
}
.dest-card-count {
    font-size: 0.78rem;
    color:     rgba(255,255,255,.75);
    font-weight: 500;
}

/* Wide card variant */
.dest-card--wide {
    grid-column: span 2;
    aspect-ratio: 16 / 7;
}

/* STATS ROW */
.stats-row {
    display:         flex;
    align-items:     center;
    gap:             0;
    background:      var(--white);
    border:          1.5px solid var(--border);
    border-radius:   var(--radius-lg);
    box-shadow:      var(--shadow-sm);
    overflow:        hidden;
}
.stat-item {
    flex:            1;
    text-align:      center;
    padding:         1.75rem 1rem;
    border-right:    1.5px solid var(--border);
    position:        relative;
}
.stat-item:last-child { border-right: none; }

.stat-number {
    font-size:   2.25rem;
    font-weight: 800;
    color:       var(--primary);
    line-height: 1;
    margin-bottom: 0.35rem;
}
.stat-label {
    font-size:   0.85rem;
    color:       var(--text-2);
    font-weight: 500;
}

/* NEWSLETTER */
.newsletter-section {
    background:  linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding:     4rem 0;
    position:    relative;
    overflow:    hidden;
}
.newsletter-section::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.newsletter-section .container { position: relative; z-index: 2; }

.newsletter-eyebrow {
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          rgba(255,255,255,.65);
    margin-bottom:  0.5rem;
}
.newsletter-title {
    font-size:     2rem;
    font-weight:   800;
    color:         var(--white);
    margin-bottom: 0.5rem;
    line-height:   1.2;
}
.newsletter-sub {
    font-size: 1rem;
    color:     rgba(255,255,255,.8);
    max-width: 480px;
    margin-bottom: 1.75rem;
}

.newsletter-form {
    display:   flex;
    gap:       0.5rem;
    max-width: 480px;
}
.newsletter-form input {
    flex:          1;
    border:        none;
    border-radius: var(--radius-sm);
    padding:       0.7rem 1rem;
    font-size:     0.9rem;
    font-family:   var(--font);
    color:         var(--text);
    outline:       none;
    background:    var(--white);
    min-width:     0;
}
.newsletter-form input::placeholder { color: var(--text-3); }
.newsletter-form .btn { flex-shrink: 0; }
.newsletter-note {
    font-size:  0.78rem;
    color:      rgba(255,255,255,.55);
    margin-top: 0.75rem;
}

/* FOOTER */
.et-footer {
    background: #0f172a;
    color:      rgba(255,255,255,.72);
    padding:    3.5rem 0 0;
}

.footer-brand {
    display:         inline-flex;
    align-items:     center;
    gap:             0.6rem;
    text-decoration: none;
    color:           var(--white);
    font-weight:     700;
    font-size:       1rem;
    margin-bottom:   0.75rem;
}
.footer-brand-icon {
    width:           38px;
    height:          38px;
    background:      linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius:   var(--radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.1rem;
    flex-shrink:     0;
    color:           var(--white);
}
.footer-brand-text    { display: flex; flex-direction: column; line-height: 1.15; }
.footer-brand-main    { font-size: 0.95rem; font-weight: 700; color: var(--white); }
.footer-brand-sub     { font-size: 0.7rem; opacity: .55; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-tagline       { font-size: 0.875rem; color: rgba(255,255,255,.48); line-height: 1.6; max-width: 260px; }

.footer-col-title {
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--white);
    margin-bottom:  1rem;
}

.footer-links             { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links li a        { font-size: 0.875rem; color: rgba(255,255,255,.58); text-decoration: none; transition: color var(--transition); display: inline-flex; align-items: center; gap: 0.35rem; }
.footer-links li a:hover  { color: var(--white); }

.footer-info { font-size: 0.875rem; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 0.35rem; }
.footer-info i { color: var(--primary); flex-shrink: 0; }

.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,.09); margin: 2rem 0 1.25rem; }

.footer-bottom { padding-bottom: 1.75rem; }
.footer-copy   { font-size: 0.8rem; color: rgba(255,255,255,.38); }

.footer-bottom-links     { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-bottom-links a   { font-size: 0.8rem; color: rgba(255,255,255,.38); text-decoration: none; transition: color var(--transition); }
.footer-bottom-links a:hover { color: rgba(255,255,255,.8); }

.footer-social        { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.footer-social-link {
    width:           36px;
    height:          36px;
    border-radius:   var(--radius-xs);
    background:      rgba(255,255,255,.08);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255,255,255,.65);
    text-decoration: none;
    font-size:       1rem;
    transition:      background-color var(--transition), color var(--transition);
}
.footer-social-link:hover         { background: var(--primary); color: var(--white); }
.footer-social-link--wa:hover     { background: #25d366; }
.footer-social-link--ig:hover     { background: #e1306c; }

.footer-payments   { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.payment-badge {
    display:     inline-flex;
    align-items: center;
    gap:         0.3rem;
    padding:     0.3rem 0.65rem;
    border:      1px solid rgba(255,255,255,.13);
    border-radius: var(--radius-xs);
    font-size:   0.74rem;
    color:       rgba(255,255,255,.6);
    background:  rgba(255,255,255,.04);
}

/* Footer grid layout */
.footer-grid {
    display:               grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap:                   2.5rem 2rem;
    padding-bottom:        2.5rem;
}
.footer-col { display: flex; flex-direction: column; }

/* BOTTOM NAV */
.bottom-nav {
    display:        flex;
    position:       fixed;
    bottom:         0;
    left:           0;
    right:          0;
    z-index:        1030;
    height:         64px;
    background:     var(--white);
    border-top:     1.5px solid var(--border);
    box-shadow:     0 -4px 16px rgba(0,0,0,.07);
    align-items:    stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-item {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.2rem;
    text-decoration: none;
    color:           var(--text-3);
    font-size:       0.65rem;
    font-weight:     500;
    transition:      color var(--transition), background-color var(--transition);
    cursor:          pointer;
    border:          none;
    background:      transparent;
    font-family:     var(--font);
    padding:         0.4rem 0;
    position:        relative;
}
.bottom-nav-item i  { font-size: 1.25rem; line-height: 1; }
.bottom-nav-item:hover        { color: var(--primary); }
.bottom-nav-item.active       { color: var(--primary); }
.bottom-nav-item.active i     { color: var(--primary); }
.bottom-nav-item .cart-badge  { top: 6px; right: calc(50% - 18px); }

/* Hide on desktop */
@media (min-width: 1024px) {
    .bottom-nav { display: none; }
}
/* Space for bottom nav on mobile */
@media (max-width: 1023px) {
    body { padding-bottom: 64px; }
}

/* WA FLOAT */
.wa-float {
    position:        fixed;
    bottom:          1.5rem;
    right:           1.5rem;
    width:           56px;
    height:          56px;
    background:      linear-gradient(135deg, #25d366 0%, #1da851 100%);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.6rem;
    color:           var(--white);
    box-shadow:      0 4px 18px rgba(37,211,102,.48);
    z-index:         900;
    text-decoration: none;
    transition:      transform var(--transition), box-shadow var(--transition);
    animation:       wa-pulse 3s ease-in-out infinite;
}
.wa-float:hover {
    color:     var(--white);
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,.65);
}
@keyframes wa-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(37,211,102,.48); }
    50%       { box-shadow: 0 4px 32px rgba(37,211,102,.75); }
}

/* Adjust wa-float on mobile to clear bottom nav */
@media (max-width: 1023px) {
    .wa-float { bottom: 5rem; }
}

/* ANIMATIONS */
.fade-up {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-up.visible {
    opacity:   1;
    transform: translateY(0);
}
.fade-up.delay-1 { transition-delay: 0.1s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.3s; }
.fade-up.delay-4 { transition-delay: 0.4s; }

/* Skeleton / shimmer */
.skeleton {
    background:      linear-gradient(90deg, var(--border) 25%, var(--surface) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation:       shimmer 1.5s ease-in-out infinite;
    border-radius:   var(--radius-xs);
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pulse ring */
@keyframes pulse-ring {
    0%   { transform: scale(1);    opacity: .8; }
    100% { transform: scale(1.35); opacity: 0;  }
}

/* BOOKING BOX */
.booking-box {
    position:      sticky;
    top:           calc(var(--header-h) + 1rem);
    background:    var(--white);
    border:        1.5px solid var(--border);
    border-radius: var(--radius);
    padding:       1.5rem;
    box-shadow:    var(--shadow-lg);
}
.booking-box-title {
    font-size:     1rem;
    font-weight:   700;
    margin-bottom: 1.25rem;
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
}
.booking-box-title i { color: var(--primary); }

.booking-price-row {
    display:         flex;
    align-items:     baseline;
    gap:             0.4rem;
    margin-bottom:   1.25rem;
    padding-bottom:  1rem;
    border-bottom:   1.5px solid var(--border);
}
.booking-price-main  { font-size: 1.85rem; font-weight: 800; color: var(--secondary); }
.booking-price-label { font-size: 0.8rem; color: var(--text-2); }
.booking-price-old   { font-size: 0.9rem; color: var(--text-3); text-decoration: line-through; font-weight: 400; }

/* Date picker trigger */
.date-picker-trigger {
    width:        100%;
    padding:      0.65rem 0.9rem;
    border:       1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background:   var(--white);
    font-size:    0.875rem;
    color:        var(--text);
    cursor:       pointer;
    display:      flex;
    align-items:  center;
    gap:          0.5rem;
    transition:   border-color var(--transition), box-shadow var(--transition);
    font-family:  var(--font);
}
.date-picker-trigger:hover,
.date-picker-trigger:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(var(--primary-rgb), .14);
    outline:      none;
}
.date-picker-trigger i { color: var(--primary); }

/* Flatpickr overrides */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background:  var(--primary) !important;
    border-color: var(--primary) !important;
}
.flatpickr-day.today      { border-color: var(--primary) !important; }
.flatpickr-month,
.flatpickr-weekday        { color: var(--text) !important; }

/* Pax selector */
.pax-selector { display: flex; flex-direction: column; gap: 0.65rem; }

.pax-row {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         0.5rem;
}
.pax-label         { font-size: 0.875rem; color: var(--text); font-weight: 500; flex: 1; }
.pax-label small   { display: block; font-weight: 400; color: var(--text-2); font-size: 0.72rem; }

.pax-control {
    display:       flex;
    align-items:   center;
    border:        1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow:      hidden;
}
.pax-btn {
    width:          36px;
    height:         36px;
    background:     transparent;
    border:         none;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.1rem;
    color:          var(--text-2);
    cursor:         pointer;
    transition:     background-color var(--transition), color var(--transition);
    user-select:    none;
    flex-shrink:    0;
}
.pax-btn:hover:not(:disabled) {
    background-color: var(--primary-light);
    color:            var(--primary);
}
.pax-btn:disabled  { opacity: .35; cursor: default; }
.pax-count {
    min-width:    36px;
    text-align:   center;
    font-size:    0.9rem;
    font-weight:  700;
    color:        var(--text);
    background:   var(--white);
    border-left:  1.5px solid var(--border);
    border-right: 1.5px solid var(--border);
    line-height:  36px;
}

/* Zone select */
.zone-select { display: flex; flex-direction: column; gap: 0.5rem; }
.zone-option { position: relative; }
.zone-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.zone-card {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
    padding:     0.75rem;
    border:      1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor:      pointer;
    transition:  border-color var(--transition), background-color var(--transition);
}
.zone-option input:checked + .zone-card { border-color: var(--primary); background-color: var(--primary-light); }
.zone-option input:focus  + .zone-card  { outline: 2px solid var(--primary); outline-offset: 2px; }
.zone-card-dot {
    width:       18px;
    height:      18px;
    border:      2px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top:  2px;
    transition:  border-color var(--transition), background-color var(--transition);
    background:  var(--white);
}
.zone-option input:checked + .zone-card .zone-card-dot { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px var(--white); }
.zone-card-info  { flex: 1; }
.zone-card-name  { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.zone-card-desc  { font-size: 0.78rem; color: var(--text-2); margin-top: 2px; }
.zone-card-price { font-size: 0.82rem; font-weight: 700; color: var(--secondary); margin-top: 2px; }

/* Booking total rows */
.booking-total-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.5rem 0;
    font-size:       0.875rem;
    color:           var(--text-2);
    border-top:      1px dashed var(--border);
    margin-top:      1rem;
}
.booking-total-row--main {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--text);
    border-top:  2px solid var(--border);
    padding-top: 0.75rem;
    margin-top:  0.25rem;
}
.booking-total-row--main .booking-total-value { color: var(--secondary); }

/* TOUR DETAIL */
.tour-detail-section { padding: 2rem 0 4rem; }

.tour-detail {
    display:               grid;
    grid-template-columns: 1fr 360px;
    gap:                   2rem;
    align-items:           start;
}

.tour-gallery        { border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
.tour-gallery img    { width: 100%; height: 380px; object-fit: cover; }

.tour-detail-title   { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; }
.tour-detail-meta {
    display:        flex;
    flex-wrap:      wrap;
    gap:            1rem;
    margin-bottom:  1.25rem;
    padding-bottom: 1.25rem;
    border-bottom:  1.5px solid var(--border);
}
.tour-detail-meta-item {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.875rem;
    color:       var(--text-2);
}
.tour-detail-meta-item i { color: var(--primary); }

.tour-description         { color: var(--text-2); line-height: 1.8; }
.tour-includes            { margin-top: 1.5rem; }
.tour-includes-title      { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.tour-includes-list       { display: grid; gap: 0.4rem; }
.tour-includes-item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.875rem;
    color:       var(--text-2);
}
.tour-includes-item i       { color: var(--success); width: 16px; flex-shrink: 0; }
.tour-includes-item--no i   { color: var(--danger); }

/* CART */
.cart-section { padding: 2rem 0 4rem; }
.cart-layout {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   1.5rem;
    align-items:           start;
}

.cart-card {
    background:    var(--white);
    border-radius: var(--radius);
    border:        1.5px solid var(--border);
    overflow:      hidden;
    box-shadow:    var(--shadow-sm);
}
.cart-card-header {
    padding:      1rem 1.25rem;
    border-bottom: 1.5px solid var(--border);
    font-weight:  600;
    font-size:    0.95rem;
    display:      flex;
    align-items:  center;
    gap:          0.5rem;
    background:   var(--surface);
}
.cart-card-header i { color: var(--primary); }

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
    font-size:      0.75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--text-2);
    padding:        0.75rem 1.25rem;
    background:     var(--surface);
    border-bottom:  1.5px solid var(--border);
    white-space:    nowrap;
}
.cart-table td {
    padding:        1rem 1.25rem;
    border-bottom:  1px solid var(--border);
    vertical-align: middle;
    font-size:      0.875rem;
    color:          var(--text);
}
.cart-table tr:last-child td { border-bottom: none; }
.cart-item-name     { font-weight: 600; margin-bottom: 0.2rem; }
.cart-item-meta     { font-size: 0.75rem; color: var(--text-2); }
.cart-item-price    { font-weight: 700; color: var(--secondary); white-space: nowrap; }
.cart-remove-btn {
    background:    none;
    border:        none;
    color:         var(--danger);
    cursor:        pointer;
    padding:       0.2rem 0.4rem;
    border-radius: var(--radius-xs);
    transition:    background-color var(--transition);
    font-size:     0.9rem;
}
.cart-remove-btn:hover { background: rgba(239,68,68,.1); }

.cart-summary {
    background:    var(--white);
    border-radius: var(--radius);
    border:        1.5px solid var(--border);
    padding:       1.25rem;
    position:      sticky;
    top:           calc(var(--header-h) + 1rem);
    box-shadow:    var(--shadow-md);
}
.cart-summary-title { font-weight: 700; font-size: 1rem; margin-bottom: 1rem; }
.cart-summary-row {
    display:         flex;
    justify-content: space-between;
    font-size:       0.875rem;
    padding:         0.35rem 0;
    color:           var(--text-2);
}
.cart-summary-row--total {
    font-size:    1.1rem;
    font-weight:  700;
    color:        var(--text);
    border-top:   2px solid var(--border);
    padding-top:  0.75rem;
    margin-top:   0.5rem;
}
.cart-summary-row--total .cart-summary-value { color: var(--secondary); }

.cart-empty { text-align: center; padding: 3rem 1rem; color: var(--text-2); }
.cart-empty i   { font-size: 3rem; margin-bottom: 1rem; color: var(--border); }
.cart-empty h3  { font-size: 1.25rem; margin-bottom: 0.5rem; }

/* CHECKOUT */
.checkout-steps {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   2rem;
}
.checkout-step {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.85rem;
    font-weight: 500;
    color:       var(--text-2);
    flex:        1;
    max-width:   200px;
}
.checkout-step-num {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      var(--border);
    color:           var(--text-2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       0.85rem;
    flex-shrink:     0;
    transition:      background-color var(--transition), color var(--transition);
}
.checkout-step.active .checkout-step-num,
.checkout-step.done   .checkout-step-num { background: var(--primary); color: var(--white); }
.checkout-step.active { color: var(--primary); font-weight: 600; }
.checkout-step.done   { color: var(--success); }
.checkout-step.done   .checkout-step-num { background: var(--success); }

.checkout-step-line {
    flex:       1;
    height:     2px;
    background: var(--border);
    max-width:  80px;
    margin:     0 0.5rem;
}
.checkout-step-line.done { background: var(--primary); }

.checkout-section { padding: 2rem 0 4rem; }
.checkout-layout  {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   1.5rem;
    align-items:           start;
}
.checkout-card {
    background:    var(--white);
    border-radius: var(--radius);
    border:        1.5px solid var(--border);
    padding:       1.5rem;
    box-shadow:    var(--shadow-sm);
}
.checkout-card + .checkout-card { margin-top: 1rem; }
.checkout-card-title {
    font-size:     1rem;
    font-weight:   700;
    margin-bottom: 1.25rem;
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
}
.checkout-card-title i { color: var(--primary); }

/* AUTH */
.auth-section { padding: 3rem 0 5rem; }
.auth-card {
    background:    var(--white);
    border-radius: var(--radius);
    border:        1.5px solid var(--border);
    padding:       2rem;
    max-width:     440px;
    margin:        0 auto;
    box-shadow:    var(--shadow-lg);
}
.auth-card-logo           { text-align: center; margin-bottom: 1.5rem; }
.auth-card-logo .brand-icon { width: 54px; height: 54px; font-size: 1.4rem; margin: 0 auto 0.5rem; }
.auth-card-title          { font-size: 1.35rem; font-weight: 700; text-align: center; margin-bottom: 0.25rem; }
.auth-card-subtitle       { font-size: 0.875rem; text-align: center; color: var(--text-2); margin-bottom: 1.5rem; }
.auth-tabs {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    border:        1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow:      hidden;
    margin-bottom: 1.5rem;
}
.auth-tab {
    padding:    0.6rem;
    text-align: center;
    font-size:  0.875rem;
    font-weight: 600;
    cursor:     pointer;
    background: var(--surface);
    color:      var(--text-2);
    border:     none;
    transition: all var(--transition);
}
.auth-tab.active { background: var(--primary); color: var(--white); }
.auth-divider {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    margin:      1.25rem 0;
    color:       var(--text-2);
    font-size:   0.8rem;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-link   { font-size: 0.875rem; text-align: center; margin-top: 1rem; color: var(--text-2); }
.auth-link a { color: var(--primary); font-weight: 600; }

/* OTP */
.otp-container {
    display:         flex;
    gap:             0.5rem;
    justify-content: center;
    margin:          1rem 0;
}
.otp-input {
    width:        48px;
    height:       56px;
    text-align:   center;
    font-size:    1.4rem;
    font-weight:  700;
    border:       2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family:  var(--font);
    color:        var(--text);
    transition:   border-color var(--transition), box-shadow var(--transition);
    background:   var(--white);
}
.otp-input:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(var(--primary-rgb), .15);
    outline:      none;
}
.otp-input.filled  { border-color: var(--primary); background: var(--primary-light); }
.otp-timer         { text-align: center; font-size: 0.8rem; color: var(--text-2); }
.otp-resend        { text-align: center; font-size: 0.875rem; margin-top: 0.5rem; }
.otp-resend a      { color: var(--primary); font-weight: 600; cursor: pointer; }
.otp-resend a.disabled { color: var(--text-3); cursor: not-allowed; pointer-events: none; }

/* RESERVAS */
.reservas-section { padding: 2rem 0 4rem; }
.reservas-list    { display: flex; flex-direction: column; gap: 1rem; }

.reserva-card {
    background:    var(--white);
    border-radius: var(--radius);
    border:        1.5px solid var(--border);
    overflow:      hidden;
    box-shadow:    var(--shadow-sm);
    transition:    box-shadow var(--transition);
}
.reserva-card:hover { box-shadow: var(--shadow-md); }

.reserva-card-header {
    padding:         0.875rem 1.25rem;
    background:      var(--surface);
    border-bottom:   1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             0.5rem;
}
.reserva-code   { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
.reserva-date   { font-size: 0.78rem; color: var(--text-2); }
.reserva-card-body  { padding: 1.25rem; }
.reserva-item-name  { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.reserva-item-meta  { font-size: 0.78rem; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 0.75rem; }
.reserva-item-meta i { color: var(--primary); }
.reserva-card-footer {
    padding:         0.875rem 1.25rem;
    border-top:      1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             0.5rem;
}
.reserva-total { font-weight: 700; font-size: 1rem; color: var(--secondary); }

/* STATUS BADGES */
.status-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.3rem;
    padding:        0.2rem 0.65rem;
    border-radius:  50rem;
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-badge--pendente   { background: rgba(245,158,11,.12); color: #b45309; }
.status-badge--pago       { background: rgba(34,197,94,.12);  color: #15803d; }
.status-badge--confirmado { background: rgba(59,130,246,.12); color: #1d4ed8; }
.status-badge--cancelado  { background: rgba(239,68,68,.12);  color: #b91c1c; }
.status-badge i           { font-size: 0.65rem; }

/* PAYMENT PAGE */
.payment-methods       { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.payment-method-option { position: relative; }
.payment-method-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.payment-method-card {
    display:     flex;
    align-items: center;
    gap:         1rem;
    padding:     1rem;
    border:      2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor:      pointer;
    transition:  border-color var(--transition), background-color var(--transition);
}
.payment-method-option input:checked + .payment-method-card { border-color: var(--primary); background: var(--primary-light); }
.payment-method-icon { font-size: 1.75rem; width: 36px; text-align: center; }
.payment-method-name { font-weight: 600; font-size: 0.9rem; }
.payment-method-desc { font-size: 0.78rem; color: var(--text-2); }

/* CONFIRMATION */
.confirmation-section { padding: 3rem 0 5rem; text-align: center; }
.confirmation-icon {
    width:           80px;
    height:          80px;
    background:      rgba(34,197,94,.12);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2.25rem;
    color:           var(--success);
    margin:          0 auto 1.25rem;
}
.confirmation-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; }
.confirmation-sub   { font-size: 1rem; color: var(--text-2); max-width: 480px; margin: 0 auto 2rem; }
.confirmation-code  {
    background:    var(--surface);
    border:        2px dashed var(--border);
    border-radius: var(--radius);
    padding:       1rem 1.5rem;
    display:       inline-block;
    margin-bottom: 2rem;
}
.confirmation-code-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); margin-bottom: 0.25rem; }
.confirmation-code-value { font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: 0.1em; }

.confirmation-detail-card {
    background:    var(--white);
    border-radius: var(--radius);
    border:        1.5px solid var(--border);
    padding:       1.5rem;
    max-width:     520px;
    margin:        0 auto 1.5rem;
    text-align:    left;
    box-shadow:    var(--shadow-sm);
}
.confirmation-detail-row {
    display:         flex;
    justify-content: space-between;
    font-size:       0.875rem;
    padding:         0.4rem 0;
    border-bottom:   1px solid var(--border);
    color:           var(--text-2);
}
.confirmation-detail-row:last-child { border-bottom: none; }
.confirmation-detail-row strong     { color: var(--text); }

/* ALERTS */
.alert-success { background: rgba(34,197,94,.1);   border-color: rgba(34,197,94,.3);   color: #15803d; border-radius: var(--radius-sm); }
.alert-danger  { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.25);  color: #b91c1c; border-radius: var(--radius-sm); }
.alert-info    { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.25); color: #1d4ed8; border-radius: var(--radius-sm); }
.alert-warning { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.3);  color: #b45309; border-radius: var(--radius-sm); }

/* Toast */
.et-toast-container {
    position:       fixed;
    top:            1rem;
    right:          1rem;
    z-index:        9999;
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    max-width:      320px;
    pointer-events: none;
}
.et-toast {
    padding:      0.875rem 1rem;
    border-radius: var(--radius-sm);
    background:   var(--text);
    color:        var(--white);
    font-size:    0.875rem;
    box-shadow:   var(--shadow-lg);
    display:      flex;
    align-items:  flex-start;
    gap:          0.6rem;
    animation:    toast-in .25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}
.et-toast.success { background: #15803d; }
.et-toast.error   { background: #b91c1c; }
.et-toast.warning { background: #b45309; }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* Typography extras */
.section-title  { font-size: 1.75rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; }
.section-subtitle { font-size: 1rem; color: var(--text-2); margin-bottom: 2rem; }

/* Print */
@media print {
    .et-navbar, .et-footer, .wa-float, .bottom-nav, .booking-box, .btn { display: none !important; }
    body { background: white; padding-bottom: 0; }
    .tour-card { break-inside: avoid; }
}

/* RESPONSIVE — lg 1024 */
@media (min-width: 1024px) {
    .destinations-grid { grid-template-columns: repeat(4, 1fr); }
}

/* RESPONSIVE — md 768 / lg 1024 breakpoints */
@media (max-width: 1023px) {
    .tour-detail {
        grid-template-columns: 1fr;
    }
    .booking-box { position: static; }

    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    .cart-summary { position: static; }
}

@media (max-width: 768px) {
    :root { --header-h: 64px; }

    .catalog-hero {
        min-height: 380px;
        padding:    3rem 0 2.5rem;
    }
    .catalog-hero h1 { font-size: 1.85rem; }
    .catalog-hero p  { font-size: 0.95rem; }

    .hero-search-box { max-width: 100%; }

    .filter-bar { top: var(--header-h); }

    .section-title   { font-size: 1.4rem; }
    .page-hero h1    { font-size: 1.65rem; }

    .tours-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1rem;
    }

    .tour-gallery img     { height: 250px; }
    .tour-detail-title    { font-size: 1.4rem; }

    .destinations-grid    { grid-template-columns: repeat(2, 1fr); }
    .dest-card--wide      { grid-column: span 2; aspect-ratio: 16 / 9; }

    .stats-row { flex-wrap: wrap; }
    .stat-item { flex: 1 1 45%; border-right: none; border-bottom: 1.5px solid var(--border); }
    .stat-item:nth-child(odd)  { border-right: 1.5px solid var(--border); }
    .stat-item:last-child,
    .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

    .newsletter-form  { flex-direction: column; }
    .newsletter-title { font-size: 1.5rem; }

    .checkout-steps        { gap: 0; }
    .checkout-step-name    { display: none; }

    .otp-input  { width: 42px; height: 50px; font-size: 1.2rem; }
    .auth-card  { padding: 1.5rem; }

    .cart-table th:last-child,
    .cart-table td:last-child { display: none; }

    .carousel-wrap { padding: 0 40px; }
}

@media (max-width: 576px) {
    .catalog-hero h1    { font-size: 1.55rem; }
    .tours-grid         { grid-template-columns: 1fr; }
    .destinations-grid  { grid-template-columns: 1fr; }
    .dest-card--wide    { grid-column: span 1; }
    .otp-container      { gap: 0.3rem; }
    .otp-input          { width: 38px; height: 46px; font-size: 1.1rem; }
    .et-navbar          { padding: 0; }
    .wa-float           { bottom: 5.5rem; right: 1rem; width: 50px; height: 50px; font-size: 1.4rem; }
    .carousel-wrap      { padding: 0 36px; }
    .stat-number        { font-size: 1.75rem; }
    .hero-chips         { gap: 0.35rem; }
    .hero-chip          { font-size: 0.78rem; padding: 0.25rem 0.7rem; }
    .footer-grid        { grid-template-columns: 1fr; gap: 2rem; }
}
@media (min-width: 577px) and (max-width: 991px) {
    .footer-grid        { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}