/*
 * ===================================================================
 * Stylesheet for the Secure Certificate Download Flow (v1.1 Optimized)
 * ===================================================================
 * This file contains all the CSS for styling the forms.
 * Place this file in your child theme's root directory.
 */


/* Main container for the entire form area. */
#secure-flow-container {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    position: relative; /* Establishes a stacking context */
    z-index: 2;         /* Ensures form appears above background elements */
}

/* Styles for each of the form boxes (email, OTP, download). */
.tc-form-box {
    background: #ffffff; /* Use !important only if necessary to override theme styles */
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    text-align: center;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
}

/* --- General element styling within the forms --- */
.tc-form-box h3 { color: #111827; margin-top: 0; margin-bottom: 0.5rem; font-size: 1.75rem; font-weight: 700; }
.tc-form-box p { color: #4b5563; margin-top: 0; margin-bottom: 1.5rem; }
.tc-form-box .form-row { margin-bottom: 1rem; text-align: left; }
.tc-form-box label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #374151; }
.tc-form-box input { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; box-sizing: border-box; }
.tc-form-box input:focus { border-color: #123b7b; box-shadow: 0 0 0 3px rgba(18, 59, 123, 0.2); outline: none; }
.tc-form-box button { width: 100%; padding: 0.9rem; background-color: #123b7b; color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.tc-form-box button:hover { background-color: #0f2f63; }
.tc-form-box button:disabled { background-color: #9ca3af; cursor: not-allowed; }

/* --- Styles for the live input validation feedback --- */
.tc-form-box input.invalid {
    border-color: #991b1b;
    animation: shake 0.5s;
}

/* The shake animation for invalid input. */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* --- Styles for the main success/error message box below the forms --- */
#tc-message {
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    display: none; /* Hidden by default, JS will show it */
}

/* OPTIMIZATION: display:block is now part of each state's rule. */
#tc-message.success { display: block; background-color: #d1fae5; color: #065f46; }
#tc-message.error   { display: block; background-color: #fee2e2; color: #991b1b; }
#tc-message.debug   { display: block; background-color: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

#tc-resend-container { margin-top: 1rem; color: #6b7280; font-size: 0.9rem; }

/* --- Styles for mobile devices to ensure responsiveness --- */
/* --- Styles for mobile devices to ensure responsiveness --- */
@media (max-width: 520px) {
    #secure-flow-container {
        padding: 2rem 0; /* More vertical padding, NO horizontal padding */
        } 
    .tc-form-box {
        padding: 2rem 1.5rem;
        width: 90%; /* Make the form take up 90% of the screen width */
        }
    .tc-form-box h3 {
        font-size: 1.5rem;
        }
    .tc-form-box button {
        padding: 0.9rem 0.5rem;
        font-size: 0.9rem;
}
}