.elementor-347 .elementor-element.elementor-element-be9b3bf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-woocommerce-checkout-page .product-name .variation{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-347 .elementor-element.elementor-element-6516d58{--additional-information-display:block;}@media(max-width:1024px){.elementor-widget-woocommerce-checkout-page .product-name .variation{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-widget-woocommerce-checkout-page .product-name .variation{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS for woocommerce-checkout-page, class: .elementor-element-6516d58 *//* ============================================================
   PREMIUM WOOCOMMERCE CHECKOUT — CSS
   Add via: Code Snippets → CSS, OR Elementor Custom CSS,
   OR paste inside <style> in Elementor HTML widget
   ============================================================ */

/* ── DESIGN TOKENS ── */
body,
body * {
    font-family: 'Hind Siliguri', sans-serif !important;
}

/* Hide original text */
#billing_email_field label,
#billing_phone_field label,
.woocommerce-billing-fields h3,
#order_review_heading {
    font-size: 0 !important;
    position: relative;
}

/* Billing Details */
.woocommerce-billing-fields h3::before {
    content: "বিলিং তথ্য";
    font-size: 32px;
    color: #fff;
    font-weight: 600;
}

/* Email Address */
#billing_email_field label::before {
    content: "ইমেইল";
    font-size: 16px;
    color: #fff;
}

/* Phone */
#billing_phone_field label::before {
    content: "ফোন";
    font-size: 16px;
    color: #fff;
}

/* Your Order */
#order_review_heading::before {
    content: "আপনার অর্ডার";
    font-size: 32px;
    color: #fff;
    font-weight: 600;
}

:root {
  --pco-bg:            #0a0a0f;
  --pco-surface:       #111118;
  --pco-surface-2:     #18181f;
  --pco-surface-3:     #1e1e28;
  --pco-border:        rgba(255,255,255,0.07);
  --pco-border-hover:  rgba(255,255,255,0.14);
  --pco-text:          #f0f0f5;
  --pco-text-2:        #9898b0;
  --pco-text-3:        #5c5c78;
  --pco-accent:        #7c3aed;
  --pco-accent-2:      #6d28d9;
  --pco-accent-glow:   rgba(124,58,237,0.35);
  --pco-green:         #10b981;
  --pco-green-bg:      rgba(16,185,129,0.1);
  --pco-red:           #ef4444;
  --pco-red-bg:        rgba(239,68,68,0.1);
  --pco-yellow:        #f59e0b;
  --pco-radius:        14px;
  --pco-radius-sm:     8px;
  --pco-radius-lg:     20px;
  --pco-shadow:        0 4px 24px rgba(0,0,0,0.4);
  --pco-shadow-card:   0 2px 12px rgba(0,0,0,0.3);
  --pco-transition:    0.2s cubic-bezier(0.4,0,0.2,1);
  --pco-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
}

/* ── BASE RESET FOR CHECKOUT PAGE ── */
.pco-active .site-header,
.pco-active header.site-header,
.pco-active .elementor-section-wrap > .e-con:first-child:has(.e-con-inner:empty),
.pco-active .elementor-location-header {
  /* Keep header visible but minimal */
}

.pco-active #page,
.pco-active .site-content,
.pco-active main.site-main {
  background: var(--pco-bg);
}

.pco-active .woocommerce-breadcrumb,
.pco-active h1.entry-title,
.pco-active .page-title,
.pco-active .woocommerce-notices-wrapper:empty {
  display: none !important;
}

/* ── CONTAINER LAYOUT ── */
.pco-checkout-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px 80px;
  font-family: var(--pco-font);
  color: var(--pco-text);
}

/* ── HEADER ── */
.pco-checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 28px;
  border-bottom: 1px solid var(--pco-border);
  margin-bottom: 28px;
}

.pco-header-logo img,
.pco-header-logo svg {
  max-height: 36px;
  width: auto;
}

.pco-site-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pco-text);
  letter-spacing: -0.02em;
}

.pco-header-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--pco-text-2);
  background: var(--pco-surface-2);
  border: 1px solid var(--pco-border);
  padding: 6px 12px;
  border-radius: 999px;
}

.pco-header-secure svg {
  color: var(--pco-green);
  flex-shrink: 0;
}

/* ── WOOCOMMERCE CHECKOUT FORM LAYOUT ── */
.pco-active form.woocommerce-checkout.checkout {
    display: grid;
    grid-template-columns: 948px;
    justify-content: center !important;
    margin: 0 auto;
    
}

/* #customer_details = left col */
.pco-active form.woocommerce-checkout #customer_details {
  /* Naturally in DOM flow — left */
}

/* #order_review = right col sticky */
.pco-active form.woocommerce-checkout #order_review {
  position: sticky;
  top: 24px;
  background: var(--pco-surface);
  border: 1px solid var(--pco-border);
  border-radius: var(--pco-radius-lg);
  overflow: hidden;
  box-shadow: var(--pco-shadow);
}

/* ── CARD BASE ── */
.pco-card {
  background: var(--pco-surface);
  border: 1px solid var(--pco-border);
  border-radius: var(--pco-radius);
  padding: 20px;
  margin-bottom: 14px;
  transition: border-color var(--pco-transition);
}

.pco-card:hover {
  border-color: var(--pco-border-hover);
}

.pco-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.pco-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pco-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  padding: 0;
}

.pco-card-title svg {
  color: var(--pco-accent);
  flex-shrink: 0;
}

/* ── AUTH CARD ── */
.pco-auth-card {
  padding: 22px;
}

.pco-auth-tabs {
  display: flex;
  background: var(--pco-surface-2);
  border-radius: var(--pco-radius-sm);
  padding: 4px;
  gap: 4px;
  margin-bottom: 20px;
  border: 1px solid var(--pco-border);
}

.pco-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--pco-text-2);
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--pco-transition);
  font-family: var(--pco-font);
}

.pco-tab-btn.pco-tab-active {
  background: var(--pco-surface-3);
  color: var(--pco-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── GOOGLE BUTTON ── */
.pco-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--pco-surface-2);
  border: 1px solid var(--pco-border);
  border-radius: var(--pco-radius-sm);
  color: var(--pco-text);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 12px 20px;
  cursor: pointer;
  transition: all var(--pco-transition);
  font-family: var(--pco-font);
  margin-bottom: 16px;
}

.pco-google-btn:hover {
  background: var(--pco-surface-3);
  border-color: var(--pco-border-hover);
  transform: translateY(-1px);
}

.pco-google-btn:active { transform: translateY(0); }

/* ── DIVIDER ── */
.pco-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
  color: var(--pco-text-3);
  font-size: 0.78rem;
}

.pco-or-divider::before,
.pco-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pco-border);
}

/* ── FORM FIELDS (WooCommerce) ── */
.pco-active .woocommerce-billing-fields,
.pco-active #billing_fields,
.pco-active .woocommerce-billing-fields__field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pco-active .form-row,
.pco-active .woocommerce-billing-fields .form-row {
  margin: 0;
  padding: 0;
  float: none;
  width: 100% !important;
}

.pco-active .form-row.pco-hidden-field,
.pco-active .form-row[class*="pco-hidden"],
.pco-active p.form-row.pco-hidden-field {
  display: none !important;
}

.pco-active .form-row label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pco-text-2);
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}

.pco-active .form-row label .required,
.pco-active .form-row label abbr {
  color: var(--pco-accent);
  text-decoration: none;
  margin-left: 2px;
}

.pco-active .form-row input.input-text,
.pco-active .form-row select,
.pco-active .form-row textarea {
  width: 100%;
  background: var(--pco-surface-2) !important;
  border: 1px solid var(--pco-border) !important;
  border-radius: var(--pco-radius-sm) !important;
  color: var(--pco-text) !important;
  padding: 12px 14px !important;
  font-size: 0.9rem !important;
  font-family: var(--pco-font) !important;
  outline: none;
  transition: border-color var(--pco-transition), box-shadow var(--pco-transition);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.pco-active .form-row input.input-text::placeholder {
  color: var(--pco-text-3) !important;
}

.pco-active .form-row input.input-text:focus,
.pco-active .form-row select:focus {
  border-color: var(--pco-accent) !important;
  box-shadow: 0 0 0 3px var(--pco-accent-glow) !important;
  background: var(--pco-surface-3) !important;
}

.pco-active .form-row.woocommerce-invalid input.input-text,
.pco-active .form-row.woocommerce-invalid select {
  border-color: var(--pco-red) !important;
  box-shadow: 0 0 0 3px var(--pco-red-bg) !important;
}

/* Password wrapper (custom) */
.pco.pco-input-wrap input {
  position: relative;
  display: flex;
}

.pco-input-wrap input{
  padding-right: 44px !important;
}

.pco-eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--pco-text-3);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color var(--pco-transition);
}

.pco-eye-btn:hover { color: var(--pco-text); }

/* ── USER CARD (logged in) ── */
.pco-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 14px;
}

.pco-user-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.pco-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18% !important; 
  border: 2px solid var(--pco-border);
}

.pco-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  background: var(--pco-green);
  border-radius: 50%;
  border: 2px solid var(--pco-surface);
}

.pco-user-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pco-user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pco-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pco-user-email {
  font-size: 0.78rem;
  color: var(--pco-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pco-logout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--pco-text-3);
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid var(--pco-border);
  border-radius: 6px;
  flex-shrink: 0;
  transition: all var(--pco-transition);
  white-space: nowrap;
}

.pco-logout-btn:hover {
  color: var(--pco-red);
  border-color: var(--pco-red);
  background: var(--pco-red-bg);
}

.pco-phone-reminder {
  padding: 14px 18px;
}

.pco-phone-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--pco-yellow);
  margin: 0;
}

/* ── COUPON CARD ── */
.pco-coupon-card {
  padding: 0;
  overflow: hidden;
}

.pco-coupon-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--pco-text-2);
  cursor: pointer;
  padding: 16px 20px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--pco-font);
  transition: color var(--pco-transition);
}

.pco-coupon-toggle:hover { color: var(--pco-text); }

.pco-coupon-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pco-chevron-icon {
  transition: transform var(--pco-transition);
  flex-shrink: 0;
}

.pco-coupon-toggle[aria-expanded="true"] .pco-chevron-icon {
  transform: rotate(180deg);
}

.pco-coupon-body {
  border-top: 1px solid var(--pco-border);
  padding: 16px 20px;
}

.pco-coupon-row {
  display: flex;
  gap: 10px;
}

.pco-coupon-input {
  flex: 1;
  background: var(--pco-surface-2) !important;
  border: 1px solid var(--pco-border) !important;
  border-radius: var(--pco-radius-sm) !important;
  color: var(--pco-text) !important;
  padding: 11px 14px !important;
  font-size: 0.88rem !important;
  font-family: var(--pco-font) !important;
  outline: none;
  transition: all var(--pco-transition);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pco-coupon-input:focus {
  border-color: var(--pco-accent) !important;
  box-shadow: 0 0 0 3px var(--pco-accent-glow) !important;
}

.pco-coupon-apply-btn {
  flex-shrink: 0;
  background: var(--pco-surface-3);
  border: 1px solid var(--pco-border);
  color: var(--pco-text);
  padding: 11px 18px;
  border-radius: var(--pco-radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--pco-font);
  transition: all var(--pco-transition);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pco-coupon-apply-btn:hover {
  background: var(--pco-accent);
  border-color: var(--pco-accent);
  color: #fff;
}

.pco-coupon-notice {
  margin-top: 10px;
  font-size: 0.82rem;
  border-radius: 6px;
  padding: 0;
  transition: all var(--pco-transition);
}

.pco-coupon-notice.pco-notice-success {
  background: var(--pco-green-bg);
  border: 1px solid rgba(16,185,129,0.25);
  color: var(--pco-green);
  padding: 10px 14px;
}

.pco-coupon-notice.pco-notice-error {
  background: var(--pco-red-bg);
  border: 1px solid rgba(239,68,68,0.25);
  color: var(--pco-red);
  padding: 10px 14px;
}

/* ── FIELDS CARD ── */
.pco-fields-card {
  margin-bottom: 0;
}

/* ── ORDER REVIEW SECTION ── */
.pco-active #order_review {
  padding: 24px;
}

.pco-order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pco-border);
}

.pco-item-count {
  font-size: 0.75rem;
  color: var(--pco-text-3);
  background: var(--pco-surface-2);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--pco-border);
}

/* ── ORDER ITEMS ── */
.pco-order-items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.pco-order-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pco-item-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.pco-item-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--pco-border);
  display: block;
}

.pco-discount-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--pco-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px var(--pco-accent-glow);
}

.pco-item-details {
  flex: 1;
  min-width: 0;
}

.pco-item-cat {
  font-size: 0.68rem;
  color: var(--pco-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  display: block;
}

.pco-item-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pco-text);
  line-height: 1.35;
  margin: 0 0 8px;
  word-break: break-word;
}

.pco-item-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.pco-price-regular {
  font-size: 0.78rem;
  color: var(--pco-text-3);
  text-decoration: line-through;
}

.pco-price-sale {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pco-text);
  letter-spacing: -0.01em;
}

.pco-item-saving {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pco-green-bg);
  color: var(--pco-green);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(16,185,129,0.2);
}

/* ── TOTALS BLOCK ── */
.pco-totals-block {
  border-top: 1px solid var(--pco-border);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.pco-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}

.pco-total-label {
  color: var(--pco-text-2);
}

.pco-total-value {
  font-weight: 600;
  color: var(--pco-text);
}

.pco-saving { color: var(--pco-green) !important; }

.pco-grand-row {
  border-top: 1px solid var(--pco-border);
  padding-top: 12px;
  margin-top: 4px;
}

.pco-total-label.pco-grand-label,
.pco-grand-row .pco-total-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pco-text);
}

.pco-grand {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--pco-text) !important;
  letter-spacing: -0.02em;
}

.pco-coupon-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pco-coupon-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(124,58,237,0.12);
  color: var(--pco-accent);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(124,58,237,0.2);
  letter-spacing: 0.06em;
}

.pco-remove-coupon {
  background: none;
  border: none;
  color: var(--pco-text-3);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 2px 6px;
  font-family: var(--pco-font);
  text-decoration: underline;
  transition: color var(--pco-transition);
}

.pco-remove-coupon:hover { color: var(--pco-red); }

/* ── PAYMENT METHODS ── */
.pco-payment-wrap {
  border-top: 1px solid var(--pco-border);
  padding-top: 20px;
  margin-top: 4px;
}

.pco-payment-header {
  margin-bottom: 16px;
}

/* WooCommerce payment list */
.pco-active #payment {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.pco-active #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: none !important;
}

.pco-active #payment ul.payment_methods li.payment_method_uddoktapay,
.pco-active #payment ul.payment_methods li.payment_method_sslcommerz,
.pco-active #payment ul.payment_methods li.payment_method_bkash,
.pco-active #payment ul.payment_methods li {
  background: var(--pco-surface-2);
  border: 2px solid var(--pco-border);
  border-radius: var(--pco-radius-sm);
  overflow: hidden;
  transition: border-color var(--pco-transition), background var(--pco-transition);
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
}

.pco-active #payment ul.payment_methods li:hover {
  border-color: var(--pco-border-hover);
  background: var(--pco-surface-3);
}

.pco-active #payment ul.payment_methods li.active-payment-method,
.pco-active #payment ul.payment_methods li:has(input[type=radio]:checked) {
  border-color: var(--pco-accent) !important;
  background: rgba(124,58,237,0.08) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.2), 0 4px 16px var(--pco-accent-glow);
}

.pco-active #payment ul.payment_methods li label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--pco-text);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.pco-active #payment ul.payment_methods li label img {
  max-height: 24px;
  width: auto;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Custom radio */
.pco-active #payment ul.payment_methods li input[type=radio] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--pco-accent);
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--pco-border);
  border-radius: 50%;
  background: var(--pco-surface-2);
  transition: all var(--pco-transition);
  position: relative;
}

.pco-active #payment ul.payment_methods li input[type=radio]:checked {
  border-color: var(--pco-accent);
  background: var(--pco-accent);
  box-shadow: inset 0 0 0 3px var(--pco-surface-2);
}

/* Payment box (gateway content) */
.pco-active #payment .payment_box {
  background: var(--pco-surface-3) !important;
  border-top: 1px solid var(--pco-border);
  padding: 14px 16px !important;
  font-size: 0.82rem !important;
  color: var(--pco-text-2) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.pco-active #payment .payment_box p {
  margin: 0;
  color: var(--pco-text-2);
  font-size: 0.82rem;
}

.pco-active #payment .payment_box input.input-text {
  background: var(--pco-surface-2) !important;
  border: 1px solid var(--pco-border) !important;
  color: var(--pco-text) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
}

/* ── PLACE ORDER BUTTON ── */
.pco-active #payment #place_order,
.pco-pay-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--pco-accent) 0%, var(--pco-accent-2) 100%);
  border: none;
  border-radius: var(--pco-radius-sm);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 16px 24px;
  cursor: pointer;
  font-family: var(--pco-font);
  letter-spacing: 0.02em;
  transition: all var(--pco-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--pco-accent-glow);
}

.pco-pay-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.pco-pay-btn:hover::before { transform: translateX(100%); }

.pco-pay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--pco-accent-glow);
}

.pco-pay-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px var(--pco-accent-glow);
}

.pco-pay-btn:disabled,
.pco-pay-btn.pco-processing {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.pco-pay-normal,
.pco-pay-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.pco-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--pco-text-3);
  margin: 12px 0 0;
  text-align: center;
}

.pco-security-note svg { color: var(--pco-green); flex-shrink: 0; }

/* ── SPINNER ── */
.pco-spin {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pco-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.pco-spin-dark {
  border-color: rgba(0,0,0,0.15);
  border-top-color: var(--pco-text);
}

@keyframes pco-spin {
  to { transform: rotate(360deg); }
}

/* ── BUTTON (primary / generic) ── */
.pco-btn-primary {
  width: 100%;
  background: var(--pco-accent);
  border: none;
  border-radius: var(--pco-radius-sm);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 13px 20px;
  cursor: pointer;
  font-family: var(--pco-font);
  transition: all var(--pco-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pco-btn-primary:hover {
  background: var(--pco-accent-2);
  transform: translateY(-1px);
}

.pco-btn-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── FORM FIELDS (modal) ── */
.pco-form-field {
  margin-bottom: 14px;
}

.pco-form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pco-text-2);
  margin-bottom: 7px;
}

.pco-form-field input {
  width: 100%;
  background: var(--pco-surface-2);
  border: 1px solid var(--pco-border);
  border-radius: var(--pco-radius-sm);
  color: var(--pco-text);
  padding: 12px 14px;
  font-size: 0.9rem;
  font-family: var(--pco-font);
  outline: none;
  transition: all var(--pco-transition);
  box-sizing: border-box;
}

.pco-form-field input:focus {
  border-color: var(--pco-accent);
  box-shadow: 0 0 0 3px var(--pco-accent-glow);
  background: var(--pco-surface-3);
}

.pco-form-field input::placeholder { color: var(--pco-text-3); }

.pco-form-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
  margin-bottom: 16px;
}

/* ── NOTICES / ALERTS ── */
.pco-form-error {
  background: var(--pco-red-bg);
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--pco-red);
  padding: 11px 14px;
  border-radius: var(--pco-radius-sm);
  font-size: 0.82rem;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pco-form-success {
  background: var(--pco-green-bg);
  border: 1px solid rgba(16,185,129,0.3);
  color: var(--pco-green);
  padding: 11px 14px;
  border-radius: var(--pco-radius-sm);
  font-size: 0.82rem;
  margin-bottom: 14px;
}

/* WooCommerce native notices — restyled */
.pco-active .woocommerce-NoticeGroup,
.pco-active .woocommerce-error,
.pco-active .woocommerce-message,
.pco-active .woocommerce-info {
  background: var(--pco-red-bg) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  border-left: 3px solid var(--pco-red) !important;
  border-radius: var(--pco-radius-sm) !important;
  padding: 12px 16px !important;
  color: var(--pco-red) !important;
  font-size: 0.85rem !important;
  margin-bottom: 16px !important;
  list-style: none !important;
}

.pco-active .woocommerce-message {
  background: var(--pco-green-bg) !important;
  border-color: rgba(16,185,129,0.3) !important;
  border-left-color: var(--pco-green) !important;
  color: var(--pco-green) !important;
}

.pco-active .woocommerce-info {
  background: rgba(245,158,11,0.1) !important;
  border-color: rgba(245,158,11,0.3) !important;
  border-left-color: var(--pco-yellow) !important;
  color: var(--pco-yellow) !important;
}

/* ── MODAL ── */
.pco-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pco-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pco-modal-box {
  position: relative;
  background: var(--pco-surface);
  border: 1px solid var(--pco-border);
  border-radius: var(--pco-radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: pco-modal-in 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes pco-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.pco-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--pco-surface-2);
  border: 1px solid var(--pco-border);
  border-radius: 8px;
  color: var(--pco-text-2);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  transition: all var(--pco-transition);
}

.pco-modal-close:hover {
  background: var(--pco-red-bg);
  border-color: var(--pco-red);
  color: var(--pco-red);
}

.pco-modal-header {
  margin-bottom: 22px;
}

.pco-modal-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pco-text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.pco-modal-header p {
  font-size: 0.85rem;
  color: var(--pco-text-2);
  margin: 0;
}

.pco-modal-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--pco-text-3);
  margin-top: 16px;
  margin-bottom: 0;
}

/* ── LINKS ── */
a.pco-link,
.pco-link {
  color: var(--pco-accent);
  text-decoration: none;
  transition: opacity var(--pco-transition);
}

a.pco-link:hover,
.pco-link:hover { opacity: 0.8; text-decoration: underline; }

.pco-link-btn {
  background: none;
  border: none;
  color: var(--pco-accent);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-family: var(--pco-font);
  transition: opacity var(--pco-transition);
}

.pco-link-btn:hover { opacity: 0.8; }

/* ── UTILITY ── */
.pco-hidden { display: none !important; }

/* ── WC LOADING OVERLAY ── */
.pco-active form.checkout.processing::before {
  background: rgba(10,10,15,0.7) !important;
  backdrop-filter: blur(4px);
}

/* ── HIDE NATIVE WC ACCOUNT FIELDS ── */
.pco-active .create-account,
.pco-active #account_username_field,
.pco-active #account_password_field,
.pco-active #account_password-2_field,
.pco-active .woocommerce-privacy-policy-text,
.pco-active .woocommerce-terms-and-conditions-wrapper,
.pco-active #order_comments_field,
.pco-active .woocommerce-additional-fields {
  display: none !important;
}

/* ── HIDE DEFAULT WC ORDER TABLE ── */
.pco-active table.woocommerce-checkout-review-order-table {
  display: none !important;
}

/* ─────────────────────────────────────────
   MOBILE — 768px and below
   ───────────────────────────────────────── */

@media (max-width: 768px) {

  .pco-active form.woocommerce-checkout.checkout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* On mobile, order review goes ABOVE customer details */
  .pco-active form.woocommerce-checkout #order_review {
    order: -1;
    position: static;
    border-radius: var(--pco-radius);
    margin-bottom: 14px;
  }

  .pco-active form.woocommerce-checkout #customer_details {
    order: 0;
  }

  .pco-active #order_review {
    padding: 18px;
  }

  .pco-checkout-header {
    padding: 16px 0 20px;
    margin-bottom: 16px;
  }

  .pco-header-secure span { display: none; }

  .pco-checkout-container {
    padding: 0 12px 19px; /* extra bottom for sticky button */
  }

  .pco-item-thumb {
    width: 60px;
    height: 60px;
  }

  /* Sticky Pay Button on mobile */
  .pco-active #payment #place_order,
  .pco-active .pco-pay-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    border-radius: 0;
    margin: 0;
    padding: 18px 24px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5), 0 0 0 1px var(--pco-border);
    font-size: 1.05rem;
  }

  .pco-security-note {
    display: none;
  }

  /* Make summary collapsible on mobile */
  .pco-order-items-list {
    gap: 12px;
  }

  .pco-modal-box {
    max-width: 100%;
    border-radius: var(--pco-radius);
    padding: 22px 18px;
  }

  .pco-user-card {
    flex-wrap: wrap;
    gap: 10px;
  }

}

/* ─────────────────────────────────────────
   TABLET — 769px–1024px
   ───────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {
  .pco-active form.woocommerce-checkout.checkout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ─────────────────────────────────────────
   ELEMENTOR OVERRIDE
   ───────────────────────────────────────── */

.pco-active .elementor-widget-container > .woocommerce {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pco-active .woocommerce-page .entry-content {
  max-width: 100% !important;
}

/* ─────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────── */

@keyframes pco-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pco-card {
  animation: pco-fade-up 0.3s ease both;
}

.pco-card:nth-child(1) { animation-delay: 0ms; }
.pco-card:nth-child(2) { animation-delay: 60ms; }
.pco-card:nth-child(3) { animation-delay: 120ms; }
.pco-card:nth-child(4) { animation-delay: 180ms; }

/* ─────────────────────────────────────────
   DARK SCROLLBAR
   ───────────────────────────────────────── */

.pco-active ::-webkit-scrollbar { width: 6px; }
.pco-active ::-webkit-scrollbar-track { background: var(--pco-surface); }
.pco-active ::-webkit-scrollbar-thumb { background: var(--pco-surface-3); border-radius: 3px; }
.pco-active ::-webkit-scrollbar-thumb:hover { background: var(--pco-text-3); }
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
    display: none;
}

.pco-active #payment ul.payment_methods li label{
    display: none;
}


.woocommerce-password-strength,
.woocommerce-password-hint {
    display: none !important;
}


.pco-input-wrap input {
    width: 100%;
    background: var(--pco-surface-2) !important;
    border: 1px solid var(--pco-border) !important;
    border-radius: var(--pco-radius-sm) !important;
    color: var(--pco-text) !important;
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
    font-family: var(--pco-font) !important;
    outline: none;
    transition: border-color var(--pco-transition), box-shadow var(--pco-transition);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.pco-input-wrap input.input-text:focus,
.pco-active .form-row select:focus {
  border-color: var(--pco-accent) !important;
  box-shadow: 0 0 0 3px var(--pco-accent-glow) !important;
  background: var(--pco-surface-3) !important;
}

/* Password input background fix */
input[type="password"],
.pco-input-wrap input[type="password"],
.pco-input-wrap input {
    background: #18181f !important;
    background-color: #18181f !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    -webkit-box-shadow: 0 0 0 1000px #18181f inset !important;
    box-shadow: 0 0 0 1000px #18181f inset !important;

    border-color: #ffffff12 !important;
}

/* Chrome autofill / Password Manager fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #18181f inset !important;
    box-shadow: 0 0 0 1000px #18181f inset !important;

    -webkit-text-fill-color: #fff !important;
    background-color: #18181f !important;

    transition: background-color 9999s ease-in-out 0s;
}

.elementor-widget-woocommerce-checkout-page .e-checkout__container{
    gap: 0px;
}

/* Make checkout fields single column */
.pco-checkout__column-start .woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

/* Fix all form rows */
.pco-checkout__column-start .form-row {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Password field full width */
#account_password_field {
    width: 100% !important;
    margin-top: 20px !important;
}


/* billing details text hide*/
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout .woocommerce-billing-fields h3{
    display: none;
}/* End custom CSS */