/* ==========================================================================
   Tier-1 Collapsible Payment Methods & Safe Checkout
   Location: css/single-product/safe-checkout.css
   Theme: #17141c (Zero Box Border, Zero White, Zero Jump, Single Column)
   ========================================================================== */

.scb-collapsible-wrapper {
    width: 100%;
    margin: 22px 0 28px 0;
    padding: 0;
    background: transparent !important; /* NO CONTAINER BACKGROUND */
    border: none !important;            /* NO OUTER BOX BORDER */
    box-shadow: none !important;        /* ZERO SHADOW */
    box-sizing: border-box;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 1. Interactive Header Toggle */
.scb-header-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: border-color 0.2s ease !important;
    background: transparent !important;
}

.scb-header-toggle:hover {
    border-color: rgba(124, 58, 237, 0.4) !important;
}

.scb-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.scb-title-wrap svg {
    stroke: #a78bfa !important;
    flex-shrink: 0 !important;
}

.scb-header-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: -0.2px !important;
    line-height: 1 !important;
}

/* 2. Rotating Arrow Chevron (Open by default = 180deg) */
.scb-chevron-icon {
    stroke: #94a3b8 !important;
    transform: rotate(180deg) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.2s ease !important;
    flex-shrink: 0 !important;
}

.scb-collapsible-wrapper.is-collapsed .scb-chevron-icon {
    transform: rotate(0deg) !important;
}

.scb-header-toggle:hover .scb-chevron-icon {
    stroke: #ffffff !important;
}

/* 3. Smooth Grid Collapse/Expand */
.scb-accordion-content {
    display: grid !important;
    grid-template-rows: 1fr !important;
    transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
    opacity: 1 !important;
}

.scb-collapsible-wrapper.is-collapsed .scb-accordion-content {
    grid-template-rows: 0fr !important;
    opacity: 0 !important;
}

.scb-accordion-inner {
    overflow: hidden !important;
}

/* 4. Single-Column Flow (No Double Column, No Split Border) */
.scb-single-flow {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px 0 8px 0 !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Row 1: Payment SVGs */
.scb-payment-icons {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 !important;
}

.scb-svg-icon {
    height: 24px !important;
    width: auto !important;
    object-fit: contain !important;
    opacity: 0.9 !important;
    flex-shrink: 0 !important;
    display: block !important;
    transition: opacity 0.2s ease !important;
    transform: none !important; /* NO HOVER JUMP */
}

.scb-svg-icon:hover {
    opacity: 1 !important;
    transform: none !important;
}

/* Row 2: Caption Text */
.scb-caption-text {
    font-size: 13.5px !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Row 3: Single Line Etsy Store Notice */
.scb-etsy-single-line {
    font-size: 13.5px !important;
    color: #cbd5e1 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding-top: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.scb-etsy-link {
    color: #f59e0b !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.scb-etsy-link:hover {
    color: #fbbf24 !important;
    text-decoration: underline !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .scb-etsy-single-line {
        white-space: normal !important; /* Wraps cleanly on small mobile phones */
    }

    .scb-payment-icons {
        gap: 12px !important;
    }

    .scb-svg-icon {
        height: 20px !important;
    }
}