/* Vestra tenant portal theme (C-021). Loaded after /hk-brand/login.css on vestra.hooshmandkahroba.ir only.
   Palette from the Vestra logo: cyan #29ccff, deep teal #035a73, near-black ink. */

/* ---------- palette ---------- */
body.hk-auth {
  --hk-bg: #03141b;
  --hk-bg-2: #062a36;
  --hk-card: rgba(6, 26, 34, 0.88);
  --hk-card-border: rgba(41, 204, 255, 0.18);
  --hk-field: rgba(41, 204, 255, 0.04);
  --hk-field-border: rgba(120, 210, 240, 0.25);
  --hk-blue: #22c3f5;
  --hk-blue-2: #0b8fbf;
  --hk-link: #4fd6ff;
  background:
    radial-gradient(1100px 650px at 80% -10%, rgba(41, 204, 255, 0.16), transparent 60%),
    radial-gradient(900px 600px at 5% 110%, rgba(3, 90, 115, 0.35), transparent 60%),
    linear-gradient(160deg, #062a36 0%, #03141b 55%, #020c11 100%) !important;
}
body.hk-auth::before {
  background: linear-gradient(to bottom, transparent, rgba(41, 204, 255, 0.85), transparent);
  box-shadow: 0 0 24px 4px rgba(41, 204, 255, 0.3);
}
/* hexagon texture, echoing the Vestra mark */
body.hk-auth .tb-login-content::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%2329ccff' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
body.hk-auth .tb-login-content .tb-action-button,
body.hk-auth .tb-password-card button[color="accent"] {
  background: linear-gradient(90deg, #22c3f5 0%, #0b8fbf 100%) !important;
  box-shadow: 0 10px 28px rgba(11, 143, 191, 0.35) !important;
  color: #021a22 !important;
  font-weight: 600 !important;
}

/* ---------- hero ---------- */
.vs-hero { gap: 0; }
.vs-brand { display: flex; align-items: center; gap: 22px; }
.vs-mark { width: clamp(84px, 7.5vw, 124px); height: auto; filter: drop-shadow(0 10px 28px rgba(41, 204, 255, 0.3)); }
.vs-word { display: block; width: clamp(190px, 17vw, 300px); height: auto; }
.vs-sub { margin-top: 8px; color: #bfeefc; font-size: clamp(15px, 1.35vw, 21px); font-weight: 600; }
body.hk-fa .vs-sub { letter-spacing: 0; }
.vs-lead { max-width: 640px; margin: clamp(16px, 2.6vh, 26px) 0 0; color: #a9c7d2; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.9; }

.vs-visual { position: relative; margin: clamp(10px, 2.5vh, 26px) 0 0; max-width: 760px; color: #29ccff; }
.vs-visual > svg { display: block; width: 100%; height: auto; opacity: 0.95; }
.vs-chip {
  position: absolute; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px;
  padding: 9px 13px; border-radius: 14px; border: 1px solid rgba(41, 204, 255, 0.3);
  background: rgba(4, 30, 40, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4); color: #e8f8fd; white-space: nowrap;
  animation: vs-float 6s ease-in-out infinite;
}
.vs-chip > svg:first-child { grid-row: span 2; width: 26px; height: 26px; color: #29ccff; }
.vs-chip span { font-size: 11px; color: #8fb6c3; }
.vs-chip b { font-size: 16px; font-weight: 700; }
.vs-chip > svg:last-child:not(:first-child) { grid-column: 1 / -1; width: 100%; height: 22px; margin-top: 4px; color: #4fd6ff; }
.vs-c1 { top: 2%; inset-inline-start: 8%; }
.vs-c2 { top: -6%; inset-inline-start: 40%; animation-delay: -2s; }
.vs-c3 { top: 4%; inset-inline-end: 4%; animation-delay: -4s; }
.vs-c4 { bottom: -4%; inset-inline-end: 18%; animation-delay: -3s; }
@keyframes vs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.vs-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; margin-top: clamp(14px, 3vh, 30px); max-width: 680px; }
.vs-feat { display: flex; align-items: flex-start; gap: 12px; }
.vs-feat > svg { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 10px; color: #29ccff; background: rgba(41, 204, 255, 0.1); }
.vs-feat b { display: block; font-size: 14px; font-weight: 600; color: #e8f8fd; }
.vs-feat small { display: block; font-size: 12px; color: #8fb6c3; }

.vs-partner {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: clamp(16px, 3vh, 30px);
  padding: 8px 16px 8px 10px; border-radius: 999px; border: 1px solid rgba(41, 204, 255, 0.2); background: rgba(255, 255, 255, 0.03);
}
.vs-partner img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.vs-partner span { display: block; font-size: 11px; color: #8fb6c3; }
.vs-partner b { display: block; font-size: 14px; color: #e8f8fd; }

/* ---------- login card ---------- */
.vs-card-mark { width: clamp(84px, 13vh, 116px) !important; filter: drop-shadow(0 8px 22px rgba(41, 204, 255, 0.35)) !important; }
.vs-card-foot img { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.vs-card-foot::before, .vs-card-foot::after { background: rgba(41, 204, 255, 0.16); }

/* ---------- boot loader ---------- */
#tb-loading-spinner.tb-loading-spinner {
  background:
    radial-gradient(700px 500px at 50% 42%, rgba(41, 204, 255, 0.16), transparent 62%),
    linear-gradient(160deg, #062a36 0%, #03141b 58%, #020c11 100%);
}
#tb-loading-spinner.tb-loading-spinner::before {
  background-image: url("/hk-brand/sites/vestra/vestra-mark.png");
}
#tb-loading-spinner.tb-loading-spinner::after,
html[data-hk-lang="fa"] #tb-loading-spinner.tb-loading-spinner::after {
  content: "Vestra";
  letter-spacing: 0.06em;
  color: #c9f2ff;
  background:
    linear-gradient(90deg, transparent, #29ccff, #0b8fbf, transparent) 0 100% / 45% 3px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0 100% / 100% 3px no-repeat;
}
@keyframes hk-boot-pulse {
  0% { transform: scale(0.93); box-shadow: 0 0 0 0 rgba(41, 204, 255, 0.65), 0 0 24px rgba(41, 204, 255, 0.25); }
  55% { transform: scale(1.07); box-shadow: 0 0 0 20px rgba(41, 204, 255, 0), 0 0 52px rgba(41, 204, 255, 0.55); }
  100% { transform: scale(0.93); box-shadow: 0 0 0 0 rgba(41, 204, 255, 0), 0 0 24px rgba(41, 204, 255, 0.25); }
}

/* ---------- responsive ---------- */
@media (max-height: 820px) {
  .vs-lead { display: none; }
  .vs-feats { margin-top: 12px; }
}