/* offline_fixed_v6.css
   Fixes:
   - Footer-left animated logo: full footer height, centred, cropped left/right as needed
   - Footer-left flush to left inside footer (no extra inner padding on the left)
*/

:root{
  --canvas-bg: #ffffff;

  --jj-red: #e30000;
  --footer-red: #e30000;
  --footer-blue: #0b2b66;

  --muted: #555;
  --border: #cfcfcf;

  --shadow: 0 10px 28px rgba(0,0,0,.28);
  --radius: 16px;

  --btn-bg: #dbeeff;
  --btn-bg-hover: #cfe6ff;
  --btn-border: #6f93b7;
  --btn-shadow: 0 2px 0 rgba(0,0,0,.25);

  --btn-text: #000;
  --btn-text-accent: #0b66c3; /* for Recover Password button */

  --focus: 0 0 0 3px rgba(40,120,255,.25);
  --font: Arial, Helvetica, sans-serif;

  --maxw: 980px;

  /* animated footer logo tuning (no skew) */
  --logo-scale: 1.12;
  --logo-shift-x: 0px;
}

/* ===== Base / reset ===== */
body#offline, body#offline * { box-sizing: border-box; }
body#offline{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(#9f9f9f, #f4f4f4);
    min-height: 100vh;
    padding: 10px 14px;
    display: grid;
    place-items: center;
}

/* ===== App shell ===== */
body#offline .app{
  width: min(var(--maxw), 100%);
  min-height: min(720px, calc(100vh - 48px));
  background: var(--canvas-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: 96px 1fr 96px;
}

/* ===== Topbar ===== */
body#offline .topbar{ background: #e30000; }
body#offline .topbar-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 16px;
  min-height: 90px;
}
body#offline .brand-img{
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  max-width: 60%;
}
body#offline .brand-img-right{ margin-left: auto; }

/* ===== Content ===== */
body#offline .content{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
body#offline .offline-card{
  width: min(720px, 100%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);
  padding: 28px 34px;
}
body#offline .offline-title{
  font-size: 28px;
  margin: 6px 0 10px;
  font-weight: 700;
}
body#offline .offline-msg{
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 10px;
}
body#offline .offline-msg a{
  color: #000;
  text-decoration: underline;
}
/* If your markup uses offline-wrap instead of .content, centre it the same way */
body#offline .offline-wrap{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* Safety: if the card isn't picking up styles due to structure/specificity */
body#offline .offline-wrap .offline-card{
  width: min(720px, 100%);
}

/* 🛠️ emoji icon */
body#offline .offline-icon{
  font-size: 36px;   
  line-height: 1;
  display: block;       /* keeps it on its own line */
  margin: 0 0 10px 0;
}

/* ===== Footer ===== */
body#offline footer.footer{
  background: #e30000 !important;
  color: #fff !important;
  height: 96px !important;
  display: flex !important;
  overflow: hidden;
}
body#offline footer.footer, body#offline footer.footer *{
  font-size: 13px;
  line-height: 1.25;
}
body#offline .footer-link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: .95;
}

body#offline .footer-inner{
  /* IMPORTANT: left should be flush. Keep right padding so text doesn't hit edge */
  width: 100%;
  display: flex;
  gap: 14px;
  padding: 0 24px 0 0; /* no left padding */
}

/* Footer-left (animated logo container) */
body#offline footer.footer .footer-left{
  height: 100%;
  width: 220px;
  overflow: hidden;     /* crop left/right */
  display: flex;
  align-items: center;  /* vertical centre */
  justify-content: center; /* horizontal centre */
  padding: 0 8px 0 0;   /* slight breathing room to the right */
  margin: 0;
}

/* The animated logo itself: keep full height, allow cropping on sides, FORCE centre */
body#offline footer.footer .footer-left img.footer-anim,
body#offline footer.footer .footer-left img{
  height: 100%;
  width: auto;
  max-width: none;      /* don't shrink to container */
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Middle + right footer text */
body#offline .footer-mid,
body#offline .footer-right{
  min-width: 0;
  align-content: center;
}
body#offline .footer-mid{
  flex: 1 1 auto;
  padding: 0 10px;
}
body#offline .footer-right{
  flex: 0 0 auto;
  justify-content: flex-end;
  text-align: right;
  white-space: nowrap;
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  body#offline .topbar-inner{ padding: 0 18px; }
  body#offline .offline-card{ padding: 22px 22px; }
  body#offline .offline-title{ font-size: 22px; }
  body#offline .footer-inner{ padding-right: 14px; gap: 10px; }
  body#offline footer.footer .footer-left{ width: 160px; }
}
@media (max-width: 560px){
  body#offline .content{ padding: 26px 14px; }
  body#offline footer.footer{ height: auto !important; min-height: 96px !important; }
  body#offline .footer-inner{
    flex-direction: column;
    padding-right: 0;
    gap: 0;
  }
  body#offline footer.footer .footer-left{
    width: 100%;
    height: 96px;
    padding-right: 0;
  }
  body#offline .footer-mid,
  body#offline .footer-right{
    justify-content: center;
    text-align: left;
    white-space: normal;
    padding: 0 12px 10px;
  }
}