/* ═══════════════════════════════════════════════════════════════
   contact.css — Contact page design
   ═══════════════════════════════════════════════════════════════ */

.ct-page {
    --ct-navy    : #06264a;
    --ct-sky     : #54B6F4;
    --ct-green   : #25D366;
    --ct-text    : #17324d;
    --ct-muted   : #5a7080;
    --ct-light   : #f4f8fc;
    --ct-bg      : #edf4fb;
    --ct-card-bg : #ffffff;
    --ct-border  : #dbe7f3;
    --ct-shadow  : 0 18px 50px rgba(6,38,74,.10);
    --ct-shadow-s: 0 6px 20px rgba(6,38,74,.07);

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
    line-height : 1.7;
    color       : var(--ct-text);
    background  : var(--ct-bg);
}

html[data-theme="dark"] .ct-page {
    --ct-navy    : #e8f2fb;
    --ct-text    : #d0e8f8;
    --ct-muted   : rgba(200,225,245,.65);
    --ct-light   : #0a1e30;
    --ct-bg      : #071827;
    --ct-card-bg : #0d2337;
    --ct-border  : rgba(255,255,255,.08);
    --ct-shadow  : 0 18px 50px rgba(0,0,0,.35);
    --ct-shadow-s: 0 6px 20px rgba(0,0,0,.25);
}

.ct-page * { box-sizing: border-box; }
.ct-page img { max-width: 100%; display: block; }
.ct-page a { text-decoration: none; color: inherit; }
.ct-page h1, .ct-page h2, .ct-page h3 { margin: 0; letter-spacing: -.03em; }
.ct-page p { margin: 0; }

.ct-wrap {
    width : min(1160px, calc(100% - 48px));
    margin: 0 auto;
}

/* ── EYEBROW ──────────────────────────────────────────────────── */
.ct-eyebrow {
    display        : inline-flex;
    padding        : 6px 14px;
    border-radius  : 999px;
    background     : rgba(84,182,244,.15);
    border         : 1px solid rgba(84,182,244,.35);
    color          : #54B6F4;
    font-weight    : 800;
    font-size      : .78rem;
    text-transform : uppercase;
    letter-spacing : .09em;
    margin-bottom  : 16px;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.ct-hero {
    background : linear-gradient(135deg, #06264a 0%, #0b3b70 55%, #1a6fa8 100%);
    padding    : 64px 0 100px;
    text-align : center;
    position   : relative;
    overflow   : hidden;
}
.ct-hero .ct-wrap {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-align     : center;
}
.ct-hero::after {
    content   : '';
    position  : absolute;
    bottom    : -1px;
    left      : 0; right: 0;
    height    : 60px;
    background: var(--ct-bg);
    clip-path : ellipse(55% 100% at 50% 100%);
}
.ct-hero h1 {
    font-size    : clamp(2.2rem, 5vw, 3.4rem);
    font-weight  : 900;
    color        : #fff;
    line-height  : 1.1;
    margin-bottom: 14px;
}
.ct-lead {
    font-size  : clamp(1rem, 1.8vw, 1.1rem);
    color      : rgba(255,255,255,.72);
    max-width  : 540px;
    margin     : 0 auto;
    line-height: 1.75;
    text-align : center;
}

/* ── CONTACT CARDS ────────────────────────────────────────────── */
.ct-cards-row { padding: 0 0 8px; margin-top: -56px; position: relative; z-index: 2; }

.ct-cards {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 16px;
}

.ct-card {
    background   : var(--ct-card-bg);
    border-radius: 20px;
    border       : 1px solid var(--ct-border);
    box-shadow   : var(--ct-shadow-s);
    padding      : 26px 20px 22px;
    text-align   : center;
    transition   : transform .2s, box-shadow .2s, border-color .2s, background .3s;
    display      : block;
    color        : var(--ct-text) !important;
    text-decoration: none !important;
}
.ct-card:hover {
    transform   : translateY(-5px);
    box-shadow  : var(--ct-shadow);
    border-color: var(--ct-sky);
}
.ct-card-wa:hover { border-color: var(--ct-green) !important; }

.ct-card-icon {
    font-size    : 2rem;
    margin-bottom: 10px;
    line-height  : 1;
}
.ct-card h3 {
    font-size    : 1rem;
    font-weight  : 800;
    color        : var(--ct-navy);
    margin-bottom: 6px;
}
.ct-card p {
    font-size  : .9rem;
    color      : var(--ct-muted);
    font-weight: 600;
    line-height: 1.4;
    word-break : break-word;
}
.ct-card-note {
    display      : inline-flex;
    align-items  : center;
    gap          : 5px;
    margin-top   : 10px;
    font-size    : .78rem;
    font-weight  : 700;
    color        : var(--ct-sky);
    background   : rgba(84,182,244,.10);
    border       : 1px solid rgba(84,182,244,.22);
    padding      : 3px 10px;
    border-radius: 999px;
}
.ct-card-wa .ct-card-note { color: var(--ct-green); background: rgba(37,211,102,.10); border-color: rgba(37,211,102,.22); }

/* ── BODY GRID ────────────────────────────────────────────────── */
.ct-body { padding: 48px 0 80px; }

.ct-grid {
    display              : grid;
    grid-template-columns: 1fr 340px;
    gap                  : 36px;
    align-items          : start;
}

/* Form column */
.ct-section-label {
    font-size      : .78rem;
    font-weight    : 800;
    text-transform : uppercase;
    letter-spacing : .1em;
    color          : var(--ct-sky);
    margin-bottom  : 10px;
}
.ct-form-col h2 {
    font-size    : clamp(1.6rem, 3vw, 2.4rem);
    font-weight  : 900;
    color        : var(--ct-navy);
    margin-bottom: 10px;
}
.ct-intro {
    color        : var(--ct-muted);
    font-size    : 1rem;
    margin-bottom: 24px !important;
    line-height  : 1.75;
}
.ct-form-wrap {
    background   : var(--ct-card-bg);
    border-radius: 20px;
    border       : 1px solid var(--ct-border);
    box-shadow   : var(--ct-shadow-s);
    overflow     : hidden;
    transition   : background .3s, border-color .3s;
}
.ct-form-wrap .fivestar-booking-form {
    border-radius: 0 !important;
    box-shadow   : none !important;
    border       : none !important;
    background   : transparent !important;
    margin       : 0 !important;
}

/* Info sidebar */
.ct-info-col { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }

.ct-info-card {
    background   : var(--ct-card-bg);
    border-radius: 20px;
    border       : 1px solid var(--ct-border);
    box-shadow   : var(--ct-shadow-s);
    padding      : 24px 22px;
    transition   : background .3s, border-color .3s;
}
.ct-info-card h3 {
    font-size    : 1rem;
    font-weight  : 900;
    color        : var(--ct-navy);
    padding-bottom: 12px;
    margin-bottom : 16px;
    border-bottom : 2px solid var(--ct-sky);
    display       : inline-block;
}

/* Hours */
.ct-hours { display: flex; flex-direction: column; gap: 0; }
.ct-hour-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 9px 0;
    border-bottom  : 1px solid var(--ct-border);
    font-size      : .9rem;
}
.ct-hour-row:last-of-type { border-bottom: none; }
.ct-hour-row span { color: var(--ct-muted); font-weight: 600; }
.ct-hour-row b { color: var(--ct-navy); font-weight: 800; }
.ct-badge-open {
    display      : inline-flex;
    align-items  : center;
    gap          : 7px;
    margin-top   : 14px;
    background   : rgba(37,211,102,.12);
    border       : 1px solid rgba(37,211,102,.30);
    color        : #1a9e4e;
    font-weight  : 800;
    font-size    : .82rem;
    padding      : 5px 12px;
    border-radius: 999px;
}
html[data-theme="dark"] .ct-badge-open { color: #4ddb85; }

/* Services list */
.ct-service-list {
    list-style: none;
    padding   : 0;
    margin    : 0;
    display   : flex;
    flex-direction: column;
    gap       : 8px;
}
.ct-service-list li {
    display    : flex;
    align-items: center;
    gap        : 9px;
    font-size  : .9rem;
    font-weight: 600;
    color      : var(--ct-text);
}
.ct-service-list li::before {
    content        : '✓';
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 19px;
    height         : 19px;
    border-radius  : 50%;
    background     : var(--ct-sky);
    color          : #fff;
    font-size      : .68rem;
    font-weight    : 900;
    flex-shrink    : 0;
}

/* Social links */
.ct-social-card { }
.ct-socials {
    display : flex;
    gap     : 12px;
    flex-wrap: wrap;
}
.ct-social {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 42px;
    height         : 42px;
    border-radius  : 12px;
    background     : var(--ct-light);
    border         : 1px solid var(--ct-border);
    color          : var(--ct-navy) !important;
    transition     : background .2s, border-color .2s, color .2s, transform .2s;
}
.ct-social:hover {
    background  : var(--ct-sky);
    border-color: var(--ct-sky);
    color       : #fff !important;
    transform   : translateY(-3px);
}
.ct-social-wa:hover {
    background  : var(--ct-green) !important;
    border-color: var(--ct-green) !important;
}

/* ── MAP ──────────────────────────────────────────────────────── */
.ct-map-section { background: var(--ct-card-bg); border-top: 1px solid var(--ct-border); transition: background .3s; }
.ct-map-label {
    padding    : 16px 0;
    background : var(--ct-light);
    border-bottom: 1px solid var(--ct-border);
    font-size  : .9rem;
    font-weight: 700;
    color      : var(--ct-muted);
    transition : background .3s;
}
.ct-map-embed iframe { display: block; width: 100%; height: 420px; border: none; }
html[data-theme="dark"] .ct-map-embed { filter: invert(90%) hue-rotate(180deg); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 960px) {
    .ct-cards { grid-template-columns: repeat(2, 1fr); }
    .ct-grid  { grid-template-columns: 1fr; }
    .ct-info-col { position: static; }
}
@media (max-width: 560px) {
    .ct-cards { grid-template-columns: 1fr 1fr; }
    .ct-wrap  { width: calc(100% - 32px); }
    .ct-hero  { padding: 48px 0 88px; }
    .ct-body  { padding: 40px 0 60px; }
}
@media (max-width: 400px) {
    .ct-cards { grid-template-columns: 1fr; }
    .ct-wrap  { width: calc(100% - 20px); }
}