/* Path: public/assets/css/checkout.css */

.muted{ color: rgba(255,255,255,.68) !important; }
.small{ font-size: 13px; line-height: 1.55; }

.checkout-hero{
  padding: 46px 0 34px;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(209,174,101,.12), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(44,94,92,.22), transparent 60%),
    linear-gradient(180deg, #071010 0%, #0b1212 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.checkout-head{
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.checkout-title{
  margin: 0 0 6px;
  color: rgba(255,255,255,.94);
  font-size: clamp(22px, 2.8vw, 34px);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.checkout-sub{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}

.checkout-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;
}

.checkout-panel,
.checkout-summary{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
  padding: 16px;
}

.checkout-panel__title,
.checkout-summary__title{
  margin: 0 0 12px;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.2px;
}

.form-grid{ display: grid; gap: 14px; }

.field{ display: grid; gap: 8px; }
.field--full{ width: 100%; }

.field span{
  color: rgba(255,255,255,.74);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
}
.field span em{ color: rgba(255,210,180,.95); font-style: normal; }

.field input,
.field select,
.field textarea{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px 12px;
  color: rgba(255,255,255,.92);
  outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.field select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.70) 50%),
    linear-gradient(135deg, rgba(255,255,255,.70) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px),
    100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
  padding-right: 44px;
}

/* Dropdown readability */
.field select option,
.field select optgroup{
  background: #ffffff;
  color: #111111;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(209,174,101,.55);
  background: rgba(255,255,255,.075);
  box-shadow: 0 0 0 3px rgba(209,174,101,.10);
}

.field input::placeholder,
.field textarea::placeholder{ color: rgba(255,255,255,.52); }

.delivery{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px;
}

.delivery h3{ margin: 0 0 10px; color: rgba(255,255,255,.92); }

.radio{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}
.radio input{ margin-top: 3px; }

.btn-block{ width: 100%; justify-content: center; margin-top: 12px; }

/* ✅ Order Summary layout fixes */
.sum-items{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.sum-item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sum-item__name{
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255,255,255,.90);
  line-height: 1.4;
  word-break: break-word;
}

.sum-item__price{
  flex: 0 0 auto;
  white-space: nowrap;
  color: rgba(255,255,255,.92);
}

.sum-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
}

.sum-row strong{ white-space: nowrap; }

.sum-total{
  border-bottom: none;
  padding-top: 12px;
  margin-top: 4px;
  font-size: 16px;
}

/* Trust badges inside checkout order summary (2 columns on mobile + desktop) */
.checkout-trust{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.checkout-trust__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkout-trust__badge{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-weight: 850;
  font-size: 12.5px;
  line-height: 1.25;
}

.checkout-trust__ico{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(209,174,101,.35);
  background: rgba(209,174,101,.10);
  flex: 0 0 auto;
}

@media (min-width: 981px){
  .checkout-summary{ position: sticky; top: 92px; }
}

@media (max-width: 980px){
  .checkout-grid{ grid-template-columns: 1fr; }
  .checkout-summary{ position: static; }
}

@media (max-width: 720px){
  .checkout-head{ align-items: flex-start; flex-direction: column; }
}

/* ===============================
   Checkout Trust Badges (Fix)
   =============================== */

.checkout-trust {
  margin-top: 16px;
}

.checkout-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.checkout-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 13px;
  color: #eaeaea;
}

/* Icon styling */
.checkout-trust-item i,
.checkout-trust-item svg {
  font-size: 18px;
  color: #f4c06a;
  min-width: 18px;
}

/* Text reset to avoid inheritance bugs */
.checkout-trust-item span {
  line-height: 1.3;
  display: block;
}

/* Prevent list/icon inheritance from order summary */
.checkout-trust *,
.checkout-trust ul,
.checkout-trust li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile stays 2-column (as requested) */
@media (max-width: 768px) {
  .checkout-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}