/*  ===== CODE MODIFICATION =====
 *  File name    : commons/css/survey-v2.css (web root /var/www/html)
 *  Dev name     : Denish Faldu
 *  Date         : 2026-10-26
 *  Section      : whole file (new)
 *  Purpose      : Improve functionality (UI redesign - Health Survey page)
 *  Current      : survey/index.php used inline styles (heading margin, white text on white for the disclaimer,
 *                 yellow Reset button) and Bootstrap 3 columns on the old 'stand' layout.
 *  Modification : Survey card, question grid (tap-friendly check rows), disclaimer box and buttons for stand_v2
 *                 in the client theme (site-theme.css variables), mobile first.
 *  Related code : app/views/survey/index.php, SurveyController::onConstruct (setLayout stand_v2)
 *  ============================= */

.ci-survey {
    padding: 1.5rem 0 3rem;
    color: var(--ci-text);
}
.ci-survey .ci-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--ci-white);
    border: 1px solid var(--ci-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(45, 64, 95, .08);
    padding: 2rem 2rem 1.75rem;
}
.ci-survey .ci-eyebrow {
    display: inline-block;
    margin: 0 0 .6rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--ci-primary-soft);
    color: var(--ci-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ci-survey h1 {
    font-family: var(--ci-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ci-heading);
    margin: 0 0 .35rem;
}
.ci-survey .ci-intro { color: var(--ci-muted); margin: 0 0 1.5rem; }
.ci-survey h2 {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ci-muted);
    margin: 0 0 .75rem;
}
.ci-survey .ci-section { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }

/* ---------- Questions ---------- */
.ci-survey .survey-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}
.ci-survey .survey-item label {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0;
    padding: .7rem .85rem;
    border: 1px solid var(--ci-border);
    border-radius: 10px;
    background: var(--ci-white);
    cursor: pointer;
    line-height: 1.4;
    transition: var(--ci-transition);
}
.ci-survey .survey-item label:hover { border-color: var(--ci-primary); background: var(--ci-primary-soft); }
.ci-survey .survey-item input {
    flex: none;
    width: 18px;
    height: 18px;
    min-width: 0;
    margin: .1rem 0 0;
    accent-color: var(--ci-primary);
}
.ci-survey .survey-item label:has(input:checked) { border-color: var(--ci-primary); background: var(--ci-primary-soft); }

/* ---------- Disclaimer ---------- */
.ci-survey .ci-disclaimer {
    background: #f8fafc;
    border: 1px solid var(--ci-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin: 0 0 .9rem;
    color: var(--ci-text);
    font-size: .95rem;
}
.ci-survey .ci-disclaimer p { margin: 0 0 .4rem; }
.ci-survey .ci-disclaimer p:last-child { margin: 0; }
.ci-survey .ci-agree { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; font-weight: 600; cursor: pointer; }
.ci-survey .ci-agree input { width: 18px; height: 18px; min-width: 0; margin: 0; accent-color: var(--ci-primary); }

/* ---------- Buttons ---------- */
.ci-survey .ci-actions { display: flex; flex-direction: column-reverse; gap: .75rem; }
.ci-survey .ci-submit,
.ci-survey .ci-reset {
    width: 100%;
    height: 50px;
    border-radius: var(--ci-radius-pill);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ci-transition);
}
.ci-survey .ci-submit { border: 0; background: var(--ci-cta-gradient); color: var(--ci-white); box-shadow: 0 6px 16px rgba(255, 16, 95, .22); }
.ci-survey .ci-submit:hover { background: var(--ci-cta-gradient-hover); }
.ci-survey .ci-reset { border: 1px solid var(--ci-border); background: var(--ci-white); color: var(--ci-heading); }
.ci-survey .ci-reset:hover,
.ci-survey .ci-reset:focus { border-color: var(--ci-primary); color: var(--ci-primary); }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 600px) {
    .ci-survey .survey-container { grid-template-columns: 1fr 1fr; }
    .ci-survey .ci-actions { flex-direction: row; }
    .ci-survey .ci-submit { flex: 2; width: auto; }
    .ci-survey .ci-reset { flex: 1; width: auto; }
}
@media (max-width: 599.98px) {
    .ci-survey { padding: 1rem 0 2rem; }
    .ci-survey .ci-card { padding: 1.4rem 1.1rem 1.25rem; border-radius: 14px; }
    .ci-survey h1 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .ci-survey * { transition: none !important; } }