/* ── Extra Styles for Inner Pages ── */

/* Contact Bar */
.contact-bar { background: #0A0618; border-bottom: 1px solid var(--border); padding: 0.85rem 0; }
.contact-bar-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.cbar-item { display: flex; align-items: center; gap: 0.65rem; }
.cbar-item i { color: var(--gold); font-size: 1rem; }
.cbar-label { font-size: 0.72rem; color: var(--text-muted); display: block; }
.cbar-item a, .cbar-item span { font-size: 0.88rem; color: var(--white); font-weight: 600; }
.cbar-divider { width: 1px; height: 30px; background: var(--border); }
.cbar-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.25rem; background: #25D366; color: var(--white) !important; border-radius: 50px; font-size: 0.85rem; font-weight: 600; transition: all var(--transition); }
.cbar-btn:hover { background: #20BA5A; transform: translateY(-1px); }

/* Hero Trust */
.hero-trust { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.trust-item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.trust-item i { color: var(--gold); }
.trust-sep { color: rgba(255,255,255,0.3); }

/* Intro Section */
.intro-section { background: var(--bg3); padding: 3.5rem 0; border-bottom: 1px solid var(--border); }
.intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.intro-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); backdrop-filter: blur(10px); }
.intro-card--featured { border-color: var(--primary); box-shadow: var(--shadow); }
.intro-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.intro-img-wrap { height: 180px; overflow: hidden; }
.intro-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.intro-card:hover .intro-img-wrap img { transform: scale(1.07); }
.intro-body { padding: 1.5rem; }
.intro-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.intro-card h3, .intro-body h3 { font-family: var(--font-heading); color: var(--white); font-size: 1.1rem; margin-bottom: 0.75rem; }
.intro-card p, .intro-body p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.25rem; }
.intro-link { color: var(--gold); font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; transition: gap var(--transition); }
.intro-card:hover .intro-link { gap: 0.8rem; }

/* Services CTA */
.services-cta { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; flex-wrap: wrap; }
.about-btns { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

/* Trust Bar */
.trust-bar { background: var(--bg3); border-bottom: 1px solid var(--border); padding: 0.9rem 0; }
.trust-bar-inner { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.tb-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.tb-item i { color: var(--gold); }

/* Service Filter */
.service-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.5rem; }
.filter-btn { padding: 0.5rem 1.25rem; border-radius: 50px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; cursor: pointer; transition: all var(--transition); font-family: var(--font-body); }
.filter-btn:hover, .filter-btn.active { background: var(--primary); border-color: var(--primary); color: var(--white); }

/* Payment Banner */
.payment-banner { background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(124,58,237,0.1)); border-top: 1px solid rgba(212,175,55,0.2); border-bottom: 1px solid rgba(212,175,55,0.2); padding: 2.5rem 0; }
.payment-banner-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; text-align: center; }
.payment-icon { font-size: 3rem; }
.payment-text h3 { font-family: var(--font-heading); color: var(--gold); font-size: 1.4rem; margin-bottom: 0.5rem; }
.payment-text p { color: var(--text-muted); font-size: 0.9rem; max-width: 500px; }

/* Booking extras */
.expect-box { background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.2); border-radius: var(--radius); padding: 1.5rem; margin-top: 2rem; }
.expect-box h4 { color: var(--accent); margin-bottom: 1rem; font-size: 0.9rem; }
.expect-box ol { padding-left: 1.25rem; color: var(--text-muted); font-size: 0.88rem; }
.expect-box ol li { margin-bottom: 0.5rem; }
.direct-contact-box { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(37,211,102,0.05); }
.direct-contact-box p { color: var(--text-muted); font-size: 0.9rem; }

/* Stats Banner */
.stats-banner { background: var(--bg3); border-bottom: 1px solid var(--border); padding: 2rem 0; }
.stats-banner-inner { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.sb-item { text-align: center; }
.sb-number { font-family: var(--font-heading); font-size: 2rem; color: var(--gold); font-weight: 700; }
.sb-label { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.25rem; }

/* Quick Contact */
.quick-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.qc-card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card-bg); transition: all var(--transition); text-decoration: none; color: var(--text); }
.qc-card:hover { transform: translateY(-4px); }
.qc-whatsapp:hover { border-color: #25D366; box-shadow: 0 4px 20px rgba(37,211,102,0.2); }
.qc-phone:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.qc-email:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.qc-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.qc-whatsapp .qc-icon { background: rgba(37,211,102,0.15); color: #25D366; }
.qc-phone .qc-icon { background: rgba(124,58,237,0.15); color: var(--primary); }
.qc-email .qc-icon { background: rgba(212,175,55,0.15); color: var(--gold); }
.qc-text strong { display: block; color: var(--white); font-size: 0.9rem; margin-bottom: 0.25rem; }
.qc-text span { display: block; color: var(--gold); font-size: 0.95rem; font-weight: 600; }
.qc-text em { display: block; color: var(--text-muted); font-size: 0.8rem; font-style: normal; margin-top: 0.2rem; }
.qc-arrow { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; }

/* Concern list */
.concern-list { display: flex; flex-direction: column; gap: 0.6rem; }
.concern-list li { display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.9rem; }
.concern-list li i { color: var(--primary); width: 16px; }

/* CTA Banner */
.cta-banner { background: linear-gradient(135deg, #1E1535, #2D1B69); border-top: 1px solid var(--border); padding: 3rem 0; }
.cta-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-banner h3 { font-family: var(--font-heading); color: var(--white); font-size: 1.4rem; margin-bottom: 0.4rem; }
.cta-banner p { color: var(--text-muted); font-size: 0.9rem; }
.cta-banner-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Gallery image overlays */
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.08); }

/* Unsplash image cards */
.img-card { border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.img-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,0.7)); }
.img-caption { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; color: var(--white); font-weight: 600; }

/* ── Language Selector ───────────────────────────────────────────────────────── */
.lang-selector {
    position: relative;
    z-index: 1100;
    margin-left: 0.75rem;
}

/* Main translate button — prominent gold CTA style */
.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    border: none;
    color: #1a0a00;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(245,158,11,0.45);
    letter-spacing: 0.01em;
}
.lang-btn:hover {
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245,158,11,0.55);
}
.lang-btn[aria-expanded="true"] {
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245,158,11,0.5);
}
.lang-btn .fa-globe { font-size: 0.9rem; }
.lang-btn-text { font-size: 0.82rem; }
.lang-active-flag { font-size: 0.95rem; line-height: 1; }
.lang-arrow { font-size: 0.6rem; transition: transform 0.25s ease; opacity: 0.7; }
.lang-btn[aria-expanded="true"] .lang-arrow { transform: rotate(180deg); }

/* Pulse ring on first visit — removed after user interacts */
.lang-btn.lang-pulse { animation: langPulse 2s ease-in-out 3; }
@keyframes langPulse {
    0%,100% { box-shadow: 0 3px 14px rgba(245,158,11,0.45); }
    50%      { box-shadow: 0 3px 14px rgba(245,158,11,0.45), 0 0 0 6px rgba(245,158,11,0.18), 0 0 0 12px rgba(245,158,11,0.07); }
}

/* Dropdown panel */
.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    width: 250px;
    background: #12082A;
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(139,92,246,0.1);
    overflow: hidden;
    animation: langFadeIn 0.2s ease;
}
.lang-dropdown.open { display: block; }

@keyframes langFadeIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* Dropdown header */
.lang-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1rem 0.7rem;
    border-bottom: 1px solid rgba(196,181,253,0.1);
}
.lang-dropdown-header i { color: var(--gold); font-size: 0.85rem; }
.lang-dropdown-header span { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Search box */
.lang-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(196,181,253,0.08);
    background: rgba(255,255,255,0.03);
}
.lang-search-wrap .fa-search { color: var(--text-muted); font-size: 0.75rem; }
.lang-search {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 0.83rem;
    font-family: var(--font-body);
}
.lang-search::placeholder { color: var(--text-muted); }

/* Scrollable list */
.lang-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,0.3) transparent;
}
.lang-list::-webkit-scrollbar { width: 4px; }
.lang-list::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 4px; }

.lang-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 0.87rem;
    font-family: var(--font-body);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.lang-item:hover { background: rgba(245,158,11,0.1); color: var(--white); }
.lang-item--active {
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(139,92,246,0.12));
    color: var(--white);
    font-weight: 600;
    border: 1px solid rgba(245,158,11,0.2);
}
.lang-flag { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.lang-name { flex: 1; }
.lang-check { color: var(--gold); font-size: 0.75rem; }

/* Hide the Google Translate element completely */
#google_translate_element { position: absolute; visibility: hidden; height: 0; overflow: hidden; }

/* Responsive */
@media (max-width: 1024px) {
    .quick-contact-grid { grid-template-columns: 1fr; }
    .intro-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .contact-bar-inner { flex-direction: column; gap: 0.75rem; }
    .cbar-divider { display: none; }
    .stats-banner-inner { gap: 1.5rem; }
    .quick-contact-grid { grid-template-columns: 1fr; }
    .cta-banner-inner { text-align: center; justify-content: center; }
    .trust-bar-inner { gap: 1rem; }
    .payment-banner-inner { flex-direction: column; }
    .service-filter { gap: 0.35rem; }
    /* Language selector on mobile — compact but still visible */
    .lang-selector { margin-left: 0; margin-right: 0.5rem; }
    .lang-dropdown { right: auto; left: 0; width: 220px; }
    .lang-btn-text { display: none; }
    .lang-btn { padding: 0.5rem 0.8rem; gap: 0.35rem; }
}