:root{
      --bg: #ffffff;
      --surface: #ffffff;
      --text: #0f141a;
      --muted: #616872;
      --line: #e6e7ea;
      --soft-line:#f0f1f3;
      --radius-xl: 18px;
      --radius: 14px;
      --shadow:0 6px 18px rgba(15,23,42,.06);
      --shadow-lg: 0 18px 60px rgba(15, 20, 26, .08), 0 8px 24px rgba(15, 20, 26, .06);
      --shadow-md: 0 8px 24px rgba(15, 20, 26, .06);
    }

    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:var(--bg);color:var(--text);
      /* font:16px/1.45 "sans-serif",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; */
      font-family: "Poppins", sans-serif;
    }

    .page{max-width:1152px;margin:36px auto 0;}
    .left{display:flex; flex-direction:column; gap:20px; background: #fff;}
    .right{display:flex; flex-direction:column; gap:16px}
    .shell {
      background:var(--surface);
      border: /*2px solid var(--line);*/ 0;
      border-radius:24px;
      box-shadow: 0 25px 50px -12px #00000040;
      padding:28px;
    }
    .text-green-600 {
      color: #00a63e;
    }
    .section-title-wrap {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
    }
    .section-icon-cont {
      display: flex;
      min-width: 40px;
      min-height: 40px;
      background: linear-gradient(135deg, #bcbcbc, #f0f0f0);
      border-radius: .75rem;
      align-items: center;
      justify-content: center;
    }
    .section-icon-cont svg {
      width: 20px;
      height: 20px;
    }

   .stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 18px;
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 20px;
  margin-bottom: 24px;
  z-index: 0;
  --progress: 0%;
}

/* Base line */
.stepper::before {
  content: "";
  position: absolute;
  left: calc(34px / 2);
  right: calc(34px / 2);
  top: calc(34px / 2 - 2px);
  height: 4px;
  background: var(--soft-line);
  z-index: 0;
}

/* Progress bar */
.stepper::after {
  content: "";
  position: absolute;
  left: calc(34px / 2);
  top: calc(34px / 2 - 2px);
  height: 4px;
  background: #1e1e1e;

  width: var(--progress, 0%);
  max-width: calc(100% - 34px);

  z-index: 0;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* Stepper items */
    .stepper__item {
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0.55;
      position: relative;
      z-index: 1;
      flex-direction: column;
    }

    .stepper__dot {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #e1e2e5;
      display: grid;
      place-items: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .stepper__label {
      font-size: 13px;
      color: #262c34;
    }

    .stepper__item--active {
      opacity: 1;
    }
    .stepper__item--active .stepper__dot {
      border-color: #1e1e1e;
    }
    .stepper__item--done {
      opacity: 1;
    }
    .stepper__item--done .stepper__dot {
      border-color: #1e1e1e;
      background: #1e1e1e;
      color: #fff;
    }

     /* .layout.main-section-wrapper {
          width: 100%;
          overflow: hidden; 
    } */  

    /* Shared layout */
    .panel{background:transparent;border-radius:var(--radius-xl)}
    .panel__title {
      margin:0 0 6px;
      font-size:22px;
      line-height:1.25;
      font-weight:700;
      font-size: 1.1rem;
    }
    .panel__subtitle {
      margin: 3px 0 18px;
      color:#616872;
      font-size: .9rem;
    }


    /* Fields */
    .field{display:grid;gap:8px;margin-bottom:12px}
    .field__label{font-size:13px;color:#262c34;font-weight:600}
    .input {
      height:48px;
      padding:0 16px;
      border-radius:12px;
      border:2px solid var(--line);
      background:#fff;
      color:var(--text);
      outline:none;
    }
    .input:focus{border-color:#000/*c9ccd2*/;box-shadow:0 0 0 3px rgba(56,97,251,.06)}

    .help-row{display:flex;align-items:center;gap:10px;color:#616872;font-size:14px;margin-top:8px}

    .actions {
      display:flex;
      gap:12px;
      margin-top: 2rem;
      justify-content: space-between;
    }
    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-weight: 600;
      padding: 1rem 2rem;
      border-radius:12px;
      border: 2px solid var(--line);
      background:#fff;
      color:#2a2f36;
      cursor:pointer;
      box-shadow:0 6px 16px rgba(0,0,0,.04);
    }
    .btn--ghost{background:#fff}
    .btn--primary{background:#2b2b2b;color:#fff;border-color:#2b2b2b;font-weight:600}
    .btn--icon-end{padding-right:12px}
.sidebar {
      position: relative;
    }
    /* Summary */
    .summary {
      background:#fff;
      border: 2px solid var(--line);
      border-radius:16px;
      padding:18px;
      box-shadow:var(--shadow-md);
      /* position: sticky; */
    }
    .summary__title{margin:0 0 12px;font-size:15px;font-weight:700}
    .summary__row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--soft-line);color:#2a2f36}
    .summary__row:last-child{border-bottom:0}
    .summary__total{display:flex;justify-content:space-between;align-items:center;padding-top:12px;font-weight:700}

    /* Trust */
    .trust {
      margin-top:16px;
      background:#fff;
      border:2px solid var(--line);
      border-radius:16px;
      padding:18px;
      box-shadow:var(--shadow-md);
    }
    .trust__title{margin:0 0 10px;font-weight:700}
    .trust__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:#2a2f36}
    .trust__item{display:flex;align-items:center;gap:10px}

    /* Step visibility */
    .step{display:none}
    .step--active{display:block}

    /* Step 2 option cards */
    .options{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:18px;margin:14px 0 8px}
    .option {
      position:relative;
      display:flex;
      flex-direction:column;
      gap:6px;
      align-items:flex-start;
      text-align:left;
      padding:18px;
      border-radius:14px;
      border:2px solid var(--line);
      background:#fff;
      box-shadow:0 4px 10px rgba(0,0,0,.03);
      cursor:pointer;
    }
    .option__title{    font-weight: 500;
    color: #000;
    font-size: 16px;
   }
    .option__desc {
      color:#616872;
      font-size:12px;
      padding: 0 22px 0 0;
    }
    .option__radio {
      position:absolute;
      right:16px;
      top:35%;
      transform:translateY(-35%);
      width:22px;
      height:22px;
      border-radius:50%;
      border:2px solid #d6d7da;
      background:#fff;
      opacity: .4;
    }
    .option--selected{background:#fbfbfb;border:2px solid #111;box-shadow:0 10px 24px rgba(0,0,0,.08)}
    .option--selected .option__radio {
      border-color:#111;
      box-shadow:inset 0 0 0 5px #111;
      opacity: 1;
    }
    
    /* Step 4 — Instructor list */
    .instructors{display:grid;gap:18px}
    .instructor {
      position:relative;
      display:grid;
      grid-template-columns:56px 1fr auto;
      align-items:center;
      gap:20px;
      padding:14px 16px;
      border-radius:16px;
      background:#fff;
      border:2px solid var(--line);
      box-shadow:0 6px 18px rgba(0,0,0,.04);
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .instructor:hover{box-shadow: 0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a
;transform:translateY(-5px)}
.instructor:hover .instructor__avatar {
      border: 2px #171717 solid;
}
    .instructor__avatar{width:60px;height:60px;border-radius:12px;background: linear-gradient(135deg, #bcbcbc, #f0f0f0);display:grid;place-items:center;font-size:18px;   border: 2px #e6e7e5 solid; transition: all 0.3s ease-in-out;}
    .instructor__avatar svg {
    width: 28px;
    height: 28px;
    }
    .instructor__body{display:grid;gap:6px;justify-items:start;text-align:left}
    .instructor__name{font-weight:700}
    .instructor__meta{color:#616872;font-size:14px}
    .instructor__sub{color:#616872;font-size:13px}
    .instructor__price{display:grid;gap:2px;justify-items:end}
    .instructor__amount{font-weight:700; font-size: 1.5rem;}
    .instructor__unit{color:#616872;font-size:10px}
    .instructor__radio{
      position: absolute;
      left: 60px;
      top: 6px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid #ffffff;
      background: #000000;
      /* display: grid; */
      place-items: center;
      color: #ffffff;
      transition: border-color .2s ease, box-shadow .2s ease;
    display: none;}
    .instructor--selected{background:#f0f0f0;border:2px solid #111;box-shadow:0 10px 24px rgba(0,0,0,.08);transform:translateY(-5px)}
    .instructor--selected .instructor__radio{    border: 2px #fff solid;}

    /* Step 5 — Packages */
    .packages{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:18px;margin-top:12px}
    .package {
      position:relative;
      background:#fff;
      border:2px solid var(--line);
      border-radius:16px;
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:12px;
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
      cursor:pointer;
      box-shadow:0 6px 18px rgba(0,0,0,.04);
      padding: 20px 20px 20px;
    }
    .package:hover {
      box-shadow:0 12px 28px rgba(0,0,0,.08);
      transform:translateY(-5px);
    }
    .popular-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #000;
      color: #fff;
      padding: 4px 15px;
      border-radius: 20px;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 600;
    }
    .package--selected{border:2px solid #111;background:#ededed;box-shadow:0 10px 24px rgba(0,0,0,.08);transform:translateY(-5px)}
    .package__radio {
      position:absolute;
      top:16px;
      right:16px;
      width:30px;
      height:30px;
      border-radius:50%;
      border:/*2px solid #d6d7da;*/ 0;
      background:#fff;
      display:grid;
      place-items:center;
      opacity: .4;
      top: 20px;
    }
    .package--selected .package__radio {
      border-color:#111;
      opacity: 1;
      background-color: #000;
    }
    .package__title{font-weight:700;font-size:22px; color: #000; max-width: 90%; line-height: 1.2;}
    .package__desc{font-size:14px;color:var(--muted)}
    .package__price{font-weight:700;font-size:20px; font-size: 22px; color: green;}
    .package__old{font-size:14px;text-decoration:line-through;color:#888}
    .package__save{background:#d9f4e2;border-radius:8px;padding:6px 10px;font-size:13px;color:#056a2f; width: 100%; border: 1px #056a2f2e solid;
    margin-top: 10px;}
    .package__details{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#616872;cursor:pointer;padding-top:6px}
    .package__accordion{display:none}
    .package__accordion--open{display:block;animation:fadeIn .22s ease}

  /* Tabs (BEM-ish) */
    .tab {
      background:#fff;
      border:2px solid var(--line);
      border-radius:12px;
      height:48px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#2a2f36;
      cursor:pointer;
    }
    .tab--active{background:#fbfbfb;border:2px solid #111;box-shadow:0 10px 24px rgba(0,0,0,.08)}
  .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px}
    .tab{background:#fff;border:1px solid var(--line);border-radius:12px;height:45px;display:inline-flex;align-items:center;justify-content:center;color:#2a2f36;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.04);font-weight:600; font-size: 14px;}
    .tab--active{background:#fbfbfb;border:2px solid #111;box-shadow:0 10px 24px rgba(0,0,0,.08)}


    /*-----Step 6----*/
    /* Date pills */
    .date-pills{display:flex; gap:12px; flex-wrap:wrap; justify-content: flex-start;}
    .pill{display:grid; place-items:center; border:1px solid var(--line); border-radius:14px; cursor:pointer; background:#fff; position:relative; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      padding: .75rem 1rem;}
    .pill input{position:absolute; inset:0; opacity:0; pointer-events:none}
    .pill .dow{text-transform:uppercase; font-size:12px; color:#6b7280; transition: color 0.2s ease}
    .pill .num{font-weight:700; font-size:14px; transition: transform 0.2s ease}
    .pill:hover{transform: translateY(-5px); box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a; border-color:#d1d5db}
    .pill:hover .dow{color:#111827}
    .pill:hover .num{transform: scale(1.05)}
    .pill:has(input:checked){outline:2px solid #111827; outline-offset:-3px; background-color: #ececec;}
    .pill:has(input:checked):hover{transform: translateY(-5px)}
    span.mon {font-size: 14px;}

    /* Subheading */
    .subheading{margin:6px 0 0; font-size:14px; color:var(--muted)}

    /* Slots */
    .time-slots{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; position: relative;}
    .card {
      background:var(--card); 
      border:2px solid var(--line); 
      border-radius:16px; 
      box-shadow:var(--shadow);
    }
    .slot{display:block; padding:0}
    .slot input{position:absolute; inset:0; opacity:0}
    .slot .slot-body{display:flex; align-items:center; gap:12px; padding:16px; border-radius:14px}
    .slot .slot-icon{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#f3f4f6; color:#111827; border:1px solid var(--line); flex-shrink:0}
    .slot .slot-time{font-weight:600; flex:1}
    .slot.card{border:1px solid var(--line); position: relative;}
    .slot:has(input:checked) .slot-body{outline:3px solid #111827; outline-offset:-3px}

    /* Section header */
    .section-header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 30px;}
    .section-header .title{display:flex; gap:12px; align-items:center}
    .section-header .icon{width:40px; height:40px; display:grid; place-items:center; color:#111827; background: linear-gradient(135deg, #bcbcbc, #f0f0f0); border-radius:10px; border:1px solid var(--line)}
    .section-header h1{margin:0; font-size:16px; font-weight: 500;}
    .section-header p{margin:2px 0 0; color:var(--muted); font-size:14px}
    .pager{display:flex; align-items:center; gap:10px}
    .pager .date{color:var(--muted); font-size:14px; position: relative; left: -40px; top: -3px;}

    @media (max-width: 980px){
      .layout{grid-template-columns:1fr}
      .options{grid-template-columns:1fr}
    }

    /* Form Styles */
  .details-form{display:flex; flex-direction:column; gap:20px}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .form-group{display:flex; flex-direction:column; gap:8px}
  .form-label{font-size:14px; font-weight:600; color:#374151}
  .form-input, .form-textarea{
    appearance:none; 
    border:1px solid var(--line); 
    border-radius:10px; 
    padding:12px 14px; 
    font-family:inherit; 
    font-size:15px; 
    color:var(--text); 
    background:#fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .form-input:focus, .form-textarea:focus{
    outline:none; 
    border-color:#111827; 
    box-shadow:0 0 0 3px rgba(17,24,39,.08)
  }
  .form-input::placeholder, .form-textarea::placeholder{color:#9ca3af}
  .form-textarea{resize:vertical; min-height:100px}
  .form-notice{
    display:flex; 
    align-items:center; 
    gap:10px; 
    padding:12px 14px; 
    background:#f9fafb; 
    border:1px solid var(--line); 
    border-radius:10px; 
    font-size:13px; 
    color:#6b7280
  }
  .form-notice svg{flex-shrink:0; color:#9ca3af}

  /* Time Info in Summary */
  .time-info{display:flex; flex-direction:column; gap:4px}
  .time-label{font-size:14px; color:var(--muted)}
  .time-value{font-weight:700; font-size:15px; color:var(--text)}
  .time-detail{font-size:14px; color:var(--text)}
  .time-location{font-size:14px; color:#6b7280}



    /* Summary */
  .summary{
    padding: 16px;
    position: sticky;
    top: 60px;
    z-index: 9;
    background: #fff;
  }
  .summary h4 {
    margin:0 0 10px;
    font-size: 14px;
    }
  .kv{display:grid; gap:8px; margin:0}
  .kv > div{display:flex; justify-content:space-between; gap:12px}
  .kv dt{color:var(--muted); font-size: 14px;}
  .kv dd{margin:0; font-weight:600; font-size: 14px;}
  div#sumSlot {font-size: 14px;}
  .kv .em{font-weight:700}
  .kv .muted{font-weight:600; color:#111827}
  .divider{height:1px; background:var(--line); margin:12px 0}
  .total{display:flex; justify-content:space-between; font-weight:700; font-size:16px; color: #000;}
  .price{font-weight:800;} 


  /* Why */
.why{padding:16px}
.why h4 {
  margin:0 0 8px;
  font-size: 14px;
}
.ticks{margin:0; padding:0; list-style:none; display:grid; gap:8px; color:#374151}
.tick {
  display:inline-grid; 
  place-items:center; 
  width:14px; 
  height: 14px; 
  border-radius:999px; 
  background:#ecfdf5; 
  color: #00a63e;
  border:1px solid #00a63e; 
  margin-right:8px; 
  font-size:9px;
    position: relative;
    top: -3px;}

/* Utilities */
.muted{color:var(--muted)}



    /* ==== EXTRA CSS ONLY ==== */

/* Two-row layout (Row 1: form + sticky summary, Row 2: trust full width) */
/* .layout.layout--grid{
  display:grid;
  grid-template-columns:1.6fr .9fr;
  grid-template-areas:
    "flow summary"
    "trust trust";
  gap:24px;
} */
 
.flow{ grid-area:flow; }
/* .sidebar{ grid-area:summary; position:sticky; top:16px; align-self:start; } */
.trust{ grid-area:trust; }
/* Radios as cards – make the whole label clickable */
.option{ position:relative; }
.option > input[type="radio"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}

/* Selected state without JS (progressive enhancement) */
.option:has(> input[type="radio"]:checked){
  background:#fbfbfb;
  border:2px solid #111;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.option:has(> input[type="radio"]:checked) .option__radio{
  border-color:#111; box-shadow:inset 0 0 0 5px #111;
}
label.option, .option:has(> input[type="radio"]:checked) {
  transition: all 0.3s ease-in-out;
}
label.option:hover, .option:has(> input[type="radio"]:checked) {
  box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a
/*3px 3px 15px 0 #d9d9d9;*/;
  transform: translateY(-5px);
}
.option:has(> input[type="radio"]:checked) {
  background: #ececec;
}

/* Keyboard focus rings */
.option > input[type="radio"]:focus-visible ~ .option__radio,
.option > input[type="radio"]:focus-visible ~ .option__title,
.option > input[type="radio"]:focus-visible ~ .option__desc{
  outline:2px solid #3861fb; outline-offset:2px;
}
.option:focus-within{ box-shadow:0 0 0 3px rgba(56,97,251,.12); }

/* Tabs as radio chips */
.tab{ position:relative; }
.tab > input[type="radio"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.tab:has(> input[type="radio"]:checked){
  background:#fbfbfb;
  border:2px solid #111;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.tab > input[type="radio"]:focus-visible + span{
  outline:2px solid #3861fb; outline-offset:3px;
}
.tab:focus-within{ box-shadow:0 0 0 3px rgba(56,97,251,.12); }

/* jQuery Validate visuals */
.field-error {
    display: block;
    font-size: .9rem;
    margin-top: 0px;
    padding: 6px 12px;
    border-radius: 10px;
    margin: 10px 0;
    color: #a94442;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
}
.input.error{
  border-color:#b91c1c !important;
  box-shadow:0 0 0 3px rgba(185,28,28,.08) !important;
}
/* Highlight invalid radio cards */
.option:has(> input.error:not(:checked)){ border-color:#b91c1c !important; }
.tab:has(> input.error:not(:checked)){ border-color:#b91c1c !important; }

@media (max-width:980px){
    .ct-section-inner-wrap {
        padding: 40px 0 40px 0;
    }
    .page {
        padding: 18px 10px;
    }
  .layout.layout--grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "flow"
      "summary"
      "trust";
  }
  .sidebar{ position:static; }
  .stepper {
        gap: 12px;
      }
      .stepper__dot {
        width: 34px;
        height: 34px;
      }
      .stepper__label {
        display: none;
      }
      .stepper::before,
      .stepper::after {
        top: 12px;
      }
      .packages {
        display:grid;
        grid-template-columns: 1fr;
      }
}

@media (max-width: 767px) {
    /* .ct-section-inner-wrap {
        padding: 40px 0 40px 0 !important;
    } */
    .stepper {
        gap: 12px;
      }
      .stepper__dot {
        width: 26px;
        height: 26px;
      }
      .stepper__label {
        display: none;
      }
      .stepper::before,
      .stepper::after {
        top: 12px;
      }
      .packages {
        display:grid;
        grid-template-columns: 1fr;
      }
      .time-slots{grid-template-columns:1fr 1fr}

      /* Date pills - smaller on mobile */
      .date-pills{gap:8px; justify-content: flex-start;}      
      .pill .dow{font-size:10px}
      .pill .num{font-size:18px}
      
      /* Time slots - single column */
      .time-slots{grid-template-columns:1fr !important; gap:10px}
      .slot .slot-body{padding:12px}
      .slot .slot-icon{width:36px; height:36px}
      .slot .slot-time{font-size:15px}


       /* Section header - stack vertically */
      .section-header{flex-direction:column; align-items:flex-start; gap:12px}
      .section-header .title{width:100%}
      .section-header h1{font-size:20px}
      .section-header p{font-size:13px}
      .pager{width:100%; justify-content:space-between}
      .pager .btn{flex:1; max-width:80px; padding:8px 10px; font-size:14px}
      .pager .date{font-size:13px}
}

/* Extra small mobile */
    @media (max-width: 375px){            
      .pill .dow{font-size:9px}
      .pill .num{font-size:16px}
    }
    @keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}


/* --- Step 6: contain Slick inside the card and prevent horizontal spill --- */

/* Make sure every parent clips overflow */
#step6 .date-time-slot-main-wrapper,
#step6 .dates-wrapper,
#step6 .date-slots {
  max-width: 100%;
  overflow: hidden;               /* <— key: clip the wide slick-track */
}

/* Let Slick control layout once initialized (avoid flex conflict) */
.date-slots:not(.slick-initialized) {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.date-slots.slick-initialized { 
  display: block;
}

/* Standard Slick guards */
.date-slots,
.date-slots .slick-list,
.date-slots .slick-track {
  min-width: 0;                   /* allow shrinking in grid/flex parents */
  width: 100%;
}

/* The list must hide the overly-wide track */
.date-slots .slick-list {
  overflow: hidden !important;    /* <— enforce clipping here as well */
  margin: 0 -8px;                 /* balance slide inner padding so edges align */
  padding: 0 8px;                 /* keep first/last pill breathing room */
}

/* Ensure slides flow left-to-right as Slick expects */
.date-slots .slick-slide {
  float: left;
  height: auto;
  min-height: 1px;
  outline: none;
}

/* One wrapper per slide to space pills without pushing the container width */
.date-slots .slot-item {
  padding: 0 8px;                 /* matches slick-list padding/margins above */
  box-sizing: border-box;
}

/* Pill stays compact; no 100% stretching */
.slot-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Optional: prevent any ancestor from forcing horizontal scrollbars */
#step6 .panel, 
#step6 .layout {
  overflow-x: hidden;
}
/* gutters between grid cells */
			.time-slots .slick-slide > div { padding: 8px 0; box-sizing: border-box;  column-gap: 1rem; display: flex;}

			/* make each label fill its cell */
			.time-slots .pill.slot-time { 
			  width: 100%;
			  display: /*block;*/ flex !important;
			}

			/* nice pill styling (tweak to taste) */
			.time-slots .pill.slot-time .pill-content {
			  display: block;
			  padding: 14px 18px;
			  border-radius: 14px;
			  border: /*1px solid #e5e7eb;*/ 0;
			  background: #fff;
			  box-shadow: /*0 2px 8px rgba(0,0,0,.06);*/ none;
			  text-align: center;
			}

      label.pill.slot-time svg {
        background: #f5f5f5;
        padding: 10px;
        color: #7c7c7c;
        width: 40px;
        height: 40px;
        border-radius: 10px;
  }
        label.pill.slot-time.active-time svg{
        background-color: #000;
        color: #fff;
      }

      /*Sadhan Da--------------------Starts------------------*/
      /* Fade-up animation for confirmation message */
			.custom-confirmation-message {
			  opacity: 0;
			  transform: translateY(20px);
			  animation: fadeUp 0.5s ease-out forwards;
			}

			@keyframes fadeUp {
			  from {
			    opacity: 0;
			    transform: translateY(20px);
			  }
			  to {
			    opacity: 1;
			    transform: translateY(0);
			  }
			}

			.step h1, .step h2 { scroll-margin-top: 72px; } /* match your header height */

      /*Sadhan Da--------------------ends------------------*/

   

/*Gnaga-----------------------------------------------------------------------------*/
.layout.main-section-wrapper {
    display: flex;
    gap: /*2rem;*/0;
    align-items: flex-start;
}

.left-section {
  float: left;
  width: calc(65% - 20px); 
  margin-right: 40px;
  box-sizing: border-box;
}

.right-section {
  float: left;
  width: calc(35% - 20px);
  box-sizing: border-box;
}

/* Ensure slick buttons are visible and clickable */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Left button (Previous) */
.slick-prev {
    left: /*500px*/ 540px !important;
    top: -63px !important;
    text-indent: -35px;
}

/* Right button (Next) */
.slick-next {
  right: 40px !important;
  top: -63px !important;
  text-indent: 30px;
}

/* Optional: Add arrow symbols if missing */
.slick-prev::before,
.slick-next::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
}


/* When disabled */
.slick-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.layout.main-section-wrapper .btn {
  padding: 10px 20px;
  font-size: 13px;
  transition: all 0.15s ease-in-out;
}
.layout.main-section-wrapper .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;

}
.layout.main-section-wrapper .btn.btn--ghost:hover {
    background-color: #f5f5f5;
  }
.slick-prev:before, .slick-next:before {
  color: #000 !important;
}
#step6 .date-time-slot-main-wrapper, #step6 .dates-wrapper, #step6 .date-slots {
  overflow: visible !important;
}
.slick-prev,
.slick-next {
  font-size: 14px !important; 
  color: #000 !important;     
}

.slick-prev::before,
.slick-next::before {
  margin-right: 5px;
}
/* .slick-prev::before {
  content: "← Prev" !important;
}

.slick-next::before {
  content: "Next →" !important;
} */
 button.btn.ghost {
    display: none;
}
.pager .date {
    position: relative;
    left: -40px;
    top: -7px;
}

.pill-content {
    display: grid;
    align-items: end;
    justify-content: space-between;
    align-content: space-around;
    justify-items: center;
}
.timeslots-wrapper {
    margin-top: 40px;
}
.timeslots-wrapper .slick-prev, .timeslots-wrapper .slick-next {
  top: -23px !important;
}
.timeslots-wrapper .slick-prev {
  left: 540px !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
}
:-webkit-any(li, div._important), :is(li, div._important) {
  font-size: 14px;
}
#prefTabs .tab {
  transition: all 0.3s ease-in-out;
}
#prefTabs .tab:hover {
 box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  transform: translateY(-5px);
}
#prefTabs label.tab.tab--active {
  background: #ececec;
} 
.slick-track {
  display: flex !important;
  gap: 8px;
}
.timeslots-wrapper .slick-track {
  gap: 0px;
}
.timeslots-wrapper .slick-track .slick-slide {
  margin-right: 8px;
}

.time-slots .pill:has(input:checked) {
      background-color: #eeeeee;
    }
   .time-slots .pill:has(input:checked) .pill-content {
    background-color: transparent !important;
   }
   .time-slots .pill:has(input:checked) label.pill.slot-time svg, 
   .pill:has(input:checked) label.pill.slot-time svg {
      background-color: #ffffff;
      color: #000;
   }

#step8 .card.summary {
    margin-bottom: 25px;
    box-shadow: none;
    background: #eee;
    position: static;
}

#step8 .total {
  font-size: 22px;
}
#packageList svg {
    left: 0;
    position: relative;
    color: white;
    width: 16px;
    height: 16px;
}
.package__houly {
    font-size: 14px;
}
.package__details.package-feature-details {
    border-top: 1px #eee solid;
    margin-top: 10px;
    font-weight: 500;
}
.wstdl-package-hidden {
  visibility: hidden !important;
}

 .booking-header {
  text-align: center;
  padding: 0;
}

.icon-wrapper {
  background: #333;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.icon-wrapper svg {
    color: #fff;
}

.booking-header h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}

.booking-header p {
  font-size: 1rem;
  color: #555;
  max-width: 600px;
  margin: 0 auto;
}

.gform_button.button {
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-image: url(https://www.mmsdrivingschool.co.uk/wp-content/plugins/wst-driving-lesson/assets/images/credit-card-white.svg), linear-gradient(89deg, #00a93f, #00e676) !important;
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 20px, cover;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 30px 12px 50px !important;
    border: 1px #00c853 solid !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: all 0.25s ease;
}
.gform_button.button:hover {
  background-image: 
    url('https://www.mmsdrivingschool.co.uk/wp-content/plugins/wst-driving-lesson/assets/images/credit-card-white.svg'),
    linear-gradient(89deg, #00a93f, #00d463);
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 200, 83, 0.3);
}
.gform-theme--framework .gfield:where(.gfield--type-multiselect,.gfield--input-type-multiselect) .chosen-container-multi:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gfield:where(.gfield--type-select,.gfield--input-type-select) .chosen-search input[type=text]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gfield:where(.gfield--type-select,.gfield--input-type-select) .chosen-single:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework .gform-theme-field-control:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework select:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework select[multiple]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework textarea:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper .button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper button.button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform-theme.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
  background-color: #00a93f !important;
}

.gform_button.button:focus {
  outline: 2px solid rgba(0, 230, 118, 0.5);
  outline-offset: 2px;
}
.gform-footer.gform_footer.top_label {
    float: right;
    margin-top: 30px;
}

/* Ensure steps can animate */
			.step { display: block; }

			/* Actual hiding uses the hidden attribute */
			[hidden] { display: none !important; }
			
			/* Default hidden state for inactive steps */
			.step {
			  opacity: 0;
			  transform: translateY(20px);
			  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
			}

			/* When step becomes active, it fades in and slides up */
			.step--active {
			  opacity: 1;
			  transform: translateY(0);
			}
      .package-feature-details svg {
        color: #000 !important;
      }

.right-section {
  display: block;
}


.selected-slot-label, .selected-slot-time {
    font-size: 13px;
}
.selected-slot-date {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
#dob {
  background: url(https://www.mmsdrivingschool.co.uk/wp-content/plugins/wst-driving-lesson/assets/images/calendar-black.svg);
  background-size: 16px;
  background-position: 98% 50%;
  background-repeat: no-repeat;
}
/* .sidebar {
  position: sticky;
  top: 1rem;  
  height: max-content; 
} */

.left-section.thank-you {
  width: 100%;
  margin: 0;
}
.custom-confirmation-message {
    text-align: center;
    padding: 80px 20px;
    background: /*#00800012;*/ #eee;
    border-radius: 20px;
}
.custom-confirmation-message p:last-child {
    border: 1px #ccc solid;
    max-width: 200px;
    display: inline-block;
    padding: 15px;
    border-radius: 10px;
    background: #f9f9f9;
}

/*css for animation-------------starts---------------*/
.fade-up {
  opacity: 0;
  transform: translateY(20px); /* start 20px below */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
/*css for animation-------------ends----------------*/

.loading-msg {
  /* background: url(https://www.mmsdrivingschool.co.uk/wp-content/plugins/wst-driving-lesson/assets/images/loader-gif-transparent-animated-7.gif); */
  background: url(https://www.mmsdrivingschool.co.uk/wp-content/plugins/wst-driving-lesson/assets/images/loader.gif);
  width: 100px;
  height: 100px;
  background-size: 100px;
  text-indent: -9999999px;
}

@media screen and (max-width: 1200px) {
  .dates-wrapper .slick-prev{
    left: unset !important;
    right: 130px;
  }
  .timeslots-wrapper .slick-prev {
    left: unset !important;
    right: 130px;
  }
}

@media  screen and (max-width: 1024px)  {
  .left-section, .right-section {
    width: 100%;
  }
  .right-section {
    margin-top: 30px;
  }
  .pill {
    padding: 0;
  }
  .dates-wrapper .pill {
    padding: 5px;
  }
  span.mon {
    display: none;
  }
  .dates-wrapper .slick-prev {
    right: 110px;
  }
  .slick-next {
    right: 40px !important;
  }
  .pager .date {
    left: -70px;
  }
  .timeslots-wrapper .slick-prev {
    right: 110px;
  }
  .layout.main-section-wrapper {
    overflow: hidden;
    display: block;
  }
    .summary {
    position: static;
  }
 }

 @media  screen and (max-width: 767px)  {
 .pager {
  position: relative;
 } 
     .pager .date {
        left: unset;
        position: absolute;
        top: -38px;
        right: 77px;
    }
    .booking-header {
    text-align: center;
    padding: 0 20px;
  }
  .booking-header h1 {
    font-size: 2.2rem;
  }


  .time-slots .pill.slot-time {
    padding-left: 10px;
  }
 }

  @media  screen and (max-width: 600px)  {
    .date-pills.date-slots.slick-initialized.slick-slider {
    margin-top: 40px;
  }
  .dates-wrapper .slick-prev {
    left: 28px !important;
    top: -30px !important;
  }
    .dates-wrapper .slick-next{
    top: -30px !important;
    right: unset;
    left: unset;
    }
    .pager .date {
        top: 5px;
        right: unset;
        left: 94px;
    }
    .form-row {
      grid-template-columns: 1fr;
    }
    .instructor__radio {
      top: 20px;
    }
  }

  .fade-up-start {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.35s ease-out, transform 0.35s ease-out;
		}

		.fade-up-active {
		opacity: 1;
		transform: translateY(0);
		}


  .slot-time.slot-disabled {
    opacity: .5;
    pointer-events: none;
  }


  .summary-slot-list {
  margin-top: 12px;
  font-size: 14px;
}

.selected-slot-heading {
  font-weight: 600;
  margin-bottom: 8px;
  color: #0d1c4f;
  font-size: 15px;
}

/* --- Slot Tags --- */
.slot-tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.slot-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f4ff;
  border: 1px solid #c8d7ff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: #122072;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Date part */
.slot-tag-date {
  font-weight: 600;
  margin-right: 6px;
}

/* Time part */
.slot-tag-time {
  font-weight: 500;
  color: #0b4b9e;
}

/* Duration */
.slot-tag-duration {
  font-size: 12px;
  margin-left: 6px;
  opacity: 0.7;
}

.slot-tag-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
  color: #8b96c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.slot-tag-remove:hover {
  color: #4353b4;
}


.slot-hours-summary {
  margin-bottom: 10px;
}

.slot-hours-label {
  font-size: 13px;
  color: #444;
  margin-bottom: 4px;
}

.slot-hours-label strong {
  font-weight: 600;
}

.slot-hours-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #e4e7f3;
  overflow: hidden;
}

.slot-hours-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #4353b4;
  transition: width 0.25s ease-out;
}


/* Order summary: multi-slot display */
.order-slot-date-time {
  margin-top: 6px;
}

.order-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.order-slot-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f5f5f7;
  border: 1px solid #e1e2e7;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.order-slot-pill__date {
  font-weight: 600;
  color: #111827;
}

.order-slot-pill__time {
  color: #4b5563;
  font-weight: 400;
}

.full-width {
    width: 100%;
}




/*Back to Home ---------------------------------- styling------------------------------------*/

.backtohome {
    margin: 20px 0;
    top: 125px;
    position: absolute;
}

.backtohome a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.backtohome a:hover {
    background-color: #ed1c24;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.backtohome a:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* SVG icon styles */
.backtohome svg {
    transition: transform 0.3s ease;
}

.backtohome a:hover svg {
    transform: translateY(-2px);
}

/* White variant */
.backtohome.white a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.backtohome.white a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Dark variant */
.backtohome.dark a {
    color: #fff;
    background-color: #333;
    border: 1px solid #444;
}

.backtohome.dark a:hover {
    background-color: #444;
    color: #fff;
}

/* Minimal variant */
.backtohome.minimal a {
    background-color: transparent;
    border: none;
    padding: 8px 0;
}

.backtohome.minimal a:hover {
    background-color: transparent;
    transform: none;
    box-shadow: none;
}

/* Icon-only variant */
.backtohome.icon-only a {
    padding: 10px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    justify-content: center;
}

.backtohome.icon-only a span {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .backtohome a {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .backtohome.icon-only a {
        width: 40px;
        height: 40px;
    }
}

/* Animation for icon */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.backtohome.animated a:hover svg {
    animation: bounce 0.6s ease;
}

/* Focus accessibility */
.backtohome a:focus {
    outline: 2px solid #4d90fe;
    outline-offset: 2px;
}
#gform_4 .gform-theme--foundation .gform_fields {
  display: flex !important;
}
div#gform_fields_4 {
    display: flex !important;
}
.u-color-primary, iframe, iframe #gform_4 .gform-theme--foundation .gform_fields .gfield.gfield--type-radio .gfield_radio input[type="radio"]:checked + label::before {
    font-family: "Poppins", sans-serif;
}