/* ================================================================
 * public-forms.css
 * Shared styles for public-facing form pages (voiceform &
 * corruptionform). Provides the full visual design for single-page
 * complaint/feedback submission forms shown to end users.
 *
 * Theme tokens are defined here with blue defaults.
 * Override them per-page with a small inline <style> block that
 * reassigns the --theme-* custom properties.
 * ================================================================ */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    /* ── Base tokens ── */
    --primary-dark:  #2D3A7B;
    --primary-blue:  #4A6CF7;
    --bg-main:       #F4F5FA;
    --bg-card:       #FFFFFF;
    --text-dark:     #1E293B;
    --text-muted:    #64748B;
    --gradient-blue: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-teal: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); /* Available as an alternate page theme */
    --shadow-soft:   0 10px 40px rgba(0, 0, 0, 0.08);
    --radius-lg:     24px;
    --radius-md:     16px;
    --radius-sm:     12px;

    /* ── Theme tokens (blue defaults — override per page via inline <style>) ── */
    --theme-accent:              #4A6CF7;
    --theme-gradient:            linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --theme-divider:             linear-gradient(90deg, #667eea, #764ba2); /* Horizontal gradient for <hr>-style dividers */
    --theme-info-bg:             linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 100%);
    --theme-focus-shadow:        0 0 0 4px rgba(74, 108, 247, 0.1);
    --theme-info-hover-shadow:   0 4px 12px rgba(74, 108, 247, 0.15);
    --theme-captcha-hover-shadow:0 4px 16px rgba(74, 108, 247, 0.1);
    --theme-btn-shadow:          0 8px 20px rgba(74, 108, 247, 0.3);   /* Resting elevation shadow */
    --theme-btn-shadow-hover:    0 12px 28px rgba(74, 108, 247, 0.4);  /* Lifted elevation on hover */
    --theme-consent-shadow:      0 8px 24px rgba(74, 108, 247, 0.15);
}

/* ===== GLOBAL RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== BASE BODY ===== */
body {
    font-family: 'Sarabun', 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-main);
    color: var(--text-dark);
    line-height: 1.6;
}

/* ===== PAGE HEADER ===== */
.page-header {
    max-width: 900px;
    margin: 2.5rem auto 0;
    padding: 0 1.5rem 1.5rem;
}
.page-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 0.35rem;
    letter-spacing: -0.3px;
}
.page-header p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

/* ===== FORM CONTAINER & CARD ===== */
.form-container {
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.form-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    animation: slideUp 0.5s ease-out; /* Entrance animation on page load */
}
/* Card entrance — slides up from 30px below its final position */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== FORM SECTIONS ===== */
.form-section { padding: 2.5rem 3rem; }

.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}
.section-header-icon {
    width: 36px;
    height: 36px;
    background: var(--theme-gradient); /* Uses the per-page theme gradient */
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}
.section-header h5 {
    color: var(--primary-dark);
    font-weight: 600;
    margin: 0;
    font-size: 1.15rem;
}

/* ===== FORM CONTROLS ===== */
.form-label {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}
.form-control,
.form-select {
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    background: var(--bg-card);
    transition: all 0.3s ease;
    font-size: 0.95rem;
}
.form-control:hover,
.form-select:hover { border-color: #c7cad1; }

.form-control:focus,
.form-select:focus {
    border-color: var(--theme-accent);
    box-shadow: var(--theme-focus-shadow); /* Themed focus ring from --theme-focus-shadow */
    background: white;
    outline: none;
    transform: translateY(-1px); /* Slight lift to reinforce active state */
}
textarea.form-control { resize: vertical; min-height: 120px; }

/* ===== PLACEHOLDER ===== */
.form-control::placeholder { color: #b0b7c3; font-style: italic; opacity: 1; }
.form-select option[value=""] { color: #b0b7c3; }

/* ===== FIELD ENTRANCE ANIMATIONS ===== */
/* Stagger-compatible: each .mb-3 / .mb-4 fades in from below */
.mb-3, .mb-4 { animation: fadeIn 0.6s ease-out backwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== SECTION DIVIDER ===== */
/* Full-width colored bar that visually separates form sections */
.section-divider { height: 2px; background: var(--theme-divider); margin: 0; }

/* ===== BOTTOM SECTION ===== */
/* Lightly tinted background to distinguish submission area from main form */
.bottom-section { padding: 2.5rem 3rem; background: #fafbfc; }

/* ===== INFO NOTICE ===== */
.info-notice {
    background: var(--theme-info-bg);
    border-left: 4px solid var(--theme-accent); /* Left accent stripe using theme color */
    padding: 1.2rem 1.5rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.75rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
/* Slide notice to the right slightly on hover to draw attention */
.info-notice:hover {
    box-shadow: var(--theme-info-hover-shadow);
    transform: translateX(5px);
}

/* ===== CAPTCHA BOX ===== */
.captcha-box {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 1.75rem;
    margin-bottom: 1.75rem;
    text-align: center;
    transition: all 0.3s ease;
}
.captcha-box:hover {
    border-color: var(--theme-accent);
    box-shadow: var(--theme-captcha-hover-shadow);
}
.captcha-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.75rem;
    background: #f8f9fa;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
}
.captcha-checkbox:hover { background: #e9ecef; transform: scale(1.02); }
.captcha-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--theme-accent); /* Native checkbox color via CSS accent-color */
}

/* ===== CONSENT BOX ===== */
.consent-box {
    background: white;
    border: 2px solid var(--theme-accent); /* Prominent themed border to draw attention to consent */
    border-radius: var(--radius-md);
    padding: 1.75rem;
    margin-bottom: 1.75rem;
    transition: all 0.3s ease;
}
.consent-box:hover { box-shadow: var(--theme-consent-shadow); }
.form-check-input { width: 1.25rem; height: 1.25rem; cursor: pointer; }
.form-check-input:checked {
    background-color: var(--theme-accent);
    border-color: var(--theme-accent);
}
.form-check-label { cursor: pointer; }

/* ===== SUBMIT BUTTON ===== */
.btn-submit {
    background: var(--theme-gradient); /* Full gradient background matching section header icons */
    color: white;
    padding: 1rem 4rem;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--theme-btn-shadow);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Springy easing for the lift effect */
    cursor: pointer;
}
.btn-submit:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: var(--theme-btn-shadow-hover);
}
.btn-submit:active:not(:disabled) { transform: translateY(-1px); }
/* !important prevents any JS-added transform from re-enabling movement when disabled */
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ===== MISC HELPERS ===== */
#charCounter { font-size: 0.85rem; margin-top: 0.5rem; }
small.text-muted { display: block; margin-top: 0.4rem; font-size: 0.85rem; }

/* ===== VALIDATION STATES ===== */
/* !important overrides Bootstrap's default .form-control validation styles */
.form-control.is-valid,
.form-control.is-valid:focus {
    border-color: #198754 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important; /* Inline SVG checkmark icon */
    background-repeat: no-repeat !important;
    background-position: right calc(.375em + .1875rem) center !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
    padding-right: calc(1.5em + 0.75rem) !important; /* Extra right padding so text doesn't overlap the icon */
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.15) !important;
}
.form-control.is-invalid,
.form-control.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15) !important;
}

/* ===== RESPONSIVE — MOBILE (≤768px) ===== */
@media (max-width: 768px) {
    .form-section, .bottom-section { padding: 1.75rem 1.5rem; }
    .btn-submit { padding: 0.9rem 2.5rem; font-size: 1rem; }
    .form-container { margin-top: 1.5rem; }
}