@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap');

/* ═══════════════════════════════════════════════════════
   EXAM SUBJECTS PAGE — BFA Ground Class
   Responsive: Mobile / Tablet / Desktop
═══════════════════════════════════════════════════════ */

.practice-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f0f4ff;
    font-family: 'Outfit', sans-serif;
}

/* ════════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════ */
.practice-header {
    position: relative;
    padding: 32px 40px 28px;
    background: #ffffff;
    border-bottom: 1px solid #e8edf5;
    overflow: hidden;
}

.practice-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #4f5fe0, #818cf8);
}

.practice-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #6366f110 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.practice-header-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.practice-eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4f5fe0;
    font-weight: 600;
    margin-bottom: 6px;
}

.practice-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #0f172a;
    line-height: 1.1;
    margin: 0 0 4px;
}

.practice-header p {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
}

/* Attempt counter badge */
.attempt-counter {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.attempt-counter-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 600;
}

.attempt-counter-val {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.02em;
}

.attempt-counter-val span {
    font-size: 13px;
    font-weight: 400;
    color: #94a3b8;
}

/* ════════════════════════════════════════
   CONTENT AREA
════════════════════════════════════════ */
.exam-content {
    padding: 28px 40px 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ════════════════════════════════════════
   WARNING / INFO BANNERS
════════════════════════════════════════ */
.warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    animation: bannerIn 0.35s ease both;
}

@keyframes bannerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Orange — trial / info */
.warning-banner.info {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

/* Red — limit reached */
.warning-banner.danger {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
}

/* Yellow — exam in progress */
.warning-banner.ongoing {
    background: #fefce8;
    border: 1px solid #fde047;
    color: #854d0e;
}

.warning-banner-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.warning-banner a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ════════════════════════════════════════
   ONGOING EXAM CARD
════════════════════════════════════════ */
.ongoing-exam {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px 26px 22px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    animation: bannerIn 0.4s 0.1s ease both;
}

/* Green left accent */
.ongoing-exam::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #10b981, #34d399);
    border-radius: 14px 0 0 14px;
}

.ongoing-exam-info {
    flex: 1;
    min-width: 200px;
}

.ongoing-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
    text-transform: capitalize;
}

.exam-meta {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
}

.exam-meta b { color: #0f172a; }

/* Slim progress bar */
.progress-bar {
    width: 100%;
    height: 6px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
}

/* Resume button */
.resume-btn {
    padding: 11px 24px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
    -webkit-appearance: none;
    touch-action: manipulation;
}

.resume-btn:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16,185,129,0.3);
}

.resume-btn:active { transform: translateY(0); }

/* ════════════════════════════════════════
   SUBJECTS SECTION
════════════════════════════════════════ */
.subjects-section { display: flex; flex-direction: column; }

.subjects-section h2 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 18px;
    font-family: 'Outfit', sans-serif;
}

/* ════════════════════════════════════════
   SUBJECT CARDS GRID
════════════════════════════════════════ */
.subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 14px;
}

/* ── SUBJECT CARD ── */
.subject-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 145px;
    border-radius: 16px;
    padding: 18px 18px 16px;
    overflow: hidden;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.22,.68,0,1.3),
                box-shadow 0.25s ease,
                border-color 0.2s;
    animation: examCardIn 0.45s ease both;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.subject-card:nth-child(1) { animation-delay: 0.10s; }
.subject-card:nth-child(2) { animation-delay: 0.15s; }
.subject-card:nth-child(3) { animation-delay: 0.20s; }
.subject-card:nth-child(4) { animation-delay: 0.25s; }
.subject-card:nth-child(5) { animation-delay: 0.30s; }
.subject-card:nth-child(6) { animation-delay: 0.35s; }
.subject-card:nth-child(7) { animation-delay: 0.40s; }

/* Per-subject colour themes — matches practice page */
.sc-met  { background: linear-gradient(145deg, #dbeafe, #eff6ff); }
.sc-reg  { background: linear-gradient(145deg, #fce7f3, #fff1f5); }
.sc-nav  { background: linear-gradient(145deg, #d1fae5, #f0fdf4); }
.sc-rnav { background: linear-gradient(145deg, #e0e7ff, #f0f4ff); }
.sc-ins  { background: linear-gradient(145deg, #fed7aa, #fff7ed); }
.sc-per  { background: linear-gradient(145deg, #fef9c3, #fffde7); }
.sc-tec  { background: linear-gradient(145deg, #cffafe, #f0fdfe); }

@media (hover: hover) {
    .subject-card:not(.disabled):hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 14px 36px rgba(79,95,224,0.14);
    }
    .sc-met:not(.disabled):hover  { border-color: #93c5fd; }
    .sc-reg:not(.disabled):hover  { border-color: #f9a8d4; }
    .sc-nav:not(.disabled):hover  { border-color: #6ee7b7; }
    .sc-rnav:not(.disabled):hover { border-color: #a5b4fc; }
    .sc-ins:not(.disabled):hover  { border-color: #fdba74; }
    .sc-per:not(.disabled):hover  { border-color: #fde047; }
    .sc-tec:not(.disabled):hover  { border-color: #67e8f9; }
    .subject-card:not(.disabled):hover .sc-icon { transform: rotate(-8deg) scale(1.15); }
}

.subject-card:not(.disabled):active {
    transform: scale(0.97);
}

/* Shimmer sweep */
.subject-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    transform: translateX(-100%);
    pointer-events: none;
}
@media (hover: hover) {
    .subject-card:not(.disabled):hover::before {
        transform: translateX(100%);
        transition: transform 0.5s ease;
    }
}

/* Icon */
.sc-icon {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.4);
}

.sc-met .sc-icon  { background: rgba(191,219,254,0.55); }
.sc-reg .sc-icon  { background: rgba(251,207,232,0.55); }
.sc-nav .sc-icon  { background: rgba(167,243,208,0.55); }
.sc-rnav .sc-icon { background: rgba(199,210,254,0.55); }
.sc-ins .sc-icon  { background: rgba(254,215,170,0.55); }
.sc-per .sc-icon  { background: rgba(253,230,138,0.55); }
.sc-tec .sc-icon  { background: rgba(165,243,252,0.55); }

/* Badge */
.sc-badge {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 5px;
    margin-bottom: 5px;
    display: inline-block;
}
.sc-met .sc-badge  { background: #dbeafe; color: #1d4ed8; }
.sc-reg .sc-badge  { background: #fce7f3; color: #be185d; }
.sc-nav .sc-badge  { background: #d1fae5; color: #065f46; }
.sc-rnav .sc-badge { background: #e0e7ff; color: #3730a3; }
.sc-ins .sc-badge  { background: #ffedd5; color: #9a3412; }
.sc-per .sc-badge  { background: #fef9c3; color: #854d0e; }
.sc-tec .sc-badge  { background: #cffafe; color: #0e7490; }

/* Title */
.sc-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.01em;
    display: block;
}

/* Disabled state */
.subject-card.disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* ════════════════════════════════════════
   START EXAM MODAL
════════════════════════════════════════ */
.exam-modal {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.exam-modal-box {
    background: #ffffff;
    border-radius: 18px;
    padding: 36px 32px 30px;
    width: 100%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    animation: modalPop 0.3s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    line-height: 1;
}

.modal-close:hover { background: #e2e8f0; color: #0f172a; }

/* Modal icon */
.modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 18px;
}

.exam-modal-box h2 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: #0f172a;
    text-align: center;
    margin-bottom: 6px;
}

/* Selected subject label */
.modal-subject-label {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 20px;
    font-weight: 400;
}

.modal-subject-label strong {
    color: #4f5fe0;
    font-weight: 600;
    text-transform: capitalize;
}

/* Info rows */
.modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.modal-info-card {
    background: #f8fafc;
    border: 1px solid #e8edf5;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.modal-info-card .mic-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.modal-info-card .mic-val {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}

/* Warning text */
.modal-warning {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: #9f1239;
    font-weight: 500;
    margin-bottom: 22px;
    line-height: 1.5;
    text-align: center;
}

/* Buttons */
.modal-buttons {
    display: flex;
    gap: 10px;
}

.start-btn {
    flex: 1;
    padding: 13px;
    background: linear-gradient(135deg, #4f5fe0, #6366f1);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    -webkit-appearance: none;
    touch-action: manipulation;
}

.start-btn:hover {
    background: linear-gradient(135deg, #3d4dc8, #4f46e5);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79,95,224,0.35);
}

.start-btn:active { transform: translateY(0); }

.cancel-btn {
    padding: 13px 20px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-appearance: none;
}

.cancel-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* ════════════════════════════════════════
   TABLET  640px – 1023px
════════════════════════════════════════ */
@media (max-width: 1023px) {
    .practice-header  { padding: 24px 24px 20px; }
    .practice-header h1 { font-size: 22px; }
    .exam-content     { padding: 20px 24px 36px; gap: 16px; }
    .subjects-grid    { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}


/* =====================================================
MOBILE VIEW FIXES
Fix zoomed desktop layout + improve stacking
===================================================== */

@media (max-width: 639px){

/* Header layout fix */
.practice-header{
padding:20px 16px 18px;
}

.practice-header-inner{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

/* Attempts counter alignment */
.attempt-counter{
align-items:flex-start;
}

/* Content padding fix */
.exam-content{
padding:18px 16px 30px;
gap:14px;
}

/* Resume exam card stacking */
.ongoing-exam{
flex-direction:column;
align-items:flex-start;
gap:14px;
padding:18px 18px;
}

.resume-btn{
width:100%;
text-align:center;
}

/* Subject cards full width */
.subjects-grid{
grid-template-columns:1fr;
gap:10px;
}

/* Subject card mobile layout */
.subject-card{
height:auto;
min-height:72px;
flex-direction:row;
align-items:center;
justify-content:flex-start;
padding:14px 16px;
border-radius:14px;
gap:14px;
}

/* Subject icon fix */
.sc-icon{
position:relative;
top:auto;
right:auto;
width:42px;
height:42px;
font-size:20px;
flex-shrink:0;
}

/* Text container */
.sc-card-text{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0;
}

.sc-title{
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* Modal mobile fix */
.exam-modal-box{
padding:26px 20px 22px;
max-width:92%;
}

/* Modal buttons stack */
.modal-buttons{
flex-direction:column;
}

.start-btn,
.cancel-btn{
width:100%;
}

}

/* Small phone optimization */
@media (max-width:380px){

.subject-card{
min-height:66px;
padding:12px 14px;
}

.sc-icon{
width:36px;
height:36px;
font-size:18px;
}

}


/* ── CARD ENTRY ANIMATION ── */
@keyframes examCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}