/* =========================================================================
   Gravity Forms Custom Styling (Matched to Coach Dom Design System)
   ========================================================================= */

/* Main Wrapper Setup */
.gform_wrapper {
    font-family: var(--font-sans, "Inter Tight", sans-serif);
    color: var(--color-ink, #14130f);
}

/* Sections */
.gform_wrapper .gsection {
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

.gform_wrapper .gsection_title {
    font-family: var(--font-serif, "Newsreader", serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-ink, #14130f);
    margin: 0;
}

/* Fields & Labels */
.gform_wrapper .gfield:not(.gsection) {
    /* Removing the card-like wrapper from the dental theme to keep the editorial look */
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1.5rem;
    box-shadow: none;
}

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
    display: block !important;
    font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    color: var(--color-ink, #14130f) !important;
    letter-spacing: -0.01em;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix for Fieldset/Legend (Radio/Checkbox) */
.gform_wrapper fieldset.gfield {
    min-width: 0;
}

.gform_wrapper legend.gfield_label {
    width: 100%;
    padding: 0;
    float: left;
}

.gform_wrapper fieldset.gfield .ginput_container {
    clear: both;
}

.gform_wrapper .gfield_required {
    color: var(--color-accent, #5a564d);
    /* Using accent instead of red/warning for a more muted look */
    margin-left: 4px;
    font-size: 0.8125rem;
    font-weight: 400;
    font-style: italic;
}

.gform_wrapper .gfield_description {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.75rem;
    color: var(--color-accent, #5a564d);
    margin-top: 8px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Input Fields */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea {
    width: 100%;
    border-radius: 2px !important;
    /* Sharp, editorial corners */
    border: 1px solid var(--color-rule, #c9c3b3) !important;
    background-color: var(--color-paper-2, #ebe7dd) !important;
    color: var(--color-ink, #14130f) !important;
    padding: 0 1rem !important;
    height: 48px !important;
    font-family: var(--font-sans, "Inter Tight", sans-serif);
    font-size: 1rem !important;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    box-shadow: none !important;
}

/* Hide default browser spin buttons for number inputs */
.gform_wrapper input[type="number"]::-webkit-inner-spin-button,
.gform_wrapper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.gform_wrapper input[type="number"] {
    -moz-appearance: textfield !important;
}

/* Read-only & Disabled States */
.gform_wrapper input[readonly],
.gform_wrapper textarea[readonly],
.gform_wrapper input[disabled],
.gform_wrapper select[disabled],
.gform_wrapper textarea[disabled] {
    background-color: var(--color-paper, #f5f3ee) !important; /* Lighter background */
    border-color: var(--color-rule, #c9c3b3) !important;
    color: var(--color-accent, #5a564d) !important; /* Muted text */
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    box-shadow: none !important;
}

.gform_wrapper input[readonly]:focus,
.gform_wrapper textarea[readonly]:focus {
    border-color: var(--color-rule, #c9c3b3) !important;
    box-shadow: none !important;
}

/* Custom Select Fields (Matching Custom Choice Filter) */
.gform_wrapper select {
    width: 100%;
    border-radius: 2px !important;
    border: 1px solid var(--color-rule, #c9c3b3) !important;
    background-color: var(--color-paper-2, #ebe7dd) !important;
    color: var(--color-ink, #14130f) !important;
    padding: 0 32px 0 12px !important;
    min-height: 48px !important;
    height: 48px !important;
    line-height: 46px !important;
    font-family: var(--font-sans, "Inter Tight", sans-serif);
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
    box-sizing: border-box;
    box-shadow: none !important;

    /* Native Appearance Override */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Custom Chevron SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2823' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
}

.gform_wrapper select:hover {
    background-color: var(--color-paper-2, #ebe7dd) !important;
    border-color: var(--color-ink-light, #2a2823) !important;
}

.gform_wrapper textarea {
    min-height: 120px;
    resize: vertical;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
    outline: none !important;
    border-color: var(--color-ink, #14130f) !important;
    background-color: var(--color-paper, #f5f3ee) !important;
    box-shadow: 0 0 0 1px var(--color-ink, #14130f) !important;
}

.gform_wrapper select:focus {
    outline: none !important;
    border-color: var(--color-ink, #14130f) !important;
    background-color: var(--color-paper, #f5f3ee) !important;
    box-shadow: none !important;
}

/* Password Toggle & Strength Indicator */
.gform_wrapper .password_input_container input[type="password"] {
    padding-right: 48px !important;
}

.gform_wrapper .gform_show_password {
    background: transparent !important;
    border: none !important;
    padding: 0 12px !important;
    color: var(--color-accent, #5a564d) !important;
    min-width: unset !important;
    box-shadow: none !important;
}

.gform_wrapper .gfield_password_strength {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px;
    margin-top: 8px;
    border-radius: 2px;
    border: 1px solid var(--color-rule, #c9c3b3);
    color: var(--color-ink, #14130f);
    background-color: var(--color-paper-2, #ebe7dd);
    position: relative;
    z-index: 1;
}

/* Remove default Gravity Forms progress bar pseudo-elements to fix text overlap */
.gform_wrapper .gfield_password_strength::before,
.gform_wrapper .gfield_password_strength::after {
    display: none !important;
    background: none !important;
}

.gform_wrapper .gfield_password_strength.strong {
    background-color: #d1fae5;
    border-color: #059669;
    color: #065f46;
}

.gform_wrapper .gfield_password_strength.good {
    background-color: #fef3c7;
    border-color: #d97706;
    color: #92400e;
}

.gform_wrapper .gfield_password_strength.short,
.gform_wrapper .gfield_password_strength.mismatch,
.gform_wrapper .gfield_password_strength.bad {
    background-color: #fee2e2;
    border-color: #dc2626;
    color: #991b1b;
}

/* Tom Select Dropdowns (Overrides native select fields in Gravity Forms) */
.gform_wrapper .ts-wrapper .ts-control {
    width: 100%;
    border-radius: 2px !important;
    border: 1px solid var(--color-rule, #c9c3b3) !important;
    background-color: var(--color-paper-2, #ebe7dd) !important;
    background-image: none !important; /* Remove any theme default icons */
    color: var(--color-ink, #14130f) !important;
    padding: 0 1rem !important;
    font-family: var(--font-sans, "Inter Tight", sans-serif);
    font-size: 1rem !important;
    height: 48px !important;
    min-height: 48px !important;
    box-shadow: none !important;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 40px !important; /* Space for icon */
}

/* Hide any existing Tom Select theme arrows */
.gform_wrapper .ts-wrapper::after {
    display: none !important;
}

/* Custom Dropdown Icon for Tom Select */
.gform_wrapper .ts-wrapper .ts-control::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2823' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Animation for active state */
.gform_wrapper .ts-wrapper.dropdown-active .ts-control::after {
    transform: translateY(-50%) rotate(180deg);
}

.gform_wrapper .ts-wrapper.focus .ts-control {
    outline: none !important;
    border-color: var(--color-ink, #14130f) !important;
    background-color: var(--color-paper, #f5f3ee) !important;
    box-shadow: 0 0 0 1px var(--color-ink, #14130f) !important;
}

.gform_wrapper .ts-wrapper.single .ts-control>.item {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    background: transparent !important;
    border: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    color: var(--color-ink, #14130f) !important;
}

.gform_wrapper .ts-wrapper .ts-control>input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    flex-grow: 1 !important;
    line-height: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    outline: none !important;
    border-radius: 0 !important;
}

.gform_wrapper .ts-wrapper .ts-control>input::placeholder {
    color: var(--color-accent, #5a564d) !important;
    opacity: 0.7 !important;
}

.gform_wrapper .ts-wrapper .ts-dropdown {
    border-radius: 2px !important;
    border: 1px solid var(--color-rule, #c9c3b3) !important;
    box-shadow: 0 4px 12px rgba(20, 19, 15, 0.05) !important;
    background-color: var(--color-paper, #f5f3ee) !important;
    margin-top: 4px !important;
    font-size: 1rem !important;
    z-index: 1000 !important;
    overflow: hidden;
}

.gform_wrapper .ts-wrapper .ts-dropdown .option {
    padding: 10px 16px !important;
    color: var(--color-ink, #14130f) !important;
    cursor: pointer !important;
    transition: background-color 0.1s, color 0.1s;
}

.gform_wrapper .ts-wrapper .ts-dropdown .option:hover,
.gform_wrapper .ts-wrapper .ts-dropdown .active {
    background-color: var(--color-paper-3, #e0dacb) !important;
    color: var(--color-ink, #14130f) !important;
}

/* Checkboxes & Radios */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.gform_wrapper .gchoice {
    display: flex;
    align-items: center;
}

.gform_wrapper .gfield-choice-input {
    accent-color: var(--color-ink, #14130f);
    width: 18px;
    height: 18px;
    margin-top: 0;
    cursor: pointer;
}

.gform_wrapper .gform-field-label--type-inline {
    margin-left: 10px !important;
    margin-bottom: 0 !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    cursor: pointer;
}

/* Complex Fields (like Address and Password grids) */
.gform_wrapper .ginput_complex span {
    display: block;
}

.gform_wrapper .gform-field-label--type-sub {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.6875rem !important;
    /* 11px */
    color: var(--color-accent, #5a564d);
    font-weight: 400 !important;
    margin-top: 4px !important;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* File Upload Drop Area */
.gform_wrapper .gform_fileupload_multifile .gpfup__droparea {
    border: 1px dashed var(--color-rule, #c9c3b3);
    background-color: transparent;
    border-radius: 2px;
    padding: 32px;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-accent, #5a564d);
}

.gform_wrapper .gform_fileupload_multifile .gpfup__droparea:hover {
    border-color: var(--color-ink, #14130f);
    background-color: var(--color-paper-2, #ebe7dd);
}

.gform_wrapper .gform_button_select_files {
    background-color: transparent;
    border: 1px solid var(--color-ink, #14130f);
    color: var(--color-ink, #14130f);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    /* Pill button styling for CTAs */
    font-family: var(--font-sans, "Inter Tight", sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    margin-top: 8px;
}

.gform_wrapper .gform_button_select_files:hover {
    background-color: var(--color-ink, #14130f);
    color: var(--color-paper, #f5f3ee);
}

.gform_wrapper .gform_fileupload_rules {
    display: block;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.6875rem;
    color: var(--color-accent, #5a564d);
    margin-top: 8px;
    text-transform: uppercase;
}

/* Uploaded Files Preview (.ginput_preview) */
.gform_wrapper .ginput_preview {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px;
    background-color: var(--color-paper-2, #ebe7dd);
    border: 1px solid var(--color-rule, #c9c3b3);
    border-radius: 2px;
    margin-top: 12px;
    gap: 12px;
}

.gform_wrapper .ginput_preview>a:first-child {
    flex-grow: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-ink, #14130f);
    text-decoration: none;
    word-break: break-all;
}

.gform_wrapper .ginput_preview>a:first-child:hover {
    text-decoration: underline;
}

.gform_wrapper .ginput_preview_control.gform-icon--circle-delete {
    color: var(--color-ink, #14130f);
    /* Minimalist delete icon */
    background-color: transparent;
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.gform_wrapper .ginput_preview_control.gform-icon--circle-delete:hover {
    background-color: rgba(20, 19, 15, 0.1);
}

/* Pagination / Footer Buttons */
.gform_wrapper .gform_page_footer,
.gform_wrapper .gform_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-rule, #c9c3b3);
}

.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px !important;
    border-radius: 100px !important;
    /* Pill shaped buttons */
    font-family: var(--font-sans, "Inter Tight", sans-serif);
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    white-space: nowrap;
    text-decoration: none !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Primary buttons (Next, Submit) */
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button {
    background-color: var(--color-ink, #14130f) !important;
    color: var(--color-paper, #f5f3ee) !important;
    border: 1px solid var(--color-ink, #14130f) !important;
    margin-left: auto;
}

.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_button:hover {
    /* Behavior now handled in buttons.css (lift + shadow) */
}

/* Secondary Buttons (Previous) */
.gform_wrapper .gform_previous_button {
    background-color: transparent !important;
    color: var(--color-ink, #14130f) !important;
    border: 1px solid var(--color-ink, #14130f) !important;
}

.gform_wrapper .gform_previous_button:hover {
    background-color: var(--color-paper-2, #ebe7dd) !important;
}

/* Progress Bar */
.gform_wrapper .gf_progressbar_wrapper {
    margin-bottom: 2rem;
}

.gform_wrapper .gf_progressbar_title {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent, #5a564d);
    margin-bottom: 8px;
}

.gform_wrapper .gf_progressbar {
    background-color: var(--color-rule, #c9c3b3) !important;
    border-radius: 100px !important;
    height: 4px;
    /* Thin, elegant progress bar */
    overflow: hidden;
    position: relative;
    border: none !important;
}

.gform_wrapper .gf_progressbar_percentage span {
    display: none !important;
    /* Hide percentage text for a cleaner look */
}

.gform_wrapper .gf_progressbar_percentage {
    background-color: var(--color-ink, #14130f) !important;
    height: 100%;
    border-radius: 100px !important;
    transition: width 0.3s ease;
}

/* Validation Errors */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error .ts-control {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

.gform_wrapper .gfield_validation_message {
    color: #991b1b;
    font-family: var(--font-sans, "Inter Tight", sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 8px;
    background-color: #fee2e2;
    padding: 10px 16px;
    border-radius: 2px;
    border-left: 3px solid #dc2626;
    display: block;
}

/* Global Form Error Message (Top of Form) */
.gform_wrapper .gform_validation_errors {
    margin-top: 1.5rem !important;
    /* Space from the top accordion border */
    margin-bottom: 2rem !important;
    /* Ensure breathing room below the error box */
    background-color: #fef2f2;
    border: 1px solid #dc2626;
    border-radius: 2px;
    padding: 1rem 1.5rem;
}

.gform_wrapper .gform_validation_errors>h2 {
    color: #991b1b;
    font-family: var(--font-sans, "Inter Tight", sans-serif);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

/* Rich Text Editor (TinyMCE) Styling */
.gform_wrapper .wp-editor-container {
    border: 1px solid var(--color-rule, #c9c3b3) !important;
    border-radius: 2px !important;
    background-color: var(--color-paper-2, #ebe7dd) !important;
    overflow: hidden;
}

.gform_wrapper .mce-panel {
    border: none !important;
    background-color: transparent !important;
}

.gform_wrapper .mce-toolbar-grp {
    background-color: var(--color-paper, #f5f3ee) !important;
    border-bottom: 1px solid var(--color-rule, #c9c3b3) !important;
}

.gform_wrapper .mce-edit-area {
    background-color: var(--color-paper-2, #ebe7dd) !important;
    border-top: none !important;
}

.gform_wrapper .mce-statusbar {
    background-color: var(--color-paper, #f5f3ee) !important;
    border-top: 1px solid var(--color-rule, #c9c3b3) !important;
}

.gform_wrapper .mce-btn {
    background-color: transparent !important;
    border: none !important;
    color: var(--color-ink, #14130f) !important;
}

.gform_wrapper .mce-btn:hover {
    background-color: var(--color-paper-2, #ebe7dd) !important;
    color: var(--color-ink, #14130f) !important;
}

.gform_wrapper .mce-btn i {
    color: var(--color-ink, #14130f) !important;
}

/* File Upload Styling */
.gform_wrapper .gform_drop_area {
    background-color: var(--color-paper-2, #ebe7dd) !important;
    border: 1px dashed var(--color-rule, #c9c3b3) !important;
    border-radius: 2px !important;
    padding: 2rem 1rem !important;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.gform_wrapper .gform_drop_area:hover {
    background-color: var(--color-paper, #f5f3ee) !important;
    border-color: var(--color-ink-light, #2a2823) !important;
}

.gform_wrapper .gform_drop_instructions {
    font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
    font-size: 1rem !important;
    color: var(--color-ink, #14130f) !important;
    display: block;
}

.gform_wrapper .gform_button_select_files {
    background-color: var(--color-ink, #14130f) !important;
    color: var(--color-paper, #f5f3ee) !important;
    border: none !important;
    border-radius: 2px !important;
    padding: 10px 20px !important;
    font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.gform_wrapper .gform_button_select_files:hover {
    background-color: var(--color-ink-light, #2a2823) !important;
}

.gform_wrapper .gform_fileupload_rules {
    display: block;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-size: 0.75rem !important;
    color: var(--color-accent, #5a564d) !important;
    margin-top: 12px !important;
    text-align: center;
    text-transform: uppercase;
}

/* File Upload Preview Item */
.gform_wrapper .ginput_preview {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    background-color: var(--color-paper, #f5f3ee) !important;
    border: 1px solid var(--color-rule, #c9c3b3) !important;
    border-radius: 2px !important;
    margin-top: 12px !important;
    text-align: left !important;
}

.gform_wrapper .gfield_fileupload_filename {
    font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
    font-size: 14px !important;
    color: var(--color-ink, #14130f) !important;
    font-weight: 500 !important;
    display: inline-block !important;
}

.gform_wrapper .gfield_fileupload_filesize {
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-size: 11px !important;
    color: var(--color-accent, #5a564d) !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.gform_wrapper .gfield_fileupload_progress {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.gform_wrapper .gfield_fileupload_progressbar {
    display: none !important;
}

.gform_wrapper .gfield_fileupload_percent {
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-size: 11px !important;
    color: #059669 !important;
}

.gform_wrapper .gform_delete_file {
    background: transparent !important;
    border: none !important;
    color: var(--color-accent, #5a564d) !important;
    cursor: pointer !important;
    padding: 8px !important;
    margin: 0 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}

.gform_wrapper .gform_delete_file:hover {
    color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.1) !important;
}

/* =========================================================================
   Gravity Forms Datepicker Styling (jQuery UI)
   ========================================================================= */

/* Main Container */
#ui-datepicker-div {
    display: none; /* Hidden by default; jQuery UI overrides with inline display:block when open */
    background-color: var(--color-paper, #f5f3ee) !important;
    border: 1px solid var(--color-rule, #c9c3b3) !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 24px rgba(20, 19, 15, 0.1) !important;
    padding: 16px !important;
    z-index: 9999 !important;
    font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
    margin-top: 4px !important;
}

/* Header (Month/Year Navigation) */
#ui-datepicker-div .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    min-height: 40px !important;
}

#ui-datepicker-div .ui-datepicker-title {
    order: 2 !important;
    font-family: var(--font-serif, "Newsreader", serif) !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: var(--color-ink, #14130f) !important;
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    padding-top: 2px !important;
}

/* Hide static month/year text if selects are present */
#ui-datepicker-div .ui-datepicker-title span {
    display: none !important;
}

/* If ONLY spans exist (and no selects), Gravity Forms usually doesn't have both, 
   but we ensure selects have priority */
#ui-datepicker-div .ui-datepicker-title select {
    display: inline-block !important;
}

/* Dropdowns in title */
#ui-datepicker-div .ui-datepicker-title select {
    background: transparent !important;
    border: none !important;
    padding: 2px 14px 2px 6px !important; /* Tighter padding */
    font-size: 1.1rem !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    color: var(--color-ink, #14130f) !important;
    height: auto !important;
    min-height: unset !important;
    width: auto !important;
    max-width: fit-content !important;
    flex: 0 1 auto !important; /* Don't grow */
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%2314130f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 2px center !important;
}

#ui-datepicker-div .ui-datepicker-title select:hover {
    background-color: var(--color-paper-2, #ebe7dd) !important;
    border-radius: 2px !important;
}

/* Navigation Arrows */
#ui-datepicker-div .ui-datepicker-prev {
    order: 1 !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background-color 0.2s !important;
    position: static !important;
    background: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    margin: 6px 0 0 0 !important; /* Nudge down */
}

#ui-datepicker-div .ui-datepicker-next {
    order: 3 !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background-color 0.2s !important;
    position: static !important;
    background: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    margin: 6px 0 0 0 !important; /* Nudge down */
}

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
    background-color: var(--color-paper-2, #ebe7dd) !important;
}

#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span,
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon {
    display: none !important;
    visibility: hidden !important;
}

/* Custom Arrows */
#ui-datepicker-div .ui-datepicker-prev::after,
#ui-datepicker-div .ui-datepicker-next::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-ink, #14130f);
    border-left: 2px solid var(--color-ink, #14130f);
    text-indent: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
}

#ui-datepicker-div .ui-datepicker-prev::after {
    transform: translate(-35%, -50%) rotate(-45deg) !important;
}

#ui-datepicker-div .ui-datepicker-next::after {
    transform: translate(-65%, -50%) rotate(135deg) !important;
}

/* Calendar Table */
#ui-datepicker-div .ui-datepicker-calendar {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    margin: 0 !important;
}

/* Days of Week Headers */
#ui-datepicker-div .ui-datepicker-calendar th {
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-accent, #5a564d) !important;
    padding: 8px 0 !important;
    text-align: center !important;
}

/* Individual Days */
#ui-datepicker-div .ui-datepicker-calendar td {
    padding: 0 !important;
    text-align: center !important;
}

#ui-datepicker-div .ui-datepicker-calendar .ui-state-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 auto !important;
    border: none !important;
    background: transparent !important;
    color: var(--color-ink, #14130f) !important;
    font-size: 0.9rem !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

/* Hover State */
#ui-datepicker-div .ui-datepicker-calendar .ui-state-default:hover {
    background-color: var(--color-paper-2, #ebe7dd) !important;
    color: var(--color-ink, #14130f) !important;
}

/* Today */
#ui-datepicker-div .ui-datepicker-calendar .ui-state-highlight {
    color: var(--color-rust, #a45a3f) !important;
    font-weight: 700 !important;
}

/* Selected Date */
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active {
    background-color: var(--color-ink, #14130f) !important;
    color: var(--color-paper, #f5f3ee) !important;
    font-weight: 600 !important;
}

/* Other Month Days */
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-other-month .ui-state-default {
    color: var(--color-rule, #c9c3b3) !important;
    opacity: 0.6 !important;
}

/* =========================================================================
   Custom Read-Only Field Class (.gf_readonly)
   ========================================================================= */

/* Prevent all mouse interactions (clicks, hover, focusing) */
.gform_wrapper .gf_readonly {
    pointer-events: none !important;
}

/* Apply the disabled styling from the design system */
.gform_wrapper .gf_readonly input,
.gform_wrapper .gf_readonly textarea,
.gform_wrapper .gf_readonly select,
.gform_wrapper .gf_readonly .ts-wrapper {
    background-color: var(--color-paper, #f5f3ee) !important;
    border-color: var(--color-rule, #c9c3b3) !important;
    color: var(--color-accent, #5a564d) !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    box-shadow: none !important;
}