/* ==========================================================================
   PopupCheckout Pro — Frontend Popup CSS  (premium redesign)
   ========================================================================== */

/* --- CSS Custom Properties (overridden via inline style from PHP) --- */
:root {
--pcp-button-color:  #16a34a;
--pcp-button-text:   #ffffff;
--pcp-button-weight: 700;
--pcp-radius:        20px;
--pcp-transition:    0.32s cubic-bezier(0.32, 0.72, 0, 1);
--pcp-bg:            #ffffff;
--pcp-surface:       #f3f4f6;
--pcp-border:        #e5e7eb;
--pcp-text:          #111827;
--pcp-muted:         #6b7280;
--pcp-muted-bg:      #f9fafb;
--pcp-font-checkout-heading: 15px;
--pcp-font-section-heading:  14px;
--pcp-font-field-label:      13px;
--pcp-font-body:             13px;
}

button.button.pcp-buy-now-btn {
height: var(--pcp-buynow-height, auto);
width: var(--pcp-buynow-width, auto);
margin-left: 5px;
margin-right: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}

/* Buy Now button — shop loop spacing only.
   Size intentionally inherits from theme. */
.pcp-buy-now-loop {
margin-top: 6px;
display: block;
}

/* ===========================================================================
   Overlay / Backdrop
   =========================================================================== */
.pcp-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
z-index: 99998;
display: flex;
align-items: flex-end;
justify-content: center;
overscroll-behavior: contain;
}

/* ===========================================================================
   Popup Panel  (flex-column: header | scrollable body | sticky footer)
   =========================================================================== */
.pcp-popup-panel {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
width: 100%;
max-width: 480px;
max-height: 90vh;
background: var(--pcp-bg);
border-radius: var(--pcp-radius) var(--pcp-radius) 0 0;
z-index: 99999;
display: flex;
flex-direction: column;
box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
will-change: transform;
overscroll-behavior: contain;
overflow: hidden;
}

/* Desktop: float the panel with all-corner radius + bottom gap */
@media (min-width: 481px) {
.pcp-popup-panel {
bottom: 16px;
border-radius: var(--pcp-radius);
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.22),
0 4px 20px rgba(0, 0, 0, 0.1);
}
}

/* Open / close slide animations */
.pcp-popup-panel.pcp-is-open    { animation: pcpSlideUp   var(--pcp-transition) forwards; }
.pcp-popup-panel.pcp-is-closing { animation: pcpSlideDown var(--pcp-transition) forwards; }

@keyframes pcpSlideUp {
from { transform: translateX(-50%) translateY(100%); }
to   { transform: translateX(-50%) translateY(0);    }
}
@keyframes pcpSlideDown {
from { transform: translateX(-50%) translateY(0);    }
to   { transform: translateX(-50%) translateY(100%); }
}

/* Place-order button shake */
@keyframes pcpShake {
0%, 100% { transform: scale(1); }
20%       { transform: scale(1.025) rotate(-1deg); }
40%       { transform: scale(1.025) rotate(1deg);  }
60%       { transform: scale(1.01)  rotate(-0.5deg); }
80%       { transform: scale(1.01)  rotate(0.5deg);  }
}
.pcp-place-order-btn.pcp-shaking { animation: pcpShake 0.5s ease-in-out; }

/* ===========================================================================
   Header  (drag handle + title–close row)
   =========================================================================== */
.pcp-popup-header {
flex-shrink: 0;
padding: 10px 0 0;
}

.pcp-drag-handle {
width: 36px;
height: 4px;
background: #d1d5db;
border-radius: 2px;
margin: 0 auto 10px;
}

.pcp-popup-header-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px 12px;
border-bottom: 1px solid var(--pcp-border);
}

.pcp-popup-title {
font-size: var(--pcp-font-checkout-heading, 15px);
font-weight: 600;
color: var(--pcp-text);
margin: 0;
line-height: 1.4;
}

.pcp-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
color: var(--pcp-muted);
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.pcp-close-btn:hover { background: var(--pcp-surface); color: var(--pcp-text); }

/* ===========================================================================
   Scrollable Body
   =========================================================================== */
.pcp-popup-body {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.pcp-popup-body::-webkit-scrollbar        { width: 4px; }
.pcp-popup-body::-webkit-scrollbar-track  { background: transparent; }
.pcp-popup-body::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 2px; }

.pcp-checkout-form {
display: flex;
flex-direction: column;
gap: 14px;
}

/* ===========================================================================
   Section Cards — each section is a distinct card with a coloured background.
   Scoped under .pcp-popup-panel to guarantee higher specificity than any
   WooCommerce / theme stylesheet that might target generic form child elements.
   =========================================================================== */
.pcp-popup-panel .pcp-section {
border: var(--pcp-section-border-width, 1px) solid var(--pcp-section-border-color, #e5e7eb);
border-radius: 12px;
padding: 14px;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.pcp-popup-panel .pcp-product-summary-section { background: var(--pcp-section-product-bg,  #f0fdf4); }
.pcp-popup-panel .pcp-billing-form-section    { background: var(--pcp-section-billing-bg,   #eff6ff); }
.pcp-popup-panel .pcp-shipping-section        { background: var(--pcp-section-delivery-bg,  #fff7ed); }
.pcp-popup-panel .pcp-order-bump-section      { background: var(--pcp-section-bump-bg,      #fef3c7); }
.pcp-popup-panel .pcp-payment-section         { background: var(--pcp-section-payment-bg,   #f5f3ff); }

/* ===========================================================================
   Product Summary Card
   =========================================================================== */
.pcp-product-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 0;
background: transparent;
}

.pcp-product-image-wrap { flex-shrink: 0; }
.pcp-product-image {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 8px;
display: block;
}

.pcp-product-info { flex: 1; min-width: 0; }
.pcp-product-name {
font-size: 13px;
font-weight: 500;
color: var(--pcp-text);
margin: 0 0 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pcp-product-unit-price { font-size: 12px; color: var(--pcp-muted); }

/* Compact inline stepper */
.pcp-qty-stepper {
display: flex;
align-items: center;
border: 1.5px solid var(--pcp-border);
border-radius: 8px;
background: #ffffff;
overflow: hidden;
flex-shrink: 0;
}
.pcp-qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
font-size: 16px;
line-height: 1;
background: transparent;
border: none;
cursor: pointer;
color: var(--pcp-muted);
transition: background 0.15s, color 0.15s;
}
.pcp-qty-btn:hover { background: var(--pcp-surface); color: var(--pcp-text); }
.pcp-qty-loading {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
.pcp-qty-input {
width: 36px;
text-align: center;
height: 30px;
border: none;
border-left: 1.5px solid var(--pcp-border);
border-right: 1.5px solid var(--pcp-border);
font-size: 13px;
font-weight: 500;
color: var(--pcp-text);
background: transparent;
-moz-appearance: textfield;
appearance: textfield;
}
.pcp-qty-input:focus { outline: none; }
.pcp-qty-input::-webkit-inner-spin-button,
.pcp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* ===========================================================================
   Cart Items (multi-item cart inside the Order Summary section)
   =========================================================================== */
.pcp-cart-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #F3F4F6;
}
.pcp-cart-item:last-child { border-bottom: none; }

.pcp-cart-item__image {
flex-shrink: 0;
width: 52px;
height: 52px;
}
.pcp-cart-item__image img {
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 8px;
border: 1px solid #E5E7EB;
display: block;
}
.pcp-cart-item__no-image {
width: 52px;
height: 52px;
border-radius: 8px;
background: #F3F4F6;
}

.pcp-cart-item__details {
flex: 1;
min-width: 0;
}
.pcp-cart-item__name {
font-size: 13px;
font-weight: 600;
color: #111827;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pcp-cart-item__variation {
font-size: 11px;
color: #9CA3AF;
margin-top: 2px;
}

.pcp-cart-item__price {
flex-shrink: 0;
font-size: 14px;
font-weight: 700;
color: var(--pcp-button-color);
text-align: right;
}

.pcp-cart-item__qty-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
}

/* Cart item qty +/- buttons (distinct from the single-product stepper) */
.pcp-cart-item .pcp-qty-btn {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #E5E7EB;
background: #F9FAFB;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: #374151;
flex-shrink: 0;
}
.pcp-cart-item .pcp-qty-btn:hover { background: #E5E7EB; }

.pcp-qty-value {
font-size: 13px;
font-weight: 600;
min-width: 20px;
text-align: center;
}

/* Remove button — small and unobtrusive */
.pcp-remove-item {
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: transparent;
color: #9CA3AF;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin-left: 2px;
flex-shrink: 0;
line-height: 1;
}
.pcp-remove-item:hover {
background: #FEE2E2;
color: #EF4444;
}

/* ===========================================================================
   Section Titles
   =========================================================================== */
.pcp-section-title {
font-size: var(--pcp-font-section-heading, 14px);
font-weight: 700;
color: var(--pcp-section-heading-color, #111827);
margin: 0 0 12px;
}
.pcp-section-icon {
display: inline-block;
margin-right: 6px;
vertical-align: middle;
line-height: 1;
}
/* Hide the quantity badge next to the cart section heading */
#pcp-popup-item-count { display: none !important; }

/* Body / paragraph text — product name, gateway titles, general readable text */
.pcp-popup-panel .pcp-product-name,
.pcp-popup-panel .pcp-gateway-title,
.pcp-popup-panel .pcp-shipping-title,
.pcp-popup-panel .pcp-bump-headline { font-size: var(--pcp-font-body, 13px); }

/* ===========================================================================
   Billing Form
   =========================================================================== */
.pcp-billing-form {
display: flex;
flex-direction: column;
gap: 10px;
}

.pcp-field-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.pcp-field-group label {
font-size: var(--pcp-font-field-label, 13px);
font-weight: 600;
color: #111827;
}
.pcp-field-group input[type="text"],
.pcp-field-group input[type="email"],
.pcp-field-group input[type="tel"],
.pcp-field-group input[type="number"],
.pcp-field-group input[type="search"],
.pcp-field-group textarea,
.pcp-field-group select {
width: 100%;
padding: 10px 12px;
border: 1.5px solid var(--pcp-border);
border-radius: 8px;
font-size: 14px;
color: #111827;
background: #ffffff;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
-moz-appearance: textfield;
appearance: none;
}
/* Remove Chrome/Safari number spinners */
.pcp-field-group input[type="number"]::-webkit-inner-spin-button,
.pcp-field-group input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Remove Chrome/Safari spinners on tel inputs */
.pcp-field-group input[type="tel"]::-webkit-inner-spin-button,
.pcp-field-group input[type="tel"]::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
/* Remove IE/Edge reveal button on tel */
.pcp-field-group input[type="tel"]::-ms-reveal,
.pcp-field-group input[type="tel"]::-ms-clear { display: none; }
.pcp-field-group input:focus,
.pcp-field-group textarea:focus,
.pcp-field-group select:focus {
outline: none;
border-color: var(--pcp-button-color);
/* Fallback for Safari <=16.1, FF <=112 */
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcp-button-color) 12%, transparent);
}
.pcp-field-group textarea { resize: vertical; min-height: 72px; }
.pcp-field-group input.pcp-field-error { border-color: #ef4444; }
.pcp-field-error-msg { font-size: 11px; color: #ef4444; }

.pcp-field-checkbox-wrap {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 6px 0;
}
.pcp-field-checkbox-wrap input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
flex-shrink: 0;
accent-color: var(--pcp-button-color);
}

/* ===========================================================================
   Order Bumps — multi-card layout
   =========================================================================== */

/* Wrapper stacks cards vertically with a gap */
.pcp-order-bumps-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual bump card */
.pcp-order-bump-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px dashed var(--pcp-button-color);
  border-radius: 12px;
  background: rgba(22, 163, 74, 0.04);
  background: color-mix(in srgb, var(--pcp-button-color) 4%, white);
  transition: border-style 0.15s, background 0.15s;
}

/* Selected state — solid border + slightly deeper tint */
.pcp-order-bump-card.pcp-bump-card--selected,
.pcp-order-bump-card[data-selected="true"] {
  border-style: solid;
  background: color-mix(in srgb, var(--pcp-button-color) 10%, white);
}

/* Product thumbnail */
.pcp-bump-image {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Text copy block */
.pcp-bump-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcp-bump-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--pcp-text);
  display: block;
}

.pcp-bump-description {
  font-size: 12px;
  color: var(--pcp-muted);
  display: block;
}

.pcp-bump-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--pcp-button-color);
}

/* Toggle button — full-width on narrow, auto on wider */
.pcp-bump-toggle-btn {
  display: block;
  flex-shrink: 0;
  padding: 7px 12px;
  border: 1.5px solid var(--pcp-button-color);
  border-radius: 8px;
  background: transparent;
  color: var(--pcp-button-color);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  line-height: 1.3;
}

.pcp-bump-toggle-btn:hover {
  background: var(--pcp-button-color);
  color: #ffffff;
}

/* Selected state — filled button */
.pcp-order-bump-card[data-selected="true"] .pcp-bump-toggle-btn,
.pcp-order-bump-card.pcp-bump-card--selected .pcp-bump-toggle-btn {
  background: var(--pcp-button-color);
  color: #ffffff;
}

.pcp-order-bump-card[data-selected="true"] .pcp-bump-toggle-btn:hover,
.pcp-order-bump-card.pcp-bump-card--selected .pcp-bump-toggle-btn:hover {
  opacity: 0.85;
}

/* Stack image + copy above button on very narrow screens */
@media (max-width: 360px) {
  .pcp-order-bump-card {
    flex-wrap: wrap;
  }
  .pcp-bump-toggle-btn {
    width: 100%;
    text-align: center;
  }
}

/* ===========================================================================
   Payment Methods
   =========================================================================== */
.pcp-gateway-list { display: flex; flex-direction: column; gap: 8px; }
.pcp-gateway-item { display: flex; flex-direction: column; }

.pcp-gateway-card {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 11px 14px;
border: 1.5px solid var(--pcp-border);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
background: #ffffff;
text-align: left;
width: 100%;
box-sizing: border-box;
}
.pcp-gateway-card:hover { border-color: #9ca3af; }
.pcp-gateway-card.pcp-gateway-selected {
border-color: var(--pcp-button-color);
background: rgba(22, 163, 74, 0.04);
background: color-mix(in srgb, var(--pcp-button-color) 4%, white);
}

/* Hide native radio; card border is the selection indicator */
.pcp-gateway-card input[type="radio"] { display: none; }

/* Custom radio dot */
.pcp-gateway-radio-dot {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid var(--pcp-border);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s;
}
.pcp-gateway-selected .pcp-gateway-radio-dot { border-color: var(--pcp-button-color); }
.pcp-gateway-selected .pcp-gateway-radio-dot::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pcp-button-color);
}

/* Selected state — new BEM class used by rewritten renderPaymentGateways() */
.pcp-gateway-card--selected {
border-color: var(--pcp-button-color);
background: rgba(22, 163, 74, 0.04);
background: color-mix(in srgb, var(--pcp-button-color) 4%, white);
}
/* Custom radio circle — new name used by rewritten renderPaymentGateways() */
.pcp-radio-circle {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid var(--pcp-border);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s;
}
.pcp-radio-circle--checked { border-color: var(--pcp-button-color); }
.pcp-radio-circle--checked::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pcp-button-color);
}
/* Gateway info container (title only), takes remaining row space */
.pcp-gateway-card__info { flex: 1; min-width: 0; }
.pcp-gateway-card__title { font-size: 13px; font-weight: 500; color: var(--pcp-text); }
/* Fields panel occupies a full second row inside the flex card */
.pcp-gateway-card > .pcp-gateway-fields-panel {
flex: 0 0 100%;
width: 100%;
}

/* Gateway icon container — fixed bounding box, overflow hidden clips oversized images */
.pcp-gateway-icon {
flex-shrink: 0;
flex-grow: 0;
width: 52px;
height: 32px;
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
}
/* Force ALL images inside gateway list to be small.
   !important overrides WooCommerce inline width/height/style attributes. */
#pcp-gateway-list img,
#pcp-gateway-list .pcp-gateway-icon img,
.pcp-gateway-card img,
.pcp-gateway-icon img {
max-width: 52px !important;
max-height: 32px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.pcp-gateway-title { font-size: 13px; font-weight: 500; color: var(--pcp-text); flex: 1; }
.pcp-gateway-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
background: var(--pcp-surface);
color: var(--pcp-muted);
white-space: nowrap;
}

/* Gateway's own payment form (e.g. bKash phone number) */
.pcp-gateway-fields {
margin-top: 6px;
padding: 12px;
background: var(--pcp-muted-bg);
border: 1.5px solid var(--pcp-border);
border-radius: 8px;
font-size: 13px;
}
.pcp-gateway-fields input[type="text"],
.pcp-gateway-fields input[type="tel"],
.pcp-gateway-fields input[type="number"],
.pcp-gateway-fields input[type="email"],
.pcp-gateway-fields input[type="password"],
.pcp-gateway-fields select,
.pcp-gateway-fields textarea {
width: 100%;
box-sizing: border-box;
padding: 9px 11px;
border: 1.5px solid var(--pcp-border);
border-radius: 7px;
font-size: 13px;
margin-top: 4px;
background: #ffffff;
}
.pcp-gateway-fields input:focus,
.pcp-gateway-fields select:focus,
.pcp-gateway-fields textarea:focus { outline: none; border-color: var(--pcp-button-color); }
.pcp-gateway-fields label { font-size: 12px; font-weight: 500; color: #374151; }

.pcp-gateway-description {
margin-top: 8px;
padding: 14px;
background: #F9FAFB;
border-radius: 10px;
border: 1px solid #E5E7EB;
font-size: 13px;
color: #374151;
line-height: 1.6;
display: none; /* shown by JS when a gateway is selected */
}

/* Inputs inside gateway payment forms (e.g. bKash number, transaction ID) */
.pcp-gateway-description input[type="text"],
.pcp-gateway-description input[type="tel"],
.pcp-gateway-description input[type="number"],
.pcp-gateway-description input[type="email"],
.pcp-gateway-description textarea,
.pcp-gateway-description select {
width: 100%;
height: 42px;
border: 1.5px solid #E5E7EB;
border-radius: 8px;
padding: 0 12px;
font-size: 13px;
font-family: inherit;
color: #111827;
background: white;
box-sizing: border-box;
margin-top: 6px;
outline: none;
}
.pcp-gateway-description textarea { height: auto; min-height: 72px; padding: 10px 12px; }
.pcp-gateway-description input:focus,
.pcp-gateway-description textarea:focus,
.pcp-gateway-description select:focus {
border-color: var(--pcp-button-color);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcp-button-color) 12%, transparent);
}
.pcp-gateway-description label {
font-size: 12px;
font-weight: 600;
color: #374151;
display: block;
margin-top: 10px;
margin-bottom: 4px;
}
.pcp-gateway-description p { margin: 0 0 8px 0; }
.pcp-gateway-description p:last-child { margin-bottom: 0; }

/* Per-card payment instructions panel — rendered inline below its gateway card */
.pcp-gateway-fields-panel {
display: none; /* JS sets display:block when the card is selected */
flex: 0 0 100%;
width: 100%;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #E5E7EB;
font-size: 13px;
color: #374151;
line-height: 1.6;
}
.pcp-gateway-fields-panel p {
margin: 0 0 8px 0;
font-size: 13px;
color: #6B7280;
}
.pcp-gateway-fields-panel p:last-child { margin-bottom: 0; }
.pcp-gateway-fields-panel input[type="text"],
.pcp-gateway-fields-panel input[type="tel"],
.pcp-gateway-fields-panel input[type="number"],
.pcp-gateway-fields-panel input[type="email"],
.pcp-gateway-fields-panel textarea,
.pcp-gateway-fields-panel select {
width: 100%;
height: 42px;
border: 1.5px solid #E5E7EB;
border-radius: 8px;
padding: 0 12px;
font-size: 13px;
font-family: inherit;
color: #111827;
background: white;
box-sizing: border-box;
margin-top: 4px;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.pcp-gateway-fields-panel textarea { height: auto; min-height: 72px; padding: 10px 12px; }
.pcp-gateway-fields-panel input:focus,
.pcp-gateway-fields-panel textarea:focus,
.pcp-gateway-fields-panel select:focus {
border-color: var(--pcp-button-color);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcp-button-color) 12%, transparent);
}
.pcp-gateway-fields-panel label {
font-size: 12px;
font-weight: 600;
color: #374151;
display: block;
margin-top: 10px;
margin-bottom: 4px;
}
.pcp-gateway-fields-panel label:first-child { margin-top: 0; }

/* ===========================================================================
   Shipping / Delivery Methods
   =========================================================================== */
.pcp-shipping-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.pcp-shipping-item {
display: flex;
flex-direction: column;
}
.pcp-shipping-card {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border: 1.5px solid var(--pcp-border);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
background: #ffffff;
width: 100%;
box-sizing: border-box;
}
.pcp-shipping-card:hover {
border-color: #9ca3af;
}
.pcp-shipping-card.pcp-shipping-selected {
border-color: var(--pcp-button-color);
background: color-mix(in srgb, var(--pcp-button-color) 4%, white);
}
.pcp-shipping-card input[type="radio"] {
display: none;
}
.pcp-shipping-selected .pcp-gateway-radio-dot {
border-color: var(--pcp-button-color);
}
.pcp-shipping-selected .pcp-gateway-radio-dot::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pcp-button-color);
}
.pcp-shipping-title {
font-size: 13px;
font-weight: 500;
color: var(--pcp-text);
flex: 1;
}
.pcp-shipping-cost {
font-size: 13px;
font-weight: 600;
color: var(--pcp-text);
flex-shrink: 0;
}
.pcp-shipping-free {
font-size: 12px;
font-weight: 600;
color: var(--pcp-button-color);
background: color-mix(in srgb, var(--pcp-button-color) 8%, white);
padding: 2px 8px;
border-radius: 20px;
}
.pcp-shipping-hint {
font-size: 12px;
color: #F97316;
margin-top: 8px;
text-align: center;
font-weight: 500;
}

/* ===========================================================================
   Sticky Footer  (total row + CTA button)
   =========================================================================== */
.pcp-popup-footer {
flex-shrink: 0;
border-top: 1px solid var(--pcp-border);
padding: 10px 16px 8px;
background: #ffffff;
}

/* Totals breakdown rows inside the Order Summary section */
.pcp-total-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid #F3F4F6;
font-size: 13px;
color: #374151;
}
.pcp-total-row:last-child { border-bottom: none; }
.pcp-total-row--grand {
font-size: 14px;
font-weight: 700;
color: #111827;
padding-top: 10px;
border-top: 2px solid #E5E7EB;
border-bottom: none;
margin-top: 4px;
}

.pcp-footer-total-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 14px 0;
border-top: 1px solid #F3F4F6;
margin-bottom: 10px;
}
.pcp-footer-total-label  { font-size: 15px; font-weight: 700; color: #111827; }
.pcp-footer-total-amount { font-size: 20px; font-weight: 800; color: var(--pcp-button-color); }

.pcp-footer-shipping-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom: 1px dashed var(--pcp-border);
}
.pcp-footer-shipping-label  { font-size: 12px; color: var(--pcp-muted); }
.pcp-footer-shipping-amount { font-size: 13px; font-weight: 500; color: var(--pcp-text); }

.pcp-place-order-btn {
width: 100%;
padding: 14px 20px;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: var(--pcp-button-weight);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: filter 0.2s, transform 0.1s;
-webkit-appearance: none;
appearance: none;
line-height: 1.4;
}
.pcp-place-order-btn:hover  { filter: brightness(1.06); }
.pcp-place-order-btn:active { transform: scale(0.98); }
.pcp-place-order-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pcp-btn-arrow { flex-shrink: 0; }

.pcp-secure-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 11px;
color: #9ca3af;
margin-top: 4px;
margin-bottom: 0;
text-align: center;
}

/* ===========================================================================
   Loading State
   =========================================================================== */
.pcp-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px;
gap: 14px;
}
.pcp-spinner {
width: 36px;
height: 36px;
border: 3px solid var(--pcp-surface);
border-top-color: var(--pcp-button-color);
border-radius: 50%;
animation: pcpSpin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes pcpSpin { to { transform: rotate(360deg); } }
@keyframes pcp-spin { to { transform: rotate(360deg); } }
.pcp-loading-text { font-size: 14px; color: var(--pcp-muted); margin: 0; }

/* Panel loading state — hide form content, reveal spinner */
.pcp-popup--loading #pcp-checkout-form { visibility: hidden; }
.pcp-popup--loading #pcp-loading { display: flex !important; }

/* ===========================================================================
   Notices
   =========================================================================== */
.pcp-notice { padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.pcp-notice-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.pcp-notice-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* ===========================================================================
   Redirect Screen
   =========================================================================== */
.pcp-redirect-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px;
gap: 14px;
text-align: center;
font-size: 14px;
color: var(--pcp-text);
}

/* ===========================================================================
   Success Screen
   =========================================================================== */
.pcp-success-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px;
gap: 8px;
text-align: center;
}
.pcp-success-icon  { color: #16a34a; margin-bottom: 6px; }
.pcp-success-title { font-size: 18px; font-weight: 700; color: var(--pcp-text); margin: 0; }
.pcp-success-order { font-size: 13px; color: var(--pcp-muted); margin: 0; }
.pcp-success-msg   { font-size: 13px; color: var(--pcp-muted); margin: 0; }
.pcp-success-redirect { font-size: 12px; color: var(--pcp-muted); margin: 12px 0 0 0; font-style: italic; animation: pulse-fade 1s ease-in-out infinite; }

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

/* ===========================================================================
   Payment Iframe
   =========================================================================== */
.pcp-payment-frame-wrap { padding: 16px; }
.pcp-payment-frame-wrap iframe { width: 100%; min-height: 400px; border: none; border-radius: 10px; }

/* ===========================================================================
   Mobile Full-Screen
   =========================================================================== */
/* High-specificity override — ensures tel/number inputs beat WooCommerce/theme rules */
#pcp-popup .pcp-field-group input[type="tel"],
#pcp-popup .pcp-field-group input[type="number"] {
border: 1.5px solid var(--pcp-border) !important;
outline: none !important;
box-shadow: none !important;
background: #ffffff !important;
padding: 10px 12px !important;
font-size: 14px !important;
-webkit-appearance: none !important;
-moz-appearance: textfield !important;
}

@media (max-width: 480px) {
.pcp-popup-panel.pcp-mobile-fullscreen {
max-height: calc(100vh - 56px);
}
}

/* ── Coupon Section ───────────────────────────── */
.pcp-coupon-section {
   padding: 12px 16px;
   border-top: 1px solid var(--pcp-section-border-color, #e5e7eb);
}

.pcp-coupon-label {
   font-size: var(--pcp-font-field-label, 13px);
   font-weight: 600;
   margin: 0 0 8px;
   color: inherit;
}

.pcp-coupon-input-row {
   display: flex;
   gap: 8px;
   align-items: center;
}

.pcp-coupon-code-input {
   flex: 1;
   height: 38px;
   padding: 0 10px;
   border: 1px solid var(--pcp-section-border-color, #d1d5db);
   border-radius: 6px;
   font-size: var(--pcp-font-body, 13px);
   outline: none;
   transition: border-color 0.2s;
}

.pcp-coupon-code-input:focus {
   border-color: var(--pcp-button-color, #3b82f6);
}

.pcp-coupon-btn {
   height: 38px;
   padding: 0 14px;
   border: none;
   border-radius: 6px;
   background: var(--pcp-button-color, #3b82f6);
   color: var(--pcp-button-text, #ffffff);
   font-size: var(--pcp-font-body, 13px);
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.2s;
   white-space: nowrap;
}

.pcp-coupon-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

.pcp-coupon-message {
   margin-top: 6px;
   font-size: 12px;
   font-weight: 500;
}

.pcp-applied-coupons {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 8px;
}

.pcp-coupon-tag {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   background: color-mix(in srgb, var(--pcp-coupon-success-color, #22c55e) 12%, white);
   border: 1px solid var(--pcp-coupon-success-color, #22c55e);
   border-radius: 20px;
   padding: 2px 10px 2px 8px;
   font-size: 12px;
   color: var(--pcp-coupon-success-color, #22c55e);
   font-weight: 600;
}

.pcp-coupon-tag-code {
   letter-spacing: 0.04em;
}

.pcp-coupon-remove-btn {
   background: none;
   border: none;
   cursor: pointer;
   color: var(--pcp-coupon-success-color, #22c55e);
   font-size: 16px;
   line-height: 1;
   padding: 0;
   margin-left: 2px;
}