.test-controls{
    background: #f7f7fa;  
}
.time-controls-placeholder{
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 8;
}
.time-controls{
    display: flex;
    flex-direction: column;
    padding-right: 6vw;
    align-items: center;
    font-size:1.45em;
}
.body-study-mode .braincoinsummary{
    grid-column: 1;
    grid-column-end: 3;
    display: flex;
    width: 100%;
}
.options-container:disabled input{
    background:red;
}

.timing-controls:disabled input:after,
.options-container:disabled input:after {
    position: absolute;
    content: '';
    display: block;
    width: 1.2ch;
    height: 1.2ch;
    border-radius: 50%;
    background-color: white;
    opacity: 0.5;
    margin-left: 0.3ch;
    z-index: 1;
    border:solid #0663ef;
}
.timing-controls:disabled input:checked:after,
.options-container:disabled input:checked:after {
    background-color: #2e7cf1;
    opacity: 0.9;
}
.hiddenv{
    visibility: hidden;
}

.qus-message,
.qus-sub,
.sumaryBraincoinsText,
.header label,
.test-controls label{
    background: unset;
    -webkit-text-fill-color: unset;
    color: #1c75f1;
    color: var(--primary-color);
    font-weight: bold;
}
.improvement_message{
    text-align:center;
    & em{ color:gold;
        font-size: 1.5em;
        color: #b29812;
    }
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);   /* Dark overlay */
/*   backdrop-filter: blur(6px);      Blur effect */
}

dialog.congratulation-panel{
    text-align: center;
    padding: 30px 40px 20px;
    & .improvement_message{
        & em{
            color: #b29812;
            font-weight: bold;
            font-size: 50px;
        }
    }
    & .congratulation-panel-container{
       /*  margin: 20px; */
        & p{
            font-size: 48px;
        }
        & .final_complete_club{
            color:#b29812;
            font-weight: 900;
        }
        & .certificate-container{
            display: flex;
            flex-wrap: wrap;
            margin: 20px 0;
            & .certificate-link{
                flex: 75%;
                font-size: 20px;
                text-align: left;
                max-width: 450px;
            }
            & .certificate-form{
                flex: 75%;
                font-size: 20px;
                text-align: left;
                max-width: 380px;
                & label {
                    width: 35%;
                }
                & input {
                    width: 60%;
                }

                @media (max-width: 800px){
                    label input{
                        flex: 100%;
                    }
                }
            }
            & .certificate-image{
                flex: 25%;
                text-align: right;
                & img{
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    object-fit: cover;
                }
            }
        }

        .certificate-logo-image img {
            width: 500px;
            height: 200px;
            object-fit: scale-down;
        }
        & .refer-friend-form{
            display: inline-flex;
            flex-wrap: wrap;
            max-width: 600px;   
            & .form-item {
                flex: 48%;
                margin: 5px 1%;
                padding: 0 5px;
                & input {
                    padding: 5px;
                    width: 100%;
                }
            }
        }
        & .error-message{
            color: red;
            font-size: 14px;
        }
    }
    & .left-align-text{
        text-align: left;
    }
}
dialog#congratulationA{
    text-align: center;
    padding: 20px 50px;
    display: none;
}
dialog#finalPopup{
    & h2{
        margin: 20px 0;
    }
    & p{
        padding: 0 20px;
        margin: 0;
    }
}
dialog#sampleOnlineCertificate {
    position: relative;
    max-height: 95vh;
    width: fit-content;
    padding: 0;
    background-color: rgba(0,0,0,0.9);
    & img {
        max-width: 100%;
        max-height: 90vh;
        height: auto;
    }
    & #closeSampleCertificate {
        position: absolute;
        z-index: 10000;
        right: 45px;
        font-size: 60px;
        font-weight: bold;
        color: #f1f1f1;
        cursor: pointer;
    }
}

.congratulation-image img {
    max-width: 40%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Bigger celebration scroll on desktop — the 40% base keeps it modest on phones,
   where the popup is already narrow. (The two-column 100% layout below has its own
   .result-100-layout .congratulation-image img override, so it's unaffected.) */
@media (min-width: 769px) {
    .congratulation-image img {
        max-width: 65%;
    }
}

/* Know-it 100% Club: the Sign Up / Find Out buttons are overlaid onto the
   scroll's two top tabs. Positions are percentages of the scroll image, so they
   track its size. Tune top/left/width to taste. */
.congratulation-image.know-scroll {
    position: relative;
    display: inline-block;
    line-height: 0;
    margin: 0 auto;
}
/* The scroll is a tall portrait image — cap it by BOTH viewport width and
   height so it never exceeds the screen. The inline-block wrapper shrinks to
   the rendered image, so the % button positions below still track it. */
.congratulation-image.know-scroll img {
    display: block;
    width: auto;
    height: auto;
    max-width: 88vw;
    max-height: 60vh;
    margin: 0 auto;
}
@media (min-width: 769px) {
    .congratulation-image.know-scroll img {
        max-width: 46vw;
        max-height: 74vh;
    }
}
.congratulation-image.know-scroll .scroll-btn {
    position: absolute;
    top: 8.5%;
    width: 20%;
    transform: translate(-50%, -50%);
    min-width: 0 !important;
    padding: 0.45em 0.3em !important;
    font-size: clamp(9px, 1.2vw, 15px) !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    text-align: center;
}
.congratulation-image.know-scroll .scroll-btn-left  { left: 37%; }
.congratulation-image.know-scroll .scroll-btn-right { left: 63%; }

/* Mobile: on narrow screens the scroll (and its 20%-wide tab buttons) shrink
   enough that the longer "FIND OUT MORE" label can no longer stay on one line
   inside the pill and its text spilled past the rounded background. Allow the
   label to wrap and give the buttons a touch more width so both scroll tabs
   read as balanced two-line pills. */
@media (max-width: 768px) {
    .congratulation-image.know-scroll .scroll-btn {
        width: 26%;
        white-space: normal;
        font-size: clamp(8px, 2.6vw, 13px) !important;
        padding: 0.4em 0.35em !important;
    }
}

/* 100% results: performance summary on the left, the celebration scroll on the
   right. The dialog is sized to its content, so give the layout an explicit width
   to hold two columns; it collapses to a single centred column on small screens. */
.result-100-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: min(820px, 84vw);
    margin: 0 auto;
}
.result-100-layout .result-summary {
    flex: 1 1 auto;
    text-align: left;
}
/* override the dialog's large 48px paragraph size for the side-column summary
   (same specificity as that rule, declared later, so this wins) */
dialog.congratulation-panel .result-summary p {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    color: var(--primary-color, #01004C);
}
.result-100-layout .congratulation-image {
    flex: 0 0 320px;
}
/* inside the two-column layout the scroll fills its column rather than the
   global 40% cap */
.result-100-layout .congratulation-image img {
    max-width: 100%;
}
@media (max-width: 760px) {
    .result-100-layout { flex-direction: column; width: auto; }
    .result-100-layout .result-summary { text-align: center; }
    dialog.congratulation-panel .result-summary p { font-size: 20px; }
}

@media (max-width: 800px){
    .certificate-link, .certificate-form, .certificate-image{
        flex: 100%;
    }
}

/* Mobile: "CONGRATULATIONS!!!" is one unbreakable 50px word, so it overflowed
   the dialog and was clipped. Constrain the dialog to the viewport, shrink the
   headings/body text to fit and let long words break. */
@media (max-width: 768px) {
    dialog.congratulation-panel {
        max-width: 96vw;
        box-sizing: border-box;
        padding: 20px 14px 16px;
        overflow-wrap: break-word;
    }
    dialog.congratulation-panel .improvement_message em {
        font-size: clamp(22px, 7vw, 50px);
    }
    dialog.congratulation-panel .congratulation-panel-container p {
        font-size: clamp(18px, 5.2vw, 48px);
    }
    dialog.congratulation-panel h1 {
        font-size: clamp(22px, 7vw, 40px);
    }
}