/**
 * ShapeScale Mobile Sticky Header Enhancements
 * Styles for recurring payment display, product-specific badges, and prepaid messaging
 * Part of Issue #286 - Mobile + Desktop checkout recurring payment display enhancements
 *
 * @version 1.0.0
 * @author ShapeScale Team
 */

/* ========================================
   BILLING FREQUENCY LABEL
   ======================================== */
.ss_mobile_billing_frequency {
    font-size: 13px;
    color: #6b7280; /* Gray-500 */
    font-style: italic;
    margin-top: 4px;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* ========================================
   EQUIVALENT RATE BADGE (Prepaid Annual)
   ======================================== */
.ss_mobile_equiv_rate {
    display: inline-block;
    background: #eff6ff; /* Blue-50 */
    color: #1e40af; /* Blue-800 */
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

/* ========================================
   PREPAID EXPLANATION NOTE
   ======================================== */
.ss_mobile_prepaid_note {
    font-size: 12px;
    color: #6b7280; /* Gray-500 - subtle fine print */
    line-height: 1.5;
    margin-top: 10px;
    padding: 0;
    background: transparent;
    border: none;
    font-style: italic;
}

.ss_mobile_prepaid_note::before {
    content: '';
    display: none;
}

/* ========================================
   RECURRING BILLING INFO SECTION
   ======================================== */
.ss_mobile_recurring_info {
    margin-top: 10px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 12px;
    color: #6b7280; /* Gray-500 - subtle fine print */
    line-height: 1.5;
    font-style: italic;
}

.ss_mobile_recurring_info strong {
    font-weight: 500;
    color: #6b7280;
    display: inline;
    font-size: 12px;
}

/* ========================================
   COLLAPSED STATE TRUST BADGES + TOGGLE BUTTON ROW
   ======================================== */

/* Badges and toggle button share same row to save vertical space */
.ss_mobile_collapsed_badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb; /* Gray-200 */
}

/* ========================================
   SUPPORT SECTION (Bottom of Expanded View)
   ======================================== */
.ss_support_section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb; /* Gray-200 */
}

.ss_support_section .ss_trust_signal_row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ss_support_section .icon-1rem {
    flex-shrink: 0;
}

.ss_support_section .text-size-small,
.ss_support_section .text-size-tiny-3 {
    font-size: 13px;
    color: #374151; /* Gray-700 */
    line-height: 1.5;
}

.ss_support_section a {
    color: #22c55e; /* Green-500 - matches phone icon */
    text-decoration: none;
    font-weight: 600;
}

.ss_support_section a:hover {
    text-decoration: underline;
}

.ss_mobile_collapsed_badge {
    font-size: 12px;
    color: #6b7280; /* Gray-500 */
    line-height: 1;
    white-space: nowrap;
}

.ss_mobile_collapsed_badge::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Shipping badge - truck icon in blue */
.ss-badge-shipping::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C81FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5' /%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
}

/* Trial badge - calendar-clock icon in blue */
.ss-badge-trial::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C81FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10.5 21h-4.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v3' /%3E%3Cpath d='M16 3v4' /%3E%3Cpath d='M8 3v4' /%3E%3Cpath d='M4 11h10' /%3E%3Cpath d='M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' /%3E%3Cpath d='M18 16.5v1.5l.5 .5' /%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
}

/* Toggle button positioning within badges row */
.ss_mobile_collapsed_badges .ss_mobile_toggle {
    margin-left: auto;
    flex-shrink: 0;
}

/* ========================================
   EXPANDED STATE - REMOVED ELEMENTS (Issue #286)
   ======================================== */

/* Expanded trust badges removed - redundant with collapsed badges */

/* Product variant/description removed - redundant with product name */

/* Hide all expanded trust badge elements (Webflow template leftovers) */
.ss_mobile_trust_badge,
.ss_mobile_expanded_badges,
.ss_mobile_expanded_badge {
    display: none !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Very small screens (iPhone SE, iPhone 13 mini - 375px) */
@media screen and (width <= 375px) {
    .ss_mobile_billing_frequency {
        font-size: 12px;
    }

    .ss_mobile_equiv_rate {
        font-size: 11px;
        padding: 2px 6px;
        margin-left: 6px;
    }

    .ss_mobile_prepaid_note,
    .ss_mobile_recurring_info {
        font-size: 11px;
    }

    .ss_mobile_collapsed_badges {
        gap: 6px; /* Reduce gap for tighter spacing */
    }

    .ss_mobile_collapsed_badge {
        font-size: 11px;
    }

    .ss_mobile_collapsed_badge::before {
        width: 10px;
        height: 10px;
        margin-right: 3px;
    }

    .ss_support_section {
        margin-top: 12px;
        padding-top: 12px;
    }

    .ss_support_section .text-size-small,
    .ss_support_section .text-size-tiny-3 {
        font-size: 12px;
    }
}

/* Larger mobile screens (iPhone 13 Pro Max, etc.) */
@media screen and (width >= 428px) {
    .ss_mobile_billing_frequency {
        font-size: 14px;
    }

    .ss_mobile_prepaid_note,
    .ss_mobile_recurring_info {
        font-size: 13px;
    }

    .ss_mobile_collapsed_badge {
        font-size: 13px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus states for interactive elements */
.ss_mobile_toggle:focus {
    outline: 2px solid #3b82f6; /* Blue-500 */
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ss_mobile_billing_frequency,
    .ss_mobile_product_variant {
        color: #374151; /* Gray-700 - darker for better contrast */
    }

    .ss_mobile_prepaid_note,
    .ss_mobile_recurring_info {
        color: #374151;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ss_mobile_collapsed_badge,
    .ss_mobile_prepaid_note,
    .ss_mobile_recurring_info {
        transition: none;
    }
}

/* ========================================
   DARK MODE SUPPORT (Future-proofing)
   ======================================== */
@media (prefers-color-scheme: dark) {
    .ss_mobile_billing_frequency {
        color: #9ca3af; /* Gray-400 */
    }

    .ss_mobile_equiv_rate {
        background: #1e3a8a; /* Blue-900 */
        color: #93c5fd; /* Blue-300 */
    }

    .ss_mobile_prepaid_note {
        color: #9ca3af; /* Gray-400 - subtle in dark mode */
    }

    .ss_mobile_prepaid_note::before {
        display: none;
    }

    .ss_mobile_recurring_info {
        color: #9ca3af; /* Gray-400 - subtle in dark mode */
    }

    .ss_mobile_collapsed_badges {
        border-top-color: #374151; /* Gray-700 */
    }

    .ss_mobile_collapsed_badge {
        color: #9ca3af; /* Gray-400 */
    }

    .ss_support_section {
        border-top-color: #374151; /* Gray-700 */
    }

    .ss_support_section .text-size-small,
    .ss_support_section .text-size-tiny-3 {
        color: #d1d5db; /* Gray-300 */
    }

    .ss_support_section a {
        color: #34d399; /* Green-400 - brighter for dark mode */
    }
}

/* ========================================
   LOADING ANIMATION COMPATIBILITY
   ======================================== */

/* Ensure loading text displays correctly within new elements */
.ss_mobile_billing_frequency .ss-loading-text,
.ss_mobile_product_variant .ss-loading-text,
.ss_mobile_prepaid_note .ss-loading-text,
.ss_mobile_recurring_info .ss-loading-text {
    display: inline-block;
    width: 60px;
    height: 1em;
    background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ========================================
   PAYMENT ICON LIGHT/DARK MODE SWITCHING
   ======================================== */

/* Light mode: Show light icons, hide dark icons */
.ss_payment_icon_light {
    display: inline-block !important;
}

.ss_payment_icon_dark {
    display: none !important;
}

/* ========================================
   DARK MODE SUPPORT (Issue #270, #286)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* ============================================================================
       MOBILE STICKY SUMMARY DARK MODE (Issue #270, #286)
       ============================================================================
       Dark mode styles for customer collection page mobile sticky order summary.
       Matches desktop pricing card dark mode styling for consistency.

       Components styled:
       - Mobile sticky summary container (.ss_mobile_order_summary)
       - Product info (.ss_mobile_product_name, .ss_mobile_product_image)
       - Price breakdowns (.ss_mobile_breakdown_row, .ss_mobile_breakdown_amount)
       - Toggle button (.ss_mobile_toggle)
       - Recurring billing info (.ss_mobile_recurring_info)
       - Trust badges (.ss_mobile_collapsed_badge, .ss_mobile_expanded_badge)

       WCAG 2.2 AA compliance:
       - Focus visible states (2px outline, 2px offset)
       - Sufficient color contrast (>4.5:1 for normal text, >7:1 for emphasized)
       - Accessible interaction targets (≥24×24px touch targets)
       ============================================================================ */

    /* Mobile Order Summary Container - Modern 2025 Elevated Design */
    .ss_mobile_order_summary {
        background: linear-gradient(180deg, rgb(30 30 35 / 98%) 0%, rgb(25 25 30 / 95%) 100%) !important;
        border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
        box-shadow: 0 4px 24px rgb(0 0 0 / 50%), 0 2px 8px rgb(0 0 0 / 30%) !important;
        backdrop-filter: blur(8px) !important;
    }

    /* Product Info (Expanded State) */
    .ss_mobile_product_name {
        color: #f3f4f6 !important; /* Gray-100 - bright and readable */
    }

    .ss_mobile_product_image {
        opacity: 0.95 !important;
        filter: brightness(1.05) !important;
    }

    /* Price Breakdown Rows - Fix black text issue */
    .ss_mobile_breakdown_row {
        color: #e5e7eb !important; /* Gray-200 */
    }

    .ss_mobile_breakdown_label {
        color: #d1d5db !important; /* Gray-300 - muted but readable */
    }

    .ss_mobile_breakdown_amount {
        color: #f9fafb !important; /* Gray-50 - bright for emphasis */
    }

    /* Discount Row - green accent */
    .ss_mobile_discount_row .ss_mobile_breakdown_label,
    .ss_mobile_discount_row .ss_mobile_breakdown_amount {
        color: #5bb5a2 !important; /* Dark accent green */
    }

    /* Total Row - brightest for emphasis */
    .ss_mobile_total_row .ss_mobile_breakdown_label,
    .ss_mobile_total_row .ss_mobile_breakdown_amount {
        color: #f9fafb !important; /* Gray-50 */
    }

    /* Shipping Note */
    .ss_mobile_shipping_note {
        color: #9ca3af !important; /* Gray-400 - subtle */
    }

    /* Recurring Billing Info - Green box */
    .ss_mobile_recurring_info {
        background: rgb(16 185 129 / 10%) !important; /* Green-500 with transparency */
        border-left-color: #10b981 !important; /* Green-500 */
        color: #d1fae5 !important; /* Green-100 */
    }

    .ss_mobile_recurring_info strong {
        color: #a7f3d0 !important; /* Green-200 */
    }

    /* Toggle Button - WCAG 2.2 compliant touch target and focus states */
    .ss_summary_toggle {
        background-color: transparent !important;
        color: #f0f0f0 !important; /* Dark headings */
        transition: all 0.2s ease !important;
        min-height: 24px !important; /* WCAG 2.2 2.5.8 minimum target size */
    }

    .ss_summary_toggle:hover {
        background-color: rgb(255 255 255 / 5%) !important;
        color: #f0f0f0 !important;
    }

    /* WCAG 2.2 2.4.11 Focus Not Obscured - visible focus indicator */
    .ss_summary_toggle:focus {
        outline: 2px solid #5C81FF !important; /* Brand blue */
        outline-offset: 2px !important;
    }

    /* Pricing Breakdown Container (when expanded) */
    .ss_pricing_breakdown {
        background-color: #2c2c2c !important; /* Dark grey bg */
        border-top-color: #555 !important; /* Dark border */
    }

    /* Price Rows - Brighter for better readability (Mobile) */
    .ss_price_row {
        color: #e5e7eb !important; /* Gray-200 - brighter */
        border-bottom-color: rgb(255 255 255 / 5%) !important;
    }

    .ss_price_row:last-child {
        border-bottom: none !important;
    }

    /* Discount Row - green accent to highlight savings */
    .ss_discount_line {
        color: #5bb5a2 !important; /* Dark accent */
    }

    .ss_discount_line div {
        color: #5bb5a2 !important;
    }

    /* Total Row - Clean, hierarchy through typography only (Mobile) */
    .ss_total_row {
        color: #f9fafb !important; /* Gray-50 - brightest */
        background: transparent !important;
    }

    .ss_total_row div {
        color: #f9fafb !important; /* Gray-50 - brightest */
    }

    /* Price Amount Elements - inherit colors from parent rows */
    #mobile-subtotal-amount,
    #mobile-discount-amount,
    #mobile-total-amount {
        color: inherit !important;
    }

    /* Mobile Payment Methods (in sticky summary) */
    .ss_payment_methods_mobile {
        background-color: transparent !important;
        border-top: 1px solid rgb(255 255 255 / 5%) !important;
    }

    .ss_payment_methods_mobile .text-size-tiny {
        color: #bbb !important; /* Muted text */
    }

    /* Spacer elements */
    ._1rem-spacer {
        background-color: transparent !important;
    }

    /* ============================================================================
       PAYMENT ICON LIGHT/DARK MODE SWITCHING
       ============================================================================ */

    /* Hide light mode payment icons in dark mode */
    .ss_payment_icon_light {
        display: none !important;
    }

    /* Show dark mode payment icons */
    .ss_payment_icon_dark {
        display: inline-block !important;
    }
}