/* Jawwal-style purchase UI — light by default, dark toggle preserved */
:root{
  --jw-green:#76bc21;
  --jw-green-2:#63a91c;
  --jw-green-dark:#4f8d18;
  --jw-green-soft:#effbdc;
  --jw-ink:#17202a;
  --jw-muted:#737b84;
  --jw-line:#e4e8ec;
  --jw-bg:#d5ffa2;
  --jw-card:#e0fac2;
  --jw-field:#ffffff;
  --jw-dark-bg:#10151c;
  --jw-dark-card:#171c23;
  --jw-dark-field:#0d1116;
}

html,body{background:var(--jw-bg)!important}
body{min-height:100vh;color:var(--jw-ink)!important;overflow-x:hidden}
body::before{display:none!important}
.wrap{width:100%;max-width:none!important;margin:0!important;padding:0 16px 34px!important}

/* Header: centered logo like the reference */
.header{position:relative;display:flex!important;justify-content:center!important;align-items:center!important;padding:28px 0 20px!important;margin:0 0 14px!important;border:0!important}
.brand{display:flex!important;flex-direction:column!important;gap:7px!important;text-align:center!important;align-items:center!important}
.brand-logo{width:76px!important;height:76px!important;border-radius:50%!important;border:1px solid #d8e2e8!important;background:#fff!important;box-shadow:0 5px 18px rgba(25,55,75,.12)!important;padding:3px!important}
.brand-logo img{border-radius:50%!important}
.brand-name{font-size:17px!important;line-height:1.1!important;color:var(--jw-ink)!important;font-weight:900!important}
.brand-tag{font-size:10px!important;color:var(--jw-muted)!important}
.theme-btn{position:absolute!important;right:2px;top:28px;width:38px!important;height:38px!important;background:#fff!important;color:#25303a!important;border:1px solid var(--jw-line)!important;box-shadow:0 5px 16px rgba(20,40,60,.08)!important}

/* Reference screen is intentionally minimal */
.announcements,.delivery-notice,.access-section,.footer,.sidebar{display:none!important}
.main-layout{display:flex!important;justify-content:center!important;align-items:flex-start!important;gap:0!important}
.form-panel{width:min(430px,100%)!important;background:var(--jw-card)!important;border:1px solid #e3e7ea!important;border-radius:30px!important;box-shadow:0 12px 38px rgba(31,48,61,.10)!important;overflow:hidden!important}
.panel-header{padding:16px 20px 0!important}
.steps-bar{display:none!important}
.step-body{padding:18px 20px 22px!important}
.step-title{font-size:12px!important;color:var(--jw-muted)!important;text-align:right!important;margin-bottom:6px!important;font-weight:700!important}
.step-desc{font-size:10px!important;color:var(--jw-muted)!important;text-align:right!important;margin-bottom:10px!important}

/* Phone */
.field{margin-bottom:15px!important}
.field-label{font-size:11px!important;color:#666f77!important;letter-spacing:0!important;text-transform:none!important;margin-bottom:7px!important}
.inp{height:46px!important;padding:10px 15px!important;background:var(--jw-field)!important;border:1px solid #dfe4e8!important;border-radius:14px!important;color:var(--jw-ink)!important;font-size:13px!important;box-shadow:none!important}
.inp:focus{border-color:var(--jw-green)!important;box-shadow:0 0 0 3px rgba(121,214,74,.15)!important}
.inp::placeholder{color:#9ba2a8!important}

/* Quantity + package in one clean row */
.step-body[data-step="1"] .field:nth-of-type(2){display:inline-block;width:31%;vertical-align:top;margin-left:3%!important}
.step-body[data-step="1"] .field:nth-of-type(3){display:inline-block;width:66%;vertical-align:top}
.qty-wrap{height:46px!important;background:var(--jw-field)!important;border:1px solid #dfe4e8!important;border-radius:14px!important}
.qty-btn{width:40px!important;height:44px!important;color:#4c555e!important;font-size:20px!important}
.qty-btn:hover{background:var(--jw-green-soft)!important;color:var(--jw-green-dark)!important}
.qty-val{font-size:15px!important;color:var(--jw-ink)!important}

/* Package choices become compact selectable cards */
.type-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
.type-card{position:relative!important;min-height:46px!important;padding:9px 12px!important;border:1px solid #dfe4e8!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important;transition:.18s!important}
.type-card:hover{transform:none!important;border-color:#bfc8cf!important}
.type-card.active{border-color:var(--jw-green)!important;background:linear-gradient(180deg,#fbfffa,#f2fbee)!important;box-shadow:0 0 0 2px rgba(121,214,74,.12)!important}
.type-selected-badge{display:none!important}
.type-card-inner{display:flex!important;align-items:center!important;gap:9px!important}
.type-card-icon{width:30px!important;height:30px!important;border-radius:9px!important;overflow:hidden!important;background:var(--jw-green-soft)!important;flex:0 0 30px!important}
.type-card-icon img{width:100%!important;height:100%!important;object-fit:contain!important}
.type-card-name{font-size:12px!important;font-weight:800!important;color:var(--jw-ink)!important}
.type-card-sub,.type-card-desc,.type-card-stock{display:none!important}
.type-card-price{margin-right:auto!important;position:absolute!important;left:12px!important;top:12px!important;font-size:11px!important;font-weight:800!important;color:var(--jw-green-dark)!important}

/* Summary green panel */
.step-body[data-step="1"] .type-grid::after{content:"";display:block}
.btn-row{display:flex!important;gap:9px!important;margin-top:12px!important}
.btn{border-radius:14px!important;min-height:48px!important;font-size:13px!important;font-weight:900!important;box-shadow:none!important}
.btn-primary{background:var(--jw-green)!important;color:#fff!important;border:0!important;flex:1!important}
.btn-primary:hover{background:var(--jw-green-2)!important;box-shadow:0 8px 18px rgba(99,198,61,.22)!important}
.btn-secondary{background:#fff!important;color:#59616a!important;border:1px solid #dfe4e8!important}

/* Payment step */
.step-body[data-step="2"] .qty-wrap{margin-bottom:10px}
.pay-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
.pay-card{border:1px solid #dfe4e8!important;background:#fff!important;border-radius:14px!important;box-shadow:none!important}
.pay-card.active{border-color:var(--jw-green)!important;box-shadow:0 0 0 2px rgba(121,214,74,.12)!important}

/* Make the existing summary visible in the same card style if it is rendered */
.order-summary,.summary-card,.summary-box{background:linear-gradient(135deg,#7bd84c,#61c63c)!important;color:#fff!important;border:0!important;border-radius:22px!important}

/* Jawwal waiting block */
#jawwalWaitArea>div{border-radius:18px!important;border-color:#dfe4e8!important}

.float-wa{width:50px!important;height:50px!important;border-radius:50%!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;left:18px!important;bottom:18px!important;right:auto!important;background:#25d366!important;box-shadow:0 8px 22px rgba(37,211,102,.25)!important}
.float-wa span:last-child{display:none!important}

/* DARK */
html[data-theme="dark"],html[data-theme="dark"] body{background:var(--jw-dark-bg)!important;color:#f3f6f8!important}
html[data-theme="dark"] .header{border-color:transparent!important}
html[data-theme="dark"] .brand-name{color:#fff!important}
html[data-theme="dark"] .brand-tag,.html[data-theme="dark"] .field-label{color:#9ba5ae!important}
html[data-theme="dark"] .theme-btn{background:#171c23!important;color:#fff!important;border-color:#2b333c!important}
html[data-theme="dark"] .form-panel{background:var(--jw-dark-card)!important;border-color:#2a3139!important;box-shadow:0 20px 55px rgba(0,0,0,.36)!important}
html[data-theme="dark"] .inp,
html[data-theme="dark"] .qty-wrap,
html[data-theme="dark"] .type-card,
html[data-theme="dark"] .pay-card{background:var(--jw-dark-field)!important;color:#f3f6f8!important;border-color:#2b333c!important}
html[data-theme="dark"] .type-card.active,.html[data-theme="dark"] .pay-card.active{border-color:var(--jw-green)!important;background:#121a12!important}
html[data-theme="dark"] .type-card-name,html[data-theme="dark"] .qty-val{color:#f3f6f8!important}
html[data-theme="dark"] .type-card-price{color:#9bea78!important}
html[data-theme="dark"] .btn-secondary{background:#171c23!important;color:#dce2e7!important;border-color:#343c45!important}
html[data-theme="dark"] .btn-primary{background:var(--jw-green)!important;color:#fff!important}
html[data-theme="dark"] .brand-logo{border-color:#2d363e!important;box-shadow:none!important}

@media(max-width:520px){
  .wrap{padding:0 10px 26px!important}
  .header{padding-top:18px!important}
  .theme-btn{top:18px!important;right:2px!important}
  .brand-logo{width:68px!important;height:68px!important}
  .form-panel{border-radius:26px!important}
  .step-body{padding:16px 15px 18px!important}
}

/* SHAM NET FINAL COLOR OVERRIDE */
html,body{background:#d5ffa2!important}
.form-panel{background:#e0fac2!important;border-color:#76bc21!important}
.phone-input,.qty-wrap,.type-card{border-color:#76bc21!important}
.type-card.active{border-color:#76bc21!important;box-shadow:0 0 0 2px rgba(118,188,33,.14)!important}
.inp{border-color:#76bc21!important}
.btn-primary{background:#76bc21!important}
.qty-btn{color:#76bc21!important}
.type-card-price,.carrier-name{color:#76bc21!important}
.carrier-check{background:#76bc21!important}
html[data-theme="dark"],html[data-theme="dark"] body{background:#10151c!important}
html[data-theme="dark"] .form-panel{background:#171c23!important}

/* FINAL WIDTH FIX: all Step 1 fields use the same full width */
.step-body[data-step="1"] .field:nth-of-type(2),
.step-body[data-step="1"] .field:nth-of-type(3){
  display:block!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
.step-body[data-step="1"] .qty-wrap,
.step-body[data-step="1"] .type-grid,
.step-body[data-step="1"] .type-card{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}