/* ==========================================================================
   GLP-1 3-Week Follow-Up Form — Styles
   Extends the base style.css of the main step form.
   ========================================================================== */

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.cmsf-fu-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Inline severity options (side by side) ─────────────────────────────── */
.cmsf-options--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cmsf-options--inline .cmsf-opt {
    flex: 1 1 calc(25% - 8px);
    min-width: 90px;
    text-align: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.cmsf-options--inline .cmsf-opt.is-checked {
    border-color: #2ecc71;
    background: #f0fdf4;
}

.cmsf-options--inline .cmsf-opt .cmsf-mark--radio {
    display: none; /* hide radio circle for inline layout */
}

/* ── File Upload Area ───────────────────────────────────────────────────── */
.cmsf-file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: #fafafa;
    margin-top: 8px;
}

.cmsf-file-upload-area:hover {
    border-color: #2ecc71;
    background: #f0fdf4;
}

.cmsf-file-upload-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 8px;
}

.cmsf-file-upload-area p {
    margin: 4px 0;
    color: #555;
    font-size: 14px;
}

/* ── Sample Photo Card (Step 9) ─────────────────────────────────────────── */
.cmsf-sample-photo-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color .2s, background .2s;
}

.cmsf-sample-photo-card:hover,
.cmsf-sample-photo-card:focus-visible {
    border-color: #282d5f;
    background: #f0f1f8;
}

.cmsf-sample-photo-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
    flex-shrink: 0;
}

.cmsf-sample-photo-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmsf-sample-photo-label {
    font-size: 14px;
    font-weight: 600;
    color: #282d5f;
}

.cmsf-sample-photo-hint {
    font-size: 12px;
    color: #777;
}

/* ── Sample Photo Lightbox ──────────────────────────────────────────────── */
.cmsf-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.cmsf-lightbox.visible {
    display: flex;
}

.cmsf-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 34, .78);
}

.cmsf-lightbox-content {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    text-align: center;
}

/* Scrolling is scoped to this inner wrapper (not .cmsf-lightbox-content
   itself) so the close button can float outside the corner without being
   clipped by an overflow:auto ancestor. */
.cmsf-lightbox-scroll {
    max-height: calc(90vh - 32px);
    overflow-y: auto;
}

.cmsf-lightbox-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.cmsf-lightbox-caption {
    margin: 12px 4px 2px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

.cmsf-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #282d5f;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.cmsf-lightbox-close:hover {
    background: #1c1f47;
}

/* ── Result / Recommendation Card ──────────────────────────────────────── */
#cmsfFuResultCard {
    padding: 32px;
}

#cmsfFuResultCard .cmsf-section-tag {
    background: #22c55e;
    color: #fff;
}

/* ── Stop Screen ────────────────────────────────────────────────────────── */
#cmsfFuStopScreen {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    padding: 32px 24px;
    max-width: 700px;
    margin: 20px auto;
}

#cmsfFuStopScreen h3 {
    color: #be123c;
    margin-top: 0;
}

#cmsfFuStopScreen ul {
    margin: 12px 0 0 20px;
    padding: 0;
    color: #555;
}

#cmsfFuStopScreen ul li {
    margin-bottom: 6px;
    line-height: 1.5;
}

/* Override ineligible screen for refer_gp (orange) */
#cmsfFuStopScreen.cmsf-fu-refer {
    background: #fff7ed;
    border-color: #fdba74;
}

#cmsfFuStopScreen.cmsf-fu-refer h3 {
    color: #c2410c;
}

/* ── Progress bar adjustments ───────────────────────────────────────────── */
.cmsf-fu-wrapper .cmsf-progress-outer {
    display: block;
}

/* ── "Request link" screen typography ──────────────────────────────────── */
.cmsf-fu-wrapper #cmsfFuRequestLink .cmsf-field {
    margin-top: 20px;
}

.cmsf-fu-wrapper #cmsfFuRequestLink #cmsfFuRequestBtn {
    margin-top: 20px;
    width: 100%;
    max-width: 320px;
}

/* ── Submitting screen ──────────────────────────────────────────────────── */
.cmsf-fu-wrapper .cmsf-submitting.visible {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

/* ── Step card visibility ───────────────────────────────────────────────── */
.cmsf-fu-wrapper .cmsf-card.visible {
    display: block;
}

/* ── Recommendation card ────────────────────────────────────────────────── */
#fu-product-options {
    margin-top: 16px;
}

/* Product card / separator styling is shared with the main form via the
   .product-options class in style.css (both forms' containers carry it). */

/* ── Admin badge helpers ─────────────────────────────────────────────────
   (Inline styles are used in PHP; these just set font for summary element)
   ──────────────────────────────────────────────────────────────────────── */
details > summary {
    list-style: none;
    outline: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details[open] > summary::before {
    content: '▼ ';
}

details:not([open]) > summary::before {
    content: '▶ ';
}

/* ── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .cmsf-options--inline .cmsf-opt {
        flex: 1 1 calc(50% - 8px);
    }
}