:root{
      --bg-page:#fff7ec;
      --bg-page-grad:#fffaf3;
      --accent:#f97316;
      --accent-soft:#ffedd5;
      --accent-strong:#ea580c;
      --accent-green:#16a34a;

      --card:#ffffff;
      --card-soft:#000;
      --border-soft:#000;
      --border-strong:#000;

      --input-bg:#ffffff;
      --input-border:#000;

      --text-main:#000;
      --text-soft:#000;
      --text-mute:#000;

      --shadow-soft:0 22px 70px rgba(15,23,42,.12);
      --radius-xl:26px;
      --radius-lg:18px;
      --radius-md:12px;
      --radius-pill:999px;
    }

    *{box-sizing:border-box;margin:0;padding:0;}
    body{
      min-height:100vh;
      font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
      color:var(--text-main);
      background:
        radial-gradient(circle at 0% 0%, #fed7aa 0, transparent 46%),
        radial-gradient(circle at 100% 0%, #fee2e2 0, transparent 52%),
        radial-gradient(circle at 0% 100%, #e0f2fe 0, transparent 42%),
        linear-gradient(145deg,var(--bg-page-grad),var(--bg-page));
    }

    .page{
      max-width:1200px;
      margin:0 auto;
      padding:28px 18px 40px;
      min-height:100vh;
      display:flex;
      align-items:center;
    }

    .shell{
      width:100%;
      display:flex;
      align-items:stretch;
      gap:32px;
      position:relative;
    }

    .shell::before{
      content:"";
      position:absolute;
      inset:-60px;
      background:
        radial-gradient(circle at 20% 0, #fed7aa80 0, transparent 55%),
        radial-gradient(circle at 100% 20%, #bfdbfe6b 0, transparent 55%);
      pointer-events:none;
      opacity:.65;
      z-index:0;
    }

    .col{position:relative;z-index:1;}

    .col-text{
      flex:1;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:18px;
    }

    /* TEXT SIDE */
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:4px 12px;
      border-radius:var(--radius-pill);
      background:#fff;
      border:1px solid #fed7aa;
      font-size:11px;
      color:var(--accent-strong);
      box-shadow:0 8px 24px rgba(248, 180, 84, .25);
    }
    .eyebrow-dot{
      width:18px;height:18px;border-radius:50%;
      background:linear-gradient(135deg,#f97316,#facc15);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      color:#fff;
    }

    .hero-title{
      font-family:"DM Serif Display",serif;
      font-size:2.4rem;
      line-height:1.15;
      letter-spacing:.01em;
    }
    .hero-title span{
      background:linear-gradient(120deg,#f97316,#fb7185,#a855f7);
      -webkit-background-clip:text;
      color:transparent;
    }

    .hero-sub{
      font-size:0.95rem;
      color:var(--text-soft);
      max-width:420px;
    }

    .hero-tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .pill{
      font-size:11px;
      padding:6px 12px;
      border-radius:var(--radius-pill);
      background:#fff;
      border:1px solid #f3f4f6;
      display:inline-flex;
      align-items:center;
      gap:6px;
      box-shadow:0 8px 24px rgba(148,163,184,.18);
    }
    .pill span.icon{font-size:13px;}

    .hero-cta-row{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-start;
      gap:16px;
      margin-top:6px;
    }

    .btn-main{
      border-radius:var(--radius-pill);
      background:linear-gradient(120deg,#f97316,#fbbf24);
      border:none;
      padding:11px 22px;
      font-size:13px;
      font-weight:600;
      color:#1f2937;
      display:inline-flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
      box-shadow:0 16px 40px rgba(248, 148, 39, .55);
    }
    .btn-main span.icon{font-size:18px;}

    .hero-note{
      font-size:11px;
      color:var(--text-soft);
      max-width:380px;
      line-height:1.5;
    }

    .quote-card{
      margin-top:10px;
      padding:14px 16px 11px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid #fee2c5;
      box-shadow:0 14px 50px rgba(248, 180, 84, .35);
      position:relative;
      overflow:hidden;
    }
    .quote-card::before{
      content:"“";
      position:absolute;
      top:-14px;
      left:-2px;
      font-family:"DM Serif Display",serif;
      font-size:42px;
      color:#fed7aa;
      opacity:.7;
    }
    .quote-main{
      font-family:"DM Serif Display",serif;
      font-size:1.05rem;
      margin-bottom:6px;
      color:#111827;
    }
    .quote-meta{
      font-size:11px;
      color:var(--text-soft);
    }

    /* RIGHT SIDE – TABLET + FORM */
    .col-form{
      flex:0 0 420px;
      max-width:420px;
      display:flex;
      justify-content:flex-end;
    }

    .tablet-shell{
      width:100%;
      max-width:440px;
      margin:0 auto;
      background:#111827;
      padding:12px;
      border-radius:32px;
      box-shadow:0 28px 80px rgba(15,23,42,.45);
      position:relative;
      overflow:visible;
    }
    .tablet-shell::before{
      content:"";
      position:absolute;
      top:10px;
      left:50%;
      transform:translateX(-50%);
      width:78px;
      height:6px;
      border-radius:999px;
      background:#020617;
      opacity:.85;
    }
    .tablet-camera{
      position:absolute;
      top:16px;
      left:50%;
      transform:translateX(-50%);
      width:32px;
      height:8px;
      border-radius:999px;
      background:#020617;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:4px;
      z-index:2;
    }
    .tablet-camera-dot{
      width:6px;height:6px;border-radius:50%;
      background:#0f172a;
      box-shadow:0 0 0 2px #020617, 0 0 4px rgba(59,130,246,.7);
    }

    .tablet-inner{
      border-radius:24px;
      overflow:hidden;
      background:linear-gradient(140deg,#fff,#fff7ee);
      border:1px solid #111827;
      position:relative;
      z-index:1;
    }

    .booking-shell{
      width:100%;
      border-radius:var(--radius-xl);
      background:linear-gradient(140deg,#fff,#fff7ee);
      border:none;
      box-shadow:none;
      display:flex;
      flex-direction:column;
    }

    .booking-header{
      padding:20px  15px;
      box-shadow:-1px 9px 7px 0px rgba(254,215,170,0.75);
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:12px;
    }
    .booking-header-main{font-size:13px;font-weight:600;}

    .booking-body{
      margin-top:6px;
      border-radius:var(--radius-lg);
      background:#ffffff;
      border:1px solid #f3f4f6;
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:330px;
      max-height:460px;
      overflow:hidden;
    }
    .form-scroll{
      padding:12px 14px 14px;
      flex:1;
      overflow-y:auto;
      scroll-behavior:smooth;
    }
    .form-scroll::-webkit-scrollbar{width:4px;}
    .form-scroll::-webkit-scrollbar-thumb{
      background:#d4d4d8;
      border-radius:999px;
    }

    .step-view{display:none;animation:fadeIn .25s ease-out;}
    .step-view.is-active{display:block;}
    @keyframes fadeIn{
      from{opacity:0;transform:translateY(4px);}
      to{opacity:1;transform:translateY(0);}
    }

    .step-tag{
      font-size:10px;
      color:var(--text-soft);
      margin-bottom:4px;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .step-tag-pill{
      width:16px;height:16px;border-radius:50%;
      border:1px solid #000;
      display:flex;align-items:center;justify-content:center;
      font-size:9px;
      color:var(--accent-strong);
      background:#fff7ed;
    }

    .section-title{
      font-size:13px;
      font-weight:600;
      margin-bottom:10px;
    }

    .divider{
      height:1px;
      background:#f3f4f6;
      border-radius:999px;
      margin:12px 0 14px;
      opacity:1;
    }

    .field{margin-bottom:24px;}
    .field-label{
      font-size:11px;
      font-weight:500;
      margin-bottom:4px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
    }

    .input, select, textarea{
      width:100%;
      border-radius:var(--radius-md);
      background:var(--input-bg);
      border:1px solid var(--input-border);
      padding:9px 11px;
      font-size:11px;
      color:var(--text-main);
      outline:none;
      font-family:inherit;
      transition:border-color .18s, box-shadow .18s, background-color .18s;
    }
    select{
      appearance:none;
      padding-right:34px;
      font-size:12px;
      color:#000;
      font-weight:700;
    }
    .field-select{position:relative;}
    .field-select-clickable{
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      border-radius:var(--radius-md);
      border:1px solid var(--input-border);
      padding:9px 11px;
      background:#ffffff;
    }
    .field-select-chevron{font-size:10px;color:var(--text-mute);}
    .field-select-placeholder,
    .field-select-value{
      font-size:12px;
      color:#000;
      font-weight:700;
    }

    .input:focus, select:focus, textarea:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 1px rgba(249,115,22,.35);
      background:#fff;
    }

    textarea{
      resize:vertical;
      min-height:70px;
      max-height:110px;
    }

    .helper-text{
      font-size:9.5px;
      color:var(--text-soft);
      margin-top:3px;
    }

    .date-card{
      border-radius:16px;
      border:1px solid #000;
      background:#fff;
      padding:9px 10px 10px;
      box-shadow:0 10px 28px rgba(148,163,184,.12);
    }
    .date-card-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:8px;
      gap:8px;
      font-size:10px;
      color:var(--text-soft);
    }
    .date-current{
      font-size:11px;
      font-weight:500;
      color:#111827;
      white-space:nowrap;
    }
    .date-row{display:flex;gap:8px;}
    .date-col{flex:1;}
    .date-col label{
      display:block;
      font-size:9px;
      text-transform:uppercase;
      letter-spacing:.09em;
      color:var(--text-mute);
      margin-bottom:3px;
    }

    .phone-row{
      display:flex;
      gap:6px;
      align-items:center;
    }
    .phone-row .input{flex:1;}

    .btn-ghost{
      border-radius:var(--radius-pill);
      border:1px solid #f97316;
      background:linear-gradient(120deg,#f97316,#fdba74);
      color:#1f2937;
      font-size:10px;
      padding:8px 11px;
      white-space:nowrap;
      cursor:pointer;
      font-weight:500;
      box-shadow:0 10px 24px rgba(248, 148, 39, .45);
    }
    .btn-ghost[disabled]{opacity:.6;cursor:default;box-shadow:none;}

    .otp-box{
      display:none;
      margin-top:7px;
      padding:7px 9px;
      border-radius:var(--radius-md);
      background:#f9fafb;
      border:1px dashed #d4d4d8;
      font-size:9.5px;
      color:var(--text-soft);
    }
    .otp-inputs{
      display:flex;
      gap:6px;
      margin-bottom:5px;
    }
    .otp-inputs input{
      width:26px;height:26px;
      border-radius:8px;
      border:1px solid #d4d4d8;
      background:#ffffff;
      text-align:center;
      font-size:11px;
      color:var(--text-main);
      outline:none;
    }
    .otp-inputs input:focus{
      border-color:#f97316;
      box-shadow:0 0 0 1px rgba(249,115,22,.35);
    }
    .otp-footer{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    .otp-dot{
      width:8px;height:8px;border-radius:999px;
      background:#f97316;
      margin-right:4px;
      display:inline-block;
    }
    .otp-dot.is-verified{background:#16a34a;}
    .otp-actions button{
      border:none;
      background:none;
      padding:0;
      font-size:9px;
      color:#2563eb;
      text-decoration:underline;
      text-decoration-style:dotted;
      cursor:pointer;
    }

    .status-line{display:flex;align-items:center;gap:6px;}

    /* TIME SHEET */
    .time-overlay{
      position:absolute;
      left:50%;
      bottom:0;
      transform:translate(-50%,100%);
      width:100%;
      max-width:100%;
      padding:0 10px 10px;
      opacity:0;
      pointer-events:none;
      transition:transform .24s ease-out, opacity .18s ease-out;
      z-index:5;
    }
    .time-overlay.is-open{
      transform:translate(-50%,0);
      opacity:1;
      pointer-events:auto;
    }
    .time-sheet{
      background:#ffffff;
      border-radius:24px 24px 0 0;
      box-shadow:0 -18px 40px rgba(15,23,42,.35);
      padding:18px 22px 18px;
    }
    .time-sheet-header{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      margin-bottom:14px;
    }
    .time-sheet-title{font-size:15px;font-weight:600;}
    .time-sheet-sub{font-size:11px;color:var(--text-soft);margin-top:2px;}
    .time-sheet-close{
      border:none;
      background:none;
      font-size:18px;
      cursor:pointer;
      color:#4b5563;
      line-height:1;
    }
    .time-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px 14px;
      margin-bottom:16px;
    }
    .time-slot{
      border-radius:999px;
      border:1px solid #d4d4d8;
      background:#ffffff;
      padding:8px 0;
      font-size:11px;
      text-align:center;
      cursor:pointer;
      transition:border-color .16s, background .16s, box-shadow .16s, transform .12s;
    }
    .time-slot:hover{
      border-color:#9ca3af;
      background:#f9fafb;
    }
    .time-slot.is-selected{
      border-color:#111827;
      background:#111827;
      color:#ffffff;
      box-shadow:0 12px 24px rgba(15,23,42,.4);
      transform:translateY(-1px);
    }
    .time-sheet-footer{display:flex;justify-content:flex-end;}
    .time-done-btn{
      border-radius:var(--radius-pill);
      border:none;
      background:#111827;
      color:#ffffff;
      font-size:11px;
      padding:8px 16px;
      cursor:pointer;
      box-shadow:0 10px 24px rgba(15,23,42,.55);
    }
    .time-done-btn:disabled{opacity:.6;box-shadow:none;cursor:default;}

    /* GENERIC SHEETS */
    .sheet-overlay{
      position:absolute;
      inset:0;
      background:rgba(15,23,42,.35);
      display:flex;
      align-items:flex-end;
      justify-content:center;
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease-out;
      z-index:6;
    }
    .sheet-overlay.is-open{opacity:1;pointer-events:auto;}
    .sheet{
      width:100%;
      border-radius:24px 24px 0 0;
      background:#ffffff;
      box-shadow:0 -20px 50px rgba(15,23,42,.45);
      padding:18px 20px 16px;
      transform:translateY(100%);
      transition:transform .24s ease-out;
      max-height:96%;
      display:flex;
      flex-direction:column;
    }
    .sheet-overlay.is-open .sheet{transform:translateY(0);}
    .sheet-header{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      margin-bottom:12px;
    }
    .sheet-title{font-size:15px;font-weight:600;}
    .sheet-close{
      border:none;
      background:none;
      font-size:18px;
      line-height:1;
      cursor:pointer;
      color:#4b5563;
    }
    .sheet-content{
      flex:1;
      overflow:auto;
      padding-right:4px;
      margin-right:-4px;
    }
    .sheet-content::-webkit-scrollbar{width:4px;}
    .sheet-content::-webkit-scrollbar-thumb{
      background:#d4d4d8;
      border-radius:999px;
    }
    .sheet-footer{
      margin-top:14px;
      display:flex;
      justify-content:flex-end;
    }
    .sheet-confirm{
      border-radius:999px;
      padding:9px 22px;
      font-size:12px;
      font-weight:600;
      border:none;
      background:#111827;
      color:#ffffff;
      cursor:pointer;
      box-shadow:0 10px 24px rgba(15,23,42,.6);
    }
    .sheet-confirm:disabled{opacity:.6;box-shadow:none;cursor:default;}

    .people-grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:10px;
      padding-bottom:6px;
    }
    .people-pill{
      border-radius:999px;
      border:1px solid #e5e7eb;
      background:#f9fafb;
      text-align:center;
      padding:8px 0;
      font-size:11px;
      cursor:pointer;
      transition:border-color .16s, background .16s, box-shadow .16s, transform .12s;
    }
    .people-pill:hover{
      border-color:#cbd5f5;
      background:#ffffff;
    }
    .people-pill.is-selected{
      border-color:#111827;
      background:#111827;
      color:#ffffff;
      box-shadow:0 12px 24px rgba(15,23,42,.4);
      transform:translateY(-1px);
    }

    .items-row{
      border-radius:16px;
      border:1px solid #e5e7eb;
      background:#f9fafb;
      padding:10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .items-row-main{
      font-size:12px;
      font-weight:600;
      margin-bottom:2px;
    }
    .items-row-sub{
      font-size:10px;
      color:var(--text-soft);
    }
    .items-counter{
      display:flex;
      align-items:center;
      gap:6px;
      background:#ffffff;
      border-radius:999px;
      border:1px solid #22c55e;
      overflow:hidden;
      min-width:96px;
    }
    .items-counter button{
      width:28px;height:30px;
      border:none;
      background:#f9fafb;
      cursor:pointer;
      font-size:16px;
    }
    .items-counter span{
      width:30px;
      text-align:center;
      font-size:13px;
      font-weight:600;
      background:#22c55e;
      color:#ffffff;
    }

    /* PRICE BAR FOOTER */
    .booking-footer{
      padding:10px 14px;
      border-top:1px solid #f3f4f6;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      background:#ffffff;
      border-bottom-left-radius:var(--radius-xl);
      border-bottom-right-radius:var(--radius-xl);
    }
    .footer-price-left{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .price-main-row{
      display:flex;
      align-items:baseline;
      gap:6px;
    }
    #payablePrice{
      font-size:15px;
      font-weight:600;
      color:#111827;
    }
    #mrpPrice{
      font-size:12px;
      color:#9ca3af;
      text-decoration:line-through;
    }
    .price-sub-row{
      font-size:11px;
      color:#6b7280;
      display:flex;
      align-items:center;
      gap:4px;
    }
    .price-details-btn{
      border:none;
      background:none;
      padding:0;
      font-size:11px;
      font-weight:600;
      color:#f97316;
      cursor:pointer;
    }
    .price-back-btn{
      margin-top:4px;
      border:none;
      background:none;
      padding:0;
      font-size:11px;
      color:#9ca3af;
      cursor:pointer;
      align-self:flex-start;
    }
    .price-back-btn:disabled{opacity:.5;cursor:default;}
    .footer-cta{
      border-radius:999px;
      border:none;
      background:#111827;
      color:#ffffff;
      padding:10px 22px;
      font-size:13px;
      font-weight:600;
      cursor:pointer;
      white-space:nowrap;
      box-shadow:0 12px 30px rgba(15,23,42,.45);
    }
    .footer-cta[disabled]{opacity:.7;cursor:default;box-shadow:none;}
    @media (max-width:520px){
      .booking-footer{
        flex-direction:column;
        align-items:stretch;
      }
      .footer-cta{
        width:100%;
        text-align:center;
      }
    }

    /* ADDONS */
    .addons-section{margin-top:4px;}
    .addons-grid{
      display:flex;
      gap:12px;
      overflow-x:auto;
      padding-bottom:6px;
    }
    .addons-grid::-webkit-scrollbar{height:4px;}
    .addons-grid::-webkit-scrollbar-thumb{
      background:#d4d4d8;
      border-radius:999px;
    }
    .addon-card{
      flex:0 0 175px;
      background:#ffffff;
      border-radius:20px;
      border:1px solid #e5e7eb;
      box-shadow:0 10px 30px rgba(148,163,184,.18);
      padding-bottom:12px;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .addon-image{
      height:100px;
      background-size:cover;
      background-position:center;
    }
    .addon-body{
      padding:9px 12px 0;
      flex:1;
    }
    .addon-title{
      font-size:12px;
      font-weight:600;
      margin-bottom:2px;
    }
    .addon-price{
      font-size:11px;
      color:var(--text-soft);
      margin-bottom:10px;
    }
    .addon-counter{
      margin:0 10px;
      margin-top:auto;
      border-radius:999px;
      background:#f9fafb;
      border:1px solid #e5e7eb;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:4px 6px;
    }
    .addon-btn{
      width:26px;height:26px;
      border-radius:999px;
      border:1px solid #e5e7eb;
      background:#ffffff;
      font-size:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .addon-count{
      font-size:12px;
      font-weight:600;
    }

    .field-tag-right{
      margin-top:6px;
      display:flex;
      justify-content:flex-end;
    }
    .tag-link{
      border:none;
      background:#fff7ed;
      border-radius:999px;
      padding:4px 10px;
      font-size:10px;
      font-weight:500;
      color:#f97316;
      cursor:pointer;
      border:1px solid #fed7aa;
      display:inline-flex;
      align-items:center;
      gap:6px;
      box-shadow:0 6px 16px rgba(248, 180, 84, .25);
    }
    .tag-link::after{content:"›";font-size:11px;}

    .row{display:flex;gap:10px;flex-wrap:wrap;}

    /* RESPONSIVE LAYOUT */
    @media (max-width:980px){
      .page{
        align-items:flex-start;
        padding-top:18px;
      }
      .shell{flex-direction:column;}
      .col-form{
        max-width:none;
        flex:unset;
        order:-1;
      }
      .tablet-shell{max-width:480px;}
    }
    @media (max-width:640px){
      .page{
        padding:18px 10px 26px;
      }
      .hero-title{font-size:2rem;}
      .quote-card{margin-bottom:4px;}
      .time-sheet{
        max-width:100%;
        padding:16px 16px 18px;
      }
    }