/* EngPract Speaking – app.css
   Mobile-first. Thiết kế tối giản, dùng được trên mọi WP theme.
   Root màu sắc dùng CSS custom properties để dễ override từ theme.
*/

/* ─── Reset cục bộ ──────────────────────────────────────────── */
.engpract-root *,
.engpract-root *::before,
.engpract-root *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ─── Variables ─────────────────────────────────────────────── */
.engpract-root {
    --ep-bg:        #f6f5f1;
    --ep-card:      #ffffff;
    --ep-ink:       #1a1a2e;
    --ep-ink2:      #44445a;
    --ep-ink3:      #8888a8;
    --ep-accent:    #e63946;
    --ep-blue:      #457b9d;
    --ep-green:     #2a9d8f;
    --ep-amber:     #e9c46a;
    --ep-border:    rgba(26,26,46,0.10);
    --ep-radius:    14px;
    --ep-radius-sm: 9px;
    --ep-shadow:    0 2px 12px rgba(26,26,46,0.08);
    --ep-font:      -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ep-serif:     Georgia, 'Times New Roman', serif;

    font-family: var(--ep-font);
    color: var(--ep-ink);
    background: var(--ep-bg);
    min-height: 400px;
    padding: 0;
    margin: 0;
}

/* ─── Loading ───────────────────────────────────────────────── */
.ep-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--ep-ink3);
    font-size: 14px;
}
.ep-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--ep-border);
    border-top-color: var(--ep-accent);
    border-radius: 50%;
    animation: ep-spin 0.7s linear infinite;
}
@keyframes ep-spin { to { transform: rotate(360deg); } }

/* ─── Layout wrapper ────────────────────────────────────────── */
.ep-app {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Grid System ───────────────────────────────────────────── */
.ep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
.ep-grid-1col {
    grid-template-columns: 1fr;
}

/* ─── Breadcrumbs ───────────────────────────────────────────── */
.ep-breadcrumbs {
    font-size: 13px;
    color: var(--ep-ink3);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ep-border);
}
.ep-breadcrumbs a {
    color: var(--ep-blue);
    text-decoration: none;
    font-weight: 500;
}
.ep-breadcrumbs a:hover {
    text-decoration: underline;
}
.ep-breadcrumbs span {
    margin: 0 6px;
}

/* ─── Module Card ───────────────────────────────────────────── */
.ep-module-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}
.ep-module-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(26,26,46,0.12);
}
.ep-module-cover {
    height: 120px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--ep-border);
}
.ep-bg-placeholder {
    background: linear-gradient(135deg, var(--ep-blue), var(--ep-green));
}
.ep-topic-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.ep-topic-card:hover {
    transform: translateX(4px);
    border-left: 4px solid var(--ep-accent);
}

/* ─── Header ────────────────────────────────────────────────── */
.ep-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 8px;
}
.ep-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--ep-ink);
    letter-spacing: -0.3px;
}
.ep-logo em {
    font-style: normal;
    color: var(--ep-accent);
}
.ep-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ep-ink3);
    background: var(--ep-border);
    padding: 3px 9px;
    border-radius: 20px;
}

/* ─── Progress ──────────────────────────────────────────────── */
.ep-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ep-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ep-ink3);
    font-weight: 500;
}
.ep-progress-track {
    height: 4px;
    background: var(--ep-border);
    border-radius: 4px;
    overflow: hidden;
}
.ep-progress-fill {
    height: 100%;
    background: var(--ep-accent);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Card ──────────────────────────────────────────────────── */
.ep-card {
    background: var(--ep-card);
    border-radius: var(--ep-radius);
    border: 1px solid var(--ep-border);
    box-shadow: var(--ep-shadow);
    overflow: hidden;
}
.ep-card-body { padding: 20px; }
.ep-card-accent { border-top: 3px solid var(--ep-accent); }
.ep-card-blue   { border-top: 3px solid var(--ep-blue); }
.ep-card-green  { border-top: 3px solid var(--ep-green); }

/* ─── Question card ─────────────────────────────────────────── */
.ep-q-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ep-ink3);
    margin-bottom: 8px;
}
.ep-q-topic {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ep-blue);
    font-weight: 500;
    margin-bottom: 12px;
}
.ep-q-topic-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ep-blue);
}
.ep-q-text {
    font-size: 20px;
    line-height: 1.45;
    color: var(--ep-ink);
    font-family: var(--ep-serif);
    font-weight: 400;
}
@media (max-width: 400px) {
    .ep-q-text { font-size: 17px; }
}

/* ─── Recorder ──────────────────────────────────────────────── */
.ep-recorder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
}
.ep-timer-ring {
    position: relative;
    width: 100px; height: 100px;
}
.ep-timer-ring svg {
    transform: rotate(-90deg);
}
.ep-ring-bg   { fill: none; stroke: var(--ep-border); stroke-width: 5; }
.ep-ring-fill {
    fill: none;
    stroke: var(--ep-accent);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 283;  /* 2π × 45 */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke 0.5s;
}
.ep-ring-fill.ep-ring-warning { stroke: #e9c46a; }
.ep-ring-fill.ep-ring-done    { stroke: #ccc; }
.ep-timer-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--ep-ink);
    line-height: 1;
}
.ep-timer-text small {
    font-size: 10px;
    font-weight: 400;
    color: var(--ep-ink3);
    margin-top: 2px;
}
.ep-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}
.ep-bar {
    width: 4px;
    background: var(--ep-accent);
    border-radius: 2px;
    height: 6px;
    transition: height 0.1s;
}
.ep-bar.ep-animating {
    animation: ep-wave 0.6s ease-in-out infinite;
}
.ep-bar:nth-child(2) { animation-delay: 0.1s; }
.ep-bar:nth-child(3) { animation-delay: 0.2s; }
.ep-bar:nth-child(4) { animation-delay: 0.15s; }
.ep-bar:nth-child(5) { animation-delay: 0.05s; }
@keyframes ep-wave {
    0%, 100% { height: 6px; opacity: 0.5; }
    50%       { height: 24px; opacity: 1; }
}

/* ─── Buttons ───────────────────────────────────────────────── */
.ep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--ep-font);
    cursor: pointer;
    border: none;
    transition: transform 0.12s, opacity 0.15s, background 0.15s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.ep-btn:active { transform: scale(0.97); }
.ep-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.ep-btn-primary {
    background: var(--ep-accent);
    color: #fff;
}
.ep-btn-primary:hover:not(:disabled) { background: #cc2d38; }

.ep-btn-red-outline {
    background: transparent;
    color: var(--ep-accent);
    border: 2px solid var(--ep-accent);
}
.ep-btn-red-outline:hover:not(:disabled) { background: rgba(230,57,70,0.07); }

.ep-btn-outline {
    background: transparent;
    color: var(--ep-ink2);
    border: 1.5px solid var(--ep-border);
}
.ep-btn-outline:hover:not(:disabled) { background: var(--ep-border); }

.ep-btn-green {
    background: var(--ep-green);
    color: #fff;
}
.ep-btn-green:hover:not(:disabled) { background: #228a7e; }

.ep-btn-lg { width: 100%; padding: 15px; }
.ep-btn-sm { padding: 8px 16px; font-size: 13px; }

.ep-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ep-btn-row .ep-btn { flex: 1; min-width: 120px; }

/* ─── Status chip ───────────────────────────────────────────── */
.ep-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}
.ep-chip-recording {
    background: rgba(230,57,70,0.1);
    color: var(--ep-accent);
}
.ep-chip-analyzing {
    background: rgba(69,123,157,0.1);
    color: var(--ep-blue);
}
.ep-chip-done {
    background: rgba(42,157,143,0.1);
    color: var(--ep-green);
}

/* ─── Result card ───────────────────────────────────────────── */
.ep-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.ep-result-q {
    font-size: 13px;
    color: var(--ep-ink3);
    line-height: 1.5;
    flex: 1;
}
.ep-band-overall {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--ep-accent);
    color: #fff;
    border-radius: var(--ep-radius-sm);
    padding: 8px 14px;
    min-width: 60px;
    flex-shrink: 0;
}
.ep-band-overall .ep-band-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.ep-band-overall .ep-band-lbl {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 2px;
}

.ep-transcript {
    background: #f8f8fc;
    border-radius: var(--ep-radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ep-ink2);
    margin-bottom: 14px;
    border-left: 3px solid var(--ep-blue);
    font-style: italic;
}
.ep-transcript-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ep-blue);
    margin-bottom: 5px;
    font-style: normal;
}

/* ─── Criteria grid ─────────────────────────────────────────── */
.ep-criteria {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
@media (max-width: 360px) {
    .ep-criteria { grid-template-columns: 1fr; }
}
.ep-criterion {
    background: var(--ep-bg);
    border-radius: var(--ep-radius-sm);
    padding: 12px;
    border: 1px solid var(--ep-border);
}
.ep-criterion-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.ep-criterion-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ep-ink3);
}
.ep-criterion-band {
    font-size: 18px;
    font-weight: 700;
    color: var(--ep-ink);
}
.ep-band-bar {
    height: 3px;
    background: var(--ep-border);
    border-radius: 2px;
    margin-bottom: 7px;
    overflow: hidden;
}
.ep-band-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--ep-green);
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.ep-band-bar-fill.ep-band-low    { background: var(--ep-accent); }
.ep-band-bar-fill.ep-band-medium { background: var(--ep-amber); }
.ep-band-bar-fill.ep-band-high   { background: var(--ep-green); }
.ep-criterion-comment {
    font-size: 12px;
    color: var(--ep-ink2);
    line-height: 1.55;
}

/* ─── Audio player ──────────────────────────────────────────── */
.ep-audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ep-bg);
    border-radius: var(--ep-radius-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--ep-border);
}
.ep-play-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ep-blue);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
}
.ep-play-btn:active { transform: scale(0.94); }
.ep-play-btn:hover  { background: #345f7e; }
.ep-play-info {
    flex: 1;
    min-width: 0;
}
.ep-play-duration {
    font-size: 12px;
    color: var(--ep-ink3);
}
.ep-play-progress {
    height: 3px;
    background: var(--ep-border);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.ep-play-progress-fill {
    height: 100%;
    background: var(--ep-blue);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s;
}

/* ─── Null result ───────────────────────────────────────────── */
.ep-null-result {
    text-align: center;
    padding: 20px;
    color: var(--ep-ink3);
}
.ep-null-result .ep-null-icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.ep-null-result p {
    font-size: 13px;
    line-height: 1.6;
}

/* ─── Summary screen ────────────────────────────────────────── */
.ep-summary-header {
    text-align: center;
    padding: 24px 20px 20px;
}
.ep-summary-icon {
    font-size: 40px;
    margin-bottom: 12px;
}
.ep-summary-title {
    font-family: var(--ep-serif);
    font-size: 24px;
    color: var(--ep-ink);
    margin-bottom: 6px;
}
.ep-summary-sub {
    font-size: 14px;
    color: var(--ep-ink3);
}
.ep-big-band {
    text-align: center;
    padding: 20px;
    border-top: 1px solid var(--ep-border);
    border-bottom: 1px solid var(--ep-border);
}
.ep-big-band .ep-bnum {
    font-size: 52px;
    font-weight: 700;
    color: var(--ep-accent);
    line-height: 1;
}
.ep-big-band .ep-blbl {
    font-size: 13px;
    color: var(--ep-ink3);
    font-weight: 500;
    margin-top: 4px;
}

/* ─── Analyzing overlay ─────────────────────────────────────── */
.ep-analyzing-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    color: var(--ep-ink2);
    font-size: 14px;
}
.ep-analyzing-dots span {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--ep-blue);
    border-radius: 50%;
    animation: ep-dot 1.2s ease-in-out infinite;
    margin: 0 2px;
}
.ep-analyzing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ep-analyzing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ep-dot {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ─── Error state ───────────────────────────────────────────── */
.ep-error {
    background: rgba(230,57,70,0.06);
    border: 1px solid rgba(230,57,70,0.25);
    border-radius: var(--ep-radius-sm);
    padding: 14px 16px;
    font-size: 13px;
    color: var(--ep-accent);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ─── Login notice ──────────────────────────────────────────── */
.engpract-login-notice {
    padding: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    color: #444;
}
.engpract-login-notice a { color: #e63946; }

/* ─── Utility ───────────────────────────────────────────────── */
.ep-hidden { display: none !important; }
.ep-mt8  { margin-top: 8px; }
.ep-mt12 { margin-top: 12px; }
.ep-text-center { text-align: center; }
.ep-text-muted { color: var(--ep-ink3); font-size: 13px; }

/* ─── Practice Mode Selector ────────────────────────────────── */
.ep-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
.ep-mode-option {
    position: relative;
    cursor: pointer;
}
.ep-mode-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.ep-mode-box {
    padding: 16px;
    border: 2px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
    text-align: center;
    transition: all 0.2s;
    background: #fff;
}
.ep-mode-option input:checked + .ep-mode-box {
    border-color: var(--ep-accent);
    background: rgba(230,57,70,0.04);
}
.ep-mode-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}
.ep-mode-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--ep-ink);
}
.ep-mode-desc {
    font-size: 11px;
    color: var(--ep-ink3);
    margin-top: 4px;
    display: block;
}

/* ─── Level Selector ────────────────────────────────────────── */
.ep-level-selector {
    margin-top: 16px;
    padding: 16px;
    background: #f8f8fc;
    border-radius: var(--ep-radius-sm);
}

/* ─── Script Box ────────────────────────────────────────────── */
.ep-script-card {
    border-left: 4px solid var(--ep-accent);
    background: #fff;
}