/* ============================================================
   Pakistan & Counting — Checkout page
   Pixel match to Figma: payment notice · billing details form ·
   direct bank transfer · wallet select · place order  |  order
   summary box over the green watermark panel · coupon.
   Base tokens / header / footer / buttons come from style.css.
   ============================================================ */
:root{ --k-green:#26B685; --k-green-dk:#1E9E73; --k-orange:#FF6B22; --k-yellow:#F9C300;
  --k-pink:#EF2167; --k-dark:#2C2C2C; --k-line:#D9D9D9; --k-label:#3A3A3A; }

.ck-wrap{position:relative;overflow:hidden;background:#fff;padding:34px 0 70px}
.ck-wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px)}
.ck-wrap>.container{position:relative;z-index:1}
/* green side panel behind the order box, bleeding to the right screen edge.
   Anchored to the box's own top & bottom (in px), NOT to a percentage of a column
   whose height changes when the page reflows — so the colour stays fixed and
   consistent at any zoom level or cart size. right:-100vw always reaches the edge
   (the section's overflow:hidden + body overflow-x:hidden clip the excess). */
.ck-panel{display:block;position:absolute;z-index:0;pointer-events:none;
  top:-30%;bottom:-14px;left:55%;right:-100vw;height:65%;background:var(--green)}
.ck-panel img{display:block;width:100%;max-width:none;height:auto}

/* ---------- top notice + back link ---------- */
.ck-alert{position:relative;z-index:2;margin-right:350px;border:1px dashed #F3A98A;background:#FEF1EA;
  padding:14px 20px;font-family:var(--ff);font-weight:600;font-size:13.5px;color:var(--k-orange);line-height:1.7}
.ck-back{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin:22px 0 18px;
  font-family:var(--ff);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--k-pink)}
.ck-back:hover{text-decoration:underline}

/* ---------- layout ---------- */
.ck-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 580px;gap:48px;align-items:start}

/* ---------- form card ---------- */
.ck-form{background:#fff;border:2px solid #BDEBDB;box-shadow:-8px 10px 0 0 rgba(38,182,133,.16);padding:30px 32px 34px}
.ck-h{position:relative;font-family:var(--ff);font-weight:900;text-transform:uppercase;font-size:23px;color:var(--k-dark);
  padding-bottom:14px;margin-bottom:22px}
.ck-h::after{content:none;display:none}

.ck-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.ck-field{display:flex;flex-direction:column}
.ck-field--full{grid-column:1/-1}
.ck-field label{font-family:var(--ff);font-weight:600;font-size:15px;color:var(--k-label);margin-bottom:9px}
.ck-field label .req{color:var(--k-orange)}
.ck-field input{font-family:var(--ff);font-size:15.5px;color:var(--k-dark);height:54px;padding:0 16px;border:1px solid var(--k-line);background:#fff}
.ck-field input::placeholder{color:#7f7f7f}
.ck-field input:focus{outline:none;border-color:var(--k-green)}
.ck-field.has-error input{border-color:var(--k-pink);background:#fff6f9}
.ck-err{margin-top:6px;font-family:var(--ff);font-size:12px;font-weight:700;color:var(--k-pink);display:none}
.ck-field.has-error .ck-err{display:block}

.ck-consent{margin:18px 0 0;font-family:var(--ff);font-size:12.5px;font-weight:500;color:#c06a3f;line-height:1.6}
.ck-consent .req{color:var(--k-pink);font-weight:800}
.ck-consent a{color:var(--k-green);font-weight:800}

/* ---------- order summary ---------- */
.ck-order-col{position:relative}
.ck-order{position:relative;width:400px;background:#fff;border:2px solid #26b685;padding:24px 24px 26px}
.ck-order::after {
    content: "";position: absolute;top: 12px;right: 12px;width: 100%;height: 100%;background: url("../images/checkout/Green-background-checkout-bg.svg") no-repeat;background-size: cover;z-index: -1;
}
.ck-order__title{position:relative;font-family:var(--ff);font-weight:900;text-transform:uppercase;font-size:21px;color:var(--k-dark);
  padding-bottom:13px;margin-bottom:16px}
.ck-order__title::after{content:none;display:none}
.ck-order__head{display:flex;justify-content:space-between;font-family:var(--ff);font-weight:800;text-transform:uppercase;
  font-size:12px;color:var(--k-dark);padding-bottom:12px;letter-spacing:.03em}
/* each line item is its own bordered mint box (Figma) */
.ck-oitem{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:12px;
  background:#EFFAF5;border:1px solid rgba(38,182,133,.35)}
.ck-oitem__x{flex:0 0 auto;color:var(--k-orange);font-size:16px;line-height:1;background:none;border:0;cursor:pointer}
.ck-oitem__x:hover{color:var(--k-pink)}
.ck-oitem img{width:46px;height:46px;flex:0 0 auto;object-fit:cover;border:1px solid rgba(0,0,0,.06)}
.ck-oitem__name{flex:1;font-family:var(--ff);font-weight:600;font-size:13px;color:var(--k-dark);line-height:1.3}
.ck-oitem__name b{font-weight:800}
.ck-oitem__sub{flex:0 0 auto;font-family:var(--ff);font-weight:700;font-size:13.5px;color:var(--k-dark);white-space:nowrap}
.ck-order__sub,.ck-order__disc{display:flex;justify-content:space-between;gap:10px;padding-top:12px;font-family:var(--ff);font-size:14px;color:var(--k-dark)}
.ck-order__disc{color:var(--k-green);font-weight:700}
.ck-order__total{display:flex;justify-content:space-between;gap:10px;padding-top:14px;margin-top:6px;border-top:1px solid var(--k-line);font-family:var(--ff);font-size:16px;color:var(--k-dark)}
.ck-order__total b{font-weight:800}

.ck-coupon-lead{margin:20px 0 10px;font-family:var(--ff);font-size:13.5px;color:#555}
.ck-coupon-lead b{color:var(--k-green);font-weight:800}
.ck-coupon{display:flex;align-items:center;border:1.5px dashed var(--k-green);background:#fff;padding:6px 6px 6px 4px}
.ck-coupon input{flex:1;min-width:0;border:0;outline:0;padding:11px 14px;font-family:var(--ff);font-size:14px;color:var(--k-dark);background:transparent}
.ck-coupon input::placeholder{color:#8a8a8a}
.ck-coupon__btn{flex:0 0 auto;background:var(--k-green);color:#fff;font-family:var(--ff);font-weight:900;text-transform:uppercase;
  font-size:12.5px;letter-spacing:.04em;padding:11px 20px;border:0;cursor:pointer;box-shadow:4px 4px 0 0 var(--k-yellow)}
.ck-coupon__btn:hover{background:var(--k-green-dk)}
.ck-coupon-msg{margin-top:8px;font-family:var(--ff);font-size:12.5px;font-weight:700;color:var(--k-pink)}
.ck-coupon-msg.ok{color:var(--k-green)}

/* ---------- payment: Credit / Debit Card (Figma) ---------- */
.ck-pay{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:24px}
.ck-pay__method{display:flex;flex-direction:column;gap:6px}
.ck-pay__label{font-family:var(--ff);font-weight:800;font-size:15px;color:var(--k-dark)}
.ck-secure{font-family:var(--ff);font-weight:500;font-size:12px;color:#7b7b7b;line-height:1.45;max-width:210px}
.ck-pay__logos{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ck-cardlogo{display:grid;place-items:center;width:46px;height:30px;background:#fff;border:1px solid #b5b3b3}
.ck-cardlogo__svg{width:32px;height:20px;display:block}
/* full-width Place Order button */
.ck-place{display:block;width:70%;margin:20px auto;border:0;cursor:pointer;color:#fff;
  font-family:var(--ff);font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:16px;padding:16px 20px;
  background:linear-gradient(90deg,#FF7A2F,var(--k-orange));box-shadow:6px 6px 0 0 var(--k-yellow);
  transition:transform .12s ease,box-shadow .12s ease}
.ck-place:hover{transform:translate(1px,1px);box-shadow:4px 4px 0 0 var(--k-yellow)}
.ck-order__rule{height:1px;background:var(--k-line);margin:20px 0}
.ck-terms{margin:0;text-align:center;font-family:var(--ff);font-weight:600;font-size:13.5px;color:var(--k-dark)}
.ck-terms a{color:var(--k-green);font-weight:800;text-decoration:underline}
.ck-terms .req{color:var(--k-pink);font-weight:800}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .ck-grid{grid-template-columns:1fr;justify-items:center}
  .ck-alert{margin-right:0}
  /* order column matches the box so the green panel (% of the column) stays behind it */
  .ck-order-col{width:100%;max-width:460px;margin-top: 90px;}
  .ck-order{width:100%}
  .ck-form{width:100%;max-width:600px}
  /* green peeks up + right behind the box, clipped to the section (no h-scroll) */
  .ck-panel{top:-12px;bottom:-12px;left:52%;right:-100vw;width:auto;height:auto}
}
@media (max-width:600px){
  .ck-form{padding:22px 18px 26px}
  .ck-fields{grid-template-columns:1fr}
}