/*
 * FjordPuls: Forms & Interactive Elements
 * File: fjordpuls2.css
 * Description: Styles for forms, inputs, buttons, modals, and other
 * interactive UI components.
 */

/* -----------------------------------------
 * FORM ELEMENTS
 * ----------------------------------------- */

.form-input {
    width: 100%;
    padding: 0.85rem 1rem; /* 14px 16px */
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: #F3F4F6; /* A slightly darker gray for inputs */
    border: 2px solid transparent;
    border-radius: var(--border-radius-md);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.8;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(70, 194, 203, 0.3); /* Accent color glow */
}

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

/* Form Status Messages */
#form-status {
    font-size: 0.875rem;
    font-weight: 500;
}

#form-status.success {
    color: #16A34A; /* Green-700 */
}

#form-status.error {
    color: #DC2626; /* Red-600 */
}

#form-status.loading::after {
    content: ' .';
    animation: dots 1.4s infinite;
}

@keyframes dots {
    0%, 20% { content: ' .'; }
    40% { content: ' ..'; }
    60% { content: ' ...'; }
}

/* -----------------------------------------
 * MODAL STYLES (AGE VERIFICATION)
 * ----------------------------------------- */

#age-verification-modal {
    display: flex; /* Using flex instead of JS for initial state */
    animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#age-verification-modal .modal-content {
    animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Hide modal when class is added */
#age-verification-modal.hidden {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUp {
    from { transform: scale(0.95); opacity: 0.5; }
    to { transform: scale(1); opacity: 1; }
}


/* -----------------------------------------
 * COOKIE CONSENT BANNER
 * ----------------------------------------- */

#cookie-consent-banner {
    /* Initially hidden via inline style, displayed by JS */
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#cookie-consent-banner.visible {
    transform: translateY(0);
}

#cookie-consent-banner a {
    color: var(--color-accent);
    font-weight: 500;
    text-decoration: underline;
}

#cookie-consent-banner a:hover {
    color: var(--color-surface);
}

#accept-cookies {
    background-color: var(--color-accent);
    color: var(--color-text-inverted);
    border: none;
    transition: background-color 0.2s;
}
#accept-cookies:hover {
    background-color: #3ab4bd; /* Slightly darker accent */
}

#decline-cookies {
    background-color: #4B5563; /* Gray-600 */
    color: var(--color-text-inverted);
    border: none;
    transition: background-color 0.2s;
}
#decline-cookies:hover {
     background-color: #374151; /* Gray-700 */
}