/* =====================================================================
 * eg-wd-controls.css — everything the donor actually operates.
 *
 * One of THREE partials carved out of universal-donation-widget.css on
 * 8 Sep 2026. That file was 483 lines against a 500 hard max and its own
 * comment already said the next addition had to carve it; the operator
 * controls for typeface and text size are that addition.
 *
 * ⚠️ CASCADE ORDER IS LOAD ORDER: shell → controls → blocks, exactly as
 * universal-donation-widget.html links them. The mobile media queries sit
 * at the END of eg-wd-blocks.css and override rules from all three, so
 * blocks must stay last. Nothing was edited in the carve — proven
 * byte-identical out of git by scripts/harness-widget-css-carve.js.
 *
 * HOLDS: the frequency toggle, the amount grid and its tier variants,
 * the billing-date buttons, the custom-amount field, the total box, .btn,
 * the back link and the form fields. Split here because these are the
 * things a donor touches, and they are the rules a size control moves.
 * ===================================================================== */

        /* Frequency Toggle */
        .frequency-toggle {
            display: flex;
            background: var(--gray-100);
            padding: 3px;
            border-radius: calc(8px * var(--radius));
            margin-bottom: 1rem;
        }
        .freq-btn {
            flex: 1;
            padding: 0.5rem;
            border: none;
            background: transparent;
            font-size: 0.8125rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: calc(6px * var(--radius));
            transition: all 0.2s;
            color: var(--gray-500);
        }
        .freq-btn.active {
            background: white;
            color: var(--primary);
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        /* Amount Grid */
        .amounts {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            margin-bottom: 0.625rem;
        }
        .amt-btn {
            padding: 0.75rem 0.25rem;
            border: 2px solid var(--gray-200);
            border-radius: calc(10px * var(--radius));
            background: white;
            font-size: 0.9375rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .amt-btn:hover { border-color: var(--primary); background: var(--gray-50); }
        .amt-btn.selected {
            border-color: var(--primary);
            background: var(--primary);
            color: white;
        }
        .amt-btn small { display: block; font-size: 0.5625rem; font-weight: 500; opacity: 0.7; }

        /* Tier button overrides for ticket/raffle mode */
        .amt-btn.tier-btn {
            flex-direction: column;
            padding: 14px 8px;
            min-height: 72px;
            gap: 2px;
        }
        .amt-btn.tier-btn .tier-label { font-size: 0.8rem; font-weight: 500; opacity: 0.7; }
        .amt-btn.tier-btn .tier-price { font-size: 1.3rem; font-weight: 800; }
        .amt-btn.tier-btn.selected .tier-label { opacity: 1; }

        /* Billing Date Selection (Monthly only) */
        .billing-date-section {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--gray-200);
            display: none;
        }
        .billing-date-section.visible { display: block; }
        .billing-date-label {
            font-size: 0.8125rem;
            color: var(--gray-500);
            margin-bottom: 0.5rem;
            text-align: center;
        }
        .billing-date-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: center;
        }
        .billing-date-btn {
            padding: 0.625rem 1rem;
            border: 2px solid var(--gray-200);
            border-radius: calc(8px * var(--radius));
            background: white;
            font-size: 0.8125rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }
        .billing-date-btn:hover { border-color: var(--primary); }
        .billing-date-btn.selected {
            border-color: var(--primary);
            background: var(--primary);
            color: white;
        }

        /* Custom Amount */
        .custom-wrap { position: relative; margin-bottom: 1rem; }
        .custom-wrap .symbol {
            position: absolute;
            left: 0.875rem;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 600;
            color: var(--gray-500);
            font-size: 0.9375rem;
        }
        .custom-input {
            width: 100%;
            padding: 0.625rem 0.875rem 0.625rem 2rem;
            border: 2px solid var(--gray-200);
            border-radius: calc(8px * var(--radius));
            font-size: 0.9375rem;
            font-weight: 600;
        }
        .custom-input:focus { outline: none; border-color: var(--primary); }

        /* Total Display */
        .total-box {
            text-align: center;
            padding: 0.875rem;
            background: var(--gray-50);
            border-radius: calc(8px * var(--radius));
            margin-bottom: 1rem;
        }
        .total-box .label { font-size: 0.6875rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
        .total-box .amount { font-size: 1.5rem; font-weight: 700; }
        .total-box .freq { font-size: 0.75rem; color: var(--gray-500); }

        /* Buttons */
        .btn {
            width: 100%;
            padding: 0.875rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: calc(8px * var(--radius));
            font-size: 0.9375rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn:hover { background: var(--primary-dark); }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.6875rem;
            color: var(--gray-500);
            cursor: pointer;
            margin-bottom: 0.875rem;
        }
        .back-link:hover { color: var(--primary); }

        /* Form */
        .form-group { margin-bottom: 0.75rem; }
        .form-group label {
            display: block;
            font-size: 0.6875rem;
            font-weight: 600;
            color: var(--gray-500);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.25rem;
        }
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 0.5rem 0.625rem;
            border: 1.5px solid var(--gray-300);
            border-radius: calc(6px * var(--radius));
            font-size: 0.8125rem;
            font-family: inherit;
        }
        .form-group textarea { resize: vertical; min-height: 50px; }
        .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); }

        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }

        .friendly-msg {
            font-size: 0.8125rem;
            color: var(--gray-700);
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }