/* =========================================================
   PAGE: ORDER CONTENT — Luxury Checkout
   ========================================================= */

.order-shell{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 26px;
}

.order-kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .32em;
  color: rgba(255,255,255,.55);
}

.order-title{
  margin-top: 8px;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);
}

.order-sub{
  margin-top: 10px;
  color: rgba(255,255,255,.70);
  line-height: 1.75;
}

/* Card container */
.order-card{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 18px;
  box-shadow:
    0 26px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.order-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}

.order-section-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.90);
}

.order-mini{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgba(255,255,255,.55);
}

/* Sticky */
.order-card--sticky{
  position: sticky;
  top: 92px;
}

/* Empty */
.order-empty{
  padding: 18px;
  border-radius: 22px;
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.65);
  line-height: 1.7;
}

/* Items */
.order-items{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

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

  padding: 12px 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.01);

  transition: transform .18s ease, border-color .25s ease, background .25s ease, box-shadow .28s ease;
}

.order-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.02);
  border-color: rgba(212,176,90,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.order-item__left{
  display:flex;
  gap: 12px;
  min-width: 0;
}

.order-thumb{
  width: 76px;
  height: 56px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 22% 24%, rgba(212,176,90,.08), transparent 60%),
    rgba(255,255,255,.015);
  flex: 0 0 auto;
}

.order-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(.95) contrast(1.04);
  transform: scale(1.01);
}

.order-meta{
  min-width: 0;
}

.order-name{
  font-weight: 800;
  color: rgba(255,255,255,.90);
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40ch;
}

.order-subline{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.58);
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.order-item__right{
  text-align: right;
  min-width: 150px;
}

.order-line-total{
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.88);
  font-size: 12px;
}

/* Qty */
.qty{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 6px 8px;
  background: rgba(255,255,255,.02);
}

.qty button{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.82);
  font-weight: 900;
  transition: transform .18s ease, border-color .25s ease;
}
.qty button:hover{
  transform: translateY(-1px);
  border-color: rgba(231,211,154,.28);
}
.qty span{
  min-width: 18px;
  text-align:center;
  font-weight: 900;
  color: rgba(255,255,255,.82);
  font-size: 12px;
}

.remove-btn{
  margin-top: 10px;
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgba(255,255,255,.52);
  border-bottom: 1px solid rgba(212,176,90,.22);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.remove-btn:hover{
  color: rgba(231,211,154,.92);
  border-color: rgba(212,176,90,.55);
}

/* Form */
.order-form{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.field{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.field-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgba(255,255,255,.55);
}

.field-input{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  padding: 12px 12px;
  font-size: 14px;
  color: rgba(255,255,255,.86);
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .25s ease;
}

.field-input:hover{
  background: rgba(255,255,255,.03);
}

.field-input:focus{
  border-color: rgba(212,176,90,.35);
  box-shadow: 0 0 0 3px rgba(212,176,90,.10);
}

.field-textarea{
  resize: vertical;
  min-height: 88px;
}

.field-err{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  opacity: .85;
}

/* Summary */
.order-summary{
  margin-top: 4px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.26);
  padding: 14px 14px;
}

.sum-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sum-row:last-child{ border-bottom: none; }

.sum-label{
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 700;
}

.sum-val{
  color: rgba(255,255,255,.90);
  font-weight: 900;
  letter-spacing: .02em;
}

.sum-row--total .sum-label{
  color: rgba(255,255,255,.80);
}
.sum-row--total .sum-val{
  font-size: 14px;
}

/* Checkbox */
.check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: rgba(255,255,255,.66);
  font-size: 13px;
  line-height: 1.6;
}

.check input{
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--gold-2);
}

.check-link{
  color: rgba(231,211,154,.92);
  border-bottom: 1px solid rgba(212,176,90,.30);
  padding-bottom: 1px;
}

.check-link:hover{
  border-color: rgba(212,176,90,.55);
}

/* Pay */
.pay-btn{
  width: 100%;
  border-radius: 18px;
  padding: 12px 14px;
  font-weight: 900;
  letter-spacing: .02em;
}

.pay-btn:disabled{
  filter: saturate(.7) contrast(.95);
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.pay-hint{
  font-size: 11px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
}

.pay-msg{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 12px 12px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.6;
}

.hidden{ display:none; }

/* Responsive */
@media (max-width: 640px){
  .order-shell{ padding: 20px; border-radius: 24px; }
  .order-title{ font-size: 34px; }
  .order-card{ border-radius: 24px; }
  .order-item{ border-radius: 20px; }
  .order-thumb{ width: 68px; height: 52px; border-radius: 16px; }
  .order-item__right{ min-width: 130px; }
}