/* All existing styles remain exactly the same */ .quiz-popup { max-width: 750px; margin: 0 auto; padding: 20px; /* Mirrors global.css's `body { font-family: "Playfair Display" }`: on the standalone page every quiz element without an explicit family inherits Playfair from . Inside the modal the popup inherits the HOST page's body font instead (Archivo on index.astro), so the inheritance is re-rooted here. The faces themselves are loaded at modal-open by QuizModal.astro (same Google Fonts URLs as the standalone page's head). */ font-family: "Playfair Display", serif; } /* global.css's `p { font-family: Poppins; ... }`, ported. :where() keeps specificity at zero — exactly like the (0,0,1) element rule it mirrors — so classed rules (.quiz-subtitle's Inter, etc.) still win over it. */ :where(.quiz-popup p) { font-family: Poppins, sans-serif; font-weight: 400; font-size: 14px; line-height: 130%; color: #17222A; } /* Ported from global.css (h2 / .highlight / :root gold): the standalone /assessment-quiz page loads global.css + style.css so it gets these for free, but QuizModal.astro clones this markup into pages that load NEITHER (index.astro, compare.astro) — there the title lost its serif face and the gold "Is right for you" span rendered plain. Scoped under .quiz-popup and declared BEFORE .quiz-hero-content h2 below so the hero's larger font-size still wins on equal specificity. Same values as global.css, so the standalone page renders identically. */ .quiz-popup h2 { font-family: "Playfair Display", serif; font-weight: 400; font-size: 44px; line-height: 130%; letter-spacing: -2px; } @media (max-width: 767.98px) { .quiz-popup h2 { font-size: 34px; } } .quiz-popup .highlight { color: #C5984E; /* --primary-color-primary in style.css :root */ font-weight: 600; } .quiz-card { background: #ffffff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); position: relative; transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .quiz-step { display: none; } .quiz-step.active { display: block; } .quiz-hero { position: relative; background-image: url(../assets/quiz/f-overlay.png); background-size: cover; background-repeat: no-repeat; background-color: #f1ede5; min-height: 316px; padding: 28px 30px; overflow: hidden; /* Markup also carries Tailwind's "flex flex-col justify-end items-start" for this — only in effect on pages that load Tailwind (checkout.astro, weight-loss.astro, ...). index.astro/compare.astro are standalone pages with no Tailwind, so without this the heading below just sat in normal block flow at the TOP of the hero, on top of the couple photo instead of pinned to the bottom. */ display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } /* Same story as .quiz-hero above: Tailwind-only "flex flex-col relative items-start w-full h-full z-1" / "md:w-1/2" on these two wrapper divs (no semantic class of their own until now) did nothing on non-Tailwind pages, so the heading rendered full-width instead of confined to the left half where it doesn't overlap the photo on the right. */ .quiz-hero__inner { display: flex; flex-direction: column; position: relative; align-items: flex-start; width: 100%; height: 100%; z-index: 1; } .quiz-hero__half { width: 100%; } @media (min-width: 768px) { .quiz-hero__half { width: 50%; } } .quiz-hero::before { content: ""; position: absolute; right: 0; top: -290px; width: 600px; height: 600px; background-position: right bottom; background-repeat: no-repeat; background-image: url(../assets/quiz/flower.png); } .quiz-hero::after { content: ""; position: absolute; top: -30px; right: 50px; width: 428px; height: 346px; background-position: right bottom; background-repeat: no-repeat; background-image: url(../assets/quiz/boy-girl.png); background-size: contain; } .quiz-badge { font-family: "Inter"; display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 30px; border: 1px solid #17222a1a; color: #2c7a58; font-size: 11px; line-height: 130%; font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; width: fit-content; margin-bottom: 18px; } .quiz-hero-content h2 { margin: 0; color: #1f1f1f; line-height: 1.05; font-size: 58px; font-weight: 400; } .quiz-hero-content h2 span { display: block; color: #c99a56; font-size: 72px; font-style: italic; } .quiz-hero-image { text-align: right; } .quiz-hero-image img { max-width: 100%; max-height: 220px; object-fit: contain; } .quiz-content { padding: 34px 30px; } .quiz-title { margin-top: 18px; margin-bottom: 12px; } .quiz-subtitle { font-family: "Inter"; color: #17222a; font-size: 14px; font-weight: 400; line-height: 140%; margin-bottom: 24px; opacity: 0.6; } .features-grid { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 34px; } /* Redesigned markup (HIPAA Protected / Reviewed by physicians / Results in 24 hrs) switched from the old .quiz-feature + .feature-dot pattern below to .feature-item + .feature-icon, relying on Tailwind utility classes for layout that were never ported here — the checkmark svg (stroke="white") rendered with no colored circle behind it, i.e. invisible, on any page without Tailwind. */ .feature-item { display: flex; align-items: center; gap: 8px; } .feature-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #0c6b3f; flex-shrink: 0; } .feature-text { font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; line-height: 100%; letter-spacing: 0%; color: #1f5e42; } .quiz-feature { display: flex; align-items: center; gap: 8px; color: #1f5e42; font-size: 14px; } .feature-dot { width: 10px; height: 10px; background: #0c6b3f; border-radius: 50%; } .quiz-start-btn { font-family: "Inter"; width: 100%; border: 0; border-radius: 40px; background: #004c27; color: #fff; height: 54px; font-size: 20px; font-weight: 400; transition: 0.3s; cursor: pointer; display: flex; align-items: center; justify-content: center; } .quiz-start-btn:hover { background: #c5984e; } .quiz-start-btn span { margin-left: 10px; display: inline-flex; align-items: center; } .quiz-start-btn:disabled { opacity: 0.6; cursor: not-allowed; } .quiz-buttons { display: flex; gap: 12px; margin-top: 30px; } .quiz-btn { flex: 1; padding: 12px 24px; border: 0; border-radius: 40px; font-family: "Inter"; font-size: 16px; font-weight: 600; transition: 0.3s; cursor: pointer; height: 50px; } .quiz-btn-primary { background: #004c27; color: #fff; } .quiz-btn-primary:hover { background: #003a1d; } .quiz-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .quiz-btn-secondary { background: #e8e8e8; color: #004c27; } .quiz-btn-secondary:hover { background: #d8d8d8; } .step-back { font-family: "Inter"; border-radius: 40px; padding-top: 8px; padding-right: 16px; cursor: pointer; padding-bottom: 8px; padding-left: 16px; background: #faf8f4; color: #004c27; border: 1px solid #004c27; } .arrow-back { position: relative; z-index: 1; } .arrow-back::before { content: ""; display: inline-block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5.58203%203.46094L2.0412%207.00177L5.58203%2010.5426%22%20stroke%3D%22%23004C27%22%20stroke-width%3D%221.5%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M11.959%207H2.14148%22%20stroke%3D%22%23004C27%22%20stroke-width%3D%221.5%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; vertical-align: middle; } .step-navigator { font-family: "Inter"; display: flex; flex: 1; flex-flow: column; flex-wrap: wrap; gap: 4px; } .step-navigator .current-step { color: #004c27; } .step-navigator .bar { width: 100%; height: 10px; background: #d4dcdf; display: flex; border-radius: 50px; align-items: center; padding: 6px 5px; } .progress { display: flex; height: 0.4rem; overflow: hidden; font-size: 0.75rem; background-color: #004c27; border-radius: 0.25rem; } .step-body { max-width: 490px; margin: 70px auto; } .step-body h2 { text-align: center; } .step-body p { font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 140%; text-align: center; } .option--item { border: 1px solid #004c2733; padding: 14px; border-radius: 10px; background: #faf8f4; cursor: pointer; transition: all 0.3s; } [data-step="5"] .option--item { flex: 1 1 0; min-height: 182px; display: flex; flex-direction: column-reverse; align-items: center; justify-content: space-evenly; } .options .option--item:not(:last-child) { margin-bottom: 18px; } [data-step="9"] .options { display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px; } @media (max-width: 767px) { [data-step="9"] .options { grid-template-rows: repeat(2, 1fr); } } [data-step="9"] .option--item { font-size: 16px; margin-bottom: 0 !important; border: 1px solid transparent; width: 100%; padding: 30px 10px; display: flex; align-items: center; justify-content: center; text-align: center; } .option--item:hover { border: 1px solid #004c27; } .option--item.active { color: #004c27; border: 1px solid #004c27; background-color: #004c270d; } .options .option--item .option--title { font-weight: 400; font-style: Regular; font-size: 20px; line-height: 130%; color: #000000; margin-bottom: 8px; } .options .option--item.active .option--title { color: #004c27; } .options .option--item .option-details { color: #00000099; font-family: Inter; font-weight: 400; font-size: 14px; line-height: 150%; } .options .option--item.active .option-details { color: #004c2799; } .text--input input, .text--input .text--box, .text--input select { font-family: "Inter"; width: 100%; background-color: #faf8f4; border: 0; border-radius: 8px; padding: 18px 15px; text-align: center; font-weight: 500; font-size: 16px; line-height: 150%; border: 1px solid #00000015; color: #000000; opacity: 0.8; } .text--input .text--box { text-align: left; min-height: 170px; } .text--input input:focus, .text--input .text--box:focus { outline: none !important; border: 1px solid #004c27 !important; } .medical-question { font-family: "Inter"; background: #f6f4f2; border-radius: 16px; padding: 20px; margin-bottom: 20px; } .medical-question h4 { font-size: 18px; font-weight: 500; color: #000000; margin-bottom: 18px; } .yes-no-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 10px; } .yes-no-grid .answer-btn { height: 52px; border: 1.5px solid #0f6a43; border-radius: 999px; background: transparent; color: #0f6a43; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .yes-no-grid .answer-btn:hover, .yes-no-grid .answer-btn.active { background: #0f6a43; color: #fff; } .why-ask { font-family: "Inter"; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #000000; opacity: 0.6; font-style: italic; } .why-ask svg, .why-ask i { font-size: 12px; opacity: 0.8; } .processing-step { min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; } .processing-loader { width: 42px; height: 42px; border: 4px solid #d9d9d9; border-top-color: #004c27; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 24px; } @keyframes spin { to { transform: rotate(360deg); } } .processing-title { font-family: "Playfair Display"; font-size: 42px; font-weight: 400; line-height: 110%; color: #004c27; margin-bottom: 12px; } .processing-subtitle { font-family: "Inter"; font-size: 16px; color: #6f6f6f; margin-bottom: 42px; } .processing-list { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 360px; text-align: left; } .processing-item { display: flex; align-items: center; gap: 12px; font-family: "Inter"; font-size: 15px; color: #004c27; } .treatment-card .processing-list { gap: 8px; } .treatment-card .cta--global { padding: 8px 18px !important; width: fit-content; } .treatment-card .processing-list .processing-item { font-size: 12px; } .icon-check { width: 18px; height: 18px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='9' cy='9' r='7' stroke='%23004C27' stroke-width='1.5'/%3E%3Cpath d='M5.5 9L8 11.5L12.5 7' stroke='%23004C27' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (max-width: 767px) { .processing-step { min-height: 420px; } .processing-title { font-size: 32px; } .processing-subtitle { font-size: 14px; } } .quiz-footer { display: flex; justify-content: space-between; align-items: center; margin: 10px; padding: 14px 16px; border-radius: 8px; background: #d4dcdf; } .quiz-socials { display: flex; gap: 14px; } .quiz-socials a { color: #0b5d38; font-size: 13px; text-decoration: none; } .quiz-trust { display: flex; align-items: center; gap: 12px; } .quiz-trust img { height: 24px; width: auto; } .quiz-footer svg { fill: #004c27; } .quiz-footer .footer-social { /* Was `gap: 0 !important` — the five social icons rendered flush against each other with no breathing room. */ gap: 12px; } @media (max-width: 767px) { .quiz-hero { padding: 24px 20px; text-align: center; } .quiz-hero-content h2 { font-size: 40px; } .quiz-hero-content h2 span { font-size: 52px; } .quiz-hero-image { text-align: center; margin-top: 20px; } .quiz-content { padding: 24px 30px; } .quiz-features { gap: 12px; flex-direction: column; } .quiz-footer { flex-direction: column; gap: 15px; } .quiz-buttons { flex-direction: column; } } .quiz-step { display: none; opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; } .quiz-step.active { display: block; animation: slideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .quiz-step.slide-out { animation: slideOut 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; /* Out of flow while it fades: the incoming step is already .active (in flow) during this 150ms-300ms overlap, so without this the outgoing step's height still counts too and .quiz-card briefly grows to the sum of both steps before snapping down once slide-out is removed. */ position: absolute; top: 0; left: 0; width: 100%; } @keyframes slideIn { 0% { opacity: 0; transform: translateY(30px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes slideOut { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-20px) scale(0.96); } } .validation-error { border-color: #dc3545 !important; background-color: #fff8f8 !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15); } .error-message { color: #dc3545; font-size: 13px; font-family: "Inter"; margin-top: 8px; text-align: center; display: none; } .error-message.show { display: block; animation: shake 0.4s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } .option--item.required-error { border-color: #dc3545 !important; background-color: #fff8f8 !important; } .checkout-container { margin: 0 auto; padding: 20px 0; } .checkout-container .form-control, .checkout-container .form-select { border-radius: 8px; border: 1px solid #e0e0e0; padding: 12px 15px; font-family: "Inter"; font-size: 14px; } .checkout-container .form-control:focus, .checkout-container .form-select:focus { border-color: #004c27; box-shadow: 0 0 0 3px rgba(0, 76, 39, 0.1); } .checkout-container label { font-family: "Inter"; font-weight: 500; font-size: 14px; color: #17222a; margin-bottom: 4px; } .checkout-container .card-field { background: #faf8f4; border-radius: 8px; padding: 12px 15px; border: 1px solid #e0e0e0; font-family: "Inter"; font-size: 14px; width: 100%; transition: border-color 0.3s; } .checkout-container .card-field:focus { border-color: #004c27; outline: none; box-shadow: 0 0 0 3px rgba(0, 76, 39, 0.1); } .checkout-container .checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .checkout-container .checkout-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; } .order-summary-box { background: #faf8f4; border-radius: 12px; padding: 20px; margin: 20px 0; } .order-summary-box .summary-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e8e8e8; font-family: "Inter"; font-size: 14px; } .order-summary-box .summary-item:last-child { border-bottom: none; } .order-summary-box .summary-total { font-weight: 600; font-size: 18px; color: #004c27; padding-top: 12px; border-top: 2px solid #004c27; margin-top: 8px; } .payment-errors { background: #fee; color: #dc3545; padding: 12px 15px; border-radius: 8px; font-family: "Inter"; font-size: 14px; display: none; margin-top: 15px; } .payment-errors.show { display: block; } .consent-check { font-family: "Inter"; display: flex; align-items: flex-start; gap: 10px; margin: 15px 0; } .consent-check input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: #004c27; cursor: pointer; } .consent-check label { font-size: 13px; font-weight: 400; color: #555; cursor: pointer; } .consent-check label a { color: #004c27; text-decoration: underline; } .checkout-spinner { display: none; width: 20px; height: 20px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; } .checkout-spinner.show { display: inline-block; } .btn-text { display: inline; } .btn-text.hide { display: none; } .payment-success { background: #d4edda; color: #155724; padding: 15px 20px; border-radius: 8px; font-family: "Inter"; font-size: 14px; display: none; margin: 15px 0; border: 1px solid #c3e6cb; } .payment-success.show { display: block; } @media (max-width: 767.9px) { .quiz-hero::before { top: 130px; width: 100%; height: 326px; } .quiz-hero::after { right: 0; width: 300px; opacity: 0.8; } .quiz-badge { width: fit-content; } .quiz-header { flex-direction: column; align-items: flex-start !important; } .quiz-header .step-navigator { width: 100%; } .quiz-footer .protocol--imgs img { max-width: 70%; } [data-step="5"] .options { flex-direction: column; min-height: auto; } } .option--item.required-error { border-color: #dc3545 !important; background-color: #fff8f8 !important; animation: shake 0.4s ease; } /**----------------------- **Product Css *-------------------------*/ .result-wrapper { padding-top: 20px; } .quality-badge { font-family: "Inter"; width: 100%; background: #004c271a; color: #004c27; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 16px; line-height: 140%; font-weight: 500; margin-bottom: 25px; } .treatment-card { background: #faf8f5; border-radius: 12px; padding: 10px; border: 1px solid #f1ede8; } .product-image-box { position: relative; background: #fff; border-radius: 10px; padding: 0; min-height: 290px; text-align: center; height: 100%; display: flex; justify-content: center; align-items: self-end; } .product-image-box img { max-height: 220px; object-fit: contain; } .recommended-tag { font-family: "inter"; position: absolute; top: 10px; left: 10px; background: #d7a45d; color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 20px; } .product-title { font-family: Playfair Display; font-weight: 400; font-style: Regular; font-size: 22px; color: #004c27; line-height: 130%; letter-spacing: -1px; } .price-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 18px; } .price { font-family: Inter; font-weight: 500; font-style: Medium; font-size: 20px; line-height: 130%; color: #004c27; margin-bottom: 0 !important; } .month { font-family: "inter"; font-size: 12px; opacity: 0.4; margin-bottom: 2px; } .benefits-list { list-style: none; padding: 0; margin: 0 0 20px; } .benefits-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; color: #145c37; font-size: 15px; } .benefits-list i { margin-top: 3px; color: #145c37; } .approval-note { font-family: "Inter"; display: inline-flex; align-items: center; gap: 8px; background: #fffbdc; color: #a57c00; padding: 10px; border-radius: 20px; font-size: 12px; line-height: 140%; } .testimonial-box { background: #d4dcdf; border-radius: 8px; padding: 14px 16px; margin-top: 15px; } .group-2 .testimonial-box { padding: 14px 8px; } .testimonial-box>div.small { font-family: Inter; font-weight: 400; font-style: Italic; font-size: 12px; line-height: 150%; letter-spacing: 0%; color: #004c27; } .testimonial-box p { font-family: Playfair Display; font-weight: 400; font-style: Italic; font-size: 16px; line-height: 130%; letter-spacing: 0px; vertical-align: middle; color: #004c27; } .testimonial-box span { font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; line-height: 140%; letter-spacing: 0%; vertical-align: middle; color: #17222a; opacity: 0.4; } #goToCheckoutBtn { max-width: 320px; margin: 30px auto 0; display: flex; justify-content: center; align-items: center; gap: 10px; } @media (max-width: 767px) { .product-title { font-size: 24px; } .price { font-size: 30px; } .testimonial-box p { font-size: 15px; } } .text-14-inter.mb-2.text-black { font-family: Inter; font-weight: 400; font-style: Italic; font-size: 12px; line-height: 150%; letter-spacing: 0%; vertical-align: middle; color: #000000; opacity: 0.6; } .option--item { position: relative; } /* [data-step="1"] .option--item.active::after, [data-step="4"] .option--item.active::after { content: '✓'; position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; background: #3d8c5e; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } */ .quiz-step:not([data-step="3"]) .option--item.active::after { content: '✓'; position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; background: #3d8c5e; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-step="4"] .options .option--item .option--title { font-size: 18px; margin-bottom: 0; text-align: left; } /* ── Tailwind utility shim (scoped) ───────────────────────────────────── The quiz's redesigned markup (assessment-quiz.astro + asw.js renderers) styles its layout with Tailwind utility classes. The standalone /assessment-quiz page imports Tailwind so they work there — but QuizModal.astro clones this markup into host pages, and index.astro / compare.astro never load Tailwind, so every one of these classes was inert there (Back button full-width, "Progress1/13" unspaced, result grids collapsed, ...). This block replicates ONLY the utilities the quiz actually uses, scoped under .quiz-popup so nothing leaks into host pages. Values mirror Tailwind v4's scale (1 = 0.25rem; md: 768px, lg: 1024px). On Tailwind pages these duplicate identical declarations, so rendering is unchanged there. */ .quiz-popup .flex { display: flex; } .quiz-popup .grid { display: grid; } .quiz-popup .flex-1 { flex: 1 1 0%; } .quiz-popup .flex-col { flex-direction: column; } .quiz-popup .flex-wrap { flex-wrap: wrap; } .quiz-popup .items-start { align-items: flex-start; } .quiz-popup .items-center { align-items: center; } .quiz-popup .items-end { align-items: flex-end; } .quiz-popup .justify-start { justify-content: flex-start; } .quiz-popup .justify-between { justify-content: space-between; } .quiz-popup .justify-end { justify-content: flex-end; } .quiz-popup .gap-2 { gap: 0.5rem; } .quiz-popup .gap-4 { gap: 1rem; } .quiz-popup .gap-6 { gap: 1.5rem; } .quiz-popup .mb-0 { margin-bottom: 0; } .quiz-popup .mb-2 { margin-bottom: 0.5rem; } .quiz-popup .mb-4 { margin-bottom: 1rem; } .quiz-popup .mb-6 { margin-bottom: 1.5rem; } .quiz-popup .mb-12 { margin-bottom: 3rem; } .quiz-popup .mt-0 { margin-top: 0; } .quiz-popup .mt-3 { margin-top: 0.75rem; } .quiz-popup .mt-4 { margin-top: 1rem; } .quiz-popup .mt-6 { margin-top: 1.5rem; } .quiz-popup .pl-2 { padding-left: 0.5rem; } .quiz-popup .pt-4 { padding-top: 1rem; } .quiz-popup .px-0 { padding-left: 0; padding-right: 0; } .quiz-popup .w-full { width: 100%; } .quiz-popup .h-full { height: 100%; } .quiz-popup .h-auto { height: auto; } .quiz-popup .max-w-full { max-width: 100%; } .quiz-popup .relative { position: relative; } .quiz-popup .z-1 { z-index: 1; } .quiz-popup .italic { font-style: italic; } .quiz-popup .text-left { text-align: left; } .quiz-popup .text-center { text-align: center; } .quiz-popup .text-black { color: #000; } .quiz-popup .text-gray-500 { color: #6b7280; } .quiz-popup .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .quiz-popup .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .quiz-popup .md\:flex-row { flex-direction: row; } .quiz-popup .md\:items-center { align-items: center; } .quiz-popup .md\:justify-center { justify-content: center; } .quiz-popup .md\:justify-end { justify-content: flex-end; } .quiz-popup .md\:gap-12 { gap: 3rem; } .quiz-popup .md\:pl-4 { padding-left: 1rem; } .quiz-popup .md\:pt-0 { padding-top: 0; } .quiz-popup .md\:w-1\/2 { width: 50%; } .quiz-popup .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .quiz-popup .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .quiz-popup .md\:col-span-3 { grid-column: span 3 / span 3; } .quiz-popup .md\:col-span-6 { grid-column: span 6 / span 6; } .quiz-popup .md\:col-span-12 { grid-column: span 12 / span 12; } } @media (min-width: 1024px) { .quiz-popup .lg\:mt-0 { margin-top: 0; } .quiz-popup .lg\:w-1\/4 { width: 25%; } }