/* VikiHub Login Experience v1.4.0 | Standalone fullscreen WooCommerce login */
:root { --vh-navy:#071c3a;--vh-orange:#fb7a16;--vh-ink:#102546;--vh-mute:#6c7b90; }
html { -webkit-text-size-adjust:100%; }
body.vh-login-screen { margin:0 !important; background:#fff; color:var(--vh-ink); font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
body.vh-login-screen *, body.vh-login-screen *::before, body.vh-login-screen *::after { box-sizing:border-box; }
body.vh-login-screen a { text-decoration:none; }
body.vh-login-screen a:focus-visible,
body.vh-login-screen button:focus-visible,
body.vh-login-screen input:focus-visible { outline:3px solid #fbb866; outline-offset:3px; }
.vh-login-layout { display:grid; grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr); min-height:100vh; min-height:100dvh; width:100%; overflow:clip; }
.vh-login-story { min-width:0; position:relative; min-height:100vh; min-height:100dvh; color:white; isolation:isolate; background:radial-gradient(circle at 80% 90%,#133b66,#071c3a 70%); overflow:hidden; }
.vh-login-photo { position:absolute; inset:0 0 0 36%; z-index:-2; background-position:55% 48%; background-size:cover; background-repeat:no-repeat; }
.vh-login-photo-tint { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#071a34 0%,rgba(7,26,52,.97) 27%,rgba(7,26,52,.65) 47%,rgba(7,26,52,.06) 78%),linear-gradient(0deg,rgba(6,21,45,.75),transparent 28%,transparent 73%,rgba(7,26,53,.15)); }
.vh-login-story-content { min-height:100vh; min-height:100dvh; padding:clamp(25px,3.5vw,54px) clamp(24px,4.4vw,72px) 25px; display:flex; flex-direction:column; position:relative; z-index:2; }
.vh-login-brand { display:inline-flex; align-items:center; width:max-content; gap:11px; color:#fff; line-height:1; }
.vh-login-brand-emblem { width:44px; height:44px; border:2px solid var(--vh-orange); border-radius:15px; display:grid; place-items:center; font-size:24px; font-weight:800; transform:rotate(-8deg); color:#fff; }
.vh-login-brand-type strong { font-size:25px; font-weight:800; letter-spacing:.015em; color:#fff; display:block; }
.vh-login-brand-type strong span { color:#ff8b29; }
.vh-login-brand-type small { display:block; font-size:9px; letter-spacing:.25em; font-weight:700; color:#c8d6e7; margin-top:7px; }
.vh-login-story-message { width:min(56%,360px); margin:auto 0; padding:26px 0; }
.vh-login-story-kicker { display:flex; align-items:center; gap:9px; color:#a9c9e8; font-size:10px; font-weight:800; letter-spacing:.12em; white-space:nowrap; }
.vh-login-story-kicker>span { width:7px; height:7px; background:var(--vh-orange); border-radius:50%; box-shadow:0 0 0 5px rgba(251,122,22,.14); }
.vh-login-story-message h2 { color:#fff; font-size:clamp(31px,3.35vw,57px); line-height:1.11; font-weight:850; letter-spacing:-.055em; margin:20px 0 16px; max-width:390px; overflow-wrap:normal; }
.vh-login-story-message h2 em { font-style:normal; color:#ff9a3a; }
.vh-login-story-message>p { max-width:360px; color:#cbd9e8; font-size:clamp(13px,1.05vw,15px); line-height:1.7; margin:0 0 24px; }
.vh-login-highlights { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.vh-login-highlights li { font-size:13px; font-weight:600; display:flex; gap:10px; align-items:center; color:#fff; }
.vh-login-highlights li>span { color:#77ecc8; background:rgba(91,226,177,.15); border-radius:50%; width:21px; height:21px; font-size:12px; display:grid; place-items:center; flex:0 0 auto; }
.vh-login-story-footer { font-size:9px; letter-spacing:.19em; font-weight:750; color:#9bb2ce; margin:0; }
.vh-login-story-footer span { color:var(--vh-orange); padding:0 7px; }
.vh-login-auth { display:flex; align-items:center; justify-content:center; min-width:0; min-height:100vh; min-height:100dvh; padding:32px clamp(25px,5.3vw,95px); background:radial-gradient(circle at 100% 0%,#fff1e5,transparent 24%),radial-gradient(circle at 0% 95%,#f3f7fc,transparent 29%),#fff; }
.vh-login-auth-inner { width:100%; max-width:440px; margin:0 auto; }
.vh-login-eyebrow { display:block; color:#e56c0e; font-size:11px; font-weight:850; letter-spacing:.15em; }
.vh-login-auth-heading h1 { font-size:clamp(38px,3.7vw,56px); letter-spacing:-.055em; font-weight:850; margin:10px 0 10px; line-height:1.09; color:#102546; }
.vh-login-auth-heading h1 span { color:var(--vh-orange); }
.vh-login-auth-heading>p { font-size:15px; line-height:1.55; margin:0 0 25px; color:var(--vh-mute); }
/* Native WooCommerce form: never replace authentication fields, nonce, or submit handling. */
.vh-login-woocommerce .woocommerce { width:100%; margin:0; padding:0; background:transparent; }
.vh-login-woocommerce .woocommerce:before,.vh-login-woocommerce .woocommerce:after { display:none; }
.vh-login-woocommerce .woocommerce-notices-wrapper { margin:0 0 12px; }
.vh-login-woocommerce .woocommerce-error,.vh-login-woocommerce .woocommerce-info,.vh-login-woocommerce .woocommerce-message { border-radius:12px; padding:13px 16px 13px 42px; font-size:13px; line-height:1.5; margin:0 0 15px; }
.vh-login-woocommerce .woocommerce>h2,
.vh-login-woocommerce #customer_login>.u-column1>h2 { display:none !important; }
.vh-login-woocommerce #customer_login,.vh-login-woocommerce #customer_login .u-column1,.vh-login-woocommerce #customer_login .col-1 { display:block; width:100% !important; float:none !important; max-width:none !important; margin:0 !important; padding:0 !important; }
.vh-login-woocommerce #customer_login .u-column2,.vh-login-woocommerce #customer_login .col-2 { display:block; width:100% !important; float:none !important; clear:both; margin:30px 0 0 !important; padding:26px 0 0 !important; border-top:1px solid #e7ebf0; }
.vh-login-woocommerce form.woocommerce-form-login,
.vh-login-woocommerce form.login,
.vh-login-woocommerce form.woocommerce-form-register { background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; }
.vh-login-woocommerce form .form-row,.vh-login-woocommerce form p { margin:0 0 15px; padding:0; }
.vh-login-woocommerce form label { font-size:13px; font-weight:700; color:#263955; margin:0 0 8px; display:block; line-height:1.4; }
.vh-login-woocommerce .required { color:#ec741b; }
.vh-login-woocommerce input[type="text"],.vh-login-woocommerce input[type="email"],.vh-login-woocommerce input[type="password"] { height:52px; display:block; border:1px solid #d9e1ec !important; background:#f8faff !important; border-radius:11px !important; padding:12px 15px !important; outline:none; width:100% !important; box-shadow:none !important; font-size:15px !important; color:#132c4c !important; transition:box-shadow .18s,border-color .18s; }
.vh-login-woocommerce input[type="text"]:focus,.vh-login-woocommerce input[type="email"]:focus,.vh-login-woocommerce input[type="password"]:focus { background:white !important; border-color:#f68b2a !important; box-shadow:0 0 0 4px rgba(251,122,22,.12) !important; }
.vh-login-woocommerce .woocommerce-form-login__rememberme { display:inline-flex !important; align-items:center; gap:7px; font-weight:500; color:#65758e; font-size:13px; margin:0 0 13px !important; }
.vh-login-woocommerce input[type="checkbox"] { accent-color:var(--vh-orange); }
.vh-login-woocommerce .woocommerce-form-login__rememberme input { margin:0; }
.vh-login-woocommerce button[type="submit"],.vh-login-woocommerce .woocommerce-button.button { border:0 !important; border-radius:11px !important; width:100%; height:52px; min-height:52px; background:#f57a14 !important; color:#fff !important; display:block; font-size:15px; font-weight:750; text-transform:none; text-align:center; cursor:pointer; box-shadow:0 10px 22px rgba(237,110,12,.18); transition:background-color .2s,transform .2s; }
.vh-login-woocommerce button[type="submit"]:hover,.vh-login-woocommerce .woocommerce-button.button:hover { background:#d9690c !important; transform:translateY(-1px); }
.vh-login-woocommerce .lost_password,.vh-login-woocommerce .woocommerce-LostPassword { text-align:right; margin:12px 0 0 !important; font-size:13px; }
.vh-login-woocommerce a { color:#e36c0f; font-weight:700; }
.vh-login-password-wrap { display:block; width:100%; position:relative; }
.vh-login-woocommerce .vh-login-password-wrap input[type="password"],.vh-login-woocommerce .vh-login-password-wrap input[type="text"] { padding-right:70px !important; }
.vh-login-password-toggle { position:absolute; top:50%; right:8px; transform:translateY(-50%); border:0; padding:8px; cursor:pointer; background:transparent; color:#536985; font-size:12px; font-weight:650; }
.vh-login-password-toggle:hover { color:var(--vh-orange); }
.vh-login-actions { font-size:13px; text-align:center; color:var(--vh-mute); margin:25px 0 0; }
.vh-login-actions>p { margin:0 0 18px; }
.vh-login-actions a { color:#df6c12; font-weight:750; }
.vh-login-actions a:hover { text-decoration:underline; }
.vh-login-actions .vh-login-back { color:#7b8ba1; font-weight:600; display:inline-block; font-size:12px; }
/* Tablet: hero photo remains visible, content gets extra width. */
@media (max-width:1080px) and (min-width:721px) {
 .vh-login-layout { grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr); }
 .vh-login-story-content { padding:30px 26px 23px; }
 .vh-login-story-message { width:min(67%,370px); }
 .vh-login-photo { left:24%; }
 .vh-login-story-message h2 { font-size:clamp(30px,3.9vw,43px); }
 .vh-login-auth { padding:25px 30px; }
}
/* Phone portrait: compact photograph-led header with a real form below. */
@media (max-width:720px) {
 .vh-login-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); min-height:100dvh; overflow:visible; }
 .vh-login-story { min-height:0; height:clamp(138px,24vh,195px); }
 .vh-login-story-content { min-height:0; height:100%; padding:18px 24px; }
 .vh-login-photo { inset:0 0 0 38%; background-position:50% 28%; }
 .vh-login-photo-tint { background:linear-gradient(90deg,#061b37 0%,rgba(6,27,55,.92) 36%,rgba(6,27,55,.15) 83%); }
 .vh-login-brand-emblem { width:39px; height:39px; font-size:22px; }
 .vh-login-brand-type strong { font-size:21px; }
 .vh-login-brand-type small { font-size:8px; margin-top:5px; }
 .vh-login-story-message { width:60%; padding:0; margin:auto 0 0; }
 .vh-login-story-kicker, .vh-login-story-message>p, .vh-login-highlights,.vh-login-story-footer { display:none; }
 .vh-login-story-message h2 { font-size:clamp(20px,5vw,25px); line-height:1.13; max-width:240px; margin:8px 0 0; }
 .vh-login-auth { min-height:0; padding:clamp(21px,3.5vh,38px) 25px 25px; align-items:flex-start; }
 .vh-login-auth-inner { max-width:440px; }
 .vh-login-auth-heading h1 { font-size:clamp(35px,9vw,45px); margin:5px 0 7px; }
 .vh-login-auth-heading>p { font-size:13px; margin:0 0 16px; }
 .vh-login-eyebrow { font-size:9px; }
 .vh-login-woocommerce input[type="text"],.vh-login-woocommerce input[type="email"],.vh-login-woocommerce input[type="password"] { height:47px; }
 .vh-login-woocommerce button[type="submit"],.vh-login-woocommerce .woocommerce-button.button { height:48px; min-height:48px; }
 .vh-login-woocommerce form .form-row,.vh-login-woocommerce form p { margin-bottom:11px; }
 .vh-login-actions { margin-top:15px; }
 .vh-login-actions>p { margin-bottom:13px; }
}
@media (max-width:375px) and (max-height:690px) {
 .vh-login-story { height:115px; }
 .vh-login-story-message { display:none; }
 .vh-login-auth { padding:14px 20px 18px; }
 .vh-login-auth-heading h1 { font-size:32px; }
 .vh-login-woocommerce form label { margin-bottom:5px; }
 .vh-login-woocommerce form .form-row,.vh-login-woocommerce form p { margin-bottom:8px; }
 .vh-login-woocommerce input[type="text"],.vh-login-woocommerce input[type="email"],.vh-login-woocommerce input[type="password"] { height:43px; }
 .vh-login-actions { margin-top:8px; }
}
/* Landscape phones: choose a compact two-column layout; avoid hiding content. */
@media (orientation:landscape) and (max-height:520px) {
 .vh-login-layout { grid-template-columns:minmax(0,.41fr) minmax(0,.59fr); grid-template-rows:auto; }
 .vh-login-story { height:auto; min-height:100vh; min-height:100dvh; }
 .vh-login-story-content { min-height:100vh; min-height:100dvh; padding:16px 18px; }
 .vh-login-photo { inset:0 0 0 20%; }
 .vh-login-story-message,.vh-login-story-footer { display:none; }
 .vh-login-auth { min-height:100vh; min-height:100dvh; padding:14px 22px; align-items:center; }
 .vh-login-auth-heading h1 { font-size:29px; }
 .vh-login-auth-heading>p { margin-bottom:8px; font-size:12px; }
 .vh-login-woocommerce input[type="text"],.vh-login-woocommerce input[type="email"],.vh-login-woocommerce input[type="password"] { height:40px; }
 .vh-login-woocommerce button[type="submit"],.vh-login-woocommerce .woocommerce-button.button { height:42px; min-height:42px; }
 .vh-login-woocommerce form .form-row,.vh-login-woocommerce form p { margin-bottom:7px; }
 .vh-login-woocommerce form label { margin-bottom:4px; }
 .vh-login-actions { margin-top:8px; }
 .vh-login-actions>p { margin-bottom:5px; }
}
@media (prefers-reduced-motion:reduce) { .vh-login-layout *, .vh-login-layout *::before { transition:none !important; animation:none !important; } }

/* Device status and theme controls - scoped to the guest auth layouts. */
body.vh-login-screen .vh-login-auth { position:relative; }
body.vh-login-screen .vh-device-bar {
 position:absolute; z-index:15; top:clamp(14px,2.3vw,30px); right:clamp(18px,3vw,42px);
 max-width:calc(100% - 30px); display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:9px;
 font:500 11px/1.2 system-ui,-apple-system,'Segoe UI',Arial,sans-serif; color:#526580;
}
body.vh-login-screen .vh-device-information { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
body.vh-login-screen .vh-device-chip { display:inline-flex; align-items:center; white-space:nowrap; gap:5px; padding:9px 10px; border:1px solid #e0e6ef; border-radius:999px; background:rgba(255,255,255,.84); color:#556780; }
body.vh-login-screen .vh-device-chip svg { width:14px; height:14px; flex:0 0 14px; }
body.vh-login-screen .vh-theme-switch { display:flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:#edf1f7; border:1px solid #e0e6ef; }
body.vh-login-screen .vh-theme-switch button { appearance:none; padding:7px 10px; border:0; border-radius:999px; background:transparent; color:#5a6d88; font:650 11px/1 system-ui,-apple-system,'Segoe UI',Arial,sans-serif; cursor:pointer; white-space:nowrap; box-shadow:none; }
body.vh-login-screen .vh-theme-switch button.is-active,body.vh-login-screen .vh-theme-switch button[aria-pressed="true"] { background:#fff; color:#0b2546; box-shadow:0 1px 5px rgba(6,25,53,.12); }
body.vh-login-screen .vh-theme-switch button:hover:not(.is-active) { color:#e56c0e; }
body.vh-login-screen .vh-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Keep hero headings clear of controls on short desktops; more room on registration. */
@media (min-width:721px) {
 body.vh-login-screen .vh-login-auth-inner { padding-top:36px; }
 body.vh-register-screen .vh-register-inner { padding-top:56px; }
}
/* Dark mode affects ONLY the auth side, leaving the brand photo consistent. */
html[data-vh-theme="dark"] body.vh-login-screen { color:#eaf1ff; background:#091526; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-auth { background:radial-gradient(circle at 100% 0%,#1b304f,transparent 31%),radial-gradient(circle at 2% 100%,#142c48,transparent 30%),#0a172b; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-auth-heading h1 { color:#f3f7ff; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-auth-heading>p,
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-actions,
html[data-vh-theme="dark"] body.vh-login-screen .vh-device-bar { color:#a9b9d1; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-eyebrow { color:#ff9c4a; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-device-chip { background:#172943; border-color:#314461; color:#d5e1f4; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-theme-switch { background:#152640; border-color:#314461; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-theme-switch button { color:#bbcde4; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-theme-switch button.is-active,
html[data-vh-theme="dark"] body.vh-login-screen .vh-theme-switch button[aria-pressed="true"] { background:#2e496b; color:#fff; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce form label,
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native label { color:#dce7f9 !important; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce input[type="text"],
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce input[type="email"],
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce input[type="password"],
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native input:not([type]),
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native input[type="text"],
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native input[type="email"],
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native input[type="tel"],
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native input[type="url"],
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native input[type="password"],
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native select,
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native textarea { background:#142942 !important; color:#f2f7ff !important; border-color:#40536d !important; }
html[data-vh-theme="dark"] body.vh-login-screen input::placeholder { color:#9aacc5 !important; opacity:1; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce .woocommerce-form-login__rememberme,
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-password-toggle { color:#c0cee1; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-actions a,
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native a { color:#ff9b47 !important; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-actions .vh-login-back,
html[data-vh-theme="dark"] body.vh-register-screen .vh-register-footer a { color:#b0c1db !important; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce .woocommerce-error,
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce .woocommerce-info,
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce .woocommerce-message,
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native .tutor-alert,
html[data-vh-theme="dark"] body.vh-register-screen .vh-registration-native .tutor-notice { background:#203452; color:#edf4ff; border-color:#ef873b; }
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce #customer_login .u-column2,
html[data-vh-theme="dark"] body.vh-login-screen .vh-login-woocommerce #customer_login .col-2 { border-color:#344660; }
@media (max-width:720px) {
 body.vh-login-screen .vh-device-bar { position:relative; top:auto; right:auto; width:100%; max-width:none; margin:0 0 16px; gap:6px; }
 body.vh-login-screen .vh-device-chip { padding:7px 8px; }
 body.vh-login-screen .vh-theme-switch button { padding:7px 9px; }
 body.vh-login-screen .vh-login-auth { display:block; }
 body.vh-login-screen .vh-device-platform { display:none; }
 body.vh-login-screen .vh-device-battery-label { display:none; }
}
@media (orientation:landscape) and (max-height:520px) {
 body.vh-login-screen .vh-device-bar { position:relative; top:auto; right:auto; max-width:none; margin-bottom:10px; }
 body.vh-login-screen .vh-login-auth { display:block; }
 body.vh-login-screen .vh-login-auth-inner { padding-top:0; }
 body.vh-login-screen .vh-theme-switch button { padding:6px 8px; }
}