/* === O2 VET LOGIN APP 2026 V1 FIX1 START === */
:root{
  --o2-login-orange:#ef6700;
  --o2-login-ink:#171c22;
  --o2-login-muted:#728093;
  --o2-login-card:rgba(255,255,255,.94);
  --o2-login-shadow:0 18px 46px rgba(34,38,42,.10);
}

html,
body.o2-login-app-body{
  width:100%!important;
  min-height:100%!important;
  margin:0!important;
}

body.o2-login-app-body{
  min-height:100dvh!important;
  overflow:hidden!important;
  color:var(--o2-login-ink)!important;
  background:#fbf8f3!important;
  font-family:Inter,Segoe UI,Arial,sans-serif!important;
}

body.o2-login-app-body .o2-login-app-page{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:100dvh!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-rows:124px minmax(0,1fr) 110px!important;
  position:relative!important;
  overflow:hidden!important;
  background-image:url("/static/unified_portal/o2vet-home-fullpage-background-v1.png?v=UI2026LOGIN1F1")!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}

/* top */
body.o2-login-app-body .o2-login-topbar{
  grid-row:1!important;
  z-index:5!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  padding:14px clamp(30px,5vw,96px) 0!important;
}

body.o2-login-app-body .o2-login-brand{
  width:188px!important;
  min-width:188px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-decoration:none!important;
}

body.o2-login-app-body .o2-login-brand img{
  display:block!important;
  width:188px!important;
  height:128px!important;
  object-fit:contain!important;
  margin:0!important;
}

body.o2-login-app-body .o2-login-brand-vet{
  display:block!important;
  margin-top:-8px!important;
  color:#181d23!important;
  font-size:40px!important;
  line-height:.92!important;
  font-weight:800!important;
  letter-spacing:-1.5px!important;
}

body.o2-login-app-body .o2-login-language{
  margin-top:14px!important;
  min-width:188px!important;
  height:50px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  border:1px solid rgba(20,28,36,.08)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 8px 22px rgba(25,31,36,.07)!important;
}

body.o2-login-app-body .o2-login-language::before{
  content:"◎"!important;
  flex:0 0 auto!important;
  color:#20262d!important;
  font-size:18px!important;
  font-weight:800!important;
}

body.o2-login-app-body .o2-login-language #o2-language-select{
  display:block!important;
  flex:1 1 auto!important;
  min-width:120px!important;
  height:48px!important;
  margin:0!important;
  padding:0 24px 0 0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#171d23!important;
  font-size:14px!important;
  font-weight:750!important;
  cursor:pointer!important;
}

body.o2-login-app-body #o2-language-switcher{
  display:none!important;
}

/* compact sign-in card */
body.o2-login-app-body .o2-login-stage{
  grid-row:2!important;
  z-index:4!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0 clamp(34px,6.2vw,118px) 8px!important;
}

body.o2-login-app-body .o2-login-card{
  box-sizing:border-box!important;
  width:min(480px,38vw)!important;
  min-width:390px!important;
  margin:0!important;
  padding:30px 30px 26px!important;
  border:1px solid rgba(25,33,40,.055)!important;
  border-radius:22px!important;
  background:var(--o2-login-card)!important;
  box-shadow:var(--o2-login-shadow)!important;
  backdrop-filter:blur(4px)!important;
}

body.o2-login-app-body .o2-login-card h1{
  margin:0 0 24px!important;
  color:var(--o2-login-ink)!important;
  font-size:44px!important;
  line-height:1!important;
  font-weight:820!important;
  letter-spacing:-1.6px!important;
}

body.o2-login-app-body #unified-login-form{
  display:grid!important;
  gap:14px!important;
}

body.o2-login-app-body .o2-login-field{
  display:block!important;
  margin:0!important;
}

body.o2-login-app-body .o2-login-field-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

body.o2-login-app-body .o2-login-input-shell{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  height:58px!important;
  border:1px solid rgba(90,105,120,.24)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.92)!important;
  overflow:hidden!important;
  transition:border-color .15s ease,box-shadow .15s ease!important;
}

body.o2-login-app-body .o2-login-input-shell:focus-within{
  border-color:rgba(239,103,0,.55)!important;
  box-shadow:0 0 0 4px rgba(239,103,0,.08)!important;
}

body.o2-login-app-body .o2-login-input-icon{
  width:54px!important;
  height:100%!important;
  flex:0 0 54px!important;
  display:grid!important;
  place-items:center!important;
  color:var(--o2-login-orange)!important;
  background:#fff1e3!important;
  font-size:22px!important;
  font-weight:800!important;
}

body.o2-login-app-body #username,
body.o2-login-app-body #password{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  padding:0 16px!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#1c2229!important;
  font:inherit!important;
  font-size:16px!important;
}

body.o2-login-app-body #username::placeholder,
body.o2-login-app-body #password::placeholder{
  color:#8a96a7!important;
  opacity:1!important;
}

body.o2-login-app-body #password{
  padding-right:48px!important;
}

body.o2-login-app-body .o2-password-toggle{
  position:absolute!important;
  right:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#788596!important;
  cursor:pointer!important;
  font-size:18px!important;
}

body.o2-login-app-body .o2-password-toggle:hover{
  background:#f7f8fa!important;
  color:#333b44!important;
}

body.o2-login-app-body #unified-login-button{
  width:100%!important;
  height:58px!important;
  margin:2px 0 0!important;
  border:0!important;
  border-radius:14px!important;
  background:linear-gradient(90deg,#ef5d00 0%,#f17700 100%)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(239,103,0,.20)!important;
  font-size:17px!important;
  font-weight:780!important;
  cursor:pointer!important;
}

body.o2-login-app-body #unified-login-button::after{
  content:"  →"!important;
  font-size:20px!important;
}

body.o2-login-app-body #unified-login-button:disabled{
  opacity:.68!important;
  cursor:wait!important;
}

body.o2-login-app-body #unified-login-status{
  min-height:20px!important;
  margin:12px 2px 0!important;
  color:#a02c2c!important;
  font-size:13px!important;
  line-height:1.4!important;
}

/* footer */
body.o2-login-app-body .o2-login-footer{
  grid-row:3!important;
  z-index:5!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  padding:4px clamp(34px,5vw,96px) 18px!important;
}

body.o2-login-app-body .o2-login-brand-unit{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:5px!important;
}

body.o2-login-app-body .o2-login-brand-caption{
  color:#6f7a87!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.1!important;
}

body.o2-login-app-body .o2-login-brand-unit--licensed img{
  display:block!important;
  width:auto!important;
  height:58px!important;
  max-width:245px!important;
  object-fit:contain!important;
}

body.o2-login-app-body .o2-login-brand-unit--powered img{
  display:block!important;
  width:auto!important;
  height:44px!important;
  max-width:150px!important;
  object-fit:contain!important;
}

@media(max-width:1099px){
  body.o2-login-app-body{overflow:auto!important;}
  body.o2-login-app-body .o2-login-app-page{
    min-height:100dvh!important;
    height:auto!important;
    grid-template-rows:108px auto 96px!important;
    background-position:62% top!important;
  }
  body.o2-login-app-body .o2-login-brand{
    width:150px!important;
    min-width:150px!important;
  }
  body.o2-login-app-body .o2-login-brand img{
    width:150px!important;
    height:102px!important;
  }
  body.o2-login-app-body .o2-login-brand-vet{font-size:32px!important;}
  body.o2-login-app-body .o2-login-stage{
    min-height:620px!important;
    align-items:center!important;
  }
  body.o2-login-app-body .o2-login-card{
    width:min(460px,52vw)!important;
    min-width:340px!important;
  }
}

@media(max-width:720px){
  body.o2-login-app-body .o2-login-app-page{background-position:70% top!important;}
  body.o2-login-app-body .o2-login-topbar{padding:10px 18px 0!important;}
  body.o2-login-app-body .o2-login-language{min-width:140px!important;}
  body.o2-login-app-body .o2-login-stage{
    min-height:580px!important;
    padding:28px 18px!important;
    align-items:flex-start!important;
  }
  body.o2-login-app-body .o2-login-card{
    width:100%!important;
    min-width:0!important;
    max-width:460px!important;
    padding:25px 22px 22px!important;
  }
  body.o2-login-app-body .o2-login-card h1{font-size:38px!important;}
  body.o2-login-app-body .o2-login-footer{padding:8px 18px 18px!important;}
  body.o2-login-app-body .o2-login-brand-unit--licensed img{height:46px!important;}
  body.o2-login-app-body .o2-login-brand-unit--powered img{height:36px!important;}
}
/* === O2 VET LOGIN APP 2026 V1 FIX1 END === */


/* === O2 VET LOGIN APP 2026 FINAL FULL-CANVAS START === */

/*
 * FINAL login composition:
 * - one complete full-page image fills the login viewport
 * - no separate pet/hero block
 * - no cropping of the approved composition
 * - only the live form + language selector sit above the background
 *
 * The approved visual asset is 1672x941. The page uses proportional
 * vw/vh coordinates so the live controls stay aligned when the image
 * stretches to another desktop resolution.
 */

body.o2-login-app-body{
  overflow:hidden!important;
  background:#fbf7f1!important;
}

body.o2-login-app-body .o2-login-app-page{
  position:relative!important;
  display:block!important;
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  overflow:hidden!important;
  background-image:url("/static/unified_portal/o2vet-login-fullscreen-final-v1.png?v=SERVER-R27-CLEAN")!important;
  background-repeat:no-repeat!important;
  background-position:0 0!important;
  background-size:100% 100%!important;
}

/* The O2 Vet mark is already part of the approved full-page composition. */
body.o2-login-app-body .o2-login-brand{
  display:none!important;
}

/*
 * The approved background already includes Green Cross and OMNI at the
 * correct corners, so hide the duplicate live footer visuals.
 */
body.o2-login-app-body .o2-login-footer{
  display:none!important;
}

/* Do not allow any historical hero/crop layer to appear above the canvas. */
body.o2-login-app-body .o2-login-hero,
body.o2-login-app-body .o2-login-visual,
body.o2-login-app-body .o2-login-illustration,
body.o2-login-app-body .o2-login-art,
body.o2-login-app-body .o2-login-right,
body.o2-login-app-body .o2-login-side-visual,
body.o2-login-app-body .o2-login-stage-hero,
body.o2-login-app-body .o2-login-pets,
body.o2-login-app-body .o2-login-hero-panel,
body.o2-login-app-body .o2-login-background-hero{
  display:none!important;
  background:none!important;
}

/* Topbar exists only to host the real language selector. */
body.o2-login-app-body .o2-login-topbar{
  position:absolute!important;
  inset:0!important;
  z-index:20!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  pointer-events:none!important;
}

/*
 * Approved background language control:
 * roughly x=1358..1592 / y=37..98 in a 1672x941 canvas.
 */
body.o2-login-app-body .o2-login-language{
  position:absolute!important;
  top:3.9vh!important;
  right:4.7vw!important;
  width:14.1vw!important;
  min-width:0!important;
  max-width:none!important;
  height:6.45vh!important;
  min-height:52px!important;
  max-height:68px!important;
  margin:0!important;
  padding:0 1.05vw!important;
  display:flex!important;
  align-items:center!important;
  gap:.65vw!important;
  border:1px solid rgba(30,38,44,.08)!important;
  border-radius:1.1vw!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 .55vw 1.5vw rgba(34,40,46,.075)!important;
  pointer-events:auto!important;
  box-sizing:border-box!important;
}

body.o2-login-app-body .o2-login-language::before{
  content:"◎"!important;
  color:#171d23!important;
  font-size:clamp(17px,1.2vw,22px)!important;
  font-weight:850!important;
  flex:0 0 auto!important;
}

body.o2-login-app-body .o2-login-language #o2-language-select{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  padding:0 1.4vw 0 0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#171d23!important;
  font-size:clamp(14px,1.05vw,19px)!important;
  font-weight:760!important;
  cursor:pointer!important;
}

body.o2-login-app-body #o2-language-switcher{
  display:none!important;
}

/*
 * The whole page is the stage now.
 * The card is aligned over the approved card in the full-page background:
 * x≈102, y≈272, w≈620, h≈462 on 1672x941.
 */
body.o2-login-app-body .o2-login-stage{
  position:absolute!important;
  inset:0!important;
  z-index:15!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  background:none!important;
  pointer-events:none!important;
}

body.o2-login-app-body .o2-login-stage::before,
body.o2-login-app-body .o2-login-stage::after{
  content:none!important;
  display:none!important;
}

body.o2-login-app-body .o2-login-card{
  position:absolute!important;
  left:6.05vw!important;
  top:28.85vh!important;
  width:37.15vw!important;
  height:49.05vh!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:5.1vh 2.3vw 3.1vh!important;
  border:1px solid rgba(28,35,42,.055)!important;
  border-radius:1.35vw!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 1.1vw 2.9vw rgba(34,39,44,.10)!important;
  backdrop-filter:none!important;
  pointer-events:auto!important;
  overflow:hidden!important;
}

body.o2-login-app-body .o2-login-card h1{
  margin:0 0 3.0vh!important;
  color:#171c22!important;
  font-size:clamp(42px,3.25vw,61px)!important;
  line-height:.98!important;
  font-weight:830!important;
  letter-spacing:-.12vw!important;
}

/* Sign in only: no Welcome back and no unsupported reset UI. */
body.o2-login-app-body .o2-login-card .o2-login-welcome,
body.o2-login-app-body .o2-login-card .o2-login-subtitle,
body.o2-login-app-body .o2-login-card [class*="forgot"],
body.o2-login-app-body .o2-login-card a[href*="forgot"],
body.o2-login-app-body .o2-login-card a[href*="reset"]{
  display:none!important;
}

body.o2-login-app-body #unified-login-form{
  display:grid!important;
  gap:2.0vh!important;
}

body.o2-login-app-body .o2-login-field{
  margin:0!important;
  display:block!important;
}

body.o2-login-app-body .o2-login-input-shell{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  height:7.0vh!important;
  min-height:58px!important;
  max-height:72px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border:1px solid rgba(91,104,119,.25)!important;
  border-radius:.95vw!important;
  background:#fff!important;
}

body.o2-login-app-body .o2-login-input-shell:focus-within{
  border-color:rgba(239,103,0,.55)!important;
  box-shadow:0 0 0 .23vw rgba(239,103,0,.075)!important;
}

body.o2-login-app-body .o2-login-input-icon{
  flex:0 0 4.15vw!important;
  width:4.15vw!important;
  height:100%!important;
  display:block!important;
  background-color:#fff0e2!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:1.55vw 1.55vw!important;
  font-size:0!important;
  color:transparent!important;
}

/* user icon */
body.o2-login-app-body .o2-login-field:nth-of-type(1) .o2-login-input-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef6700' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")!important;
}

/* lock icon */
body.o2-login-app-body .o2-login-field:nth-of-type(2) .o2-login-input-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef6700' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")!important;
}

body.o2-login-app-body #username,
body.o2-login-app-body #password{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  padding:0 1.45vw!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#1d232a!important;
  font-family:inherit!important;
  font-size:clamp(15px,1.12vw,20px)!important;
  font-weight:600!important;
}

body.o2-login-app-body #username::placeholder,
body.o2-login-app-body #password::placeholder{
  color:#8a96a7!important;
  opacity:1!important;
}

body.o2-login-app-body #password{
  padding-right:3.8vw!important;
}

body.o2-login-app-body .o2-password-toggle{
  position:absolute!important;
  right:.7vw!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:2.6vw!important;
  height:2.6vw!important;
  min-width:36px!important;
  min-height:36px!important;
  max-width:46px!important;
  max-height:46px!important;
  border:0!important;
  border-radius:.65vw!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:1.45vw 1.45vw!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23788596' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E")!important;
  color:transparent!important;
  font-size:0!important;
  cursor:pointer!important;
}

body.o2-login-app-body #unified-login-button{
  width:100%!important;
  height:7.5vh!important;
  min-height:60px!important;
  max-height:76px!important;
  margin:.2vh 0 0!important;
  border:0!important;
  border-radius:.95vw!important;
  background:linear-gradient(90deg,#ef5d00 0%,#f17700 100%)!important;
  color:#fff!important;
  box-shadow:0 .7vw 1.55vw rgba(239,103,0,.18)!important;
  font-size:clamp(17px,1.35vw,23px)!important;
  font-weight:780!important;
  cursor:pointer!important;
}

body.o2-login-app-body #unified-login-button::after{
  content:"  →"!important;
  font-size:1.18em!important;
}

body.o2-login-app-body #unified-login-status{
  min-height:1.2em!important;
  margin:1.3vh .2vw 0!important;
  color:#a02c2c!important;
  font-size:clamp(12px,.86vw,15px)!important;
  line-height:1.3!important;
}

/*
 * Desktop is the clinic target. On narrow windows keep the approved
 * background intact (no crop) and place the live card over the same
 * proportional area, with a minimum usable width.
 */
@media(max-width:1099px){
  body.o2-login-app-body{
    overflow:auto!important;
  }

  body.o2-login-app-body .o2-login-app-page{
    min-width:900px!important;
    min-height:506px!important;
    background-size:100% 100%!important;
  }

  body.o2-login-app-body .o2-login-card{
    min-width:335px!important;
  }
}

/* === O2 VET LOGIN APP 2026 FINAL FULL-CANVAS END === */

/* === O2 VET SERVER LOGIN RECOVERY R27 BEGIN === */
/*
 * Server-authoritative login repair.
 * Keep one real HTML select above the artwork-only background.
 * Do not render legacy duplicate language widgets or pseudo-layer controls.
 */
body.o2-login-app-body #o2-language-switcher{
  display:none!important;
}

body.o2-login-app-body .o2-login-language::before,
body.o2-login-app-body .o2-login-language::after{
  display:none!important;
  content:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

body.o2-login-app-body .o2-login-language{
  position:absolute!important;
  top:3.9vh!important;
  right:4.7vw!important;
  width:14.1vw!important;
  min-width:140px!important;
  max-width:240px!important;
  height:6.45vh!important;
  min-height:52px!important;
  max-height:68px!important;
  margin:0!important;
  padding:0 1.05vw!important;
  display:flex!important;
  align-items:center!important;
  border:1px solid rgba(30,38,44,.08)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 8px 24px rgba(34,40,46,.075)!important;
  pointer-events:auto!important;
  box-sizing:border-box!important;
  z-index:40!important;
}

body.o2-login-app-body .o2-login-language #o2-language-select{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0 28px 0 6px!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#171d23!important;
  font-size:clamp(14px,1.05vw,19px)!important;
  font-weight:760!important;
  cursor:pointer!important;
}

@media (max-width: 760px){
  body.o2-login-app-body .o2-login-language{
    top:18px!important;
    right:18px!important;
    width:150px!important;
    min-width:150px!important;
    height:48px!important;
    min-height:48px!important;
  }
}
/* === O2 VET SERVER LOGIN RECOVERY R27 END === */