/* Minification failed. Returning unminified contents.
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-divider'
(61,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(67,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(78,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(91,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(121,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(127,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(134,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(140,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(145,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(167,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(168,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-pill-green-bg'
(169,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(173,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-muted'
(174,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-pill-grey-bg'
(192,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-border'
(199,30): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(204,30): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(223,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(228,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(235,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-placeholder'
(244,32): run-time error CSS1039: Token not allowed after unary operator: '-sp-muted'
(254,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-border'
(272,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-card-selected-bg'
(285,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(290,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(294,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(317,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(323,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-border'
(324,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(330,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-placeholder'
(339,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(372,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-card-selected-bg'
(373,30): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(383,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(390,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(399,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-pill-grey-bg'
(451,30): run-time error CSS1039: Token not allowed after unary operator: '-sp-check-border'
(458,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(459,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(480,30): run-time error CSS1039: Token not allowed after unary operator: '-sp-check-border'
(487,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(498,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(504,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(512,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-border'
(515,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(532,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-placeholder'
(574,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(639,30): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(640,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(647,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(656,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-action-neutral'
(670,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(671,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(816,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(817,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(818,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(819,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(820,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(821,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(822,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(823,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(824,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(825,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(827,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(828,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(829,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(832,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(833,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(835,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(836,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(867,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(875,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(885,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(913,30): run-time error CSS1039: Token not allowed after unary operator: '-sp-step-idle'
(915,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-placeholder'
(923,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(924,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(931,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-placeholder'
(936,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(942,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-step-bar-idle'
(947,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(953,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-muted'
(958,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(975,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-field-label'
(987,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-border'
(988,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1001,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-placeholder'
(1008,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-border'
(1009,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1081,33): run-time error CSS1039: Token not allowed after unary operator: '-sp-pill-green-bg'
(1115,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1134,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1158,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-field-label'
(1286,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1310,30): run-time error CSS1039: Token not allowed after unary operator: '-sp-check-border'
(1317,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1318,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1329,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-control-bg'
(1330,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-check-border'
(1348,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1362,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-control-bg'
(1398,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-control-bg'
(1420,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1433,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1445,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-card-border'
(1458,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-accordion-head'
(1475,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1525,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(1530,51): run-time error CSS1030: Expected identifier, found ':'
(1530,59): run-time error CSS1031: Expected selector, found ')'
(1530,59): run-time error CSS1025: Expected comma or open brace, found ')'
(1545,30): run-time error CSS1039: Token not allowed after unary operator: '-sp-check-border'
(1552,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1553,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1566,51): run-time error CSS1030: Expected identifier, found ':'
(1566,60): run-time error CSS1031: Expected selector, found ')'
(1566,60): run-time error CSS1025: Expected comma or open brace, found ')'
(1592,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1598,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(1622,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-dropzone-bg'
(1623,31): run-time error CSS1039: Token not allowed after unary operator: '-sp-dropzone-border'
(1632,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(1647,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1648,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-card-selected-bg'
(1652,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1661,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-border'
(1680,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1693,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-control-bg'
(1739,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(1750,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1760,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-muted'
(1794,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-step-idle'
(1812,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-teal'
(1827,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1839,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-back-link'
(1847,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-back-link'
(1852,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(1874,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(1876,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(1884,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(1886,24): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(1925,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(1947,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(1955,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(1965,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(1991,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2002,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(2008,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(2015,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-action-neutral'
(2047,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-surface-subtle'
(2051,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-icon-muted'
(2087,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-control-bg'
(2094,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(2101,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(2136,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(2158,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(2194,17): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(2216,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2217,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(2230,22): run-time error CSS1039: Token not allowed after unary operator: '-sp-wizard-blue'
(2339,32): run-time error CSS1039: Token not allowed after unary operator: '-sp-card-border'
(2341,26): run-time error CSS1039: Token not allowed after unary operator: '-sp-card-bg'
(2351,21): run-time error CSS1039: Token not allowed after unary operator: '-sp-field-label'
(2384,21): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(2434,21): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(2458,21): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(2587,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(2588,21): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(2599,28): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
(2600,21): run-time error CSS1039: Token not allowed after unary operator: '-sp-heading'
(2676,21): run-time error CSS1039: Token not allowed after unary operator: '-sp-body'
 */
/*
 * StriderPay panel design system.
 * Shared by the custom announcement form (CustomOrganizer.cshtml) and the
 * standard announcement form (_OrganizerCreateEditAnnouncement.cshtml).
 * View-specific rules (page background, global radio scale) stay inline in each
 * view; only the shared sp-, striderpay- and fees- design system lives here.
 */

:root {
    --sp-page-bg: #eef1f5;
    --sp-card-border: #e6e9ef;
    --sp-divider: #eaedf2;
    --sp-heading: #094d78;
    --sp-body: #595468;
    --sp-teal: #30bea8;
    --sp-border: #dfe3ea;
    --sp-placeholder: #9aa1ad;
    --sp-pill-green-bg: #e7f8f4;
    --sp-pill-grey-bg: #eef1f6;
    --sp-muted: #7a8394;
    --sp-card-selected-bg: #f1fbf9;
    --sp-check-border: #c3cad6;
}

/* StriderPay panel (flat — no card chrome; padding only so content isn't flush to the edges) */
.striderpay-panel {
    padding: 20px 24px;
}

.striderpay-panel > .sp-header,
.striderpay-panel > .sp-payees,
.striderpay-panel > .sp-row,
.striderpay-panel > .striderpay-divider {
    margin-bottom: 26px;
}

.striderpay-panel > *:last-child {
    margin-bottom: 0;
}

.striderpay-divider {
    height: 1px;
    background: var(--sp-divider);
    border: none;
}

.sp-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-header-icon img {
    height: 48px;
    width: 48px;
}

.sp-header-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--sp-heading);
    margin: 0;
}

.sp-header-subtitle {
    font-size: 15px;
    color: var(--sp-body);
    margin: 3px 0 0;
}

.sp-link-row {
    display: flex;
    gap: 28px;
    margin: 14px 0 0 64px;
}

.sp-link {
    color: var(--sp-teal);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}

.sp-link-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--sp-teal);
    font-size: 12px;
    margin-right: 6px;
}

.sp-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.sp-label-col {
    flex: 0 0 236px;
    width: 236px;
}

.sp-field-col {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-heading);
}

.sp-heading-lg {
    font-size: 18px;
    font-weight: 600;
    color: var(--sp-heading);
    margin: 0 0 4px;
}

.sp-heading-md {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-heading);
    margin: 0;
}

.sp-helper {
    font-size: 13px;
    color: var(--sp-body);
    margin: 4px 0 0;
}

.sp-learn-more.fees-learn-more {
    color: var(--sp-teal);
    font-size: 13px;
    display: inline-block;
    margin: 2px 0;
}

.sp-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    /* Both frames draw the pill at 23px. The height is pinned with border-box
       so the required variant, which carries a 1px border, matches the
       borderless optional variant instead of coming out 2px taller. */
    line-height: 17px;
    height: 23px;
    box-sizing: border-box;
}

.sp-pill--required {
    color: var(--sp-teal);
    background: var(--sp-pill-green-bg);
    border: 1px solid var(--sp-teal);
}

.sp-pill--optional {
    color: var(--sp-muted);
    background: var(--sp-pill-grey-bg);
    font-weight: 500;
}

/* Payee dropdowns */
.sp-payees {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-payee-select {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 16px 10px 18px;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
}

.sp-payee-select--selected {
    border: 1.5px solid var(--sp-teal);
    box-shadow: 0 2px 8px 0 rgba(48, 191, 168, .18);
}

.sp-payee-select--open {
    border: 1.5px solid var(--sp-teal);
    box-shadow: 0 2px 8px 0 rgba(48, 191, 168, .18);
}

.has-error .sp-payee-select {
    border-color: #a94442;
}

.sp-payee-value {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-payee-business {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-heading);
}

.sp-payee-email {
    font-size: 13px;
    color: var(--sp-body);
    word-break: break-all;
}

.sp-payee-placeholder {
    flex: 1 1 auto;
    font-size: 15px;
    color: var(--sp-placeholder);
}

.sp-chevron {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--sp-muted);
}

.sp-payee-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #ffffff;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px 0 rgba(8, 31, 77, .15);
    max-height: 280px;
    overflow-y: auto;
}

.sp-payee-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    cursor: pointer;
}

.sp-payee-option:hover,
.sp-payee-option--selected {
    background: var(--sp-card-selected-bg);
}

.sp-payee-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-payee-option-business {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-heading);
}

.sp-payee-option-email {
    font-size: 13px;
    color: var(--sp-body);
}

.sp-payee-check {
    color: var(--sp-teal);
    font-weight: 600;
    flex: 0 0 auto;
}

/* Funds routing */
.sp-routes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-route-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-route-label {
    flex: 0 0 150px;
    width: 150px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-heading);
}

.sp-route-select.form-control {
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--sp-border);
    color: var(--sp-heading);
    font-weight: 500;
    font-size: 14px;
}

.sp-route-select.sp-route-select--placeholder {
    color: var(--sp-placeholder);
    font-weight: normal;
}

/* The muted placeholder applies to the collapsed control only. Options inherit `color`
   from the select, so the open list would render muted too - restore it on the options
   themselves, and on focus/active so the control reads normally while it is in use. */
.sp-route-select.sp-route-select--placeholder:focus,
.sp-route-select option {
    color: var(--sp-heading);
    font-weight: 500;
}

/* Processing / Handling cost cards */
.sp-cost-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-cost-card.fees-radio-option {
    display: flex;
    align-items: flex-start;
    border: 1px solid #e3e7ee;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 0;
    cursor: pointer;
}

.sp-cost-card input[type="radio"] {
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    transform: none;
    margin: 3px 0 0;
    width: 20px;
    height: 20px;
}

.sp-cost-card--selected {
    background: var(--sp-card-selected-bg);
    border: 1.5px solid var(--sp-teal);
}

.fees-radio-text {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.fees-radio-label {
    color: var(--sp-heading);
    font-size: 15px;
    font-weight: 600;
}

.fees-radio-description {
    font-size: 13px;
    color: var(--sp-body);
    line-height: 1.3;
    margin-top: 3px;
    font-weight: normal;
}

.fees-locked-wrapper {
    border-radius: 12px;
    cursor: pointer;
    background-color: var(--sp-pill-grey-bg);
    padding: 12px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
}

.fees-locked-content {
    flex: 1 0 auto;
}

.fees-locked-content .sp-cost-card {
    border-color: transparent;
}

.fees-strider-gold-icon {
    height: 24px;
}

/* Change / Refund policy */
.sp-policy-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sp-policy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    font-weight: normal;
    cursor: pointer;
    margin: 0;
}

.sp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    padding: 0;
}

.sp-check {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--sp-check-border);
    background: #ffffff;
    flex: 0 0 auto;
    position: relative;
}

.sp-check--checked {
    background: var(--sp-teal);
    border-color: var(--sp-teal);
}

.sp-check--checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Mutually-exclusive policy options render as radios (square .sp-check is for optional fee rows) */
.sp-radio {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--sp-check-border);
    background: #ffffff;
    flex: 0 0 auto;
    position: relative;
}

.sp-radio--checked {
    border-color: var(--sp-teal);
}

.sp-radio--checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sp-teal);
}

.sp-policy-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-heading);
}

.sp-days-input.form-control,
.sp-amount-input.form-control {
    display: inline-block !important;
    height: auto !important;
    border-radius: 8px;
    border: 1px solid var(--sp-border);
    padding: 6px 12px !important;
    font-size: 14px;
    color: var(--sp-heading);
}

.sp-days-input.form-control {
    width: 64px !important;
}

.sp-amount-input.form-control {
    width: 130px !important;
}

.sp-error-row {
    margin-top: 4px;
}

.sp-empty-state {
    font-size: 13px;
    color: var(--sp-placeholder);
    font-style: italic;
    margin: 0;
}


/* ============================================================
 * Wizard action buttons (Save / Cancel / Publish / Create Template)
 *
 * These are legacy StyleNew.css controls: 20-21px text, a bitmap icon pinned
 * by background-position, and `padding: 3px 20px 3px 40px !important`. The
 * Figma frames draw them as part of the same button family as everything else
 * in the wizard - radius 24, SemiBold label, a 17px outline icon 8px from the
 * text - so they are restyled here, scoped to the four steps so the standard
 * form and the rest of the site keep the legacy look.
 *
 * The icon is painted through a mask on ::before rather than baked into a
 * background image, so it inherits the label colour and follows the
 * desktop teal / mobile navy split without a second set of assets.
 * ============================================================ */
#dvACTIVITY .form-content button.Save,
#dvACTIVITY .form-content button.Cancel,
#dvACTIVITY .form-content button.publish,
#dvACTIVITY .form-content button.create_temp,
#FACILITY .form-content button.Save,
#FACILITY .form-content button.Cancel,
#FACILITY .form-content button.publish,
#FACILITY .form-content button.create_temp,
#ORGANISER .form-content button.Save,
#ORGANISER .form-content button.Cancel,
#ORGANISER .form-content button.publish,
#ORGANISER .form-content button.create_temp,
#PAYMENT .form-content button.Save,
#PAYMENT .form-content button.Cancel,
#PAYMENT .form-content button.publish,
#PAYMENT .form-content button.create_temp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px 0 20px !important;
    border-radius: var(--radius-sm, 8px);
    background-image: none;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    text-transform: none;
    vertical-align: middle;
    /* Legacy .Save/.Cancel/.publish carry margin-right 10-14px, which held them
       short of the content column. Cleared, and the 12px the Figma footer row
       uses is applied on the left instead: these float right, so a left margin
       spaces them from each other while the rightmost stays flush. */
    margin: 0 0 0 12px;
}

#dvACTIVITY .form-content button.Save::before,
#dvACTIVITY .form-content button.Cancel::before,
#dvACTIVITY .form-content button.publish::before,
#dvACTIVITY .form-content button.create_temp::before,
#FACILITY .form-content button.Save::before,
#FACILITY .form-content button.Cancel::before,
#FACILITY .form-content button.publish::before,
#FACILITY .form-content button.create_temp::before,
#ORGANISER .form-content button.Save::before,
#ORGANISER .form-content button.Cancel::before,
#ORGANISER .form-content button.publish::before,
#ORGANISER .form-content button.create_temp::before,
#PAYMENT .form-content button.Save::before,
#PAYMENT .form-content button.Cancel::before,
#PAYMENT .form-content button.publish::before,
#PAYMENT .form-content button.create_temp::before {
    content: "";
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    background-color: currentColor;
}

#dvACTIVITY .form-content button.Save::before,
#FACILITY .form-content button.Save::before,
#ORGANISER .form-content button.Save::before,
#PAYMENT .form-content button.Save::before { -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Crect x='2.4' y='2.4' width='12.2' height='12.2' rx='2.6' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5.6 8.6 7.5 10.5 11.4 6.4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px 17px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Crect x='2.4' y='2.4' width='12.2' height='12.2' rx='2.6' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5.6 8.6 7.5 10.5 11.4 6.4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px 17px no-repeat; }
#dvACTIVITY .form-content button.create_temp::before,
#FACILITY .form-content button.create_temp::before,
#ORGANISER .form-content button.create_temp::before,
#PAYMENT .form-content button.create_temp::before { -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Crect x='2.4' y='2.9' width='12.2' height='11.2' rx='2.2' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M2.4 6.7h12.2M6.9 6.7v7.4' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 17px 17px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Crect x='2.4' y='2.9' width='12.2' height='11.2' rx='2.2' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M2.4 6.7h12.2M6.9 6.7v7.4' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 17px 17px no-repeat; }
#dvACTIVITY .form-content button.publish::before,
#FACILITY .form-content button.publish::before,
#ORGANISER .form-content button.publish::before,
#PAYMENT .form-content button.publish::before { -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M8.5 5.1S7.2 3.4 4.6 3.4H2.3v9.1h2.7c2.2 0 3.5 1.1 3.5 1.1m0-8.5s1.3-1.7 3.9-1.7h2.3v9.1H12c-2.2 0-3.5 1.1-3.5 1.1m0-8.5v8.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px 17px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M8.5 5.1S7.2 3.4 4.6 3.4H2.3v9.1h2.7c2.2 0 3.5 1.1 3.5 1.1m0-8.5s1.3-1.7 3.9-1.7h2.3v9.1H12c-2.2 0-3.5 1.1-3.5 1.1m0-8.5v8.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px 17px no-repeat; }
#dvACTIVITY .form-content button.Cancel::before,
#FACILITY .form-content button.Cancel::before,
#ORGANISER .form-content button.Cancel::before,
#PAYMENT .form-content button.Cancel::before { -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M4.8 4.8 12.2 12.2M12.2 4.8 4.8 12.2' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 17px 17px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M4.8 4.8 12.2 12.2M12.2 4.8 4.8 12.2' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 17px 17px no-repeat; }

/* Desktop variants (206:2): outline buttons are teal. */
#dvACTIVITY .form-content button.Save,
#dvACTIVITY .form-content button.create_temp,
#FACILITY .form-content button.Save,
#FACILITY .form-content button.create_temp,
#ORGANISER .form-content button.Save,
#ORGANISER .form-content button.create_temp,
#PAYMENT .form-content button.Save,
#PAYMENT .form-content button.create_temp {
    background-color: #ffffff;
    border: 1.5px solid var(--sp-teal);
    color: var(--sp-teal);
}

#dvACTIVITY .form-content button.publish,
#FACILITY .form-content button.publish,
#ORGANISER .form-content button.publish,
#PAYMENT .form-content button.publish {
    background-color: var(--sp-wizard-blue);
    border: none;
    color: #ffffff;
}

#dvACTIVITY .form-content button.Cancel,
#FACILITY .form-content button.Cancel,
#ORGANISER .form-content button.Cancel,
#PAYMENT .form-content button.Cancel {
    background-color: var(--sp-action-neutral);
    border: none;
    color: #ffffff;
}

#dvACTIVITY .form-content button.Save:hover,
#dvACTIVITY .form-content button.create_temp:hover,
#FACILITY .form-content button.Save:hover,
#FACILITY .form-content button.create_temp:hover,
#ORGANISER .form-content button.Save:hover,
#ORGANISER .form-content button.create_temp:hover,
#PAYMENT .form-content button.Save:hover,
#PAYMENT .form-content button.create_temp:hover {
    background-color: #ffffff;
    border-color: var(--sp-teal);
    color: var(--sp-teal);
    opacity: .82;
}

#dvACTIVITY .form-content button.publish:hover,
#dvACTIVITY .form-content button.Cancel:hover,
#FACILITY .form-content button.publish:hover,
#FACILITY .form-content button.Cancel:hover,
#ORGANISER .form-content button.publish:hover,
#ORGANISER .form-content button.Cancel:hover,
#PAYMENT .form-content button.publish:hover,
#PAYMENT .form-content button.Cancel:hover {
    color: #ffffff;
    opacity: .92;
}


/* ============================================================
 * Action zone
 *
 * Next sits inside the panel and the Save / Cancel row outside it, with the
 * <hr> between them. Both groups are actions, so the line is balanced between
 * them and their right edges are lined up to read as one set.
 *
 * The panel already contributes its own 36px bottom padding above the line, so
 * the rule pulls back through it with a negative top margin rather than
 * doubling up: 36 - 12 above, 24 below.
 * ============================================================ */
#dvACTIVITY hr.Separator,
#FACILITY hr.Separator,
#ORGANISER hr.Separator,
#PAYMENT hr.Separator {
    /* Bootstrap floats .col-md-12 at >=992px and .form-content does not clear it,
       so the float escapes and squeezes the following rule to zero width. */
    clear: both;
    margin-bottom: 24px !important;
    margin-left: 44px;
    margin-right: 44px;
}

/* Steps 1-3 put the panel directly above the line, so its 36px bottom padding
   is pulled back through to leave 24. The Payment step has a button row there
   instead, with no padding to absorb, so it takes the 24 outright. */
#dvACTIVITY hr.Separator,
#FACILITY hr.Separator,
#ORGANISER hr.Separator {
    margin-top: -12px !important;
}

#PAYMENT hr.Separator {
    margin-top: 24px !important;
}

/* Right-align the out-of-panel row with the panel's content column, so Save
   finishes level with Next instead of 30px past it. The gutter lives on
   .form-content and the Bootstrap column inside it is zeroed, otherwise the
   column's own 15px stacks on top and the row lands 15px short. Descendant
   selectors because the Payment step nests its row one level deeper. */
#dvACTIVITY .form-group.form-content,
#FACILITY .form-group.form-content,
#ORGANISER .form-group.form-content,
#PAYMENT .form-group.form-content {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 44px;
    padding-right: 44px;
}

#dvACTIVITY .form-group.form-content > [class^="col-"],
#FACILITY .form-group.form-content > [class^="col-"],
#ORGANISER .form-group.form-content > [class^="col-"],
#PAYMENT .form-group.form-content > [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* The Payment footer is wrapped in an extra .row carrying Bootstrap's -15px,
   which pushed its buttons 20px past the panel's content column. The row is
   pinned to the step instead, and escapes on mobile exactly as the panel does. */
#PAYMENT > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Stack the fixed label column under the field on small screens (matches the prior Bootstrap col-md-* behaviour) */
@media (max-width: 991px) {
    .striderpay-panel {
        padding: 24px 18px;
    }

    .sp-row {
        flex-direction: column;
        gap: 8px;
    }

    .sp-label-col {
        flex-basis: auto;
        width: 100%;
    }

    /* Counterpart to the label column above. .sp-row stacks here but keeps
       align-items: flex-start, and in column direction that is the cross axis,
       so the field column shrank to its content (198-260px) instead of filling
       the 349px row - the payee and funds-routing selects ended up well short
       of the full width the mobile frames draw them at. */
    .sp-field-col {
        flex-basis: auto;
        width: 100%;
    }

    .sp-link-row {
        margin-left: 0;
        flex-direction: column;
        gap: 10px;
    }

    .sp-route-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .sp-route-label {
        flex-basis: auto;
        width: 100%;
    }

    .sp-route-select.form-control {
        width: 100%;
    }

    /* Policy rows wrap so "up to [n] days prior to activity" doesn't overflow */
    .sp-policy-row {
        flex-wrap: wrap;
    }
}

/* ============================================================
 * Phase 2 — shared primitives for the ACTIVITY / FACILITY / ORGANIZER
 * steps (PAYMENT already uses the sp-* system above). Adds a 4-step
 * wizard stepper + footer, section/field/grid primitives, repeaters,
 * an accordion skin, a dropzone/file list, and a toggle switch.
 * ============================================================ */

:root {
    --sp-wizard-blue: #0879b9;
    --sp-step-idle: #cfd6e0;
    --sp-step-bar-idle: #e2e7ee;
    --sp-field-label: #6b7280;
    --sp-back-link: #8a93a3;
    --sp-accordion-head: #f4f6f9;
    --sp-control-bg: #f1f4f8;
    --sp-card-bg: #fbfcfe;
    --sp-dropzone-bg: #f7fafc;
    --sp-dropzone-border: #c2ccd8;
    /* Design-system radius + action tokens (Foundations, Elements page) */
    --radius-sm: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    /* Buttons are rounded rectangles at --radius-sm, matching the wizard's
       Next control. --radius-pill is for chips and toggles only. */
    --radius-pill: 999px;
    --sp-action-neutral: #b9bdc4;
    /* Close chip - Figma surface/subtle + icon/muted */
    --sp-surface-subtle: #eef1f5;
    --sp-icon-muted: #6b7280;
}

/* Panel padding for the custom form's four wizard steps only — the standard
   announcement form shares .striderpay-panel and must keep its own padding.
   Figma: 1048px panel, 960px content => 44px inset; stepper starts 36px down. */
#dvACTIVITY > .striderpay-panel,
#FACILITY > .striderpay-panel,
#ORGANISER > .striderpay-panel,
#PAYMENT > .striderpay-panel {
    padding: 36px 44px;
}

/* Section wrapper — Activity/Facility/Organizer content sits in .striderpay-panel
   (same flat, no-card-chrome treatment as Payment) broken into .sp-section blocks.
   Figma spacing: 26px between panel-level blocks, 18px between rows in a section. */
.sp-section {
    margin-bottom: 26px;
}

.sp-section:last-child {
    margin-bottom: 0;
}

.sp-section__head {
    margin-bottom: 18px;
}

.sp-section__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--sp-heading);
    margin: 0 0 3px;
    line-height: normal;
}

.sp-section__sub {
    font-size: 13px;
    font-weight: 400;
    color: var(--sp-body);
    margin: 0;
    line-height: normal;
}

/* Figma sub-heads (Custom fees / Stabling & Stalls / Common documents / Links)
   render at 21px tall => 14px Poppins SemiBold, not 15px. */
.sp-section__subhead {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-heading);
    margin: 18px 0 10px;
    line-height: normal;
}

/* Stepper */
.sp-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: inherit;
}

.sp-step__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--sp-step-idle);
    background: #ffffff;
    color: var(--sp-placeholder);
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 auto;
}

.sp-step--done .sp-step__dot,
.sp-step--current .sp-step__dot {
    background: var(--sp-teal);
    border-color: var(--sp-teal);
    color: #ffffff;
}

.sp-step__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-placeholder);
}

.sp-step--done .sp-step__label,
.sp-step--current .sp-step__label {
    color: var(--sp-heading);
}

.sp-step__bar {
    width: 34px;
    height: 2px;
    background: var(--sp-step-bar-idle);
    flex: 0 0 auto;
}

.sp-step__bar--done {
    background: var(--sp-teal);
}

.sp-stepper__caption {
    display: none;
    font-size: 13px;
    color: var(--sp-muted);
    margin: 8px 0 0;
}

.sp-stepper__caption strong {
    color: var(--sp-heading);
    font-weight: 600;
}

/* Fields — Figma: label 13px Medium #6b7280, 7px gap, 48px input, 15px value text */
.sp-field {
    margin-bottom: 18px;
}

.sp-field:last-child {
    margin-bottom: 0;
}

.sp-field__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-field-label);
    margin-bottom: 7px;
    line-height: normal;
}

/* Prefixed with .striderpay-panel to out-specify the legacy
   `.form-container input[type="text"]` rule in StyleNew.css (0,2,1), which
   otherwise forces text inputs to 35px while selects sit at 48px. */
.striderpay-panel .sp-field .form-control,
.striderpay-panel .sp-repeater .form-control {
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--sp-border);
    color: var(--sp-heading);
    font-size: 15px;
    padding: 0 14px;
    box-shadow: none;
}

.striderpay-panel .sp-field select.form-control,
.striderpay-panel .sp-repeater select.form-control {
    padding: 0 10px 0 14px;
}

.striderpay-panel .sp-field .form-control::placeholder,
.striderpay-panel .sp-repeater .form-control::placeholder {
    color: var(--sp-placeholder);
}

.striderpay-panel .sp-textarea.form-control {
    height: 96px;
    min-height: 96px;
    border-radius: 10px;
    border: 1px solid var(--sp-border);
    color: var(--sp-heading);
    font-size: 15px;
    /* Figma leaves the value text on AUTO, which measures 23px for Poppins 15
       (the two-line sample is exactly 46). Without this the inherited 34px
       spread the lines far apart. */
    line-height: 23px;
    padding: 12px 14px;
    resize: vertical;
}

/* Facility's Trailer Directions is 110px in the design */
#FACILITY .striderpay-panel .sp-textarea.form-control {
    height: 110px;
    min-height: 110px;
}

.has-error .sp-field .form-control,
.has-error .sp-textarea.form-control {
    border-color: #a94442;
}

/* Grids (label-above-input fields laid out 1/2/3 up).
   Basis applies to every direct child, not just .sp-field — the Requested Documents
   checkbox grid and the Organizer upload columns are plain elements. */
.sp-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.sp-grid > * {
    flex: 1 1 0;
    min-width: 0;
}

.sp-grid > .sp-field {
    margin-bottom: 0;
}

.sp-grid--2 > * {
    flex-basis: calc(50% - 10px);
}

.sp-grid--3 > * {
    flex-basis: calc(33.333% - 14px);
}

.sp-field + .sp-grid,
.sp-grid + .sp-field,
.sp-grid + .sp-grid {
    margin-top: 20px;
}

/* Two-column option groups (Activity Details: Late Entries / USEF) */
/* Figma 2094:2: two 470px columns, 20px gutter. Nested blocks sit behind a teal
   rule at x=0 with their content indented 30px (aligning under the checkbox
   label), and every vertical gap in the group is 12px. */
.sp-optgroup {
    display: flex;
    gap: 20px;
    margin-top: 18px;
}

.sp-optgroup__col {
    flex: 1 1 0;
    min-width: 0;
}

.sp-optgroup__nested {
    margin: 12px 0 0 0;
    /* 2px rule + 28px padding = the design's 30px content indent */
    padding-left: 28px;
    border-left: 2px solid var(--sp-pill-green-bg);
}

.sp-optgroup__nested + .sp-optgroup__nested {
    margin-top: 12px;
}

.sp-optgroup__col > div + div:not(.sp-optgroup__nested) {
    margin-top: 12px;
}

.sp-optgroup__nested .sp-field__label {
    font-size: 13px;
}

/* Late fee row: Figma gives Fee type 306px and Amount 120px with a 14px gutter */
.sp-latefee-grid {
    display: grid;
    grid-template-columns: 306fr 120fr;
    gap: 14px;
    margin-top: 12px;
}

/* Figma 208:97: a 20px rounded box (teal fill + white tick when on) with a 10px
   gap to a 15px SemiBold label. The real <input> stays in the DOM for Knockout
   and is visually hidden; the adjacent .sp-check span is the painted control —
   the same pattern the PAYMENT step already uses. */
.sp-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Poppins Medium 14 in both the desktop (208:2) and mobile (227:2) frames. */
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-heading);
    margin: 0;
    cursor: pointer;
    line-height: normal;
}

.sp-checkbox-row .sp-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

/* Native checkboxes that remain (Requested Documents grid, mandatory fields)
   still get the teal accent so they read as the same control family. */
.sp-checkbox-row input[type="checkbox"]:not(.sp-visually-hidden) {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--sp-teal);
}

/* Repeater rows (Selections / Fees / Custom fields / Links / Documents).
   Rows are CSS grid so each repeater can carry the design's column proportions;
   fr units keep them exact at the 960px design width and proportional below it.
   Figma: 12px gutters, 44px row height, 30px reorder + 40px delete controls. */
.sp-repeater {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-repeater__head,
.sp-repeater__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: center;
}

.sp-repeater__head {
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-field-label);
    padding: 0;
    line-height: normal;
    align-items: end;
}

.sp-repeater__head > *,
.sp-repeater__row > * {
    min-width: 0;
}

/* Figma 208:155: 44px cell, 9px radius, 12px padding, 14px value text */
.striderpay-panel .sp-repeater .form-control {
    height: 44px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 14px;
}

.striderpay-panel .sp-repeater select.form-control {
    padding: 0 8px 0 12px;
}

/* Each grid cell wraps its control in a span so the mobile card can hang a
   label off it (a bare input or select cannot carry ::before). */
.sp-repeater__row > span > .form-control {
    width: 100%;
}

/* Legacy .Selection_ico caps width at calc(100% - 36px); the grid owns width here */
.striderpay-panel .sp-repeater .form-control.Selection_ico {
    width: 100%;
}

/* Legacy icon-input classes (.Start_Date/.Entries_Open/.Address/...) paint a
   bitmap glyph (which carries its own divider bar) at 12px 2px and force
   `padding-left:64px !important`. Figma uses clean 18px line icons at x=14 with
   text starting at 42px — swap in the exported Figma SVGs, panel-scoped. */
.striderpay-panel .sp-field .form-control.Start_Date,
.striderpay-panel .sp-field .form-control.End_Date,
.striderpay-panel .sp-field .form-control.Entries_closed,
.striderpay-panel .sp-field .form-control.Entries_Open,
.striderpay-panel .sp-field .form-control.Entries_Open_p,
.striderpay-panel .sp-field .form-control.Address {
    padding: 0 14px 0 42px !important;
    background-position: 14px center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

/* Date fields — Figma calendar icon (208:50). Also repaints #OpenCustomDate,
   whose legacy .Entries_Open class draws an envelope. */
.striderpay-panel .sp-field .form-control.Start_Date,
.striderpay-panel .sp-field .form-control.End_Date,
.striderpay-panel .sp-field .form-control.Entries_closed,
.striderpay-panel .sp-field #OpenCustomDate.Entries_Open {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.25 3H3.75C2.92157 3 2.25 3.67157 2.25 4.5V15C2.25 15.8284 2.92157 16.5 3.75 16.5H14.25C15.0784 16.5 15.75 15.8284 15.75 15V4.5C15.75 3.67157 15.0784 3 14.25 3Z' stroke='%238A93A3' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.5V4.5' stroke='%238A93A3' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 1.5V4.5' stroke='%238A93A3' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.25 7.5H15.75' stroke='%238A93A3' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Organizer email — Figma envelope (190:45). The legacy letter-box.png carries
   its own divider bar, which is why it read as "icon + pipe". */
.striderpay-panel .sp-field #Email.Entries_Open {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3H3C2.17157 3 1.5 3.67157 1.5 4.5V13.5C1.5 14.3284 2.17157 15 3 15H15C15.8284 15 16.5 14.3284 16.5 13.5V4.5C16.5 3.67157 15.8284 3 15 3Z' stroke='%238A93A3' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 5.25L9 9L1.5 5.25' stroke='%238A93A3' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Organizer phone — Figma handset (190:52), replacing the legacy phone.svg
   which was scaled to 35x30 and sat off-centre. */
.striderpay-panel .sp-field .form-control.Entries_Open_p {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 12.69V14.94C16.5008 15.1489 16.4581 15.3556 16.3744 15.547C16.2907 15.7384 16.168 15.9102 16.0141 16.0514C15.8601 16.1926 15.6784 16.3001 15.4806 16.367C15.2827 16.4339 15.073 16.4588 14.865 16.44C12.5571 16.1892 10.3402 15.4006 8.3925 14.1375C6.58037 12.986 5.044 11.4496 3.8925 9.6375C2.62498 7.6809 1.83618 5.45325 1.59 3.135C1.57126 2.9276 1.59591 2.71857 1.66238 2.52122C1.72884 2.32387 1.83568 2.14252 1.97607 1.98872C2.11647 1.83491 2.28735 1.71203 2.47784 1.62789C2.66833 1.54375 2.87426 1.5002 3.0825 1.5H5.3325C5.69648 1.49642 6.04934 1.62531 6.32532 1.86265C6.6013 2.09999 6.78156 2.42958 6.8325 2.79C6.93 3.51 7.1025 4.215 7.3575 4.8975C7.45841 5.16594 7.48025 5.45769 7.42043 5.73816C7.36061 6.01863 7.22165 6.27608 7.02 6.48L6.0675 7.4325C7.13517 9.31016 8.68984 10.8648 10.5675 11.9325L11.52 10.98C11.7239 10.7784 11.9814 10.6394 12.2618 10.5796C12.5423 10.5198 12.8341 10.5416 13.1025 10.6425C13.785 10.8975 14.49 11.07 15.21 11.1675C15.5743 11.2189 15.9071 11.4024 16.1449 11.6831C16.3827 11.9638 16.5091 12.3222 16.5 12.69Z' stroke='%238A93A3' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 18px 18px;
}

/* Facility address — Figma map pin (205:44), replacing location.png */
.striderpay-panel .sp-field .form-control.Address {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.75 7.5C15.75 12.75 9 17.25 9 17.25C9 17.25 2.25 12.75 2.25 7.5C2.25 5.70979 2.96116 3.9929 4.22703 2.72703C5.4929 1.46116 7.20979 0.75 9 0.75C10.7902 0.75 12.5071 1.46116 13.773 2.72703C15.0388 3.9929 15.75 5.70979 15.75 7.5Z' stroke='%238A93A3' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 9.75C10.2426 9.75 11.25 8.74264 11.25 7.5C11.25 6.25736 10.2426 5.25 9 5.25C7.75736 5.25 6.75 6.25736 6.75 7.5C6.75 8.74264 7.75736 9.75 9 9.75Z' stroke='%238A93A3' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Selects — Figma chevron (16px, right inset 14px), replacing the native arrow */
.striderpay-panel .sp-field select.form-control,
.striderpay-panel .sp-repeater select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5' stroke='%238A93A3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    padding-right: 38px;
}

.sp-repeater__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

/* Per-repeater column templates, taken from the Figma frames.
   Trailing 82px = 30px reorder + 12px gap + 40px delete. */
.sp-repeater--selections > .sp-repeater__head,
.sp-repeater--selections > .sp-repeater__row {
    grid-template-columns: 300fr 300fr 110fr 120fr 82px;
}

.sp-repeater--fees > .sp-repeater__head,
.sp-repeater--fees > .sp-repeater__row {
    grid-template-columns: 572fr 150fr 120fr 82px;
}

.sp-repeater--stabling > .sp-repeater__head,
.sp-repeater--stabling > .sp-repeater__row {
    grid-template-columns: 220fr 97fr 150fr 443fr;
}

.sp-repeater--customfields > .sp-repeater__head,
.sp-repeater--customfields > .sp-repeater__row {
    grid-template-columns: 654fr 200fr 82px;
}

/* Links / additional-documents repeaters: full-width input + delete */
.sp-repeater--single > .sp-repeater__row {
    grid-template-columns: 1fr 40px;
}

/* Stabling service name renders as text, not an input */
.sp-repeater--stabling .sp-repeater__row > span:first-child {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-heading);
}

/* Mandatory-fee cell is a bare checkbox in the design; its label is kept for
   screen readers via .sp-visually-hidden and the column header carries the text */
.sp-mandatory-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 6px;
}

/* Figma mobile Fees (228:80) draws this as a teal box with a white tick, the
   same treatment as the mandatory-fields list. It was a native control tinted
   with accent-color, which iOS Safari renders as a dark native tick instead --
   the black checkmark Tara reported on 2 Sep. */
.sp-mandatory-cell input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    border: 1.5px solid var(--sp-check-border);
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
}

.sp-mandatory-cell input[type="checkbox"]:checked {
    background-color: var(--sp-teal);
    border-color: var(--sp-teal);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6.3L5 8.6L9.5 3.6' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

/* Non-premium: the control is a decoy that raises the upsell, so it reads as
   locked rather than interactive and never paints a tick. */
.sp-mandatory-cell input.sp-check-locked,
.sp-mandatory-cell input.sp-check-locked:checked {
    background-color: var(--sp-control-bg);
    border-color: var(--sp-check-border);
    background-image: none;
    cursor: not-allowed;
}

/* "Total Entry # ..." aligns its input under the Inventory # column */
.sp-total-row {
    display: grid;
    grid-template-columns: 612fr 110fr 226fr;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}

.sp-total-row__label {
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-heading);
}

/* Figma 208:165/208:170: a 30x44 reorder stack (two 12px chevrons, 2px apart)
   and a 40x44 delete, both on #f1f4f8 with an 8px radius. */
.sp-repeater__reorder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 30px;
    height: 44px;
    flex: 0 0 auto;
    background: var(--sp-control-bg);
    border-radius: 8px;
    overflow: hidden;
}

.sp-repeater__reorder input[type="button"] {
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    width: 20px;
    height: 12px;
    padding: 0;
    font-size: 0;
    cursor: pointer;
}

.sp-reorder-up {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L6 4.5L9 7.5' stroke='%236B7280' stroke-width='1.425' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sp-reorder-down {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236B7280' stroke-width='1.425' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sp-repeater__reorder input[type="button"]:disabled {
    opacity: .35;
    cursor: default;
}

.sp-repeater__delete[type="button"] {
    width: 40px;
    height: 44px;
    border-radius: 8px;
    border: none;
    background-color: var(--sp-control-bg);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4H3.33333H14' stroke='%236B7280' stroke-width='1.13333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.6667 4V13.3333C12.6667 13.687 12.5262 14.0261 12.2761 14.2761C12.0261 14.5262 11.687 14.6667 11.3333 14.6667H4.66667C4.31304 14.6667 3.97391 14.5262 3.72386 14.2761C3.47381 14.0261 3.33333 13.687 3.33333 13.3333V4M5.33333 4V2.66667C5.33333 2.31304 5.47381 1.97391 5.72386 1.72386C5.97391 1.47381 6.31304 1.33333 6.66667 1.33333H9.33333C9.68696 1.33333 10.0261 1.47381 10.2761 1.72386C10.5262 1.97391 10.6667 2.31304 10.6667 2.66667V4' stroke='%236B7280' stroke-width='1.13333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66667 7.33333V11.3333' stroke='%236B7280' stroke-width='1.13333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.33333 7.33333V11.3333' stroke='%236B7280' stroke-width='1.13333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    font-size: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.sp-repeater__delete[type="button"]:hover {
    background-color: #e3e7ee;
}

/* Keeps the first row's cells aligned with the rows that do have a delete */
.sp-repeater__delete-spacer {
    width: 40px;
    height: 44px;
    flex: 0 0 auto;
}

.sp-repeater__add {
    color: var(--sp-teal);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    cursor: pointer;
    line-height: normal;
}

.sp-repeater__add:hover,
.sp-repeater__add:focus {
    color: var(--sp-teal);
    text-decoration: none;
}

/* Accordions (Mandatory Entry Fields). Restyles the existing required-fields__*
   markup — class names are kept as-is so toggleRequiredFieldsSection() in the
   view's Scripts section still works.
   SCOPED to #dvACTIVITY: the standard announcement form uses the same class
   names with its own inline <style>, and unscoped rules here would leak a
   second border and different label colours onto it. */
/* Figma 208:341 — card: white, 1px #e6e9ef, 12px radius, 14px between groups */
#dvACTIVITY .required-fields__section {
    border: 1px solid var(--sp-card-border);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}

#dvACTIVITY .required-fields__section:last-child {
    margin-bottom: 0;
}

/* Header: #f4f6f9 bar, 18px/16px side padding, 13px vertical, 14px SemiBold */
#dvACTIVITY .required-fields__section-header {
    padding: 13px 16px 13px 18px;
    background: var(--sp-accordion-head);
    border: none;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

#dvACTIVITY .required-fields__section-header:hover {
    background: #eef1f6;
}

#dvACTIVITY .required-fields__section-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-heading);
}

/* Chevron: 16px Figma glyph replacing the ▼ text character */
#dvACTIVITY .required-fields__section-toggle {
    width: 16px;
    height: 16px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10L8 6L12 10' stroke='%238A93A3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    transition: transform 0.3s ease;
}

/* Body: 18px sides, 16px top/bottom, two columns with 24px/11px gaps */
#dvACTIVITY .required-fields__section-content {
    padding: 16px 18px;
    border: none;
    display: none;
    flex-wrap: wrap;
    gap: 11px 24px;
}

/* !important is required: Bootstrap ships `.show { display: block !important }` */
#dvACTIVITY .required-fields__section-content.show {
    display: flex !important;
}

/* The chevron points up when open (Figma) and rotates to point down when closed */
#dvACTIVITY .required-fields__section-toggle.collapsed {
    transform: rotate(180deg);
}

#dvACTIVITY .required-fields__section-toggle.expanded {
    transform: rotate(0deg);
}

#dvACTIVITY .required-fields__list label {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 13px !important;
    line-height: normal !important;
    font-weight: 400;
    color: var(--sp-body);
    cursor: pointer;
}

/* Checked rows take the heading colour in the design */
#dvACTIVITY .required-fields__list label:has(input:checked) {
    color: var(--sp-heading);
}

/* 18px box, 5px radius, 1.5px #c3cad6 → teal + white tick when checked.
   Styled in place via appearance:none so the inputs keep their
   data-fieldname/data-fieldlabel attributes that serializeMandatoryFields() reads. */
#dvACTIVITY .required-fields__list input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0;
    border: 1.5px solid var(--sp-check-border);
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
}

#dvACTIVITY .required-fields__list input[type="checkbox"]:checked {
    background-color: var(--sp-teal);
    border-color: var(--sp-teal);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6.3L5 8.6L9.5 3.6' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

/* Mandatory fields render disabled-but-checked. The design draws them at full
   teal (no dimming), so only the cursor signals that they are locked. */
#dvACTIVITY .required-fields__list input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

#dvACTIVITY .required-fields__list label:has(input:disabled) {
    cursor: default;
}

/* Dropzone + file list (Organizer uploads) */
/* Uploads (Figma 197:32). Each column stacks its blocks 12px apart. */
.sp-upload-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

/* Heading: 18px glyph + 14px SemiBold title, then a 12px helper 3px below */
.sp-upload-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sp-upload-head__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-heading);
    line-height: normal;
}

.sp-upload-head__sub {
    font-size: 12px;
    color: var(--sp-body);
    line-height: normal;
}

.sp-upload-glyph {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

.sp-upload-glyph--doc {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.08 8.2875L9.1875 15.18C8.34312 16.0244 7.19789 16.4988 6.00375 16.4988C4.80961 16.4988 3.66438 16.0244 2.82 15.18C1.97562 14.3356 1.50125 13.1904 1.50125 11.9963C1.50125 10.8021 1.97562 9.65688 2.82 8.8125L9.7125 1.92C10.2754 1.35708 11.0389 1.04083 11.835 1.04083C12.6311 1.04083 13.3946 1.35708 13.9575 1.92C14.5204 2.48292 14.8367 3.24641 14.8367 4.0425C14.8367 4.83859 14.5204 5.60208 13.9575 6.165L7.0575 13.0575C6.77604 13.339 6.3943 13.4971 5.99625 13.4971C5.5982 13.4971 5.21646 13.339 4.935 13.0575C4.65354 12.776 4.49542 12.3943 4.49542 11.9963C4.49542 11.5982 4.65354 11.2165 4.935 10.935L11.3025 4.575' stroke='%23094D78' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sp-upload-glyph--img {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.25 14.25C17.25 14.6478 17.092 15.0294 16.8107 15.3107C16.5294 15.592 16.1478 15.75 15.75 15.75H2.25C1.85218 15.75 1.47064 15.592 1.18934 15.3107C0.908035 15.0294 0.75 14.6478 0.75 14.25V6C0.75 5.60218 0.908035 5.22064 1.18934 4.93934C1.47064 4.65804 1.85218 4.5 2.25 4.5H5.25L6.75 2.25H11.25L12.75 4.5H15.75C16.1478 4.5 16.5294 4.65804 16.8107 4.93934C17.092 5.22064 17.25 5.60218 17.25 6V14.25Z' stroke='%23094D78' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12.75C10.6569 12.75 12 11.4069 12 9.75C12 8.09315 10.6569 6.75 9 6.75C7.34315 6.75 6 8.09315 6 9.75C6 11.4069 7.34315 12.75 9 12.75Z' stroke='%23094D78' stroke-width='1.275' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Dropzone (Figma 197:40): #f7fafc fill, 1.5px dashed #c2ccd8, 12px radius,
   22px/16px padding, 24px upload glyph above 13px text, 8px apart. */
.sp-dropzone {
    background: var(--sp-dropzone-bg);
    border: 1.5px dashed var(--sp-dropzone-border);
    border-radius: 12px;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--sp-body);
    font-size: 13px;
    cursor: pointer;
}

.sp-dropzone__icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15' stroke='%2330BEA8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 8L12 3L7 8' stroke='%2330BEA8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 3V15' stroke='%2330BEA8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sp-dropzone--drag {
    border-color: var(--sp-teal);
    background: var(--sp-card-selected-bg);
}

.sp-dropzone__browse {
    color: var(--sp-teal);
    font-weight: 600;
}

/* File row (Figma 197:48) */
.sp-filelist__item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 8px 8px 8px 10px;
}

.sp-filelist__badge {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
}

.striderpay-panel .sp-filelist__title.form-control {
    border: none !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none;
    background: transparent;
    color: var(--sp-heading);
    font-size: 13px;
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
}

.sp-filelist__delete[type="button"] {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: none;
    border-radius: 6px;
    background-color: var(--sp-control-bg);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.75 3.5H2.91667H12.25' stroke='%236B7280' stroke-width='0.991667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.0833 3.5V11.6667C11.0833 11.9761 10.9604 12.2728 10.7416 12.4916C10.5228 12.7104 10.2261 12.8333 9.91667 12.8333H4.08333C3.77391 12.8333 3.47717 12.7104 3.25838 12.4916C3.03958 12.2728 2.91667 11.9761 2.91667 11.6667V3.5M4.66667 3.5V2.33333C4.66667 2.02391 4.78958 1.72717 5.00838 1.50838C5.22717 1.28958 5.52391 1.16667 5.83333 1.16667H8.16667C8.47609 1.16667 8.77283 1.28958 8.99162 1.50838C9.21042 1.72717 9.33333 2.02391 9.33333 2.33333V3.5' stroke='%236B7280' stroke-width='0.991667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.83333 6.41667V9.91667' stroke='%236B7280' stroke-width='0.991667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.16667 6.41667V9.91667' stroke='%236B7280' stroke-width='0.991667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    font-size: 0;
    cursor: pointer;
}

.sp-filelist__delete[type="button"]:hover {
    background-color: #e3e7ee;
}

/* Event photo (Figma 2088:2): 180x150 preview, 12px radius, caption left-aligned
   under it, 8px below; "Replace" is teal SemiBold 13px. */
.sp-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sp-photo__frame {
    display: block;
    width: 180px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
}

.sp-photo__preview {
    width: 180px;
    height: 150px;
    object-fit: cover;
    display: block;
}

.sp-photo__cap {
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-photo__name {
    font-size: 12px;
    color: var(--sp-body);
    word-break: break-all;
}

.sp-photo__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sp-photo__replace {
    color: var(--sp-teal);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.sp-photo__remove[type="button"] {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--sp-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.sp-photo__remove[type="button"]:hover {
    color: #a94442;
}

/* Toggle switch ("Require riders attach a file to submit an entry") */
.sp-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex: 0 0 auto;
}

.sp-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sp-toggle__slider {
    position: absolute;
    inset: 0;
    background: var(--sp-step-idle);
    border-radius: 22px;
    transition: background .15s ease;
}

.sp-toggle__slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform .15s ease;
}

.sp-toggle input:checked + .sp-toggle__slider {
    background: var(--sp-teal);
}

.sp-toggle input:checked + .sp-toggle__slider::before {
    transform: translateX(18px);
}

.sp-toggle input:disabled + .sp-toggle__slider {
    opacity: .5;
    cursor: not-allowed;
}

.sp-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-heading);
}

/* Footer (Back / blue Next) */
.sp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

.sp-btn-back {
    color: var(--sp-back-link);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.sp-btn-back:hover,
.sp-btn-back:focus {
    color: var(--sp-back-link);
    text-decoration: none;
}

.sp-btn-next {
    background: var(--sp-wizard-blue);
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    /* 21px line box: 11+21+11 = the 43px desktop button, 12+21+12 = 45px mobile */
    line-height: 21px;
    text-decoration: none;
    display: inline-block;
}

.sp-btn-next:hover {
    opacity: .92;
    color: #ffffff;
}

/* Blue Publish button (Payment step footer) — scoped to the custom form's
   PAYMENT step, which sits outside .striderpay-panel, so the shared .publish
   class used elsewhere in the app is untouched */
#PAYMENT button.publish {
    background-color: var(--sp-wizard-blue);
    background-image: none;
    border-color: var(--sp-wizard-blue);
    border-radius: 8px;
    padding: 11px 18px !important;
    font-size: 14px;
    line-height: normal;
}

#PAYMENT button.publish:hover {
    background-color: var(--sp-wizard-blue);
    background-image: none;
    border-color: var(--sp-wizard-blue);
    opacity: .92;
}

/* Payment's Back link sits alone in its footer row — keep it on the right,
   consistent with the Back/Next rows on the other three steps */
#PAYMENT .sp-footer {
    justify-content: flex-end;
}

/* Primary Payee carries two pills (Required + Default recipient); let them
   wrap under the label rather than breaking "Primary Payee" across lines */
.sp-label-row {
    flex-wrap: wrap;
}

.sp-label {
    white-space: nowrap;
}

/* ============================================================
 * Modals (.sp-modal) — implements the Modal component on the Figma
 * "Elements" page (04 · Composites & patterns, node 2268:357).
 *
 *   surface   = surface/panel, radius/xl 18, Elevation/Panel (0 10 30 #081F4D1A)
 *   padding   = space/6xl 26, space/2xl 16 between blocks
 *   title     = H3/Semi Bold 18 (26px line-height), text/heading
 *   body      = Body/Regular 14 (22px line-height), text/body
 *   actions   = right-aligned, space/sm 8 gap
 *   OK        = Button Type=Primary  Shape=Pill (action/primary #0879b9)
 *   Cancel    = Button Type=Neutral  Shape=Pill (action/neutral #b9bdc4,
 *               #333 label — white on this grey is 1.89:1 per the Button spec)
 *   geometry  = 42px tall, 12px side padding, Label/Semi Bold 12
 *   width     = 440 for confirm/alert; long-form dialogs keep their own width
 *
 * Applied via a .sp-modal class added on show.bs.modal from this view only.
 * ============================================================ */
.sp-modal .modal-content {
    border: none;
    border-radius: var(--radius-xl, 18px);
    box-shadow: 0 10px 30px rgba(8, 31, 77, .10);
    overflow: hidden;
}

/* Confirm / alert dialogs are 440 wide in the component. Long-form modals
   (legal agreement, share success) keep Bootstrap's width. */
.sp-modal.bootbox .modal-dialog {
    width: 440px;
    max-width: 100%;
}

.sp-modal .modal-header {
    padding: 26px 26px 0;
    border-bottom: none;
}

/* H3/Semi Bold 18 */
.sp-modal .modal-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--sp-heading);
}

/* 26px sides/top, space/2xl 16 before the action row. Body/Regular 14. */
.sp-modal .modal-body {
    padding: 26px 26px 16px;
    font-size: 14px;
    line-height: 22px;
    color: var(--sp-body);
}

.sp-modal .modal-header + .modal-body {
    padding-top: 12px;
}

.sp-modal .bootbox-body {
    font-size: 14px;
    line-height: 22px;
    color: var(--sp-body);
}

.sp-modal .modal-footer {
    padding: 0 26px 26px;
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Bootstrap 3 floats footer buttons and adds sibling margins; the flex row owns
   spacing here, so neutralise both. */
/* Dialog actions carry a minimum width. The Figma Button component is pure HUG
   with 12px padding, which leaves a short label like "OK" at 41x42 - a circle at
   pill radius, and a small target. 88px keeps any label a legible pill (~2.1:1)
   and makes a Cancel/OK pair equal width. Scoped to dialog footers, so the
   wizard Publish button keeps the hug width the step designs show. */
.sp-modal .modal-footer .btn,
.sp-modal .modal-footer .btn + .btn {
    float: none;
    margin: 0;
    height: 42px;
    min-width: 88px;
    padding: 0 12px;
    border-radius: var(--radius-sm, 8px);
    border: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-shadow: none;
    box-shadow: none;
}

/* Primary — confirm/OK */
.sp-modal .modal-footer .btn-primary {
    background: var(--sp-wizard-blue);
    color: #ffffff;
}

.sp-modal .modal-footer .btn-primary:hover,
.sp-modal .modal-footer .btn-primary:focus {
    background: var(--sp-wizard-blue);
    color: #ffffff;
    opacity: .92;
}

/* Neutral — cancel. Dark label is deliberate, per the Button spec. */
.sp-modal .modal-footer .btn-default {
    background: var(--sp-action-neutral);
    color: #333333;
}

.sp-modal .modal-footer .btn-default:hover,
.sp-modal .modal-footer .btn-default:focus {
    background: #adb2ba;
    color: #333333;
}

/* Close glyph — bootbox sets an inline margin-top, hence the !important */
/* Close control - Figma "Icon Button / Size=Small" (2188:2), the same instance
   the Modal and Upsell Dialog components both use: a 28x28 surface/subtle chip
   at radius 6 with a drawn cross in icon/muted, round caps.
   bootbox emits a text multiplication-sign glyph, so the glyph is collapsed to
   zero size and the cross is painted on ::before through a mask - masking rather
   than baking the colour into the data URI keeps the stroke tokenised and lets
   the hover state recolour it. */
.sp-modal .close,
.sp-modal .bootbox-close-button,
.sp-upsell .close,
.sp-upsell .bootbox-close-button {
    position: relative;
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 0;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-surface-subtle);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: var(--sp-icon-muted);
    opacity: 1;
    text-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

@supports ((-webkit-mask: none) or (mask: none)) {

    /* Masking is supported, so hide bootbox's glyph and draw the Figma cross. */
    .sp-modal .close,
    .sp-modal .bootbox-close-button,
    .sp-upsell .close,
    .sp-upsell .bootbox-close-button {
        font-size: 0;
        line-height: 0;
        color: transparent;
    }

    .sp-modal .close::before,
    .sp-modal .bootbox-close-button::before,
    .sp-upsell .close::before,
    .sp-upsell .bootbox-close-button::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--sp-icon-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5 7.5 7.5M7.5 2.5 2.5 7.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5 7.5 7.5M7.5 2.5 2.5 7.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
    }
}

.sp-modal .close:hover,
.sp-modal .bootbox-close-button:hover,
.sp-upsell .close:hover,
.sp-upsell .bootbox-close-button:hover {
    background: var(--sp-control-bg);
}

.sp-modal .close:hover,
.sp-modal .bootbox-close-button:hover,
.sp-upsell .close:hover,
.sp-upsell .bootbox-close-button:hover {
    color: var(--sp-heading);
}

.sp-modal .close:hover::before,
.sp-modal .bootbox-close-button:hover::before,
.sp-upsell .close:hover::before,
.sp-upsell .bootbox-close-button:hover::before {
    background-color: var(--sp-heading);
}

/* bootbox puts its close button inside .modal-body; float it clear of the text */
.sp-modal .modal-body > .bootbox-close-button {
    float: right;
    margin-left: 12px !important;
}

.sp-modal .modal-backdrop,
.modal-backdrop.sp-modal {
    background-color: #081f4d;
}

/* ============================================================
 * StriderGold upsell dialog (.sp-upsell) — implements the "Upsell Dialog"
 * component on the Figma Elements page (04 · Composites & patterns, 2273:331).
 * Raised by UpgradaccountPopup() in _LayoutNew.cshtml.
 *
 * Deliberately NOT dependent on .sp-modal: this dialog is app-wide, whereas
 * .sp-modal is added only on the custom announcement form. Both layouts render
 * the ~/Content/striderpay bundle, so these rules reach it everywhere.
 *
 * The brand mark is the real StriderGold.svg lockup, inline in the title and at
 * the head of the body — where production has always placed it. It is never set
 * on a gold chip: #fcbc5c is 1.7:1 on white and the wordmark's own "Gold" is that
 * same colour, so it would disappear against one.
 * ============================================================ */
.sp-upsell .modal-dialog {
    width: 440px;
    max-width: 100%;
}

.sp-upsell .modal-content {
    border: none;
    border-radius: var(--radius-xl, 18px);
    box-shadow: 0 10px 30px rgba(8, 31, 77, .10);
}

.sp-upsell .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 26px 26px 0;
    border-bottom: none;
}

/* bootbox emits the close button before the title, so both are ordered
   explicitly rather than relying on source order. */
.sp-upsell .modal-title {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--sp-heading);
}

/* The real StriderGold lockup (StriderGold.svg, 1500x300), set inline in the
   sentence exactly as the legacy dialog did — it reads as the brand name in
   running copy. It carries its own gold, so it is never placed on a gold chip:
   the wordmark's "Gold" is the same #fcbc5c and would disappear against one. */
.sp-upsell__logo {
    display: inline;
    height: 22px;
    width: auto;
    max-width: 100%;
    vertical-align: -3px;
}

.sp-upsell__logo--inline {
    height: 19px;
    vertical-align: -4px;
}

/* Ordered explicitly: bootbox emits the close button before the title. */
.sp-upsell .close,
.sp-upsell .bootbox-close-button {
    order: 2;
    flex: 0 0 auto;
}

.sp-upsell .modal-body {
    padding: 16px 26px;
}

.sp-upsell__lead,
.sp-upsell__detail {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--sp-body);
}

.sp-upsell__lead + .sp-upsell__detail {
    margin-top: 10px;
}

.sp-upsell .modal-footer {
    padding: 10px 26px 26px;
    border-top: none;
    text-align: right;
}

/* text-transform is reset explicitly: _Layout.cshtml pages uppercase buttons
   globally, _LayoutNew does not, and the label must read the same on both. */
.sp-upsell .modal-footer .btn {
    float: none;
    margin: 0;
    height: 42px;
    min-width: 88px;
    padding: 0 12px;
    border: none;
    border-radius: var(--radius-sm, 8px);
    background: var(--sp-wizard-blue);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
    box-shadow: none;
}

.sp-upsell .modal-footer .btn:hover,
.sp-upsell .modal-footer .btn:focus {
    background: var(--sp-wizard-blue);
    color: #ffffff;
    opacity: .92;
}

/* Mobile (390px design) — collapses grids to one column, switches the stepper
   to dots + caption, stacks option groups and repeater rows, and makes the
   footer full width. */
@media (max-width: 767px) {
    /* Legacy .form-container applies 0 55px padding, which squeezes the wizard
       panel to ~240px on a 390px screen. Neutralise it for the four steps. */
    /* StyleNew.css draws .form-container as its own bordered, shadowed card
       (1px #dde1ea + a 10px shadow). The panel is the full-bleed surface on
       mobile and overhangs that card by 15px a side, so the card's border ran
       down the page ~3px from the field edges. The panel owns the surface here,
       so the legacy card chrome is dropped rather than padded around. */
    #dvACTIVITY.form-container,
    #FACILITY.form-container,
    #ORGANISER.form-container,
    #PAYMENT.form-container {
        padding-left: 0;
        padding-right: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    /* The StriderPay warning banner is a Bootstrap .row holding a bare h2 and
       p, so its -15px margins ran it edge to edge while every other block sits
       on the 18px gutter. It is pulled out like the panel and given the same
       gutter. Scoped to the Activity step deliberately: the only other .row
       that is a direct child of a step is the Payment footer, whose blocks are
       handled above and which still needs Bootstrap's -15px to line up. */
    #dvACTIVITY > .row {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Reclaim horizontal space so the 4-dot stepper fits on one row */
    #dvACTIVITY > .striderpay-panel,
    #FACILITY > .striderpay-panel,
    #ORGANISER > .striderpay-panel,
    #PAYMENT > .striderpay-panel {
        padding: 24px 16px;
    }

    .sp-stepper {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .sp-step__bar {
        width: auto;
        flex: 1 1 auto;
        min-width: 12px;
    }

    .sp-step {
        flex: 0 0 auto;
    }

    .sp-grid {
        flex-direction: column;
        gap: 0;
    }

    .sp-grid > .sp-field {
        flex-basis: auto;
        margin-bottom: 20px;
    }

    .sp-grid > .sp-field:last-child {
        margin-bottom: 0;
    }

    .sp-optgroup {
        flex-direction: column;
        gap: 20px;
    }

    .sp-step__label {
        display: none;
    }

    .sp-stepper__caption {
        display: block;
    }

    /* --- Repeaters ------------------------------------------------------
       Rows are CSS grid, so the flex overrides that used to live here were
       inert and the desktop column template stayed in force -- at 390px the
       five selection columns crushed to ~68/68/25/27px, which is the sizing
       Tara reported on 2 Sep. Each row is re-laid as the card the Figma mobile
       frames specify (228:2 selections, 228:80 fees): a header carrying the
       item number and its controls, then one labelled field per line, with the
       numeric pair side by side. */
    .sp-repeater__head {
        display: none;
    }

    .sp-repeater--selections > .sp-repeater__row,
    .sp-repeater--fees > .sp-repeater__row,
    .sp-repeater--customfields > .sp-repeater__row {
        grid-template-columns: 1fr 1fr;
        gap: 11px 12px;
        align-items: start;
        padding: 13px 14px 14px;
        border: 1px solid var(--sp-card-border);
        border-radius: 12px;
        background: var(--sp-card-bg);
    }

    .sp-repeater__row > [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        color: var(--sp-field-label);
    }

    /* Card header: "Selection 2" on the left, reorder + delete on the right. The
       number is generated because the markup has no per-row heading to bind. */
    .sp-repeater--selections,
    .sp-repeater--fees,
    .sp-repeater--customfields {
        counter-reset: sp-item;
    }

    .sp-repeater--selections > .sp-repeater__row,
    .sp-repeater--fees > .sp-repeater__row,
    .sp-repeater--customfields > .sp-repeater__row {
        counter-increment: sp-item;
    }

    .sp-repeater--selections > .sp-repeater__row > .sp-repeater__controls,
    .sp-repeater--fees > .sp-repeater__row > .sp-repeater__controls,
    .sp-repeater--customfields > .sp-repeater__row > .sp-repeater__controls {
        grid-column: 1 / -1;
        grid-row: 1;
        gap: 6px;
        min-height: 32px;
    }

    .sp-repeater--selections > .sp-repeater__row > .sp-repeater__controls::before,
    .sp-repeater--fees > .sp-repeater__row > .sp-repeater__controls::before,
    .sp-repeater--customfields > .sp-repeater__row > .sp-repeater__controls::before {
        margin-right: auto;
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
        color: var(--sp-body);
    }

    .sp-repeater--selections > .sp-repeater__row > .sp-repeater__controls::before {
        content: "Selection " counter(sp-item);
    }

    .sp-repeater--fees > .sp-repeater__row > .sp-repeater__controls::before {
        content: "Fee " counter(sp-item);
    }

    .sp-repeater--customfields > .sp-repeater__row > .sp-repeater__controls::before {
        content: "Field " counter(sp-item);
    }

    .sp-repeater--selections > .sp-repeater__row > :nth-child(1),
    .sp-repeater--selections > .sp-repeater__row > :nth-child(2),
    .sp-repeater--fees > .sp-repeater__row > :nth-child(1),
    .sp-repeater--fees > .sp-repeater__row > :nth-child(2),
    .sp-repeater--fees > .sp-repeater__row > .sp-mandatory-cell,
    .sp-repeater--customfields > .sp-repeater__row > :nth-child(1),
    .sp-repeater--customfields > .sp-repeater__row > :nth-child(2) {
        grid-column: 1 / -1;
    }

    .sp-repeater--selections > .sp-repeater__row > :nth-child(1) { grid-row: 2; }
    .sp-repeater--selections > .sp-repeater__row > :nth-child(2) { grid-row: 3; }
    .sp-repeater--selections > .sp-repeater__row > :nth-child(3) { grid-column: 1; grid-row: 4; }
    .sp-repeater--selections > .sp-repeater__row > :nth-child(4) { grid-column: 2; grid-row: 4; }

    .sp-repeater--fees > .sp-repeater__row > :nth-child(1) { grid-row: 2; }
    .sp-repeater--fees > .sp-repeater__row > :nth-child(2) { grid-row: 3; }
    .sp-repeater--fees > .sp-repeater__row > .sp-mandatory-cell { grid-row: 4; }

    .sp-repeater--customfields > .sp-repeater__row > :nth-child(1) { grid-row: 2; }
    .sp-repeater--customfields > .sp-repeater__row > :nth-child(2) { grid-row: 3; }

    /* Stabling is not a card in the design: the service name becomes a heading
       with Available / Price paired beneath it. */
    .sp-repeater--stabling > .sp-repeater__row {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
        align-items: start;
    }

    .sp-repeater--stabling > .sp-repeater__row > :nth-child(1) {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 14px;
        font-weight: 500;
        color: var(--sp-heading);
    }

    .sp-repeater--stabling > .sp-repeater__row > :nth-child(2) { grid-column: 1; grid-row: 2; }
    .sp-repeater--stabling > .sp-repeater__row > :nth-child(3) { grid-column: 2; grid-row: 2; }

    /* "Make mandatory" reads as an inline checkbox row on mobile, so the label
       that is visually hidden beside the desktop column header comes back. */
    .sp-mandatory-cell {
        padding-left: 0;
        gap: 10px;
    }

    .sp-mandatory-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        clip: auto;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: var(--sp-heading);
        cursor: pointer;
    }

    .sp-total-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sp-total-row__label {
        text-align: left;
    }

    .sp-total-row > :last-child {
        display: none;
    }


    /* Action zone on mobile: the panel contributes 28px above the line, so the
       balance is 28 - 8 above and 20 below. The gutter comes from the column
       rule further down, so the side margins are reset here. */
    #dvACTIVITY hr.Separator,
    #FACILITY hr.Separator,
    #ORGANISER hr.Separator,
    #PAYMENT hr.Separator {
        margin-bottom: 20px !important;
        margin-left: 0;
        margin-right: 0;
    }

    #dvACTIVITY hr.Separator,
    #FACILITY hr.Separator,
    #ORGANISER hr.Separator {
        margin-top: -8px !important;
    }

    #PAYMENT hr.Separator {
        margin-top: 20px !important;
    }

    #dvACTIVITY .form-group.form-content,
    #FACILITY .form-group.form-content,
    #ORGANISER .form-group.form-content,
    #PAYMENT .form-group.form-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Steps 1-3 hold their button row directly, so it has to escape the
       container exactly as the panel does; the Payment row already did that
       above. Without it the row lands 16px in from the panel content column. */
    #dvACTIVITY > .form-group.form-content,
    #FACILITY > .form-group.form-content,
    #ORGANISER > .form-group.form-content {
        margin-left: -16px;
        margin-right: -16px;
    }

    /* Next goes full width to match the stacked Save / Cancel below it, with
       Back dropping underneath as a text link (as the Payment footer draws it). */
    .sp-footer {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
    }

    .sp-footer .sp-btn-next {
        order: 1;
        width: 100%;
        text-align: center;
    }

    .sp-footer .sp-btn-back {
        order: 2;
        margin-right: 0;
        text-align: left;
    }

    /* Figma Payment mobile footer (232:2-232:18): full-width stacked actions in
       Publish / Save / Create Template / Cancel order, which is not the source
       order, so each is placed explicitly. */
    .sp-actionbar {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .sp-actionbar > .pull-right {
        float: none !important;
        width: 100%;
        margin: 0;
    }


    /* Action buttons: the mobile frames draw them 47px tall with a 14px label,
       and the outline pair swaps desktop teal for a neutral border + navy
       label (232:7 / 232:12). */
    #dvACTIVITY .form-content button.Save,
    #dvACTIVITY .form-content button.Cancel,
    #dvACTIVITY .form-content button.publish,
    #dvACTIVITY .form-content button.create_temp,
    #FACILITY .form-content button.Save,
    #FACILITY .form-content button.Cancel,
    #FACILITY .form-content button.publish,
    #FACILITY .form-content button.create_temp,
    #ORGANISER .form-content button.Save,
    #ORGANISER .form-content button.Cancel,
    #ORGANISER .form-content button.publish,
    #ORGANISER .form-content button.create_temp,
    #PAYMENT .form-content button.Save,
    #PAYMENT .form-content button.Cancel,
    #PAYMENT .form-content button.publish,
    #PAYMENT .form-content button.create_temp {
        height: 47px;
        padding: 0 16px !important;
        font-size: 14px;
        /* the stack is a flex column with its own gap */
        margin: 0;
    }

    #dvACTIVITY .form-content button.Save,
    #dvACTIVITY .form-content button.create_temp,
    #FACILITY .form-content button.Save,
    #FACILITY .form-content button.create_temp,
    #ORGANISER .form-content button.Save,
    #ORGANISER .form-content button.create_temp,
    #PAYMENT .form-content button.Save,
    #PAYMENT .form-content button.create_temp {
        border-color: var(--sp-body);
        color: var(--sp-heading);
    }

    #dvACTIVITY .form-content button.Save:hover,
    #dvACTIVITY .form-content button.create_temp:hover,
    #FACILITY .form-content button.Save:hover,
    #FACILITY .form-content button.create_temp:hover,
    #ORGANISER .form-content button.Save:hover,
    #ORGANISER .form-content button.create_temp:hover,
    #PAYMENT .form-content button.Save:hover,
    #PAYMENT .form-content button.create_temp:hover {
        border-color: var(--sp-body);
        color: var(--sp-heading);
    }

    .sp-actionbar > button.publish { order: 1; }
    .sp-actionbar > button.Save { order: 2; }
    .sp-actionbar > button.create_temp { order: 3; }
    .sp-actionbar > button.Cancel { order: 4; }

    #PAYMENT > .row {
        margin-left: -16px;
        margin-right: -16px;
    }

    /* Steps 1-3 carry the same SAVE/CANCEL pair outside the panel. The mobile
       frames only draw the Next footer, so there is no design for these; they
       take the Payment step's stacked treatment so the buttons do not change
       presentation between step 3 and step 4 (Tara, 2 Sep). */
    #dvACTIVITY > .form-group.form-content > .col-md-12,
    #FACILITY > .form-group.form-content > .col-md-12,
    #ORGANISER > .form-group.form-content > .col-md-12 {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #dvACTIVITY > .form-group.form-content > .col-md-12 > .pull-right,
    #FACILITY > .form-group.form-content > .col-md-12 > .pull-right,
    #ORGANISER > .form-group.form-content > .col-md-12 > .pull-right {
        float: none !important;
        width: 100%;
        margin: 0;
    }

    #dvACTIVITY > .form-group.form-content > .col-md-12 > button.Save,
    #FACILITY > .form-group.form-content > .col-md-12 > button.Save,
    #ORGANISER > .form-group.form-content > .col-md-12 > button.Save { order: 1; }

    #dvACTIVITY > .form-group.form-content > .col-md-12 > button.Cancel,
    #FACILITY > .form-group.form-content > .col-md-12 > button.Cancel,
    #ORGANISER > .form-group.form-content > .col-md-12 > button.Cancel { order: 2; }

    /* --- Mobile pixel corrections against the Figma mobile frames -----------
       Values below differ from the desktop frames, so they are scoped here
       rather than changed globally. Reference: Activity 227:2 / Screen 227:4. */

    /* Screen 227:4 is full-bleed at 390 with 22/18/28/18 padding, so the panel
       is pulled out of the 16px inset that Bootstrap's .container + .col-md-12
       impose and applies the 18px itself.
       The negative margin goes on the PANEL, not on the step container: the
       step also holds the StriderPay warning banner, whose nested .row carries
       Bootstrap's own -15px margins, and widening the container let those
       compound and push the banner past both screen edges. */
    #dvACTIVITY > .striderpay-panel,
    #FACILITY > .striderpay-panel,
    #ORGANISER > .striderpay-panel,
    #PAYMENT > .striderpay-panel {
        margin-left: -16px;
        margin-right: -16px;
        padding: 22px 18px 28px;
    }

    /* dots frame 227:6: 26px circles, 6px gap (desktop is 28px / 12px) */
    .sp-stepper {
        gap: 6px;
    }

    .sp-step__dot {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    /* stcap 227:18: "Activity" stays 13 SemiBold #094d78, the rest drops to
       12 Regular #595468 (desktop caption is a single 13px muted line). */
    .sp-stepper__caption {
        font-size: 12px;
        color: var(--sp-body);
    }

    .sp-stepper__caption strong {
        font-size: 13px;
    }

    /* field group 227:26: 6px label gap on mobile, 7px on desktop */
    .sp-field__label {
        margin-bottom: 6px;
    }

    /* Next Button / Blue is 94x45 with 12/26 padding on mobile; the desktop
       frame draws it 86x43 with 11/18. */
    .sp-btn-next {
        padding: 12px 26px;
    }

    /* Textareas are shorter on mobile: 84px here against the desktop 96px,
       and Facility's Trailer Directions 90px against 110px. */
    .striderpay-panel .sp-textarea.form-control {
        height: 84px;
        min-height: 84px;
    }

    #FACILITY .striderpay-panel .sp-textarea.form-control {
        height: 90px;
        min-height: 90px;
    }

    /* Payment policy options (Opt rows in 219:49 / 219:74) sit 8px apart on
       mobile; the desktop frame uses 10px. */
    .sp-policy-row {
        gap: 8px;
    }

    /* --- Payment step, mobile-specific values ---------------------------
       Measured against Payees 218:2, Funds Routing 219:2 and the processing
       cost options 219:35. Desktop keeps its own larger values. */
    .sp-helper {
        font-size: 12px;
    }

    .sp-cost-card.fees-radio-option {
        padding: 14px 16px;
    }

    .sp-route-label {
        font-size: 13px;
        font-weight: 500;
    }

    /* Only the primary payee keeps the taller 60px row; the rest are 52px. */
    .sp-payee-select {
        min-height: 52px;
    }

    .sp-payee-select--selected {
        min-height: 60px;
    }

    /* StyleNew.css sets `.modal button { width: 18rem !important }` below 500px
       (18rem = 180px against the legacy 10px root font). That stretched the
       close chip and the action buttons to 180px each, which in turn squeezed
       the message into a narrow column. !important is required to answer it. */
    .sp-modal .close,
    .sp-modal .bootbox-close-button,
    .sp-upsell .close,
    .sp-upsell .bootbox-close-button {
        width: 28px !important;
    }

    /* min-width owns the button size (88px), so width must simply get out of
       the way rather than be pinned. */
    .sp-modal .modal-footer .btn,
    .sp-modal .modal-footer .btn + .btn,
    .sp-upsell .modal-footer .btn {
        width: auto !important;
    }

    /* The button rows that sit outside the panel (SAVE/CANCEL on steps 1-3, and
       the Back footer + action bar on step 4) are Bootstrap blocks. Both .row
       and .form-content carry -15px side margins; on the Payment step they nest
       and compound, pushing those blocks ~14px past both screen edges, which is
       real horizontal scroll on a phone. Steps 1-3 have no intervening .row, so
       only the nested case is unwound. */
    #PAYMENT .row > .form-group.form-content {
        margin-left: 0;
        margin-right: 0;
    }


    .required-fields__list label {
        width: 100% !important;
    }
}