/* ==========================================================================
   THEME: Split story card, left form
   File:        /_themes/_v2/split_story_card_tab_logo_left_form/theme.css
   Load order:  AFTER webforms.core.css, BEFORE page.css
   Purpose:     The look of the donation form: legends, selectable "card"
                buttons, amount field, primary buttons.
   Depends on:  webforms.core.css, which already provides the base flex layout
                for .ce-formRows / .ce-formFieldContainers /
                .ce-formFieldWrappers, so only differences are set here.
   Variables (defined inline on :root by CharityEngine):
       --app-theme-font
       --app-theme-button-color
       --app-theme-button-font-color

   CONTENTS
     1. Base
     2. Form structure (sections, legends, rows)
     3. Selectable cards (shared look / hide native input / selected + hover)
     4. Gift amount section
          4.1 Preset amount grid
          4.2 Amount field with currency symbol inside
          4.3 Currency selector
          4.4 "Cover processing fee" row
     5. Frequency toggle
     6. Payment type & tribute toggles
     7. Buttons (primary, one-click / login)
     8. Address entry
     9. Misc
    10. States (errors)
   ========================================================================== */


/* ==========================================================================
   1. BASE
   ========================================================================== */

body {
    font-family: var(--app-theme-font);
}


/* ==========================================================================
   2. FORM STRUCTURE
   ========================================================================== */

.ce-forms fieldset:first-of-type {
    margin-top: 20px;
}

.ce-formSections,
#formLoginModal .ce-formLoginContainer {
    border: 0;
}

    /* Section titles */
    .ce-formSections legend {
        margin-top: 12px;
        margin-bottom: 8px;
        padding: 0;
        color: black;
        font-size: 24px;
        font-weight: 600;
        text-align: left;
    }

/* Rows */
.ce-formRows {
    gap: 12px;
    margin-bottom: 12px;
}

/* Fields fill the available width */
.ce-formFieldContainers,
.ce-formLoginRow {
    width: 100%;
}

/* Footer button group */
.ceFormFooterButtonContainers {
    text-align: center;
}


/* ==========================================================================
   3. SELECTABLE CARDS
   Shared by: preset amount buttons, frequency toggle, payment-type toggle,
   tribute-announcement toggle.
   Order matters in this section: base look -> component variants (later
   sections) -> selected/hover state.
   ========================================================================== */

/* 3.1 Base look */
#tributeRecipientToggleRow .ce-radioButtonLists label,
#amountAskStringsContainer .ce-radioButtonLists label,
.ce-radioButtonLists.isPaymentType_id label,
.ce-radioButtonLists.ce-recurringFrequency label {
    display: block;
    padding: 14px 16px;
    border: none;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--app-theme-button-color) 40%, transparent);
    color: black;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

/* 3.2 Hide the native radio inputs (the label is the visible button) */
#tributeRecipientToggleRow .ce-radioButtonLists input,
#amountAskStringsContainer .ce-radioButtonLists input,
.ce-radioButtonLists.isPaymentType_id input,
.ce-radioButtonLists.ce-recurringFrequency input {
    display: none;
}

    /* 3.3 Selected / hover state */
    #tributeRecipientToggleRow .ce-radioButtonLists input[type="radio"]:checked + label,
    #tributeRecipientToggleRow .ce-radioButtonLists input[type="radio"]:hover + label,
    #amountAskStringsContainer .ce-radioButtonLists input[type="radio"]:checked + label,
    #amountAskStringsContainer .ce-radioButtonLists input[type="radio"]:hover + label,
    .ce-radioButtonLists.isPaymentType_id input[type="radio"]:checked + label,
    .ce-radioButtonLists.isPaymentType_id input[type="radio"]:hover + label,
    .ce-radioButtonLists.ce-recurringFrequency input[type="radio"]:checked + label,
    .ce-radioButtonLists.ce-recurringFrequency input[type="radio"]:hover + label {
        background-color: var(--app-theme-button-color) !important;
        color: var(--app-theme-button-font-color) !important;
    }


/* ==========================================================================
   4. GIFT AMOUNT SECTION
   ========================================================================== */

/* 4.1 Preset amount grid (4 per row; 2 per row when the form is narrow) */

/* Size container: lets the buttons scale to the width of the form itself
   (cqi units), which changes with the layout and screen size */
.ce-amountAskStringButtonContainers {
    width: 100%;
    container-type: inline-size;
}

#amountAskStringsContainer .ce-radioButtonLists {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
}

    #amountAskStringsContainer .ce-radioButtonLists > span {
        flex: 0 0 calc(25% - 16px);
    }

    /* Amount text and side padding scale down as the form gets narrower */
    #amountAskStringsContainer .ce-radioButtonLists label {
        padding-inline: clamp(4px, 2.5cqi, 16px);
        font-size: 1.75rem; /* fallback */
        font-size: clamp(1.25rem, 6cqi, 1.75rem);
    }

/* Narrow form: four buttons per row get too small, so use two per row */
@container (max-width: 420px) {
    #amountAskStringsContainer .ce-radioButtonLists > span {
        flex-basis: calc(50% - 8px);
    }
}

/* 4.2 Amount field
   The currency symbol (.ce-formFieldCurrencyPrefixes) sits INSIDE the box,
   just left of the value, in the same font, and the pair is centered in the
   box. The wrapper draws the box; the symbol and the input sit side by side
   inside it, and the input has no box of its own. Selected/hover/focus/error
   styling is therefore applied to the wrapper. */
.ce-formFieldWrappers:has(> .ce-formFieldCurrencyPrefixes) {
    justify-content: center;
    gap: 0;
    margin: 0 8px;
    padding: 0 12px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--app-theme-button-color) 40%, transparent);
    color: black;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    cursor: text; /* clicking anywhere in the box focuses the input (see app_layout.html script) */
}

.ce-formFieldCurrencyPrefixes {
    flex: none;
}

/* The input has no box of its own. Fallback layout (browsers without
   field-sizing): the input fills the box and the pair is left-aligned. */
#formContainer .ce-formFieldWrappers:has(> .ce-formFieldCurrencyPrefixes) > input[type="text"].ce-amounts {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 14px 4px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    outline: none;
}

/* Centered layout: the input shrinks to fit its value (or its placeholder
   when empty), so the symbol stays right next to the value and the pair is
   centered by the wrapper. (width: auto is needed because core sets
   width: 100% on text inputs.) */
@supports (field-sizing: content) {
    #formContainer .ce-formFieldWrappers:has(> .ce-formFieldCurrencyPrefixes) > input[type="text"].ce-amounts {
        flex: 0 1 auto;
        field-sizing: content;
        width: auto;
        min-width: 1ch;
    }
}

/* Hover (wrapper when it has a symbol, otherwise the input itself) */
.ce-formFieldWrappers:has(> .ce-formFieldCurrencyPrefixes):hover,
.ce-forms input[type="text"].ce-amounts:hover {
    background-color: var(--app-theme-button-color) !important;
    color: var(--app-theme-button-font-color) !important;
}

/* Keyboard / click focus ring on the whole box */
.ce-formFieldWrappers:has(> .ce-formFieldCurrencyPrefixes):focus-within {
    outline: 2px solid var(--app-theme-button-color);
    outline-offset: 2px;
}

/* Validation error: the input has no border, so mark the wrapper */
.ce-formFieldWrappers:has(> .ce-formFieldCurrencyPrefixes):has(> input.error) {
    box-shadow: inset 0 0 0 2px #e84c3d;
    color: #e84c3d;
}

/* Fallback: an amount field with no currency symbol is its own box */
#formContainer input[type="text"].ce-amounts {
    height: unset;
    margin: 0 8px;
    padding: 14px 16px;
    border: none;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--app-theme-button-color) 40%, transparent);
    color: black;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
}

/* 4.3 Currency selector */
.ce-dropDownLists.ce-currencies {
    margin: 12px 8px 0 0;
}

/* 4.4 "Cover processing fee" row */
.ce-formSections:has(.ce-amounts):has(> #coverFeesDisplayRow) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
}

.ce-formSections:has(.ce-amounts):has(> #coverFeesDisplayRow) > .ce-formRows {
    flex: 1 1 100%;
}

.ce-formSections:has(.ce-amounts):has(> #coverFeesDisplayRow) > .ce-formRows:has(.ce-amounts) {
    display: contents;
}

.ce-formSections:has(.ce-amounts):has(> #coverFeesDisplayRow) > .ce-formRows:has(.ce-amounts) > .ce-formFieldContainers {
    margin-bottom: 12px;
}

.ce-formSections:has(.ce-amounts):has(> #coverFeesDisplayRow) > #coverFeesDisplayRow {
    flex: 0 1 auto;
    margin-bottom: 24px;
}


/* ==========================================================================
   5. FREQUENCY TOGGLE (One-Time / Monthly / ...): always one row, joined
   segmented control.
   Works for any number of options (2, 3, 4, ...). It never wraps, so the
   first and last options are always the rounded ends. Options share the row
   and scale with the form width; a long label wraps inside its own button on
   very narrow screens.
   ========================================================================== */

.ce-formRows:has(.ce-recurringFrequency) {
    margin-bottom: 30px;
}

/* The "Gift Amount" section title is larger when it holds the frequency toggle */
.ce-formSections:has(.ce-recurringFrequency) .ce-formSectionLegends {
    margin-bottom: 50px;
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    text-align: center;
}

/* Size container: lets the buttons scale to the width of the form itself */
.ce-formFieldWrappers:has(> .ce-recurringFrequency) {
    container-type: inline-size;
}

.ce-radioButtonLists.ce-recurringFrequency {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
    width: 100%;
}

    /* Each option shares the row; min-width: 0 lets it shrink below its text width */
    .ce-radioButtonLists.ce-recurringFrequency > div {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
    }

    .ce-radioButtonLists.ce-recurringFrequency label {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        padding: 12px clamp(4px, 2.2cqi, 20px);
        border-radius: 0;
        font-size: 16px; /* fallback */
        font-size: clamp(12px, 3.6cqi, 16px);
        font-weight: bold;
        line-height: 1.3;
    }

    /* Round only the outer ends of the control */
    .ce-radioButtonLists.ce-recurringFrequency div:first-child input[type="radio"] + label {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .ce-radioButtonLists.ce-recurringFrequency div:last-child input[type="radio"] + label {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }


/* ==========================================================================
   6. PAYMENT TYPE & TRIBUTE ANNOUNCEMENT TOGGLES
   ========================================================================== */

#tributeRecipientToggleRow .ce-radioButtonLists,
.ce-radioButtonLists.isPaymentType_id {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

    #tributeRecipientToggleRow .ce-radioButtonLists > span,
    .ce-radioButtonLists.isPaymentType_id > div {
        display: block;
        flex: 1 1 auto;
    }

    #tributeRecipientToggleRow .ce-radioButtonLists label,
    .ce-radioButtonLists.isPaymentType_id label {
        justify-content: center;
        gap: 10px !important;
        padding: 15px 20px;
        font-size: 14px;
    }

    /* Payment type buttons are outlined (white) until selected */
    .ce-radioButtonLists.isPaymentType_id label {
        border: 1px solid var(--app-theme-button-color);
        background-color: white;
    }


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

/* 7.1 Primary buttons (Next / Give / Start Over): pill shaped.
   The border color is the text color (border shorthand with no color). */
.ceFormFooterButtonContainers button,
.ce-primaryFormSubmitButtons,
#webFormStartOverButton {
    padding: 16px 80px;
    border: 1px solid;
    border-radius: 50px;
    background-color: var(--app-theme-button-color);
    color: var(--app-theme-button-font-color);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

    .ce-primaryFormSubmitButtons:hover,
    #webFormStartOverButton:hover {
        border-color: color-mix(in srgb, var(--app-theme-button-color) 40%, transparent);
        background-color: color-mix(in srgb, var(--app-theme-button-color) 40%, transparent);
    }

/* 7.2 One-click checkout and login modal buttons */
#oneClickCheckoutUseProfileButton,
#formLoginModal .ce-formLoginFooter button {
    border-color: var(--app-theme-button-color) !important;
    background-color: var(--app-theme-button-color) !important;
    color: var(--app-theme-button-font-color) !important;
    cursor: pointer;
}


/* ==========================================================================
   8. ADDRESS ENTRY (Google Places single-line input)
   ========================================================================== */

.ce-singleLineAddressFieldWrappers {
    flex-wrap: wrap;
}

/* "add unit #" link-style button */
#contactAddressSingleLineEntryRowShowDetailsLink {
    margin-top: 12px;
    padding: 0 !important;
    border: none;
    background: none !important;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
    text-transform: capitalize;
    cursor: pointer;
}


/* ==========================================================================
   9. MISC
   ========================================================================== */

/* Free gift item image */
.ce-freeGiftItemImagesContainers img {
    max-width: 250px;
}


/* ==========================================================================
   10. STATES
   ========================================================================== */

/* Error: overrides border and text color on any element with .error */
.error {
    border-color: #e84c3d !important;
    color: #e84c3d !important;
}