/* ==========================================================================
   Rangeela premium layer - loaded on every page, after the legacy stylesheets.
   Design tokens, two-font typography, buttons, focus states, floating contact
   buttons, navbar polish, closing CTA and global overflow safety.
   ========================================================================== */

:root {
    --rg-ink: #17120d;
    --rg-char: #211a13;
    --rg-char-2: #2c231a;
    --rg-gold: #b08d3f;
    --rg-gold-2: #d4af37;
    --rg-gold-soft: #f3e7c9;
    --rg-cream: #faf6ec;
    --rg-paper: #fffdf8;
    --rg-line: #eadfc6;
    --rg-text: #3b342b;
    --rg-muted: #6b6256;
    --rg-green: #15803d;
    --rg-radius: 16px;
    --rg-radius-sm: 10px;
    --rg-shadow: 0 10px 30px rgba(33, 26, 19, .08);
    --rg-shadow-lg: 0 18px 44px rgba(33, 26, 19, .16);
    --rg-ease: cubic-bezier(.22, .61, .36, 1);
    --rg-font-head: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
    --rg-font-body: 'Open Sans', 'Open Sans Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---------- Typography: Playfair Display (headings) + Open Sans (body) ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--rg-font-body);
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--rg-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
h1, h2, h3, h4, h5, h6,
.playfair,
header .navbar-brand,
.top-button .col:first-child p,
.page-breadcrumb p {
    font-family: var(--rg-font-head);
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.005em; line-height: 1.25; overflow-wrap: break-word; font-variant-numeric: lining-nums; }
h1 { font-size: clamp(28px, 4.6vw, 42px); }
h2 { font-size: clamp(25px, 3.4vw, 35px); }
h3 { font-size: clamp(20px, 2.5vw, 26px); }
p { text-align: inherit; }
p.text-justify, .text-justify { text-align: left; }
img { max-width: 100%; height: auto; }
iframe, video { max-width: 100%; }
iframe { border: 0; }
.logo-170 { height: 170px; width: auto; }
a { transition: color .25s var(--rg-ease), background-color .25s var(--rg-ease), border-color .25s var(--rg-ease), box-shadow .25s var(--rg-ease), transform .25s var(--rg-ease); }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 3px solid var(--rg-gold-2); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100000; background: var(--rg-ink); color: #fff; padding: 10px 18px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 10px; color: #fff; }

/* ---------- Buttons: one consistent shape, hover, active and focus state ---------- */
.btn {
    white-space: normal;
    max-width: 100%;
    border-radius: 999px;
    font-family: var(--rg-font-body);
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.3;
    transition: transform .25s var(--rg-ease), box-shadow .25s var(--rg-ease), background-color .25s var(--rg-ease), color .25s var(--rg-ease), border-color .25s var(--rg-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-default { padding: 12px 28px; }

.rg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 13px 28px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-family: var(--rg-font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .25s var(--rg-ease), box-shadow .25s var(--rg-ease), background-color .25s var(--rg-ease), color .25s var(--rg-ease), border-color .25s var(--rg-ease);
}
.rg-btn:hover { transform: translateY(-2px); }
.rg-btn:active { transform: translateY(0); }
.rg-btn--gold { background: linear-gradient(135deg, var(--rg-gold) 0%, var(--rg-gold-2) 100%); color: #1b140a !important; box-shadow: 0 8px 22px rgba(176, 141, 63, .35); }
.rg-btn--gold:hover { box-shadow: 0 12px 28px rgba(176, 141, 63, .5); color: #000 !important; }
.rg-btn--wa { background: var(--rg-green); color: #fff !important; box-shadow: 0 8px 22px rgba(21, 128, 61, .35); }
.rg-btn--wa:hover { background: #116a33; box-shadow: 0 12px 28px rgba(21, 128, 61, .45); }
.rg-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .55); }
.rg-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--rg-gold-2); }
.rg-btn--dark-ghost { background: transparent; color: var(--rg-ink) !important; border-color: var(--rg-ink); }
.rg-btn--dark-ghost:hover { background: var(--rg-ink); color: #fff !important; }

/* ---------- Floating WhatsApp / Call buttons: compact and unobtrusive ---------- */
.floating { position: fixed; z-index: 9990; right: 14px; bottom: 18px; width: auto; display: flex; flex-direction: column; gap: 12px; }
.floating .wh, .floating .phone {
    width: 58px; height: 58px; padding: 0; margin: 0; border-radius: 50%;
    background: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    transition: transform .25s var(--rg-ease), box-shadow .25s var(--rg-ease);
}
.floating .wh:hover, .floating .phone:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 28px rgba(0, 0, 0, .34); }
.floating .wh a, .floating .phone a { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.floating .wh img, .floating .phone img { width: 100%; height: 100%; margin: 0; object-fit: cover; display: block; }
.floating .blink_me {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; left: auto; top: auto;
}
@media (max-width: 575px) {
    .floating { right: 10px; bottom: 14px; gap: 10px; }
    .floating .wh, .floating .phone { width: 52px; height: 52px; }
}

/* ---------- Header trust bar + navbar polish ---------- */
.trust-bar { font-family: var(--rg-font-body); }
header .navbar #navbar ul > li > a {
    font-family: var(--rg-font-body);
    font-size: 13.5px;
    letter-spacing: .08em;
    color: #f6ecd2;
    border-radius: 6px;
}
header .navbar #navbar ul > li.active > a,
header .navbar #navbar ul > li > a:hover { background-color: transparent; color: var(--rg-gold-2) !important; box-shadow: inset 0 -2px 0 var(--rg-gold-2); border-radius: 0; }
header .dropdown-menu li.active > a { background-color: var(--rg-gold); }
header .navbar-header button.navbar-toggle { border-radius: 10px; border-color: rgba(246, 236, 210, .6); }

/* ---------- Closing call-to-action band (shared: home page + service/Sharjah pages) ---------- */
.booking-section {
    position: relative;
    padding: clamp(56px, 8vw, 96px) 0;
    text-align: center;
    color: #efe6d0;
    background:
        radial-gradient(ellipse 60% 80% at 85% 0%, rgba(212, 175, 55, .22), transparent 60%),
        radial-gradient(ellipse 50% 70% at 5% 100%, rgba(176, 141, 63, .16), transparent 60%),
        linear-gradient(160deg, var(--rg-ink) 0%, var(--rg-char-2) 100%);
}
.booking-section .booking-container { max-width: 880px; margin: 0 auto; }
.booking-section .booking-container h2 { color: var(--rg-gold-2); margin-bottom: 20px; }
.booking-section p { color: #e6dcc3; text-align: center; }
.booking-section .contact-details {
    display: inline-block; margin: 28px 0 6px; padding: 18px 26px; text-align: left;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(212, 175, 55, .28); border-radius: var(--rg-radius);
}
.booking-section .contact-details p { text-align: left; margin: 6px 0; color: #f3ead3; }
.booking-section .cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 560px; margin: 26px auto 0; }
.booking-section .btn { padding: 15px 20px; text-transform: uppercase; font-size: 14px; border: 2px solid transparent; }
.booking-section .btn-whatsapp { background: var(--rg-green); color: #fff; box-shadow: 0 8px 22px rgba(21, 128, 61, .35); }
.booking-section .btn-whatsapp:hover, .booking-section .btn-whatsapp:focus { background: #116a33; color: #fff; box-shadow: 0 12px 28px rgba(21, 128, 61, .45); }
.booking-section .btn-call { background: linear-gradient(135deg, var(--rg-gold) 0%, var(--rg-gold-2) 100%); color: #1b140a; box-shadow: 0 8px 22px rgba(176, 141, 63, .35); }
.booking-section .btn-call:hover, .booking-section .btn-call:focus { color: #000; box-shadow: 0 12px 28px rgba(176, 141, 63, .5); }
@media (max-width: 600px) { .booking-section .cta-grid { grid-template-columns: 1fr; } .booking-section .contact-details { display: block; } }

/* ---------- "View all FAQs" button (shared partial) ---------- */
.faq-page-btn-wrap { text-align: center; margin: 30px 0 10px; }
.faq-page-btn-wrap .btn.btn-default { display: inline-block; text-transform: uppercase; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Mobile header: compact, no oversized empty band ---------- */
@media (max-width: 767px) {
    header .navbar-header { height: auto; min-height: 0; padding-bottom: 8px; margin-bottom: 0; }
    header .navbar-brand img { max-width: 150px; height: auto; }
}

/* Legacy WhatsApp buttons: darker green so white text meets WCAG AA contrast */
.btn-whatsapp, .btn-whatsapp-cta { background: linear-gradient(180deg, #1a9447 0, #15803d 100%); color: #fff; }

/* In-text links must be distinguishable without relying on colour alone (WCAG 1.4.1) */
main p > a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Breadcrumbs wrap instead of overflowing their column (Playfair is wider than the old fallback font) */
.page-breadcrumb .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; max-width: 100%; }
.page-breadcrumb .breadcrumb > li { white-space: normal; }
.page-breadcrumb { position: relative; overflow-x: clip; }