/* ============================================
   FBCTX UI - Full Light Theme (with disabled-if / readonly-if)
   Scope: only affects .FBCTX-UI subtree
   ============================================ */

/* 1) LIGHT THEME TOKENS — Dark Green + White + Gold */
.FBCTX-UI {
    /* Surfaces and backgrounds */
    --surface: #ffffff; /* cards, tables, inputs */
    --panel: #ffffff; /* banner/nav/drawer panels */
    --panel-2: #f7f9f6; /* subtle elevated/off-white with a hint of green */
    --bg-tint: #f5faf6; /* section/background tint (very light) */
    /* Borders (neutral, refined) */
    --border: #e5e7eb; /* light neutral gray */
    --border-strong: #cbd5e1; /* stronger border for focus/header */
    /* Text (high-contrast neutrals; avoid green cast on body text) */
    --text-strong: #111827; /* headings (near-black charcoal) */
    --text: #1f2937; /* body text */
    --text-muted: #6b7280; /* secondary text / labels */
    /* Primary Accent (brand: DARK GREEN) */
    --accent: #0b7a0b; /* primary dark green for CTAs/links */
    --accent-strong: #085d08; /* hover/active (deeper green) */
    --accent-contrast: #ffffff; /* text on dark-green backgrounds */
    --accent-bg: #e9f6ea; /* light green tint for hover/selection */
    --accent-bg-strong: #daf0dc; /* stronger tint for headers/active rows */
    /* Secondary Accent (brand detail: GOLD) */
    --accent-2: #d4a72c; /* gold for highlights/chips/icons */
    --accent-2-strong: #b5891e; /* hover/active gold */
    --accent-2-contrast: #0d0d0d; /* text on gold backgrounds */
    --accent-2-bg: #fff7e0; /* soft gold tint for accents */
    /* Status colors (professional and distinct from brand accents) */
    --success: #166534; /* deep emerald */
    --success-bg: #e7f3e9; /* soft success background */
    --warning: #b45309; /* amber/orange (not to be confused with gold) */
    --warning-bg: #fff4e5; /* soft warning background */
    --danger: #991b1b; /* deep red for errors */
    --danger-bg: #fde2e2; /* soft error background */
    --info: #1e40af; /* deep blue for info states */
    --info-bg: #e8efff; /* soft info background */
    /* Links, focus, outlines */
    --link: #0b7a0b; /* match primary dark green */
    --link-hover: #085d08;
    --focus-ring: #d4a72c; /* gold focus outline for a premium feel */
    --focus-ring-strong: #a37412; /* stronger ring for keyboard/high emphasis */
    /* Inverse scheme (for dark hero/nav/footer) */
    --inverse-surface: #112015; /* very deep green-charcoal */
    --inverse-text: #ffffff; /* text on inverse sections */
    --inverse-border: #203226; /* subtle border on dark */
    /* Shadows & radii (restrained for premium look) */
    --radius: 10px;
    --radius-sm: 8px;
    --shadow-1: 0 10px 24px rgba(0, 0, 0, 0.12);
    --shadow-0: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Disabled/Readonly tokens */
    --disabled-bg: #f3f4f6; /* light gray */
    --disabled-text: var(--text-muted);
    --disabled-border: var(--border-strong);
    --readonly-bg: var(--panel-2); /* gentle off-white */
    --readonly-text: var(--text);
    --readonly-border: var(--border);
}

    /* Base within scope */
    .FBCTX-UI * {
        box-sizing: border-box;
    }

    .FBCTX-UI :where(h1,h2,h3,h4,h5,h6) {
        color: var(--text-strong);
        margin: 0;
    }

    .FBCTX-UI :where(p, label, input, select, button, table) {
        color: var(--text);
    }

    /* =========================================================
   >>> Generic Components (includes the button/icon patch) <<<
   ========================================================= */

    /* Theme-aligned Bootstrap outline primary (uses your tokens) */
/*    .FBCTX-UI .btn-outline-primary {
        background: var(--surface);
        color: var(--accent);
        border: 1px solid var(--accent);
    }

        .FBCTX-UI .btn-outline-primary:hover {
            color: var(--accent-strong);
            border-color: var(--accent-strong);
            background: var(--accent-bg);
        }

        .FBCTX-UI .btn-outline-primary:focus-visible {
            outline: 3px solid var(--focus-ring);
            outline-offset: 2px;
        }*/

    /* Buttons: shared layout for all types */
    .FBCTX-UI .btn,
    .FBCTX-UI .btn-secondary,
    .FBCTX-UI .btn-outline,
    .FBCTX-UI .btn-ghost {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 38px;
        padding: 0 14px;
        border-radius: var(--radius-sm);
        font-weight: 300;
        cursor: pointer;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
    }

        /* Icon sizing & centering inside buttons */
        .FBCTX-UI .btn .icon,
        .FBCTX-UI .btn-secondary .icon,
        .FBCTX-UI .btn-outline .icon,
        .FBCTX-UI .btn-ghost .icon {
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

            .FBCTX-UI .btn .icon svg,
            .FBCTX-UI .btn-secondary .icon svg,
            .FBCTX-UI .btn-outline .icon svg,
            .FBCTX-UI .btn-ghost .icon svg {
                width: 100%;
                height: 100%;
                stroke: currentColor;
                fill: none;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

    /* Primary Button (Dark Green) */
    .FBCTX-UI .btn {
        background: var(--accent);
        color: var(--accent-contrast);
        border: 1px solid var(--accent);
        box-shadow: var(--shadow-0);
    }

        .FBCTX-UI .btn:hover {
            background: var(--accent-strong);
            border-color: var(--accent-strong);
        }

        .FBCTX-UI .btn:active {
            transform: translateY(1px);
        }

        .FBCTX-UI .btn:focus-visible {
            outline: 3px solid var(--focus-ring);
            outline-offset: 2px;
        }

    /* Secondary Button (Gold) */
    .FBCTX-UI .btn-secondary {
        background: var(--accent-2);
        color: var(--accent-2-contrast);
        border: 1px solid var(--accent-2);
    }

        .FBCTX-UI .btn-secondary:hover {
            background: var(--accent-2-strong);
            border-color: var(--accent-2-strong);
        }

        .FBCTX-UI .btn-secondary:active {
            transform: translateY(1px);
        }

        .FBCTX-UI .btn-secondary:focus-visible {
            outline: 3px solid var(--focus-ring-strong);
            outline-offset: 2px;
        }

    /* Backward compatibility: .btn.secondary -> behaves like .btn-secondary */
    .FBCTX-UI .btn.secondary {
        background: var(--accent-2);
        color: var(--accent-2-contrast);
        border-color: var(--accent-2);
    }

        .FBCTX-UI .btn.secondary:hover {
            background: var(--accent-2-strong);
            border-color: var(--accent-2-strong);
        }

        .FBCTX-UI .btn.secondary:focus-visible {
            outline: 3px solid var(--focus-ring-strong);
            outline-offset: 2px;
        }

    /* Outline Button (Charcoal outline) */
    .FBCTX-UI .btn-outline {
        background: var(--surface);
        color: var(--text);
        border: 1px solid #2b2b2b;
    }

        .FBCTX-UI .btn-outline:hover {
            border-color: var(--accent);
            color: var(--text-strong);
        }

        .FBCTX-UI .btn-outline:focus-visible {
            outline: 3px solid var(--focus-ring);
            outline-offset: 2px;
        }

    /* Ghost Button (text-only accent) */
    .FBCTX-UI .btn-ghost {
        background: transparent;
        color: var(--link);
        border: 1px solid transparent;
    }

        .FBCTX-UI .btn-ghost:hover {
            color: var(--link-hover);
            background: var(--accent-bg);
        }

        .FBCTX-UI .btn-ghost:focus-visible {
            outline: 3px solid var(--focus-ring);
            outline-offset: 2px;
        }

    /* Links */
    .FBCTX-UI a {
        color: var(--link);
        text-decoration: none;
    }

        .FBCTX-UI a:hover {
            color: var(--link-hover);
            text-decoration: underline;
        }

    /* Cards / Panels (generic) */
    .FBCTX-UI .card, .FBCTX-UI .panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-0);
    }

    .FBCTX-UI .card-header {
        background: var(--accent-bg-strong);
        border-bottom: 1px solid var(--border-strong);
    }

    /* Inputs (generic) */
    .FBCTX-UI input, .FBCTX-UI select, .FBCTX-UI textarea {
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

        .FBCTX-UI input::placeholder,
        .FBCTX-UI textarea::placeholder {
            color: var(--text-muted);
        }

        .FBCTX-UI input:focus-visible,
        .FBCTX-UI select:focus-visible,
        .FBCTX-UI textarea:focus-visible {
            border-color: var(--accent);
            outline: 3px solid var(--focus-ring);
            outline-offset: 2px;
        }

    /* Tables (generic) */
    .FBCTX-UI table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
    }

    .FBCTX-UI thead th {
        background: var(--panel-2);
        color: var(--text-strong);
        border-bottom: 2px solid var(--border-strong);
    }

    .FBCTX-UI tbody tr {
        border-bottom: 1px solid var(--border);
    }

        .FBCTX-UI tbody tr:hover {
            background: var(--accent-bg);
        }

    /* Dark/Inverse Sections (hero/nav/footer) */
    .FBCTX-UI .section-dark {
        background: var(--inverse-surface);
        color: var(--inverse-text);
    }

        .FBCTX-UI .section-dark a {
            color: var(--accent-2);
        }

            .FBCTX-UI .section-dark a:hover {
                color: var(--accent-2-strong);
            }

        .FBCTX-UI .section-dark .card {
            background: #14261a;
            border: 1px solid var(--inverse-border);
        }

    /* ============================================
   NAV BAR (desktop + mobile drawer)
   Non-sticky (scrolls with page)
   ============================================ */
    .FBCTX-UI .site-header {
        position: static;
        background: var(--panel);
        border-bottom: 1px solid var(--border);
    }

    .FBCTX-UI .nav-wrap {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
    }

    .FBCTX-UI .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
        color: var(--text-strong);
        text-decoration: none;
    }
    /* Brand mark: green with a gold ring */
    .FBCTX-UI .brand-mark {
        width: 26px;
        height: 26px;
        border-radius: var(--radius-sm);
        background: var(--accent);
        border: 2px solid var(--accent-2);
    }
    /* Desktop menu */
    .FBCTX-UI .menu {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .FBCTX-UI .menu a {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            color: var(--accent);
            text-decoration: none;
            transition: background 160ms ease, color 160ms ease;
        }

            .FBCTX-UI .menu a:hover {
                background: var(--accent-bg);
                color: var(--accent-strong);
            }

            .FBCTX-UI .menu a.active {
                color: var(--accent-strong);
                font-weight: 700;
            }

                .FBCTX-UI .menu a.active::after {
                    content: "";
                    position: absolute;
                    left: 10px;
                    right: 10px;
                    bottom: 4px;
                    height: 2px;
                    border-radius: 2px;
                    background: var(--accent-2);
                }
            /* Menu icons */
            .FBCTX-UI .menu a .icon,
            .FBCTX-UI .mobile-drawer a .icon {
                width: 18px;
                height: 18px;
                flex-shrink: 0;
            }

                .FBCTX-UI .menu a .icon svg,
                .FBCTX-UI .mobile-drawer a .icon svg {
                    width: 100%;
                    height: 100%;
                    stroke: currentColor;
                    fill: none;
                    stroke-width: 2;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                }

    /* Hamburger button (mobile) */
    .FBCTX-UI .nav-toggle {
        margin-left: auto;
        display: none;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--panel);
        color: var(--accent);
        cursor: pointer;
    }

        .FBCTX-UI .nav-toggle svg {
            width: 22px;
            height: 22px;
        }

        .FBCTX-UI .nav-toggle .line {
            transition: transform 200ms ease, opacity 200ms ease;
            transform-origin: center;
        }

        .FBCTX-UI .nav-toggle[aria-expanded="true"] .line1 {
            transform: translateY(6px) rotate(45deg);
        }

        .FBCTX-UI .nav-toggle[aria-expanded="true"] .line2 {
            opacity: 0;
        }

        .FBCTX-UI .nav-toggle[aria-expanded="true"] .line3 {
            transform: translateY(-6px) rotate(-45deg);
        }

    /* Mobile off-canvas drawer */
    .FBCTX-UI .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1001;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        background: var(--panel);
        border-right: 1px solid var(--border);
        box-shadow: 2px 0 16px rgba(0,0,0,0.12);
        transform: translateX(-100%);
        transition: transform 300ms ease;
        display: flex;
        flex-direction: column;
        padding: 12px;
    }

        .FBCTX-UI .mobile-drawer.open {
            transform: translateX(0);
        }

        .FBCTX-UI .mobile-drawer a {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            color: var(--accent);
            text-decoration: none;
            margin-bottom: 8px;
            transition: background 160ms ease, border-color 160ms ease;
        }

            .FBCTX-UI .mobile-drawer a:hover {
                background: var(--accent-bg);
                border-color: var(--border-strong);
            }

            .FBCTX-UI .mobile-drawer a.active {
                border-color: var(--accent-strong);
                color: var(--accent-strong);
                font-weight: 700;
            }

    /* Drawer backdrop */
    .FBCTX-UI .drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0,0,0,0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 250ms ease;
    }

        .FBCTX-UI .drawer-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }

/* Responsive: show hamburger under 768px */
@media (max-width: 768px) {
    .FBCTX-UI .menu {
        display: none;
    }

    .FBCTX-UI .nav-toggle {
        display: inline-flex;
    }
}

/* ============================================
   BANNER (title + location)
   ============================================ */
.FBCTX-UI .banner {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 18px 0;
    box-shadow: var(--shadow-0);
}

.FBCTX-UI .banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.FBCTX-UI .banner-title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600; /* reduced from 800 */
    color: var(--accent-strong);
    display: flex;
    align-items: center; /* keep icon aligned */
    gap: 10px;
}

    /* Icon next to banner title — fix alignment */
    .FBCTX-UI .banner-title .icon {
        display: inline-flex; /* ensures proper vertical alignment */
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

        .FBCTX-UI .banner-title .icon svg {
            width: 100%;
            height: 100%;
            stroke: var(--accent-2-strong);
        }

.FBCTX-UI .banner-location {
    font-size: clamp(16px, 2.2vw, 22px);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .FBCTX-UI .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .FBCTX-UI .banner-location {
        white-space: normal;
    }
}

/* ============================================
   CARD WRAPPER (specific styles overriding generic)
   ============================================ */
.FBCTX-UI .card {
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-0);
    margin-bottom: 16px;
}

.FBCTX-UI .card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 12px;
}

/* ============================================
   LOCATIONS LIST (above form)
   ============================================ */
.FBCTX-UI .locations {
    margin: 18px 0; /* consistent with your card spacing */
}

.FBCTX-UI .locations-header {
    display: flex;
    align-items: center; /* centers the icon and text */
    gap: 8px;
    margin-bottom: 10px;
    color: var(--accent);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2; /* avoids tall line boxes that "lower" the icon */
    white-space: nowrap; /* optional: prevents wrap if you want single-line */
}

    .FBCTX-UI .locations-header .icon {
        display: inline-flex; /* normalize inline baseline behavior */
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        flex: 0 0 20px; /* fixed box so the icon won’t wrap or stretch */
    }

        .FBCTX-UI .locations-header .icon svg {
            display: block; /* crucial: avoids baseline spacing */
            width: 100%;
            height: 100%;
            stroke: var(--accent-2); /* gold detail to match brand */
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }


    /* Optional micro-nudge if the font’s cap height still looks slightly off */
    .FBCTX-UI .locations-header .icon {
        transform: translateY(0.5px); /* adjust/remove to taste */
    }

/* Grid of location cards */
.FBCTX-UI .locations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2-up on desktop */
    gap: 12px;
}

/* Location card */
.FBCTX-UI .location-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-0);
    padding: 12px 14px;
}

/* Name + optional badge */
.FBCTX-UI .location-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--accent-strong);
    margin-bottom: 6px;
}

.FBCTX-UI .location-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--accent-2-bg); /* soft gold tint */
    color: var(--accent-2-strong);
    font-size: 12px;
    border: 1px solid var(--accent-2);
}

/* Body rows: address + phone */
.FBCTX-UI .location-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0;
    color: var(--text);
    font-size: 14px;
}

    /* normalize icon alignment */
    .FBCTX-UI .location-row .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

        .FBCTX-UI .location-row .icon svg {
            display: block;
            width: 100%;
            height: 100%;
            stroke: var(--text-muted);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

/* Actions: map / call */
.FBCTX-UI .location-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

    .FBCTX-UI .location-actions a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--panel-2);
        color: var(--accent);
        text-decoration: none;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    }

        .FBCTX-UI .location-actions a:hover {
            background: var(--accent-bg);
            border-color: var(--border-strong);
            color: var(--accent-strong);
        }

        .FBCTX-UI .location-actions a .icon {
            width: 16px;
            height: 16px;
        }

            .FBCTX-UI .location-actions a .icon svg {
                stroke: currentColor;
            }


/* ============================================
   Digital Membership Card notice
   ============================================ */
.FBCTX-UI .membership-card-note {
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-0);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text);
}

    /* Optional icon */
    .FBCTX-UI .membership-card-note .icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .FBCTX-UI .membership-card-note .icon svg {
            width: 100%;
            height: 100%;
            stroke: var(--accent-2-strong); /* gold */
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 2;
        }

    /* Link matches theme */
    .FBCTX-UI .membership-card-note a {
        color: var(--accent);
        font-weight: 600;
        text-decoration: none;
    }

        .FBCTX-UI .membership-card-note a:hover {
            color: var(--accent-strong);
            text-decoration: underline;
        }

/* ============================================
   Emergency contact note (similar to membership-card-note)
   ============================================ */
.FBCTX-UI .emergency-contact-note {
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-0);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text);
}

    .FBCTX-UI .emergency-contact-note .icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .FBCTX-UI .emergency-contact-note .icon svg {
            display: block; /* normalize baseline */
            width: 100%;
            height: 100%;
            stroke: var(--accent-2-strong); /* gold accent */
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 2;
        }

    .FBCTX-UI .emergency-contact-note strong {
        color: var(--text-strong);
    }


/* ============================================
   INFO BOX (full-width message box)
   ============================================ */
.FBCTX-UI .info-box {
    margin: 18px 0;
    padding: 16px 18px;
    background: var(--panel-2); /* soft light panel */
    border: 1px solid var(--border); /* subtle border */
    border-radius: var(--radius); /* same radius as cards */
    box-shadow: var(--shadow-0); /* soft shadow */

    display: grid;
    grid-template-columns: 26px 1fr; /* icon + title row */
    gap: 10px 14px;
}

    /* Title row (icon + title) */
    .FBCTX-UI .info-box .title {
        font-size: 17px;
        font-weight: 700;
        color: var(--text-strong);
        line-height: 1.2;
        display: flex;
        align-items: center;
    }

    /* Icon styling */
    .FBCTX-UI .info-box .icon {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .FBCTX-UI .info-box .icon svg {
            display: block;
            width: 100%;
            height: 100%;
            stroke: var(--accent-2-strong); /* gold */
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    /* Description goes full-width below title */
    .FBCTX-UI .info-box .description {
        grid-column: 1 / -1; /* spans both columns */
        margin-top: 2px;
        color: var(--text);
        font-size: 15px;
        line-height: 1.45;
    }

/* ============================================
   FORM (grid + inputs focus behavior)
   ============================================ */
.FBCTX-UI .form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.FBCTX-UI .form-field {
    grid-column: span 6;
}

    .FBCTX-UI .form-field.sm {
        grid-column: span 3;
    }

/* Thirds (4 of 12 columns) */
.FBCTX-UI .form-field.third {
    grid-column: span 4;
}


.FBCTX-UI label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Requirement note (or hint) — flex row, normalized SVG */
.FBCTX-UI .requirement-note,
.FBCTX-UI .hint-note {
    grid-column: 1 / -1; /* full-width row in the 12-col grid */
    display: flex; /* ensure row layout */
    flex-wrap: nowrap; /* prevent icon from breaking to next line */
    align-items: center; /* vertical alignment in the middle */
    gap: 8px;
    line-height: 1.4; /* keep text height consistent */
}

    /* Icon normalization: inline-flex + block SVG */
    .FBCTX-UI .requirement-note .icon,
    .FBCTX-UI .hint-note .icon {
        display: inline-flex; /* avoid baseline drop issues */
        align-items: center;
        justify-content: center;
        width: 18px; /* or 16px if using the lighter hint */
        height: 18px;
        flex: 0 0 18px; /* fixed icon box so it won’t wrap */
    }

        .FBCTX-UI .requirement-note .icon svg,
        .FBCTX-UI .hint-note .icon svg {
            display: block; /* remove inline SVG baseline behavior */
            width: 100%;
            height: 100%;
            stroke: var(--accent-2); /* gold icon (or var(--text-muted) for hint) */
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    /* Optional: tiny nudge if your font’s x-height makes the icon look low/high */
    .FBCTX-UI .requirement-note .icon,
    .FBCTX-UI .hint-note .icon {
        margin-top: 1px; /* adjust/remove if not needed */
    }

.FBCTX-UI input[type="text"],
.FBCTX-UI input[type="tel"],
.FBCTX-UI input[type="email"],
.FBCTX-UI input[type="number"],
.FBCTX-UI select {
    width: 100%;
    height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

    .FBCTX-UI input::placeholder,
    .FBCTX-UI select::placeholder {
        color: #9aa3af;
    }

    /* Focus: green border + gold outline (accessible) */
    .FBCTX-UI input:focus,
    .FBCTX-UI select:focus {
        border-color: var(--accent);
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
        box-shadow: none;
    }

.FBCTX-UI .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Validation */
.FBCTX-UI .field-validation-error {
    margin-top: 6px;
    color: var(--danger);
    font-size: 12px;
}

.FBCTX-UI .input-validation-error {
    border-color: var(--danger) !important;
    background: var(--danger-bg);
}


/* Self-contained signature group using grid (no Bootstrap dependencies) */
.FBCTX-UI .signature-group {
    display: grid;
    grid-template-columns: auto 1fr; /* button + input */
    align-items: stretch;
    width: 100%;
}

    .FBCTX-UI .signature-group > .btn {
        height: 38px;
        border-right: 0;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }

    .FBCTX-UI .signature-group > .form-control {
        height: 38px;
        border-left: 0;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        min-width: 0; /* allow shrinking */
    }


/* Map Bootstrap outline-primary to your brand */
.FBCTX-UI .btn-outline-primary {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--accent);
}

    .FBCTX-UI .btn-outline-primary:hover {
        color: var(--accent-strong);
        border-color: var(--accent-strong);
        background: var(--accent-bg);
    }

    .FBCTX-UI .btn-outline-primary:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
    }


/* ============================================
   ACCESSIBILITY & STATE: disabled / readonly (native + attribute-based)
   Place after input rules for cascade priority
   ============================================ */

/* Disabled: native :disabled + attribute [disabled-if="true"] + Bootstrap classes */
.FBCTX-UI :is(input, select, textarea):disabled,
.FBCTX-UI :is(.form-control, .form-select):disabled,
.FBCTX-UI :is(input, select, textarea)[disabled-if="true"],
.FBCTX-UI :is(.form-control, .form-select)[disabled-if="true"] {
    background: var(--disabled-bg);
    color: var(--disabled-text);
    border-color: var(--disabled-border);
    cursor: not-allowed;
    opacity: 1; /* keep legible across UAs/bootstrap */
}

/* Readonly: native [readonly] + attribute [readonly-if="true"] + Bootstrap */
.FBCTX-UI :is(input, textarea)[readonly],
.FBCTX-UI :is(.form-control)[readonly],
.FBCTX-UI :is(input, textarea)[readonly-if="true"],
.FBCTX-UI :is(.form-control)[readonly-if="true"] {
    background: var(--readonly-bg);
    color: var(--readonly-text);
    border-color: var(--readonly-border);
    cursor: default;
    opacity: 1;
}

/* Placeholder color inside disabled/readonly inputs */
.FBCTX-UI :is(input, textarea):is(:disabled, [disabled-if="true"])::placeholder,
.FBCTX-UI :is(.form-control):is(:disabled, [disabled-if="true"])::placeholder {
    color: var(--disabled-text);
    opacity: 1;
}

.FBCTX-UI :is(input, textarea):is([readonly], [readonly-if="true"])::placeholder,
.FBCTX-UI :is(.form-control):is([readonly], [readonly-if="true"])::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Disable focus outlines & hover effects on disabled/readonly */
.FBCTX-UI :is(input, select, textarea):is(:disabled, [disabled-if="true"], [readonly], [readonly-if="true"]):focus,
.FBCTX-UI :is(.form-control, .form-select):is(:disabled, [disabled-if="true"], [readonly], [readonly-if="true"]):focus {
    outline: none;
    box-shadow: none;
}

.FBCTX-UI :is(input, select, textarea):is(:disabled, [disabled-if="true"], [readonly], [readonly-if="true"]):hover,
.FBCTX-UI :is(.form-control, .form-select):is(:disabled, [disabled-if="true"], [readonly], [readonly-if="true"]):hover {
    border-color: var(--disabled-border);
}

/* Prevent interaction (visual) when using disabled-if without true disabled */
.FBCTX-UI :is(input, select, textarea)[disabled-if="true"],
.FBCTX-UI :is(.form-control, .form-select)[disabled-if="true"] {
    pointer-events: none; /* not focusable/clickable */
    user-select: none;
}

/* Validation + disabled/readonly interaction:
   Disabled/readonly fields should not show error background loudly */
.FBCTX-UI :is(input, select, textarea):is(:disabled, [disabled-if="true"], [readonly], [readonly-if="true"]).input-validation-error,
.FBCTX-UI :is(.form-control, .form-select):is(:disabled, [disabled-if="true"], [readonly], [readonly-if="true"]).input-validation-error {
    background: var(--disabled-bg);
    border-color: var(--disabled-border);
    color: var(--disabled-text);
}

/* ============================================
   DATAGRID (Table-specific overrides)
   ============================================ */
.FBCTX-UI .table-wrap {
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-0);
}

.FBCTX-UI table {
    width: 100%;
    border-collapse: collapse; /* override generic 'separate' */
    background: var(--surface);
}

/* Header (accented version) */
.FBCTX-UI thead th {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    color: var(--accent);
    background: var(--accent-bg-strong);
    border-bottom: 2px solid var(--accent-2);
}

/* Rows & cells */
.FBCTX-UI tbody td {
    padding: 10px 12px;
    color: var(--text);
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* Hover row */
.FBCTX-UI tbody tr:hover {
    background: var(--accent-bg);
}

/* Cell actions */
.FBCTX-UI .cell-actions a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    margin-right: 8px;
}

    .FBCTX-UI .cell-actions a:hover {
        text-decoration: underline;
        color: var(--accent-2-strong);
    }

/* Empty state */
.FBCTX-UI .empty {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface);
}

/* Pagination */
.FBCTX-UI .pager {
    padding: 10px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

    .FBCTX-UI .pager .page-btn {
        height: 30px;
        padding: 0 12px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--accent);
        background: #fff;
        color: var(--accent);
        cursor: pointer;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    }

        .FBCTX-UI .pager .page-btn:hover {
            background: var(--accent-bg);
        }
        /* Current/active page: gold accent */
        .FBCTX-UI .pager .page-btn.current,
        .FBCTX-UI .pager .page-btn.active {
            border-color: var(--accent-2);
            color: var(--accent-2-strong);
            background: var(--accent-2-bg);
        }

/* ============================================
   TOTAL RECORDS BAR
   ============================================ */
.FBCTX-UI .total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-0);
}

    .FBCTX-UI .total-bar .total-label {
        font-size: 16px;
        font-weight: 700;
        color: var(--text);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .FBCTX-UI .total-bar .total-value {
        font-size: 20px;
        font-weight: 800;
        color: var(--accent-2-strong);
    }

    .FBCTX-UI .total-bar .icon {
        width: 20px;
        height: 20px;
    }

        .FBCTX-UI .total-bar .icon svg {
            width: 100%;
            height: 100%;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .FBCTX-UI .locations-grid {
        grid-template-columns: 1fr;
    }

    .FBCTX-UI .form-field,
    .FBCTX-UI .form-field.sm,
    .FBCTX-UI .form-field.third {
        grid-column: 1 / -1;
    }

    .FBCTX-UI .requirement-note {
        font-size: 14px;
    }

    .FBCTX-UI .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .FBCTX-UI .table-wrap {
        overflow-x: auto;
    }

    .FBCTX-UI table {
        min-width: 640px;
    }
}

/* ============================================
   Optional: Dark/Inverse Sections (hero/nav/footer)
   ============================================ */
.FBCTX-UI .section-dark {
    background: var(--inverse-surface);
    color: var(--inverse-text);
}

    .FBCTX-UI .section-dark a {
        color: var(--accent-2);
    }

        .FBCTX-UI .section-dark a:hover {
            color: var(--accent-2-strong);
        }

    .FBCTX-UI .section-dark .card {
        background: #14261a;
        border: 1px solid var(--inverse-border);
    }

/* ============================================
   Compact Footer Overrides (footer-only tiny fix)
   ============================================ */
.FBCTX-UI footer.section-dark {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--inverse-border);
    overflow: hidden;
}

    .FBCTX-UI footer.section-dark .content-wrap {
        max-width: 1100px;
        margin: 0 auto;
        padding: 8px 16px;
    }

    .FBCTX-UI footer.section-dark *:last-child {
        margin-bottom: 0;
    }

    .FBCTX-UI footer.section-dark small {
        display: block;
        margin: 0;
        line-height: 1.4;
    }



/* ============================================
   BUILD INFORMATION BLOCK
   ============================================ */

.FBCTX-UI .build-info {
    padding: 16px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-0);
    border: 1px solid var(--border);
    background: var(--panel);
}

/* Header */
.FBCTX-UI .build-info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

    .FBCTX-UI .build-info-header .title {
        font-size: 18px;
        font-weight: 700;
        color: var(--accent); /* green title */
    }

    /* Version icon */
    .FBCTX-UI .build-info-header .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
    }

        .FBCTX-UI .build-info-header .icon svg {
            width: 100%;
            height: 100%;
            stroke: var(--accent-2); /* gold icon */
        }

/* Grid */
.FBCTX-UI .build-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
}

    .FBCTX-UI .build-info-grid label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--accent-2-strong); /* gold labels */
        margin-bottom: 4px;
    }

    .FBCTX-UI .build-info-grid .value {
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
    }

/* Stack on mobile */
@media (max-width: 768px) {
    .FBCTX-UI .build-info-grid {
        grid-template-columns: 1fr;
    }
}


/* Gold Tint Overlay */
.FBCTX-UI .site-header::before {
    background: linear-gradient( to bottom, rgba(212, 167, 44, 0.40), /* gold @ 40% */
    rgba(212, 167, 44, 0.20) /* gold @ 20% */
    ), var(--header-image);
}