/**
 * ZxAcc — Footer redesign (additive, loaded after theme-scroll-fx.css)
 * ---------------------------------------------------------------------
 * Fully white footer background, trust-icon logo badges, the live
 * support-hours widget, real contact icons and the 10-coin payment
 * accordion. Nothing here removes or restructures earlier selectors —
 * revert by dropping the enqueue calls in functions.php.
 */

/* ---------------------------------------------------------------------
   1) Footer background — fully white (was a white→cream gradient)
   --------------------------------------------------------------------- */
.beiten-footer,
.beiten-footer--pro {
    background: #ffffff;
}
.beiten-footer::before,
.beiten-footer::after {
    opacity: 0.05;
}
.beiten-footer--pro .footer-trust {
    background: #ffffff;
}
.footer-bottom {
    background: #ffffff;
}

/* ---------------------------------------------------------------------
   2) Trust-strip icons — one consistent cream/liquid-glass badge for all
      four (was four different flat colors, then per-item blue shades —
      both replaced per feedback: same badge, same accent, every time).
      Each badge carries a small gold accent glyph (bottom-end corner)
      specific to its meaning, plus the small ZxAcc logo badge (top-start).
   --------------------------------------------------------------------- */
.footer-trust-item .ft-icon {
    position: relative;
    overflow: visible;
    isolation: isolate;
    color: var(--primary);
    background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(249,245,236,.78) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(53, 94, 136, .16);
    box-shadow: 0 6px 16px rgba(53, 94, 136, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.footer-trust-item .ft-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 58%);
    pointer-events: none;
}
.footer-trust-item .ft-icon-main {
    position: relative;
    z-index: 1;
}

/* small gold accent glyph — meaning-specific icon, same size/position/color family everywhere */
.ft-accent {
    position: absolute;
    bottom: -5px;
    inset-inline-end: -5px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(32, 56, 82, .28));
}

.ft-icon-badge {
    position: absolute;
    top: -5px;
    inset-inline-start: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(20, 30, 45, .3);
    z-index: 2;
}

/* ---------------------------------------------------------------------
   3) Category counts — keep the data, hide the number
   --------------------------------------------------------------------- */
.footer-links .fl-count {
    display: none;
}

/* ---------------------------------------------------------------------
   4) Support-hours widget
   --------------------------------------------------------------------- */
.footer-hours-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
    background: #fff;
}
.footer-hours-title {
    font-size: 12.5px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-primary);
}
.footer-hours-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
}
.footer-hours-status .fhs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.footer-hours-status.is-open {
    background: rgba(16, 185, 129, .14);
    color: #059669;
}
.footer-hours-status.is-open .fhs-dot {
    background: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .18);
    animation: footerHoursPulse 1.8s infinite;
}
.footer-hours-status.is-closed {
    background: rgba(220, 38, 38, .12);
    color: #dc2626;
}
.footer-hours-status.is-closed .fhs-dot {
    background: #dc2626;
}
@keyframes footerHoursPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(5, 150, 105, .18); }
    50%      { box-shadow: 0 0 0 6px rgba(5, 150, 105, .08); }
}
@media (prefers-reduced-motion: reduce) {
    .footer-hours-status.is-open .fhs-dot { animation: none; }
}
.footer-hours-clock {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary, #F9F5EC);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.footer-hours-clock svg {
    color: var(--primary);
    flex-shrink: 0;
}
.footer-hours-clock .fhc-time {
    font-size: 16px;
    font-weight: 800;
    direction: ltr;
    letter-spacing: .4px;
}
.footer-hours-clock .fhc-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: auto;
}
.footer-hours-days {
    display: flex;
    gap: 5px;
}
.footer-hours-days .fhd-day {
    flex: 1;
    text-align: center;
    font-size: 10.5px;
    font-weight: 800;
    padding: 7px 0;
    border-radius: 8px;
    background: var(--bg-secondary, #F9F5EC);
    color: var(--text-secondary);
}
.footer-hours-days .fhd-day.is-today {
    background: var(--gradient-primary);
    color: #fff;
}
.footer-hours-days .fhd-day.is-off {
    background: #fde8e8;
    color: #dc2626;
}

/* ---------------------------------------------------------------------
   5) Contact list — icon sizing for the new envelope / paper-plane glyphs
   --------------------------------------------------------------------- */
.footer-contact-icon svg {
    display: block;
}

/* ---------------------------------------------------------------------
   6) Payment methods — Cryptomus badge + collapsible 10-coin accordion
   --------------------------------------------------------------------- */
.payment-methods .payment-cryptomus {
    display: block;
    margin-bottom: 12px;
}
.payment-toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    transition: border-color .2s, background .2s;
}
.payment-toggle:hover {
    border-color: rgba(53, 94, 136, .3);
    background: rgba(53, 94, 136, .04);
}
.payment-toggle-stack {
    display: flex;
    margin-inline-start: auto;
}
.payment-toggle-stack svg {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-inline-start: -8px;
    flex-shrink: 0;
}
.payment-toggle-chevron {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg);
    transition: transform .3s;
    flex-shrink: 0;
}
.payment-toggle[aria-expanded="true"] .payment-toggle-chevron {
    transform: rotate(-135deg);
}
.payment-icons-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 10px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.payment-icons-grid.is-open {
    max-height: 400px;
    opacity: 1;
}
.payment-coin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}
.payment-coin svg {
    width: 26px;
    height: 26px;
}
.payment-coin em {
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-secondary);
}
@media (max-width: 480px) {
    .payment-icons-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .payment-icons-grid,
    .payment-toggle-chevron { transition: none; }
}