/* ACN Red Wednesday — portable front-end styles (redw-intl.css)
   Portable port of plugin-v2/assets/redw-v2.css, re-scoped from
   .acn-redw-v2 to .acn-redw-intl (the container the portable
   shortcode [acn_redw_intl] emits). Inner .redw-* class names are
   identical to v2 because the portable templates mirror the v2 markup.

   Colours are the Red Wednesday CAMPAIGN identity (shared by every ACN
   office) exposed as CSS variables on the container, so an office can
   override them without editing this file. There is NO country-specific
   value hardcoded here.

   Built section by section to match the JS port (items 27b-1..5):
     27b-6a — CORE MAP: container, header, counters, toolbar, radios,
              filters, stage, gesture-hint overlay.
     27b-6b — table + geo (bubbles, featured).
     27b-6c — near-me + invite + back-to-top.
     27b-6d — individual form + "6 ways".
     27b-6e — profile frame.
     27b-6f — responsive + theme overrides (cross-cutting, last).
   Excluded from the port: the CA landing's Elementor hero buttons,
   Chico photo, and Typebot register accordion — specific to the
   Canadian page, outside the portable shortcode. */

/* ============================================================
   27b-6a — CORE MAP
   ============================================================ */

.acn-redw-intl {
    --redw-red: #b30000;
    --redw-red-soft: #f6e6e6;
    --redw-text: #1f1f1f;
    --redw-muted: #6b6b6b;
    --redw-line: #e7e7e7;
    --redw-bg: #ffffff;
    --redw-bg-soft: #faf7f5;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--redw-text);
    line-height: 1.5;
    margin: 24px 0;
}

.acn-redw-intl *,
.acn-redw-intl *::before,
.acn-redw-intl *::after { box-sizing: border-box; }

/* Header */
.acn-redw-intl .redw-header { margin-bottom: 16px; }
.acn-redw-intl .redw-title {
    display: flex; gap: 12px; align-items: center;
}
.acn-redw-intl .redw-title h2 {
    margin: 0; font-size: 22px; font-weight: 700;
}
.acn-redw-intl .redw-subtitle {
    margin: 2px 0 0 0; color: var(--redw-muted); font-size: 14px;
}
.acn-redw-intl .redw-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--redw-red); flex-shrink: 0;
}
.acn-redw-intl .redw-dot-tiny {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--redw-red); margin-right: 6px;
}

/* Counters */
.acn-redw-intl .redw-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.acn-redw-intl .redw-counter {
    background: var(--redw-bg-soft);
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.acn-redw-intl .redw-counter strong {
    display: block;
    font-size: 26px;
    color: var(--redw-red);
    font-weight: 700;
    line-height: 1;
}
.acn-redw-intl .redw-counter span {
    font-size: 12px;
    color: var(--redw-muted);
    margin-top: 4px;
    display: block;
}

/* Toolbar */
.acn-redw-intl .redw-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Radio buttons (used by both Map/Table and Parish/Individual toggles) */
.acn-redw-intl .redw-radio-group {
    display: inline-flex;
    gap: 18px;
    border: 0;
    padding: 0;
    margin: 0;
}
.acn-redw-intl .redw-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--redw-text);
    user-select: none;
}
.acn-redw-intl .redw-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--redw-line);
    border-radius: 50%;
    background: var(--redw-bg);
    margin: 0;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: border-color 0.12s ease;
    flex-shrink: 0;
}
.acn-redw-intl .redw-radio input[type="radio"]::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--redw-red);
    transform: scale(0);
    transition: transform 0.12s ease;
}
.acn-redw-intl .redw-radio input[type="radio"]:checked {
    border-color: var(--redw-red);
}
.acn-redw-intl .redw-radio input[type="radio"]:checked::before {
    transform: scale(1);
}
.acn-redw-intl .redw-radio input[type="radio"]:focus-visible {
    outline: 2px solid var(--redw-red);
    outline-offset: 2px;
}
.acn-redw-intl .redw-radio input[type="radio"]:checked + span {
    font-weight: 600;
}

/* "Near me" toolbar button (the result notice itself is in 27b-6c) */
.acn-redw-intl .redw-near-me {
    background: var(--redw-bg);
    color: var(--redw-text); /* explicit — themes can set inherited color to white */
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
.acn-redw-intl .redw-near-me:hover,
.acn-redw-intl .redw-near-me:focus {
    background: var(--redw-bg-soft);
    color: var(--redw-text);
    border-color: var(--redw-red);
}

/* Filters */
.acn-redw-intl .redw-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.acn-redw-intl .redw-filters select,
.acn-redw-intl .redw-filters input[type="search"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    background: var(--redw-bg);
    font-size: 14px;
}

/* Stage */
.acn-redw-intl .redw-stage { position: relative; }
.acn-redw-intl .redw-map {
    width: 100%;
    height: 520px;
    border: 1px solid var(--redw-line);
    border-radius: 10px;
    overflow: hidden;
    /* Create an isolated stacking context so Leaflet's internal
       z-index values (panes at 200-700, controls at 1000) don't
       compete with the site's sticky header. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* Gesture hint overlay — fades in when the user scrolls over the map
   without holding Ctrl/Cmd. Dims the tiles slightly and shows a centered
   "Use Ctrl + scroll to zoom" toast. pointer-events:none lets the +/-
   zoom controls under the overlay remain clickable. */
.acn-redw-intl .redw-map-gesture-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    background: rgba(20, 20, 20, 0.55);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 1200;
    border-radius: inherit;
}
.acn-redw-intl .redw-map-gesture-hint.is-visible {
    opacity: 1;
}
.acn-redw-intl .redw-map-gesture-hint-msg {
    max-width: 480px;
}
.acn-redw-intl .redw-map-gesture-hint kbd {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 1px 8px;
    margin: 0 2px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    vertical-align: baseline;
}
/* Co-located reduced-motion rule for the gesture hint; the broad
   responsive @media blocks are consolidated in 27b-6f. */
@media (prefers-reduced-motion: reduce) {
    .acn-redw-intl .redw-map-gesture-hint { transition: none; }
}

/* ============================================================
   27b-6b — TABLE + GEO (empty state, region bubbles, featured)
   Mirrors the JS in 27b-3a/3b and the featured shortcode (item 38).
   ============================================================ */

/* Empty state (shown by EXT.renderTable when there are zero events) */
.acn-redw-intl .redw-empty {
    text-align: center;
    color: var(--redw-muted);
    padding: 24px;
}

/* Table */
.acn-redw-intl .redw-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--redw-line);
    border-radius: 10px;
}
.acn-redw-intl .redw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.acn-redw-intl .redw-table th,
.acn-redw-intl .redw-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--redw-line);
    vertical-align: top;
    /* Themes / page builders sometimes inherit word-break: break-all
       globally and break inside words. Force normal word wrapping inside
       the table so breaks happen only at spaces. */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
}
.acn-redw-intl .redw-table th {
    background: var(--redw-bg-soft);
    font-weight: 600;
    white-space: nowrap;
}
/* Short columns shouldn't wrap — date, time, and region codes are compact
   strings. Header order: 1=Parish, 2=Event, 3=Date, 4=Time, 5=City,
   6=Region, 7=Address, 8=Website. */
.acn-redw-intl .redw-table td:nth-child(3),
.acn-redw-intl .redw-table td:nth-child(4),
.acn-redw-intl .redw-table td:nth-child(6) {
    white-space: nowrap;
}
.acn-redw-intl .redw-table tr:last-child td { border-bottom: 0; }
.acn-redw-intl .redw-table a {
    color: var(--redw-red);
    text-decoration: none;
    font-weight: 500;
}
.acn-redw-intl .redw-table a:hover { text-decoration: underline; }

/* Region participant bubbles — overlaid on the Leaflet map for every
   region with at least one individual sign-up. Sized in JS based on the
   count. These selectors are intentionally UNSCOPED: Leaflet renders
   marker icons in its own map panes, so the CSS variable may not resolve
   — hence the explicit fallback on --redw-red. */
.leaflet-marker-icon.redw-province-bubble-wrap {
    background: transparent;
    border: 0;
}
.redw-province-bubble {
    background: var(--redw-red, #b30000);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    cursor: default;
    user-select: none;
}
.redw-province-bubble .redw-province-bubble-count {
    display: inline-block;
    line-height: inherit;
}

/* Featured event card — rendered by the portable [acn_redw_intl_featured]
   (item 38). Single card; if no event is flagged, the shortcode returns
   nothing. */
.acn-redw-intl.redw-featured { margin: 24px 0; }
.acn-redw-intl .redw-featured-card {
    position: relative;
    background: var(--redw-bg);
    border: 1px solid var(--redw-line);
    border-left: 6px solid var(--redw-red);
    border-radius: 10px;
    padding: 22px 24px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.acn-redw-intl .redw-featured-tag {
    display: inline-block;
    background: var(--redw-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.acn-redw-intl .redw-featured-title {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--redw-text);
    line-height: 1.25;
}
.acn-redw-intl .redw-featured-parish {
    margin: 0 0 12px 0;
    color: var(--redw-muted);
    font-size: 14px;
}
.acn-redw-intl .redw-featured-meta {
    list-style: none;
    margin: 0 0 14px 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.acn-redw-intl .redw-featured-meta li {
    font-size: 14px;
    color: var(--redw-text);
}
.acn-redw-intl .redw-featured-meta strong {
    display: inline-block;
    min-width: 70px;
    color: var(--redw-muted);
    font-weight: 600;
    margin-right: 4px;
}
.acn-redw-intl .redw-featured-cta {
    display: inline-block;
    background: var(--redw-red);
    color: #fff;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.15s ease;
}
.acn-redw-intl .redw-featured-cta:hover,
.acn-redw-intl .redw-featured-cta:focus {
    background: #8b0000;
    color: #fff;
}

/* Featured event — optional image slot. When the admin fills the Image URL
   field, the card switches to a split layout: image left, content right.
   With no image the card stays single column. Mobile always stacks
   (see 27b-6f). */
.acn-redw-intl .redw-featured-card--with-image {
    display: grid;
    grid-template-columns: minmax(220px, 38%) 1fr;
    gap: 22px;
    padding: 0; /* image goes edge-to-edge; body keeps its own padding */
    overflow: hidden;
}
.acn-redw-intl .redw-featured-image {
    margin: 0;
    align-self: stretch;
    background: #f0eae5;
    min-height: 220px;
}
.acn-redw-intl .redw-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.acn-redw-intl .redw-featured-card--with-image .redw-featured-body {
    padding: 22px 24px 20px;
}

/* ============================================================
   27b-6c — NEAR-ME + INVITE + BACK-TO-TOP
   Mirrors the JS in 27b-3c-1/2/3. The small co-located @media
   (max-width:720px) blocks stay with their section here; the broad
   responsive consolidation lives in 27b-6f.
   ============================================================ */

/* "Events near me" result notice — appears between toolbar and filters
   when the closest event is farther than the threshold, or when no events
   are registered close enough at all. Includes a CTA that opens the
   "Invite Your Parish" template panel. */
.acn-redw-intl .redw-near-result {
    background: var(--redw-red-soft);
    border: 1px solid #e6c8c8;
    border-left: 4px solid var(--redw-red);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 4px 0 12px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
/* Respect the [hidden] attribute even though display:flex above is more
   specific than the browser default. The notice should only appear after
   the user clicks "Events near me". */
.acn-redw-intl .redw-near-result[hidden] { display: none !important; }
.acn-redw-intl .redw-near-result-msg {
    margin: 0;
    flex: 1;
    color: var(--redw-text);
    line-height: 1.5;
    font-size: 14px;
}
.acn-redw-intl .redw-near-result-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.acn-redw-intl .redw-near-cta {
    background: var(--redw-red);
    color: #fff;
    border: 0;
    padding: 9px 14px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.2;
}
.acn-redw-intl .redw-near-cta:hover,
.acn-redw-intl .redw-near-cta:focus { background: #8b0000; color: #fff; }
.acn-redw-intl .redw-near-close {
    background: transparent;
    border: 0;
    color: var(--redw-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.acn-redw-intl .redw-near-close:hover,
.acn-redw-intl .redw-near-close:focus { color: var(--redw-red); }
@media (max-width: 720px) {
    .acn-redw-intl .redw-near-result { flex-direction: column; align-items: stretch; }
    .acn-redw-intl .redw-near-result-actions { width: 100%; justify-content: space-between; }
}

/* "Invite Your Parish" template panel — opens inline below the near-me
   notice. Shows the explanatory intro plus a copyable email template the
   visitor can send to their parish priest. Hidden until user action. */
.acn-redw-intl .redw-invite-template {
    background: #fff;
    border: 1px solid var(--redw-line);
    border-radius: 10px;
    padding: 22px 26px 24px;
    margin: 4px 0 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.acn-redw-intl .redw-invite-template[hidden] { display: none !important; }
.acn-redw-intl .redw-invite-template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.acn-redw-intl .redw-invite-template-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--redw-red);
    line-height: 1.25;
}
.acn-redw-intl .redw-invite-close {
    background: transparent;
    border: 0;
    color: var(--redw-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.acn-redw-intl .redw-invite-close:hover,
.acn-redw-intl .redw-invite-close:focus { color: var(--redw-red); }
.acn-redw-intl .redw-invite-template p {
    margin: 0 0 10px 0;
    line-height: 1.55;
    color: var(--redw-text);
    font-size: 14.5px;
}
.acn-redw-intl .redw-invite-to-copy {
    margin: 16px 0 8px !important;
    font-weight: 600;
    color: var(--redw-text);
}
.acn-redw-intl .redw-invite-letter-box {
    background: var(--redw-bg-soft);
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    padding: 14px 16px;
}
.acn-redw-intl .redw-invite-letter-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.acn-redw-intl .redw-invite-copy {
    background: var(--redw-red);
    color: #fff;
    border: 0;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
}
.acn-redw-intl .redw-invite-copy:hover,
.acn-redw-intl .redw-invite-copy:focus { background: #8b0000; color: #fff; }
.acn-redw-intl .redw-copy-status {
    font-size: 13px;
    color: var(--redw-muted);
    transition: color 0.15s ease;
}
.acn-redw-intl .redw-copy-status.is-success { color: #1f8a3a; font-weight: 600; }
.acn-redw-intl .redw-copy-status.is-error   { color: var(--redw-red);  font-weight: 600; }
.acn-redw-intl .redw-invite-letter {
    /* Preserve the line breaks written with \n in PHP. pre-wrap also keeps
       soft-wrapping at word boundaries when the column is narrow. */
    white-space: pre-wrap;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--redw-text);
    background: #fff;
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px solid var(--redw-line);
}
@media (max-width: 720px) {
    .acn-redw-intl .redw-invite-template { padding: 16px 18px 18px; }
    .acn-redw-intl .redw-invite-letter-actions {
        justify-content: space-between;
    }
}

/* "Invite Your Parish" CTA bridge — sits between the stage (map/table) and
   whatever follows. Always visible (unlike the near-me notice and the
   template panel, which only appear after a click). */
.acn-redw-intl .redw-invite-cta {
    margin-top: 18px;
    padding: 18px 22px;
    background: var(--redw-bg-soft);
    border: 1px solid var(--redw-line);
    border-left: 4px solid var(--redw-red);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.acn-redw-intl .redw-invite-cta-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--redw-text);
    line-height: 1.3;
}
.acn-redw-intl .redw-invite-cta-p {
    margin: 0;
    color: var(--redw-text);
    font-size: 14px;
    line-height: 1.55;
}
.acn-redw-intl .redw-invite-cta-button {
    background: var(--redw-red);
    color: #fff;
    border: 0;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    line-height: 1.2;
    margin-top: 2px;
}
.acn-redw-intl .redw-invite-cta-button:hover,
.acn-redw-intl .redw-invite-cta-button:focus { background: #8b0000; color: #fff; }
@media (max-width: 720px) {
    .acn-redw-intl .redw-invite-cta { padding: 14px 16px; }
    .acn-redw-intl .redw-invite-cta-button { width: 100%; text-align: center; }
}

/* Anchor scroll offset — when a host theme has a sticky header, in-widget
   anchor jumps (near-me CTA → invite panel, etc.) would otherwise land
   flush to the viewport top with the target hidden. Applied to the
   portable widget's own anchor targets only — the CA landing's page IDs
   (#redw-register/#redw-map) are intentionally NOT ported. */
.acn-redw-intl .redw-stage,
.acn-redw-intl .redw-invite-template,
.acn-redw-intl .redw-invite-cta {
    scroll-margin-top: 110px;
}

/* Back-to-top floating button. Fixed to the viewport regardless of where
   the .acn-redw-intl wrapper sits. Hidden by default (via [hidden]) and
   faded in via the `is-visible` class once the user scrolls past the JS
   threshold (~600px). */
.acn-redw-intl .redw-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--redw-red);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.acn-redw-intl .redw-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.acn-redw-intl .redw-back-to-top:hover,
.acn-redw-intl .redw-back-to-top:focus {
    background: #8b1b1b;
    outline: none;
}
.acn-redw-intl .redw-back-to-top:focus-visible {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25),
                0 0 0 3px rgba(179, 0, 0, 0.35);
}
.acn-redw-intl .redw-back-to-top svg {
    width: 22px;
    height: 22px;
}
@media (max-width: 720px) {
    .acn-redw-intl .redw-back-to-top {
        bottom: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   27b-6d — INDIVIDUAL FORM + "6 ways"
   The individual form is its OWN shortcode
   ([acn_redw_intl_individual_form]) and can render OUTSIDE the
   .acn-redw-intl map wrapper, so its styles are scoped under
   .redw-individual-form and carry their own copy of the campaign CSS
   variables to be self-contained. Mirrors the JS in 25b/27b-4. The CA
   register/Typebot accordion is intentionally NOT ported.
   ============================================================ */

.redw-individual-form {
    /* Self-contained campaign palette (standalone shortcode may sit outside
       the .acn-redw-intl container that normally defines these). */
    --redw-red: #b30000;
    --redw-text: #1f1f1f;
    --redw-muted: #6b6b6b;
    --redw-line: #e7e7e7;
    --redw-bg: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--redw-text);
    line-height: 1.5;
}
.redw-individual-form *,
.redw-individual-form *::before,
.redw-individual-form *::after { box-sizing: border-box; }

.redw-individual-form .redw-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}
.redw-individual-form label {
    display: block;
    font-size: 13px;
    color: var(--redw-muted);
}
.redw-individual-form label > span { display: block; margin-bottom: 4px; }
.redw-individual-form input[type="text"],
.redw-individual-form input[type="email"],
.redw-individual-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    font-size: 14px;
    background: var(--redw-bg);
    color: var(--redw-text);
}
.redw-individual-form .redw-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--redw-text);
    font-size: 13px;
}
.redw-individual-form .redw-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.redw-individual-form .redw-form-status {
    font-size: 13px;
    color: var(--redw-muted);
}
.redw-individual-form .redw-form-status.is-error { color: var(--redw-red); }
.redw-individual-form .redw-form-status.is-success { color: #1f8a3a; }

/* Submit button + hint (live in the v2 register block; folded in here as
   they belong to the form). */
.redw-individual-form .redw-cta {
    display: inline-block;
    background: var(--redw-red);
    color: #fff;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.redw-individual-form .redw-cta:hover { filter: brightness(0.95); }
.redw-individual-form .redw-hint {
    color: var(--redw-muted);
    font-size: 13px;
    margin-top: 8px;
}

/* "6 ways to participate" — hybrid link in the individual form + graphic
   shown on success. Scoped under the form (in v2 these were global). */
.redw-individual-form .redw-ways {
    margin-top: 16px;
    text-align: center;
}
/* Plain text "link" with a little caret (like an accordion header), not a button. */
.redw-individual-form .redw-ways-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 2px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--redw-red);
    text-decoration: none;
    cursor: pointer;
}
.redw-individual-form .redw-ways-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor; /* filled triangle, points down */
    transition: transform .15s;
}
.redw-individual-form .redw-ways-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.redw-individual-form .redw-ways-toggle,
.redw-individual-form .redw-ways-toggle:link,
.redw-individual-form .redw-ways-toggle:visited,
.redw-individual-form .redw-ways-toggle:hover,
.redw-individual-form .redw-ways-toggle:focus { text-decoration: none; }
.redw-individual-form .redw-ways-toggle:hover { color: #8f0000; }
.redw-individual-form .redw-ways-toggle:focus-visible {
    outline: 2px solid var(--redw-red);
    outline-offset: 2px;
    border-radius: 3px;
}
.redw-individual-form .redw-ways-figure {
    margin: 12px 0 0;
}
.redw-individual-form .redw-ways-figure[hidden] { display: none; }
.redw-individual-form .redw-ways-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
/* Form responsive (single column on narrow screens) */
@media (max-width: 720px) {
    .redw-individual-form .redw-row { grid-template-columns: 1fr; }
}

/* ============================================================
   27b-6e — PROFILE FRAME
   Verbatim port of redw-profile-frame.css (already scoped under .redw-pf
   and self-contained with its own --pf-* vars). Only change: the aggregate
   hashtag tag is "all" in the portable build (was "both" in v2). Folded
   into this shared stylesheet (handle acn-redw-intl) per the 27b-5 JS port.
   ============================================================ */

.redw-pf {
  --pf-red: #bb2525;
  --pf-red-dark: #9e1d1d;
  --pf-ink: #2b2b2b;
  --pf-muted: #6b6b6b;
  --pf-line: #e6e6e6;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-family: inherit;
  color: var(--pf-ink);
}

.redw-pf-title { font-size: 1.55rem; margin: 0 0 .35rem; line-height: 1.2; }
.redw-pf-sub { color: var(--pf-muted); margin: 0 auto 1.4rem; font-size: .95rem; line-height: 1.5; max-width: 30rem; }

.redw-pf-stage {
  position: relative;
  width: min(420px, 82vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: repeating-conic-gradient(#f4f4f4 0% 25%, #fafafa 0% 50%) 50% / 28px 28px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .10);
}
.redw-pf-stage.is-drag { cursor: grabbing; }
.redw-pf-stage canvas { width: 100%; height: 100%; display: block; }

.redw-pf-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  color: var(--pf-muted); font-size: .95rem; padding: 1.5rem; text-align: center;
  pointer-events: none;
}

.redw-pf-controls { display: flex; flex-direction: column; gap: .9rem; align-items: center; }

.redw-pf-seg {
  display: flex; flex-wrap: wrap; max-width: 400px;
  border: 1px solid var(--pf-line); border-radius: 9px; overflow: hidden;
}
.redw-pf-seg button {
  flex: 1 1 0; min-width: 0; border: 0; background: #fff; color: var(--pf-ink);
  font: inherit; font-weight: 600; padding: .55rem .7rem; cursor: pointer; transition: .15s;
  white-space: nowrap;
}
.redw-pf-seg button + button { border-left: 1px solid var(--pf-line); }
/* the "all languages" aggregate button sits full-width on its own row */
.redw-pf-seg button[data-pf-settag="all"] {
  flex-basis: 100%; border-left: 0; border-top: 1px solid var(--pf-line);
}
.redw-pf-seg button.is-active { background: var(--pf-red); color: #fff; }

/* On/off switch for the top solidarity line */
.redw-pf-switch {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: var(--pf-ink); cursor: pointer; user-select: none;
}
.redw-pf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.redw-pf-switch .redw-pf-track {
  flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px;
  background: #cfcfcf; position: relative; transition: .15s;
}
.redw-pf-switch .redw-pf-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: .15s;
}
.redw-pf-switch input:checked + .redw-pf-track { background: var(--pf-red); }
.redw-pf-switch input:checked + .redw-pf-track::after { transform: translateX(18px); }
.redw-pf-switch input:focus-visible + .redw-pf-track {
  outline: 2px solid rgba(187, 37, 37, .55); outline-offset: 2px;
}
/* "all hashtags" selected → the top line has no single language */
.redw-pf-topctl { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.redw-pf-switch.is-disabled { opacity: .5; cursor: not-allowed; }
.redw-pf-switch.is-disabled .redw-pf-track { cursor: not-allowed; }
.redw-pf-note {
  margin: 0; font-size: .8rem; line-height: 1.35; color: var(--pf-red); max-width: 28rem;
}
.redw-pf-note[hidden] { display: none; }

.redw-pf-zoom { display: flex; align-items: center; gap: .65rem; width: 100%; max-width: 420px; }
.redw-pf-zoom span { font-size: .85rem; color: var(--pf-muted); min-width: 2.6rem; text-align: left; }
.redw-pf-zoom input[type="range"] { flex: 1; accent-color: var(--pf-red); }

.redw-pf-buttons { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

.redw-pf-btn {
  font: inherit; font-weight: 600; border-radius: 9px; border: 1px solid var(--pf-line);
  background: #fff; color: var(--pf-ink); padding: .65rem 1.1rem; cursor: pointer; transition: .15s;
  display: inline-flex; align-items: center; margin: 0;
}
.redw-pf-btn:hover { border-color: #cfcfcf; }
.redw-pf-btn--primary { background: var(--pf-red); border-color: var(--pf-red); color: #fff; }
.redw-pf-btn--primary:hover { background: var(--pf-red-dark); border-color: var(--pf-red-dark); }
.redw-pf-btn:disabled { opacity: .45; cursor: not-allowed; }

.redw-pf-hint { font-size: .78rem; color: var(--pf-muted); margin: .2rem 0 0; }

/* ---- Modal mode (mode="modal") ---- */
.redw-pf-launch { text-align: center; margin: 1.25rem auto; }
/* Force brand red across ALL states — dark themes often repaint
   button:focus / :active black, which turned the CTA dark after a click.
   !important keeps our colour regardless of theme rules. */
.redw-pf-open,
.redw-pf-open:link,
.redw-pf-open:visited,
.redw-pf-open:focus,
.redw-pf-open:focus-visible {
  font: inherit; font-weight: 700; font-size: 1.05rem;
  background-color: #bb2525 !important; color: #fff !important;
  border: 0 !important; border-radius: 10px; padding: .95rem 1.9rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(187, 37, 37, .28); transition: .15s;
  text-decoration: none;
}
.redw-pf-open:hover,
.redw-pf-open:active {
  background-color: #9e1d1d !important; color: #fff !important;
  transform: translateY(-1px);
}
.redw-pf-open:focus-visible { outline: 3px solid rgba(187, 37, 37, .55); outline-offset: 3px; }

.redw-pf-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.redw-pf-modal[hidden] { display: none; }
.redw-pf-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.redw-pf-modal-card {
  position: relative; z-index: 1; background: #fff; border-radius: 16px;
  max-width: 720px; width: 100%; max-height: 92vh; overflow: auto;
  padding: 2.25rem 1.25rem 1.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.redw-pf-modal-close {
  position: absolute; top: .6rem; right: .7rem;
  width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%;
  background: #f1f1f1; color: #333; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.redw-pf-modal-close:hover { background: #e3e3e3; }

/* ============================================================
   27b-6f — RESPONSIVE + THEME OVERRIDES (cross-cutting, last)
   Broad responsive @media for the map widget + "panel on tinted host" and
   "table rounded corners" overrides, re-scoped to .acn-redw-intl. The CA
   hero buttons / Chico photo / register-Typebot accordion are excluded
   (Canadian Elementor landing, outside the portable shortcode); the form's
   own responsive rule lives with 27b-6d.
   ============================================================ */

/* Responsive — map widget */
@media (max-width: 720px) {
    .acn-redw-intl .redw-counters { grid-template-columns: 1fr 1fr; }
    .acn-redw-intl .redw-filters { grid-template-columns: 1fr; }
    .acn-redw-intl .redw-map { height: 380px; }
    .acn-redw-intl .redw-featured-card { padding: 18px 18px 16px; }
    .acn-redw-intl .redw-featured-title { font-size: 19px; }
    .acn-redw-intl .redw-featured-card--with-image {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .acn-redw-intl .redw-featured-image { min-height: 180px; }
    .acn-redw-intl .redw-featured-image img { aspect-ratio: 16 / 9; }
    .acn-redw-intl .redw-featured-card--with-image .redw-featured-body {
        padding: 18px 18px 16px;
    }
}

/* Panel definition on tinted host sections.
   When the shortcode sits inside a host section with a neutral background,
   the soft cream of the internal cards can read as identical to the host.
   These overrides push card backgrounds to pure white and strengthen
   shadows so each surface owns its footprint. The CA-only
   .redw-typebot-mount / .redw-register surfaces are intentionally omitted. */
.acn-redw-intl .redw-counter,
.acn-redw-intl .redw-invite-letter-box,
.acn-redw-intl .redw-invite-cta {
    background: #ffffff;
}
.acn-redw-intl .redw-featured-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
.acn-redw-intl .redw-invite-cta {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.acn-redw-intl .redw-counter {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.acn-redw-intl .redw-invite-letter-box {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Table — clean rounded corners and uniform row rendering.
   `border-collapse: separate` (spacing 0) prevents cell borders from
   bleeding into the wrap's rounded edge. `overflow-x: auto` is preserved
   for mobile; `overflow-y: hidden` keeps content inside the rounded frame. */
.acn-redw-intl .redw-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.acn-redw-intl .redw-table {
    border-collapse: separate;
    border-spacing: 0;
}
.acn-redw-intl .redw-table th {
    background: #f5efe9;
    border-bottom: 1px solid var(--redw-line);
}
.acn-redw-intl .redw-table td {
    border-bottom: 1px solid var(--redw-line);
}
.acn-redw-intl .redw-table tr:last-child td {
    border-bottom: 0;
}