/**
 * Reverie Sounds Public Forms Stylesheet
 * Clean, modern form design for artist and track submission pages
 *
 * @package ReverieAdmin
 * @since 1.0.0
 */

:root {
    --rsa-primary: #7c3aed;
    --rsa-primary-light: #a78bfa;
    --rsa-primary-dark: #6d28d9;
    --rsa-accent: #06b6d4;
    --rsa-success: #10b981;
    --rsa-warning: #f59e0b;
    --rsa-danger: #ef4444;
    --rsa-bg-light: #f9fafb;
    --rsa-border: #e5e7eb;
    --rsa-text: #111827;
    --rsa-text-muted: #6b7280;
}

/* ============================================
   Page Background
   ============================================ */
body.page .rsa-form-container {
    background: white;
}

/* ============================================
   Form Container
   ============================================ */
.rsa-form-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--rsa-text);
    line-height: 1.5;
}

.rsa-form-container *,
.rsa-form-container *::before,
.rsa-form-container *::after {
    box-sizing: border-box;
}

/* ============================================
   Form Header
   ============================================ */
.rsa-form-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rsa-border);
}

.rsa-form-container h1,
.rsa-form-container h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--rsa-text);
}

.rsa-branding {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--rsa-primary);
    font-weight: 600;
    margin: 0;
}

.rsa-form-container .subtitle {
    font-size: 16px;
    color: var(--rsa-text-muted);
    margin-bottom: 32px;
    line-height: 1.5;
}

/* ============================================
   Form Messages (Success/Error)
   ============================================ */
.rsa-message {
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.rsa-message--success {
    background-color: #d1fae5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.rsa-message--error {
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* Legacy notice classes */
.rsa-notice {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.5;
}

.rsa-notice.success { background-color: #d1fae5; border: 1px solid #a7f3d0; color: #065f46; }
.rsa-notice.error { background-color: #fee2e2; border: 1px solid #fecaca; color: #7f1d1d; }
.rsa-notice.warning { background-color: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }
.rsa-notice.info { background-color: #dbeafe; border: 1px solid #bfdbfe; color: #1e40af; }

/* ============================================
   Fieldsets & Legends (Form Sections)
   ============================================ */
.rsa-form-container fieldset {
    border: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.rsa-form-container fieldset:last-of-type {
    margin-bottom: 24px;
}

.rsa-form-container legend {
    font-size: 16px;
    font-weight: 600;
    color: var(--rsa-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rsa-primary-light);
    width: 100%;
    display: block;
}

/* Section dividers using fieldset */
.rsa-form-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rsa-border);
}

.rsa-form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.rsa-form-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--rsa-text);
}

/* ============================================
   Form Groups
   ============================================ */
.rsa-form-group {
    margin-bottom: 20px;
}

.rsa-form-group:last-child {
    margin-bottom: 0;
}

/* ============================================
   Form Rows (Side-by-side fields)
   ============================================ */
.rsa-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.rsa-form-row .rsa-form-group {
    margin-bottom: 0;
}

.rsa-form-group--half {
    flex: 1;
    min-width: 0;
}

/* ============================================
   Labels
   ============================================ */
.rsa-form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--rsa-text);
    font-size: 14px;
}

.rsa-required {
    color: var(--rsa-danger);
    margin-left: 2px;
    font-weight: 400;
}

/* Legacy .required class */
.rsa-form-group label .required {
    color: var(--rsa-danger);
    margin-left: 2px;
}

/* ============================================
   Input Fields — Class-based selectors
   (.rsa-input, .rsa-select, .rsa-textarea)
   ============================================ */
.rsa-input,
.rsa-select,
.rsa-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--rsa-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background-color: white;
    color: var(--rsa-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.rsa-input:focus,
.rsa-select:focus,
.rsa-textarea:focus {
    outline: none;
    border-color: var(--rsa-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.rsa-input:disabled,
.rsa-select:disabled,
.rsa-textarea:disabled {
    background-color: #f3f4f6;
    color: var(--rsa-text-muted);
    cursor: not-allowed;
}

.rsa-textarea {
    resize: vertical;
    min-height: 100px;
}

.rsa-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Fallback: type-based selectors for inputs without .rsa-input class */
.rsa-form-group input[type="text"],
.rsa-form-group input[type="email"],
.rsa-form-group input[type="number"],
.rsa-form-group input[type="date"],
.rsa-form-group input[type="time"],
.rsa-form-group input[type="url"],
.rsa-form-group input[type="tel"],
.rsa-form-group select,
.rsa-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--rsa-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background-color: white;
    color: var(--rsa-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.rsa-form-group input[type="text"]:focus,
.rsa-form-group input[type="email"]:focus,
.rsa-form-group input[type="number"]:focus,
.rsa-form-group input[type="date"]:focus,
.rsa-form-group input[type="time"]:focus,
.rsa-form-group input[type="url"]:focus,
.rsa-form-group input[type="tel"]:focus,
.rsa-form-group select:focus,
.rsa-form-group textarea:focus {
    outline: none;
    border-color: var(--rsa-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.rsa-form-group input:disabled,
.rsa-form-group select:disabled,
.rsa-form-group textarea:disabled {
    background-color: #f3f4f6;
    color: var(--rsa-text-muted);
    cursor: not-allowed;
}

.rsa-form-group input.rsa-field-disabled {
    background-color: #f3f4f6;
    color: var(--rsa-text-muted);
    cursor: not-allowed;
}

.rsa-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.rsa-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ============================================
   Help Text & Small
   ============================================ */
.rsa-form-group .help-text,
.rsa-form-group small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--rsa-text-muted);
    line-height: 1.4;
}

/* ============================================
   Checkboxes and Radios
   ============================================ */
.rsa-form-group input[type="checkbox"],
.rsa-form-group input[type="radio"] {
    margin-right: 8px;
    cursor: pointer;
    width: auto;
}

.rsa-checkbox-group,
.rsa-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rsa-checkbox-group label,
.rsa-radio-group label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

/* ============================================
   Additional Artists Group
   ============================================ */
.rsa-artist-group {
    margin-top: 20px;
    padding: 20px;
    background-color: var(--rsa-bg-light);
    border-radius: 8px;
    border: 1px solid var(--rsa-border);
}

.rsa-artist-group h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--rsa-text);
    margin: 0 0 16px 0;
}

#rsa-additional-artists h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--rsa-text);
    margin: 16px 0 8px 0;
}

/* ============================================
   Field Error States
   ============================================ */
.rsa-form-group.error input,
.rsa-form-group.error select,
.rsa-form-group.error textarea {
    border-color: var(--rsa-danger);
}

.rsa-form-group .error-message {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--rsa-danger);
    font-weight: 500;
}

/* ============================================
   Buttons
   ============================================ */
.rsa-button,
.rsa-button--primary,
.rsa-form-container .button,
.rsa-form-container button[type="submit"] {
    display: inline-block;
    padding: 12px 28px;
    background-color: var(--rsa-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: inherit;
    text-align: center;
    width: 100%;
}

.rsa-button:hover,
.rsa-button--primary:hover,
.rsa-form-container .button:hover,
.rsa-form-container button[type="submit"]:hover {
    background-color: var(--rsa-primary-dark);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.rsa-button:active,
.rsa-button--primary:active,
.rsa-form-container .button:active,
.rsa-form-container button[type="submit"]:active {
    transform: scale(0.98);
}

.rsa-form-container button[type="submit"]:disabled,
.rsa-button:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

.rsa-button--secondary,
.rsa-form-container .button-secondary {
    background-color: white;
    color: var(--rsa-primary);
    border: 1px solid var(--rsa-border);
}

.rsa-button--secondary:hover,
.rsa-form-container .button-secondary:hover {
    background-color: var(--rsa-bg-light);
    border-color: var(--rsa-primary);
    box-shadow: none;
}

/* Button Group */
.rsa-button-group {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.rsa-button-group .button {
    flex: 1;
    text-align: center;
}

/* ============================================
   Loading State
   ============================================ */
.rsa-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: rsa-spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes rsa-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Success Screen
   ============================================ */
.rsa-success-screen {
    text-align: center;
    padding: 40px 20px;
}

.rsa-success-screen .icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.rsa-success-screen h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--rsa-success);
}

.rsa-success-screen p {
    font-size: 14px;
    color: var(--rsa-text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .rsa-form-container {
        margin: 20px;
        padding: 24px;
    }

    .rsa-form-container h1,
    .rsa-form-container h2 {
        font-size: 24px;
    }

    .rsa-form-section {
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    .rsa-form-row {
        flex-direction: column;
        gap: 0;
    }

    .rsa-form-row .rsa-form-group {
        margin-bottom: 20px;
    }

    .rsa-form-group--half {
        flex: none;
        width: 100%;
    }

    .rsa-button-group {
        flex-direction: column;
    }

    .rsa-button-group .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .rsa-form-container {
        margin: 0;
        padding: 20px;
        border-radius: 0;
        box-shadow: none;
    }

    .rsa-form-container h1,
    .rsa-form-container h2 {
        font-size: 20px;
    }

    .rsa-form-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    .rsa-input,
    .rsa-select,
    .rsa-textarea,
    .rsa-form-group input[type="text"],
    .rsa-form-group input[type="email"],
    .rsa-form-group input[type="number"],
    .rsa-form-group input[type="date"],
    .rsa-form-group input[type="time"],
    .rsa-form-group input[type="url"],
    .rsa-form-group input[type="tel"],
    .rsa-form-group select,
    .rsa-form-group textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 12px;
    }

    .rsa-button,
    .rsa-button--primary,
    .rsa-form-container .button,
    .rsa-form-container button[type="submit"] {
        width: 100%;
        padding: 14px 16px;
    }
}

/* ============================================
   Searchable Select Component
   Used for Copyright Society & Genre dropdowns
   ============================================ */
.rsa-searchable-select {
    position: relative;
}

.rsa-ss-input-wrap {
    position: relative;
}

.rsa-ss-search {
    padding-right: 36px !important;
    cursor: text;
}

.rsa-ss-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--rsa-text-muted);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.rsa-searchable-select.is-open .rsa-ss-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.rsa-ss-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--rsa-border);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: none;
}

.rsa-ss-dropdown.is-open {
    display: block;
}

.rsa-ss-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--rsa-text);
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.rsa-ss-option:last-child {
    border-bottom: none;
}

.rsa-ss-option:hover,
.rsa-ss-option.is-highlighted {
    background-color: #f3f0ff;
}

.rsa-ss-option.is-other {
    font-style: italic;
    color: var(--rsa-text-muted);
    border-top: 2px solid var(--rsa-border);
}

.rsa-ss-empty {
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--rsa-text-muted);
}

.rsa-ss-other-wrap {
    margin-top: 8px;
}

.rsa-ss-other-wrap input {
    animation: rsa-ss-fade-in 0.2s ease;
}

@keyframes rsa-ss-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar styling for dropdown */
.rsa-ss-dropdown::-webkit-scrollbar {
    width: 6px;
}

.rsa-ss-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.rsa-ss-dropdown::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

.rsa-ss-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

/* ============================================
   Toast Popup Notifications
   ============================================ */
.rsa-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 420px;
}

.rsa-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.rsa-toast--success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.rsa-toast--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.rsa-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.rsa-toast-text {
    flex: 1;
    line-height: 1.4;
}

.rsa-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    padding: 0;
    line-height: 1;
}

.rsa-toast-close:hover {
    opacity: 1;
}

/* ============================================
   Section Hints (descriptive text below legend)
   ============================================ */
.rsa-section-hint {
    font-size: 13px;
    color: var(--rsa-text-muted);
    margin: -12px 0 20px 0;
    line-height: 1.5;
}

/* ============================================
   Field Hints (below labels)
   ============================================ */
.rsa-field-hint {
    display: block;
    font-size: 12px;
    color: var(--rsa-text-muted);
    margin-top: 4px;
    line-height: 1.4;
    font-style: italic;
}

/* ============================================
   Mix Blocks (grouped mix fields)
   ============================================ */
.rsa-mix-block {
    background: var(--rsa-bg-light);
    border: 1px solid var(--rsa-border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.rsa-mix-block:last-child {
    margin-bottom: 0;
}

.rsa-mix-block-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--rsa-text);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rsa-tag-optional {
    font-size: 11px;
    font-weight: 500;
    color: var(--rsa-text-muted);
    background: #e5e7eb;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   File Upload Component
   ============================================ */
.rsa-file-upload-wrap {
    position: relative;
}

.rsa-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.rsa-file-upload-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    border: 2px dashed var(--rsa-border);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    text-align: center;
    gap: 4px;
}

.rsa-file-upload-display:hover {
    border-color: var(--rsa-primary-light);
    background: #faf5ff;
}

.rsa-file-upload-display.is-dragover {
    border-color: var(--rsa-primary);
    background: #f3e8ff;
}

.rsa-file-upload-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 4px;
}

.rsa-file-upload-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--rsa-text);
}

.rsa-file-upload-hint {
    font-size: 12px;
    color: var(--rsa-text-muted);
    margin: 0;
}

.rsa-file-upload-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: 14px;
    color: #065f46;
}

.rsa-file-name {
    flex: 1;
    font-weight: 500;
    word-break: break-all;
}

.rsa-file-remove {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #991b1b;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.rsa-file-remove:hover {
    opacity: 1;
}

.rsa-file-existing {
    margin-top: 8px;
    font-size: 13px;
    color: #065f46;
    font-weight: 500;
}

@media (max-width: 480px) {
    .rsa-mix-block {
        padding: 16px;
    }

    .rsa-file-upload-display {
        padding: 20px 12px;
    }
}