/* SGIVS appointment booking video guide (popup, guide page, help boxes, banner, hint) */
.vgModal, .vgModal *, .vgHelp, .vgHelp *, .vgHome, .vgHome *, .vgStepLink, .vgBanner, .vgBanner *,
.vgPage, .vgPage *, .vgToast, .vgToast *, .vgFaq, .vgFaq * { float:none; box-sizing:border-box; }

/* Language button content (native name + English name) */
.vgLangIcon { color:#EA5C0B; font-size:15px; }
.vgLang:hover .vgLangIcon, .vgLang:focus .vgLangIcon { color:#bd4b0a; }
.vgNative { font-weight:600; }
.vgLabel { font-weight:400; opacity:0.85; }

/* Small language buttons (homepage, help boxes, chat) */
.vgLangs { display:flex; flex-wrap:wrap; gap:8px; }
.vgLang { display:inline-flex; align-items:center; gap:7px; width:auto; min-height:36px; margin:0; padding:6px 12px; border:1px solid #d7dbf3; border-radius:6px;
    background:#fff; color:#29308B; font-family:"Poppins", sans-serif; font-size:13px; line-height:18px; cursor:pointer; text-decoration:none; }
.vgLang:hover, .vgLang:focus { border-color:#EA5C0B; background:#fff4ed; color:#29308B; outline:none; }
.vgLang:focus-visible { box-shadow:0 0 0 3px rgba(234,92,11,0.3); }
.vgLang .vgLabel { display:none; }

/* ---------- popup ---------- */
html.vgOpen, html.vgOpen body { overflow:hidden; }
.vgModal { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:16px; font-family:"Poppins", sans-serif; text-align:left; }
.vgModal[hidden] { display:none; }
.vgBackdrop { position:absolute; inset:0; background:rgba(15,23,42,0.72); }
.vgDialog { position:relative; width:100%; max-width:880px; max-height:calc(100vh - 32px); overflow-y:auto; padding:18px 20px 20px; background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.35); }
.vgHead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.vgHead small { display:block; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#EA5C0B; }
.vgHead h2 { margin:2px 0 0; padding:0; font-size:20px; line-height:26px; font-weight:700; color:#29308B; text-transform:none; }
.vgClose { flex:0 0 auto; width:36px; height:36px; margin:0; padding:0; border:1px solid #e5e7eb; border-radius:50%; background:#fff; color:#374151; font-size:16px; line-height:1; cursor:pointer; }
.vgClose:hover, .vgClose:focus { border-color:#EA5C0B; color:#EA5C0B; outline:none; }
.vgFoot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.vgBook { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:6px; background:#EA5C0B; color:#fff !important; font-size:15px; font-weight:700; text-decoration:none; text-transform:uppercase; }
.vgBook:hover, .vgBook:focus { background:#bd4b0a; outline:none; }
.vgMore { font-size:13px; color:#29308B !important; text-decoration:underline; }

/* ---------- player (popup + guide page) ---------- */
.vgTabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.vgTab { display:inline-flex; align-items:center; gap:8px; width:auto; margin:0; padding:8px 14px; border:1px solid #d7dbf3; border-radius:999px; background:#f8fafc;
    color:#29308B; font-family:"Poppins", sans-serif; font-size:13.5px; line-height:18px; cursor:pointer; }
.vgTab:hover, .vgTab:focus { border-color:#EA5C0B; outline:none; }
.vgTab:focus-visible { box-shadow:0 0 0 3px rgba(234,92,11,0.3); }
.vgTab.active { background:#29308B; border-color:#29308B; color:#fff; }
.vgStage { position:relative; width:100%; aspect-ratio:16 / 9; background:#0f172a; border-radius:10px; overflow:hidden; }
.vgVideo { position:absolute; inset:0; width:100%; height:100%; background:#000; }
.vgVideo[hidden], .vgChoose[hidden], .vgCover[hidden] { display:none; }
.vgChoose { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:16px;
    background:linear-gradient(135deg, #29308B 0%, #1d2266 100%); color:#fff; text-align:center; }
.vgChoose p { margin:0; font-size:16px; font-weight:600; color:#fff; }
.vgPicks { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.vgPick { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:170px; margin:0; padding:14px 10px; border:1px solid rgba(255,255,255,0.3); border-radius:10px;
    background:rgba(255,255,255,0.08); color:#fff; font-family:"Poppins", sans-serif; font-size:14px; cursor:pointer; }
.vgPick:hover, .vgPick:focus { background:#EA5C0B; border-color:#EA5C0B; outline:none; }
.vgPick .vgNative { font-size:18px; }
.vgPickPlay { font-size:12px; opacity:0.9; }
.vgCover { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #29308B 0%, #1d2266 100%); }
.vgCoverPlay { display:flex; flex-direction:column; align-items:center; gap:12px; width:auto; margin:0; padding:10px; border:0; background:none; color:#fff; font-family:"Poppins", sans-serif; font-size:16px; font-weight:600; cursor:pointer; }
.vgCoverIcon { display:flex; align-items:center; justify-content:center; width:74px; height:74px; border-radius:50%; background:#EA5C0B; font-size:28px; box-shadow:0 0 0 8px rgba(234,92,11,0.25); }
.vgCoverIcon .fa { margin-left:5px; }
.vgCoverPlay:hover .vgCoverIcon, .vgCoverPlay:focus .vgCoverIcon { background:#bd4b0a; }
.vgCoverPlay:focus { outline:none; }
.vgCoverPlay:focus-visible .vgCoverIcon { box-shadow:0 0 0 4px #fff; }
.vgHint { margin:8px 0 0; font-size:12px; color:#6b7280; }
/* Before a language is chosen: just the language cards (the tabs would repeat them, and a 16:9 stage would be mostly empty) */
.vgIsEmpty .vgTabs, .vgIsEmpty .vgHint { display:none; }
.vgIsEmpty .vgStage { aspect-ratio:auto; }
.vgIsEmpty .vgChoose { position:relative; inset:auto; padding:34px 16px 38px; }

/* Arabic site (Google Translate) or Arabic text: right-to-left */
html.translated-rtl .vgDialog, html.translated-rtl .vgPage, html.translated-rtl .vgHelp, html.translated-rtl .vgHome { direction:rtl; text-align:right; }

/* ---------- homepage, under "Book Your Appointment" ---------- */
/* The site gives this box a fixed height (110px, 180px on phones); let it grow with the video guide links */
.overlap-section .box-shadow { height:auto; display:flow-root; }
.vgHome { clear:both; display:flex; align-items:center; gap:14px; width:100%; margin-top:18px; padding:12px 16px; background:#fff7f2; border:1px solid #f6d6c3; border-radius:8px;
    font-family:"Poppins", sans-serif; text-align:left; }
.vgHomeIcon { display:flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:#EA5C0B; color:#fff; font-size:15px; }
.vgHomeIcon .fa { margin-left:3px; }
.vgHomeText { flex:1 1 auto; min-width:0; }
.vgHome p { margin:0; padding:0; font-size:13px; line-height:19px; color:#4b5563; }
.vgHome .vgHomeTitle { font-size:14.5px; font-weight:600; color:#29308B; }
.vgHome .vgHomeTitle a { color:#EA5C0B; font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.vgHome .vgHomeTitle a:hover { color:#bd4b0a; }
.vgHome .vgLangs { flex:0 0 auto; flex-wrap:nowrap; }
.vgHome .vgLang .vgLabel { display:inline; font-size:12px; }
.vgStepLink { display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:0; border:0; background:none; width:auto; color:#EA5C0B; font-size:13px; font-weight:600; text-decoration:underline; cursor:pointer; font-family:"Poppins", sans-serif; }
.vgStepLink:hover, .vgStepLink:focus { color:#bd4b0a; outline:none; }

/* ---------- help box (login / register / booking step one) ---------- */
.vgHelp { clear:both; width:100%; margin:0 0 16px; padding:12px 14px; background:#fff4ed; border:1px solid #f3c7ad; border-left:4px solid #EA5C0B; border-radius:8px; font-family:"Poppins", sans-serif; text-align:left; }
.vgHelp .vgHelpTitle { display:block; font-size:14px; font-weight:700; color:#29308B; }
.vgHelp .vgHelpTitle .fa { color:#EA5C0B; margin-right:4px; }
.vgHelp p { margin:2px 0 8px; padding:0; font-size:12.5px; line-height:18px; color:#4b5563; text-align:inherit; }
.vgHelp .vgHelpNote { margin:8px 0 0; font-size:11.5px; color:#6b7280; }
/* Compact variant (login / register cards): icon + title, then one even row of language buttons */
.vgHelp.vgHelpCompact { margin:14px 0 18px; padding:10px 12px 12px; border-left-width:1px; border-color:#f6d6c3; background:#fff7f2; }
.vgHelpHead { display:flex; align-items:center; gap:10px; }
.vgHelpIcon { display:flex; align-items:center; justify-content:center; flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:#EA5C0B; color:#fff; font-size:11px; }
.vgHelpIcon .fa { margin-left:2px; }
.vgHelpBody { flex:1 1 0; min-width:0; }
.vgHelpCompact .vgHelpTitle { font-size:13.5px; line-height:19px; }
.vgHelpCompact .vgHelpSub { display:block; margin-top:1px; font-size:12px; line-height:17px; color:#6b7280; }
.vgHelpCompact .vgLangs { display:grid; grid-template-columns:repeat(4, minmax(0, 120px)); justify-content:start; gap:6px; margin-top:10px; }
.vgHelpCompact .vgLang { justify-content:center; min-width:0; min-height:32px; padding:4px 2px; font-size:12.5px; white-space:nowrap; }
.vgHelpCompact .vgLang .vgLangIcon, .vgHelpCompact .vgLang .vgLabel { display:none; }
/* Login/register pages centre every paragraph (.gapping.front-login p) */
.gapping.front-login .vgHelp p { text-align:left; font-weight:400; margin:2px 0 8px; }
.gapping.front-login .vgHelp p.vgHelpNote { margin:8px 0 0; }
html.translated-rtl .gapping.front-login .vgHelp p { text-align:right; }

/* ---------- homepage launch banner ---------- */
.vgBanner { position:relative; clear:both; width:100%; padding:9px 48px 9px 16px; background:#29308B; color:#fff; font-family:"Poppins", sans-serif; font-size:13.5px; line-height:20px; text-align:center; }
.vgBanner[hidden] { display:none; }
.vgBanner b { color:#ffb37f; }
.vgBannerWatch { display:inline-block; width:auto; margin:0 0 0 10px; padding:3px 12px; border:1px solid #fff; border-radius:4px; background:none; color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; font-family:"Poppins", sans-serif; }
.vgBannerWatch:hover, .vgBannerWatch:focus { background:#EA5C0B; border-color:#EA5C0B; outline:none; }
.vgBannerClose { position:absolute; top:50%; right:10px; width:30px; height:30px; margin:-15px 0 0; padding:0; border:0; background:none; color:#fff; font-size:20px; line-height:30px; cursor:pointer; }
.vgBannerClose:hover, .vgBannerClose:focus { color:#ffb37f; outline:none; }

/* ---------- inactivity hint ---------- */
.vgToast { position:fixed; left:50%; bottom:20px; z-index:2147482000; display:flex; align-items:center; gap:10px; width:max-content; max-width:calc(100vw - 32px); transform:translateX(-50%);
    padding:10px 12px 10px 14px; background:#fff; border:1px solid #f3c7ad; border-left:4px solid #EA5C0B; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.18);
    font-family:"Poppins", sans-serif; font-size:13.5px; animation:vgToastIn 0.3s ease-out; }
.vgToast > .fa { color:#EA5C0B; font-size:20px; }
.vgToastLink { width:auto; margin:0; padding:0; border:0; background:none; color:#29308B; font-family:inherit; font-size:inherit; font-weight:600; text-align:left; text-decoration:underline; cursor:pointer; }
.vgToastClose { width:28px; height:28px; margin:0; padding:0; border:0; background:none; color:#6b7280; font-size:20px; line-height:28px; cursor:pointer; }
@keyframes vgToastIn { from { opacity:0; transform:translate(-50%, 12px); } to { opacity:1; transform:translate(-50%, 0); } }

/* ---------- /appointment-guide page ---------- */
.vgPage { clear:both; width:100%; margin:6px 0 30px; font-family:"Poppins", sans-serif; text-align:left; }
.vgPageIntro { margin-bottom:16px; padding:18px 20px; background:#fff; border:1px solid #e8e8e8; border-radius:10px; }
.vgPageIntro h4 { margin:0 0 6px; padding:0; font-size:16px; font-weight:700; color:#29308B; text-transform:none; }
.vgPageIntro p { margin:0; font-size:14px; line-height:22px; color:#4b5563; }
.vgPagePlayer { padding:16px; background:#fff; border:1px solid #e8e8e8; border-radius:10px; }
.vgPagePlayer > h4 { margin:0 0 10px; padding:0; font-size:15px; font-weight:600; color:#29308B; text-transform:none; }
.vgReady { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:16px 20px; background:#fff4ed; border:1px solid #f3c7ad; border-radius:10px; }
.vgReady strong { font-size:16px; color:#29308B; }
.vgSteps { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:16px 0 0; padding:0; list-style:none; counter-reset:vgstep; }
.vgSteps li { position:relative; padding:14px 14px 14px 52px; background:#fff; border:1px solid #e8e8e8; border-radius:10px; font-size:13px; line-height:19px; color:#4b5563; counter-increment:vgstep; }
.vgSteps li::before { content:counter(vgstep); position:absolute; left:14px; top:14px; width:28px; height:28px; border-radius:50%; background:#29308B; color:#fff; font-weight:700; font-size:14px; line-height:28px; text-align:center; }
.vgSteps li b { display:block; margin-bottom:2px; font-size:14px; color:#1f2937; }
.vgSteps li a { color:#EA5C0B; }
.vgPageMore { margin-top:14px; font-size:13px; color:#6b7280; }
.vgPageMore a { color:#29308B; text-decoration:underline; }

/* ---------- FAQs link ---------- */
.vgFaq { clear:both; display:block; text-align:center; line-height:22px; max-width:760px; margin:0 auto 16px; padding:10px 14px; background:#fff4ed; border:1px solid #f3c7ad; border-radius:8px; font-family:"Poppins", sans-serif; font-size:14px; color:#374151; }
.vgFaq .fa { color:#EA5C0B; }
.vgFaq a { color:#29308B; font-weight:600; text-decoration:underline; }

@media (max-width:1100px) {
    .vgHome { flex-wrap:wrap; }
    .vgHomeText { flex:1 1 0; }
    .vgHome .vgLangs { flex-basis:100%; padding-left:54px; }
}
@media (max-width:767px) {
    .vgSteps { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px) {
    .vgModal { padding:0; align-items:stretch; }
    .vgDialog { max-height:100vh; border-radius:0; padding:14px; }
    .vgHead h2 { font-size:17px; line-height:22px; }
    .vgTab { padding:7px 11px; font-size:12.5px; }
    .vgTab .vgLabel { display:none; }
    .vgPick { width:calc(25% - 6px); min-width:0; padding:12px 2px; font-size:12.5px; }
    .vgPick .vgNative { font-size:15px; }
    .vgPickPlay { font-size:11px; }
    .vgPicks { gap:8px; flex-wrap:nowrap; }
    .vgIsEmpty .vgChoose { padding:22px 10px 24px; }
    .vgPick .vgLabel { display:none; }
    .vgFoot { flex-direction:column; align-items:stretch; text-align:center; }
    .vgBook { justify-content:center; }
    .vgBanner { padding-left:12px; font-size:12.5px; }
    .vgBannerWatch { margin:6px 0 0; }
    .vgSteps { grid-template-columns:1fr; }
    .vgHome { align-items:flex-start; gap:10px; padding:12px; margin-top:12px; }
    .vgHomeIcon { flex-basis:32px; width:32px; height:32px; font-size:12px; }
    .vgHome .vgLangs { padding-left:0; flex-wrap:wrap; gap:6px; }
    .vgHome .vgLang { padding:6px 10px; }
    .vgHome .vgLang .vgLabel { display:none; }
    .vgReady { flex-direction:column; align-items:stretch; text-align:center; }
}