/* ========================================================================
   REGMOTHIC ILLUSTRATED AESTHETIC - STYLE.CSS
   ======================================================================== */

body {
    background: linear-gradient(135deg, #bfe3f8 0%, #e2f3fe 100%);
    color: #3b2f2f;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.portal-card {
    background: #fdfbf7;
    border: 3px solid #8b5a2b;
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 700px;
    box-shadow: 0 12px 35px rgba(59, 47, 47, 0.15);
    box-sizing: border-box;
    text-align: center;
}

.portal-view { opacity: 1; transition: opacity 0.3s ease; }
.hidden { display: none !important; }

.view-header h1 { 
    color: #4a3525; 
    font-size: 28px; 
    margin-bottom: 10px; 
    font-family: Georgia, serif;
}
.view-header p { 
    color: #6b5344; 
    font-size: 16px; 
    margin-bottom: 25px; 
}

.portal-form { display: flex; flex-direction: column; gap: 15px; text-align: left; }
.form-group label { font-weight: 600; font-size: 14px; color: #4a3525; }
input, select { 
    width: 100%; padding: 12px; border: 2px solid #d4c5b9; 
    border-radius: 10px; font-size: 15px; box-sizing: border-box; 
    background: #fff;
    color: #3b2f2f;
}
input:focus { border-color: #8b5a2b; outline: none; }

/* Checkbox Alignment - Fixed using CSS Grid to lock to top line */
.checkbox-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    margin-bottom: 10px;
    color: #4a3525;
    font-size: 14px;
}

.checkbox-row input[type="checkbox"] {
    margin-top: 2px;
}

/* Code of Conduct Box */
.coc-terminal-box {
    width: 100%;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #4a3525;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    overflow-y: visible;
    text-align: left;
    box-shadow: none !important;
    margin-bottom: 15px;
}

/* Thank You Text Contrast */
.thankyou-body-content p {
    color: #4a3525 !important;
    font-size: 16px;
    line-height: 1.6;
}

.prime-button {
    width: 100%; padding: 14px; background: #8b5a2b;
    color: #fdfbf7; border: none; border-radius: 10px;
    font-weight: bold; cursor: pointer;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(139, 90, 43, 0.3);
    transition: background 0.2s ease;
}
.prime-button:hover { background: #6f4520; }

.api-feedback-alert {
    margin-top: 15px; padding: 12px;
    background: #fde8e8; border: 1px solid #e06d6d;
    color: #9c2c2c; border-radius: 8px; font-size: 13px;
}