/* sqc-frontend.css */

/* Custom CSS variables for easy theming */
:root {
 --sqc-primary-color: #3b82f6;
 --sqc-primary-hover: #2563eb;
 --sqc-text-main: #1f2937;
 --sqc-text-muted: #6b7280;
 --sqc-bg-overlay: rgba(0, 0, 0, 0.4);
 --sqc-bg-modal: #ffffff;
 --sqc-border-color: #e5e7eb;
 --sqc-radius: 12px;
 --sqc-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 --sqc-z-index: 9999999;
}

/* Modal Overlay */
.sqc-modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: var(--sqc-bg-overlay);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: var(--sqc-z-index);
 opacity: 0;
 visibility: hidden;
 transition:
  opacity var(--sqc-transition),
  visibility var(--sqc-transition);
}

.sqc-modal-overlay.is-active {
 opacity: 1;
 visibility: visible;
}

/* Modal Container */
.sqc-modal-container {
 background-color: var(--sqc-bg-modal);
 border-radius: var(--sqc-radius);
 width: 90%;
 max-width: 500px;
 max-height: 90vh;
 overflow-y: auto;
 box-shadow:
  0 20px 25px -5px rgba(0, 0, 0, 0.1),
  0 10px 10px -5px rgba(0, 0, 0, 0.04);
 transform: scale(0.95) translateY(20px);
 opacity: 0;
 transition:
  transform var(--sqc-transition),
  opacity var(--sqc-transition);
 display: flex;
 flex-direction: column;
}

.sqc-modal-container.sqc-type-mobile-drawer {
 margin-block: 0px !important;
}

.sqc-modal-overlay.is-active .sqc-modal-container {
 transform: scale(1) translateY(0);
 opacity: 1;
}

/* --- POPUP TYPE: SHARED & DEVICE SPECIFIC --- */

/* Desktop Specific (Screen > 640px) */
@media (min-width: 641px) {
 /* Desktop Drawer */
 .sqc-modal-container.sqc-type-desktop-drawer {
  position: fixed;
  left: 50% !important;
  right: auto;
  width: 100% !important;
  max-width: 600px !important;
  opacity: 1;
  transition: transform var(--sqc-transition);
  display: flex;
  flex-direction: column;
  z-index: 1001;
 }

 /* Bottom Desktop Drawer */
 .sqc-modal-container.sqc-type-desktop-drawer.sqc-drawer-pos-bottom {
  bottom: 0;
  top: auto;
  transform: translateX(-50%) translateY(100%);
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
 }
 .sqc-modal-overlay.is-active
  .sqc-modal-container.sqc-type-desktop-drawer.sqc-drawer-pos-bottom {
  transform: translateX(-50%) translateY(0);
 }

 /* Top Desktop Drawer */
 .sqc-modal-container.sqc-type-desktop-drawer.sqc-drawer-pos-top {
  top: 0;
  bottom: auto;
  transform: translateX(-50%) translateY(-100%);
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: 0px !important;
 }
 .sqc-modal-overlay.is-active
  .sqc-modal-container.sqc-type-desktop-drawer.sqc-drawer-pos-top {
  transform: translateX(-50%) translateY(0);
 }

 /* Handles */
 .sqc-modal-container.sqc-type-desktop-drawer::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  flex-shrink: 0;
 }
 .sqc-modal-container.sqc-type-desktop-drawer.sqc-drawer-pos-bottom::before {
  margin: 12px auto 0;
  order: -1; /* At the top */
 }
 .sqc-modal-container.sqc-type-desktop-drawer.sqc-drawer-pos-top::before {
  margin: 0 auto 12px;
  order: 100; /* At the bottom */
 }
}

/* Mobile Specific (Screen <= 640px) */
@media (max-width: 640px) {
 /* Mobile Drawer */
 .sqc-modal-container.sqc-type-mobile-drawer {
  position: fixed;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: none !important;
  max-height: 95vh !important;
  opacity: 1;
  transition: transform var(--sqc-transition);
  display: flex;
  flex-direction: column;
  z-index: 1001;
 }

 /* Bottom Mobile Drawer */
 .sqc-modal-container.sqc-type-mobile-drawer.sqc-drawer-pos-bottom {
  bottom: 0;
  top: auto;
  transform: translateY(100%);
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
 }
 .sqc-modal-overlay.is-active
  .sqc-modal-container.sqc-type-mobile-drawer.sqc-drawer-pos-bottom {
  transform: translateY(0);
 }

 /* Top Mobile Drawer */
 .sqc-modal-container.sqc-type-mobile-drawer.sqc-drawer-pos-top {
  top: 0;
  bottom: auto;
  transform: translateY(-100%);
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: 0px !important;
 }
 .sqc-modal-overlay.is-active
  .sqc-modal-container.sqc-type-mobile-drawer.sqc-drawer-pos-top {
  transform: translateY(0);
 }

 /* Handles */
 .sqc-modal-container.sqc-type-mobile-drawer::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  flex-shrink: 0;
 }
 .sqc-modal-container.sqc-type-mobile-drawer.sqc-drawer-pos-bottom::before {
  margin: 12px auto 0;
  order: -1;
 }
 .sqc-modal-container.sqc-type-mobile-drawer.sqc-drawer-pos-top::before {
  margin: 0 auto 12px;
  order: 100;
 }

 /* Mobile Dialog (Centered) */
 .sqc-modal-container.sqc-type-mobile-dialog {
  position: relative;
  transform: scale(0.95) translateY(20px);
  opacity: 0;
  margin: auto !important;
 }
 .sqc-modal-overlay.is-active .sqc-modal-container.sqc-type-mobile-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
 }
}

/* Adjust header/footer specific styles when flipped */
.sqc-drawer-pos-top .sqc-modal-header {
 order: 2; /* Move below content */
 border-top: 1px solid var(--sqc-border-color);
 border-bottom: none;
 top: auto;
 bottom: 0;
 border-radius: 0; /* Middle element, no radius */
}
.sqc-drawer-pos-top .sqc-modal-content {
 order: 1; /* Content starts at top edge */
}
.sqc-drawer-pos-top .sqc-modal-footer {
 order: 3; /* Move to very bottom */
 border-top: 1px solid var(--sqc-border-color);
 border-bottom: none;
 border-bottom-left-radius: var(--sqc-radius);
 border-bottom-right-radius: var(--sqc-radius);
 border-top-left-radius: 0;
 border-top-right-radius: 0;
}

/* --- POPUP POSITIONING --- */
/* Pushes the modal to the top with a small breathing gap */
.sqc-modal-container.sqc-pos-top {
 margin-top: 1vh !important;
 margin-bottom: auto !important;
}

/* Default centered (fallback) */
.sqc-modal-container.sqc-pos-center {
 margin-top: auto !important;
 margin-bottom: auto !important;
}

/* Pushes the modal to the bottom with a small breathing gap */
.sqc-modal-container.sqc-pos-bottom {
 margin-top: auto !important;
 margin-bottom: 1vh !important;
}

/* Mobile Overrides */
@media (max-width: 640px) {
 /* On mobile, if bottom positioning is selected, snap it to the bottom like a sheet */
 .sqc-modal-container.sqc-pos-bottom {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  width: 100% !important;
 }
}

/* Header */
.sqc-modal-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 20px 24px;
 border-bottom: 1px solid var(--sqc-border-color);
 position: sticky;
 top: 0;
 background: var(--sqc-header-bg, var(--sqc-bg-modal)) !important;
 border-top-left-radius: var(--sqc-radius);
 border-top-right-radius: var(--sqc-radius);
 z-index: 10;
}

.sqc-modal-header h2 {
 margin: 0;
 font-size: 1.25rem;
 font-weight: 600;
 color: var(--sqc-header-text, var(--sqc-text-main)) !important;
 line-height: 1.5;
}

.sqc-modal-close {
 background: var(--sqc-close-bg, transparent) !important;
 border: none !important;
 font-size: 1.75rem !important;
 line-height: 1 !important;
 color: var(--sqc-close-icon, var(--sqc-text-muted)) !important;
 cursor: pointer !important;
 padding: 0 !important;
 padding-bottom: 0px !important;
 margin: 0 !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 32px !important;
 height: 32px !important;
 min-height: 32px !important;
 border-radius: 4px !important;
 transition: all 0.2s ease !important;
}

.sqc-modal-close:hover {
 background-color: #f3f4f6;
 color: var(--sqc-text-main);
}

/* Content */
.sqc-modal-content {
 padding: 24px;
 flex-grow: 1;
}

.sqc-loading-spinner {
 text-align: center;
 padding: 60px 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 20px;
}

.sqc-spinner {
 position: relative;
 width: 48px;
 height: 48px;
 border-radius: 50%;
 border: 3px solid rgba(var(--sqc-loader-rgb, 59, 130, 246), 0.1);
 border-top-color: var(--sqc-loader-color, #3b82f6);
 animation: sqc-spin 0.8s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

.sqc-spinner::after {
 content: "";
 position: absolute;
 top: -3px;
 right: -3px;
 bottom: -3px;
 left: -3px;
 border-radius: 50%;
 border: 3px solid transparent;
 border-bottom-color: var(--sqc-loader-color, #3b82f6);
 opacity: 0.5;
 animation: sqc-spin 1.2s linear infinite reverse;
}

.sqc-loading-spinner p {
 color: var(--sqc-text-muted);
 font-size: 0.95rem;
 font-weight: 500;
 margin: 0;
 animation: sqc-pulse 2s ease-in-out infinite;
}

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

@keyframes sqc-pulse {
 0%,
 100% {
  opacity: 0.6;
 }
 50% {
  opacity: 1;
 }
}

/* Footer / Branding */
.sqc-modal-footer {
 padding: 16px 24px;
 text-align: center;
 border-top: 1px solid var(--sqc-border-color);
 background: #f9fafb;
 border-bottom-left-radius: var(--sqc-radius);
 border-bottom-right-radius: var(--sqc-radius);
}

.sqc-branding {
 margin: 0;
 font-size: 0.75rem;
 color: var(--sqc-text-muted);
 letter-spacing: 0.05em;
 text-transform: uppercase;
 font-weight: 500;
}

/* Checkout Form (Native WooCommerce Fields) */
.sqc-checkout-form-container {
 margin-top: 15px;
}

.sqc-woocommerce-fields-wrapper {
 margin-bottom: 24px;
}

.sqc-woocommerce-fields-wrapper .form-row {
 margin-bottom: 16px;
 width: 100%;
}

.sqc-woocommerce-fields-wrapper .form-row-first {
 width: 48%;
 float: left;
}

.sqc-woocommerce-fields-wrapper .form-row-last {
 width: 48%;
 float: right;
}

/* Force Street Address to Full Width */
#billing_address_1_field,
#billing_address_2_field,
#shipping_address_1_field,
#shipping_address_2_field {
 width: 100% !important;
 float: none !important;
 clear: both !important;
}

.sqc-woocommerce-fields-wrapper .form-row::after {
 content: "";
 display: table;
 clear: both;
}

.sqc-woocommerce-fields-wrapper label {
 display: block;
 font-size: 0.85rem;
 font-weight: 500;
 color: var(--sqc-text-main);
 margin-bottom: 6px;
 line-height: 2;
}

.sqc-woocommerce-fields-wrapper input[type="text"],
.sqc-woocommerce-fields-wrapper input[type="email"],
.sqc-woocommerce-fields-wrapper input[type="tel"],
.sqc-woocommerce-fields-wrapper input[type="number"],
.sqc-woocommerce-fields-wrapper input[type="password"],
.sqc-woocommerce-fields-wrapper select,
.sqc-woocommerce-fields-wrapper textarea,
.sqc-woocommerce-fields-wrapper
 .select2-container--default
 .select2-selection--single {
 width: 100%;
 padding: 10px 12px;
 border: 1px solid var(--sqc-field-border, var(--sqc-border-color)) !important;
 border-radius: 6px;
 font-size: 0.95rem;
 color: var(--sqc-text-main);
 background-color: #fff;
 transition:
  border-color 0.2s,
  box-shadow 0.2s;
 font-family: inherit;
 box-sizing: border-box;
 min-height: 42px;
}

.sqc-woocommerce-fields-wrapper textarea {
 min-height: 80px;
 resize: vertical;
}

.sqc-woocommerce-fields-wrapper input[type="text"]:focus,
.sqc-woocommerce-fields-wrapper input[type="email"]:focus,
.sqc-woocommerce-fields-wrapper input[type="tel"]:focus,
.sqc-woocommerce-fields-wrapper input[type="number"]:focus,
.sqc-woocommerce-fields-wrapper input[type="password"]:focus,
.sqc-woocommerce-fields-wrapper textarea:focus,
.sqc-woocommerce-fields-wrapper
 .select2-container--default.select2-container--focus
 .select2-selection--single,
.sqc-woocommerce-fields-wrapper
 .select2-container--default.select2-container--open
 .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
 outline: none !important;
 border-color: var(--sqc-field-focus, var(--sqc-primary-color)) !important;
 box-shadow: 0 0 0 4px rgba(var(--sqc-focus-rgb), 0.1) !important;
}

.sqc-woocommerce-fields-wrapper
 .select2-container--default
 .select2-selection--single
 .select2-selection__rendered {
 line-height: 20px;
}

.sqc-woocommerce-fields-wrapper
 .select2-container--default
 .select2-selection--single
 .select2-selection__arrow {
 height: 40px;
}

.sqc-form-actions {
 margin-top: 24px;
 text-align: center;
}

.sqc-place-order-btn {
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 8px !important;
 background-color: var(--sqc-order-btn-bg) !important;
 color: var(--sqc-order-btn-text) !important;
 border: var(--sqc-order-btn-border-width, 0px) solid
  var(--sqc-order-btn-border-color, transparent) !important;
 border-radius: var(--sqc-btn-radius) !important;
 padding: 12px 24px !important;
 font-size: 1rem !important;
 font-weight: 600 !important;
 cursor: pointer !important;
 width: 100% !important;
 position: relative !important;
 overflow: hidden !important;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 transform: translateZ(0);
}

.sqc-place-order-btn:hover {
 background-color: var(--sqc-order-btn-bg-hover) !important;
 color: var(--sqc-order-btn-text-hover) !important;
 border-color: var(--sqc-order-btn-border-hover, transparent) !important;
}

.sqc-place-order-btn > * {
 position: relative;
 z-index: 2;
}

.sqc-place-order-btn svg {
 width: 16px !important;
 height: 16px !important;
 fill: none !important;
 stroke: var(--sqc-order-btn-lock, currentColor) !important;
}

.sqc-btn-total-price {
 color: var(--sqc-order-btn-price, currentColor) !important;
}

.sqc-btn-total-price .amount {
 color: var(--sqc-order-btn-price, currentColor) !important;
}

.sqc-place-order-btn:disabled {
 opacity: 0.7;
 cursor: not-allowed;
}

.sqc-order-feedback {
 padding: 12px;
 border-radius: 6px;
 margin-top: 12px;
 font-size: 0.9rem;
}

.sqc-order-feedback.sqc-success {
 background-color: #d1fae5;
 color: #065f46;
 border: 1px solid #10b981;
}

.sqc-order-feedback.sqc-error {
 background-color: #fee2e2;
 color: #991b1b;
 border: 1px solid #f87171;
}

/* Payment Methods Container */
.sqc-payment-methods-wrapper {
 margin-top: 24px;
}

.sqc-payment-heading {
 margin-top: 24px;
 margin-bottom: 16px;
 font-size: 1.05rem;
 color: var(--sqc-text-main);
 border-bottom: 1px solid var(--sqc-border-color);
 padding-bottom: 8px;
 font-weight: 600;
}

.sqc-payment-heading:first-child,
.sqc-product-summary
 + hr
 + .sqc-checkout-form-container
 .sqc-payment-heading:first-of-type {
 margin-top: 0;
}

/* Payment Methods List Container */
.sqc-payment-methods-list {
 list-style: none !important;
 padding: 0 !important;
 margin: 0 0 20px 0 !important;
 display: flex;
 flex-direction: column;
 gap: 5px;
}

/* The Description Box */
.sqc-payment-method-desc {
 margin-top: 6px;
 padding: 10px;
 background-color: #f1f3f5;
 border-radius: 8px;
}
.sqc-payment-method-desc p {
 margin-left: 30px;
 font-size: 0.85rem;
 color: var(--sqc-text-muted);
 line-height: 1.5;
 margin-bottom: 0px;
}

.sqc-no-payment-methods {
 color: #991b1b;
 font-size: 0.9rem;
 margin: 0;
}

/* Product Summary inside Modal */
.sqc-product-summary {
 display: flex;
 align-items: center;
 gap: 16px;

 /* Dynamic Overrides - No fallbacks here to prevent overriding variant defaults when OFF */
 background: var(--sqc-product-bg);
 border-color: var(--sqc-product-border-color);
 border-style: var(--sqc-product-border-style);
 border-width: var(--sqc-product-border-width);
 padding: var(--sqc-product-padding);
 color: var(--sqc-product-text);
}

.sqc-product-summary h3,
.sqc-product-summary p,
.sqc-product-summary span {
 color: var(--sqc-product-text, inherit);
}

/* --- PRODUCT SUMMARY VARIANTS --- */

/* Standard (Default) */
.sqc-variant-standard {
 display: flex;
 align-items: center;
 gap: 20px;
 padding: var(--sqc-product-padding, 4px 0);
}

/* Compact (Small Image) */
.sqc-variant-compact {
 display: flex;
 align-items: center;
 gap: 12px;
}
.sqc-variant-compact .sqc-product-image img {
 width: 48px !important;
 height: 48px !important;
}
.sqc-variant-compact .sqc-product-title {
 font-size: 1rem !important;
}

/* Minimal (Row Layout) */
.sqc-variant-minimal {
 display: flex;
 align-items: center;
 gap: 14px;
 width: 100%;
}
.sqc-variant-minimal .sqc-product-details {
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 flex: 1 !important;
}
.sqc-variant-minimal .sqc-product-image img {
 width: 40px !important;
 height: 40px !important;
 border: none !important;
 border-radius: 4px !important;
}
.sqc-variant-minimal .sqc-product-title {
 font-size: 0.95rem !important;
 margin: 0 !important;
}
.sqc-variant-minimal .sqc-product-price {
 font-size: 0.95rem !important;
}

/* Boxed (Card Style) */
.sqc-variant-boxed {
 background: var(--sqc-product-bg, #f8fafc);
 border: var(--sqc-product-border-width, 1px)
  var(--sqc-product-border-style, solid)
  var(--sqc-product-border-color, var(--sqc-border-color));
 padding: var(--sqc-product-padding, 16px) !important;
 border-radius: 12px !important;
 display: flex;
 align-items: center;
 gap: 20px;
 margin-bottom: 20px;
}
.sqc-variant-boxed + hr {
 display: none !important; /* Hide separator if boxed */
}
.sqc-variant-boxed .sqc-product-image img {
 width: 64px !important;
 height: 64px !important;
 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
 background: #fff;
}
.sqc-variant-boxed .sqc-product-title {
 font-weight: 700 !important;
 font-size: 1.05rem !important;
}

.sqc-product-image img {
 width: 60px;
 min-width: 60px;
 height: 60px;
 object-fit: cover;
 border-radius: 6px;
 border: 1px solid var(--sqc-border-color);
}

.sqc-product-title {
 margin: 0 0 4px 0;
 font-size: 1.1rem;
 color: var(--sqc-text-main);
}

.sqc-product-price {
 margin: 0;
 font-weight: 600;
 color: var(--sqc-text-main);
}

/* Prevent body scroll when modal is open */
body.sqc-modal-open {
 overflow: hidden;
}

/* --- Container Alignment & Flow --- */
.sqc-single-button-container,
.sqc-loop-button-container {
 clear: none !important;
}

.sqc-single-button-container {
 display: inline-flex !important;
 align-items: center !important;
 vertical-align: middle !important;
 margin-left: 10px !important;
 margin-right: 10px !important;
}

/* --- Premium Button Animations --- */
body .sqc-buy-now-btn,
body .sqc-theme-override .sqc-buy-now-btn {
 position: relative !important;
 overflow: hidden !important;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 will-change: transform, box-shadow, background-color, color, filter !important;
 transform: translateZ(0);
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 box-sizing: border-box !important;
 z-index: 10 !important;
 margin: 0 !important;
 background-color: var(--sqc-single-btn-bg) !important;
 color: var(--sqc-single-btn-text) !important;
 border: var(--sqc-single-btn-border-width, 0px) solid
  var(--sqc-single-btn-border-color, transparent) !important;
 border-radius: var(--sqc-btn-radius, 12px) !important;
 font-size: var(--sqc-single-btn-font-size, 16px) !important;
 width: var(--sqc-single-btn-width, auto) !important;
 height: var(--sqc-single-btn-height, auto) !important;
 padding: var(--sqc-single-btn-padding, 10px 20px) !important;
 --sqc-hover-iteration: var(--sqc-single-hover-iter, 1);
}

body .sqc-buy-now-btn:hover,
body .sqc-theme-override .sqc-buy-now-btn:hover {
 background-color: var(--sqc-single-btn-bg-hover) !important;
 color: var(--sqc-single-btn-text-hover) !important;
 border-color: var(--sqc-single-btn-border-hover, transparent) !important;
}

body .sqc-buy-now-btn-loop,
body .sqc-theme-override .sqc-buy-now-btn-loop {
 position: relative !important;
 overflow: hidden !important;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 will-change: transform, box-shadow, background-color, color, filter !important;
 transform: translateZ(0);
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 box-sizing: border-box !important;
 z-index: 10 !important;
 margin: 0 !important;
 background-color: var(--sqc-shop-btn-bg) !important;
 color: var(--sqc-shop-btn-text) !important;
 border: var(--sqc-shop-btn-border-width, 0px) solid
  var(--sqc-shop-btn-border-color, transparent) !important;
 border-radius: var(--sqc-btn-radius, 12px) !important;
 font-size: var(--sqc-shop-btn-font-size, 16px) !important;
 width: var(--sqc-shop-btn-width, auto) !important;
 height: var(--sqc-shop-btn-height, auto) !important;
 padding: var(--sqc-shop-btn-padding, 10px 20px) !important;
 --sqc-hover-iteration: var(--sqc-shop-hover-iter, 1);
}

body .sqc-buy-now-btn-loop:hover,
body .sqc-theme-override .sqc-buy-now-btn-loop:hover {
 background-color: var(--sqc-shop-btn-bg-hover) !important;
 color: var(--sqc-shop-btn-text-hover) !important;
 border-color: var(--sqc-shop-btn-border-hover, transparent) !important;
}

body .sqc-buy-now-btn > *,
body .sqc-theme-override .sqc-buy-now-btn > * {
 position: relative !important;
 z-index: 2 !important;
}

/* 1. Loop Hover Animations (Triggers on parent .product:hover) */
@keyframes sqcShake {
 0%,
 100% {
  transform: translateX(0);
 }
 25% {
  transform: translateX(-2px);
 }
 75% {
  transform: translateX(2px);
 }
}
.product:hover .sqc-loop-hover-shake:not(:hover) {
 animation: sqcShake 0.4s ease-in-out;
}

@keyframes sqcWiggle {
 0%,
 100% {
  transform: rotate(0deg);
 }
 25% {
  transform: rotate(-2deg);
 }
 75% {
  transform: rotate(2deg);
 }
}
.product:hover .sqc-loop-hover-wiggle:not(:hover) {
 animation: sqcWiggle 0.4s ease-in-out;
}

@keyframes sqcPulse {
 0% {
  transform: scale(1);
 }
 50% {
  transform: scale(1.05);
 }
 100% {
  transform: scale(1);
 }
}
.product:hover .sqc-loop-hover-pulse:not(:hover) {
 animation: sqcPulse 0.5s ease-in-out;
}

/* Premium Shine Pseudo-element base */
.sqc-buy-now-btn::after,
.sqc-place-order-btn::after {
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 width: 50%;
 height: 100%;
 background: linear-gradient(
  120deg,
  rgba(255, 255, 255, 0) 30%,
  rgba(255, 255, 255, 0.8) 50%,
  rgba(255, 255, 255, 0) 70%
 );
 transform: skewX(-25deg);
 transition: none;
 pointer-events: none;
 z-index: 1;
}
@keyframes sqcShine {
 100% {
  left: 200%;
 }
}
.product:hover .sqc-loop-hover-shine::after {
 animation: sqcShine 0.8s ease-in-out;
}

/* Slide Up Reveal (Initial state hidden and slightly lowered) */
.sqc-loop-hover-slide-up {
 opacity: 0;
 transform: translateY(8px) translateZ(0);
}
.product:hover .sqc-loop-hover-slide-up {
 opacity: 1;
 transform: translateY(0) translateZ(0);
}

/* 2. Direct Hover Effects (Trigger on button hover) */
body .sqc-direct-hover-fade:hover {
 filter: brightness(0.9) !important;
}

body .sqc-direct-hover-lift:hover {
 transform: translateY(-4px) translateZ(0) !important;
 box-shadow:
  0 12px 20px -5px rgba(0, 0, 0, 0.15),
  0 8px 10px -4px rgba(0, 0, 0, 0.1) !important;
}

body .sqc-direct-hover-glow:hover {
 box-shadow:
  inset 0 0 15px rgba(255, 255, 255, 0.5),
  0 0 20px rgba(var(--sqc-primary-rgb), 0.3) !important;
}

body .sqc-direct-hover-scale:hover {
 transform: scale(1.05) translateZ(0) !important;
}

body .sqc-direct-hover-heartbeat:hover {
 animation: sqcHoverHeartbeat 0.6s ease-in-out var(--sqc-hover-iteration, 1) !important;
}

body .sqc-direct-hover-tada:hover {
 animation: sqcHoverTada 0.8s ease-in-out var(--sqc-hover-iteration, 1) !important;
}

body .sqc-direct-hover-rubberband:hover {
 animation: sqcHoverRubberband 0.8s ease-in-out var(--sqc-hover-iteration, 1) !important;
}

body .sqc-direct-hover-fast-shake:hover {
 animation: sqcHoverFastShake 0.4s ease-in-out var(--sqc-hover-iteration, 1) !important;
}

/* 3. Single Product Idle Animations (Continuous) */
@keyframes sqcIdlePulse {
 0%,
 100% {
  transform: scale(1) translateZ(0);
 }
 50% {
  transform: scale(1.02) translateZ(0);
 }
}
.sqc-idle-pulse:not(:hover) {
 animation: sqcIdlePulse 3s infinite ease-in-out;
}

.sqc-idle-floating:not(:hover) {
 animation: sqcFloating 3s infinite ease-in-out;
}

.sqc-idle-bounce:not(:hover) {
 animation: sqcIdleBounce 2s infinite ease-in-out;
}

.sqc-idle-heartbeat:not(:hover) {
 animation: sqcIdleHeartbeat 3s infinite ease-in-out;
}

.sqc-idle-tada:not(:hover) {
 animation: sqcIdleTada 3s infinite ease-in-out;
}

.sqc-idle-rubberband:not(:hover) {
 animation: sqcIdleRubberband 3s infinite ease-in-out;
}

.sqc-idle-fast-shake:not(:hover) {
 animation: sqcIdleFastShake 3s infinite ease-in-out;
}

.sqc-idle-shine-interval::after {
 animation: sqcShine 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.sqc-idle-fast-shine::after {
 animation: sqcShine 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sqcFloating {
 0%,
 100% {
  transform: translateY(0) translateZ(0);
 }
 50% {
  transform: translateY(-3px) translateZ(0);
 }
}

/* --- Premium CRO Animations (Heartbeat, Tada, Rubberband, Fast Shake) --- */
@keyframes sqcHoverHeartbeat {
 0%,
 50%,
 100% {
  transform: scale(1);
 }
 25%,
 75% {
  transform: scale(1.08);
 }
}
@keyframes sqcIdleHeartbeat {
 0%,
 10%,
 20%,
 100% {
  transform: scale(1);
 }
 5%,
 15% {
  transform: scale(1.08);
 }
}
@keyframes sqcHoverRubberband {
 0%,
 100% {
  transform: scale3d(1, 1, 1);
 }
 30% {
  transform: scale3d(1.25, 0.75, 1);
 }
 40% {
  transform: scale3d(0.75, 1.25, 1);
 }
 50% {
  transform: scale3d(1.15, 0.85, 1);
 }
 65% {
  transform: scale3d(0.95, 1.05, 1);
 }
 75% {
  transform: scale3d(1.05, 0.95, 1);
 }
}
@keyframes sqcIdleRubberband {
 0%,
 20%,
 100% {
  transform: scale3d(1, 1, 1);
 }
 6% {
  transform: scale3d(1.25, 0.75, 1);
 }
 8% {
  transform: scale3d(0.75, 1.25, 1);
 }
 10% {
  transform: scale3d(1.15, 0.85, 1);
 }
 13% {
  transform: scale3d(0.95, 1.05, 1);
 }
 15% {
  transform: scale3d(1.05, 0.95, 1);
 }
}
@keyframes sqcHoverTada {
 0%,
 100% {
  transform: scale3d(1, 1, 1);
 }
 10%,
 20% {
  transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
 }
 30%,
 50%,
 70%,
 90% {
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 }
 40%,
 60%,
 80% {
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 }
}
@keyframes sqcIdleTada {
 0%,
 20%,
 100% {
  transform: scale3d(1, 1, 1);
 }
 2%,
 4% {
  transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
 }
 6%,
 10%,
 14%,
 18% {
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 }
 8%,
 12%,
 16% {
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 }
}
@keyframes sqcHoverFastShake {
 0%,
 100% {
  transform: translateX(0);
 }
 10%,
 30%,
 50%,
 70%,
 90% {
  transform: translateX(-4px);
 }
 20%,
 40%,
 60%,
 80% {
  transform: translateX(4px);
 }
}
@keyframes sqcIdleFastShake {
 0%,
 20%,
 100% {
  transform: translateX(0);
 }
 2%,
 6%,
 10%,
 14%,
 18% {
  transform: translateX(-4px);
 }
 4%,
 8%,
 12%,
 16% {
  transform: translateX(4px);
 }
}

.product:hover .sqc-loop-hover-heartbeat {
 animation: sqcHoverHeartbeat 0.6s ease-in-out;
}
.product:hover .sqc-loop-hover-tada {
 animation: sqcHoverTada 0.8s ease-in-out;
}
.product:hover .sqc-loop-hover-rubberband {
 animation: sqcHoverRubberband 0.8s ease-in-out;
}
.product:hover .sqc-loop-hover-fast-shake {
 animation: sqcHoverFastShake 0.4s ease-in-out;
}

/* Shipping Methods */
.sqc-shipping-methods-wrapper {
 margin-top: 24px;
}

.sqc-shipping-heading {
 margin-top: 0;
 margin-bottom: 12px;
 font-size: 1.05rem;
 color: var(--sqc-text-main);
 border-bottom: 1px solid var(--sqc-border-color);
 padding-bottom: 8px;
}

.sqc-shipping-methods-list {
 list-style: none;
 padding: 0;
 margin: 0;
 background-color: #fafbfc;
 border: 1px solid var(--sqc-border-color);
 border-radius: 12px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 overflow: hidden;
}

.sqc-shipping-method {
 padding: 16px 20px;
 border-bottom: 1px solid var(--sqc-border-color);
 transition: background-color 0.2s;
}

.sqc-shipping-method:last-child {
 border-bottom: none;
}

.sqc-shipping-method input[type="radio"] {
 margin: 0 12px 0 0;
 width: 18px;
 height: 18px;
 accent-color: var(--sqc-primary-color);
 cursor: pointer;
}

.sqc-shipping-method label {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 cursor: pointer;
 margin: 0;
 font-size: 0.95rem;
 color: var(--sqc-text-main);
}

/* Legal Elements */
.sqc-terms-wrapper,
.sqc-privacy-wrapper {
 margin-top: 16px;
 font-size: 0.85rem;
 color: var(--sqc-text-muted);
 line-height: 1.5;
}

.sqc-terms-wrapper a,
.sqc-privacy-wrapper a {
 color: var(--sqc-primary-color);
 text-decoration: none;
}

.sqc-terms-wrapper a:hover,
.sqc-privacy-wrapper a:hover {
 text-decoration: underline;
}

/* Loop button positioning for before add to cart */
.sqc-loop-button-container {
 display: inline-block !important;
 margin-top: 0 !important;
}

.sqc-buy-now-btn-loop,
.add_to_cart_button {
 width: calc(50% - 5px);
 display: inline-flex !important;
 justify-content: center;
 align-items: center;
}

/* --- COMPACT LAYOUT OVERRIDES --- */
.sqc-layout-compact .sqc-modal-header {
 padding-block: 10px;
 /* border-bottom: none !important;
 padding: 0 !important;
 position: absolute;
 top: 12px;
 right: 12px;
 width: auto;
 background: transparent !important;
 z-index: 20; */
}
.sqc-layout-compact #sqc-modal-title {
 /* display: none !important; */
}
.sqc-layout-compact .sqc-modal-close {
 background-color: #f3f4f6 !important;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.sqc-layout-compact .sqc-modal-content {
 padding: 16px 24px 16px 24px !important; /* Top padding clears the absolute close button */
}
/* Hide specific headings but keep the Order Summary heading */
.sqc-layout-compact .sqc-payment-heading.billing_details_heading {
 display: none !important;
}
/* .sqc-layout-compact .sqc-payment-heading:not(.sqc-summary-heading) {
 display: none !important;
} */
/* Condense Product Info */
.sqc-layout-compact .sqc-product-summary {
 padding-bottom: 12px;
 border-bottom: 1px solid var(--sqc-border-color);
 margin-bottom: 0px;
}
.sqc-layout-compact hr {
 display: none !important; /* Replaced by product summary border */
}
/* Condense Form Fields */
.sqc-layout-compact .sqc-woocommerce-fields-wrapper .form-row {
 margin-bottom: 5px !important;
 padding: 0px;
}

.sqc-layout-compact .sqc-woocommerce-fields-wrapper .form-row label {
 margin-bottom: 2px;
}
.sqc-layout-compact input[type="text"],
.sqc-layout-compact input[type="email"],
.sqc-layout-compact input[type="tel"],
.sqc-layout-compact select {
 padding: 6px 10px 6px 38px !important;
 min-height: 38px !important;
}

.sqc-layout-compact select {
 padding-bottom: 8px !important;
}
/* Condense Payment & Shipping Options */
.sqc-layout-compact .sqc-payment-method,
.sqc-layout-compact .sqc-shipping-method {
 padding: 10px 14px !important;
}
.sqc-layout-compact .sqc-payment-method-desc {
 display: none !important; /* Hides text descriptions securely */
}
/* .sqc-layout-compact .sqc-payment-method-desc {
 padding: 10px !important;
 margin-top: 8px !important;
} */
.sqc-layout-compact .sqc-order-summary {
 margin-top: 16px !important;
 padding: 12px !important;
}
.sqc-layout-compact .sqc-modal-footer {
 padding: 10px !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
 .sqc-modal-container {
  width: calc(100% - 32px); /* Leaves 16px of space on each side */
  height: auto;
  max-height: 95vh; /* Prevents it from touching the top/bottom */
  border-radius: var(--sqc-radius); /* Restores the rounded corners */
 }

 .sqc-layout-compact .sqc-modal-content {
  padding: 24px 24px 12px 24px !important; /* Adjusts for smaller screens */
 }

 .sqc-modal-header {
  border-top-left-radius: var(--sqc-radius);
  border-top-right-radius: var(--sqc-radius);
 }

 .sqc-modal-footer {
  border-bottom-left-radius: var(--sqc-radius);
  border-bottom-right-radius: var(--sqc-radius);
  padding-bottom: 16px;
 }

 .sqc-form-row {
  flex-direction: column;
  gap: 12px;
 }

 .sqc-woocommerce-fields-wrapper .form-row-first,
 .sqc-woocommerce-fields-wrapper .form-row-last {
  width: 100% !important;
  float: none !important;
 }
}

.sqc-order-summary {
 margin-top: 24px;
 background: var(--sqc-order-summary-bg, #fafbfc) !important;
 border: 1px solid var(--sqc-order-summary-border, var(--sqc-border-color)) !important;
 border-radius: 8px;
 padding: 16px;
}

table.sqc-summary-table {
 width: 100% !important;
 border-collapse: collapse !important;
 margin: 0 !important;
 border: none !important;
}

table.sqc-summary-table th {
 padding: 8px 0 !important;
 text-align: left !important;
 font-size: 0.95rem !important;
 color: var(--sqc-order-summary-label, var(--sqc-text-main)) !important;
 border: none !important;
 background: transparent !important;
}

table.sqc-summary-table td {
 padding: 8px 0 !important;
 text-align: right !important;
 font-size: 0.95rem !important;
 color: var(--sqc-order-summary-value, var(--sqc-text-main)) !important;
 border: none !important;
 background: transparent !important;
}

table.sqc-summary-table tr {
 border: none !important;
 background: transparent !important;
}

table.sqc-summary-table tfoot tr {
 border-top: 1px solid var(--sqc-order-summary-border, var(--sqc-border-color)) !important;
}

table.sqc-summary-table tfoot th {
 padding-top: 12px !important;
 margin-top: 4px !important;
 font-weight: 600 !important;
 font-size: 1.05rem !important;
 color: var(--sqc-order-summary-total-label, var(--sqc-text-main)) !important;
}

table.sqc-summary-table tfoot td {
 padding-top: 12px !important;
 margin-top: 4px !important;
 font-weight: 600 !important;
 font-size: 1.05rem !important;
 color: var(
  --sqc-order-summary-total-value,
  var(--sqc-primary-color)
 ) !important;
}

/* --- INPUT FIELD ICONS BASE --- */
.sqc-woocommerce-fields-wrapper .woocommerce-input-wrapper {
 position: relative;
 display: block;
}

/* Add padding to inputs and Select2 dropdowns so text clears the icon */
.sqc-woocommerce-fields-wrapper .woocommerce-input-wrapper input.input-text,
.sqc-woocommerce-fields-wrapper .woocommerce-input-wrapper input.tel,
.sqc-woocommerce-fields-wrapper .woocommerce-input-wrapper input.email,
.sqc-woocommerce-fields-wrapper .woocommerce-input-wrapper select,
.sqc-woocommerce-fields-wrapper .select2-container .select2-selection--single {
 padding-left: 38px !important;
}

/* Hide icons and reset padding if setting is OFF */
.sqc-hide-field-icons .woocommerce-input-wrapper::before {
 display: none !important;
}

.sqc-hide-field-icons .woocommerce-input-wrapper input.input-text,
.sqc-hide-field-icons .woocommerce-input-wrapper input.tel,
.sqc-hide-field-icons .woocommerce-input-wrapper input.email,
.sqc-hide-field-icons .woocommerce-input-wrapper select,
.sqc-hide-field-icons .select2-container .select2-selection--single {
 padding-left: 12px !important;
}

/* Base pseudo-element for the icon */
.sqc-woocommerce-fields-wrapper .woocommerce-input-wrapper::before {
 content: "";
 position: absolute;
 left: 12px;
 top: 50%;
 transform: translateY(-50%);
 width: 18px;
 height: 18px;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 opacity: 0.4;
 pointer-events: none; /* Ensures users can click through the icon to focus the input */
 z-index: 5;
 transition: opacity 0.3s ease;
}

/* Highlight icon when input is focused */
.sqc-woocommerce-fields-wrapper
 .woocommerce-input-wrapper:focus-within::before {
 opacity: 0.8;
 color: var(--sqc-primary-color, #10b981);
}

/* First & Last Name: User Icon */
#billing_first_name_field .woocommerce-input-wrapper::before,
#billing_last_name_field .woocommerce-input-wrapper::before,
#shipping_first_name_field .woocommerce-input-wrapper::before,
#shipping_last_name_field .woocommerce-input-wrapper::before {
 background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
}

/* Email: Envelope Icon */
#billing_email_field .woocommerce-input-wrapper::before {
 background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>');
}

/* Phone: Phone Icon */
#billing_phone_field .woocommerce-input-wrapper::before {
 background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>');
}

/* Address 1 & 2: Map Pin Icon */
#billing_address_1_field .woocommerce-input-wrapper::before,
#billing_address_2_field .woocommerce-input-wrapper::before,
#shipping_address_1_field .woocommerce-input-wrapper::before,
#shipping_address_2_field .woocommerce-input-wrapper::before {
 background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>');
}

/* City, State: Layout/Map Icon */
#billing_city_field .woocommerce-input-wrapper::before,
#billing_state_field .woocommerce-input-wrapper::before,
#shipping_city_field .woocommerce-input-wrapper::before,
#shipping_state_field .woocommerce-input-wrapper::before {
 background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>');
}

/* Country: Globe Icon */
#billing_country_field .woocommerce-input-wrapper::before,
#shipping_country_field .woocommerce-input-wrapper::before {
 background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>') !important;
 opacity: 0.6 !important; /* Slightly more visible for the select dropdown */
}

/* Postcode: Hash/Number Icon */
#billing_postcode_field .woocommerce-input-wrapper::before,
#shipping_postcode_field .woocommerce-input-wrapper::before {
 background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>');
}

/* Company: Building Icon */
#billing_company_field .woocommerce-input-wrapper::before,
#shipping_company_field .woocommerce-input-wrapper::before {
 background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="9" y1="22" x2="9" y2="22"/><line x1="15" y1="22" x2="15" y2="22"/><line x1="9" y1="6" x2="9" y2="6"/><line x1="15" y1="6" x2="15" y2="6"/><line x1="9" y1="10" x2="9" y2="10"/><line x1="15" y1="10" x2="15" y2="10"/><line x1="9" y1="14" x2="9" y2="14"/><line x1="15" y1="14" x2="15" y2="14"/></svg>');
}

/* =============================================
   ORDER BUMP STYLES
   ============================================= */

.sqc-order-bump-wrapper {
 position: relative;
 background-color: var(--sqc-ub-bg, #fdfaf0);
 border-width: 2px;
 border-style: var(--sqc-ub-border-style, dashed) !important;
 border-color: var(--sqc-ub-border, #f59e0b);
 border-radius: 12px;
 margin: 25px 0;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 color: var(--sqc-ub-text, #1d2327);
 display: flex;
 flex-direction: column;
}

.sqc-order-bump-wrapper:has(.sqc-bump-checkbox:checked) {
 background-color: var(--sqc-cb-bg, #f0fdf4);
 border-style: var(--sqc-cb-border-style, dashed) !important;
 border-color: var(--sqc-cb-border, #10b981);
 color: var(--sqc-cb-text, #1d2327);
 box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

/* Overlapping Badge */
.sqc-bump-badge {
 position: absolute;
 top: -12px;
 left: var(--sqc-badge-left, 20px) !important;
 right: var(--sqc-badge-right, auto) !important;
 background-color: var(--sqc-ub-badge-bg, #ef4444);
 color: var(--sqc-ub-badge-text, #ffffff);
 font-size: 0.65rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 padding: 3px 10px;
 border-radius: 4px;
 white-space: nowrap;
 transition: all 0.2s ease;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
 z-index: 10;
}

.sqc-order-bump-wrapper:has(.sqc-bump-checkbox:checked) .sqc-bump-badge {
 background-color: var(--sqc-cb-badge-bg, #10b981);
 color: var(--sqc-cb-badge-text, #ffffff);
}

/* Full Width Header (Headline) */
.sqc-bump-header {
 background-color: var(--sqc-ub-hl-bg, #fdfaf0);
 color: var(--sqc-ub-hl-text, inherit);
 border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 padding: 3px 15px; /* Extra top padding for badge */
 font-size: 0.85rem;
 font-weight: 600;
 opacity: 0.9;
 transition: all 0.3s ease;
 margin-inline: 16px;
 margin-top: 10px;
}

.sqc-order-bump-wrapper:has(.sqc-bump-checkbox:checked) .sqc-bump-header {
 background-color: var(--sqc-cb-hl-bg, rgba(16, 185, 129, 0.03));
 color: var(--sqc-cb-hl-text, inherit);
}

.sqc-bump-body {
 padding: 12px 16px 16px;
}

/* Content Layout */
.sqc-bump-content {
 display: flex;
 align-items: flex-start;
 gap: 14px;
}

.sqc-bump-checkbox-wrap {
 flex-shrink: 0;
 margin-top: 4px;
}

/* --- NATIVE CHECKBOX STYLING --- */
.sqc-bump-checkbox {
 appearance: none !important;
 -webkit-appearance: none !important;
 width: 22px !important;
 height: 22px !important;
 border: 2px solid var(--sqc-cb-un, #cbd5e1) !important;
 border-radius: 4px !important;
 background-color: #ffffff !important;
 cursor: pointer !important;
 position: relative !important;
 margin: 0 !important;
 padding: 0 !important;
 transition: all 0.2s ease !important;
 outline: none !important;
 flex-shrink: 0 !important;
}

/* Checked State */
.sqc-bump-checkbox:checked {
 background-color: var(--sqc-cb-ch, #10b981) !important;
 border-color: var(--sqc-cb-ch, #10b981) !important;
}

/* Checkmark Icon drawn with CSS inside the native input */
.sqc-bump-checkbox:checked::after {
 content: "" !important;
 position: absolute !important;
 left: 6px !important;
 top: 1px !important;
 width: 7px !important;
 height: 12px !important;
 border: solid #ffffff !important;
 border-width: 0 2px 2px 0 !important;
 transform: rotate(45deg) !important;
 display: block !important;
}

.sqc-bump-thumbnail {
 flex-shrink: 0;
}

.sqc-bump-thumbnail img {
 width: 56px;
 height: 56px;
 object-fit: cover;
 border-radius: 6px;
 border: 1px solid rgba(0, 0, 0, 0.05);
 background: #fff;
}

.sqc-bump-text {
 flex: 1;
 min-width: 0;
}

.sqc-bump-product-name {
 font-size: 0.9rem;
 font-weight: 700;
 color: inherit;
 margin: 0 0 3px;
 line-height: 1.3;
}

.sqc-bump-price {
 font-size: 0.85rem;
 font-weight: 700;
 color: var(--sqc-ub-price, var(--sqc-ub-border, #f59e0b));
 margin: 0 0 6px;
 display: flex;
 gap: 6px;
 align-items: center;
}

.sqc-order-bump-wrapper:has(.sqc-bump-checkbox:checked) .sqc-bump-price {
 color: var(--sqc-cb-price, var(--sqc-cb-border, #10b981));
}

.sqc-bump-price del {
 opacity: 0.5;
 font-weight: 400;
}

.sqc-bump-price ins {
 text-decoration: none;
}

.sqc-bump-description {
 font-size: 0.8rem;
 color: inherit;
 opacity: 0.75;
 margin: 0;
 line-height: 1.4;
}

@media (max-width: 480px) {
 .sqc-bump-content {
  gap: 8px;
 }
 .sqc-bump-product-name {
  font-size: 0.86rem;
 }
 .sqc-single-button-container {
  display: flex !important;
  width: 100% !important;
  margin: 10px 0 !important;
 }
 .sqc-single-button-container .sqc-buy-now-btn {
  width: 100% !important;
 }
}

/* --- PREMIUM INPUT STYLING --- */
.sqc-woocommerce-fields-wrapper input.input-text,
.sqc-woocommerce-fields-wrapper input.tel,
.sqc-woocommerce-fields-wrapper input.email,
.sqc-woocommerce-fields-wrapper textarea,
.sqc-woocommerce-fields-wrapper .select2-container .select2-selection {
 /* border: 1px solid
  color-mix(in srgb, var(--sqc-primary-color, #e2e8f0) 60%, white 80%) !important; */
 transition: all 0.2s ease;
}

/* Input Focus State */
.sqc-woocommerce-fields-wrapper input.input-text:focus,
.sqc-woocommerce-fields-wrapper input.tel:focus,
.sqc-woocommerce-fields-wrapper input.email:focus,
.sqc-woocommerce-fields-wrapper textarea:focus,
.sqc-woocommerce-fields-wrapper .select2-container--open .select2-selection {
 /* border-color: var(--sqc-primary-color) !important;
 box-shadow: 0 0 0 1px var(--sqc-primary-color) !important; */
 outline: none !important;
}

/* --- SHIPPING & PAYMENT SELECTION CARDS --- */
#sqc-checkout-form-wrapper #shipping_method li,
#sqc-checkout-form-wrapper
 .woocommerce-checkout-payment
 ul.payment_methods
 li.wc_payment_method {
 background-color: var(--sqc-box-bg, #ffffff);
 border: 1px solid var(--sqc-box-border, #e2e8f0);
 border-radius: 8px;
 padding: 14px 16px;
 margin-bottom: 10px;
 transition: all 0.2s ease;
 cursor: pointer;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 list-style: none !important;
}

/* Hover State */
#sqc-checkout-form-wrapper #shipping_method li:hover,
#sqc-checkout-form-wrapper
 .woocommerce-checkout-payment
 ul.payment_methods
 li.wc_payment_method:hover {
 border-color: var(--sqc-box-active-border, #0f172a);
}

/* Active / Selected State (Uses :has pseudo-class) */
#sqc-checkout-form-wrapper #shipping_method li:has(input[type="radio"]:checked),
#sqc-checkout-form-wrapper
 .woocommerce-checkout-payment
 ul.payment_methods
 li.wc_payment_method:has(input[type="radio"]:checked) {
 background-color: var(--sqc-box-active-bg, #f8fafc);
 border-color: var(--sqc-primary-color) !important;
 box-shadow: 0 0 0 1px var(--sqc-primary-color) !important;
}

/* Style the Radio Buttons */
#sqc-checkout-form-wrapper #shipping_method li input[type="radio"],
#sqc-checkout-form-wrapper
 .woocommerce-checkout-payment
 ul.payment_methods
 li.wc_payment_method
 > input[type="radio"] {
 margin-right: 14px;
 margin-top: 0;
 accent-color: var(--sqc-primary-color) !important;
 transform: scale(1.15);
}

/* Payment Method Description Drawer */
#sqc-checkout-form-wrapper
 .woocommerce-checkout-payment
 ul.payment_methods
 li.wc_payment_method
 div.payment_box {
 width: 100%;
 margin-top: 14px;
 padding-top: 14px;
 border-top: 1px dashed var(--sqc-box-border, #e2e8f0);
 background: transparent !important;
 color: #64748b;
 font-size: 13px;
 line-height: 1.5;
}

/* Hide WooCommerce native triangles on payment box */
#sqc-checkout-form-wrapper
 .woocommerce-checkout-payment
 ul.payment_methods
 li.wc_payment_method
 div.payment_box::before {
 display: none !important;
}

/* --- PREMIUM SELECTION CARDS (SHIPPING & PAYMENTS) --- */

/* 1. Reset the list containers */
ul.sqc-shipping-list,
ul.sqc-payment-methods-list {
 list-style: none !important;
 padding: 0 !important;
 margin: 0 0 20px 0 !important;
 display: flex;
 flex-direction: column;
 gap: 5px; /* User refined gap */
}

ul.sqc-shipping-list li.sqc-payment-method,
ul.sqc-payment-methods-list li.sqc-payment-method {
 margin: 0 !important;
 padding: 0 !important;
 list-style: none !important;
}

/* 2. Style the Label as a Clickable Card */
ul.sqc-shipping-list li.sqc-payment-method label,
ul.sqc-payment-methods-list li.sqc-payment-method label {
 display: flex;
 align-items: center;
 padding: 10px 14px; /* User refined padding */
 background-color: var(--sqc-radio-bg, #ffffff) !important;
 border: 1px solid var(--sqc-radio-border, #e2e8f0) !important;
 border-radius: 8px;
 cursor: pointer;
 transition: all 0.2s ease;
 margin: 0;
 width: 100%;
 box-sizing: border-box;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* 3. Hover State */
ul.sqc-shipping-list li.sqc-payment-method label:hover,
ul.sqc-payment-methods-list li.sqc-payment-method label:hover {
 border-color: color-mix(
  in srgb,
  var(--sqc-primary-color, #0f172a) 60%,
  white 80%
 );
 background-color: var(--sqc-box-bg, #ffffff);
}

/* Active / Selected State (Highlights the whole card) */
ul.sqc-shipping-list
 li.sqc-payment-method
 label:has(input[type="radio"]:checked),
ul.sqc-payment-methods-list
 li.sqc-payment-method
 label:has(input[type="radio"]:checked) {
 background-color: var(--sqc-radio-active-bg, #f8fafc) !important;
 border-color: var(
  --sqc-radio-active-border,
  var(--sqc-primary-color)
 ) !important;
 box-shadow: 0 0 0 1px var(--sqc-radio-active-border, var(--sqc-primary-color)) !important;
}

/* Fully Custom Radio Buttons */
ul.sqc-shipping-list li.sqc-payment-method input[type="radio"],
ul.sqc-payment-methods-list li.sqc-payment-method input[type="radio"] {
 appearance: none !important;
 -webkit-appearance: none !important;
 width: 16px !important;
 height: 16px !important;
 border: 2px solid var(--sqc-radio-dot, #cbd5e1) !important;
 border-radius: 50% !important;
 background-color: #ffffff !important;
 cursor: pointer !important;
 position: relative !important;
 transition: all 0.2s ease !important;
 margin: 0 12px 0 0 !important;
 flex-shrink: 0 !important;
 outline: none !important;
 box-shadow: none !important;
}

ul.sqc-shipping-list li.sqc-payment-method input[type="radio"]:checked,
ul.sqc-payment-methods-list li.sqc-payment-method input[type="radio"]:checked {
 border-color: var(--sqc-radio-active-dot, var(--sqc-primary-color)) !important;
}

ul.sqc-shipping-list li.sqc-payment-method input[type="radio"]:checked::after,
ul.sqc-payment-methods-list
 li.sqc-payment-method
 input[type="radio"]:checked::after {
 content: "" !important;
 position: absolute !important;
 top: 50% !important;
 left: 50% !important;
 transform: translate(-50%, -50%) !important;
 width: 10px !important;
 height: 10px !important;
 background-color: var(
  --sqc-radio-active-dot,
  var(--sqc-primary-color)
 ) !important;
 border-radius: 50% !important;
 display: block !important;
}

/* 6. Layout the Text inside the Label */
ul.sqc-shipping-list li.sqc-payment-method .sqc-gateway-title,
ul.sqc-payment-methods-list li.sqc-payment-method .sqc-gateway-title {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 font-weight: 500;
 color: var(--sqc-text-main, #334155);
 font-size: 14px;
 line-height: 1.4;
}

/* 7. Highlight the Price & Icons (Push to the right) */
ul.sqc-shipping-list li.sqc-payment-method .woocommerce-Price-amount,
ul.sqc-payment-methods-list li.sqc-payment-method .woocommerce-Price-amount,
ul.sqc-payment-methods-list li.sqc-payment-method label img {
 font-weight: 600;
 color: var(--sqc-box-active-border, #0f172a);
 margin-left: auto;
 max-height: 24px;
 width: auto;
 object-fit: contain;
}

/* --- BUTTON ICONS --- */
.sqc-buy-now-btn .sqc-btn-icon,
.sqc-buy-now-btn-loop .sqc-btn-icon {
 color: inherit !important;
 font-size: 1.2em !important;
 width: auto !important;
 height: auto !important;
 line-height: inherit !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
}

.sqc-buy-now-btn .sqc-btn-icon-custom,
.sqc-buy-now-btn-loop .sqc-btn-icon-custom {
 max-height: 1.2em !important;
 width: auto !important;
 display: inline-block !important;
 vertical-align: middle !important;
 flex-shrink: 0 !important;
}

/* Positioning Spacing */
.sqc-buy-now-btn .sqc-btn-icon:first-child,
.sqc-buy-now-btn .sqc-btn-icon-custom:first-child,
.sqc-buy-now-btn-loop .sqc-btn-icon:first-child,
.sqc-buy-now-btn-loop .sqc-btn-icon-custom:first-child {
 margin-right: 8px !important;
}

.sqc-buy-now-btn .sqc-btn-icon:last-child,
.sqc-buy-now-btn .sqc-btn-icon-custom:last-child,
.sqc-buy-now-btn-loop .sqc-btn-icon:last-child,
.sqc-buy-now-btn-loop .sqc-btn-icon-custom:last-child {
 margin-left: 8px !important;
}

/* --- VARIATION SELECTION (STEP 1) --- */
.sqc-variation-selection-wrapper {
 padding: 10px 5px;
 animation: sqcFadeIn 0.3s ease-out;
}

.sqc-variation-form {
 margin-top: 10px;
}

.sqc-variation-row {
 margin-bottom: 10px;
}

.sqc-variation-row label {
 display: block;
 font-weight: 600;
 margin-bottom: 8px;
 font-size: 0.9rem;
 color: var(--sqc-text-main, #334155);
}

.sqc-variation-row select {
 width: 100% !important;
 padding: 0px 12px !important;
 border: 1px solid var(--sqc-field-border, var(--sqc-border-color, #e2e8f0)) !important;
 border-radius: 8px !important;
 background-color: #fff !important;
 font-size: 0.95rem !important;
 color: var(--sqc-text-main, #334155) !important;
 cursor: pointer !important;
 min-height: 42px !important;
 line-height: inherit !important;
 transition:
  border-color 0.2s,
  box-shadow 0.2s !important;
 appearance: none !important;
 -webkit-appearance: none !important;
 -moz-appearance: none !important;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
 background-repeat: no-repeat !important;
 background-position: right 12px center !important;
 background-size: 16px !important;
}

.sqc-variation-row select:focus {
 border-color: var(--sqc-field-focus, var(--sqc-primary-color)) !important;
 box-shadow: 0 0 0 4px rgba(var(--sqc-focus-rgb), 0.1) !important;
 outline: none !important;
}

.sqc-variant-continue-btn {
 width: 100% !important;
 padding: var(--sqc-var-btn-padding, 14px) !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 font-size: var(--sqc-var-btn-font-size, inherit) !important;
 font-weight: var(--sqc-var-btn-font-weight, 700) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.03em !important;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 border: none !important;
 border-radius: var(--sqc-btn-radius, 12px) !important;
 background-color: var(
  --sqc-var-btn-bg,
  var(--sqc-primary-color, #3b82f6)
 ) !important;
 color: var(--sqc-var-btn-text, #fff) !important;
}

.sqc-variant-continue-btn svg {
 width: 18px !important;
 height: 18px !important;
 margin-left: 8px !important;
}

.sqc-variation-selection-footer {
 margin-top: 20px;
}

.sqc-variant-continue-btn:disabled {
 opacity: 0.5 !important;
 cursor: not-allowed !important;
 filter: grayscale(1) !important;
}

.sqc-variant-continue-btn:not(:disabled):hover {
 transform: translateY(-2px) !important;
 box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
 filter: brightness(1.1) !important;
}

@keyframes sqcFadeIn {
 from {
  opacity: 0;
  transform: translateY(10px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

/* Hide checkout form until variation is selected if we decide to keep both in DOM (currently AJAX swapped) */
.sqc-checkout-hidden {
 display: none !important;
}