/* * RACE1 Material Design Theme
 * Overrides the default "Orbital" Gravity Forms theme.
 * Version: 1.7 (Added Focus Expansion Animation)
 */

/* --- 1. IMPORTS --- */
/* Kept strictly for UI icons (error states). */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

/* --- 2. THE NUCLEAR VARIABLE OVERRIDE --- */
head:has(#gravity_forms_theme_framework-css) + body .gform-theme--framework.gform-theme,
head:has(#gravity_forms_theme_framework-css) + body [data-parent-form],
html body .gform-theme--orbital {

    /* --- Material Palette --- */
    --md-sys-color-primary: #0056b3; /* RACE1 Blue */
    --md-sys-color-accent: #70ab1b;  /* RACE1 Green */
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-outline: #79747e;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-error-bg: #fff0f0;

    /* --- Typography --- */
    --gf-ctrl-label-font-size: 14px;
    --gf-ctrl-label-font-weight: 500;
    --gf-ctrl-label-color-primary: #1d1b20;

    /* --- Inputs (Variables fallback) --- */
    --gf-ctrl-bg-color: var(--md-sys-color-surface);
    --gf-ctrl-border-color: var(--md-sys-color-outline);
    --gf-ctrl-border-radius: 4px;
    --gf-ctrl-border-width: 1px;
    --gf-ctrl-padding-y: 12px;
    --gf-ctrl-padding-x: 16px;

    /* --- Buttons --- */
    --gf-button-bg-color: var(--md-sys-color-accent);
    --gf-button-color: var(--md-sys-color-on-primary);
    --gf-button-border-radius: 20px;
}

/* --- 3. EXPLICIT FIELD STYLING (Breathing Effect) --- */

/* Normal State (Compact)
   We set a smaller padding/height here for the idle state. */
html body .gform-theme--orbital input:not([type=radio]):not([type=checkbox]),
html body .gform-theme--orbital textarea,
html body .gform-theme--orbital select {
    background-color: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important; /* COMPACT PADDING */
    color: #1d1b20 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    min-height: 40px !important; /* COMPACT HEIGHT */
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth expansion/contraction */
}

/* Focus State (Expanded)
   When clicked, we increase padding and height to standard size. */
html body .gform-theme--orbital input:not([type=radio]):not([type=checkbox]):focus,
html body .gform-theme--orbital textarea:focus,
html body .gform-theme--orbital select:focus {
    border-color: var(--md-sys-color-primary) !important;
    box-shadow: 0 0 0 1px var(--md-sys-color-primary) !important;
    outline: none;
    padding: 12px 16px !important; /* EXPANDED PADDING */
    min-height: 48px !important; /* EXPANDED HEIGHT */
}

/* Hover State */
html body .gform-theme--orbital input:not([type=radio]):not([type=checkbox]):hover,
html body .gform-theme--orbital textarea:hover,
html body .gform-theme--orbital select:hover {
    border-color: #1d1b20 !important;
}

/* Label Styling */
html body .gform-theme--orbital .gfield_label {
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
    color: #1d1b20 !important;
}

/* --- 4. ADVANCED FIELDS (Radios & Checkboxes) --- */

html body .gform-theme--orbital input[type="radio"],
html body .gform-theme--orbital input[type="checkbox"] {
    accent-color: var(--md-sys-color-primary);
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    cursor: pointer;
}

html body .gform-theme--orbital .gfield_radio label,
html body .gform-theme--orbital .gfield_checkbox label {
    vertical-align: middle;
    font-weight: 400;
    color: #49454f;
    cursor: pointer;
    line-height: 1.5;
}

/* --- 5. LAYOUT & SECTIONS --- */
html body .gform-theme--orbital .gsection {
    border-bottom: 1px solid #e0e0e0 !important;
    padding-bottom: 8px;
    margin-bottom: 24px;
}

html body .gform-theme--orbital .gsection_title {
    font-size: 22px;
    color: var(--md-sys-color-primary);
    margin: 0;
}

/* --- 6. ERROR STATES --- */
html body .gform-theme--orbital .gfield_error input,
html body .gform-theme--orbital .gfield_error textarea,
html body .gform-theme--orbital .gfield_error select {
    border-color: var(--md-sys-color-error) !important;
    background-color: var(--md-sys-color-error-bg) !important;
}

html body .gform-theme--orbital .gfield_validation_message {
    color: var(--md-sys-color-error);
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
}

html body .gform-theme--orbital .gfield_validation_message::before {
    font-family: 'Material Symbols Outlined';
    content: "\e000";
    margin-right: 6px;
    font-size: 16px;
    vertical-align: middle;
}

/* --- 7. BUTTONS --- */
html body .gform-theme--orbital .gform_button {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    border: none !important;
    cursor: pointer;
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    border-radius: 20px !important;
    padding: 10px 24px !important;
}

html body .gform-theme--orbital .gform_button:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transform: translateY(-1px);
    filter: brightness(110%);
}

/* --- 8. DATEPICKER --- */
html body .ui-datepicker.gform-theme--orbital,
html body .gform-theme--orbital .ui-datepicker {
    font-family: inherit !important;
    background-color: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 20em !important;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    padding: 0 0 12px 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-title {
    color: var(--gf-ctrl-label-color-primary);
    font-weight: 500;
    display: flex;
    gap: 4px;
    margin: 0 auto;
    line-height: 1.5;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-prev,
html body .ui-datepicker.gform-theme--orbital .ui-datepicker-next {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-prev:hover,
html body .ui-datepicker.gform-theme--orbital .ui-datepicker-next:hover {
    background-color: #f1f3f4 !important;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-prev span,
html body .ui-datepicker.gform-theme--orbital .ui-datepicker-next span {
    display: none !important;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-prev::after {
    content: '';
    border: solid #49454f;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(135deg);
    margin-left: 2px;
}
html body .ui-datepicker.gform-theme--orbital .ui-datepicker-next::after {
    content: '';
    border: solid #49454f;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    margin-right: 2px;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-calendar th {
    color: #79747e !important;
    font-size: 12px !important;
    font-weight: normal !important;
    padding-bottom: 8px !important;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-calendar td {
    padding: 2px !important;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-calendar td a,
html body .ui-datepicker.gform-theme--orbital .ui-datepicker-calendar td span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: var(--gf-ctrl-label-color-primary) !important;
    text-align: center !important;
    margin: 0 auto !important;
    transition: background 0.2s;
    font-weight: normal !important;
    text-decoration: none !important;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-calendar td a:hover {
    background-color: #e3e3e3 !important;
    color: #000 !important;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-calendar td.ui-datepicker-current-day a,
html body .ui-datepicker.gform-theme--orbital .ui-datepicker-calendar td.ui-datepicker-current-day a:hover {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

html body .ui-datepicker.gform-theme--orbital .ui-datepicker-calendar td.ui-datepicker-today a {
    border: 1px solid var(--md-sys-color-primary) !important;
}