/* Reset */
    :root {
      --primary-color: #000000;
      --border-color: #ccc;
      --text-color: #333;
      --bg-light: #f9f9f9;
      --bg:#ffffff;
      --surface:#f7fafc;
      --muted:#6b7280;
      --accent:#0f172a;        /* main text */
      --primary:#0b74ff;       /* buttons / accents */
      --focus:#2563eb;         /* focus ring */
      --error:#b00020;
      --radius:12px;
      --field-padding:12px 14px;
      --label-size:15px;
      --shadow: 0 6px 18px rgba(2,6,23,0.08);
      --radius: 6px;
      --spacing: 12px;
    }


    html, body {
     margin: 0;
     padding: 0;
     height: 100%;
    }

    body {
     display: flex;
     flex-direction: column;
     font-family: sans-serif;
      background: var(--bg-light);
      color: var(--text-color);
      line-height: 1.4;
     }

    /* Header */
    .topbar {
      width: 100%; height: 90px;
      border-bottom: 1px solid #323232;
      background-color: #fff; position: relative;
    }
    .topbar .container {
      max-width: 1200px; margin: 0 auto; height: 100%; position: relative;
    }
    .topbar .logo {
      position: absolute; left: 30%; top: 50%; margin-top: 20px ;
    }
    .topbar .logo img { height: 60px; display: block; }

    /* Main layout container */
    .main {
     display: flex;
     flex: 1;
     margin-top: 90px;
     min-height: auto;
   }

     /* Right column */
    .column-right {
      flex: 1;
      background: #fff;
      padding: 20px;
      }

        /* Left column */
    .column-left {
      flex: 1;
      background: #ddd;
      padding: 20px;
      border-left: 1px solid #bdb7b7;
      height: 100%;
      box-sizing: border-box;
    }

    .maxx-width {
     max-width: 550px;
    }

    .columns-left {
    margin-left: auto;
    padding-right: 20px;
    }



.checkout-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
  margin: 1rem;
}

/* منتجات */
.items-list table {
  width: 100%;
  border-collapse: collapse;
}
.items-list th, .items-list td {
  padding: 0.5rem;
  border-bottom: 1px solid #bbb;
}
.items-list img {
  width: 50px; height: auto; object-fit: cover;
}

/* اللوحة الجانبية */
.summary-panel {
  padding: 1rem;
  border-radius: 8px;
}
.discount {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.discount input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.discount button {
  padding: 0.5rem 1rem;
  border: none;
  background: #000000;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.summary-lines .line {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}
.summary-lines .grand {
  font-weight: bold;
  border-top: 1px solid #ccc;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}
.productstotals { text-align: right;}

    .discount {
     display: flex;
     gap: 10px;
     margin: 20px 0;
    }
   .discount input {
     flex: 1;
     padding: 8px;
    }
   .discount button {
    padding: 8px 16px;
   }

    @media (max-width: 768px) {
      .main { flex-direction: column; }
      .topbar .logo { margin: auto; margin-top: 20px; }
      .columns-left { order: 1; height: 250px; }
      .column-right { order: 2; font-size: 14px; }
      .items-list { font-size: 12px; }
    }


  /* حاوية العنوان و الشحن */
      .container {
      width: 100%;
      max-width: 530px;
      margin: auto;
      border-radius: var(--radius);
      padding: 7px;
    }
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing);
    }
    .section-header h2 {
      font-size: 1.2rem;
    }
    .section-header a {
      font-size: 0.9rem;
      color: var(--primary-color);
    }
    form {
      display: flex;
      flex-direction: column;
    }
    .form-group {
      margin-bottom: var(--spacing);
      position: relative;
    }
    #country {
      width: 100%;
    }
    .contact, .phone, .address {
     width: 96%;
    }
    .firstName, .lastName, .city, .postalCode {
      width: 92%;
    }
    label {
      display: block;
      margin-bottom: 4px;
      font-size: 0.95rem;
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select {
      padding: 10px 12px;
      padding-inline-start: 12px;
      font-size: 0.95rem;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      outline: none;
    }
    input[type="checkbox"] {
      margin-inline-end: 6px;
      vertical-align: middle;
    }
    .checkbox-group {
      display: flex;
      align-items: center;
      margin-bottom: var(--spacing);
    }
    /* صفوف جانبية */
    .row {
      display: flex;
      gap: 12px;
    }
    .row .form-group {
      flex: 1;
    }
    /* أيقونات داخل الحقل */
    .form-group svg {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      fill: var(--border-color);
      cursor: pointer;
    }
    .icon-search { right: 12px; }
    .icon-info { right: 12px; }
    /* صندوق طريقة الشحن */
    .shipping-h2 { font-size: 14px; margin-bottom: -18px;}
    .shipping-method {
      border: 1px solid var(--primary-color);
      border-radius: var(--radius);
      padding: 12px;
      background: #f0f8ff;
      margin-top: var(--spacing);
    }
    .shipping-method label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.95rem;
      cursor: pointer;
    }
    .shipping-method input[type="radio"] {
      margin-inline-end: 6px;
    }
    .btn-submit {
      background: var(--primary-color);
      color: #fff;
      border: none;
      padding: 12px;
      font-size: 1rem;
      border-radius: var(--radius);
      cursor: pointer;
      margin-top: 20px;
      width: 100%;
    }
    .btn-submit:hover {
      background: #101010;
    }

.stripe-element{
      padding: 10px 12px;
      padding-inline-start: 12px;
      font-size: 0.95rem;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      outline: none;
}

    @media (max-width: 768px) {
    .contact, .phone, .address { width: 91%; }
    .firstName, .lastName, .city, .postalCode { width: 82%; }
    .shipping-method span, .shipping-method strong { font-size: 12px;}
    .topbar .logo { position: absolute; left: 30%; top: -10%; margin-top: 20px ; }
    .column-left { padding: 1rem; border-radius: 8px; margin-top: -90px;}
    }

  /* حاوية العنوان والشحن انتهى */


  /* حاوية الدفع */
  .font-semibold {
    margin-top: 5px;
  }
  .paypal-container {
  width: 96.5%;     
  margin: 10px 0 0 10px;
}
.form-label { margin-left: 15px; }
@media (max-width: 768px) { .paypal-container { width: 100%; margin: 10px 0 0 6px; } }

#submit.processing {
  background-color: gray; /* أو أي لون تحبه */
  cursor: not-allowed;
}