/* =============================================================
   /css/cartstyles.css
   Cart modal - 2-step flow
   Step 1: Cart Review + Express Checkout
   Step 2: Address + Payment
   ============================================================= */

/* Overlay - z-index: 9996 */
.sbo-cart-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 100);
        z-index: 9996;
}

.sbo-cart-overlay.active {
        display: block;
}

/* Modal - z-index: 9998 */
.sbo-cart-modal {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        max-width: 37.5rem;
        margin-left: auto;
        margin-right: auto;
        height: var(--sbo-modal-h);
        grid-template-rows: 1fr auto;
        background: #ffffff;
        border-bottom-left-radius: 1.375rem;
        border-bottom-right-radius: 1.375rem;
        box-shadow: 0 8px 8px rgba(0, 0, 0, 0.35);
        z-index: 9998;
        transition: transform 0.4s ease, opacity 0.4s ease;
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.sbo-cart-modal.active {
        display: grid;
        transform: translateY(0);
}

/* Header */
.sbo-cart-header {
        padding: 0.15rem 0.15rem 0.25rem 0.1rem;
        background: #ffffff;
        text-align: left;
        position: relative;
}

/* Progress bar: step1=50% step2=100% */
.sbo-cart-progress {
        height: 0.3rem;
        background: #cdf6cd;
}

.sbo-cart-progress-fill {
        height: 0.3rem;
        background: #66cc66;
        border-radius: 0 0.35rem 0.35rem 0;
        transition: width 0.4s ease;
}

.sbo-cart-progress-step1 { width: 50%; }
.sbo-cart-progress-step2 { width: 100%; }

.sbo-addlinker {
        background: #0066ff;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 5px;
        font-size: 1.2rem;
        font-weight: 600;
        color: #ffffff;
        display: inline-block;
        text-decoration: none;
        text-align: center;
        vertical-align: middle;
        position: relative;
        top: -2px;
        box-shadow: 0 3px 3px rgba(0,0,0,0.15);
}

.sbo-cart-title {
        font-size: 1.85rem;
        font-weight: 600;
        color: #333333;
        text-align: left;
        margin: 0;
}

/* How to order toggle */
.sbo-cart-howto-toggle {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        font-size: 0.75rem;
        margin: 1.05rem 0 0.65rem 0;
}

.sbo-cart-howto-nav {
        display: block;
        white-space: nowrap;
        text-align: right;
        padding-right: 0.6rem;
}

.sbo-cart-howto-toggle-btn {
        display: inline;
        margin-left: 1.375rem;
        color: #0066ff;
        text-decoration: none;

        font-size: 0.75rem;
        font-family: inherit;
        background: none;
        border: none;
        padding: 0;
}

.sbo-cart-hdr-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        font-size: 0.78rem;
        padding: 0.15rem 0.5rem;
        color: #333333;
}

.sbo-cart-hdr-label {
        font-weight: 400;
		font-size: 0.95rem;
}

.sbo-cart-hdr-promo {
        font-size: 0.72rem;
        color: #0066ff;
        font-weight: 400;
        margin-left: 0.3rem;
}

.sbo-cart-hdr-value {
        text-align: right;
        font-variant-numeric: tabular-nums;
        color: #333333;
        min-width: 5.5rem;
        white-space: nowrap;
        font-size: 1rem;
}

.sbo-cart-hdr-total {
        border-top: 1px solid #e0e0e0;
        margin-top: 0.2rem;
        padding-top: 0.3rem;
}

.sbo-cart-hdr-total .sbo-cart-hdr-label {
        font-size: 1rem;
}


.sbo-cart-quote-date {
        color: #333333;
        text-align: left;
}

.sbo-cart-howto-label {
        color: #0066ff;
        text-align: right;
}

.sbo-cart-howto {
        background: #ffffff;
        margin: 0.5rem 0 0.25rem 0;
        text-align: left;
        padding-bottom: 0.15rem;
}

.sbo-cart-howto-list {
        margin: 0.35rem 0 0.85rem 0;
        padding-left: 1.25rem;
        font-size: 0.85rem;
        color: #333333;
}

.sbo-cart-howto-list li {
        margin-bottom: 0.3rem;
        line-height: 1.4;
}

.sbo-cart-howto-footer {
        font-size: 1rem;
        color: #333333;
        margin: 0 0 1.25rem 0;
        text-align: center;
}

/* Content (scrollable) */
.sbo-cart-content {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.05rem 1rem 7.5rem 1rem;
        box-sizing: border-box;
}

/* Empty state */
.sbo-cart-empty {
        text-align: center;
        padding: 2rem 1rem;
        color: #888888;
        font-size: 1rem;
}

.sbo-cart-empty p {
        margin: 0;
}

/* Step panels */
.sbo-cart-step {
        width: 100%;
        box-sizing: border-box;
        display: none;
}

.sbo-cart-step.active {
        display: block;
}

/* Cart Review Title + Total (mirrors calcincluder.php pattern) */
.sbo-cart-title-review {
    position: sticky;
    top: -1px;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin: 0;
    padding: 0 0 0.9rem 0;
    border-bottom: 4px solid #c40000;
    
    z-index: 999999 !important;
    transform: translate3d(0,0,0);
}

.sbo-cart-title-addmore {
        font-size: 0.9rem;
        font-weight: 400;
        padding-left: 0.5rem;
        margin: 0.8rem 0 0.45rem 0;
        text-align: left;
}

.sbo-cart-title-text {
        font-size: 0.9rem;
        font-weight: 400;
        color: #0066ff;
        padding-right: 0.5rem;
        margin: 0.8rem 0 0.45rem 0;
        text-align: right;
}

.sbo-cart-title-price {
        text-align: right;
}

.sbo-cart-price-value {
        font-size: 1.45rem;
        font-weight: 600;
        color: #333333;
}

/* Line items list */
.sbo-cart-items {
        margin-bottom: 1rem;
        display: none;
}

.sbo-cart-items.active {
        display: block;
        padding-top: 2rem;
}

/* Grid: [X remove] [name + controls + video] */
.sbo-cart-item {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        display: grid;
        grid-template-columns: 2rem 1fr;
        grid-template-rows: auto auto auto;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;
}

/* Remove button */
.sbo-cart-item-remove {
        grid-column: 1;
        display: grid;
        align-items: center;
        justify-items: center;
        min-height: 44px;
        width: 2rem;
        background: none;
        border: none;
        color: #d9afb2;
        font-size: 1.8rem;

        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        align-self: start;
        padding-top: 0.25rem;
        margin-top: -6px;
}

/* Name */
.sbo-cart-item-name {
        grid-column: 2;
        grid-row: 1;
        font-size: 1.65rem;
        font-weight: 600;
        color: #333333;
        padding: 0.6rem 0.75rem 0.25rem 0.75rem;
        line-height: 1.3;
}

/* Design label row */
.sbo-cart-item-label-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        margin-bottom: 0.4rem;
}

.sbo-cart-item-label {
        font-size: 0.85rem;
        color: #333333;
        font-weight: 400;
        margin: 0 0 0.2rem -0.9rem;
}

.sbo-cart-item-details-toggle {
        font-size: 0.75rem;
        color: #0066ff;

        background: none;
        border: none;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        text-align: right;
        min-height: 44px;
        display: grid;
        align-items: center;
        margin: -0.9rem 0 0 0;
}

/* Video panel */
.sbo-cart-item-video {
        grid-column: 2;
        grid-row: 3;
        display: none;
        padding: 0 0.75rem 0.75rem 0.75rem;
}

.sbo-cart-item-video.active {
        display: block;
}

.sbo-cart-item-video video {
        width: 100%;
        display: block;
        border-radius: 0.375rem;
}

/* Controls (copies + price) */
.sbo-cart-item-controls {
        grid-column: 2;
        grid-row: 2;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 0.75rem;
        padding: 0 0.75rem 0.6rem 0.75rem;
}

/* Copies stepper */
.sbo-cart-item-copies {
        display: grid;
        grid-template-columns: 44px 50px 44px;
        min-width: 138px;
        align-items: center;
        background: #ffffff;
        border: 2px solid #dfdfdf;
        border-radius: 0.5rem;
        overflow: hidden;
}

.sbo-cart-copies-btn {
        width: 44px;
        height: 44px;
        background: #f2f2f2;
        border: none;
        font-size: 1.4rem;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.sbo-cart-copies-btn:active {
        background: #f0f0f0;
}

.sbo-cart-copies-btn.disabled {
        color: #cccccc;
}

.sbo-cart-copies-display {
        width: 100%;
        text-align: center;
        font-size: 1.15rem;
        font-weight: 600;
        color: #333333;
        background: #ffffff;
        border-left: 1px solid #dfdfdf;
        border-right: 1px solid #dfdfdf;
        line-height: 44px;
        user-select: none;
}

/* Item price */
.sbo-cart-item-price {
        font-size: 1.65rem;
        font-weight: 600;
        color: #333;
        text-align: right;
}

/* Express Checkout Section */
.sbo-cart-express-wrap {
        margin: 1rem 0;
}

.sbo-cart-express-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #333333;
        margin: 1.15rem 0 0.65rem 0;
        text-align: center;

}

.sbo-cart-express-buttons {
    display: grid;
    grid-template-columns: 1fr; /* Changed from 1fr 1fr to center the card button */
    gap: 1.25rem;
    width: 85%;
    min-width: 18.75rem;
    max-width: 31.25rem;
    text-align: center;
    margin: 0.3rem auto;
}

.sbo-cart-express-btn {
        padding: 0.6rem 1rem 0.35rem 1rem;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        margin-top: 0.3rem;
        box-sizing: border-box;
        text-decoration: none;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.sbo-cart-express-paypal-btn {
  padding: 0.25rem 1rem 0.55rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;

  font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.sbo-cart-express-paypal {
    background: #0070ba;
    color: #ffffff;
    font-weight: 600;
    display: block;
    width: 85%;
    min-width: min(18.75rem, 100%);
    max-width: 31.25rem;
    margin: 0.3rem auto;
    text-align: center;
}

.sbo-cart-express-gpay {
    background: #333333;
    color: #ffffff;
    font-weight: 600;
    display: block;
    width: 85%;
    min-width: 18.75rem;
    max-width: 31.25rem;
    margin: 0.3rem auto;
    text-align: center;
}

.sbo-cart-gpay-text {
    display: inline-block;
    font-size: 1.32rem;
    letter-spacing: 0.03rem;
    font-weight: 600;
    margin-bottom: 0.33rem;
    margin-top: -0.12rem;
}

.sbo-cart-paypal-text {
    transform: skewX(-6deg);
    display: inline-block;
    font-size: 1.32rem;
    letter-spacing: 0.03rem;
    font-weight: 600;
    margin-bottom: 0.33rem;
    margin-top: -0.12rem;
}
.sbo-cart-express-card {
    text-align: center;
    line-height: 1.4;
    padding: 0.75rem 0.5rem;
}

.sbo-btn-icon {
    display: inline-block;
    vertical-align: middle;
    height: auto;
    max-height: 28px;
    width: auto;
    margin-right: 0.4rem;
    margin-bottom: 0.25rem;
    margin-left: -1rem;
}

.sbo-btn-text {
    display: inline-block;
    vertical-align: middle;
        margin: 0 0 2px 0;
}
.sbo-cart-express-card {
        background: #e2e2e2;
        color: #333333;
}

.sbo-cart-express-divider {
        text-align: center;
        color: #888888;
        font-size: 0.9rem;
        margin: 0;
}

/* Step 2: Order Summary (collapsible) */
.sbo-cart-order-summary {
        margin-bottom: 1rem;
}

.sbo-cart-summary-toggle {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        margin: 0 0 0.5rem 0;
        padding: 0;

        font-weight: 600;
}

.sbo-cart-summary-label-text {
        font-size: 1rem;
        color: #0066ff;
}

.sbo-cart-summary-total-wrap {
        display: grid;
        grid-template-columns: auto auto;
        gap: 0.75rem;
        align-items: center;
        text-align: right;
}

.sbo-cart-summary-count {
        font-size: 0.85rem;
        color: #666666;
}

.sbo-cart-summary-total {
        font-size: 1.45rem;
        font-weight: 600;
        color: #df0911;
}

.sbo-cart-summary-items {
        background: #f9f9f9;
        border: 1px solid #e0e0e0;
        border-radius: 0.5rem;
        padding: 0.75rem;
}

.sbo-cart-summary-item {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 0.75rem;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #e0e0e0;
        font-size: 0.85rem;
}

.sbo-cart-summary-item:last-child {
        border-bottom: none;
}

.sbo-cart-summary-item-name {
        color: #333333;
        font-weight: 600;
}

.sbo-cart-summary-item-copies {
        color: #666666;
        text-align: right;
        min-width: 3rem;
}

.sbo-cart-summary-item-price {
        color: #df0911;
        font-weight: 600;
        text-align: right;
        min-width: 4rem;
}
.sbo-cart-item-description {
        font-size: 1.15rem;
        font-weight: 600;
        color: #333;
        display: block;
        margin: -0.5rem 0 1rem -2rem;
}
.sbo-cart-item-gst {
        font-size: 0.85rem;
        font-weight: 400;
        color: #666666;
        text-align: right;
        padding: 0.45rem 0 0.25rem 0;
}
/* Spinner */
.sbo-cart-spinner {
        position: absolute;
        right: calc(1rem + 24px + 12px);
        top: 1rem;
        width: 1.5rem;
        height: 1.5rem;
        z-index: 10001;
        pointer-events: none;
        visibility: hidden;
}

.sbo-cart-spinner.active {
        visibility: visible;
}

.sbo-cart-spinner-ring {
        width: 1.5rem;
        height: 1.5rem;
        border: 3px solid rgba(223, 9, 17, 0.2);
        border-top-color: #df0911;
        border-radius: 50%;
        animation: sboCartSpin 0.6s linear infinite;
        animation-play-state: paused;
}

.sbo-cart-spinner.active .sbo-cart-spinner-ring {
        animation-play-state: running;
}

@keyframes sboCartSpin {
        to { transform: rotate(360deg); }
}

/* Footer sticky */
.sbo-cart-footer {
        min-height: 3.25rem;
        background: #ffffff;
        border-top: 1px solid #e0e0e0;
        padding: 0.75rem 1.25rem 0.25rem 1.25rem;
        box-sizing: border-box;
}

.sbo-cart-footer-row {
        display: grid;
        grid-template-columns: 3rem 1fr 1fr;
        gap: 0.5rem;
        align-items: center;
}

.sbo-cart-nav-btn {
        min-height: 2.75rem;
        min-width: 44px;
        padding: 0.6rem 0.75rem;
        border: 1px solid #dfdfdf;
        border-radius: 0.5rem;
        background: #ffffff;
        color: #333333;
        font-size: 1rem;
        font-weight: 600;

        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        box-sizing: border-box;
}

.sbo-cart-nav-left {
        font-size: 1.25rem;
        color: #0066ff;
        border-color: #0066ff;
}

.sbo-cart-nav-share {
        font-size: 1.25rem;
        color: #0066ff;
        border-color: #0066ff;
}

.sbo-cart-nav-continue {
        background: #df0911;
        color: #ffffff;
        border-color: #df0911;
}

.sbo-cart-nav-continue:disabled,
.sbo-cart-nav-continue.disabled {
        background: #dfdfdf;
        color: #888888;
        border-color: #dfdfdf;

}

.sbo-cart-nav-wide {
        grid-column: 2 / 3;
}

#sbo-cart-footer-step2 {
        grid-template-columns: 3rem 1fr;
}

/* Share panel */
.sbo-cart-share-panel {
        border-top: 1px solid #e0e0e0;
        padding-bottom: 0.75rem;
}

.sbo-cart-share-inner {
        display: grid;
        gap: 0.5rem;
}

.sbo-cart-share-label {
        font-size: 0.8rem;
        color: #333333;
        font-weight: 600;
}

.sbo-cart-share-input,
.sbo-cart-share-textarea {
        width: 100%;
        padding: 0.6rem 0.75rem;
        border: 1px solid #dfdfdf;
        border-radius: 0.5rem;
        font-size: 0.9rem;
        color: #333333;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        background: #ffffff;
}

.sbo-cart-share-input:focus,
.sbo-cart-share-textarea:focus {
        outline: none;
        border-color: #044cc7;
}

.sbo-cart-share-input.invalid,
.sbo-cart-share-textarea.invalid {
        border-color: #df0911;
}

.sbo-cart-share-textarea {
        resize: none;
}

.sbo-cart-share-cancel {
        background: none;
        border: none;
        color: #0066ff;
        font-size: 0.85rem;

        text-align: center;
        padding: 0.25rem;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Security panel */
.sbo-cart-security {
        background: #f0faf0;
        border: 1px solid #a2c6a2;
        border-radius: 0.5rem;
        padding: 0.75rem 1rem 0.5rem 1rem;
        margin: 0 0 0.75rem 0;
}

.sbo-cart-security-list {
        margin: 0 0 0.5rem 0;
        padding-left: 1.25rem;
        font-size: 0.85rem;
        color: #333333;
}

.sbo-cart-security-list li {
        margin-bottom: 0.3rem;
        line-height: 1.4;
}

.sbo-cart-security-close {
        text-align: right;
        margin: 0;
        font-size: 0.8rem;
}

.sbo-cart-security-close a {
        color: #42a442;
}

/* Breadcrumb */
#sbo-cart-title-step2 .sbo-breadcrumb-products {
        display: none;
}

@media (min-width: 600px) {
        #sbo-cart-title-step2 .sbo-breadcrumb-products {
                display: inline;
        }
}

/* Form */
.sbo-cart-form {
        padding-bottom: 0.5rem;
}

.sbo-cart-field {
        margin-bottom: 0.6rem;
}

.sbo-cart-label {
        display: block;
        font-size: 1rem;
        font-weight: 600;
        color: #333333;
        margin-bottom: 0.2rem;
        padding-left: 0.5rem;
}

.sbo-cart-opt {
        color: #888888;
        font-weight: 400;
}

.sbo-cart-input {
        display: block;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid #dfdfdf;
        border-radius: 0.5rem;
        font-size: 1rem;
        color: #333333;
        background: #ffffff;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        -webkit-appearance: none;
}

.sbo-cart-input:focus {
        outline: none;
        border-color: #044cc7;
}

.sbo-cart-input.invalid {
        border-color: #df0911;
        box-shadow: 0 0 0 2px rgba(223, 9, 17, 0.15);
}

.sbo-cart-textarea {
        resize: none;
        min-height: 5rem;
}

/* Payment options */
.sbo-cart-payment-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
}

.sbo-cart-payment-opt {
        display: block;
        padding: 0.75rem 0.5rem;
        border: 1px solid #dfdfdf;
        border-radius: 0.5rem;
        font-size: 0.9rem;
        color: #333333;

        min-height: 44px;
        box-sizing: border-box;
        text-align: center;
        line-height: 2;
}

.sbo-cart-payment-opt input[type="radio"] {
        display: none;
}

.sbo-cart-payment-opt:has(input:checked) {
        color: #ffffff;
        background: #df0911;
        border-color: #df0911;
}


/* Small phone */
@media (max-width: 481px) {
        .sbo-cart-title {
                font-size: 1.75em;
        }

        .sbo-cart-item-name {
                font-size: 1.25rem !important;
        }

        .sbo-cart-item-price {
                font-size: 1.45rem;
        }
}

@media (max-width: 400px) {
        .sbo-cart-item-copies {
                grid-template-columns: 44px 26px 44px;
                min-width: 118px;
        }
}
/* =============================================================
   CARD PAYMENT PANEL - append to /css/cartstyles.css
   PayPal hosted card fields - inline disclosure
   Replaces express checkout section on #sbo-cart-card-btn tap
   ============================================================= */

/* Panel wrapper - replaces .sbo-cart-express-wrap content */
.sbo-card-panel {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0;
        background: #f8f8f8;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        transition: max-height 320ms ease, opacity 220ms ease, padding-top 320ms ease, padding-bottom 320ms ease, margin-top 320ms ease;
}

.sbo-card-panel.active {
        max-height: 1800px;
        overflow: visible;
        opacity: 1;
        padding-top: 1rem;
        padding-bottom: 1.25rem;
        margin-top: 0.75rem;
}

/* Back link */
.sbo-card-back {
        display: block;
        font-size: 0.85rem;
        color: #0066ff;
        background: none;
        border: none;
        padding: 0 0 0.85rem 0;

        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        text-align: center;
  margin: 0 auto;
}

/* Amount summary bar */
.sbo-card-amount-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        background: #f5f5f5;
        border-radius: 0.5rem;
        padding: 0.65rem 0.85rem;
        margin-bottom: 1rem;
        font-size: 0.85rem;
        color: #333333;
}

.sbo-card-amount-total {
        font-size: 1.3rem;
        font-weight: 600;
        color: #df0911;
}

/* Field group */
.sbo-card-field {
        margin-bottom: 0.75rem;
}

.sbo-addr-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 8px;
        margin-bottom: 0;
}

select.sbo-card-input {

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        padding-right: 2rem;
}

.sbo-card-label {
        display: block;
        font-size: 0.85rem;
        color: #333333;
        margin-bottom: 0.3rem;
}

/* Name on card - native input */
.sbo-card-input {
        display: block;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 1rem;
        color: #333;
        background: #ffffff;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        -webkit-appearance: none;
        outline: none;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.15s, background 0.15s;
}

.sbo-card-input:focus {
        border-color: #044cc7;
        background: #f0f5ff;
}

.sbo-card-input.sbo-invalid {
        border-color: #df0911;
}

/* PayPal hosted field containers */
.sbo-card-hosted-wrap {
        padding: 0.6rem 0.75rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #ffffff;
        box-sizing: border-box;
        transition: border-color 0.15s;
}

.sbo-card-hosted-wrap.sbo-hosted-focus {
        border-color: #044cc7;
        background: #f0f5ff;
}

.sbo-card-hosted-wrap.sbo-invalid {
        border-color: #df0911;
}

/* Expiry + CVV row */
.sbo-card-row2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
}

/* Pay button */
.sbo-card-pay-btn {
        display: block;
        width: 100%;
        min-height: 3rem;
        background: #28a745;
        color: #ffffff;
        border: none;
        border-radius: 0.5rem;
        font-size: 1.1rem;
        font-weight: 600;

        font-family: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        margin-top: 2rem;
        position: relative;
        transition: background 0.15s;
        margin-bottom: 1.4rem;
}

.sbo-card-pay-btn:disabled {
        background: #cccccc;

}

.sbo-card-pay-btn:not(:disabled):active {
        background: #1e7e34;
}

/* Spinner inside pay button */
.sbo-card-pay-spinner {
        display: none;
        width: 1.2rem;
        height: 1.2rem;
        border: 2px solid rgba(255,255,255,0.35);
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: sboCardSpin 0.6s linear infinite;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
}

.sbo-card-pay-btn.sbo-paying .sbo-card-pay-spinner {
        display: block;
}

@keyframes sboCardSpin {
        to { transform: translateY(-50%) rotate(360deg); }
}

/* Trust line */
.sbo-card-trust {
        font-size: 0.75rem;
        color: #888888;
        text-align: center;
        margin-top: 6rem;
        line-height: 1.4;
}

/* Error message (panel-level) */
.sbo-card-error {
        display: none;
        border: 1px solid #e57373;
        border-radius: 0.5rem;
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
        color: #c62828;
        margin-top: 0.75rem;
        background: #fff5f5;
}

.sbo-card-error.active {
        display: block;
}

/* Loading state while SDK boots */
.sbo-card-sdk-loading {
        text-align: center;
        padding: 1.5rem 0;
        font-size: 0.85rem;
        color: #888888;
}
.sbo-card-hosted-wrap,
.sbo-card-input {
    padding: 0.6rem 0.75rem;
    min-height: 2.75rem;
    box-sizing: border-box;
}

#sbo-card-type-icon {
    transition: opacity 0.3s ease;
    opacity: 0;
}
.sbo-card-hosted-wrap .sbo-card-input {
    border: none;
    box-shadow: none;
}
/* Container spacing for injected wallets - STRICTLY GRID */
.sbo-cart-wallet-containers {
    width: 85%;
    margin: 0 auto 0.5rem auto;
    display: grid;
    grid-template-columns: 1fr; /* Forces a single column layout */
    gap: 0.75rem;
}

.sbo-wallet-btn-wrap {
    width: 100%;
    min-height: 45px; /* Prevents layout jump before SDK loads */
    z-index: 1;
}

/* Express checkout buttons - STRICTLY GRID */
.sbo-cart-express-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    width: 85%;
    min-width: min(18.75rem, 100%);
    max-width: 31.25rem;
    text-align: center;
    margin: 0.3rem auto;
}
/* Mobile: max 600px enforced by parent modal */
@media (max-width: 360px) {
        .sbo-card-row2 {
                grid-template-columns: 1fr;
        }
}

/* Step 2 inputs - Contained & Smooth */
.sbo-cart-input {
    display: block;
    margin: 10px auto; /* Centers the fields without stretching them */
    width: 90%;        /* Gives it a soft "inset" from the modal edges */
    max-width: 400px;  /* Stops them from getting too long on desktop */
    font-size: 16px;   /* Standard size to stop iOS zoom */
    box-sizing: border-box;
}

/* The Wrapper: Forces a centered column without stretching to the edges */
/*
.sbo-google-auth-wrap {
    display: block;
    text-align: center;
    margin: 1.35rem auto; /* Vertical spacing and horizontal centering */
    width: auto;          /* Only as wide as the button needs */
    max-width: 90%;       /* Safety margin for rounded corners */
}

/* The Button: Standard branding size, perfectly centered */
.g_id_signin {
    display: inline-block; /* Required for text-align: center to work */
    margin: 0 auto;
    max-width: 100%;
    min-height: 44px;
}
*/

/* Step 2 Inputs: Matching the centered lane */
.sbo-cart-input {
    display: block;
    width: 85%;           /* Not full width—keeps your smooth layout */
    max-width: 400px;     /* Desktop cap */
    margin: 12px auto;    /* The "Auto" handles the centering */
    font-size: 16px;
    box-sizing: border-box;
}
.sbo-cart-express-buttons, 
.sbo-wallet-btn-wrap,
#paypal-button-container {
    position: relative; 
    z-index: 1 !important; /* Keep buttons at the bottom of the stack */
}

.sbo-cart-summary-shipping {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
align-items: center;
padding: 0.5rem 0;
border-top: 2px solid #e0e0e0;
font-size: 0.85rem;
margin-top: 0.25rem;
}

.sbo-cart-summary-ship-label {
color: #333333;
font-weight: 600;
}

.sbo-cart-summary-ship-price {
color: #333333;
font-weight: 600;
text-align: right;
min-width: 4rem;
}

.sbo-cart-summary-gstrow {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
align-items: center;
padding: 0.25rem 0;
font-size: 0.85rem;
}

.sbo-cart-summary-gst-label {
color: #333333;
}

.sbo-cart-summary-gst-price {
color: #333333;
text-align: right;
min-width: 4rem;
}