/*
 * PunjabiLibas — Checkout Page Redesign
 * Payment method asked first; address fields + payment/place-order
 * revealed only after a method is chosen. Gating classes are added
 * by checkout-page.js — if JS fails, nothing here hides anything,
 * so the native WooCommerce form remains fully usable.
 */

:root {
  --plco-deep:       #1C0A00;
  --plco-maroon:     #6B1E1E;
  --plco-gold:       #C49A3C;
  --plco-cream:      #FAF6F0;
  --plco-warm-white: #FFFDF9;
  --plco-warm-gray:  #F0EBE3;
  --plco-text-muted: #6B5E55;
  --plco-border:     rgba(196,154,60,0.2);
  --plco-r:          6px;
  --plco-r-lg:       12px;
  --plco-max-w:      900px;
}

.woocommerce-checkout .site-content,
.woocommerce-checkout #primary {
  background: var(--plco-cream);
}
.woocommerce-checkout .ast-container {
  max-width: var(--plco-max-w);
  padding-top: 24px;
  padding-bottom: 48px;
}

.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 32px !important;
  color: var(--plco-deep) !important;
  font-weight: 500 !important;
}

/* ── Payment method chooser (proxy UI) ───────────────────── */
.pl-checkout-method-chooser {
  background: var(--plco-warm-white);
  border: 1px solid var(--plco-border);
  border-radius: var(--plco-r-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.pl-checkout-method-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--plco-deep);
  margin: 0 0 14px;
}
.pl-checkout-method-choices {
  display: flex;
  gap: 14px;
}
.pl-checkout-method-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 14px;
  border: 1.5px solid var(--plco-border);
  border-radius: var(--plco-r-lg);
  background: #fff;
  color: var(--plco-deep);
  font-size: 14px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all .15s;
}
.pl-checkout-method-icon { font-size: 28px; }
.pl-checkout-method-btn:hover,
.pl-checkout-method-btn.is-selected {
  border-color: var(--plco-maroon);
  background: var(--plco-cream);
}
.pl-checkout-chosen-label {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--plco-text-muted);
}
.pl-checkout-chosen-text { font-weight: 500; color: var(--plco-deep); }
.pl-checkout-change-method {
  margin-left: 10px;
  color: var(--plco-maroon) !important;
  text-decoration: underline !important;
  font-size: 12.5px;
}

/* ── Step gating (JS-controlled — see file header) ───────── */
form.checkout.pl-checkout-stepped #customer_details,
form.checkout.pl-checkout-stepped #payment {
  display: none;
}
form.checkout.pl-checkout-stepped.pl-method-chosen #customer_details,
form.checkout.pl-checkout-stepped.pl-method-chosen #payment {
  display: block;
  animation: pl-co-fade-in .3s ease;
}
@keyframes pl-co-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Section panels ───────────────────────────────────────── */
#customer_details,
#order_review {
  background: var(--plco-warm-white);
  border: 1px solid var(--plco-border);
  border-radius: var(--plco-r-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.woocommerce-checkout h3,
#order_review_heading {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 20px !important;
  color: var(--plco-deep) !important;
  font-weight: 500 !important;
  margin: 0 0 16px !important;
}
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--plco-border);
}

/* ── Form fields ──────────────────────────────────────────── */
.woocommerce-checkout .form-row label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--plco-deep);
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border: 1.5px solid var(--plco-border) !important;
  border-radius: var(--plco-r) !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  font-family: 'DM Sans', sans-serif !important;
  background: #fff !important;
  box-shadow: none !important;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--plco-maroon) !important;
  outline: none !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
  border: 1.5px solid var(--plco-border) !important;
  border-radius: var(--plco-r) !important;
  height: 44px !important;
  padding: 6px 4px;
}

/* ── Order review table ───────────────────────────────────── */
#order_review table.shop_table {
  border: 1px solid var(--plco-border) !important;
  border-radius: var(--plco-r) !important;
  border-collapse: separate !important;
  overflow: hidden;
}
#order_review table.shop_table th,
#order_review table.shop_table td {
  border: none !important;
  border-bottom: 1px solid var(--plco-border) !important;
  padding: 12px 14px !important;
}
#order_review table.shop_table thead th {
  background: var(--plco-warm-gray);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--plco-text-muted);
  font-weight: 500;
}
#order_review .order-total th,
#order_review .order-total td {
  font-size: 16px;
  font-weight: 600;
  color: var(--plco-deep);
  border-bottom: none !important;
}

/* ── Payment description boxes + terms ───────────────────── */
#payment ul.payment_methods { list-style: none; padding: 0; }
#payment .payment_box {
  background: var(--plco-cream);
  border-radius: var(--plco-r);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--plco-text-muted);
  margin: 8px 0 0;
}
.woocommerce-terms-and-conditions-wrapper {
  margin-top: 16px;
  font-size: 12px;
  color: var(--plco-text-muted);
}
.woocommerce-privacy-policy-text p { font-size: 11.5px; }

/* ── Place order button ───────────────────────────────────── */
#payment #place_order {
  display: block;
  width: 100%;
  padding: 15px;
  margin-top: 16px;
  border: none;
  border-radius: var(--plco-r-lg);
  background: linear-gradient(135deg, #E7A13D 0%, #C9772A 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all .2s;
}
#payment #place_order:hover {
  background: linear-gradient(135deg, #C9772A 0%, #E7A13D 100%);
  box-shadow: 0 4px 14px rgba(201,119,42,0.35);
}

@media (max-width: 767px) {
  .pl-checkout-method-choices { flex-direction: column; }
  #customer_details,
  #order_review,
  .pl-checkout-method-chooser {
    padding: 16px;
  }
}