/* GCF Facial Gallery, brand tokens matched to globalcounselforum.com */

:root {
    --gcf-navy: #3E6A85;
    --gcf-navy-deep: #2E5064;
    --gcf-nav-dark: #001924;
    --gcf-gold: #F0A202;
    --gcf-cream: #f7f5f0;
    --gcf-ink: #1a1a1a;
    --gcf-white: #ffffff;

    /* Body copy: Urbanist, the real typeface used on globalcounselforum.com.
       Headings: Overpass, a free open source stand in for Interstate
       Compressed (the main site's actual headline font). Interstate
       Compressed is a commercial typeface GCF does not yet hold a
       license for; Overpass shares its Highway Gothic lineage and
       compressed proportions and was built by Red Hat for this exact
       substitution. Swap the family name here if GCF secures an
       Interstate Compressed license later, see gcf_fg_enqueue_brand_fonts()
       in the main plugin file for the loading side of that change. */
    --gcf-font-body: 'Urbanist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --gcf-font-heading: 'Overpass', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.gcf-fg-portal,
.gcf-fg-event-page,
.gcf-fg-wrap,
.gcf-fg-home,
.gcf-fg-site-header,
.gcf-fg-gate-wrap {
    font-family: var(--gcf-font-body);
    color: var(--gcf-ink);
}

.gcf-fg-portal h1, .gcf-fg-portal h2, .gcf-fg-portal h3,
.gcf-fg-event-page h1, .gcf-fg-event-page h2, .gcf-fg-event-page h3,
.gcf-fg-wrap h1, .gcf-fg-wrap h2, .gcf-fg-wrap h3,
.gcf-fg-home h1, .gcf-fg-home h2, .gcf-fg-home h3,
.gcf-fg-gate-wrap h1, .gcf-fg-gate-wrap h2, .gcf-fg-gate-wrap h3,
.gcf-fg-portal-card-overlay h2,
.gcf-fg-event-titlebar h1,
.gcf-fg-home-hero h1,
.gcf-fg-home-gallery-btn-name,
.gcf-fg-home-galleries h2,
.gcf-fg-home-about h2 {
    font-family: var(--gcf-font-heading);
    letter-spacing: 0;
}

/* ---------------------------------------------------------------- */
/* Portal, grid of event year cards                                  */
/* ---------------------------------------------------------------- */

.gcf-fg-portal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

.gcf-fg-portal-header {
    text-align: left;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(62, 106, 133, 0.12);
    padding-bottom: 28px;
}

.gcf-fg-portal-header h1 {
    font-size: 34px;
    font-weight: 800;
    color: var(--gcf-navy);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.gcf-fg-portal-header p {
    font-size: 17px;
    color: #55606a;
    margin: 0;
}

.gcf-fg-portal-nudge {
    margin-top: 14px !important;
    font-size: 15px !important;
    color: var(--gcf-navy) !important;
    background: var(--gcf-cream);
    border-left: 4px solid var(--gcf-gold);
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    display: inline-block;
}

.gcf-fg-portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

.gcf-fg-portal-card {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    height: 340px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(62, 106, 133, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gcf-fg-portal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(62, 106, 133, 0.26);
}

.gcf-fg-portal-card-media {
    width: 100%;
    height: 100%;
    background-color: var(--gcf-navy);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.gcf-fg-portal-card-overlay {
    width: 100%;
    padding: 28px 24px;
    background: linear-gradient(180deg, rgba(62, 106, 133, 0) 0%, rgba(62, 106, 133, 0.55) 45%, rgba(62, 106, 133, 0.92) 100%);
    color: var(--gcf-white);
}

.gcf-fg-portal-card-year {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gcf-gold);
    margin-bottom: 6px;
}

.gcf-fg-portal-card-overlay h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--gcf-white);
    line-height: 1.15;
}

.gcf-fg-portal-card-dates {
    font-size: 14px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

.gcf-fg-portal-empty {
    color: #55606a;
    font-size: 16px;
}

/* ---------------------------------------------------------------- */
/* Event mini page                                                   */
/* ---------------------------------------------------------------- */

.gcf-fg-event-page {
    max-width: 900px;
    margin: 0 auto 80px;
    padding: 20px 24px 0;
}

/* The event thumbnail is usually promotional artwork that already carries
   its own large title text. Overlaying our heading on top produced two
   competing sets of words, so the image gets its own clear area and the
   title sits in a solid band underneath, matching the homepage cards. */
.gcf-fg-event-header {
    border-radius: 10px;
    overflow: hidden;
    background: #0a2331;
}

.gcf-fg-event-hero {
    height: 240px;
    background-color: var(--gcf-navy);
    overflow: hidden;
}

.gcf-fg-event-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gcf-fg-event-titlebar {
    padding: 18px 24px 22px;
    color: var(--gcf-white);
}

.gcf-fg-event-hero-year {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gcf-gold);
    margin-bottom: 6px;
}

.gcf-fg-event-titlebar h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--gcf-white);
    line-height: 1.2;
}

.gcf-fg-event-hero-meta {
    font-size: 14px;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.gcf-fg-event-body {
    padding: 16px 4px 0;
}

/* Deliberately low key: this is a hint, not a callout. Sits inline with
   the search link rather than in a highlighted box, so it does not
   compete with the photo grid for attention. */
.gcf-fg-event-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.gcf-fg-event-nudge {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b757d;
}

.gcf-fg-btn-small {
    padding: 7px 14px;
    font-size: 13px;
}

.gcf-fg-event-browse {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(62, 106, 133, 0.15);
}

.gcf-fg-event-browse h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--gcf-navy);
    margin: 0 0 20px;
}

.gcf-fg-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.gcf-fg-browse-empty {
    color: #55606a;
    font-size: 15px;
}

#gcf-fg-browse-loadmore-wrap {
    text-align: center;
    margin-top: 28px;
}

.gcf-fg-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 18, 24, 0.92);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px 20px;
    overflow-y: auto;
}

.gcf-fg-lightbox-view {
    position: relative;
    max-width: 100%;
    max-height: 60vh;
    display: flex;
    justify-content: center;
    line-height: 0;
}

.gcf-fg-lightbox img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.gcf-fg-lightbox-face-boxes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gcf-fg-lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    background: none;
    border: none;
    color: var(--gcf-white);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    z-index: 10;
}

.gcf-fg-lightbox-tag-bar {
    margin-top: 20px;
    text-align: center;
}

.gcf-fg-lightbox-tag-hint {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin: 10px 0 0;
}

.gcf-fg-lightbox-consent,
.gcf-fg-lightbox-done {
    background: #ffffff;
    border-radius: 10px;
    padding: 28px;
    margin-top: 20px;
    max-width: 480px;
    width: 100%;
    max-height: 34vh;
    overflow-y: auto;
}

.gcf-fg-lightbox-consent h3,
.gcf-fg-lightbox-done h3 {
    margin-top: 0;
}

.gcf-fg-lightbox-tcs-link {
    font-size: 13px;
}

.gcf-fg-lightbox-consent-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ---------------------------------------------------------------- */
/* Enrollment: browse-then-click-your-face picker                    */
/* ---------------------------------------------------------------- */

.gcf-fg-enroll-picker-hint {
    font-size: 14px;
    color: #55606a;
    margin: 12px 0 16px;
}

.gcf-fg-enroll-picker-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
}

.gcf-fg-enroll-picker-stage img {
    max-width: 100%;
    max-height: 70vh;
    display: block;
}

#gcf-fg-enroll-picker-boxes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gcf-fg-enroll-face-box {
    position: absolute;
    border: 3px solid var(--gcf-gold);
    background: rgba(240, 162, 2, 0.12);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.gcf-fg-enroll-face-box:hover {
    background: rgba(240, 162, 2, 0.35);
    border-color: var(--gcf-white);
}

.gcf-fg-event-strip {
    margin-bottom: 20px;
}

.gcf-fg-event-strip span {
    display: inline-block;
    background: var(--gcf-navy);
    color: var(--gcf-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 6px 14px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------- */
/* Forms (consent, enroll, search, delete)                           */
/* ---------------------------------------------------------------- */

.gcf-fg-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.gcf-fg-wrap h2 {
    color: var(--gcf-navy);
    font-weight: 800;
    font-size: 24px;
}

.gcf-fg-summary-box {
    background: var(--gcf-cream);
    border-left: 4px solid var(--gcf-gold);
    padding: 16px 20px;
    margin: 16px 0 24px;
    border-radius: 0 6px 6px 0;
}

.gcf-fg-summary-box ul {
    margin: 0;
    padding-left: 20px;
}

.gcf-fg-summary-box li {
    margin-bottom: 6px;
}

.gcf-fg-wrap label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--gcf-navy);
}

.gcf-fg-wrap input[type="text"],
.gcf-fg-wrap input[type="email"],
.gcf-fg-wrap input[type="password"],
.gcf-fg-wrap input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    margin-bottom: 14px;
    box-sizing: border-box;
    font-size: 15px;
}

.gcf-fg-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.gcf-fg-checkbox-row label {
    font-weight: 400;
    margin: 0;
    color: var(--gcf-ink);
}

.gcf-fg-checkbox-row input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.gcf-fg-btn-primary,
.gcf-fg-btn-secondary {
    display: inline-block;
    padding: 13px 26px;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
}

.gcf-fg-btn-primary {
    background: var(--gcf-navy);
    color: var(--gcf-white);
}

.gcf-fg-btn-primary:hover {
    background: var(--gcf-navy-deep);
    color: var(--gcf-white);
}

.gcf-fg-btn-secondary {
    background: transparent;
    color: var(--gcf-navy);
    border: 1px solid var(--gcf-navy);
}

.gcf-fg-btn-secondary:hover {
    background: rgba(62, 106, 133, 0.06);
}

.gcf-fg-error {
    color: #b3261e;
    font-weight: 600;
    margin-bottom: 14px;
}

.gcf-fg-full-tcs {
    font-size: 14px;
    color: #555;
    margin-top: 24px;
}

.gcf-fg-tcs-body h4 {
    color: var(--gcf-navy);
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 8px;
}

.gcf-fg-tcs-body h4:first-of-type {
    margin-top: 12px;
}

.gcf-fg-tcs-body p,
.gcf-fg-tcs-body li {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

.gcf-fg-tcs-body ul {
    padding-left: 20px;
    margin: 8px 0 16px;
}

.gcf-fg-tcs-body li {
    margin-bottom: 6px;
}

.gcf-fg-tcs-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
}

.gcf-fg-tcs-draft-flag {
    margin-top: 28px;
    padding: 12px 16px;
    background: #fdecea;
    border-left: 4px solid #b3261e;
    color: #7a1a15;
    border-radius: 0 6px 6px 0;
}

/* ---------------------------------------------------------------- */
/* Site header, shared logo + menu pulled from the main site         */
/* ---------------------------------------------------------------- */

.gcf-fg-site-header {
    background: var(--gcf-nav-dark);
    padding: 0 24px;
}

.gcf-fg-site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

.gcf-fg-site-logo img {
    height: 42px;
    width: auto;
    display: block;
}

.gcf-fg-site-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.gcf-fg-site-nav > ul > li {
    position: relative;
}

.gcf-fg-site-nav > ul > li > a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.gcf-fg-site-nav > ul > li > a:hover {
    color: var(--gcf-gold);
}

.gcf-fg-site-nav-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--gcf-nav-dark);
    padding: 10px 0;
    min-width: 200px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    border-radius: 0 0 6px 6px;
    z-index: 20;
}

.gcf-fg-site-nav li.has-children:hover .gcf-fg-site-nav-sub {
    display: block;
}

.gcf-fg-site-nav-sub li a {
    display: block;
    padding: 8px 18px;
    color: #ffffff;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.gcf-fg-site-nav-sub li a:hover {
    color: var(--gcf-gold);
}

.gcf-fg-site-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

.gcf-fg-site-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
}

.gcf-fg-site-nav.gcf-fg-site-nav-open {
    display: block;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--gcf-nav-dark);
    padding: 12px 24px 24px;
    z-index: 30;
}

.gcf-fg-site-nav.gcf-fg-site-nav-open ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.gcf-fg-site-nav.gcf-fg-site-nav-open .gcf-fg-site-nav-sub {
    display: block;
    position: static;
    box-shadow: none;
    padding-left: 14px;
}

/* ---------------------------------------------------------------- */
/* Homepage                                                           */
/* ---------------------------------------------------------------- */

.gcf-fg-home-hero {
    background: linear-gradient(160deg, var(--gcf-navy) 0%, var(--gcf-navy-deep) 100%);
    color: #ffffff;
    padding: 30px 24px 28px;
    text-align: center;
}

.gcf-fg-home-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.gcf-fg-home-hero-eyebrow {
    display: inline-block;
    color: var(--gcf-gold);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.gcf-fg-home-hero h1 {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.gcf-fg-home-hero p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.gcf-fg-home-section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 24px;
}

.gcf-fg-home-galleries {
    background: var(--gcf-nav-dark);
}

.gcf-fg-home-galleries h2 {
    font-size: 28px;
    font-weight: 800;
    color: #eaf1f5;
    margin: 0 0 32px;
}

.gcf-fg-home-about h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--gcf-navy);
    margin: 0 0 32px;
}

.gcf-fg-home-empty {
    color: rgba(234, 241, 245, 0.7);
    font-size: 16px;
}

.gcf-fg-home-gallery-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 28px;
}

.gcf-fg-home-gallery-btn {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    background-color: #0a2331;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gcf-fg-home-gallery-btn:hover,
.gcf-fg-home-gallery-btn:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

/* Published but no photos imported yet: visible so people know it is
   coming, but clearly not ready and not clickable. */
.gcf-fg-home-gallery-btn.is-empty {
    cursor: default;
    opacity: 0.45;
}

.gcf-fg-home-gallery-btn.is-empty:hover,
.gcf-fg-home-gallery-btn.is-empty:focus-visible {
    transform: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.gcf-fg-home-gallery-btn.is-empty .gcf-fg-home-gallery-btn-media img {
    filter: grayscale(1);
}

.gcf-fg-home-gallery-btn-cta.is-disabled {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.75);
}

/* The event thumbnails are usually promotional artwork that already
   carries its own large title text. Overlaying our own heading on top of
   that produced two competing sets of words, so the image gets its own
   clear area and the text sits in a solid panel underneath it, rather
   than on top of the photo. */
.gcf-fg-home-gallery-btn-media {
    width: 100%;
    height: 240px;
    background-color: var(--gcf-navy);
    flex-shrink: 0;
    overflow: hidden;
    display: block;
}

.gcf-fg-home-gallery-btn-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gcf-fg-home-gallery-btn-text {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gcf-fg-home-gallery-btn-year {
    color: var(--gcf-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.gcf-fg-home-gallery-btn-name {
    color: #ffffff;
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.2;
}

.gcf-fg-home-gallery-btn-desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gcf-fg-home-gallery-btn-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    color: var(--gcf-nav-dark);
    background: var(--gcf-gold);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 999px;
}

.gcf-fg-home-about {
    background: #f7f5f0;
}

.gcf-fg-home-about-lede {
    font-size: 19px;
    font-weight: 600;
    color: var(--gcf-navy);
    margin-bottom: 16px;
}

.gcf-fg-home-about p {
    font-size: 16px;
    line-height: 1.65;
    color: #333;
    max-width: 70ch;
}

.gcf-fg-home-about .gcf-fg-btn-secondary {
    margin-top: 12px;
}

@media (max-width: 780px) {
    .gcf-fg-site-nav {
        display: none;
    }
    .gcf-fg-site-nav-toggle {
        display: flex;
    }
    .gcf-fg-home-hero h1 {
        font-size: 32px;
    }
}

.gcf-fg-deletion-box {
    margin-top: 32px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}

.gcf-fg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.gcf-fg-grid-item {
    cursor: pointer;
    display: block;
}

.gcf-fg-grid-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: transform 0.15s ease;
}

.gcf-fg-grid-item:hover img {
    transform: scale(1.03);
}

.gcf-fg-browse-grid .gcf-fg-grid-item img,
.gcf-fg-browse-grid img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: transform 0.15s ease;
    cursor: pointer;
}

.gcf-fg-browse-grid a:hover img {
    transform: scale(1.03);
}

/* ---------------------------------------------------------------- */
/* Password gate                                                     */
/* ---------------------------------------------------------------- */

.gcf-fg-gate-wrap {
    max-width: 400px;
    margin: 100px auto;
    text-align: center;
}

.gcf-fg-gate-wrap h2 {
    color: var(--gcf-navy);
    font-weight: 800;
}

.gcf-fg-gate-form input[type="password"] {
    width: 100%;
    padding: 11px;
    margin: 14px 0;
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
}

.gcf-fg-gate-form button {
    background: var(--gcf-navy);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
}

.gcf-fg-gate-error {
    color: #b3261e;
}

@media (max-width: 600px) {
    .gcf-fg-portal-card {
        height: 280px;
    }
    .gcf-fg-event-hero {
        height: 180px;
    }
    .gcf-fg-event-titlebar h1 {
        font-size: 22px;
    }
}

/* Lightbox action row: tag button plus download icon button */
.gcf-fg-lightbox-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gcf-fg-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--gcf-white);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.gcf-fg-btn-icon:hover,
.gcf-fg-btn-icon:focus-visible {
    background: var(--gcf-gold);
    border-color: var(--gcf-gold);
    color: var(--gcf-nav-dark);
}

/* ---------------------------------------------------------------- */
/* Face cloud: overlapping, gently drifting cluster of faces         */
/* ---------------------------------------------------------------- */

.gcf-fg-face-cloud-wrap {
    margin-bottom: 14px;
}

.gcf-fg-face-cloud-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.gcf-fg-face-cloud-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gcf-navy);
}

.gcf-fg-face-cloud-toggle {
    background: none;
    border: none;
    color: var(--gcf-navy);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 2px;
    text-decoration: underline;
}

.gcf-fg-face-cloud {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 8px;
}

.gcf-fg-face-cloud.is-expanded {
    flex-wrap: wrap;
    overflow-x: visible;
    max-height: 320px;
    overflow-y: auto;
}

.gcf-fg-face-chip {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 66px;
    text-align: center;
}

.gcf-fg-face-chip img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border: 3px solid transparent;
    background: #e6ebee;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.gcf-fg-face-chip:hover img,
.gcf-fg-face-chip:focus-visible img {
    transform: scale(1.06);
    border-color: rgba(240, 162, 2, 0.55);
}

.gcf-fg-face-chip.is-active img {
    border-color: var(--gcf-gold);
}

.gcf-fg-face-chip-name {
    display: block;
    font-size: 11px;
    line-height: 1.25;
    margin-top: 5px;
    color: var(--gcf-navy);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcf-fg-face-filter-active {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 10px;
    font-size: 14px;
    color: var(--gcf-navy);
    font-weight: 600;
}

#gcf-fg-face-filter-clear {
    background: none;
    border: 1px solid rgba(62, 106, 133, 0.35);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--gcf-navy);
}

/* Prompt shown between the cloud and the gallery once a face is picked */
.gcf-fg-tag-prompt {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--gcf-cream);
    border-left: 4px solid var(--gcf-gold);
    border-radius: 0 6px 6px 0;
    padding: 12px 18px;
    margin-bottom: 14px;
}

#gcf-fg-tag-prompt-text {
    font-weight: 700;
    color: var(--gcf-navy);
}

/* ---------------------------------------------------------------- */
/* Generic modal (cluster tagging)                                   */
/* ---------------------------------------------------------------- */

.gcf-fg-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 25, 36, 0.75);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.gcf-fg-modal-panel {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 26px;
    max-width: 480px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
}

.gcf-fg-modal-panel h3 {
    margin-top: 0;
    color: var(--gcf-navy);
}

.gcf-fg-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #6b757d;
}

.gcf-fg-modal-face {
    text-align: center;
    margin-bottom: 14px;
}

.gcf-fg-modal-face img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gcf-gold);
}

.gcf-fg-modal-done h4 {
    margin-top: 0;
    color: var(--gcf-navy);
}

@media (max-width: 600px) {
    .gcf-fg-face-chip-name { font-size: 9px; max-width: 70px; }
    .gcf-fg-tag-prompt { padding: 12px 14px; }
}

/* Lightbox prev/next navigation */
.gcf-fg-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--gcf-gold);
    color: var(--gcf-nav-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, background 0.15s ease;
}

.gcf-fg-lightbox-nav:hover,
.gcf-fg-lightbox-nav:focus-visible {
    transform: translateY(-50%) scale(1.08);
}

.gcf-fg-lightbox-prev { left: 24px; }
.gcf-fg-lightbox-next { right: 24px; }

.gcf-fg-lightbox-counter {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
}

@media (max-width: 700px) {
    .gcf-fg-lightbox-nav {
        width: 42px;
        height: 42px;
    }
    .gcf-fg-lightbox-prev { left: 8px; }
    .gcf-fg-lightbox-next { right: 8px; }
}

/* ---------------------------------------------------------------- */
/* Delegate survey gate                                              */
/* ---------------------------------------------------------------- */

.gcf-fg-survey-page {
    background: var(--gcf-nav-dark);
    padding: 40px 20px 72px;
    min-height: 100vh;
}

.gcf-fg-survey-shell {
    max-width: 720px;
    margin: 0 auto;
}

.gcf-fg-survey-head {
    text-align: center;
    margin-bottom: 26px;
}

.gcf-fg-survey-eyebrow {
    display: inline-block;
    color: var(--gcf-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.gcf-fg-survey-head h1 {
    font-family: var(--gcf-font-heading);
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    margin: 0 0 10px;
    line-height: 1.15;
}

.gcf-fg-survey-head p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    margin: 0;
}

/* Progress sticks to the top so people can see how far they have to go. */
.gcf-fg-survey-progress {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--gcf-nav-dark);
    padding: 12px 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gcf-fg-survey-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.gcf-fg-survey-progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--gcf-gold);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.gcf-fg-survey-progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

/* Each question is its own card, which breaks a long form into
   digestible chunks rather than one intimidating wall. */
.gcf-fg-sq {
    display: flex;
    gap: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.gcf-fg-sq-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gcf-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.gcf-fg-sq-body { flex: 1; min-width: 0; }

.gcf-fg-sq-body h3 {
    font-family: var(--gcf-font-heading);
    font-size: 17px;
    font-weight: 800;
    color: var(--gcf-navy);
    margin: 0 0 14px;
    line-height: 1.3;
}

.gcf-fg-field { margin-bottom: 14px; }
.gcf-fg-field:last-child { margin-bottom: 0; }

.gcf-fg-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--gcf-navy);
    margin-bottom: 6px;
}

.gcf-fg-field input[type="text"],
.gcf-fg-field input[type="email"],
.gcf-fg-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid #dde3e7;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gcf-fg-field input:focus,
.gcf-fg-field textarea:focus {
    outline: none;
    border-color: var(--gcf-navy);
    box-shadow: 0 0 0 3px rgba(62, 106, 133, 0.14);
}

.gcf-fg-field-pair { display: flex; gap: 14px; flex-wrap: wrap; }
.gcf-fg-field-pair .gcf-fg-field { flex: 1 1 220px; margin-bottom: 0; }

/* Pills replace the old radio grid: no horizontal scrolling on phones,
   a much larger tap target, and the selected answer is obvious. */
.gcf-fg-pills {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.gcf-fg-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gcf-fg-pill span {
    display: inline-block;
    padding: 9px 15px;
    border: 1.5px solid #dde3e7;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #44515b;
    cursor: pointer;
    transition: all 0.14s ease;
    user-select: none;
}

.gcf-fg-pill span:hover { border-color: var(--gcf-navy); color: var(--gcf-navy); }

.gcf-fg-pill input:checked + span {
    background: var(--gcf-navy);
    border-color: var(--gcf-navy);
    color: #fff;
}

.gcf-fg-pill input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(240, 162, 2, 0.5);
}

.gcf-fg-pill-sm span { padding: 7px 13px; font-size: 13px; }

.gcf-fg-scale-row {
    padding: 12px 0;
    border-top: 1px solid #eef1f3;
}

.gcf-fg-scale-row:first-of-type { border-top: none; padding-top: 0; }

.gcf-fg-scale-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gcf-ink);
    margin-bottom: 9px;
}

.gcf-fg-nps { display: flex; gap: 6px; flex-wrap: wrap; }

.gcf-fg-nps-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gcf-fg-nps-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid #dde3e7;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: #44515b;
    transition: all 0.14s ease;
}

.gcf-fg-nps-option span:hover { border-color: var(--gcf-navy); color: var(--gcf-navy); }

.gcf-fg-nps-option input:checked + span {
    background: var(--gcf-gold);
    border-color: var(--gcf-gold);
    color: var(--gcf-nav-dark);
}

.gcf-fg-nps-option input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(62, 106, 133, 0.35);
}

.gcf-fg-nps-ends {
    display: flex;
    justify-content: space-between;
    max-width: 560px;
    font-size: 12px;
    color: #7b858d;
    margin-top: 8px;
}

.gcf-fg-survey-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.gcf-fg-btn-lg { padding: 15px 30px; font-size: 15.5px; border-radius: 8px; }

.gcf-fg-survey-saved {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

.gcf-fg-survey-done {
    background: #fff;
    border-radius: 12px;
    padding: 26px;
    text-align: center;
}

.gcf-fg-survey-done h3 {
    margin-top: 0;
    color: var(--gcf-navy);
    font-family: var(--gcf-font-heading);
}

#gcf-fg-survey-error {
    background: #fdecea;
    border-left: 4px solid #b3261e;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .gcf-fg-survey-page { padding: 24px 14px 56px; }
    .gcf-fg-survey-head h1 { font-size: 26px; }
    .gcf-fg-sq { padding: 18px 16px; gap: 12px; }
    .gcf-fg-nps-option span { width: 38px; height: 38px; font-size: 14px; }
    .gcf-fg-btn-lg { width: 100%; }
}

.gcf-fg-optional {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7b858d;
    background: #eef1f3;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
}

.gcf-fg-sq-help {
    font-size: 13px;
    color: #6b757d;
    margin: -8px 0 12px;
}

/* Note shown only to signed in users when a gate is live but bypassed */
.gcf-fg-admin-note {
    background: var(--gcf-cream);
    border-left: 4px solid var(--gcf-gold);
    border-radius: 0 6px 6px 0;
    padding: 11px 16px;
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--gcf-ink);
}

.gcf-fg-admin-note a {
    color: var(--gcf-navy);
    font-weight: 700;
}

/* Survey interstitial offer and multi select */
.gcf-fg-offer {
    background: #fff;
    border-radius: 12px;
    padding: 34px 30px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.gcf-fg-offer h2 {
    font-family: var(--gcf-font-heading);
    color: var(--gcf-navy);
    font-size: 26px;
    margin: 8px 0 12px;
}

.gcf-fg-offer p { color: #44515b; font-size: 15.5px; line-height: 1.55; max-width: 52ch; margin: 0 auto 10px; }

.gcf-fg-offer-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 22px;
}

.gcf-fg-btn-ghost {
    background: none;
    border: none;
    color: var(--gcf-navy);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 14px 18px;
    text-decoration: underline;
}

.gcf-fg-pill.is-disabled span { opacity: 0.4; cursor: not-allowed; }

.gcf-fg-multi-count { font-size: 12px; color: #7b858d; margin: 8px 0 0; }

/* Second, contrasting submit on the quick survey: submit and continue to
   the extended survey. Brand gold against the navy primary. */
.gcf-fg-btn-gold {
    display: inline-block;
    background: var(--gcf-gold);
    color: var(--gcf-nav-dark);
    border: none;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.gcf-fg-btn-gold:hover,
.gcf-fg-btn-gold:focus-visible {
    background: #ffb31a;
    color: var(--gcf-nav-dark);
}

.gcf-fg-btn-gold:disabled,
.gcf-fg-survey-actions .gcf-fg-btn-primary:disabled {
    opacity: 0.6;
    cursor: wait;
}

.gcf-fg-survey-actions + .gcf-fg-survey-saved {
    margin: 10px 0 0;
}

/* 5.5.2 how survey answers are used */
.gcf-fg-survey-note { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: #5B6B75; }
.gcf-fg-survey-note a { color: inherit; text-decoration: underline; }