/* ===========================
   CHECKOUT – izgled i raspored
   =========================== */

   .centrirani-naslov {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(34px, 6vw, 64px);
    color: var(--brand, #c9a27e);
    text-align: center;
    margin: 180px 0 24px;
  }

   #checkout {
    max-width: 1100px;
    margin: 0 auto 72px;
    padding: 0 16px;
  }
  
  /* forma kao “card” (lijevo polja • desno sažetak) */
  #checkout-form {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--border, #e8e2dc);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
  }
  
  /* lijevi stupac */
  #checkout-form > label,
  #checkout-form > input,
  #checkout-form > h3,
  #checkout-form .checkbox-group,
  #checkout-form .gumbi-container,
  .kupon-wrap,
  .shipping-group {
    grid-column: 1;
  }
  
  /* Kupon */
  .kupon-wrap { margin: 16px 0 12px; }
  .kupon-row  { display: flex; gap: 10px; }
  #kupon {
    flex: 1;
    padding: 12px 12px;
    border: 1px solid var(--border, #e8e2dc);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  #kupon:focus {
    border-color: var(--brand, #c9a27e);
    box-shadow: 0 0 0 4px rgba(201,162,126,.15);
  }
  .kupon-msg { font-size: .9rem; margin-top: 6px; color: #6b6359; }
  .kupon-msg.ok  { color: #2e7d32; }
  .kupon-msg.err { color: #b00020; }
  
  /* SAŽETAK KOŠARICE (desni stupac) */
  #kosarica-sazetak {
    grid-column: 2;
    align-self: start;
    top: 96px; /* prilagodi po visini headera */
    background: #fff;
    border: 1px solid var(--border, #e8e2dc);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  #kosarica-sazetak h4 {
    margin: 0 0 8px;
    font-family: 'Playfair Display', serif;
  }
  .summary-list { display: grid; gap: 10px; margin: 10px 0; }
  .summary-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 14px; color:#555; }
  .summary-item .qty { color:#777; }
  .summary-total {
    border-top: 1px solid var(--border, #e8e2dc);
    padding-top: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    font-weight: 700;
    color: var(--brand-2, #a88463);
  }
  
  /* Inputs */
  #checkout-form input[type="text"],
  #checkout-form input[type="email"] {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border, #e8e2dc);
    border-radius: 12px;
    background: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  #checkout-form input[type="text"]::placeholder,
  #checkout-form input[type="email"]::placeholder { color: #a09a93; }
  #checkout-form input[type="text"]:focus,
  #checkout-form input[type="email"]:focus {
    border-color: var(--brand, #c9a27e);
    box-shadow: 0 0 0 4px rgba(201,162,126,.15);
  }
  #checkout-form label { font-weight: 600; margin-top: 8px; }
  
  /* Radio / checkbox */
  #checkout-form input[type="radio"],
  #checkout-form input[type="checkbox"] { accent-color: var(--brand, #c9a27e); }
  #checkout-form h3 { margin: 14px 0 8px; font-family: 'Playfair Display', serif; }
  #checkout-form label input[type="radio"] { margin-right: 8px; }
  
  /* Dostava */
  .shipping-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
  }
  .shipping-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border, #e8e2dc);
    border-radius: 12px;
  }
  .shipping-option input { margin-right: 4px; }
  
  /* Uvjeti / privatnost */
  .checkbox-group {
    margin-top: 8px;
    border-top: 1px dashed var(--border, #e8e2dc);
    padding-top: 12px;
    font-size: 14px;
  }
  .checkbox-group a { color: var(--brand-2, #a88463); text-decoration: underline; }
  
  /* Gumbi */
  .gumbi-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
  }
  
  /* PayPal / Bank info (ispod forme) */
  #bank-placeholder,
  #paypal-placeholder {
    max-width: 1100px;
    margin: 16px auto 0;
    background: #fff;
    border: 1px solid var(--border, #e8e2dc);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  
  /* Sažetak – generički boxovi (ako puniš iz JS-a) */
  .summary-box { background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.06); }
  .summary-box h3{ margin:0 0 10px; font-weight:600; }
  .summary-item{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed #eee; }
  .summary-item:last-child{ border-bottom:0; }
  .summary-item img{ width:48px; height:48px; object-fit:cover; border-radius:8px; }
  .summary-item__txt{ flex:1; }
  .summary-item__txt .name{ font-weight:600; }
  .summary-item__txt .muted{ color:#777; font-size:.9rem; }
  .summary-item__price{ font-weight:600; }
  .summary-row{ display:flex; justify-content:space-between; padding:6px 0; }
  .summary-row.total{ font-size:1.05rem; }
  .summary-sep{ border:none; border-top:1px solid #eee; margin:6px 0; }

  /* ===========================
   CHECKOUT – gumbi (polish)
   =========================== */

/* Osnovni izgled */
.gumbi-container .gumb{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;                 /* tap target */
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:16px;
  line-height:1;
  border:1px solid transparent;
  background:linear-gradient(180deg, var(--brand, #c9a27e), var(--brand-2, #a88463));
  color:#fff;
  box-shadow:0 8px 18px rgba(201,162,126,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .15s ease;
  text-align:center;
  text-decoration:none;            /* za <a> */
  width:100%;
}

/* Lijevi gumb kao “ghost”/sekundarni */
.gumbi-container .gumb.gumb-lijevo{
  background:#fff;
  color:var(--brand-2, #a88463);
  border-color:var(--brand, #c9a27e);
  box-shadow:0 0 0 rgba(0,0,0,0);
}

/* Hover/Active/Focus */
.gumbi-container .gumb:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(201,162,126,.32); }
.gumbi-container .gumb:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(201,162,126,.22); }
.gumbi-container .gumb:focus-visible{ outline:3px solid rgba(201,162,126,.35); outline-offset:2px; }

.gumbi-container .gumb.gumb-lijevo:hover{
  background:rgba(201,162,126,.08);
  box-shadow:none;
}

/* Disabled izgled (ako se koristi) */
.gumbi-container button[disabled].gumb{
  filter:grayscale(.2) brightness(.92);
  cursor:not-allowed;
  box-shadow:none;
}

/* Raspored: desktop side-by-side, mobitel stacked */
.gumbi-container{
  display:flex;
  gap:200px;
}
@media (max-width: 640px){
  .gumbi-container{ flex-direction:column; gap:12px; }
  .gumbi-container .gumb{ width:100%; min-height:52px; font-size:17px; }
}

/* Mali detalj: poravnaj tekst dugmadi da se ne lomi ružno */
.gumbi-container .gumb span,
.gumbi-container .gumb strong{ white-space:nowrap; }

  
  /* ===========================
     Responsive (Checkout)
     =========================== */
  @media (max-width: 980px) {
    #checkout-form {
      grid-template-columns: 1fr;    /* stack */
    }
    #kosarica-sazetak {
      grid-column: 1;
      position: static;
      margin-top: 10px;
    }
  }
  
  @media (max-width: 520px) {
    #checkout-form { padding: 18px; border-radius: 16px; }
    .gumbi-container { flex-direction: column; }
  }