@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&display=swap");

/**
 * RO Service Wala – UI Base
 * ============================================================
 * CSS variables, base styles, sticky mobile CTA, and toast base.
 * ============================================================
 */

:root {
    --font-heading: "Montserrat", sans-serif;
    --rsw-navy: #08233f;
    --rsw-navy-deep: #0b1f33;
    --rsw-teal: #00a7a7;
    --rsw-teal-deep: #0f766e;
    --rsw-orange: #f97316;
    --rsw-orange-light: #fb923c;
    --rsw-orange-soft: #fff4e8;
    --rsw-heading-navy: var(--rsw-navy);
    --rsw-heading-accent: var(--rsw-orange);
    --rsw-aqua-soft: #eef8fb;
    --rsw-card: #ffffff;
    --rsw-border: #d7e7ee;
    --rsw-border-blue: #dbeafe;
}

h1,
h2,
h3,
.hero-title,
.section-title,
.card-title,
.cta-title,
section h4:not(.text-xs),
.about-services-section h5,
.ro-service-page main h5,
[class*="-faq-section"] h5,
[class*="-faq-section"] summary {
    font-family: var(--font-heading);
    letter-spacing: -0.025em;
}

h3,
.card-title,
section h4:not(.text-xs),
.about-services-section h5,
.ro-service-page main h5,
[class*="-faq-section"] h5,
[class*="-faq-section"] summary {
    letter-spacing: -0.015em;
}

/* This is a small uppercase eyebrow, not a display heading. */
.about-mission-section h2 {
    font-family: inherit;
    letter-spacing: inherit;
}

body {
    background: #f7fbfc;
    color: #0a2540;
}

/* ── Compact mobile sticky CTA ── */
.sticky-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    height: 56px;          /* compact — matches body padding-bottom */
    box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
    max-width: 100vw;
    overflow: hidden;
}
.sticky-mobile-cta a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.15s;
}
.sticky-mobile-cta a:active { opacity: 0.85; }
.sticky-mobile-cta .cta-icon {
    font-size: 20px !important;
    font-variation-settings: 'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
}
.sticky-mobile-cta .cta-label { font-size: 9px; font-weight: 800; letter-spacing: 0.03em; }
.sticky-mobile-cta .btn-call  { background: #0a2540; }
.sticky-mobile-cta .btn-wa    { background: #25D366; }
.sticky-mobile-cta .btn-book  { background: linear-gradient(135deg, var(--rsw-orange), var(--rsw-orange-light)); }

@media (max-width: 768px) {
    .sticky-mobile-cta { display: grid; }
    body { padding-bottom: 72px; }
}

/* ── Booking Request Toast ── */
.booking-request-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 55;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    padding: 13px 12px 13px 14px;
    border: 1px solid rgba(0, 107, 90, 0.16);
    border-left: 4px solid #0f9f87;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 16px 42px rgba(10, 37, 64, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity 220ms ease, transform 220ms ease;
}
.booking-request-toast.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.booking-request-toast__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: #e4f7f2;
    color: #007765;
}
.booking-request-toast__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.booking-request-toast__text { color: #17364a; font-size: 13px; font-weight: 700; line-height: 1.45; }
.booking-request-toast__close {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #617783;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.booking-request-toast__close:hover { background: #eef5f6; color: #0a2540; }
@media (prefers-reduced-motion: reduce) {
    .booking-request-toast { transition: none; }
}