/* public_html/do/pages/checkout/checkout.css */

/* =========================
   Luxury Checkout UI (Abyat)
   ========================= */

:root{
  --ck-bg: #f6f3ef;
  --ck-card: rgba(255,255,255,.92);
  --ck-stroke: rgba(0,0,0,.08);
  --ck-text: #1f1f22;
  --ck-muted: rgba(31,31,34,.68);

  --ck-gold1: #d7b56d;
  --ck-gold2: #b88a2e;
  --ck-gold3: #f1d48a;

  --ck-accent: #6b21a8;
  --ck-shadow: 0 22px 60px rgba(0,0,0,.10);
  --ck-shadow2: 0 10px 30px rgba(0,0,0,.10);

  --ck-radius: 18px;
  --ck-radius2: 14px;
  --ck-focus: 0 0 0 4px rgba(215,181,109,.25);
}

/* =========================
   GLOBAL FIXES
   ========================= */

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

*, *::before, *::after{
  box-sizing:border-box;
}

body{
  margin:0;
  /* ✅ خلي الخلفية مثل ما كانت */
 /* background:
    radial-gradient(900px 420px at 10% -10%, rgba(215,181,109,.22), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(107,33,168,.12), transparent 55%),
    linear-gradient(180deg, var(--ck-bg), #ffffff 80%);*/
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ck-text);
}

/* =========================
   WRAPPER
   ========================= */

.ckWrap{
  width: calc(100% - 24px);
  max-width:1180px;
  margin:22px auto 44px;
}

/* =========================
   TITLE
   ========================= */

.ckTitle{
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 1000;
  margin: 8px 0 18px;
  display:flex;
  align-items:center;
  gap:10px;
}

.ckTitle::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--ck-gold3), var(--ck-gold2));
}

/* =========================
   GRID (Desktop)
   ========================= */

.ckGrid{
  display:grid;
  grid-template-columns: minmax(0,1.45fr) minmax(0,.85fr);
  gap:16px;
}

.ckLeft, .ckRight{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

/* =========================
   CARD
   ========================= */

.ckCard{
  background:var(--ck-card);
  border:1px solid var(--ck-stroke);
  border-radius:var(--ck-radius);
  padding:14px;
  box-shadow:var(--ck-shadow2);
  position:relative;
  overflow:hidden;
}

.ckCard h3{
  margin:2px 0 12px;
  font-size:16px;
  font-weight:1000;
}

/* =========================
   ALERTS
   ========================= */

.ckErr, .ckOk{
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  margin-bottom:12px;
  border:1px solid;
}

.ckErr{
  background:rgba(255,68,68,.12);
  border-color:rgba(255,68,68,.3);
  color:#b91c1c;
}

.ckOk{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.3);
  color:#166534;
}

.ckMuted{
  color:var(--ck-muted);
  font-weight:700;
}

/* =========================
   INPUTS (NO ZOOM)
   ========================= */

.ckInput,
.ckText,
select.ckInput{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ck-stroke);
  background:rgba(255,255,255,.9);
  font-weight:800;
  font-size:16px; /* ✅ يمنع zoom على iOS */
  outline:none;
  transition:.15s;
}

.ckText{
  min-height:90px;
  resize:vertical;
}

.ckInput:focus,
.ckText:focus,
select.ckInput:focus{
  border-color:var(--ck-gold2);
  box-shadow:var(--ck-focus);
}

/* ✅ المطلوب: مربع "Address" (#ckAddr1) يكون قد مربعين */
#ckAddr1{
  height: 96px;              /* قد مربعين تقريباً */
  padding-top: 14px;         /* يخلي الكتابة نازلة شوي */
  padding-bottom: 14px;
  line-height: 1.35;
}

/* =========================
   ROWS
   ========================= */

.ckRow2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
}
#ckNewAddressForm{
  display:flex;
  flex-direction:column;
  gap:14px;
}
@media (max-width:520px){
  .ckRow2{
    grid-template-columns:1fr;
  }
}

/* =========================
   METHODS
   ========================= */

.ckMethods{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ckMethod{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--ck-stroke);
  background:linear-gradient(180deg,#fff,#f9f9f9);
  box-shadow:0 14px 30px rgba(0,0,0,.06);
  max-width:100%;
  min-width:0;
}

.ckMethod input[type="radio"]{
  width:18px;
  height:18px;
  accent-color:var(--ck-gold2);
}

/* =========================
   BUTTONS
   ========================= */

.ckBtn{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  font-weight:1000;
  cursor:pointer;
  border:0;
  transition:.15s;
}

.ckBtnPrimary{
  background:linear-gradient(135deg,var(--ck-gold3),var(--ck-gold1),var(--ck-gold2));
  color:#1a1306;
  box-shadow:0 18px 40px rgba(184,138,46,.25);
}

.ckBtnGhost{
  background:#fff;
  border:1px solid var(--ck-stroke);
}

/* loading */
.ckBtn.isLoading{
  opacity:.7;
  pointer-events:none;
}

/* =========================
   SUMMARY
   ========================= */

#ckSummary{
  margin-top:8px;
  max-width:100%;
}

#ckSummary img{
  max-width:100%;
  border-radius:12px;
}

#ckSummary *{
  min-width:0;
  max-width:100%;
  word-break:break-word;
}

/* =========================
   STICKY SUMMARY (DESKTOP)
   ========================= */

@media (min-width:981px){
  .ckRight .ckCard{
    position:sticky;
    top:16px;
  }
}

/* =========================
   ✅ MOBILE ORDER FIX
   Confirm AFTER Summary
   ========================= */

/* على الموبايل: نخلي ckGrid تصير flex عمودي
   ونحوّل الأعمدة display:contents لنقدر نرتّب الكروت */
@media (max-width:980px){
  .ckGrid{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .ckLeft, .ckRight{
    display:contents; /* ✅ يسمح بترتيب الكروت فردياً */
  }

  /* ترتيب الكروت:
     Address -> Shipping -> Payment -> Summary -> Confirm */
  #ckCardAddress{ order: 1; }
  #ckCardShip{ order: 2; }
  #ckCardPay{ order: 3; }

  /* Summary card (اللي جوّا ckRight) */
  .ckRight .ckCard{ order: 4; }

  /* Confirm بعد السماري */
  #ckCardConfirm{ order: 5; }
}

/* =========================
   SMALL SCREENS POLISH
   ========================= */

@media (max-width:420px){
  .ckWrap{
    width:calc(100% - 16px);
  }

  .ckCard{
    padding:12px;
  }

  .ckMethod{
    padding:10px;
  }

  /* Address input still feels like "double" on very small screens */
  #ckAddr1{
    height: 92px;
  }
}



/* FIX ADDRESS FORM SPACING */
#ckNewAddressForm:not(.ckHide){
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

#ckNewAddressForm.ckHide{
  display:none !important;
}

#ckNewAddressForm .ckRow2{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}

@media (max-width:520px){
  #ckNewAddressForm .ckRow2{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}

/* spacing between all inputs */
#ckNewAddressForm .ckInput,
#ckNewAddressForm .ckText,
#ckNewAddressForm select{
  margin:0 !important;
}



/* ===== intl-tel-input fix ===== */

.iti{
  width:100% !important;
  display:block;
}

.iti input{
  width:100% !important;
  padding-left:110px !important;
}

.iti--separate-dial-code input{
  padding-left:110px !important;
}

.iti__selected-country{
  padding-left:12px !important;
}

.iti__flag{
  transform: scale(1.1);
}

.iti__selected-dial-code{
  font-weight:800;
}