.elementor-18527 .elementor-element.elementor-element-fb467e6{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-18527 .elementor-element.elementor-element-a87b1cc{width:100%;max-width:100%;}@media(min-width:768px){.elementor-18527 .elementor-element.elementor-element-fb467e6{--width:100%;}}/* Start custom CSS for shortcode, class: .elementor-element-a87b1cc *//* --- Make the whole page behave like a viewport panel --- */
.teo-wrap{
  min-height:100svh;           /* full screen */
  display:flex; align-items:center; justify-content:center;
  padding: clamp(12px,2.5vw,28px) 16px;
}

/* --- FIXED footer (progress + buttons) aligned to card width --- */
.teo-progress,
.teo-actions{
  width:min(1100px, 96vw);     /* match the card width */
  z-index:999;
}

/* progress just above the buttons */
.teo-progress{
  bottom:72px;                 /* distance from bottom (buttons sit below) */
  margin:0; padding:0;
}
.teo-bars{ gap:12px; }

/* buttons bar at very bottom */
.teo-actions{
  bottom:24px;
  margin:0;
  justify-content:space-between; /* Nazad left, Dalje right */
}

/* Optional: sticky-style background for footer on white pages */
@media (prefers-color-scheme: light){
  .teo-actions{ background:transparent; }
}

/* ---- layout constants (same width/padding for header/footers and card) ---- */
:root{
  --teo-container-w: min(1100px, 96vw); /* card & fixed bars width */
  --teo-card-pad: 28px;                 /* inner padding left/right of card */
}

/* card sized to the container width + space so fixed bars don’t overlap content */
.teo-card{
  width: var(--teo-container-w);
  padding-top: calc(72px + var(--teo-card-pad));     
  padding-bottom: calc(140px + var(--teo-card-pad)); /* space above fixed footer */
}

/* ---- FIXED header (logo) aligned with card left (same as "Nazad") ---- */
.teo-head{
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--teo-container-w);
  padding: 14px var(--teo-card-pad);
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* logo sits on the left padding edge */
  background: white;
  z-index: 1000;
}
.teo-logo{ height: 24px; }

/* When logged-in admin bar is present, nudge the logo down a bit */
@media (min-width: 783px){
  body.admin-bar .teo-head{ top: calc(16px + 32px); } /* admin bar ~32px */
}
@media (max-width: 782px){
  body.admin-bar .teo-head{ top: calc(16px + 46px); } /* admin bar ~46px */
}

/* ---- FIXED footer (progress + buttons), centered and aligned to card width ---- */
/* progress just above buttons */
.teo-progress{
  width: var(--teo-container-w);
  padding: 0 var(--teo-card-pad) !important;
  margin: 0 !important;
  z-index: 999;
}
.teo-bars{ gap: 12px; }

/* buttons on the very bottom */
.teo-actions{
  width: var(--teo-container-w);
  padding: 0 var(--teo-card-pad);
  margin: 0;
  justify-content: space-between; /* "Nazad" left, "Dalje/Završi" right */
  z-index: 999;
}

/* Logo size cap */
.teo-logo{
  max-height: 24px !important;
  height: auto !important;   /* ignore any HTML height */
  width: auto;               /* keep aspect ratio */
  object-fit: contain;
  display: block;
}

/* Mobile-only: stop vertical centering without changing the layout */
@media (max-width: 900px){
  /* Keep flex + horizontal centering, but top-align vertically */
  .teo-wrap{
    display:flex;                    /* keep your panel layout */
    justify-content:center;          /* keep horizontal centering */
    align-items:flex-start !important; /* <-- this is the key change */
  }

  /* If an Elementor parent container is vertically centering the widget,
     nudge it to the top too (very targeted). */
  .elementor .e-con:has(#teo-onboarding){
    justify-content:flex-start !important;
  }
}

/* Mobile: allow subject names to wrap to 2 lines (no ellipsis) */
@media (max-width: 560px){
  .teo-sleft{ min-width: 0 !important; }          /* let text shrink/wrap */
  .teo-sname{
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;             /* max 2 lines */
    line-clamp: 2 !important;                     /* future-friendly */
    text-overflow: clip !important;               /* no "..." */
    max-width: none !important;
  }
}/* End custom CSS */