/* GRASAG Form – Neutral Base Styling 
 * Provides a clean layout while allowing fonts/colors to inherit where possible.
 */

:root {
    --grasag-border: rgba(0, 0, 0, 0.2);
    --grasag-border-focus: rgba(0, 0, 0, 0.5);
    --grasag-bg-alt: rgba(0, 0, 0, 0.03);
    --grasag-bg-input: #ffffff;
    --grasag-muted: rgba(0, 0, 0, 0.6);
    --grasag-error: #dc2626;
    --grasag-radius: 6px;
    --grasag-primary: #2563eb;
    --grasag-btn-bg: #1e293b;
    --grasag-btn-text: #ffffff;
}

/* ─── Layout ────────────────────────────────────────────────────────────── */
.grasag-registration-form {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    font-family: inherit;
    color: inherit;
    max-width: 100%;
}

.grasag-registration-form .grasag-form-row { margin-bottom: 0; width: 100%; }

.grasag-registration-form label:not(.grasag-preset-btn):not(.grasag-tshirt-option):not(.grasag-checkbox-label):not(.grasag-radio-label),
.grasag-registration-form legend {
    display: block;
    font-size: 0.95em;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: inherit;
}

.grasag-required { color: var(--grasag-error); margin-left: 2px; }
.grasag-field-desc { display: block; margin-top: 0.35rem; color: var(--grasag-muted); font-size: 0.85em; }

/* ─── Standard Inputs ───────────────────────────────────────────────────── */
.grasag-registration-form input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=hidden]):not(.grasag-preset-btn),
.grasag-registration-form select,
.grasag-registration-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    font-size: 1em;
    border: 1px solid var(--grasag-border);
    border-radius: var(--grasag-radius);
    font-family: inherit;
    background-color: var(--grasag-bg-input);
    color: inherit;
    transition: all 0.2s;
    outline: none;
}

.grasag-registration-form textarea { resize: vertical; min-height: 100px; }
.grasag-registration-form input:focus,
.grasag-registration-form select:focus,
.grasag-registration-form textarea:focus {
    border-color: var(--grasag-border-focus);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* ─── Side-by-side rows ──────────────────────────────────────────────────── */
.grasag-row-cols { display: flex; gap: 1.4rem; flex-wrap: wrap; width: 100%; }
.grasag-form-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.grasag-col-half  { flex: 0 1 calc(50% - 0.7rem); min-width: 200px; }
.grasag-col-third { flex: 0 1 calc(33.333% - 0.94rem); min-width: 160px; }

/* ─── Radio / Checkbox Groups ────────────────────────────────────────────── */
.grasag-radio-group { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.grasag-radio-label, .grasag-checkbox-label {
    display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
    padding: 0.8rem 1rem; border: 1px solid var(--grasag-border); border-radius: var(--grasag-radius);
    background: var(--grasag-bg-input); transition: all 0.2s;
}
.grasag-radio-label:hover, .grasag-checkbox-label:hover { border-color: var(--grasag-border-focus); }
.grasag-radio-label:has(input:checked) { border-color: var(--grasag-primary); background: var(--grasag-bg-alt); }
fieldset { border: none; padding: 0; margin: 0; }

/* ─── File Upload ───────────────────────────────────────────────────────── */
.grasag-file-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem; border: 1px dashed var(--grasag-border-focus); border-radius: var(--grasag-radius); }
.grasag-photo-preview { width: 90px; height: 90px; border-radius: var(--grasag-radius); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--grasag-bg-alt); flex-shrink: 0; cursor: pointer; }
.grasag-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.grasag-photo-placeholder { opacity: 0.5; font-size: 0.75em; text-align: center; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.grasag-file-input { display: block; flex: 1; font-family: inherit; font-size: 0.9em; }

/* ─── Donation Amount ───────────────────────────────────────────────────── */
.grasag-preset-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.6rem; margin-bottom: 0.8rem; }
.grasag-preset-btn {
    background: transparent; border: 1px solid var(--grasag-border); border-radius: var(--grasag-radius);
    padding: 0.8rem 0.5rem; font-size: 1.1em; font-weight: 600; cursor: pointer; text-align: center;
    transition: all 0.2s; font-family: inherit; color: inherit;
}
.grasag-preset-btn:hover { border-color: var(--grasag-border-focus); }
.grasag-preset-btn.active { border-color: var(--grasag-primary); background: var(--grasag-bg-alt); box-shadow: inset 0 0 0 1px var(--grasag-primary); color: var(--grasag-primary); }
.grasag-custom-amount-wrap { position: relative; max-width: 100%; }
.grasag-currency { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--grasag-muted); pointer-events: none; }
.grasag-custom-amount-wrap input { padding-left: 2.2rem !important; font-weight: 600; }

/* ─── T-Shirt Grid ──────────────────────────────────────────────────────── */
.grasag-tshirt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.8rem; margin-top: 0.4rem; }
.grasag-tshirt-option {
    position: relative; border: 1px solid var(--grasag-border); border-radius: var(--grasag-radius);
    overflow: hidden; cursor: pointer; text-align: center; background: var(--grasag-bg-input); padding: 0.8rem; transition: all 0.2s;
}
.grasag-tshirt-option:hover { border-color: var(--grasag-border-focus); }
.grasag-tshirt-option.selected { border-color: var(--grasag-primary); box-shadow: inset 0 0 0 1px var(--grasag-primary); background: var(--grasag-bg-alt); }
.grasag-tshirt-option img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; margin-bottom: 0.4rem; }
.grasag-tshirt-no-img { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; opacity: 0.2; background: var(--grasag-border); border-radius: 4px; margin-bottom: 0.4rem; }
.grasag-tshirt-label { display: block; font-weight: 600; font-size: 0.85em; }
.grasag-tshirt-check { position: absolute; top: 6px; right: 8px; opacity: 0; transition: opacity 0.2s; font-weight: 700; color: var(--grasag-primary); }
.grasag-tshirt-option.selected .grasag-tshirt-check { opacity: 1; }

/* ─── Section / Blocks ──────────────────────────────────────────────────── */
.grasag-section-heading { margin-top: 1rem; }
.grasag-section-heading h3 { font-size: 1.3em; font-weight: 700; margin: 0 0 0.3rem 0; padding-bottom: 0.4rem; border-bottom: 1px solid var(--grasag-border); color: inherit; }
.grasag-section-desc { color: var(--grasag-muted); font-size: 0.95em; margin: 0; }
.grasag-content-block { background: var(--grasag-bg-alt); border: 1px solid var(--grasag-border); border-radius: var(--grasag-radius); padding: 1.2rem; }

/* ─── Submit Button ─────────────────────────────────────────────────────── */
.grasag-submit-row { margin-top: 1.5rem; }
.grasag-submit-btn {
    display: inline-flex; justify-content: center; align-items: center;
    background: var(--grasag-btn-bg); color: var(--grasag-btn-text); border: none; border-radius: var(--grasag-radius);
    font-family: inherit; font-size: 1em; font-weight: 600; padding: 0.8rem 2rem; cursor: pointer; transition: opacity 0.2s;
}
.grasag-submit-btn:hover { opacity: 0.85; }