/* REQUIRED: x-cloak support */
[x-cloak] { display: none !important; }

.no-scroll { overflow: hidden; }

/* ================================
   Guide Library (overview page)
   ================================ */

*{
    font-family: var(--primary-font);
}

.guide-library{
  margin: 0 auto;
  margin-bottom: calc(var(--spacing)*20);
}

.guide-library__hero{
  text-align: left;
  margin-bottom: 14px;
}

.guide-library__title, .guide-title{
  margin: 10px 0 8px;
  color: var(--header-font-color);
  font-family: 'Graphik Light', Arial;
  font-size: 48px;
  font-weight: normal;
}

.guide-library__intro{
  margin: 0 auto;
  max-width: 860px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 12px 14px;
  text-align: left;
  line-height: 1.6;
}

/* Controls */
.guide-library__controls{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.guide-search{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background:#fff;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);

  /* prevents height jump */
  min-height: 44px;
}

.guide-search__icon{
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  opacity: .65;
  flex: 0 0 auto;
}

.guide-search__icon i{
  font-size: 16px;
  line-height: 1;
}

/* Hide native clear ("x") on <input type="search"> */
.guide-search__input::-webkit-search-cancel-button,
.guide-search__input::-webkit-search-decoration,
.guide-search__input::-webkit-search-results-button,
.guide-search__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Optional: make sure it doesn't get special styling */
.guide-search__input[type="search"]{
  -webkit-appearance: none;
  appearance: none;
}

/* input should shrink nicely and not wrap */
.guide-search__input{
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  font-size: var(--body-font-size);
  background: transparent;
  color:#111;
  line-height: 1.2;
}

.guide-search__clear{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;

  border: 1px solid #e5e7eb;
  background:#fff;
  border-radius: 10px;
  cursor:pointer;
  flex: 0 0 auto;
  padding: 0;
}

.guide-search__clear i{
  font-size: 10px;
  line-height: 1;
}

.guide-filters{
  display:flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.guide-filterChip{
  flex: 0 0 auto;
  border: 1px solid #e5e7eb;
  background:#fff;
  color:#111;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.guide-filterChip.is-active{
  border-color:#E60000;
}

.guide-list{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px){
  .guide-list{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px){
  .guide-list{ grid-template-columns: repeat(3, 1fr); }
}

/* Card */
.guide-card{
  background:#fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
  display:flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.guide-card{
  transition: opacity .16s ease, transform .16s ease;
  will-change: opacity, transform;
}

.guide-card.is-enter{
  opacity: 0;
  transform: translateY(6px);
}

.guide-card.is-leave{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.guide-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.guide-card__thumbPlaceholder{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.guide-card__thumbIconWrap{
  width: 74px;
  height: 74px;
     border-radius: 18px;
    display: grid;
    place-items: center;
    background: #e60000;
  box-shadow: var(--box-shadow);
  position: relative;
  z-index: 1;
}

.guide-card__thumbIcon{
  font-size: 38px;
  line-height: 1;
  color: #fff;
  opacity: 1;
}

.guide-card__thumb{
  display:block;
  width:100%;
  aspect-ratio: 16 / 6;
  background:#fff;
  border-bottom: 1px solid #eef2f7;
  overflow:hidden;
}

.guide-card__thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.guide-card__body{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.guide-card__title{
  margin:0;
  text-align: center;
}

.guide-card__title a{
  color:#000;
  font-family: var(--secondary-font);
  text-decoration:none;
  font-size: 18px;
}


.guide-card__title a:hover{ text-decoration: none; }

.guide-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.guide-card__link{
  margin-top: auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 10px;
  border-radius: var(--button-radius);
  border: 1px solid var(--border-color);
  text-decoration:none;
  color: var(--body-font-color);
  font-family: var(--header-font);
}

.guide-card__link:hover{
  opacity:.9;
  text-decoration: none;
}

.guide-library__empty,
.guide-library__noResults{
  margin-top: 14px;
  background:#e7e7e761;
  border: 1px dashed #00000054;
  border-radius: var(--button-radius);
  padding: 16px;
  text-align:center;
  font-family: var(--primary-font);
  color: #111;
}

.guide-library__noResults section p {
    text-align: center;
}

:root{
  --guide-accent: #E60000;     /* active/progress */
  --guide-complete: #111111;   /* completed */
  --guide-track: #F1F5F9;      /* progress track */
  --guide-inactive: #D1D5DB;   /* inactive circles */
}

/* ================================
   Guide Page (detail with stepper)
   ================================ */

/* Page container */
.guide-detail{
  overflow-x: hidden;
    margin-bottom: calc(var(--spacing)*20);
}

.guide-back{
  display:inline-block;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  text-transform: var(--button-text-transform);
  color: #000;
  font-family: var(--header-font);
  cursor: pointer;
  text-decoration: none;
  padding: 16px 30px;
  font-weight: 500;
  margin-bottom: 3px;
  font-size: 20px;
}

.guide-back__icon{
  margin-right: 10px;
}

.guide-back__icon i{
  color: #000;
    font-size: 20px;
}

.guide-back:hover{
  text-decoration: none;
}

.guide-hero{
  text-align:center;
  margin-bottom: 18px;
}

.guide-title{
  font-size: 2rem;
  margin: 10px 0 8px;
  color:#111;
}

.guide-thumbnail{
  display:block;
  margin: 0 auto 10px;
  max-width: 100%;
  border-radius: 14px;
}

.guide-tags{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

.guide-tag{
  font-size: .85rem;
  padding:6px 10px;
  border-radius:999px;
  background:#f2f4f8;
  border:1px solid #e5e7eb;
  color:#111;
}

.video-guide{ margin-top: 10px; }

.guide-videoLink{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  color:#1f4bd8;
}

/* Stepper shell */
.guide-stepper{
  margin-top: 18px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
  width: 100%;
  max-width: 100%;
}

/* Desktop top bar */
.guide-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px;
  border-bottom:1px solid #eee;
  background: #f8fafc;
  flex-wrap: wrap;
}

.guide-topbar__left{
  flex: 1 1 260px;
  min-width: 0;
}

.guide-topbar__right{
  flex: 0 0 auto;
  display:flex;
  gap:10px;
}

.guide-count{ font-weight:800; color:#111; }

.progress-bar{
  margin-top:10px;
  width: min(95%, 100%);
  background:#e9edf3;
  height: 8px;
  border-radius: 999px;
  overflow:hidden;
}

.progress{
  height:100%;
  width:0;
  background:var(--color-primary);
  transition: width .25s ease;
}

/* Buttons */
.guide-btn{
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--button-radius);
  text-transform: var(--button-text-transform);
  color: #000;
  font-family: var(--header-font);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 3px;
}

.guide-btn, .guide-btn--primary, .guide-back{
  padding: 10px 24px;
}

.guide-btn:hover,
.guide-btn--primary:hover,
.guide-back:hover{
  opacity: 0.8;
  transition: var(--global-transition);
}

.guide-btn:disabled{ opacity:.45; cursor:not-allowed; }

.guide-btn--primary{
  background: var(--button-bg-color);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  text-transform: var(--button-text-transform);
  color: var(--button-font-color);
  font-family: var(--header-font);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500; /* FIX: remove stray 's' that can break parsing */
  margin-bottom: 3px;
}

/* Body layout */
.guide-body{
  display:grid;
  grid-template-columns: 1fr;
}

/* Step indicators: mobile horizontal scroll */
.step-indicators{
  display:flex;
  gap:5px;
  padding: 12px 12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  border-bottom:1px solid #eee;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}

.step-indicators::-webkit-scrollbar{ height:8px; }

.step-indicators::-webkit-scrollbar-thumb{
  background:#e5e7eb;
  border-radius:999px;
}

.step-indicator{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  scroll-snap-align:center;
  text-align:left;
  max-width: 92%;
}

.step-indicator .circle{
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#cbd5e1;
  color:#fff;
  font-weight:900;
}

.step-indicator .label{
  font-size: 0.7em;
font-family: var(--primary-font), Arial;
  color:#000;
  white-space:nowrap;
  max-width: 230px;
  text-overflow:ellipsis;
  margin: 0;
}

.step-indicator.active .circle{ background:#000; }
.step-indicator.completed .circle{ background:#16a34a; }

/* Step container */
.step-container{ padding: 14px; }

/* Stage */
.guide-stage{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius: 14px;
  padding: 16px;
}

.guide-stage__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.guide-stage__title{
  margin:0;
  font-size: 1.15rem;
  color:#111;
}
.guide-stage__title span{
 font-family: var(--header-font), Arial;
}

.guide-stage__stepPill{
  display: inline-block;
  margin-right: 10px;
  font-size: .85rem;
  font-family: var(--header-font);
  color: #000000;
  background: #ffffff;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
}

.stage-description{
  color:var(--body-font-color);
  line-height:1.6;
  font-size: var(--body-font-size);
  margin-top:10px;
}
.stage-description p{
    text-align: left;
}

/* Tooltip */
.guide-tooltipBtn{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:999px;
  width:34px;
  height:34px;
  cursor:pointer;
  font-weight:900;
  flex: 0 0 auto;
}

.guide-tooltip{
  margin-top:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid #fde68a;
  background:#fffbeb;
  color:#92400e;
  font-size:.92rem;
}

/* Stage split: text + media */
.guide-stage__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}

.guide-stage__grid--noMedia{ grid-template-columns: 1fr; }

/* Media frame */
.guide-stage__media{
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #eef2f7;

  /* FIX: make it a stable positioning context */
  position: relative;
}

/* Portrait frame */
.guide-stage__media--portrait{
  width: min(460px, 100%);
  height: min(70vh, 980px);
  max-height: none;
  margin-inline: auto;
  background: #fff;
  overflow: hidden;
}

/* FIX: button must fill the frame so hint can anchor properly */
.guide-stage__media .guide-mediaBtn{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  width:100%;
  height:100%;
  display:block;
  cursor: zoom-in;
  position:relative; /* hint anchors here */
}

/* FIX: image must fill the button so object-fit/position works */
.guide-stage__media .stage-image{
  width:100%;
  height:100%;
  display:block;
}

/* Portrait: never crop */
.guide-stage__media--portrait .stage-image{
  object-fit: contain;
  object-position: 50% 0%;
  background: #fff;
}

/* Default stage-image rule can remain for non-media contexts */
.stage-image{
  width:100%;
  height:auto;
  display:block;
}

.guide-mediaHint{
  position:absolute;
  left:12px;
  bottom:12px;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size:.85rem;
  padding:6px 10px;
  border-radius:999px;

  /* FIX: ensure visible above image */
  z-index: 3;
  pointer-events: none;
}

/* Mobile sticky controls */
.guide-mobileBar{
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid #eee;
  padding: 10px 12px;
}

.guide-mobileBar__progress{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.guide-mobileBar__track{
  flex: 1 1 auto;
  height: 8px;
  background:#e9edf3;
  border-radius:999px;
  overflow:hidden;
}

.guide-mobileBar__fill{
  height:100%;
  width:0;
  background:#1f4bd8;
  transition: width .25s ease;
}

.guide-mobileBar__count{
  font-weight:900;
  color:#111;
  font-size:.95rem;
  flex: 0 0 auto;
}

.guide-mobileBar__buttons{
  display:flex;
  gap:10px;
}

.guide-mobileBar__buttons .guide-btn{
  flex: 1;
  padding: 12px 14px;
}

/* Hide mobile bar on desktop */
@media (min-width: 860px){
  .guide-mobileBar{ display:none; }
}

/* Hide desktop topbar on mobile */
@media (max-width: 859px){
  .guide-topbar{ display:none; }
}

/* Desktop split view */
@media (min-width: 860px){
  .guide-body{
    grid-template-columns: 280px 1fr;
    align-items:start;
  }
  .guide-search{
      width: 35%;
  }

  .step-indicators{
    flex-direction: column;
    overflow: auto;
    max-height: calc(100vh - 220px);
    position: sticky;
    top: 14px;
    border-bottom: 0;
    border-right: 1px solid #eee;
  }

  .step-container{ padding: 18px; }

  .guide-stage__grid{
    grid-template-columns: 1.1fr .9fr;
    align-items:start;
  }

  .guide-stage__media{
    position: sticky;
    top: 18px;
  }
}

.guide-stage__media:not(.guide-stage__media--portrait){
  aspect-ratio: 16 / 9;
  max-height: clamp(220px, 45vh, 420px);
}

/* Non-portrait: crop to fill */
.guide-stage__media:not(.guide-stage__media--portrait) .stage-image{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Lightbox */
.guide-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.guide-lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
}

.guide-lightbox__panel{
  position: relative;
  margin: 4vh auto;
  width: min(980px, 92vw);
  height: min(92vh, 900px);
  background:#0b0f18;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.guide-lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  z-index: 2;
}

.guide-lightbox__content{
  width:100%;
  height:100%;
  padding: 0;            /* important */
  overflow: auto;        /* scroll if needed */
  display:flex;
  align-items:center;
  justify-content:center;
}

.guide-lightbox__content img{
  display:block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;   /* always fit */
}

/* Progress */
.progress-bar,
.guide-mobileBar__track{
  background: var(--guide-track);
}

.progress,
.guide-mobileBar__fill{
  background: var(--guide-accent);
}

/* Step circles */
.step-indicator .circle{
  background: var(--guide-inactive);
  color: #fff;
}

/* Active */
.step-indicator.active .circle{
  background: var(--guide-accent);
}

/* Completed */
.step-indicator.completed .circle{
  background: var(--guide-complete);
}

.step-indicator.active{
  border-color: var(--border-color);
}

.step-container{
  position: relative;
  overflow: hidden;                 /* stops “below” content peeking */
  transition: height .18s ease;     /* optional: smooth height changes */
}

.step{
  position: absolute;
  inset: 0;
  width: 100%;
}

/* optional: stop clicks on hidden panels during overlap */
.step[style*="display: none"]{
  pointer-events: none;
}

@media (max-width: 859px){

  .step-indicators{
    gap: 10px;
    padding: 10px 12px;
    justify-content: flex-start;
  }

  .guide-back{
    margin-bottom: 20px;
    padding:10px 16px;
  }

  .step-indicator{
    /* make each step a small square pill, not a wide card */
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
    gap: 0;
  }

  .step-indicator .circle{
    width: 30px;
    height: 30px;
  }

  /* Hide labels completely on mobile */
  .step-indicator .label{
    display: none;
  }
}