/*
 * Sweepstakes Plugin — public styles.
 *
 * Every hardcoded color/font value has been replaced by a CSS custom property
 * that defaults to the original Promo Primicia brand values. The active
 * sweepstakes can override any of them via `events.config.theme`, emitted by
 * `sweepstakes-plugin.php` through `wp_add_inline_style()` on :root.
 */

:root {
    --sws-primary:           #355222;
    --sws-primary-hover:     #2a4019;
    --sws-button-text:       #ffffff;
    --sws-label:             #355222;
    --sws-bg:                #f9f9f9;
    --sws-input-bg:          #f9f9f9;
    --sws-input-bg-focus:    #ffffff;
    --sws-border:            #ccc;
    --sws-error-bg:          #ffebe6;
    --sws-success-bg:        #e6ffeb;
    --sws-text:              #333;
    --sws-overlay-bg:        rgba(0, 0, 0, 0.5);
    --sws-radius:            4px;
    --sws-radius-lg:         8px;
    --sws-font-heading:      inherit;
    --sws-font-body:         inherit;
    --sws-font-size-base:    16px;
}

/* Form Container */

form#sweepstakes-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--sws-label);
    font-family: var(--sws-font-body);
}

form#sweepstakes-form input[type="text"],
form#sweepstakes-form input[type="email"],
form#sweepstakes-form input[type="tel"],
form#sweepstakes-form input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--sws-border);
    border-radius: var(--sws-radius);
    font-size: var(--sws-font-size-base);
    background-color: var(--sws-input-bg);
    transition: border-color 0.3s ease;
    font-family: var(--sws-font-body);
}

form#sweepstakes-form input[type="text"]:focus,
form#sweepstakes-form input[type="email"]:focus,
form#sweepstakes-form input[type="tel"]:focus,
form#sweepstakes-form input[type="file"]:focus {
    border-color: var(--sws-primary);
    outline: none;
    background-color: var(--sws-input-bg-focus);
}

form#sweepstakes-form button[type="button"],
form#sweepstakes-form button[type="submit"] {
    width: 100%;
    padding: 12px 0;
    background-color: var(--sws-primary);
    border: none;
    color: var(--sws-button-text);
    font-size: var(--sws-font-size-base);
    font-weight: bold;
    border-radius: var(--sws-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: var(--sws-font-body);
}

form#sweepstakes-form button[type="button"]:hover,
form#sweepstakes-form button[type="submit"]:hover {
    background-color: var(--sws-primary-hover);
}

form#sweepstakes-form input[type="file"] {
    padding: 4px;
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--sws-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Error and Success Messages */
form#sweepstakes-form .message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: var(--sws-radius);
    font-size: 14px;
}

form#sweepstakes-form .error {
    background-color: var(--sws-error-bg);
    color: var(--sws-primary);
}

form#sweepstakes-form .success {
    background-color: var(--sws-success-bg);
    color: var(--sws-primary);
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sws-overlay-bg);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-container {
    background: white;
    padding: 20px;
    border-radius: var(--sws-radius-lg);
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.loading-container p {
    margin-top: 10px;
    font-size: var(--sws-font-size-base);
    font-weight: bold;
    color: var(--sws-text);
    font-family: var(--sws-font-body);
}

/* Coupon check */
.coupon-check-container {
    max-width: 400px;
    margin: 20px auto;
    text-align: center;
}

.coupon-check-container h3 {
    color: var(--sws-primary);
    font-weight: 900;
    font-family: var(--sws-font-heading);
}

.coupon-check-container label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--sws-label);
    font-family: var(--sws-font-body);
}

.coupon-check-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--sws-border);
    border-radius: var(--sws-radius);
    font-size: var(--sws-font-size-base);
    font-family: var(--sws-font-body);
}

input#check-id-number {
    padding: 10px;
    margin-bottom: 20px;
}

.coupon-check-container button {
    width: 100%;
    padding: 12px 0;
    background-color: var(--sws-primary);
    border: none;
    color: var(--sws-button-text);
    font-size: var(--sws-font-size-base);
    font-weight: bold;
    border-radius: var(--sws-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: var(--sws-font-body);
}

.coupon-check-container button:hover {
    background-color: var(--sws-primary-hover);
}

#coupon-result {
    font-size: 18px;
    margin-top: 15px;
    font-family: var(--sws-font-body);
}

.delete-submission {
    background-color: var(--sws-primary);
    color: var(--sws-button-text);
    border: none;
    padding: 5px 10px;
    border-radius: var(--sws-radius);
    cursor: pointer;
    transition: background-color 0.3s;
}

.delete-submission:hover {
    background-color: var(--sws-primary-hover);
}