/* ══════════════════════════════════════════
   AMMPI Quiz — Frontend Styles
   All elements use box-sizing: border-box
   Text overflow fixed at every level
══════════════════════════════════════════ */

.ammpi-quiz-wrap,
.ammpi-quiz-wrap *,
.ammpi-quiz-wrap *::before,
.ammpi-quiz-wrap *::after {
    box-sizing: border-box;
}

.ammpi-quiz-wrap {
    max-width: 740px;
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    font-family: var(--ammpi-body-font, 'Sarabun', sans-serif);
    color: var(--ammpi-text, #1a2e28);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ── EMAIL GATE ── */
.ammpi-email-gate {
    background: var(--ammpi-primary, #2d473f);
    border-radius: 20px;
    padding: 48px 36px;
    text-align: center;
}
.ammpi-gate-title {
    font-family: var(--ammpi-heading-font, 'Playfair Display', serif);
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    font-weight: 500;
    color: var(--ammpi-bg, #fdfae1);
    line-height: 1.25;
    margin: 0 0 12px;
}
.ammpi-gate-sub {
    font-size: .98rem;
    font-weight: 300;
    color: rgba(253,250,225,.72);
    line-height: 1.75;
    margin: 0 0 16px;
}
.ammpi-gate-label {
    font-size: .93rem;
    color: rgba(253,250,225,.75);
    margin: 0 0 22px;
}
.ammpi-email-form {
    display: flex;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.ammpi-email-form input[type="email"] {
    flex: 1 1 180px;
    min-width: 0;
    background: rgba(253,250,225,.08);
    border: 1.5px solid rgba(253,250,225,.22);
    border-radius: 50px;
    padding: 12px 20px;
    font-size: .97rem;
    color: var(--ammpi-bg, #fdfae1);
    outline: none;
    transition: border-color .3s;
}
.ammpi-email-form input[type="email"]::placeholder { color: rgba(253,250,225,.35); }
.ammpi-email-form input[type="email"]:focus { border-color: var(--ammpi-accent, #dda25d); }

/* ── BUTTONS ── */
.ammpi-btn-primary {
    background: var(--ammpi-accent, #dda25d);
    color: var(--ammpi-primary, #2d473f);
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    transition: transform .25s, box-shadow .25s;
}
.ammpi-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(221,162,93,.35); }

.ammpi-btn-outline {
    background: transparent;
    border: 2px solid var(--ammpi-primary, #2d473f);
    border-radius: 50px;
    padding: 10px 20px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ammpi-primary, #2d473f);
    cursor: pointer;
    transition: all .25s;
}
.ammpi-btn-outline:hover { background: var(--ammpi-primary, #2d473f); color: var(--ammpi-bg, #fdfae1); }

/* ── PROGRESS ── */
.ammpi-progress-wrap { margin-bottom: 20px; }
.ammpi-progress-top  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ammpi-progress-label { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ammpi-primary, #2d473f); }
.ammpi-progress-count { font-family: var(--ammpi-heading-font, 'Playfair Display', serif); font-style: italic; font-size: .97rem; color: var(--ammpi-text, #1a2e28); }
.ammpi-progress-bg    { width: 100%; height: 5px; background: rgba(45,71,63,.1); border-radius: 10px; overflow: hidden; }
.ammpi-progress-fill  { height: 100%; background: var(--ammpi-accent, #dda25d); border-radius: 10px; transition: width .5s ease; width: 0; }

/* ── QUESTION CARD ── */
.ammpi-question-card {
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px;
    box-shadow: 0 4px 28px rgba(45,71,63,.09);
    width: 100%;
    /* KEY: prevent any child from breaking out */
    overflow: hidden;
    min-width: 0;
}

.ammpi-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ammpi-primary, #2d473f);
    color: var(--ammpi-bg, #fdfae1);
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
    max-width: 100%;
    overflow: hidden;
}
.ammpi-cat-letter { font-family: var(--ammpi-heading-font, 'Playfair Display', serif); font-size: 1rem; font-style: italic; font-weight: 700; color: var(--ammpi-accent, #dda25d); flex-shrink: 0; }
.ammpi-cat-name   { font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ammpi-q-number { font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: #c8c8c8; margin-bottom: 8px; }

.ammpi-q-text {
    font-family: var(--ammpi-heading-font, 'Playfair Display', serif);
    font-size: clamp(.97rem, 2.2vw, 1.3rem);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ammpi-primary, #2d473f);
    margin-bottom: 22px;
    /* Ensure long text wraps */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ── OPTIONS — this is where overflow was happening ── */
.ammpi-options-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 26px;
    width: 100%;
    /* Prevent children from overflowing */
    overflow: hidden;
    min-width: 0;
}

.ammpi-option-btn {
    /* Reset button defaults */
    appearance: none;
    -webkit-appearance: none;

    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 2px solid rgba(45,71,63,.12);
    border-radius: 11px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: border-color .22s, background .22s;

    /* CRITICAL overflow fixes */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.ammpi-option-btn:hover    { border-color: var(--ammpi-accent, #dda25d); background: rgba(221,162,93,.05); }
.ammpi-option-btn.ammpi-selected { border-color: var(--ammpi-primary, #2d473f); background: rgba(45,71,63,.05); }

.ammpi-opt-indicator {
    width: 17px;
    height: 17px;
    min-width: 17px;  /* CRITICAL — prevents shrinking */
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(45,71,63,.22);
    margin-top: 3px;
    transition: all .22s;
}
.ammpi-option-btn.ammpi-selected .ammpi-opt-indicator {
    background: var(--ammpi-primary, #2d473f);
    border-color: var(--ammpi-primary, #2d473f);
    box-shadow: inset 0 0 0 3px #fff;
}

.ammpi-opt-text {
    /* Takes remaining space, MUST have min-width:0 in flex */
    flex: 1 1 auto;
    min-width: 0;

    font-size: .9rem;
    font-weight: 400;
    line-height: 1.6;
    color: #3a4a44;

    /* Force text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: left;

    /* Prevent text from pushing layout */
    overflow: hidden;
}

.ammpi-opt-pts {
    flex-shrink: 0;      /* Never shrink */
    padding-left: 8px;
    font-family: var(--ammpi-heading-font, 'Playfair Display', serif);
    font-style: italic;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ammpi-accent, #dda25d);
    white-space: nowrap;
    align-self: center;
}

/* ── NAVIGATION ── */
.ammpi-q-nav    { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ammpi-btn-back { background: transparent; border: 2px solid rgba(45,71,63,.12); border-radius: 50px; padding: 10px 20px; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #999; cursor: pointer; transition: all .22s; }
.ammpi-btn-back:hover { border-color: var(--ammpi-primary, #2d473f); color: var(--ammpi-primary, #2d473f); }

.ammpi-btn-next { background: var(--ammpi-primary, #2d473f); border: none; border-radius: 50px; padding: 10px 24px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ammpi-bg, #fdfae1); cursor: pointer; opacity: .3; pointer-events: none; transition: all .25s; }
.ammpi-btn-next.ammpi-enabled { opacity: 1; pointer-events: all; }
.ammpi-btn-next.ammpi-enabled:hover { background: #1e3329; transform: translateY(-2px); }

/* ── RESULTS ── */
.ammpi-results-hero { background: var(--ammpi-primary, #2d473f); border-radius: 18px; padding: 44px 32px; text-align: center; margin-bottom: 18px; overflow: hidden; }
.ammpi-result-big-letter { font-family: var(--ammpi-heading-font, 'Playfair Display', serif); font-size: clamp(64px, 13vw, 120px); font-weight: 700; font-style: italic; color: var(--ammpi-accent, #dda25d); line-height: 1; margin-bottom: 10px; }
.ammpi-result-title { font-family: var(--ammpi-heading-font, 'Playfair Display', serif); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 500; color: var(--ammpi-bg, #fdfae1); margin-bottom: 10px; word-wrap: break-word; overflow-wrap: break-word; }
.ammpi-result-title em { font-style: italic; color: var(--ammpi-accent, #dda25d); }
.ammpi-result-desc { font-size: .92rem; font-weight: 300; color: rgba(253,250,225,.72); line-height: 1.8; max-width: 460px; margin: 0 auto; }

/* ── SCORES GRID ── */
.ammpi-scores-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 18px; }
.ammpi-score-card  { background: #fff; border-radius: 13px; padding: 16px 8px; text-align: center; box-shadow: 0 3px 13px rgba(45,71,63,.07); position: relative; transition: transform .25s; min-width: 0; overflow: hidden; }
.ammpi-score-card:hover { transform: translateY(-3px); }
.ammpi-score-card.ammpi-score-highlight { background: var(--ammpi-primary, #2d473f); box-shadow: 0 5px 20px rgba(45,71,63,.22); }
.ammpi-focus-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--ammpi-accent, #dda25d); color: var(--ammpi-primary, #2d473f); font-size: .52rem; font-weight: 800; letter-spacing: .09em; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.ammpi-sc-letter { font-family: var(--ammpi-heading-font, 'Playfair Display', serif); font-size: 1.7rem; font-weight: 700; font-style: italic; color: var(--ammpi-accent, #dda25d); line-height: 1; margin-bottom: 3px; }
.ammpi-sc-name   { font-size: .55rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #bbb; margin-bottom: 8px; word-break: break-word; overflow-wrap: break-word; }
.ammpi-score-card.ammpi-score-highlight .ammpi-sc-name { color: rgba(253,250,225,.45); }
.ammpi-sc-val    { font-family: var(--ammpi-heading-font, 'Playfair Display', serif); font-size: 1.5rem; font-weight: 600; color: var(--ammpi-primary, #2d473f); }
.ammpi-score-card.ammpi-score-highlight .ammpi-sc-val { color: var(--ammpi-bg, #fdfae1); }
.ammpi-sc-max    { font-size: .72rem; color: #ccc; }
.ammpi-score-card.ammpi-score-highlight .ammpi-sc-max { color: rgba(253,250,225,.35); }

/* ── DISCOUNT ── */
.ammpi-discount-box   { background: linear-gradient(135deg,rgba(221,162,93,.15),rgba(221,162,93,.04)); border: 2px solid rgba(221,162,93,.35); border-radius: 16px; padding: 28px; text-align: center; }
.ammpi-discount-emoji { font-size: 1.7rem; display: block; margin-bottom: 9px; }
.ammpi-discount-title { font-family: var(--ammpi-heading-font, 'Playfair Display', serif); font-size: 1.35rem; font-weight: 600; color: var(--ammpi-primary, #2d473f); margin-bottom: 7px; }
.ammpi-discount-title em { font-style: italic; }
.ammpi-discount-text  { font-size: .9rem; font-weight: 300; color: #3a4a44; margin-bottom: 14px; }
.ammpi-discount-code  { display: inline-block; background: var(--ammpi-primary, #2d473f); color: var(--ammpi-accent, #dda25d); font-size: 1rem; font-weight: 700; letter-spacing: .2em; padding: 8px 24px; border-radius: 9px; margin-bottom: 16px; }
.ammpi-cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 540px) {
    .ammpi-email-gate,
    .ammpi-question-card,
    .ammpi-results-hero,
    .ammpi-discount-box { padding: 22px 16px; }

    .ammpi-email-form { flex-direction: column; }

    .ammpi-scores-grid { grid-template-columns: repeat(3,1fr); }

    /* Hide pts on very small screens to give text more room */
    .ammpi-opt-pts { display: none; }

    .ammpi-option-btn { padding: 11px 11px; }
}

/* ── RESULT CONTENT ── */
.ammpi-result-content {
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 4px 24px rgba(45,71,63,.07);
    margin-bottom: 20px;
}
.ammpi-result-para {
    font-family: var(--ammpi-body-font, 'Sarabun', sans-serif);
    font-size: .97rem;
    font-weight: 300;
    line-height: 1.9;
    color: #3a4a44;
    margin-bottom: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.ammpi-result-para:last-child { margin-bottom: 0; }
.ammpi-result-para:last-child {
    font-weight: 500;
    color: var(--ammpi-primary, #2d473f);
    font-style: italic;
    font-family: var(--ammpi-heading-font, 'Playfair Display', serif);
    font-size: 1.05rem;
}

/* START SCREEN — no email, just a start button */
#ammpi-start-screen .ammpi-email-form { display: none; }