/**
 * Frontend Styles
 *
 * @package ParishActsOfJoy
 */

.joy-form-container {
        max-width: 600px;
        margin: 2rem auto;
        padding: 2rem;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.joy-honeypot {
        position: absolute !important;
        left: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
}

.joy-message {
        padding: 1rem;
        margin-bottom: 1.5rem;
        border-radius: 4px;
        text-align: center;
}

.joy-message-success {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
}

.joy-message-error {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
}

.joy-form-messages {
        margin-bottom: 1rem;
}

.joy-form-field {
        margin-bottom: 1.5rem;
}

.joy-form-field label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #333;
}

.joy-required {
        color: #dc3545;
}

.joy-optional {
        font-weight: 400;
        color: #6c757d;
        font-size: 0.9em;
}

.joy-input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 1rem;
        transition: border-color 0.15s ease-in-out;
}

.joy-input:focus {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.joy-form-actions {
        margin-top: 2rem;
        text-align: center;
}

.joy-submit-button {
        background: #007bff;
        color: #fff;
        border: none;
        padding: 0.75rem 2rem;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.15s ease-in-out;
}

.joy-submit-button:hover {
        background: #0056b3;
}

.joy-submit-button:disabled {
        background: #6c757d;
        cursor: not-allowed;
}

.joy-meter {
        max-width: 500px;
        margin: 2rem auto;
        padding: 1.5rem;
        text-align: center;
}

.joy-meter-text {
        margin-top: 1rem;
        font-size: 1.2rem;
        color: #333;
}

.joy-meter-count {
        color: #007bff;
        font-size: 1.5em;
}

.joy-thermometer {
        position: relative;
        width: 100%;
        height: 40px;
        background: #e9ecef;
        border-radius: 20px;
        overflow: hidden;
        border: 2px solid #dee2e6;
}

.joy-thermometer-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
        transition: width 0.5s ease;
        border-radius: 20px;
}

.joy-candle {
        position: relative;
        width: 100px;
        height: 200px;
        margin: 0 auto 1rem;
}

.joy-candle-body {
        position: relative;
        width: 100%;
        height: 180px;
        background: #f8f9fa;
        border: 2px solid #dee2e6;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
}

.joy-candle-wax {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(180deg, #ffc107 0%, #fd7e14 100%);
        transition: height 0.5s ease;
}

.joy-candle-flame {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 30px;
        background: radial-gradient(ellipse at center, #fff 0%, #ffc107 20%, #fd7e14 60%, transparent 80%);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        animation: flicker 1.5s ease-in-out infinite;
}

@keyframes flicker {
        0%, 100% {
                transform: translateX(-50%) scale(1);
                opacity: 1;
        }
        50% {
                transform: translateX(-50%) scale(0.95);
                opacity: 0.85;
        }
}

.joy-sign {
        margin: 0 auto 1rem;
        max-width: 100%;
        text-align: center;
}

.joy-sign-image {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
}

.joy-sign-image:hover {
        transform: scale(1.02);
}

.joy-form-notice,
.joy-wall-notice {
        padding: 1.5rem;
        margin: 2rem auto;
        max-width: 600px;
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 4px;
        text-align: center;
        color: #856404;
}

@media (max-width: 768px) {
        .joy-form-container {
                padding: 1rem;
                margin: 1rem;
        }
        
        .joy-meter {
                padding: 1rem;
        }
}