/*
 * CHESTER WINDOWS — CANONICAL NUMBER BADGE
 * =========================================================
 *
 * Approved visual treatment:
 * - compact horizontal navy badge
 * - thin gold border
 * - gold number
 * - restrained 5px radius
 * - no gradient
 * - no shadow
 * - no medallion/circle treatment
 *
 * This is the standard for decorative/process numbering
 * across the public website and Home Preview.
 */

:root {
  --cw-number-badge-background: #0A2540;
  --cw-number-badge-border: #D4AF37;
  --cw-number-badge-text: #F5D78E;
}


/* ---------------------------------------------------------
   CANONICAL BADGE
   --------------------------------------------------------- */

.cw-number-badge,

/* Homepage product cards */
.card-media .num,

/* Homepage process */
.step > span,

/* Doors page numbered cards */
.doors-card-number,

/* Home Preview four-step navigation */
.home-preview-progress li > span,

/* Home Preview photographic guidance */
.home-preview-tips article > span,

/* Home Preview doorway instructions */
.doorway-marker-instructions article > span {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    48px !important;

  min-width:
    48px !important;

  height:
    30px !important;

  min-height:
    30px !important;

  padding:
    0 9px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid var(--cw-number-badge-border) !important;

  border-radius:
    4px !important;

  background:
    rgba(8,31,48,.78) !important;

  color:
    #e0ba62 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    .78rem !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    .08em !important;

  text-align:
    center !important;

  text-shadow:
    none !important;

  box-shadow:
    none !important;
}


/* Remove decorative pseudo-elements from old badge treatments */

.home-preview-tips article > span::before,
.home-preview-tips article > span::after,
.doorway-marker-instructions article > span::before,
.doorway-marker-instructions article > span::after {
  content:
    none !important;

  display:
    none !important;
}


/* ---------------------------------------------------------
   HOMEPAGE PRODUCT NUMBER
   Preserve whatever positional anchoring the card already
   provides. Only its visual language is standardised.
   --------------------------------------------------------- */

.card-media .num {
  line-height:
    1 !important;
}


/* ---------------------------------------------------------
   HOMEPAGE PROCESS
   --------------------------------------------------------- */

.step > span {
  margin-bottom:
    1.25rem !important;
}


/* ---------------------------------------------------------
   DOORS CARDS
   --------------------------------------------------------- */

.doors-card-number {
  margin-bottom:
    .85rem !important;
}


/* ---------------------------------------------------------
   HOME PREVIEW — PROGRESS NAV
   Give the canonical badge enough grid space.
   --------------------------------------------------------- */

.home-preview-progress li {
  grid-template-columns:
    48px minmax(0, 1fr) !important;

  gap:
    11px !important;
}


.home-preview-progress li.is-current > span {
  border-color:
    #F5D78E !important;

  background:
    #0A2540 !important;

  color:
    #F5D78E !important;
}


/* Completed steps keep the same component;
   state is shown by copy/progress treatment, not a new badge. */

.home-preview-progress li.is-complete > span {
  background:
    #0A2540 !important;

  border-color:
    #D4AF37 !important;

  color:
    #F5D78E !important;
}


/* ---------------------------------------------------------
   HOME PREVIEW — PHOTO GUIDE
   --------------------------------------------------------- */

.home-preview-tips article {
  grid-template-columns:
    48px minmax(0, 1fr) !important;

  gap:
    14px !important;
}


.home-preview-tips article > span {
  margin:
    0 !important;
}


/* ---------------------------------------------------------
   HOME PREVIEW — DOORWAY INSTRUCTIONS
   --------------------------------------------------------- */

.doorway-marker-instructions article {
  grid-template-columns:
    48px minmax(0, 1fr) !important;

  gap:
    14px !important;
}


.doorway-marker-instructions article > span {
  margin:
    0 !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   Same visual component, only slightly reduced in size.
   --------------------------------------------------------- */

@media (max-width: 640px) {

  .cw-number-badge,
  .card-media .num,
  .step > span,
  .doors-card-number,
  .home-preview-progress li > span,
  .home-preview-tips article > span,
  .doorway-marker-instructions article > span {
    width:
      44px !important;

    min-width:
      44px !important;

    height:
      26px !important;

    min-height:
      26px !important;

    padding:
      0 8px !important;

    font-size:
      .70rem !important;
  }


  .home-preview-progress li,
  .home-preview-tips article,
  .doorway-marker-instructions article {
    grid-template-columns:
      44px minmax(0, 1fr) !important;
  }
}