/* Minification failed. Returning unminified contents.
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(74,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(84,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-neutral'
(85,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(86,23): run-time error CSS1039: Token not allowed after unary operator: '-soka-font'
(94,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(156,23): run-time error CSS1039: Token not allowed after unary operator: '-soka-font-heading'
(160,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(165,23): run-time error CSS1039: Token not allowed after unary operator: '-soka-font-heading'
(169,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(185,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(191,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(237,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(247,24): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(278,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(317,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(337,23): run-time error CSS1039: Token not allowed after unary operator: '-soka-font'
(344,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(352,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(357,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-surface'
(358,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(359,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(363,23): run-time error CSS1039: Token not allowed after unary operator: '-soka-font'
(386,24): run-time error CSS1039: Token not allowed after unary operator: '-soka-secondary'
(395,24): run-time error CSS1039: Token not allowed after unary operator: '-soka-error'
(417,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-surface'
(423,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(437,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(458,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(471,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(480,25): run-time error CSS1039: Token not allowed after unary operator: '-soka-radius-md'
(481,22): run-time error CSS1039: Token not allowed after unary operator: '-soka-surface'
(493,25): run-time error CSS1039: Token not allowed after unary operator: '-soka-radius-md'
(500,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-error'
(501,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-error'
(508,23): run-time error CSS1030: Expected identifier, found '.'
(508,42): run-time error CSS1031: Expected selector, found ')'
(508,42): run-time error CSS1025: Expected comma or open brace, found ')'
(513,24): run-time error CSS1039: Token not allowed after unary operator: '-soka-error'
(518,24): run-time error CSS1039: Token not allowed after unary operator: '-soka-error'
(594,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(660,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-error'
(685,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(692,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(704,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
(707,22): run-time error CSS1039: Token not allowed after unary operator: '-soka-surface'
(708,25): run-time error CSS1039: Token not allowed after unary operator: '-soka-radius-md'
(731,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-surface'
(732,25): run-time error CSS1039: Token not allowed after unary operator: '-soka-radius-md'
(740,28): run-time error CSS1039: Token not allowed after unary operator: '-soka-error'
(751,17): run-time error CSS1039: Token not allowed after unary operator: '-soka-primary'
 */
/* ============================================================
   donate-jpy.css — Soka-branded styles for the JPY donation form
   Based on code-layout.html design system
   ============================================================ */

/* === Font Face (Elza Text Trial - Latin only) === */
@font-face {
    font-family: 'Elza Text';
    src: url('fonts/fonnts.com-Elza_Text.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-024F;
}

@font-face {
    font-family: 'Elza Text';
    src: url('fonts/fonnts.com-Elza_Text_Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-024F;
}

@font-face {
    font-family: 'Elza Text';
    src: url('fonts/fonnts.com-Elza_Text_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-024F;
}

@font-face {
    font-family: 'Elza Text';
    src: url('fonts/fonnts.com-Elza_Text_Oblique.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-024F;
}

@font-face {
    font-family: 'Elza Text';
    src: url('fonts/fonnts.com-Elza_Text_Bold_Oblique.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-024F;
}

@font-face {
    font-family: 'Elza Text';
    src: url('fonts/fonnts.com-Elza_Text_Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-024F;
}

@font-face {
    font-family: 'Elza Text';
    src: url('fonts/fonnts.com-Elza_Text_Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-024F;
}

/* === CSS Variables (Soka Design Tokens) === */
:root {
    --soka-primary: #004b87;
    --soka-secondary: #0b63b0;
    --soka-tertiary: #2bb673;
    --soka-neutral: #fefdeb;
    --soka-surface: #ffffff;
    --soka-muted: #e5e7eb;
    --soka-error: #c62828;
    --soka-radius-sm: 4px;
    --soka-radius-md: 8px;
    --soka-radius-lg: 16px;
    --soka-radius-full: 9999px;
    --soka-font: 'Elza Text', Arial, Helvetica, 'Meiryo', 'MS PGothic', sans-serif;
    --soka-font-heading: 'Elza Text', Arial, Helvetica, sans-serif;
}

/* === Reset & Base === */
.donate-jpy-page {
    margin: 0;
    padding: 0;
    background-color: var(--soka-neutral);
    color: var(--soka-primary);
    font-family: var(--soka-font);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* === Header === */
.donate-jpy-header {
    background-color: var(--soka-primary);
    width: 100%;
    padding: 19px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
}

.donate-jpy-header-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.donate-jpy-logo {
    margin-right: auto;
    display: flex;
    align-items: center;
}

.donate-jpy-logo-link {
    display: flex;
    align-items: center;
}

.donate-jpy-logo-link img {
    vertical-align: middle;
}

/* === Main Content === */
.donate-jpy-main {
    flex-grow: 1;
    width: 100%;
    max-width: 1244px;
    margin: 0 auto;
    padding: 15px;
    font-size: 16px;
}

.donate-jpy-container {
    width: 100%;
}

/* === Embed mode (?mode=embed) === */
.donate-jpy-page.embed-mode {
    min-height: 0;
    background-color: transparent;
}

.donate-jpy-page.embed-mode .donate-jpy-main {
    padding: 15px 0;
}

/* === Title Section (matching Slate form) === */
.donate-jpy-title-section {
    margin-bottom: 32px;
}

.donate-jpy-title-en {
    font-family: var(--soka-font-heading);
    font-size: 26px;
    line-height: 20px;
    font-weight: 700;
    color: var(--soka-primary);
    margin: 0 0 8px 0;
}

.donate-jpy-title-jp {
    font-family: var(--soka-font-heading);
    font-size: 26px;
    line-height: 33.6px;
    font-weight: 700;
    color: var(--soka-primary);
    margin: 0 0 8px 0;
}

/* === Amount Due (matching Slate form) === */
.donate-jpy-amount-due {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-top: 8px;
}

.donate-jpy-amount-due-label {
    flex: 0 0 200px;
    font-size: 16px;
    font-weight: 700;
    color: var(--soka-primary);
}

.donate-jpy-amount-due-value {
    font-size: 16px;
    font-weight: 400;
    color: var(--soka-primary);
}

/* === Select Dropdown (matching Slate form) === */
/* Use .soka-input.donate-jpy-select (specificity 0,2,0) so these win over the
   plain .soka-input rule, which is defined LATER in this file. Without the extra
   class, source order lets .soka-input's height:26px + padding:11px 15px through,
   collapsing the content box so the native select clips "Monthly" to blank. */
.soka-input.donate-jpy-select {
    appearance: auto;
    background-image: none;
    padding: 0 10px;
}

/* === Datepicker Wrapper === */
.donate-jpy-datepicker-wrapper {
    position: relative;
}

.donate-jpy-datepicker-wrapper .datepicker {
    background-color: #ffffff;
    cursor: pointer;
}

/* Inline (always-visible) jQuery UI datepicker */
.donate-jpy-inline-datepicker .ui-datepicker.ui-widget-content {
    width: 100%;
    background: #fefdeb;
    border: none;
}

.donate-jpy-inline-datepicker .ui-datepicker-calendar td a,
.donate-jpy-inline-datepicker .ui-datepicker-calendar td span {
    cursor: pointer;
    background: #fefdeb;
    border: none;
}

.ui-datepicker .ui-datepicker-header {
    background: #cccccc;
}

/* Today marker (ui-state-highlight): subtle background only, so it is never
   mistaken for the current selection. Must override jQuery UI's own highlight. */
.donate-jpy-inline-datepicker .ui-datepicker-calendar td a.ui-state-highlight {
    background: #fff3cd;
    color: var(--soka-primary);
    border-color: transparent;
}

/* Selected day (ui-state-active) only: solid Soka-blue. Placed AFTER the today
   rule so when today is the selected day it wins and shows blue, but once the
   donor picks another day only that day is blue. */
.donate-jpy-inline-datepicker .ui-datepicker-calendar td a.ui-state-active {
    background: #666666;
    color: #ffffff;
    border-color: var(--soka-primary);
    font-weight: bold;
}

/* === Recurring Row (label left, control right) === */
.donate-jpy-recurring-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.donate-jpy-recurring-row>.donate-jpy-label {
    flex: 0 0 200px;
    margin-bottom: 0;
    white-space: nowrap;
}

.donate-jpy-recurring-row>.donate-jpy-select {
    flex: 1 1 auto;
    max-width: 260px;
}

.donate-jpy-recurring-row>.donate-jpy-datepicker-wrapper {
    flex: 1 1 auto;
    max-width: 260px;
}

.donate-jpy-description {
    font-size: 16px;
    line-height: 28px;
    color: var(--soka-primary);
    margin: 0;
}

.donate-jpy-description p {
    margin: 0 0 0.9rem;
}

.donate-jpy-description p:last-child {
    margin-bottom: 0;
}

.donate-jpy-description a {
    color: #1a56db;
    text-decoration: underline;
    word-break: break-all;
}

.donate-jpy-desc-heading {
    font-weight: 700;
    margin-top: 0.9rem;
}

.donate-jpy-required-note {
    font-weight: 500;
}

/* === Form === */
.donate-jpy-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* === Section === */
/* .donate-jpy-section — spacing handled by .donate-jpy-form gap */

.donate-jpy-section-header {
    background-color: #cccccc;
    color: var(--soka-primary);
    font-weight: 700;
    padding: 6px 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.donate-jpy-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Field === */
.donate-jpy-field {
    display: flex;
    flex-direction: column;
}

.donate-jpy-label {
    font-family: var(--soka-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    display: block;
    margin-bottom: 5px;
    color: var(--soka-primary);
}

.donate-jpy-label-block {
    margin-bottom: 8px;
}

.donate-jpy-required {
    color: var(--soka-primary);
}

/* === Input Styling (Soka Design System) === */
.soka-input {
    background-color: var(--soka-surface);
    color: var(--soka-primary);
    border: 1px solid var(--soka-primary);
    border-radius: 0;
    padding: 11px 15px;
    font-size: 14px;
    font-family: var(--soka-font);
    width: 100%;
    height: 26px;
    transition: all 0.2s ease-in-out;
    outline: none;
    box-sizing: border-box;
}

@media (min-width: 768px) {

    /* Cap width of the receipt-name / relationship / comment controls on desktop
       so they don't stretch the full form width. Mobile keeps 100% (width:100%
       from .soka-input) for tap-friendly full-width fields. */
    #ReceiptName,
    #ReceiptNameKana,
    #Relationship,
    #Comments {
        max-width: 355px;
    }
}

.soka-input:focus {
    box-shadow: 0 0 0 2px rgba(11, 99, 176, 0.3);
    border-color: var(--soka-secondary);
}

.soka-input::placeholder {
    color: #7a9bbc;
}

.soka-input:invalid,
.soka-input.input-validation-error {
    border-color: var(--soka-error);
}

/* === Textarea === */
textarea.soka-input {
    height: auto;
    padding: 11px 15px;
}

.donate-jpy-textarea {
    min-height: 60px;
    resize: vertical;
}

.donate-jpy-textarea-large {
    min-height: 100px;
    resize: vertical;
}

/* === Checkbox & Radio === */
.soka-checkbox {
    appearance: none;
    background-color: var(--soka-surface);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 16px;
    height: 16px;
    border: 1px solid var(--soka-primary);
    border-radius: 0;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.soka-checkbox::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: var(--soka-primary);
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.soka-checkbox:checked::before {
    transform: scale(1);
}

.donate-jpy-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.donate-jpy-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--soka-primary);
}

/* === Amount Group === */
.donate-jpy-amount-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* === Recurring Note === */
.donate-jpy-recurring-note {
    font-size: 14px;
    color: var(--soka-primary);
    margin-bottom: 8px;
}

/* === Payment Element === */
.donate-jpy-payment-element {
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--soka-radius-md);
    background: var(--soka-surface);
}

@media (min-width: 768px) {
    .donate-jpy-payment-element {
        max-width: 450px;
    }
}

.donate-jpy-payment-message {
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--soka-radius-md);
    font-size: 14px;
    font-weight: 500;
}

.donate-jpy-payment-message.error {
    background-color: #ffcccc;
    color: var(--soka-error);
    border: 1px solid var(--soka-error);
}

/* Highlight required fields left blank on submit (custom validation replaces
   the browser's native tooltip, which is suppressed via the form's novalidate).
   The whole field block (label + input) is tinted, with the input itself kept
   white so it stays legible against the error background. */
.donate-jpy-field:has(.soka-input.invalid) {
    background-color: #ffcccc;
}

.soka-input.invalid {
    border-color: var(--soka-error);
}

.soka-input.invalid:focus {
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.25);
    border-color: var(--soka-error);
}

/* === Submit Section === */
.donate-jpy-submit-section {
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.donate-jpy-recaptcha-note {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* === Primary Button (Slate style) === */
.btn-primary {
    background: #004b87;
    border-radius: 30px;
    color: #fefdeb;
    border: 1px solid transparent;
    text-decoration: none !important;
    -webkit-appearance: none;
    display: inline-flex !important;
    height: 50px;
    min-width: 120px;
    padding: 16px 28px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-align: center;
    font-family: Elza, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 104%;
    letter-spacing: .84px;
    text-transform: uppercase;
    transition: all .3s;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #dadada;
}

.btn-primary:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* === Spinner (in-button) === */
.btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(254, 253, 235, 0.4);
    border-top-color: #fefdeb;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

.btn-primary.is-loading .btn-spinner {
    display: inline-block;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* === Footer === */
.donate-jpy-footer {
    background-color: var(--soka-primary);
    color: #ffffff;
    padding: 32px 0;
    margin-top: auto;
}

.donate-jpy-footer-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .donate-jpy-footer-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.donate-jpy-footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.donate-jpy-footer-brand span {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.donate-jpy-footer-brand svg {
    width: 48px;
    height: 48px;
}

.donate-jpy-footer-info {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0.9;
}

@media (min-width: 768px) {
    .donate-jpy-footer-info {
        flex-direction: row;
        gap: 24px;
    }
}

.donate-jpy-footer-info a {
    color: #ffffff;
    text-decoration: underline;
}

.donate-jpy-footer-info a:hover {
    opacity: 0.75;
}

/* === Validation === */
.field-validation-error {
    color: var(--soka-error);
    font-size: 12px;
    margin-top: 2px;
}

.field-validation-valid {
    display: none;
}

/* === Confirmation Page === */
.donate-jpy-confirmation {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 16px;
}

.donate-jpy-confirmation-icon {
    margin-bottom: 24px;
}

.donate-jpy-confirmation-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--soka-primary);
    margin: 0 0 24px 0;
}

.donate-jpy-confirmation-details {
    font-size: 16px;
    line-height: 24px;
    color: var(--soka-primary);
    margin-bottom: 24px;
}

.donate-jpy-confirmation-amount {
    font-size: 20px;
    margin: 16px 0;
}

.donate-jpy-confirmation-message {
    font-size: 14px;
    line-height: 24px;
    color: var(--soka-primary);
    margin-bottom: 32px;
    padding: 16px;
    background: var(--soka-surface);
    border-radius: var(--soka-radius-md);
}

.donate-jpy-confirmation-action {
    margin-top: 24px;
}

/* .donate-jpy-confirmation-success — default */
/* .donate-jpy-confirmation-failure — default */

/* === Validation Error Modal === */
.donate-jpy-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

.donate-jpy-modal {
    background-color: var(--soka-surface);
    border-radius: var(--soka-radius-md);
    max-width: 480px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.donate-jpy-modal-header {
    background-color: var(--soka-error);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 20px;
}

.donate-jpy-modal-body {
    padding: 20px;
    font-size: 14px;
    line-height: 24px;
    color: var(--soka-primary);
}

.donate-jpy-modal-body ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.donate-jpy-modal-body li {
    margin-bottom: 4px;
}

.donate-jpy-modal-footer {
    padding: 0 20px 20px 20px;
    display: flex;
    justify-content: flex-end;
}

/* === Mobile Responsive === */
/* Root-cause overflow fixes. The English title contains hyphenated words that
   the browser will not break mid-word, so the longest token ("Soka JP Donor
   Portal - New Donor Giving Form - JPN (INT)") pushed the layout past the phone
   viewport. overflow-wrap/word-break let long tokens wrap instead. box-sizing
   keeps padding from adding to declared widths and overflowing. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.donate-jpy-title-en,
.donate-jpy-title-jp,
.donate-jpy-description,
.donate-jpy-label {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Media (logos, embeds) must never exceed their container. */
.donate-jpy-header img,
.donate-jpy-footer img,
.donate-jpy-main img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {

    /* Stack the recurring rows: a 200px label + 260px control (476px) is wider
       than a phone viewport, so the label sits above its control instead. */
    .donate-jpy-recurring-row {
        flex-direction: column;
        gap: 8px;
    }

    .donate-jpy-recurring-row>.donate-jpy-label {
        flex: 0 0 auto;
        padding-top: 0;
        white-space: normal;
    }

    .donate-jpy-recurring-row>.donate-jpy-select,
    .donate-jpy-recurring-row>.donate-jpy-datepicker-wrapper {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    /* Amount Due: label above value on mobile (keeps the ¥ from crowding). */
    .donate-jpy-amount-due {
        gap: 8px;
    }

    .donate-jpy-amount-due-label {
        flex: 0 0 auto;
    }

    /* Tighten page padding so the form uses more of the narrow screen. */
    .donate-jpy-main {
        padding: 12px;
    }

    .donate-jpy-header {
        padding: 14px 16px;
    }

    .donate-jpy-title-en {
        font-size: 18px;
        line-height: 1.3;
    }

    .donate-jpy-title-jp {
        font-size: 20px;
        line-height: 1.3;
    }

    /* Inline datepicker can render at a fixed jQuery-UI width; cap it. */
    .donate-jpy-inline-datepicker .ui-datepicker {
        width: 100% !important;
        max-width: 100%;
    }
}