.inner-page{background:#f6fafc}.inner-page .site-footer{margin-top:0}.page-banner{position:relative;overflow:hidden;padding:64px 0 58px;background:linear-gradient(125deg,#063375 0%,#0d659e 68%,#41b6e6 125%);color:#fff}.page-banner::before{content:"";position:absolute;width:360px;height:360px;border:68px solid rgba(255,255,255,.07);border-radius:50%;left:-120px;top:-210px}.page-banner .container{position:relative}.page-banner h1{margin:7px 0 4px;font-size:clamp(38px,5vw,62px);line-height:1.25}.page-banner p{margin:0;color:rgba(255,255,255,.78)}
.checkout-section{padding:68px 0 90px}.checkout-layout,.payment-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.75fr);gap:28px;align-items:start}.checkout-panel{background:#fff;border:1px solid #e4eef3;border-radius:24px;box-shadow:0 14px 45px rgba(6,51,117,.09)}.form-card{padding:32px}.summary-card{position:sticky;top:112px;padding:28px}.panel-heading{display:flex;align-items:center;gap:14px;margin-bottom:28px}.panel-heading.compact{margin-bottom:20px}.panel-heading h2{margin:0 0 2px;color:#063375;font-size:24px}.panel-heading p{margin:0;color:#7a8798;font-size:13px}.panel-icon{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#063375,#41b6e6);color:#fff;font-weight:900}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{position:relative;display:grid;gap:7px}.field-wide{grid-column:1/-1}.field>span{color:#334966;font-size:13px;font-weight:800}.field small{font-weight:400;color:#95a0ad}.field input,.field select,.field textarea{width:100%;border:1px solid #d7e3e9;border-radius:13px;background:#fbfdfe;color:#1f344f;padding:13px 15px;outline:none;transition:.2s}.field textarea{resize:vertical;min-height:90px}.field input:focus,.field select:focus,.field textarea:focus{border-color:#41b6e6;background:#fff;box-shadow:0 0 0 4px rgba(65,182,230,.12)}.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#d74755;box-shadow:0 0 0 4px rgba(215,71,85,.09)}.check-field{display:flex;align-items:flex-start;gap:10px;margin:22px 0;color:#627287;font-size:13px}.check-field input{margin-top:6px;accent-color:#063375}.primary-action,.secondary-action{border:0;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font-weight:900;cursor:pointer;transition:.23s}.primary-action{width:100%;padding:15px 20px;background:linear-gradient(110deg,#063375,#1c3b67);color:#fff}.primary-action:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(6,51,117,.2)}.secondary-action{padding:11px 16px;background:#eef8fc;color:#063375}.cart-items{display:grid;gap:13px}.cart-row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:12px;border-radius:16px;background:#f8fbfd;border:1px solid #e7eff3}.cart-row img{width:72px;height:72px;object-fit:contain;border-radius:12px;background:#fff;padding:5px}.cart-row h3{font-size:13px;line-height:1.55;color:#063375;margin:0 0 5px}.cart-row-actions{display:flex;align-items:center;gap:6px;margin-top:7px}.qty-button,.remove-button{border:0;cursor:pointer}.qty-button{width:27px;height:27px;border-radius:8px;background:#e7f3f8;color:#063375;font-weight:900}.qty-value{min-width:20px;text-align:center;font-size:12px;font-weight:800}.remove-button{padding:4px;background:transparent;color:#c94958;font-size:11px}.summary-lines{display:grid;gap:12px;margin-top:22px;padding-top:20px;border-top:1px dashed #d9e5ea}.summary-lines>div{display:flex;justify-content:space-between;gap:16px;color:#617184;font-size:14px}.summary-lines strong{color:#063375}.summary-total{margin-top:3px;padding-top:14px;border-top:1px solid #e2ebef;font-size:18px!important}.summary-total strong{font-size:21px;color:#0a6e98}.safe-note{display:flex;gap:10px;margin-top:20px;padding:12px 13px;border-radius:13px;background:#eefaf5;color:#39745c;font-size:11px}.safe-note p{margin:0}.empty-cart{text-align:center;padding:35px 12px}.empty-cart-icon{font-size:45px}.empty-cart h3{margin:7px 0;color:#063375}.empty-cart p{font-size:13px;color:#758498}.empty-cart .secondary-action{display:inline-flex}.form-error{margin:0 0 17px;padding:11px 13px;border-radius:11px;background:#fff0f1;color:#a4313e;font-size:12px}
.payment-layout{grid-template-columns:minmax(0,1.05fr) minmax(330px,.75fr);max-width:1050px}.payment-brands{display:flex;gap:9px;margin:-6px 0 24px}.payment-brands span{padding:5px 10px;border:1px solid #dce8ed;border-radius:8px;background:#fff;font:800 11px Arial;color:#234268}.card-form>.field{margin-bottom:18px}.card-number-field .field-icon{position:absolute;left:14px;bottom:11px;font-size:20px}.card-details{margin-bottom:4px}.demo-warning{margin:18px 0;padding:12px 14px;border-radius:12px;background:#fff9e8;border:1px solid #f2dda0;color:#7d6220;font-size:11px}.shipping-highlight{margin-inline:-10px;padding:9px 10px;border-radius:10px;background:#eaf8fd;color:#176483!important}.payment-product{display:grid;gap:10px}.payment-product-item{display:flex;gap:12px;align-items:center;padding:12px;border-radius:15px;background:#f7fbfd}.payment-product-item img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:11px;padding:4px}.payment-product-item h3{margin:0;font-size:13px;line-height:1.5;color:#063375}.payment-product-item p{margin:4px 0 0;color:#718096;font-size:11px}.edit-order{display:block;margin-top:18px;text-align:center;color:#0b709b;font-size:12px;font-weight:800}.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}.trust-row span{padding:8px 5px;border-radius:9px;background:#f6fafc;text-align:center;color:#6b7d90;font-size:9px}
.verification-section{min-height:580px}.verification-wrap{max-width:640px}.verification-card,.success-card{text-align:center;padding:46px}.verification-icon,.success-check{width:74px;height:74px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#063375,#41b6e6);color:#fff;font-size:32px;box-shadow:0 15px 35px rgba(6,51,117,.2)}.verification-card h2,.success-card h2{margin:8px 0;color:#063375;font-size:30px}.verification-card>p,.success-card>p{max-width:490px;margin:0 auto 24px;color:#718096;font-size:14px}.otp-inputs{display:flex;justify-content:center;gap:10px;margin:22px 0}.otp-inputs input{width:54px;height:62px;border:1px solid #d4e2e8;border-radius:14px;text-align:center;font:900 24px Arial;color:#063375;outline:none}.otp-inputs input:focus{border-color:#41b6e6;box-shadow:0 0 0 4px rgba(65,182,230,.12)}.otp-meta{display:flex;justify-content:space-between;align-items:center;margin:0 auto 18px;max-width:374px;color:#748399;font-size:11px}.otp-meta button{border:0;background:transparent;color:#0a709d;font-weight:800;cursor:pointer}.otp-meta button:disabled{color:#aeb8c2;cursor:not-allowed}.verification-card .primary-action{max-width:390px;margin-inline:auto}.verification-card .edit-order{margin-top:14px}.success-check{background:linear-gradient(145deg,#16875d,#48c796)}.success-total{display:flex;justify-content:space-between;max-width:360px;margin:22px auto;padding:15px 18px;border-radius:14px;background:#f0faf6;color:#28694e}.success-card .primary-action{max-width:330px;margin-inline:auto}.success-card[hidden],.verification-card[hidden]{display:none}
@media(max-width:900px){.checkout-layout,.payment-layout{grid-template-columns:1fr}.summary-card{position:static;order:-1}.payment-summary{order:0}}
@media(max-width:820px){.inner-page .header-actions{display:none}.page-banner{padding:50px 0}.checkout-section{padding:42px 0 68px}.form-card,.summary-card{padding:23px}}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}.field-wide{grid-column:auto}.checkout-panel{border-radius:19px}.form-card,.summary-card,.verification-card,.success-card{padding:20px}.panel-heading h2{font-size:20px}.cart-row{grid-template-columns:62px 1fr}.cart-row img{width:62px;height:62px}.otp-inputs{gap:5px}.otp-inputs input{width:43px;height:54px;font-size:20px}.verification-card h2,.success-card h2{font-size:25px}.trust-row{grid-template-columns:1fr}}


/* =========================================
   تنسيق أخطاء حقول الدفع
========================================= */

#payment-form .field input,
#payment-form .field select,
#payment-form .field textarea {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* الحقل الخطأ بعد محاولة إرسال الفورم */
#payment-form.was-validated .field input:invalid,
#payment-form.was-validated .field select:invalid,
#payment-form.was-validated .field textarea:invalid {
  border-color: #dc3545 !important;
  background-color: #fff8f8 !important;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12) !important;
}

/* تغيير لون اسم الحقل عند وجود خطأ */
#payment-form.was-validated .field:has(input:invalid) > span:first-child,
#payment-form.was-validated .field:has(select:invalid) > span:first-child,
#payment-form.was-validated .field:has(textarea:invalid) > span:first-child {
  color: #c62828;
}

/* الحقل الصحيح */
#payment-form.was-validated .field input:valid:not(:placeholder-shown),
#payment-form.was-validated .field select:valid,
#payment-form.was-validated .field textarea:valid:not(:placeholder-shown) {
  border-color: #21a366 !important;
  background-color: #f8fffb !important;
  box-shadow: 0 0 0 4px rgba(33, 163, 102, 0.1) !important;
}

/* التركيز على حقل خاطئ */
#payment-form.was-validated .field input:invalid:focus,
#payment-form.was-validated .field select:invalid:focus,
#payment-form.was-validated .field textarea:invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 5px rgba(220, 53, 69, 0.15) !important;
  outline: none;
}

/* كلاس خطأ يدوي من JavaScript */
#payment-form .field input.is-invalid,
#payment-form .field select.is-invalid,
#payment-form .field textarea.is-invalid {
  border-color: #dc3545 !important;
  background-color: #fff8f8 !important;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12) !important;
}

/* رسالة الخطأ أسفل الحقل */
.field-error-message {
  display: none;
  margin-top: 7px;
  color: #c62828;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.field-error-message.show {
  display: block;
}

/* اهتزاز خفيف للحقل الخطأ */
@keyframes paymentFieldShake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(4px);
  }

  50% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(2px);
  }
}

#payment-form .field input.shake-error {
  animation: paymentFieldShake 0.25s ease;
}

#payment-form .field input.is-invalid {
  border: 2px solid #dc3545 !important;
  background: #fff7f7 !important;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.13) !important;
}

#payment-form .field input.is-valid {
  border: 2px solid #22a06b !important;
  background: #f7fffb !important;
  box-shadow: 0 0 0 4px rgba(34, 160, 107, 0.1) !important;
}

#payment-form .field-error {
  display: block;
  width: 100%;
  margin-top: 7px;
  color: #c62828;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

#payment-form .field input.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 5px rgba(220, 53, 69, 0.16) !important;
  outline: none;
}