@property --hue {
    syntax: "<number>";
    inherits: false;
    initial-value: 245;
}

:root {
    --hue: 245;
    /* animation: hue-rotate 120s infinite ease; */
}

@keyframes hue-rotate {
    0% {
        --hue: 245;
    }

    100% {
        --hue: 525;
    }
}

:root {
    --blueprint-bg: oklch(99% 0.02 var(--hue));
    --blueprint-grid: oklch(94% 0.04 var(--hue));
    --blueprint-text: oklch(30% 0.05 var(--hue));
    --blueprint-text-light: oklch(99% 0.05 var(--hue));
    --blueprint-accent: oklch(50% 0.15 var(--hue));
    --blueprint-accent-alt: oklch(95% 0.05 var(--hue));
    --blueprint-highlight: oklch(70% 0.2 var(--hue));
}

/* Reset basic form container styles */
.editor.editor--live {
    padding: 0 !important;
    min-height: auto !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Main field container */
.LiveField {
    margin: 0 auto !important;
    width: var(--content-width) !important;
    max-width: 100% !important;
    background-color: transparent !important;
    position: relative !important;
    text-align: left !important;
    box-shadow: none !important;
    cursor: default !important;
    border-radius: 0 !important;
    transform: none !important;
}

/* Field container padding */
.LiveField .LiveField__container {
    padding: 0 !important;
    margin-bottom: 1rem !important;
}

/* Field headers/labels */
.LiveField__header {
    min-width: 0 !important;
    font-family: 'Bitter', monospace !important;
    font-size: 0.8rem !important;
    color: var(--blueprint-text) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 0.5rem !important;
}

/* Input styling with high specificity */
.LiveField__input:not(.LiveField__input--manualfocus),
.LiveField--active .LiveField__input:not(.LiveField__input--manualfocus),
.LiveField__input--manualfocus:focus,
textarea.LiveField__input[rows],
.LiveField__input,
.LiveField--active textarea.LiveField__input[rows="1"],
.LiveField__input--manualfocus:not(:focus) {
    width: 100% !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    background: var(--blueprint-bg) !important;
    border: 1px solid var(--blueprint-accent) !important;
    border-radius: 4px !important;
    color: var(--blueprint-text) !important;
    font-family: 'Open Sans', sans-serif !important;
    min-height: auto !important;
    resize: vertical !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Textarea specific overrides */
textarea.LiveField__input[rows],
textarea.LiveField__input {
    min-height: 120px !important;
    height: auto !important;
    overflow: auto !important;
    overflow-wrap: break-word !important;
    resize: vertical !important;
    padding: 1rem !important;
    border: 1px solid var(--blueprint-accent) !important;
    background: var(--blueprint-bg) !important;
}

/* Select/Dropdown styling */
.Select-control {
    background: var(--blueprint-bg) !important;
    border: 1px solid var(--blueprint-accent) !important;
    border-radius: 4px !important;
    min-height: auto !important;
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
}

.Select.LiveField__input {
    border: none !important;
    padding: 0 !important;
}

.Select-placeholder,
.Select-value {
    color: rgba(227, 242, 253, 0.6) !important;
    padding: 0 !important;
    font-family: 'Open Sans', sans-serif !important;
}

.Select-menu-outer {
    background: var(--blueprint-bg) !important;
    border: 1px solid var(--blueprint-accent) !important;
    border-radius: 4px !important;
    margin-top: 4px !important;
}

.Select-option {
    padding: 1rem !important;
    color: var(--blueprint-text) !important;
    font-family: 'Open Sans', sans-serif !important;
}

.Select-option:hover {
    background: var(--blueprint-accent) !important;
}

/* Hide error messages by default */
.LiveField__error {
    display: none !important;
}

/* Submit button */
.submit {
    position: relative !important;
    z-index: 1 !important;
}

.submit .btn-raised.btn-primary {
    width: auto !important;
    background: var(--blueprint-accent) !important;
    color: var(--blueprint-text) !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: 4px !important;
    font-family: 'Bitter', monospace !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.submit .btn-raised.btn-primary:hover {
    background: var(--blueprint-highlight) !important;
}

/* Override any Paperform error display */
.LiveField--error .LiveField__error,
.LiveField--submiterror .LiveField__error {
    display: none !important;
}

/* Override focus and hover states */
.LiveField--active .LiveField__input:not(.LiveField__input--manualfocus),
.LiveField__input--manualfocus:focus,
textarea.LiveField__input[rows]:focus,
textarea.LiveField__input[rows]:hover {
    border: 1px solid var(--blueprint-accent) !important;
    background: var(--blueprint-bg) !important;
    box-shadow: none !important;
}



/* Select/Dropdown styling */
.Select-control {
    background: var(--blueprint-bg) !important;
    border: 1px solid var(--blueprint-accent) !important;
    border-radius: 4px !important;
    min-height: auto !important;
    padding: 0 !important; /* Remove padding from control */
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    position: relative !important;
    height: 3.5rem !important; /* Fixed height to prevent shifting */
}

.Select.LiveField__input {
    border: none !important;
    padding: 0 !important;
}

/* Selected value styling */
.Select-value {
    padding: 0 1rem !important;
    color: var(--blueprint-text) !important;
    font-family: 'Open Sans', sans-serif !important;
    position: relative !important; /* Changed from absolute */
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    flex: 1 !important;
}

.Select-value-label {
    color: var(--blueprint-text) !important;
}

/* Placeholder styling */
.Select-placeholder {
    color: rgba(227, 242, 253, 0.6) !important;
    padding: 0 1rem !important;
    font-family: 'Open Sans', sans-serif !important;
    position: relative !important; /* Changed from absolute */
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    flex: 1 !important;
}

/* Arrow styling */
.Select-arrow-zone {
    padding: 0 1rem !important;
    color: var(--blueprint-text) !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.Select-arrow {
    border-color: var(--blueprint-text) transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 5px 2.5px !important;
    display: inline-block !important;
    height: 0 !important;
    width: 0 !important;
}

/* Multi-value wrapper fixes */
.Select-multi-value-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    height: 100% !important;
}

/* Input field styling */
.Select-input {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    opacity: 0 !important;
}

.Select-input > input {
    opacity: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

/* Menu styling */
.Select-menu-outer {
    margin-top: 4px !important;
    margin-left: -1REM;
    border: 1px solid var(--blueprint-accent) !important;
    border-radius: 4px !important;
    background: var(--blueprint-bg) !important;
    box-shadow: 0 0 15px var(--blueprint-grid) !important;
}

.Select-option {
    padding: 1rem !important;
    color: var(--blueprint-text) !important;
    font-family: 'Open Sans', sans-serif !important;
    background: var(--blueprint-bg) !important;
    cursor: pointer !important;
}

.Select-option.is-focused,
.Select-option:hover {
    background: var(--blueprint-accent) !important;
    color: var(--blueprint-text) !important;
}