/* PABELPRIMEZONE Storefront - Social Media & Support System.
   All selectors are prefixed .soc- (or scoped under .fe-footer-inner.has-social)
   so nothing here can collide with existing frontend.css rules.
   Mobile-first: base = phones, then 768px+ and 1024px+. */

:root { --soc-radius: 16px; }

/* ==========================================================
   HOMEPAGE: JOIN OUR COMMUNITY
   ========================================================== */
.soc-join-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

.soc-join-card {
    --soc-color: var(--brand-primary);
    position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--soc-radius);
    padding: 16px; box-shadow: var(--shadow); overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.soc-join-card::before {           /* brand-coloured accent bar */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--soc-color);
}
.soc-join-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--soc-color); }

.soc-join-icon {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--soc-color) 14%, transparent); color: var(--soc-color); font-size: 28px;
}
.soc-join-body { flex: 1 1 140px; min-width: 0; }
.soc-join-body h3 { margin: 0 0 3px; font-size: 15.5px; letter-spacing: -.2px; }
.soc-join-body p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }

.soc-join-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
    padding: 9px 18px; border-radius: 10px; background: var(--soc-color); color: #fff; font-size: 13.5px; font-weight: 700;
    white-space: nowrap; transition: filter .15s ease, transform .15s ease;
}
.soc-join-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.soc-join-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--soc-color) 45%, transparent); outline-offset: 2px; }

/* On phones the button takes its own full-width row so it is an easy tap target. */
@media (max-width: 479px) { .soc-join-btn { width: 100%; } }

@media (min-width: 768px) {
    .soc-join-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .soc-join-card { padding: 20px; flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
    .soc-join-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* ==========================================================
   FOOTER COLUMN
   ========================================================== */
.soc-footer-list { list-style: none; margin: 0; padding: 0; }
.soc-footer-list li { margin: 0; }
.soc-footer-col .soc-footer-list a { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.soc-footer-col .soc-footer-list i { font-size: 18px; width: 20px; text-align: center; flex: 0 0 auto; }

/* Tablet (2 columns): 5 items would leave the last one orphaned on its own
   row, so let the payment column (the last child) span the full width. */
@media (min-width: 768px) and (max-width: 1023px) {
    .fe-footer-inner.has-social > .fe-footer-col:last-child { grid-column: 1 / -1; }
}

/* Five columns on desktop when the social column exists. */
@media (min-width: 1024px) {
    .fe-footer-inner.has-social { grid-template-columns: 2fr 1fr 1fr 1.2fr 1.3fr; }
}

/* ==========================================================
   FLOATING SUPPORT BUTTONS
   A toggle button (bottom-right) that fans the channels out upward.
   Collapsed by default so it never covers page content.
   ========================================================== */
.soc-float {
    position: fixed; z-index: 90; right: 16px; bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

.soc-float-toggle {
    width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); color: #fff; font-size: 26px;
    display: flex; align-items: center; justify-content: center; position: relative;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .3); transition: transform .25s ease, box-shadow .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.soc-float-toggle:hover { transform: scale(1.06); }
.soc-float-toggle:focus-visible { outline: 3px solid rgba(14, 165, 233, .5); outline-offset: 3px; }
.soc-float:not([data-open="1"]) .soc-float-toggle { animation: soc-pulse 2.6s ease-out 1.5s 3; }

.soc-float-toggle .soc-ico-open, .soc-float-toggle .soc-ico-close {
    position: absolute; transition: opacity .2s ease, transform .3s ease;
}
.soc-float-toggle .soc-ico-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.soc-float[data-open="1"] .soc-ico-open { opacity: 0; transform: rotate(90deg) scale(.6); }
.soc-float[data-open="1"] .soc-ico-close { opacity: 1; transform: none; }

.soc-float-list { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }

.soc-float-item {
    --soc-color: var(--brand-primary);
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.85); transform-origin: bottom right;
    transition: opacity .22s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2), visibility 0s linear .28s;
}
/* Items nearer the toggle appear first (stagger by --soc-i, reversed for a fan-out feel). */
.soc-float[data-open="1"] .soc-float-list { pointer-events: auto; }
.soc-float[data-open="1"] .soc-float-item {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .22s ease calc(var(--soc-i, 0) * 45ms), transform .28s cubic-bezier(.2, .9, .3, 1.2) calc(var(--soc-i, 0) * 45ms), visibility 0s;
}

.soc-float-circle {
    width: 50px; height: 50px; border-radius: 50%; background: var(--soc-color); color: #fff; font-size: 26px;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
    transition: transform .18s ease;
}
.soc-float-item:hover .soc-float-circle { transform: scale(1.1); }
.soc-float-item:focus-visible .soc-float-circle { outline: 3px solid #fff; box-shadow: 0 0 0 5px var(--soc-color); }

.soc-float-tip {
    background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 99px;
    padding: 7px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow);
}

@keyframes soc-pulse {
    0%   { box-shadow: 0 8px 24px rgba(15, 23, 42, .3), 0 0 0 0 rgba(14, 165, 233, .5); }
    70%  { box-shadow: 0 8px 24px rgba(15, 23, 42, .3), 0 0 0 16px rgba(14, 165, 233, 0); }
    100% { box-shadow: 0 8px 24px rgba(15, 23, 42, .3), 0 0 0 0 rgba(14, 165, 233, 0); }
}

/* Small phones: slightly smaller so it never crowds content. */
@media (max-width: 479px) {
    .soc-float { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .soc-float-toggle { width: 52px; height: 52px; font-size: 24px; }
    .soc-float-circle { width: 46px; height: 46px; font-size: 24px; }
}

/* Respect users who ask for less motion: keep it functional, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .soc-float-toggle, .soc-float-item, .soc-float-circle, .soc-join-card, .soc-join-btn,
    .soc-float-toggle .soc-ico-open, .soc-float-toggle .soc-ico-close { transition: none !important; animation: none !important; }
    .soc-float-item { transform: none; }
}

/* ==========================================================
   SUPPORT CENTER PAGE (support.php)
   ========================================================== */
.soc-support-hero { text-align: center; padding: 28px 8px 10px; }
.soc-support-hero h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.5px; }
.soc-support-hero p { margin: 0 auto; max-width: 560px; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }

.soc-support-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0 8px; }
.soc-support-card {
    --soc-color: var(--brand-primary);
    display: flex; flex-direction: column; gap: 12px; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--soc-radius); padding: 22px; box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.soc-support-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--soc-color); }
.soc-support-card .soc-join-icon { width: 56px; height: 56px; font-size: 30px; }
.soc-support-card h3 { margin: 0; font-size: 17px; }
.soc-support-card p { margin: 0; flex: 1; color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }
.soc-support-card .soc-join-btn { width: 100%; }

.soc-support-empty { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.soc-support-empty .icon { font-size: 40px; margin-bottom: 10px; }

@media (min-width: 640px)  { .soc-support-grid { grid-template-columns: repeat(2, 1fr); } .soc-support-hero h1 { font-size: 30px; } }
@media (min-width: 1024px) { .soc-support-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }