/* ============================================================
   Floating Social Dock  (storefront)
   A modern frosted-glass vertical dock pinned to the page's
   start edge (right in RTL, left in LTR). Each item is a pill
   that expands a sliding label on hover and fills with the
   platform's brand colour. A live "chat" item pulses, and the
   "branches" item reveals a flyout listing every configured branch.
   All links/branches come from /Admin/Settings/Social.
   ============================================================ */

.yc-social-dock {
    position: fixed;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 940;                 /* below modals/toasts, above page chrome */
    display: flex;
    flex-direction: column;
    gap: 11px;
    pointer-events: none;          /* let the gap between pills pass clicks through */
}

/* Decorative vertical spine behind the pills */
.yc-dock-spine {
    position: absolute;
    inset-inline-start: 23px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        rgba(197, 156, 109, 0) 0%,
        rgba(197, 156, 109, .4) 16%,
        rgba(197, 156, 109, .4) 84%,
        rgba(197, 156, 109, 0) 100%);
    pointer-events: none;
    z-index: -1;
}

.yc-dock-item {
    /* per-platform colours — overridden by .yc-pf-* below; gold by default */
    --brand: #B0824F;
    --brand-grad: linear-gradient(135deg, #D9BC93, #C59C6D 55%, #95683B);

    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    width: 48px;                   /* collapsed: just the icon */
    height: 48px;
    /* flat against the screen edge, rounded toward the content side */
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 50px;
    border-end-end-radius: 50px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1.5px solid rgba(197, 156, 109, .26);
    border-inline-start: none;
    color: var(--brand);
    box-shadow: 0 10px 26px -14px rgba(28, 20, 16, .42);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: width .42s cubic-bezier(.22, 1, .36, 1),
                background .4s ease,
                color .4s ease,
                box-shadow .4s ease,
                border-color .4s ease;
    /* staggered, direction-aware entrance */
    opacity: 0;
    transform: translateX(-26px);
    animation: yc-dock-in .55s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(.15s + var(--i, 0) * .07s);
}
[dir="rtl"] .yc-dock-item { transform: translateX(26px); }

@keyframes yc-dock-in {
    to { opacity: 1; transform: translateX(0); }
}

/* soft shine that sweeps across on hover */
.yc-dock-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}

.yc-dock-ico {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 18px;
    position: relative;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 1;
}

.yc-dock-label {
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    font-family: var(--font-body, 'Readex Pro', sans-serif);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .2px;
    transition: max-width .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, padding .42s ease;
}

/* Hover / focus: grow into a pill, reveal the label, fill with brand colour */
.yc-dock-item:hover,
.yc-dock-item:focus-visible {
    width: 196px;
    background: var(--brand-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 18px 38px -12px color-mix(in srgb, var(--brand) 60%, transparent),
                0 6px 14px -8px rgba(0, 0, 0, .25);
    outline: none;
}

.yc-dock-item:hover::after,
.yc-dock-item:focus-visible::after { transform: translateX(120%); }

.yc-dock-item:hover .yc-dock-ico,
.yc-dock-item:focus-visible .yc-dock-ico {
    transform: scale(1.14) rotate(-6deg);
}

.yc-dock-item:hover .yc-dock-label,
.yc-dock-item:focus-visible .yc-dock-label {
    max-width: 150px;
    opacity: 1;
    padding-inline-end: 18px;
}

/* ---- per-platform brand colours ---- */
.yc-pf-facebook  { --brand: #1877F2; --brand-grad: linear-gradient(135deg, #4293ff, #1877F2 60%, #0a52c4); }
.yc-pf-instagram { --brand: #d6266f; --brand-grad: linear-gradient(135deg, #feda75, #fa7e1e 28%, #d62976 64%, #962fbf); }
.yc-pf-twitter   { --brand: #2E1A0B; --brand-grad: linear-gradient(135deg, #3a3f45, #2E1A0B 60%, #000); }
.yc-pf-whatsapp  { --brand: #1faa55; --brand-grad: linear-gradient(135deg, #43e07a, #25D366 50%, #0f9a47); }
.yc-pf-youtube   { --brand: #e8201b; --brand-grad: linear-gradient(135deg, #ff4d4a, #e8201b 60%, #b1100c); }
.yc-pf-tiktok    { --brand: #2E1A0B; --brand-grad: linear-gradient(135deg, #25F4EE, #2E1A0B 50%, #FE2C55); }
.yc-pf-branches  { --brand: #B0824F; --brand-grad: linear-gradient(135deg, #D9BC93, #C59C6D 55%, #95683B); }

/* ---- Branches flyout ---- */
/* overflow must be visible so the flyout can escape the item box; the collapsed
   label is hidden via max-width:0, so nothing spills when not hovered. */
.yc-dock-branches { overflow: visible; }
/* overflow:visible (needed above for the flyout) un-clips the hover-shine
   pseudo, whose resting position (translateX(-120%)) then leaks out as a
   stray diagonal streak beside the pin — so drop the shine on this item. */
.yc-dock-branches::after { content: none; }

.yc-branches-flyout {
    position: absolute;
    inset-inline-start: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-12px) scale(.96);
    transform-origin: center inline-start;
    min-width: 240px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1.5px solid rgba(197, 156, 109, .3);
    border-radius: 18px;
    box-shadow: 0 26px 54px -18px rgba(28, 20, 16, .5);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility .32s;
    z-index: 5;
}

/* little arrow pointing back to the pin */
.yc-branches-flyout::before {
    content: "";
    position: absolute;
    inset-inline-start: -7px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%) rotate(45deg);
    background: rgba(255, 255, 255, .97);
    border-inline-start: 1.5px solid rgba(197, 156, 109, .3);
    border-bottom: 1.5px solid rgba(197, 156, 109, .3);
}

.yc-dock-branches:hover .yc-branches-flyout,
.yc-dock-branches:focus-within .yc-branches-flyout {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0) scale(1);
}

.yc-branches-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display, 'El Messiri', serif);
    font-weight: 700;
    font-size: 15px;
    color: var(--amber-800, #62391C);
    padding: 4px 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px dashed rgba(197, 156, 109, .35);
}
.yc-branches-head i { color: var(--gold, #C59C6D); }

.yc-branches-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yc-branches-list li {
    opacity: 0;
    transform: translateX(-8px);
}
[dir="rtl"] .yc-branches-list li { transform: translateX(8px); }

/* lines reveal one after another while the flyout is open */
.yc-dock-branches:hover .yc-branches-list li,
.yc-dock-branches:focus-within .yc-branches-list li {
    animation: yc-branch-in .38s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(.06s + var(--bi, 0) * .06s);
}

@keyframes yc-branch-in {
    to { opacity: 1; transform: translateX(0); }
}

.yc-branch-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    text-decoration: none;
    color: var(--bark, #784625);
    font-family: var(--font-body, 'Readex Pro', sans-serif);
    font-weight: 500;
    font-size: 13.5px;
    position: relative;
    transition: background .25s ease, color .25s ease, padding-inline-start .25s ease;
}
.yc-branch-static { cursor: default; }

/* the growing accent "line" on the start edge */
.yc-branch-line::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--gold-light, #D9BC93), var(--gold-dark, #95683B));
    transform: translateY(-50%);
    transition: height .25s ease;
}

a.yc-branch-line:hover {
    background: linear-gradient(135deg, rgba(232, 192, 106, .2), rgba(197, 156, 109, .12));
    color: var(--amber-800, #62391C);
    padding-inline-start: 16px;
}
a.yc-branch-line:hover::before { height: 64%; }

.yc-branch-dot {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 12px;
    color: var(--gold-dark, #95683B);
    background: rgba(197, 156, 109, .14);
    transition: background .25s ease, color .25s ease;
}
a.yc-branch-line:hover .yc-branch-dot {
    background: linear-gradient(135deg, var(--gold, #C59C6D), var(--gold-dark, #95683B));
    color: #fff;
}

.yc-branch-name { flex: 1; }

.yc-branch-go {
    font-size: 11px;
    opacity: 0;
    color: var(--gold-dark, #95683B);
    transform: translateX(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
a.yc-branch-line:hover .yc-branch-go { opacity: .85; transform: translateX(0); }

/* ============ Dark mode ============ */
body.dark-mode .yc-dock-item {
    background: rgba(34, 28, 22, .72);
    border-color: rgba(197, 156, 109, .3);
    color: var(--gold-light, #D9BC93);
}
body.dark-mode .yc-dock-item:hover,
body.dark-mode .yc-dock-item:focus-visible { color: #fff; }
body.dark-mode .yc-branches-flyout,
body.dark-mode .yc-branches-flyout::before {
    background: rgba(26, 21, 18, .97);
    border-color: rgba(197, 156, 109, .32);
}
body.dark-mode .yc-branches-head { color: var(--gold-light, #D9BC93); }
body.dark-mode .yc-branch-line { color: #E8DCC8; }
body.dark-mode a.yc-branch-line:hover { color: #fff; }

/* ============ Responsive ============ */
/* Keep the floating dock visible on mobile too, but compact so it hugs the
   screen edge without covering much content. Labels stay collapsed (no hover
   on touch), so it's just a slim column of icons. */
@media (max-width: 991.98px) {
    .yc-social-dock { gap: 8px; }
    .yc-dock-item { width: 38px; height: 38px; }
    .yc-dock-ico { flex: 0 0 38px; width: 38px; height: 38px; font-size: 15px; }
    .yc-dock-spine { display: none; }
    /* Don't let a label flyout open off-screen on small devices. */
    .yc-dock-item:hover { width: 38px; }
    .yc-dock-label { display: none; }
    .yc-branches-list { min-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    .yc-dock-item,
    .yc-branches-list li { animation: none; opacity: 1; transform: none; }
    .yc-dock-item { transition: width .2s ease, background .2s ease, color .2s ease; }
}