/**
 * Trip Booking - Frontend Style (Polished Booking.com Style)
 * v3 — Fixed hero overlap, counter layout, currency display
 *
 * @package Astra
 */

/* ===========================
   Design Tokens
=========================== */
:root {
    --bk-navy: #003580;
    --bk-blue: #0071c2;
    --bk-blue-h: #00487a;
    --bk-yellow: #febb02;
    --bk-yellow-h: #e8a800;
    --bk-green: #008009;
    --bk-red: #c00;
    --bk-bg: #f2f6fa;
    --bk-card: #ffffff;
    --bk-border: #e5e8ec;
    --bk-text: #1a1a2e;
    --bk-muted: #6c7a8d;
    --bk-r: 8px;
    --bk-rl: 12px;
    --bk-sh: 0 1px 12px rgba(0, 53, 128, .08);
    --bk-shl: 0 6px 28px rgba(0, 53, 128, .14);
}

/* ===========================
   Page Reset + LTR
=========================== */
.rhlat-trip-page {
    font-family: inherit;
    background: var(--bk-bg);
    color: var(--bk-text);
    direction: ltr;
    text-align: left;
}

/* 100vw breakout — escapes Astra container */
.rhlat-trip-page,
.rhlat-trip-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ===========================
   HERO
=========================== */
.rhlat-trip-hero {
    height: 480px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.rhlat-trip-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    transition: transform 10s ease;
}

.rhlat-trip-hero:hover .rhlat-trip-hero-bg {
    transform: scale(1.07);
}

.rhlat-trip-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 12, 50, .90) 0%,
            rgba(0, 12, 50, .50) 45%,
            rgba(0, 12, 50, .10) 100%);
}

.rhlat-hero-inner {
    position: relative;
    z-index: 2;
    width: 88%;
    margin: 0 auto;
    padding-bottom: 40px;
}

.rhlat-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 16px;
}

.rhlat-breadcrumb a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.rhlat-breadcrumb a:hover {
    color: #fff;
}

.rhlat-breadcrumb .sep {
    opacity: .5;
    font-size: 11px;
}

/* Badges */
.rhlat-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.rhlat-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rhlat-badge i {
    font-size: 12px;
}

.rhlat-badge.yellow {
    background: var(--bk-yellow);
    border-color: transparent;
    color: #1a1a1a;
}

.rhlat-badge.blue {
    background: var(--bk-blue);
    border-color: transparent;
}

/* Title */
.rhlat-trip-title {
    font-size: clamp(26px, 3.5vw, 46px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -.3px;
}

.rhlat-trip-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
}

.rhlat-trip-meta-row .meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rhlat-trip-meta-row i {
    font-size: 13px;
}

/* ===========================
   BODY LAYOUT — No negative margin
=========================== */
.rhlat-trip-body {
    width: 88%;
    margin: 32px auto 0;
    padding-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}

/* ===========================
   CARDS
=========================== */
.rhlat-card {
    background: var(--bk-card);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-rl);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--bk-sh);
    transition: box-shadow .25s;
}

.rhlat-card:hover {
    box-shadow: var(--bk-shl);
}

.rhlat-card-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--bk-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.rhlat-card-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.rhlat-card-icon {
    font-size: 20px;
    flex-shrink: 0;
    color: var(--bk-blue);
    width: 24px;
    text-align: center;
}

.rhlat-card-body {
    padding: 22px;
}

/* ===========================
   STATS STRIP
=========================== */
.rhlat-stats-strip {
    background: #fff;
    border-radius: var(--bk-rl);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(0, 53, 128, 0.08);
    position: relative;
    z-index: 10;
    margin-top: -60px;
}

.rhlat-stats-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--bk-rl);
    padding: 3px;
    background: linear-gradient(135deg, var(--bk-blue), var(--bk-yellow));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.rhlat-stat {
    padding: 30px 16px;
    text-align: center;
    border-right: 1px solid rgba(0, 53, 128, 0.06);
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

.rhlat-stat:last-child {
    border-right: none;
}

.rhlat-stat:hover {
    background: transparent;
    transform: translateY(-2px);
}

.rhlat-stat:hover .rhlat-stat-icon {
    opacity: 0.12;
    transform: rotate(-5deg) scale(1.1);
}

.rhlat-stat-icon {
    position: absolute;
    bottom: -15px;
    right: -10px;
    transform: rotate(-15deg);
    font-size: 85px;
    opacity: 0.07;
    color: var(--bk-blue);
    margin: 0;
    pointer-events: none;
    z-index: 0;
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rhlat-stat-value {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: var(--bk-blue);
    line-height: 1;
    position: relative;
    z-index: 1;
    margin-bottom: 6px;
}

.rhlat-stat-label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bk-muted);
    font-weight: 600;
    margin-top: 5px;
    position: relative;
    z-index: 1;
}

/* Description */
.rhlat-description {
    font-size: 16px;
    line-height: 1.9;
    color: var(--bk-muted);
}

/* ===========================
   INCLUDES / EXCLUDES
=========================== */
.rhlat-incex-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.rhlat-incex-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rhlat-incex-title.includes {
    color: var(--bk-green);
}

.rhlat-incex-title.excludes {
    color: var(--bk-red);
}

.rhlat-incex-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rhlat-incex-list li {
    padding: 9px 0;
    font-size: 15px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.rhlat-incex-list li:last-child {
    border-bottom: none;
}

/* ===========================
   BOOKING SIDEBAR
=========================== */
.rhlat-booking-sidebar {
    position: sticky;
    top: 88px;
}

.rhlat-booking-card {
    background: #fff;
    border-radius: var(--bk-rl);
    box-shadow: 0 10px 40px rgba(0, 53, 128, 0.08);
    /* نفس ظل Stats Strip */
    position: relative;
    z-index: 10;
    margin-top: -60px;
    /* ليتداخل مع صورة الغلاف بشكل عرضي */
}

/* الإطار المتدرج الفخم */
.rhlat-booking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--bk-rl);
    padding: 3px;
    background: linear-gradient(135deg, var(--bk-blue), var(--bk-yellow));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 5;
}

/* ── Price Header ── */
.rhlat-booking-header {
    background: var(--bk-navy);
    padding: 22px 24px;
    border-top-left-radius: calc(var(--bk-rl) - 3px);
    border-top-right-radius: calc(var(--bk-rl) - 3px);
}

.rhlat-from-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 10px;
}

/* Price row — fixed layout */
.rhlat-price-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.rhlat-price-amount {
    font-size: 52px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
}

.rhlat-price-currency {
    font-size: 22px;
    font-weight: 800;
    color: var(--bk-yellow);
    line-height: 1;
}

.rhlat-price-per {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
    margin-top: 6px;
}

.rhlat-child-price-note {
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
    margin-top: 4px;
}

/* ===========================
   BOOKING FORM
=========================== */
.rhlat-booking-form {
    padding: 20px;
}

.rhlat-form-group {
    margin-bottom: 16px;
}

.rhlat-form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--bk-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rhlat-form-label i {
    font-size: 12px;
    color: var(--bk-blue);
}

/* Date Select */
.rhlat-date-select {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--bk-border);
    border-radius: var(--bk-r);
    padding: 0 38px 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--bk-text);
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c7a8d' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color .2s, box-shadow .2s;
}

.rhlat-date-select:focus {
    outline: none;
    border-color: var(--bk-blue);
    box-shadow: 0 0 0 3px rgba(0, 113, 194, .1);
}

/* ── Travelers label ── */
.rhlat-travelers-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.rhlat-traveler-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bk-muted);
}

.rhlat-traveler-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--bk-blue);
}

/* Counter Group — stacked vertically for clarity */
.rhlat-counter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rhlat-counter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rhlat-counter-row-label {
    flex: 1;
    min-width: 0;
}

.rhlat-counter-row-label strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bk-text);
}

.rhlat-counter-row-label strong i {
    font-size: 13px;
    color: var(--bk-blue);
}

.rhlat-counter-row-label span {
    font-size: 12px;
    color: var(--bk-blue);
    font-weight: 600;
}

/* Counter widget */
.rhlat-counter {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--bk-border);
    border-radius: var(--bk-r);
    overflow: hidden;
    height: 40px;
    background: #fff;
    flex-shrink: 0;
    transition: border-color .2s, box-shadow .2s;
}

.rhlat-counter:focus-within {
    border-color: var(--bk-blue);
    box-shadow: 0 0 0 3px rgba(0, 113, 194, .1);
}

.rhlat-counter-btn {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--bk-blue);
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    transition: background .15s, color .15s;
    line-height: 1;
}

.rhlat-counter-btn:hover {
    background: var(--bk-blue);
    color: #fff;
}

.rhlat-counter-btn:disabled {
    color: #c8d0da;
    cursor: default;
}

.rhlat-counter-btn:disabled:hover {
    background: #f5f7fa;
    color: #c8d0da;
}

.rhlat-counter-input {
    width: 42px;
    text-align: center;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 800;
    color: var(--bk-text);
    font-family: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0;
}

.rhlat-counter-input::-webkit-outer-spin-button,
.rhlat-counter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* ===========================
   PRICE SUMMARY
=========================== */
.rhlat-price-summary {
    background: #f0f6ff;
    border: 1px solid #c5ddf7;
    border-radius: var(--bk-r);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.rhlat-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--bk-muted);
    padding: 4px 0;
}

.rhlat-summary-row.total {
    border-top: 1.5px solid #b3d4f5;
    margin-top: 10px;
    padding-top: 12px;
    font-size: 17px;
    font-weight: 800;
    color: var(--bk-text);
}

.rhlat-summary-amount {
    font-weight: 600;
    color: var(--bk-text);
}

.rhlat-total-amount {
    font-size: 22px;
    color: var(--bk-blue);
    font-weight: 800;
}

/* ===========================
   CTA BUTTON
=========================== */
.rhlat-book-btn {
    width: 100%;
    height: 52px;
    background: var(--bk-yellow);
    color: #1a1a1a;
    border: none;
    border-radius: var(--bk-r);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s, transform .15s, box-shadow .2s;
    text-decoration: none;
}

.rhlat-book-btn:hover {
    background: var(--bk-yellow-h);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(254, 187, 2, .38);
}

.rhlat-book-btn:active {
    transform: none;
    box-shadow: none;
}

.rhlat-book-btn:disabled {
    background: #d1d5db;
    cursor: not-allowed;
    transform: none;
}

/* ===========================
   TRUST BADGES
=========================== */
.rhlat-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--bk-border);
}

/* ── Trust item: flex column so icon sits cleanly above text ── */
.rhlat-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: 12px;
    color: var(--bk-muted);
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 4px;
    border-radius: 8px;
    transition: background .2s, transform .2s;
    cursor: default;
}

.rhlat-trust-item:hover {
    background: #f0f6ff;
    transform: translateY(-3px);
}

/* The icon itself — block + line-height 1 to prevent duotone shift */
.rhlat-trust-icon {
    font-size: 28px;
    display: block;
    line-height: 1;
    margin: 0;
}

/* ===========================
   NOTICES / ERRORS
=========================== */
.rhlat-notices {
    width: 88%;
    margin: 0 auto;
    padding: 16px 0 0;
}

.rhlat-booking-error {
    background: #fff5f5;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: var(--bk-r);
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(-5px);
    transition: all .3s ease;
}

.rhlat-booking-error.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================
   FAQS ACCORDION (LUXURY)
=========================== */
.rhlat-faqs-section {
    margin-top: 10px;
}

.rhlat-faqs-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rhlat-faq-item {
    background: #fff;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-rl);
    box-shadow: 0 2px 10px rgba(0, 53, 128, 0.03);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s;
    overflow: hidden;
}

.rhlat-faq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 53, 128, 0.08);
    border-color: #d1e3ff;
}

.rhlat-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
    transition: background .25s;
}

.rhlat-faq-question h4 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--bk-text);
    flex: 1;
    line-height: 1.4;
    transition: color 0.2s;
}

.rhlat-faq-question:hover h4 {
    color: var(--bk-blue);
}

.rhlat-faq-toggle-icon {
    width: 34px;
    height: 34px;
    background: #f0f6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 15px;
    /* RTL ready */
    transition: background 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rhlat-faq-toggle-icon i {
    font-size: 14px;
    color: var(--bk-blue);
    transition: color 0.3s;
    --fa-primary-color: #003580;
    --fa-secondary-color: #0071c2;
}

/* Active State */
.rhlat-faq-item.active {
    border-color: #bbd6ff;
    box-shadow: 0 6px 20px rgba(0, 113, 194, 0.1);
}

.rhlat-faq-item.active .rhlat-faq-question {
    background: #fafdff;
}

.rhlat-faq-item.active .rhlat-faq-question h4 {
    color: var(--bk-blue);
}

.rhlat-faq-item.active .rhlat-faq-toggle-icon {
    background: var(--bk-yellow);
    transform: rotate(180deg);
}

.rhlat-faq-item.active .rhlat-faq-toggle-icon i {
    color: #1a1a2e;
    --fa-primary-color: #1a1a2e;
    --fa-secondary-color: #1a1a2e;
}

.rhlat-faq-answer {
    padding: 0 22px 22px;
    background: #fafdff;
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    border-top: 1px dashed #e2e8f0;
    margin-top: -5px;
    /* Pull up to hide gap */
    padding-top: 18px;
}

.rhlat-faq-answer p {
    margin: 0 0 10px;
}

.rhlat-faq-answer p:last-child {
    margin: 0;
}

/* ===========================
   TRIP NOTES / PAYMENT INFO
=========================== */
.rhlat-trip-notes-wrap {
    width: 88%;
    margin: 0 auto 48px;
}

.rhlat-trip-notes {
    background: #f8fbff;
    border: 1px solid #ddeaff;
    border-left: 5px solid var(--bk-yellow);
    border-radius: var(--bk-r);
    overflow: hidden;
    animation: rhlatFadeUp .5s ease .5s both;
}

.rhlat-notes-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #003580 0%, #0071c2 100%);
    color: #fff;
}

.rhlat-notes-header i {
    font-size: 20px;
    --fa-primary-color: #fff;
    --fa-secondary-color: #febb02;
    --fa-secondary-opacity: 0.85;
}

.rhlat-notes-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .2px;
}

.rhlat-notes-body {
    padding: 20px 22px;
    font-size: 15px;
    line-height: 1.85;
    color: #334155;
}

.rhlat-notes-body p {
    margin: 0 0 10px;
}

.rhlat-notes-body p:last-child {
    margin: 0;
}

/* Mobile */
@media (max-width: 640px) {
    .rhlat-trip-notes-wrap {
        width: 100%;
        padding: 0 12px;
    }

    .rhlat-notes-body {
        padding: 16px;
        font-size: 14px;
    }
}

/* ===========================
   UNAVAILABLE
=========================== */
.rhlat-unavailable-notice {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--bk-r);
    padding: 12px 16px;
    font-size: 13px;
    color: #92400e;
    font-weight: 500;
}

/* ===========================
   GALLERY
=========================== */
.rhlat-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.rhlat-gallery-grid img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 6px;
    transition: transform .3s;
}

.rhlat-gallery-grid img:hover {
    transform: scale(1.04);
}

/* ===========================
   CUSTOM CALENDAR
=========================== */
#rhlat-calendar {
    background: #fff;
    border: 1.5px solid var(--bk-border);
    border-radius: var(--bk-r);
    overflow: hidden;
    user-select: none;
}

/* Header row */
.rhlat-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bk-navy);
}

.rhlat-cal-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .3px;
}

.rhlat-cal-nav {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .12);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    padding: 0;
}

.rhlat-cal-nav:hover {
    background: rgba(255, 255, 255, .25);
}

.rhlat-cal-nav:disabled {
    opacity: .3;
    cursor: default;
}

/* Day names row */
.rhlat-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f0f6ff;
    border-bottom: 1px solid var(--bk-border);
}

.rhlat-cal-days span {
    text-align: center;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--bk-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Calendar grid */
.rhlat-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px;
    gap: 3px;
}

.rhlat-cal-empty {
    visibility: hidden;
}

.rhlat-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    color: var(--bk-muted);
    cursor: default;
    transition: all .15s;
}

/* Past dates */
.rhlat-cal-day.past {
    color: #c8d0da;
    text-decoration: line-through;
    font-weight: 400;
}

/* Blocked (not available on this day of week) */
.rhlat-cal-day.blocked {
    color: #d1d8e0;
}

/* Available */
.rhlat-cal-day.avail {
    color: var(--bk-navy);
    font-weight: 700;
    cursor: pointer;
    background: #f0f6ff;
}

.rhlat-cal-day.avail:hover {
    background: var(--bk-blue);
    color: #fff;
    transform: scale(1.1);
}

/* Selected */
.rhlat-cal-day.selected {
    background: var(--bk-navy) !important;
    color: #fff !important;
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(0, 53, 128, .35);
}

/* Selected date display */
.rhlat-cal-selected-wrap {
    padding: 10px 14px;
    border-top: 1px solid var(--bk-border);
    min-height: 38px;
}

.rhlat-cal-chosen {
    font-size: 13px;
    font-weight: 700;
    color: var(--bk-blue);
}

.rhlat-cal-prompt {
    font-size: 12px;
    color: var(--bk-muted);
}

/* WC overrides */
.rhlat-trip-page .woocommerce-breadcrumb {
    display: none !important;
}

/* ===========================
   ANIMATIONS
=========================== */
@keyframes bkBounce {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.3);
        color: var(--bk-blue);
    }

    100% {
        transform: scale(1);
    }
}

.rhlat-counter-bounce {
    animation: bkBounce .25s ease;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1024px) {
    .rhlat-trip-body {
        grid-template-columns: 1fr;
        width: 95%;
        margin-top: 24px;
        gap: 20px;
    }

    .rhlat-booking-sidebar {
        position: static;
        order: -1;
    }

    .rhlat-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .rhlat-stat:nth-child(2) {
        border-bottom: 1px solid var(--bk-border);
    }
}

@media (max-width: 640px) {

    /* Hero */
    .rhlat-trip-hero {
        height: 300px;
    }

    .rhlat-hero-inner {
        width: 96%;
        padding-bottom: 28px;
    }

    .rhlat-breadcrumb {
        display: none;
    }

    /* too crowded on small screens */
    .rhlat-trip-title {
        font-size: 22px;
    }

    .rhlat-badges {
        gap: 6px;
    }

    .rhlat-badge {
        font-size: 11px;
        padding: 4px 10px;
    }

    /* Body */
    .rhlat-trip-body {
        width: 100%;
        padding: 0 12px 48px;
        margin-top: 16px;
    }

    /* Booking card */
    .rhlat-booking-header {
        padding: 18px 18px;
    }

    .rhlat-price-amount {
        font-size: 38px;
    }

    .rhlat-price-currency {
        font-size: 18px;
    }

    .rhlat-booking-form {
        padding: 16px;
    }

    /* Stats */
    .rhlat-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .rhlat-stat {
        padding: 16px 10px;
    }

    .rhlat-stat-value {
        font-size: 20px;
    }

    /* Content */
    .rhlat-incex-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rhlat-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .rhlat-card-body {
        padding: 16px;
    }

    .rhlat-card-header {
        padding: 14px 16px;
    }

    /* Counter row — tighter on mobile */
    .rhlat-counter-row {
        gap: 8px;
    }

    .rhlat-counter-btn {
        width: 36px;
        font-size: 16px;
    }

    .rhlat-counter-input {
        width: 36px;
        font-size: 15px;
    }

    /* Trust */
    .rhlat-trust-item {
        font-size: 10px;
    }

    .rhlat-trust-icon {
        font-size: 16px;
    }
}

/* ===========================
   FA7 PRO DUOTONE — Color Overrides
   Primary: #003580 (Navy)
   Secondary: varies by context
=========================== */

/* ── Default page icons ── */
.rhlat-trip-page .fa-duotone {
    --fa-primary-color: #003580;
    --fa-secondary-color: #0071c2;
    --fa-secondary-opacity: 0.45;
}

/* ── Stat icons — navy + yellow accent ── */
.rhlat-stat-icon {
    --fa-primary-color: #003580;
    --fa-secondary-color: #febb02;
    --fa-secondary-opacity: 0.80;
}

/* ── Card header icons ── */
.rhlat-card-icon {
    --fa-primary-color: #003580;
    --fa-secondary-color: #0071c2;
    --fa-secondary-opacity: 0.50;
}

/* ── Trust icons — navy + yellow ── */
.rhlat-trust-icon {
    --fa-primary-color: #003580;
    --fa-secondary-color: #febb02;
    --fa-secondary-opacity: 0.75;
}

/* ── Form labels ── */
.rhlat-form-label .fa-duotone {
    --fa-primary-color: #003580;
    --fa-secondary-color: #0071c2;
    --fa-secondary-opacity: 0.45;
}

/* ── Counter +/− buttons ── */
.rhlat-counter-btn .fa-duotone {
    --fa-primary-color: #003580;
    --fa-secondary-color: #0071c2;
    --fa-secondary-opacity: 0.40;
}

.rhlat-counter-btn:hover .fa-duotone {
    --fa-primary-color: #fff;
    --fa-secondary-color: #febb02;
    --fa-secondary-opacity: 0.70;
}

/* ── Traveler label icons ── */
.rhlat-counter-row-label .fa-duotone {
    --fa-primary-color: #003580;
    --fa-secondary-color: #0071c2;
    --fa-secondary-opacity: 0.45;
}

/* ── Book Now button icon ── */
.rhlat-book-btn .fa-duotone {
    --fa-primary-color: #1a1a2e;
    --fa-secondary-color: #003580;
    --fa-secondary-opacity: 0.50;
    font-size: 18px;
}

/* ── Badge icons — white on colored bg ── */
.rhlat-badge .fa-duotone {
    --fa-primary-color: #fff;
    --fa-secondary-color: rgba(255, 255, 255, .55);
    --fa-secondary-opacity: 0.55;
}

.rhlat-badge.yellow .fa-duotone {
    --fa-primary-color: #1a1a2e;
    --fa-secondary-color: #003580;
    --fa-secondary-opacity: 0.50;
}

/* ── Include ✓ green / Exclude ✗ red ── */
.rhlat-icon-include {
    --fa-primary-color: #006400;
    --fa-secondary-color: #00a000;
    --fa-secondary-opacity: 0.50;
    margin-top: 3px;
    flex-shrink: 0;
}

.rhlat-icon-exclude {
    --fa-primary-color: #990000;
    --fa-secondary-color: #cc0000;
    --fa-secondary-opacity: 0.50;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ── Calendar nav ── */
.rhlat-cal-nav .fa-duotone {
    --fa-primary-color: #fff;
    --fa-secondary-color: #febb02;
    --fa-secondary-opacity: 0.65;
}

/* ── Breadcrumb separators ── */
.rhlat-breadcrumb .sep .fa-duotone {
    --fa-primary-color: rgba(255, 255, 255, .5);
    --fa-secondary-color: rgba(255, 255, 255, .3);
    font-size: 9px;
}

/* ── Summary row icons ── */
.rhlat-summary-row .fa-duotone {
    --fa-primary-color: #003580;
    --fa-secondary-color: #0071c2;
    --fa-secondary-opacity: 0.40;
}

/* ===================================================
   LUXURY MOTION EFFECTS
=================================================== */

/* ── Entrance animations ── */
@keyframes rhlatFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rhlatFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes rhlatShimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes rhlatPulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 113, 194, .35);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(0, 113, 194, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 113, 194, 0);
    }
}

@keyframes rhlatIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* Hero fades in */
.rhlat-trip-hero {
    animation: rhlatFadeIn .7s ease both;
}

/* Booking card slides up */
.rhlat-booking-card {
    animation: rhlatFadeUp .6s ease .15s both;
}

/* Stats strip fades up */
.rhlat-stats-strip {
    animation: rhlatFadeUp .5s ease .1s both;
}

/* Cards fade up one by one */
.rhlat-card:nth-child(1) {
    animation: rhlatFadeUp .5s ease .2s both;
}

.rhlat-card:nth-child(2) {
    animation: rhlatFadeUp .5s ease .3s both;
}

.rhlat-card:nth-child(3) {
    animation: rhlatFadeUp .5s ease .4s both;
}

/* ── Stat cell hover: lift + glow ── */
.rhlat-stat {
    transition: background .2s, transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}

.rhlat-stat:hover {
    background: #e8f2ff;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 53, 128, .12);
    z-index: 1;
}

/* Icon floats on stat hover */
.rhlat-stat:hover .rhlat-stat-icon {
    animation: rhlatIconFloat 1.2s ease infinite;
}

/* ── Book Now button: shimmer sweep on hover ── */
.rhlat-book-btn {
    position: relative;
    overflow: hidden;
}

.rhlat-book-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 40%,
            rgba(255, 255, 255, .45) 50%,
            transparent 60%);
    background-size: 200% 100%;
    background-position: 200% center;
    transition: none;
}

.rhlat-book-btn:hover::after {
    animation: rhlatShimmer .65s ease;
}

.rhlat-book-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(254, 187, 2, .50);
}

/* ── Trust badges: icon floats on hover ── */
.rhlat-trust-item:hover .rhlat-trust-icon {
    animation: rhlatIconFloat 1s ease infinite;
}

/* ── Counter focus: pulse ring ── */
.rhlat-counter:focus-within {
    animation: rhlatPulseRing 1s ease;
}

/* ── Calendar: day hover scale already set, add bounce on select ── */
@keyframes rhlatDatePick {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.25);
    }

    70% {
        transform: scale(.95);
    }

    100% {
        transform: scale(1.12);
    }
}

.rhlat-cal-day.selected {
    animation: rhlatDatePick .35s cubic-bezier(.22, 1, .36, 1) forwards !important;
}

/* ── Card header icon spins in ── */
.rhlat-card:hover .rhlat-card-icon {
    animation: rhlatIconFloat 1.4s ease infinite;
}

/* ── Price total: smooth number change already in JS, but add color pulse ── */
@keyframes rhlatPriceFlash {
    0% {
        color: var(--bk-blue);
    }

    40% {
        color: #febb02;
        transform: scale(1.06);
    }

    100% {
        color: var(--bk-blue);
        transform: scale(1);
    }
}

.rhlat-price-changed {
    animation: rhlatPriceFlash .4s ease;
}