:root {
    --ctsfw-modal-z: 999999;
    /* sits above menus */
    --ctsfw-modal-w: 80vw;
    --ctsfw-modal-h: 80vh;
    --ctsfw-bg: rgba(0, 0, 0, .45);
    --ctsfw-surface: #fff;
    --ctsfw-text: #111;
    --ctsfw-accent: #001846;
    /* CTSFW navy */
    --x-size: 28px;
    --draw-dur: .55s;
    --spin-dur: .45s;
}

.ctsfw-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--ctsfw-bg);
    z-index: var(--ctsfw-modal-z);
    opacity: 0;
    transition: opacity .2s ease-out;
}

.ctsfw-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: calc(var(--ctsfw-modal-z) + 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out;
}

.ctsfw-modal[aria-hidden="false"],
.ctsfw-modal[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}

.ctsfw-modal[aria-hidden="false"]~.ctsfw-modal-overlay,
[data-open="true"]~.ctsfw-modal-overlay {
    opacity: 1;
}

.ctsfw-modal-scroll {
    width: var(--ctsfw-modal-w);
    height: var(--ctsfw-modal-h);
    background: var(--ctsfw-surface);
    color: var(--ctsfw-text);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    transform: translateY(12px);
    transition: transform .22s ease-out;
}

[data-open="true"] .ctsfw-modal-scroll {
    transform: translateY(0);
}

.ctsfw-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.ctsfw-modal-header h2 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--ctsfw-accent);
}

.ctsfw-modal-events {
    list-style: none;
    margin: 0;
    padding: 12px 16px 20px;
    overflow: auto;
    line-height: 1.35;
}

.ctsfw-modal-events li {
    padding: 14px 10px 14px 2px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.ctsfw-event-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.ctsfw-event-title {
    font-weight: 600;
}

.ctsfw-cal-links {
    display: inline-flex;
    gap: 10px;
    white-space: nowrap;
}

.ctsfw-cal-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, .12);
}

.ctsfw-cal-links a:hover {
    border-color: rgba(0, 0, 0, .25);
}

/* Centered close button at top edge */
.close-btn {
    position: absolute;
    top: calc(10vh - 22px);
    /* near top of viewport */
    left: 50%;
    transform: translate(-50%, -100%);
    inline-size: var(--x-size);
    block-size: var(--x-size);
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: var(--ctsfw-accent);
    cursor: pointer;
}

/* Animated X (matches snippet we discussed) */
.close-icon {
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    transform-origin: 50% 50%;
}

.slash {
    fill: none;
    stroke: currentColor;
    stroke-width: 84;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

@keyframes x-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes x-spinfade {
    to {
        transform: rotate(180deg) scale(.92);
        opacity: 0;
    }
}

[data-open="true"] .slash-a {
    animation: x-draw var(--draw-dur) ease-out forwards;
}

[data-open="true"] .slash-b {
    animation: x-draw var(--draw-dur) ease-out .08s forwards;
}

[data-closing="true"] .close-icon {
    animation: x-spinfade var(--spin-dur) ease-in forwards;
}
/* --- CTSFW Modal: visual tweaks per spec --- */

/* 1) Square corners everywhere */
[data-ctsfw-modal],
[data-ctsfw-modal] *,
[data-ctsfw-modal-overlay] {
    border-radius: 0 !important;
}

/* 2) Title styling (classes are applied via JS) */
[data-ctsfw-modal-title].text-meta {
    font-size: 1.125rem;
    /* adjust if your text-meta maps differently */
    line-height: 1.4;
    font-weight: 600;
}

[data-ctsfw-modal-title].text-blue-900 {
    color: #0f172a;
}

/* tailwind-ish slate-900; or keep as-is if already defined */
[data-ctsfw-modal-title].text-center {
    text-align: center;
}

/* 3) Close button (injected if missing) */
.ctsfw-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #001846;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.ctsfw-modal-close:focus {
    outline: 2px solid #001846;
    outline-offset: 2px;
}

/* 4) Event row title color */
.ctsfw-event-row .ctsfw-event-title {
    color: #001846;
    font-weight: 600;
}

/* 5) Brand icons before links (Google/Apple) */
/* We attach classes brand-google / brand-apple in JS. We render the icon as a small inline SVG background. */
.ctsfw-cal-links a {
    position: relative;
    padding-left: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Google icon (from icons.php 'google' path) */
.ctsfw-cal-links a.brand-google::before {
    content: "";
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-45%);
    background-repeat: no-repeat;
    background-size: 1em 1em;
    /* SVG in data URI (monochrome via currentColor); set link color as desired */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='currentColor' d='M564 325.8C564 467.3 467.1 568 324 568C186.8 568 76 457.2 76 320C76 182.8 186.8 72 324 72C390.8 72 447 96.5 490.3 136.9L422.8 201.8C334.5 116.6 170.3 180.6 170.3 320C170.3 406.5 239.4 476.6 324 476.6C422.2 476.6 459 406.2 464.8 369.7L324 369.7L324 284.4L560.1 284.4C562.4 297.1 564 309.3 564 325.8z'/></svg>");
}

/* Apple icon (from icons.php 'apple' path) */
.ctsfw-cal-links a.brand-apple::before {
    content: "";
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-45%);
    background-repeat: no-repeat;
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='currentColor' d='M447.1 332.7C446.9 296 463.5 268.3 497.1 247.9C478.3 221 449.9 206.2 412.4 203.3C376.9 200.5 338.1 224 323.9 224C308.9 224 274.5 204.3 247.5 204.3C191.7 205.2 132.4 248.8 132.4 337.5C132.4 363.7 137.2 390.8 146.8 418.7C159.6 455.4 205.8 545.4 254 543.9C279.2 543.3 297 526 329.8 526C361.6 526 378.1 543.9 406.2 543.9C454.8 543.2 496.6 461.4 508.8 424.6C443.6 393.9 447.1 334.6 447.1 332.7zM390.5 168.5C417.8 136.1 415.3 106.6 414.5 96C390.4 97.4 362.5 112.4 346.6 130.9C329.1 150.7 318.8 175.2 321 202.8C347.1 204.8 370.9 191.4 390.5 168.5z'/></svg>");
}

/* Optional: brand link colors (inherit or set a subtle tone) */
/* .ctsfw-cal-links a.brand-google, .ctsfw-cal-links a.brand-apple { color: #001846; } */
/* ========== CTSFW Modal: layout + fixes ========== */

/* Make the dialog box itself the positioning container for the close button.
   Also ensure it sits above site navs etc. */
[data-ctsfw-modal] {
    position: fixed;
    /* center on viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    /* above sticky navs */
    width: min(80vw, 900px);
    max-height: 80vh;
    background: #fff;
    border: 0;
    border-radius: 0;
    /* square corners */
    box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
    overflow: hidden;
    /* keeps close button in bounds */
}

/* Ensure overlay sits beneath the modal but above page */
[data-ctsfw-modal-overlay] {
    z-index: 999998;
    border-radius: 0 !important;
}

/* Square corners everywhere inside the modal */
[data-ctsfw-modal],
[data-ctsfw-modal] * {
    border-radius: 0 !important;
}

/* Primary, canonical header we inject/manage */
[data-ctsfw-modal-header] {
    margin: 0;
    padding: 48px 20px 16px;
    /* top space leaves room for the close X */
}

/* Title classes (we already apply these via JS) */
[data-ctsfw-modal-title].text-meta {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 600;
}

[data-ctsfw-modal-title].text-blue-900 {
    color: #0f172a;
}

/* or keep your own blue-900 */
[data-ctsfw-modal-title].text-center {
    text-align: center;
}

/* Hide the older/duplicate header inside the scroll area */
.ctsfw-modal-header {
    display: none !important;
}

/* Scroll area keeps content within 80vh minus header space */
.ctsfw-modal-scroll {
    max-height: calc(80vh - 96px);
    overflow: auto;
    padding: 0 20px 20px;
}

/* Close button: keep in the upper-right of the BOX, not the page */
.ctsfw-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #001846;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.ctsfw-modal-close:focus {
    outline: 2px solid #001846;
    outline-offset: 2px;
}

/* Event name color */
.ctsfw-event-row .ctsfw-event-title {
    color: #001846;
    font-weight: 600;
}

/* Link icons (Google/Apple) already wired by JS via brand-* classes */
.ctsfw-cal-links a {
    position: relative;
    padding-left: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Google (icons.php ‘google’) */
.ctsfw-cal-links a.brand-google::before {
    content: "";
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-45%);
    background: no-repeat center / 1em 1em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='currentColor' d='M564 325.8C564 467.3 467.1 568 324 568C186.8 568 76 457.2 76 320C76 182.8 186.8 72 324 72C390.8 72 447 96.5 490.3 136.9L422.8 201.8C334.5 116.6 170.3 180.6 170.3 320C170.3 406.5 239.4 476.6 324 476.6C422.2 476.6 459 406.2 464.8 369.7L324 369.7L324 284.4L560.1 284.4C562.4 297.1 564 309.3 564 325.8z'/></svg>");
}

/* Apple (icons.php ‘apple’) */
.ctsfw-cal-links a.brand-apple::before {
    content: "";
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-45%);
    background: no-repeat center / 1em 1em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='currentColor' d='M447.1 332.7C446.9 296 463.5 268.3 497.1 247.9C478.3 221 449.9 206.2 412.4 203.3C376.9 200.5 338.1 224 323.9 224C308.9 224 274.5 204.3 247.5 204.3C191.7 205.2 132.4 248.8 132.4 337.5C132.4 363.7 137.2 390.8 146.8 418.7C159.6 455.4 205.8 545.4 254 543.9C279.2 543.3 297 526 329.8 526C361.6 526 378.1 543.9 406.2 543.9C454.8 543.2 496.6 461.4 508.8 424.6C443.6 393.9 447.1 334.6 447.1 332.7zM390.5 168.5C417.8 136.1 415.3 106.6 414.5 96C390.4 97.4 362.5 112.4 346.6 130.9C329.1 150.7 318.8 175.2 321 202.8C347.1 204.8 370.9 191.4 390.5 168.5z'/></svg>");
}
/* --- Final overrides (place at END of file) --- */

/* Close button: neutralize old .close-btn positioning when both classes are present */
.ctsfw-modal-close {
    left: auto !important;
    /* undo .close-btn left:50% */
    transform: none !important;
    /* undo .close-btn translate */
    top: 8px !important;
    /* keep it tight to the box */
    right: 8px !important;
    z-index: 1;
    /* above title */
}

/* Hide the legacy, in-box header so only the centered title remains */
.ctsfw-modal-header {
    display: none !important;
}

/* Ensure the injected header + title spacing is correct and centered */
[data-ctsfw-modal-header] {
    padding: 48px 20px 16px !important;
    /* room above for the X */
}