/* ============================================================
   SONDAX TRAVEL - Airport Service Page Styles
   ============================================================ */

.st-airport-row { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--color-card); border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: all var(--transition); margin-bottom: 12px; }
.st-airport-row:hover { box-shadow: var(--shadow-md); border-color: rgba(30,90,133,0.3); }
.st-airport-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(30,90,133,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-airport-icon svg { width: 20px; height: 20px; color: var(--color-secondary); }
.st-airport-name { font-size: 1.0625rem; font-weight: 700; color: var(--color-text); }
.st-airport-meta { font-size: 0.75rem; color: var(--color-muted); margin-top: 3px; }
.st-airport-price { font-size: 0.9rem; font-weight: 700; color: var(--color-secondary); }
.st-airport-arrow { color: var(--color-muted); }
.st-airport-arrow svg { width: 18px; height: 18px; }

/* ============================================================
   AIRPORT SERVICE DETAIL PAGE
   ============================================================ */
/* Gallery thumbnails */
.st-as-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow: hidden; }
.st-as-thumb-item { flex: 1; border-radius: var(--radius); overflow: hidden; height: 72px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; }
.st-as-thumb-item.active { border-color: var(--color-secondary); }
.st-as-thumb-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.st-as-thumb-item:hover img { transform: scale(1.06); }
.st-as-thumb-more { background: rgba(6,41,91,0.55); display: flex; align-items: center; justify-content: center; }
.st-as-thumb-more span { color: #fff; font-size: 1.1rem; font-weight: 700; }
@media (max-width: 480px) { .st-as-thumb-item { height: 54px; } }

.st-as-nav { background: #fff; }
.st-as-nav-btn { padding: 13px 20px; font-size: 0.875rem; font-weight: 600; color: var(--color-muted); background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; transition: color 0.3s, border-color 0.3s; font-family: var(--font-main); }
.st-as-nav-btn:hover { color: var(--color-secondary); }
.st-as-nav-btn.active { color: var(--color-secondary); border-bottom-color: var(--color-secondary); }
.st-as-section { margin-bottom: 48px; padding-top: 8px; }
.st-as-section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; }
.st-as-pkg-card { display: block; width: 100%; text-align: left; padding: 16px; border-radius: var(--radius-lg); border: 2px solid var(--color-border); background: var(--color-muted-bg); cursor: pointer; transition: all 0.3s; margin-bottom: 12px; font-family: var(--font-main); }
.st-as-pkg-card:hover { border-color: rgba(30,90,133,0.4); background: rgba(30,90,133,0.02); }
.st-as-pkg-card.selected { border-color: var(--color-secondary); background: rgba(30,90,133,0.05); }
/* VIP tier – dark navy + gold accent */
.st-as-pkg-card.tier-vip { border-color: #c9a84c; background: linear-gradient(135deg, #0a0f1e 0%, #162040 100%); color: #f0e6d0; }
.st-as-pkg-card.tier-vip span,
.st-as-pkg-card.tier-vip div { color: #f0e6d0 !important; }
.st-as-pkg-card.tier-vip span[style*="color:var(--color-secondary)"] { color: #f5c542 !important; }
.st-as-pkg-card.tier-vip span[style*="color:var(--color-muted)"] { color: #c8b88a !important; }
.st-as-pkg-card.tier-vip .st-badge { color: #fff !important; }
.st-as-pkg-card.tier-vip:hover { border-color: #dbb856; box-shadow: 0 4px 20px rgba(201,168,76,0.25); }
.st-as-pkg-card.tier-vip.selected { border-color: #f5c542; box-shadow: 0 4px 24px rgba(201,168,76,0.35); }
.st-as-pkg-card.tier-vip .st-as-pkg-radio { border-color: #c9a84c; }
.st-as-pkg-card.tier-vip.selected .st-as-pkg-radio { border-color: #f5c542; background: #f5c542; }
/* Elite tier – black + silver accent */
.st-as-pkg-card.tier-elite { border-color: #a1a1aa; background: linear-gradient(135deg, #111111 0%, #1f1f23 100%); color: #f4f4f5; }
.st-as-pkg-card.tier-elite span,
.st-as-pkg-card.tier-elite div { color: #f4f4f5 !important; }
.st-as-pkg-card.tier-elite span[style*="color:var(--color-secondary)"] { color: #e4e4e7 !important; }
.st-as-pkg-card.tier-elite span[style*="color:var(--color-muted)"] { color: #a1a1aa !important; }
.st-as-pkg-card.tier-elite .st-badge { color: #fff !important; background: #52525b !important; }
.st-as-pkg-card.tier-elite:hover { border-color: #d4d4d8; box-shadow: 0 4px 20px rgba(161,161,170,0.25); }
.st-as-pkg-card.tier-elite.selected { border-color: #e4e4e7; box-shadow: 0 4px 24px rgba(161,161,170,0.35); }
.st-as-pkg-card.tier-elite .st-as-pkg-radio { border-color: #a1a1aa; }
.st-as-pkg-card.tier-elite.selected .st-as-pkg-radio { border-color: #e4e4e7; background: #e4e4e7; }
.st-as-pkg-card.tier-elite.selected .st-as-pkg-dot { background: #111; }
.st-as-pkg-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; vertical-align: top; margin-top: 2px; }
.st-as-pkg-card.selected .st-as-pkg-radio { border-color: var(--color-secondary); background: var(--color-secondary); }
.st-as-pkg-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: none; }
.st-as-pkg-card.selected .st-as-pkg-dot { display: block; }
.st-as-itinerary-step { position: relative; padding-left: 50px; margin-bottom: 32px; }
.st-as-step-num { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-secondary); color: #fff; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.st-as-step-line { position: absolute; left: 15px; top: 32px; height: 40px; width: 2px; background: rgba(30,90,133,0.2); }
.st-as-step-title { font-size: 1rem; font-weight: 700; margin-bottom: 12px; padding-top: 4px; }
.st-as-step-item { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; color: var(--color-muted); margin-bottom: 8px; line-height: 1.6; }
.st-as-step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary); flex-shrink: 0; margin-top: 8px; }
.st-as-incl-box { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); margin-bottom: 10px; }
.st-as-incl-box-green { background: #f0fdf4; border: 1px solid #bbf7d0; }
.st-as-incl-box-red { background: #fef2f2; border: 1px solid #fecaca; }
.st-as-disclaimer-card { padding: 14px 16px; background: var(--color-muted-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 10px; }
.st-as-cancel-box { padding: 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-lg); }
.st-as-why-stat { text-align: center; padding: 16px 12px; background: rgba(30,90,133,0.08); border: 1px solid rgba(30,90,133,0.15); border-radius: var(--radius-lg); }
.st-as-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.st-as-why-feat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--color-muted-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 10px; }
.st-as-input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius); font-size: 0.9375rem; font-family: var(--font-main); background: #fff; color: var(--color-text); transition: border-color 0.3s; }
.st-as-input:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(30,90,133,0.1); outline: none; }
.st-as-select { width: 100%; padding: 9px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius); font-size: 0.9375rem; font-family: var(--font-main); background: #fff; color: var(--color-text); cursor: pointer; }
.st-as-select:focus { border-color: var(--color-secondary); outline: none; }
.st-as-textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius); font-size: 0.9375rem; font-family: var(--font-main); background: #fff; color: var(--color-text); resize: vertical; }
.st-as-textarea:focus { border-color: var(--color-secondary); outline: none; }
.st-as-label { font-size: 0.875rem; font-weight: 600; display: block; margin-bottom: 6px; }
.st-as-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .st-as-form-row { grid-template-columns: 1fr; } .st-as-why-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .st-airport-row { padding: 14px; gap: 12px; }
    .st-airport-icon { width: 36px; height: 36px; }
    .st-airport-name { font-size: 0.9375rem; }
    .st-airport-price { font-size: 0.8125rem; }
    .st-airport-arrow { display: none; }
    .st-as-nav-btn { padding: 10px 14px; font-size: 0.8125rem; }
    .st-as-section { margin-bottom: 32px; }
    .st-as-section-title { font-size: 1.1rem; }
    .st-as-pkg-card { padding: 14px; }
    .st-as-itinerary-step { padding-left: 40px; margin-bottom: 24px; }
    .st-as-step-num { width: 28px; height: 28px; font-size: 0.8125rem; }
    .st-as-step-line { left: 13px; }
}

/* Airport group section header */
.st-airport-group-header { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--color-border); }
.st-airport-group-title { font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.st-airport-group-code { background: rgba(30,90,133,0.12); color: var(--color-secondary); padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }