/* ===== Variables rapides (ajuste au besoin) ===== */
:root{
  --sc-green:#2f6b4a;         /* barre de progression */
  --sc-grey:#e6e6e6;          /* rail progress */
  --sc-title:#0e1a1a;         /* titre */
  --sc-orange:#ed8210;
  --sc-orange-bg:#fdebd9;
  --sc-pink:#d77ad8;
  --sc-pink-bg:#fde6ff;
  --sc-blue:#6aa4de;
  --sc-blue-bg:#eaf3ff;
  --sc-radius:14px;
}

/* Container général : retire la marge top pour pouvoir centrer */
.sc-container{ max-width:1120px; margin: 11% auto; padding:0 20px; }

/* Hauteur visible = plein écran - offset (hauteur header du thème) */
:root{
  --sc-viewport-offset: 200px; /* ajuste si ton header est plus haut/bas */
}

/* Wrapper qui centre verticalement le bloc d'étape */
.sc-shell{
  min-height: calc(100vh - var(--sc-viewport-offset));
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  margin-top: 2rem;
}

/* (Optionnel) en mobile, un peu moins d'offset */
@media (max-width: 900px){
  :root{ --sc-viewport-offset: 90px; }
}

#footer{
    display:none;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: var(--sc-orange);
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: var(--sc-orange);
}


.sc-top{
  display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:10px;
}
.sc-back{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--sc-orange); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.sc-back-icon{ font-size:18px; line-height:1; }
.sc-step-label{ font-weight:600; color:#333; }

/* Progress */
.sc-progress{ height:6px; background:var(--sc-grey); border-radius:4px; overflow:hidden; margin:10px 0 26px; }
.sc-progress-bar{ display:block; height:100%; background:var(--sc-green); }

/* Hero title avec icône et surlignage */
.sc-hero{ display:flex; align-items:center; gap:14px; margin:8px 0 24px;     justify-content: center;}
.sc-hero-icon{
  width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center;    justify-content: center;
}
.sc-hero-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.sc-hero-title{
  font-size: 32px;
    line-height:1.15; color:var(--sc-title); margin:0; font-weight:800;
}
.sc-hero-title .sc-underline{
    content:url("/modules/sosc_customcart/views/img/purple.svg");
    position:absolute;
  padding:0 .06em;
  transform: translate(-303px, 18px);
}

/* Cartes */
.sc-cards{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:18px;
}
.sc-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
 min-height: 211px;
    min-width: 290px; border-radius:var(--sc-radius); text-align:center; text-decoration:none;
  border:2px solid transparent; background:#fff; transition:transform .08s ease, box-shadow .08s ease, border-color .12s ease;
}
.sc-card-illu{ width:80px; height:80px; margin-bottom:14px; }
.sc-card-illu img{ width:100%; height:100%; object-fit:contain; display:block; }
.sc-card-text{ color:#1c1c1c; font-size: 22px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 22px !important;}

/* Variantes couleurs, avec fond pastel + bord coloré */
.sc-card--orange{ background:var(--sc-orange-bg); border-color:var(--sc-orange); }
.sc-card--pink  { background:var(--sc-pink-bg);   border-color:var(--sc-pink); }
.sc-card--blue  { background:var(--sc-blue-bg);   border-color:var(--sc-blue); }

/* Hover focus */
.sc-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.06); }
.sc-card:focus{ outline:2px solid #111; outline-offset:2px; }

/* Alert (si guest sélectionné) */
.sc-alert{ border-radius:10px; padding:12px 14px; margin-top:18px; font-weight:600; }
.sc-alert.success{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }

/* Responsive */
@media (max-width: 900px){
  .sc-hero-title{ font-size:30px; text-align: center;}
  .sc-cards{ grid-template-columns:1fr; }
}


/* Le header est fixe en haut du container */
.sc-top-wrapper{
  max-width:700px;
  display:flex;
  flex-direction:column;
  margin:0 auto;
}

/* La zone centrée verticalement = seulement le contenu, pas le header */
.sc-shell{ min-height:0; } /* on neutralise l'ancien centrage global */
.sc-stage{
  min-height: calc(100vh - var(--sc-viewport-offset));
  display:flex;
  flex-direction:column;
      justify-content: flex-start;
  gap:20px;
}

/* Ajuste si besoin la compensation du header/menu du thème */
:root{ --sc-viewport-offset: 200px; } /* 200px est ton réglage actuel */
@media (max-width:900px){
  :root{ --sc-viewport-offset: 90px; }
}
.sc-infobox{
  background:#ffefe0; border:1px solid #f6d7b8; color:#6a3b00;
  padding:14px 16px; border-radius:12px;
}
.sc-field input, .sc-field select, .sc-field textarea{
  width:100%; padding:10px 12px; border:1px solid #dfe5dc; border-radius:10px;
  background:#fbfdf9;
}
.sc-req{ color:#d00; }
.sc-notes{ font-size:14px; color:#333; line-height:1.45; }
.sc-notes p{ margin:8px 0; }

/* Masquage des champs "retour en livraison" si non sélectionné */
.sc-delivery-return-only{ display:none; }
.sc-form.--return-delivery .sc-delivery-return-only{ display:block; }
.sc-field input, .sc-field select, .sc-field textarea{ width:100%; padding:10px 12px; border:1px solid #dfe5dc; border-radius:10px; background:#fbfdf9; }
.sc-infobox{ background:#ffefe0; border:1px solid #f6d7b8; color:#6a3b00; padding:14px 16px; border-radius:12px; }
.sc-req{ color:#d00; }
.sc-aller-only, .sc-retour-only{ display:none; }
.sc-form.--aller .sc-aller-only{ display:block; }
.sc-form.--retour .sc-retour-only{ display:block; }


.flatpickr-day.today {
    border-color: var(--sc-orange);
}
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    cursor: pointer;
    outline: 0;
    background:var(--sc-orange);
    color:#fff;
}
.flatpickr-weekdays, .flatpickr-months .flatpickr-month, .flatpickr-days,  .form-control:focus {
    background: #fbfdf8;
}
.form-control:focus {
    border-color: #dfe5dc;
    outline: 0;
}

.sc-form input.sc-invalid,
.sc-form select.sc-invalid,
.sc-form textarea.sc-invalid {
  border-color: #d9534f !important;
  background: #fff5f5 !important;
  outline: none;
}

.sc-cart-list, .sc-totals{
  box-shadow: 0px 1px 27px 0px rgba(0, 0, 0, 0.05);
}
@media (max-width:768px){
  .sc-top-wrapper {
    min-width: 100%;
  }
  .sc-field-row {
    display: flex !important;
    flex-direction: column;
}
#sc-coupon-code{
  width: 100%;
}
.sc-cart-line{
  display:flex !important;
}
.sc-info{
  display:none;
}
.sc-form{
  width:100%;
}
.sc-hero-title .sc-underline {
    
    transform: translate(-183px, 18px);
}
.sc-infobox {
    font-size: 12px;
}
.sc-hero-icon {
  display:none;
}
}

/* ==== Cart Simulator — look & feel ==== */

.cart-grid-right{
  width: 40% !important;
}
.scsim-card{
  padding:16px; background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.scsim-card__title{
  font-weight:700; font-size:16px; margin-bottom:12px;
}
.scsim-form{ display:flex; flex-direction:column; gap:12px; }
.scsim-row{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (max-width: 860px){
  .scsim-row{ grid-template-columns:1fr; }
}
.scsim-field{ display: grid; flex-direction: row; gap: 6px; grid-template-columns: 1fr 2fr; gap:6px;     align-items: center;}
.scsim-label{ color:#666; font-size:13px; }
.scsim-req{ color:#d00; margin-left:4px; }

.scsim-input, .scsim-select{
  width:100%; border:1px solid #ddd; border-radius:10px; padding:10px 12px;
  background:#fafafa; font-size:14px; line-height:1.2;
}
.scsim-input:focus, .scsim-select:focus{
  outline: none; border-color:#f2993b; background:#fff; box-shadow:0 0 0 3px rgba(242,153,59,.15);
}
.scsim-field label{
  text-align: left;
}
/* Visually hidden but screen-reader friendly */
.scsim-visuallyhidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Toggle group (boutique / livraison) */
.scsim-toggle{ display:flex; gap:8px; }
.scsim-toggle__btn{
  border:1px solid #ddd; background:#fff; padding:8px 12px; border-radius:10px;
  font-size:14px; cursor:pointer;
}
.scsim-toggle__btn.is-active{
  border-color:#f2993b; color:#f2993b; background:#fff7ef;
}
.scsim-plus{
  display:inline-block; width:18px; height:18px; border-radius:9px; margin-right:6px;
  background:#f2993b; color:#fff; font-weight:700; text-align:center; line-height:18px; font-size:12px;
}

/* Separator */
.scsim-sep{ border:0; border-top:1px solid #eee; margin:14px 0; }

/* Subtotal block */
.scsim-subtotal{
  border:1px solid #eee; border-radius:10px; padding:12px;
  background:#fff;
}
.scsim-subtitle{ font-weight:700; margin-bottom:8px; }
.scsim-line{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:6px 0; border-top:1px dashed #f2f2f2;
}
.scsim-line:first-of-type{ border-top:0; }
.scsim-line--neg{ color:#111; font-weight:700; }

/* Total green box */
.scsim-totalbox{
  margin-top:14px; background:#eef7e9; border:1px solid #d3ebc7; border-radius:10px;
  padding:12px; display:flex; justify-content:space-between; align-items:center;
}
.scsim-totalbox__title{ font-weight:700; }
.scsim-totalbox__value{ font-weight:700; font-size:18px; }
.scsim-hint{
  padding:12px; border:1px dashed #ddd; border-radius:10px; color:#666; font-size:14px; background:#fafafa;
}
@media (max-width:768px){
.cart-grid-right {
    width: 100% !important;
}

}