/* Sanchay Tech booking form - BASE styles (common to every landing page).
   Loaded inside the <sanchay-form> Shadow DOM by assets/js/sanchay-form.js (not a global page stylesheet).
   Per-page look: assets/css/form-themes/<theme>.css, chosen with theme="<theme>". */

  :host{
    --navy:#4e5357;
    --blue:#2952e3;
    --blue-rgb:41,82,227;
    --bg-from:#eef2fb;
    --bg-to:#e7edfb;
    --step-off:#c9d3ef;
    --blue-dark:#1f3fc4;
    --blue-light:#eaf0ff;
    --bg:#eef2fb;
    --card:#ffffff;
    --text:#0f1b3d;
    --muted:#6b7590;
    --border:#e2e6f0;
    --green:#22c55e;
    --radius:14px;
    --shadow: 0 10px 30px rgba(15,27,61,0.08);
  }
  *{box-sizing:border-box;}
  :host{all:initial;display:block;box-sizing:border-box;font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,var(--bg-from) 0%,var(--bg-to) 100%);color:var(--text);padding:32px 16px;}

  .app{margin:0 auto;
    width:100%;
    max-width: 1140px;
  }

  /* Progress bar */
  .progress{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    margin-bottom: 28px;
    animation: fadeDown .6s ease both;
    padding-top: 20px;
  }
  .progress .step{
    display:flex; flex-direction:column; align-items:center; gap:8px; position:relative;    
  }
  .progress .circle{
    width:34px; height:34px; border-radius:50%;
    background:var(--step-off); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px;
    transition: background .4s ease, transform .4s ease, box-shadow .4s ease;
  }
  .progress .circle.active{
    background: var(--blue);
    box-shadow: 0 0 0 6px rgba(var(--blue-rgb),0.15);
    transform: scale(1.06);
  }
  .imgheight{
    margin-top: 93px;
  }
  .progress .circle.done{
    background: var(--blue);
  }
  .progress .label{
    font-size:13px; color: var(--muted); font-weight:600; white-space:nowrap;
  }
  .progress .label.active{ color: var(--blue); }
  .progress .connector{
    width: 90px; sm-width: 40px;
    height:2px; background:var(--step-off);
    margin: 0 6px 22px 6px;
    position:relative;
    overflow:hidden;
  }
  .progress .connector.filled::after{
    content:"";
    position:absolute; left:0; top:0; height:100%;
    width:100%;
    background: var(--blue);
    animation: fillLine .6s ease forwards;
  }
  @keyframes fillLine{ from{width:0%;} to{width:100%;} }

  .card-shell{
    position:relative;
    min-height: 640px;
  }

  .panel{
    display:none;
  }
  .panel.active{
    display:block !important;
    animation: slideFade .5s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes slideFade{
    from{ opacity:0; transform: translateY(18px); }
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes fadeDown{
    from{opacity:0; transform:translateY(-10px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* ---------- STEP 1 ---------- */
  .step1-wrap{
    display:grid;
    grid-template-columns: 340px 1fr;
    background: var(--card);
    /* border-radius: 22px; */
    box-shadow: var(--shadow);
    overflow:hidden;
    min-height: 640px;
  }
  .side{
    background: linear-gradient(160deg, #f3f6fd 0%, #eaf0fd 60%, #e3ecff 100%);
    padding: 44px 36px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding-bottom: 0px;
  }
  .side h1{
    font-size: 34px;
    line-height:1.15;
    margin:0 0 14px 0;
    color: var(--navy);
    font-weight:800;
  }
  .side p.lead{
    color:var(--muted);
    font-size:14.5px;
    line-height:1.6;
    margin:0 0 30px 0;
  }
  .feature{
    display:flex;
    gap:14px;
    margin-bottom: 22px;
    opacity:0;
    animation: featureIn .6s ease forwards;
  }
  .feature:nth-child(1){animation-delay:.15s;}
  .feature:nth-child(2){animation-delay:.3s;}
  .feature:nth-child(3){animation-delay:.45s;}
  @keyframes featureIn{
    from{opacity:0; transform:translateX(-14px);}
    to{opacity:1; transform:translateX(0);}
  }
  .feature .icon{
    flex:0 0 auto;
    width:42px;height:42px;border-radius:50%;
    background:#dbe6ff;
    display:flex;align-items:center;justify-content:center;
    color: var(--blue);
    font-size:18px;
  }
  .feature .icon svg{width:20px;height:20px;}
  .feature h4{margin:0 0 4px 0; font-size:14.5px; color:var(--navy);}
  .feature p{margin:0; font-size:13px; color:var(--muted); line-height:1.5;}

  .mock{
    margin-top:auto;
    border-radius:12px;
    overflow:hidden;
    /* box-shadow: 0 20px 40px rgba(20,40,100,.18); */
    transform: translateY(10px) rotate(-1deg);
    animation: mockFloat 5s ease-in-out infinite;
  }
  @keyframes mockFloat{
    0%,100%{ transform: translateY(10px) rotate(-1deg);}
    50%{ transform: translateY(2px) rotate(-1deg);}
  }
  .mock-bar{background:var(--navy); height:16px; display:flex; align-items:center; gap:5px; padding:0 8px;}
  .mock-bar span{width:6px;height:6px;border-radius:50%;background:#5c6a95;}
  .mock-body{background:#fff; padding:12px; display:grid; grid-template-columns: 1.4fr 1fr; gap:8px;}
  .mock-chart{height:60px; background:linear-gradient(180deg,#dbe7ff,#f5f8ff); border-radius:8px; position:relative; overflow:hidden;}
  .mock-chart::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 40%, rgba(var(--blue-rgb),.18) 50%, transparent 60%);
    background-size:200% 100%;
    animation: shimmer 3s linear infinite;
  }
  @keyframes shimmer{ from{background-position:200% 0;} to{background-position:-200% 0;} }
  .mock-donut{width:28px;height:28px;border-radius:50%;border:6px solid var(--blue); border-right-color:#c9d8ff; margin:8px auto;}
  .mock-box{height:22px;background:#eef2fb;border-radius:6px;}

  .form-side{
    padding: 40px 48px;
    overflow-y:auto;
  }
  .form-side h2{
    font-size:22px; margin:0 0 6px 0; color:var(--navy); font-weight:800;
  }
  .underline{
    width:46px; height:4px; background:var(--blue); border-radius:2px; margin-bottom:26px;
  }

  .field{ margin-bottom:18px; }
  .field label{
    display:block; font-size:13.5px;  color:var(--navy); margin-bottom:7px;
  }
  .field label .req{ color:#ef4444; margin-left:2px; }
  .field label .opt{ color:var(--muted); font-weight:500; float:right; }

  .input-wrap{
    position:relative;
  }
  .input-wrap .ic{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:#9aa4c4; display:flex;
    transition: color .25s ease;
  }
  .input-wrap input, .input-wrap select, .input-wrap textarea{
    width:100%;
    padding: 12px 14px 12px 42px;
    border-radius:10px;
    border:1.5px solid var(--border);
    font-size:14px;
    font-family:inherit;
    color: var(--text);
    background:#fff;
    outline:none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  textarea{ resize:vertical; min-height:70px; padding-left:14px; }
  select{ appearance:none; cursor:pointer; }
  .select-wrap .ic-right{
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    color:#9aa4c4; pointer-events:none;
  }

  .input-wrap input:focus,
  .input-wrap select:focus,
  .input-wrap textarea:focus{
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(var(--blue-rgb),0.12);
  }
  .input-wrap:focus-within .ic{ color: var(--blue); }

  .field.shake input:invalid:not(:placeholder-shown){
    border-color:#ef4444;
  }

  .phone-row{ display:flex; gap:10px; }
  .phone-code{
    display:flex; align-items:center; gap:6px;
    padding:12px 12px; border-radius:10px; border:1.5px solid var(--border);
    background:#fff; font-size:14px; flex:0 0 auto; color:var(--text);
  }
  .phone-row .input-wrap{ flex:1; }
  .phone-row .input-wrap input{ padding-left:14px; }

  .stbtn{
    width:100%;
    border:none;
    background: var(--blue);
    color:#fff;
    padding:15px 20px;
    border-radius: 12px;
    font-size:15.5px;
    font-weight:700;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:8px;
    transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
    box-shadow: 0 8px 18px rgba(var(--blue-rgb),.28);
  }
  .btn:hover{ background: var(--blue-dark); transform: translateY(-2px); box-shadow:0 12px 22px rgba(var(--blue-rgb),.35); }
  .btn:active{ transform: translateY(0); }
  .btn svg{ transition: transform .2s ease; }
  .btn:hover svg{ transform: translateX(4px); }
  .btn.secondary{
      background: transparent !important;
    color: var(--blue);
    box-shadow: none;
    font-weight: 700;
    width: auto;
    padding: 10px 4px;
    border: none;
  }
  .btn.secondary:hover{ background:transparent; transform:none; text-decoration:underline;}
  .btn.outline{
    background:#fff; color:var(--blue); border:1.5px solid var(--blue); box-shadow:none;
    width:auto; padding:12px 26px;
  }
  .btn.outline:hover{ background:var(--blue-light); transform:translateY(-2px); }

  .safe-note{
    display:flex; align-items:center; justify-content:center; gap:8px;
    text-align:center; color:var(--muted); font-size:12.5px; margin-top:16px;
  }

  /* ---------- STEP 2 ---------- */
  .step2-wrap{
    background: var(--card);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 40px 44px;
    text-align:center;
  }
  .step2-wrap h2{ font-size:30px; margin: 6px 0 8px; color:var(--navy); font-weight:800; }
  .step2-wrap .sub{ color:var(--muted); font-size:14.5px; margin-bottom:18px; }
  .meta-row{
    display:flex; justify-content:center; gap:26px; flex-wrap:wrap;
    color:var(--muted); font-size:13.5px; margin-bottom:30px;
  }
  .meta-row span{ display:flex; align-items:center; gap:7px; }

  .dual{
    display:grid; grid-template-columns: 1fr 1fr; gap:22px; text-align:left;
  }
  @media (max-width: 760px){ .dual{ grid-template-columns: 1fr; } }

  .box{
    border:1.5px solid var(--border); border-radius:16px; padding:22px;
        text-align: center;
  }
  .landing-body {
    padding: 32px 2px 8px;
}
  .box h3{ margin:0 0 16px 0; font-size:16px; color:var(--navy); }

  .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-weight:700; }
  .cal-nav{
    width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border); background:#fff;
    display:flex;align-items:center;justify-content:center; cursor:pointer; color:var(--navy);
    transition: background .2s ease, transform .15s ease;
  }
  .cal-nav:hover{ background:var(--blue-light); transform:scale(1.08); }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; }
  .cal-grid .dow{ font-size:11.5px; color:var(--muted); font-weight:700; padding-bottom:4px; }
  .cal-grid .day{
    padding:9px 0; border-radius:8px; font-size:13.5px; cursor:pointer; color:var(--text);
    transition: background .15s ease, color .15s ease, transform .15s ease;
  }
  .cal-grid .day.muted{ color:#c7cce0; cursor:default; }
  .cal-grid .day:not(.muted):hover{ background:var(--blue-light); transform:scale(1.05); }
  .cal-grid .day.selected{
    background: var(--blue); color:#fff; font-weight:700;
    animation: pop .3s ease;
  }
  @keyframes pop{ 0%{transform:scale(.7);} 60%{transform:scale(1.12);} 100%{transform:scale(1);} }

  .help-note{
    display:flex; gap:12px; background:var(--blue-light); border-radius:12px; padding:14px; margin-top:16px; font-size:13px; color:var(--muted); text-align:left;
  }
  .help-note b{ color:var(--navy); display:block; margin-bottom:2px; font-size:13.5px;}

  .selected-date{
    display:flex; align-items:center; gap:8px; font-weight:700; color:var(--navy); margin-bottom:14px; font-size:14.5px;
  }
  .time-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-height:360px; overflow-y:auto; padding-right:4px; }
  .time-slot{
    border:1.5px solid var(--border); border-radius:10px; padding:11px 0; text-align:center; font-size:13.5px; font-weight:600;
    cursor:pointer; background:#fff; color:var(--text);
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .time-slot:hover{ border-color:var(--blue); transform:translateY(-2px); }
  .time-slot.selected{
    background:var(--blue); color:#fff; border-color:var(--blue);
    animation: pop .3s ease;
  }
  .time-slot.disabled{
    cursor:not-allowed; color:#c7cce0; background:#f7f9fe; border-color:#eef0f7;
  }
  .time-slot.disabled:hover{ transform:none; border-color:#eef0f7; }
  .time-slot.disabled.booked{
    background:#fdeeee; color:#e08a8a; border-color:#f6dede; text-decoration:line-through;
  }
  .time-slot.disabled.blocked{
    background:#f2f2f5; color:#b9bccb;
  }
  .time-empty{ grid-column:1/-1; text-align:center; color:var(--muted); font-size:13.5px; padding:18px 0; }
  .slot-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:11.5px; color:var(--muted); }
  .slot-legend .lg{ display:flex; align-items:center; gap:6px; }
  .slot-legend i{ width:10px;height:10px;border-radius:3px;display:inline-block; border:1.5px solid var(--border); }
  .slot-legend .lg.avail i{ background:#fff; }
  .slot-legend .lg.booked i{ background:#fdeeee; border-color:#f6dede; }
  .slot-legend .lg.blocked i{ background:#f2f2f5; border-color:#eef0f7; }
  .cal-grid .day.admin-blocked{ color:#e08a8a; text-decoration:line-through; cursor:not-allowed; }
  .cal-grid .day.admin-blocked:hover{ background:transparent; transform:none; }

  .confirm-btn-row{ margin-top: 28px; display:flex; flex-direction:column; align-items:center; gap:14px; }
  .confirm-btn-row .btn{ max-width:340px; }

  /* ---------- STEP 3 ---------- */
  .step3-wrap{
    background: var(--card);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 44px 40px;
    position: relative;
  }
  .step3-close{
    position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
    border:1.5px solid var(--border); background:#fff; color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .step3-close:hover{ background:#fdeeee; color:var(--red, #e0554f); border-color:#f6dede; }
  .check-circle{
    width:64px;height:64px;border-radius:50%;
    background: var(--green);
    display:flex;align-items:center;justify-content:center;
    margin: 0 auto 18px auto;
    animation: checkPop .5s cubic-bezier(.2,.9,.3,1.3) both;
  }
  @keyframes checkPop{
    from{ transform:scale(0); opacity:0; }
    to{ transform:scale(1); opacity:1; }
  }
  .check-circle svg{ animation: drawCheck .5s ease .3s both; }
  @keyframes drawCheck{
    from{ stroke-dashoffset: 24; }
    to{ stroke-dashoffset: 0; }
  }
  .step3-wrap h2{ text-align:center; font-size:28px; margin:0 0 8px; color:var(--navy); font-weight:800; }
  .step3-wrap .sub{ text-align:center; color:var(--muted); font-size:14.5px; margin-bottom:30px; }

  .grid3{
    display:grid; grid-template-columns: 1fr 1fr 1.1fr; gap:20px;
  }
  @media (max-width: 900px){ .grid3{ grid-template-columns:1fr; } }

  .info-card{ border:1.5px solid var(--border); border-radius:16px; padding:22px; }
  .info-card h3{ margin:0 0 16px; font-size:15.5px; color:var(--navy); }
  .row-item{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
  .row-item .icb{
    width:34px;height:34px;border-radius:50%; background:var(--blue-light); color:var(--blue);
    display:flex;align-items:center;justify-content:center; flex:0 0 auto;
  }
  .row-item b{ display:block; font-size:13.5px; color:var(--navy); }
  .row-item span{ font-size:12.5px; color:var(--muted); }
  .note-block{
    border-radius:10px; padding:12px 14px; font-size:12.5px; display:flex; gap:10px; margin-top:6px;
  }
  .note-block.blue{ background:var(--blue-light); }
  .note-block.green{ background:#e8faf0; }

  .video-card{
    background: var(--blue-light); border-radius:16px; padding:22px; text-align:left;
  }
  .video-card h3{ margin:0 0 6px; font-size:16px; color:var(--navy); }
  .video-card p{ margin:0 0 14px; font-size:13px; color:var(--muted); }
  .video-thumb{
    background: var(--navy); border-radius:10px; padding:14px; position:relative; color:#fff; overflow:hidden;
  }
  .play-btn{
    width:52px;height:52px;border-radius:50%;background:var(--blue); display:flex;align-items:center;justify-content:center;
    margin: 18px auto; cursor:pointer;
    box-shadow:0 0 0 0 rgba(var(--blue-rgb),.5);
    animation: playPulse 2.2s ease-in-out infinite;
  }
  @keyframes playPulse{
    0%{ box-shadow:0 0 0 0 rgba(var(--blue-rgb),.45); }
    70%{ box-shadow:0 0 0 14px rgba(var(--blue-rgb),0); }
    100%{ box-shadow:0 0 0 0 rgba(var(--blue-rgb),0); }
  }
  .bars{ display:flex; align-items:flex-end; gap:3px; height:26px; margin: 8px 0; }
  .bars i{ width:5px; background:#5c6a95; border-radius:2px; display:block; }
  .watch-btn{
    width:100%; margin-top:14px; background:#fff; color:var(--blue); border:1.5px solid var(--blue);
    border-radius:10px; padding:11px; font-weight:700; font-size:13.5px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition: background .2s ease, transform .15s ease;
  }
  .watch-btn:hover{ background:var(--blue-light); transform:translateY(-2px); }

  .bottom-row{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
    border-top:1.5px solid var(--border); margin-top:26px; padding-top:22px;
  }
  .bottom-item{ display:flex; align-items:center; gap:12px; }
  .bottom-item .icb{ width:36px;height:36px;border-radius:50%; background:var(--blue-light); color:var(--blue); display:flex;align-items:center;justify-content:center; flex:0 0 auto;}
  .bottom-item b{ display:block; font-size:13.5px; color:var(--navy);}
  .bottom-item span{ font-size:12.5px; color:var(--muted); }
  .contact-links{ font-size:13px; color:var(--blue); display:flex; gap:16px; flex-wrap:wrap;    justify-content: center;}
  .contact-links a{ color:var(--blue); text-decoration:none; display:flex; align-items:center; gap:6px;}
  .contact-links a:hover{ text-decoration:underline; }

  .trust-strip{
    display:flex; justify-content:space-around; flex-wrap:wrap; gap:16px; margin-top:22px;
    background:#f7f9fe; border-radius:12px; padding:16px;
  }
  .trust-strip .t{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--navy); font-weight:600;}
  .trust-strip .t svg{ color:var(--blue); }

  /* ---------- LANDING PAGE (post-booking) ---------- */
  .landing-wrap{
    background: var(--card); border-radius:22px; box-shadow:var(--shadow); overflow:hidden;
  }
  .landing-top{
    display:flex; align-items:center; justify-content:space-between; padding:22px 32px; border-bottom:1.5px solid var(--border);
  }
  .landing-brand{ font-weight:800; color:var(--navy); font-size:16px; }
  .btn.small{ width:auto; padding:10px 20px; font-size:13px; }

  .landing-hero{
    position:relative; min-height:220px; display:flex; align-items:center; overflow:hidden;
    background: var(--navy);
  }
  .landing-hero img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;
  }
  .landing-hero::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(100deg, rgba(15,27,61,.92) 30%, rgba(15,27,61,.35) 100%);
  }
  .landing-hero-text{ position:relative; z-index:1; padding:34px 36px; color:#fff; max-width:560px; }
  .landing-hero-text h1{ font-size:26px; margin:0 0 10px; font-weight:800; }
  .landing-hero-text p{ margin:0; font-size:14px; line-height:1.6; color:#dbe3ff; }

  .landing-body{ padding:32px 36px 8px; }
  .landing-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap:24px; align-items:start; }
  @media (max-width:900px){ .landing-grid{ grid-template-columns:1fr; } }

  .landing-summary h3{ margin:0 0 16px; font-size:15.5px; color:var(--navy); }
  .landing-summary .row-item span.tag{
    color:var(--muted); font-size:12px; margin-left:6px; font-weight:500;
  }
  .landing-summary .row-item b{ font-size:13.5px; }
  .landing-notes{ font-size:12.5px; color:var(--muted); line-height:1.5; }

  .solutions h3{ margin:0 0 16px; font-size:15.5px; color:var(--navy); }
  .solution-list{ display:flex; flex-direction:column; gap:14px; }
  .solution-card{
    display:flex; gap:14px; border:1.5px solid var(--border); border-radius:14px; padding:12px; align-items:center;
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .solution-card:hover{ box-shadow:0 8px 20px rgba(15,27,61,.08); transform:translateY(-2px); }
  .solution-card img{
    width:84px; height:84px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:var(--blue-light);
  }
  .solution-card h4{ margin:0 0 4px; font-size:14px; color:var(--navy); }
  .solution-card p{ margin:0 0 8px; font-size:12.5px; color:var(--muted); line-height:1.5; }
  .solution-card a{ font-size:12.5px; font-weight:700; color:var(--blue); text-decoration:none; }
  .solution-card a:hover{ text-decoration:underline; }

  .landing-footer-row{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
    border-top:1.5px solid var(--border); margin:26px 0 0; padding:22px 36px;    justify-content: center;
  }
  .landing-trust{
    display:flex; justify-content:space-around; flex-wrap:wrap; gap:16px; margin:0 36px 28px;
    background:#f7f9fe; border-radius:12px; padding:16px;
  }

  @media (max-width: 860px){
    .step1-wrap{ grid-template-columns:1fr; }
    .side{ display:none; }
    .form-side{ padding:28px 22px; }
    .step2-wrap, .step3-wrap{ padding:26px 18px; }
    .progress .connector{ width:36px; }
    .landing-body {
    padding: 32px 2px 8px;
}
.stbox2{
        display: block !important;
}
.info-card {
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 10px;
}
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }
.stbox2{
display: flex;
}