:root {
  --wcp-bg:     rgba(15, 23, 42, .55);
  --wcp-card:   #ffffff;
  --wcp-text:   #0f172a;
  --wcp-muted:  rgba(15, 23, 42, .65);
  --wcp-border: rgba(15, 23, 42, .10);
  --wcp-shadow: 0 20px 60px rgba(2, 6, 23, .35);
  --wcp-radius: 18px;
}

/* ── Loop wrapper ── */
.wcp-loop-wrap { margin-top: 10px; }

/* ═══════════════════════════════ MODAL ═══════════════════════════════ */
.wcp-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.wcp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--wcp-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wcp-modal__dialog {
  position: relative;
  width: min(980px, calc(100% - 28px));
  max-height: min(92vh, 980px);
  margin: 48px auto;
  background: var(--wcp-card);
  border: 1px solid var(--wcp-border);
  border-radius: var(--wcp-radius);
  box-shadow: var(--wcp-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(12px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.wcp-modal.wcp-open .wcp-modal__dialog {
  transform: translateY(0);
  opacity: 1;
}

/* ── Close button (theme-proof) ── */
.wcp-modal__close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: rgba(0, 0, 0, .45) !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: background .2s ease, transform .15s ease;
}

.wcp-modal__close::before {
  content: "\00D7";
  font-size: 22px !important;
  line-height: 1 !important;
  color: #fff !important;
  font-weight: 400 !important;
  font-family: Arial, sans-serif !important;
}

.wcp-modal__close:hover {
  background: rgba(0, 0, 0, .65) !important;
  transform: translateY(-1px);
}

/* ── Header ── */
.wcp-modal__header {
  padding: 18px 18px 12px 18px;
  border-bottom: 1px solid var(--wcp-border);
  background: linear-gradient(180deg, rgba(15, 23, 42, .03), rgba(15, 23, 42, 0));
}

.wcp-modal__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--wcp-text);
}

.wcp-modal__subtitle {
  font-size: 13px;
  color: var(--wcp-muted);
  margin-top: 4px;
}

/* ── Body ── */
.wcp-modal__body {
  padding: 16px 16px 28px 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════ SKELETON ═══════════════════════════════ */
.wcp-skeleton { display: grid; gap: 10px; }

.wcp-skeleton__line {
  height: 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(15,23,42,.08), rgba(15,23,42,.03), rgba(15,23,42,.08));
  background-size: 200% 100%;
  animation: wcpShimmer 1.2s infinite linear;
}

.wcp-skeleton__line:nth-child(2) { width: 78%; }
.wcp-skeleton__line:nth-child(3) { width: 62%; }

@keyframes wcpShimmer {
  0%   { background-position: 0 0; }
  100% { background-position: 200% 0; }
}

/* ═══════════════════════════════ CHECKOUT INSIDE POPUP ═══════════════════════════════ */
/* Flatsome-compatible single-column layout using flexbox                               */

/* 1. Reset everything inside the modal */
#wcp-popup-modal *,
#wcp-popup-modal *::before,
#wcp-popup-modal *::after {
  box-sizing: border-box !important;
}

/* 2. Wrapper full width */
#wcp-popup-modal .wcp-checkout-wrap,
#wcp-popup-modal .woocommerce,
#wcp-popup-modal .woocommerce-checkout {
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. THE KEY FIX: Make the checkout form a flex column
   Flatsome uses its own grid — flexbox overrides it completely */
#wcp-popup-modal form.woocommerce-checkout,
#wcp-popup-modal form.checkout {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 14px !important;
}

/* 4. Every direct child of the form = full width block */
#wcp-popup-modal form.woocommerce-checkout > *,
#wcp-popup-modal form.checkout > * {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  flex-shrink: 0 !important;
}

/* 5. col2-set (customer_details wrapper) → flex column */
#wcp-popup-modal .col2-set,
#wcp-popup-modal .woocommerce .col2-set,
#wcp-popup-modal .woocommerce-checkout .col2-set,
#wcp-popup-modal #customer_details {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  gap: 0 !important;
}

/* 6. Both columns full width, stacked */
#wcp-popup-modal .col2-set .col-1,
#wcp-popup-modal .col2-set .col-2,
#wcp-popup-modal #customer_details .col-1,
#wcp-popup-modal #customer_details .col-2 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 7. Order review full width below billing */
#wcp-popup-modal #order_review,
#wcp-popup-modal .woocommerce-checkout-review-order {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
}

/* 8. Form rows full width — kill Flatsome half-width rows */
#wcp-popup-modal .woocommerce form p,
#wcp-popup-modal .woocommerce form .form-row,
#wcp-popup-modal .woocommerce form .form-row-first,
#wcp-popup-modal .woocommerce form .form-row-last,
#wcp-popup-modal .woocommerce form .form-row-wide {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: none !important;
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 14px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 9. All inputs full width */
#wcp-popup-modal input[type="text"],
#wcp-popup-modal input[type="email"],
#wcp-popup-modal input[type="tel"],
#wcp-popup-modal input[type="number"],
#wcp-popup-modal input[type="password"],
#wcp-popup-modal input.input-text,
#wcp-popup-modal textarea,
#wcp-popup-modal select,
#wcp-popup-modal .select2-container,
#wcp-popup-modal .select2-container--default,
#wcp-popup-modal .select2-container .select2-selection {
  width: 100% !important;
  max-width: 100% !important;
}

/* 10. Input visual styling */
#wcp-popup-modal input[type="text"],
#wcp-popup-modal input[type="email"],
#wcp-popup-modal input[type="tel"],
#wcp-popup-modal input[type="number"],
#wcp-popup-modal input[type="password"],
#wcp-popup-modal input.input-text,
#wcp-popup-modal textarea {
  border: 1px solid rgba(15, 23, 42, .16) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

#wcp-popup-modal input[type="text"]:focus,
#wcp-popup-modal input[type="email"]:focus,
#wcp-popup-modal input[type="tel"]:focus,
#wcp-popup-modal input.input-text:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
  outline: none !important;
}

#wcp-popup-modal .woocommerce form .form-row label,
#wcp-popup-modal label {
  font-weight: 600 !important;
  color: rgba(15, 23, 42, .8) !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-size: 13px !important;
}

/* 11. Checkout section cards */
#wcp-popup-modal .woocommerce-billing-fields,
#wcp-popup-modal .woocommerce-shipping-fields,
#wcp-popup-modal #order_review,
#wcp-popup-modal .woocommerce-checkout-payment {
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(2, 6, 23, .06) !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
}

/* 12. Section headings */
#wcp-popup-modal h3,
#wcp-popup-modal h3#order_review_heading {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: rgba(15, 23, 42, .90) !important;
  margin: 0 0 14px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

/* 13. Order summary table */
#wcp-popup-modal .woocommerce-checkout-review-order-table,
#wcp-popup-modal table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
}

#wcp-popup-modal table.shop_table th,
#wcp-popup-modal table.shop_table td {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, .07) !important;
  font-size: 14px !important;
}

#wcp-popup-modal table.shop_table tfoot tr:last-child td,
#wcp-popup-modal table.shop_table tfoot tr:last-child th {
  font-weight: 800 !important;
  font-size: 15px !important;
  border-bottom: none !important;
}

/* 14. Place Order button */
#wcp-popup-modal #place_order,
#wcp-popup-modal .woocommerce-checkout #place_order {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 15px 16px !important;
  margin-top: 12px !important;
  cursor: pointer !important;
  letter-spacing: .3px !important;
}

#wcp-popup-modal #place_order:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 10px 28px rgba(2, 6, 23, .18) !important;
}

/* 15. Sticky Place Order */
#wcp-popup-modal.wcp-fixed-place-order #place_order {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
  box-shadow: 0 -8px 24px rgba(2, 6, 23, .10) !important;
}

/* 16. Coupon row */
#wcp-popup-modal .woocommerce-form-coupon-toggle,
#wcp-popup-modal .woocommerce-form-coupon {
  width: 100% !important;
  float: none !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* 17. Payment methods */
#wcp-popup-modal .wc_payment_methods,
#wcp-popup-modal ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

#wcp-popup-modal .wc_payment_methods li,
#wcp-popup-modal ul.payment_methods li {
  width: 100% !important;
  float: none !important;
  margin-bottom: 6px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 10px !important;
  background: #fafafa !important;
}

/* 18. Notices */
#wcp-popup-modal .woocommerce-NoticeGroup,
#wcp-popup-modal .woocommerce-error,
#wcp-popup-modal .woocommerce-message,
#wcp-popup-modal .woocommerce-info {
  width: 100% !important;
  float: none !important;
  display: block !important;
  margin-bottom: 14px !important;
}

/* 19. FLATSOME SPECIFIC — kill its row/column grid inside the modal */
#wcp-popup-modal .row,
#wcp-popup-modal .col,
#wcp-popup-modal [class*="col-"],
#wcp-popup-modal [class*="medium-"],
#wcp-popup-modal [class*="small-"],
#wcp-popup-modal [class*="large-"] {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#wcp-popup-modal .row {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ═══════════════════════════════ BUY NOW BUTTON ═══════════════════════════════ */
.wcp-buy-now {
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease;
}

.wcp-buy-now:hover {
  transform: translateY(-1px);
}

/* ═══════════════════════════════ RESPONSIVE ═══════════════════════════════ */
@media (min-width: 641px) {
  .wcp-modal__dialog {
    width: 550px !important;
    max-width: calc(100% - 28px) !important;
  }
}

@media (max-width: 640px) {
  .wcp-modal__dialog {
    margin: 18px auto;
    max-height: 94vh;
  }
  .wcp-modal__body {
    padding: 12px 12px 18px 12px;
  }
}

/* Body scroll lock */
body.wcp-modal-open {
  overflow: hidden;
}