@import 'common.css';

:root {
    --field-height: 3.25rem;
    --field-radius: 0.75rem;
    --field-padding-x: 0.9rem;
    --field-label-top: 0.55rem;
    --field-border-width: 1px;

    --placeholder: var(--agora-gray-8);
    --error: var(--agora-red);
    --focused-state: var(--agora-blue-1);
    --default-state: var(--agora-gray-9);
    --disabled-state: var(--agora-gray-4);
    --valid: var(--agora-teal-2);
    --label: var(--agora-gray-6);
    --label-size: 0.8rem;

    --field-bg: #fff;
    --field-bg-hover: var(--agora-gray-1);
    --field-bg-focus: #fff;
    --field-border: var(--agora-gray-7);
    --field-border-hover: var(--agora-gray-8);
    --field-text: var(--agora-gray-C);
    --field-label: var(--agora-gray-7);
    --field-hint: var(--agora-gray-B);
    --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--focused-state) 18%, transparent);
    --shadow-error: 0 0 0 4px color-mix(in srgb, var(--error) 14%, transparent);
}

/* 1. Reset and Base Typography */
.clean-form {
    width: 100%;
    padding: 2em;
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
            0 2px 4px -1px rgba(0, 0, 0, 0.03),
            0 10px 20px -3px rgba(0, 0, 0, 0.05);
}



/* 2. Vertical Spacing */
.clean-form .field {
    margin-bottom: 1rem;
}

/* 3. Label Styling (Top-aligned) */
.clean-form label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: var(--label-size);
    color: var(--agora-gray-B);
}
.clean-form .field > label,
.clean-form .field > .group-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    font-weight: 700;
}

.clean-form input[type="checkbox"] + label,
.clean-form input[type="radio"] + label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
}

/* Required fields */
.clean-form .field.required label::after {
    content: " *";
    color: var(--agora-red-0);
    font-weight: 600;
    font-size: 1.2em;
    margin-left: 2px;
    text-transform: none;
}

/* 4. Input & Select Styling */
.clean-form .field input[type=text],
.clean-form .field input[type=password],
.clean-form .field input[type=email],
.clean-form .field input[type=file] ,
.clean-form .field input[type=date],
.clean-form .field input[type=datetime-local],
.clean-form .field input[type=month],
.clean-form .field input[type=number],
.clean-form .field input[type=range] ,
.clean-form .field input[type=search],
.clean-form .field input[type=tel],
.clean-form .field input[type=time],
.clean-form .field input[type=url],
.clean-form .field select,
.clean-form .field textarea,
.clean-form select {
    padding: 0.55rem; /* Large enough for mobile tap targets */
    font-size: 1rem;
    border: 1px solid var(--field-border);
    border-radius: 4px;
    width: 100%;
    background-color: var(--field-bg);
    box-sizing: border-box; /* Ensures padding doesn't break width */
}
.clean-form *[disabled=disabled] {
    background-color: var(--disabled-state) !important;
}

.clean-form input::placeholder {
    color: var(--placeholder);
    opacity: 0.5;
}

.clean-form input[type="checkbox"] + label,
.clean-form input[type="radio"] + label
{
    font-size: calc(1.05*var(--label-size));
}

.clean-form input:focus,
.clean-form select:focus {
    outline: 2px solid var(--focused-state);
    outline-offset: 2px;
    border-color: transparent;
}

.clean-form .field.error input {
    border: 2px solid var(--error); /* Strong red */
    background-color: #fef2f2; /* Light tint for context */
}

.clean-form .field-help {
    display: block;
    color: var(--agora-gray-9);
    font-size: 0.75rem;
    font-weight: 400;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.clean-form .error-message {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #b91c1c;
    background-color: #fef2f2;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.clean-form .field.success input {
    border: 2px solid #15803d; /* Strong green */
}

.success-mark {
    color: #15803d;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.25rem;
}
.field.error input:focus {
    outline-color: var(--error);
}

/* === Club Search: two-panel form layout === */

.clean-form .row { gap: 0.75em; }


.clean-form fieldset {
    margin-bottom: 2em;
    flex: 1;
    min-width: 0;           /* prevent fieldset/div from overflowing flex parent */
    border: 1px solid var(--agora-gray-4);
    border-radius: 8px;
    background: var(--agora-gray-2);
    padding: 1.25em;
}


.clean-form legend {
    font-size: 14px;
    font-weight: 600;
    color: #1f3a5f;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    top: 1.0rem;

}


.clean-form legend img {
    width: 1em;
}

.search-panels {
    display: flex;
    gap: 1.5em;
    margin-bottom: 1.5em;
}


.search-panel-header .subtitle {
    font-weight: 400;
    color: var(--agora-gray-8);
}

/* Ensure .field flex children can shrink below content width */
fieldset .row > .field { min-width: 0; }

/* Bottom-align all fields in a row so inputs line up when labels differ in height */
fieldset .row { align-items: flex-end; }

.group-label {
    display: block;
    font-weight: 600;
    font-size: 0.88em;
    color: var(--agora-gray-C);
    margin: 0.8em 0 0.4em;
}

/* === Age Requirement ± stepper === */

.number-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--field-border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--field-bg);
}

.number-stepper .stepper-btn {
    padding: 0.55rem 0.7em;   /* match select vertical padding */
    border: none;
    background: var(--agora-gray-3);
    cursor: pointer;
    font-size: 1.1em;
    color: var(--agora-gray-9);
}

.number-stepper .stepper-btn:hover { background: var(--agora-gray-4); }

.number-stepper .stepper-value {
    padding: 0.55rem 0.75em;  /* match select vertical padding */
    display: flex;
    align-items: center;
    min-width: 4.5em;
    justify-content: center;
    font-size: 0.95em;
    border-left: 1px solid var(--field-border);
    border-right: 1px solid var(--field-border);
    color: var(--agora-gray-C);
}

/* === Meeting-day toggle buttons === */

.day-selector {
    display: flex;
    gap: 0.3em;
    flex-wrap: wrap;
    margin-top: 0.4em;
}

.day-btn {
    padding: 0.4em 0.7em;
    border: 1px solid var(--agora-gray-6);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    font-family: inherit;
    color: var(--agora-gray-9);
    transition: background 0.12s, color 0.12s;
}

.day-btn.active {
    background: var(--agora-blue-0);
    color: white;
    border-color: var(--agora-blue-0);
}

/* === CSS toggle switch === */

.toggle-wrap { margin-top: 1.1em; }

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    cursor: pointer;
    font-size: 0.9em;
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: relative;
    display: inline-block;
    width: 2.8em;
    height: 1.5em;
    background: var(--agora-gray-6);
    border-radius: 1em;
    flex-shrink: 0;
    transition: background 0.2s;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 0.18em;
    left: 0.18em;
    width: 1.14em;
    height: 1.14em;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-label input:checked + .toggle-slider { background: var(--agora-teal-2); }
.toggle-label input:checked + .toggle-slider::after { transform: translateX(1.3em); }


.clean-form .field input,
.clean-form .field select,
.clean-form .field textarea {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.clean-form input:focus,
.clean-form select:focus {
    outline: none; /* Replace default outline with clean ring */
    border-color: var(--focused-state);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focused-state) 20%, transparent);
}

.clean-form fieldset {
    border: 1px solid var(--agora-gray-3);
    border-radius: 12px;
    background: var(--agora-gray-1); /* Slightly softer tint */
    padding: 1.5rem;
}


/* Privacy Badges */

.clean-form .field-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.35rem;
    gap: 0.5rem;
}
.clean-form .label-group label {
    margin-bottom: 0.1rem;
}

.clean-form .privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: default;
    user-select: none;
}

.clean-form .privacy-badge::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.clean-form .static-value {
    background-color: var(--agora-gray-7) !important;
}

.clean-form .privacy-badge.private {
    content: "";
    color: white;
    background-color: var(--agora-red-0);
    border: 1px solid #ffedd5;
}

.clean-form .privacy-badge.public {
    content: "";
    color: white;
    background-color: var(--agora-green-0);
    border: 1px solid #dcfce7;
}

.clean-form .privacy-badge.internal {
    content: "";
    color: white;
    background-color: var(--agora-yellow-1);
    border: 1px solid #dcfce7;
}

.clean-form .privacy-badge.public::before {
    background-image: url("/static/icons/ui/privacy.public.svg");
}

.clean-form .privacy-badge.private::before {
    background-image: url("/static/icons/ui/privacy.private.svg");
}

.clean-form .privacy-badge.internal::before {
    background-image: url("/static/icons/ui/privacy.internal.svg");
}

@media (max-width: 1024px) {
    .clean-form .privacy-badge {
        font-size: 0;
        padding: 4px; /* Keeps a small square/rounded badge around the icon */
        gap: 0;
    }

    .clean-form .privacy-badge::before {
        width: 14px;
        height: 14px;
    }
}