/*
Theme Name: AffiliateCMS Child
Theme URI: https://lat.vn/
Description: Child theme for AffiliateCMS Theme. Add your custom styles and overrides here.
Author: AffiliateCMS Team
Author URI: https://lat.vn/
Template: affiliateCMS-theme
Version: 1.0.3-share
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affiliatecms-child
*/

/* ==========================================================================
   Custom Styles - Add your overrides below
   ========================================================================== */

/* --------------------------------------------------------------------------
   Floating social share rail — bottom-right gutter, stacked directly above
   the TOC / scroll-progress bubble (.toc-action-bar: fixed, bottom/right space-6,
   56px trigger). Markup printed on wp_footer by acms_render_sticky_share_rail().
   -------------------------------------------------------------------------- */
.acms-share-rail {
    position: fixed;
    right: calc(var(--space-6, 24px) + 8px);   /* centres 40px buttons on the 56px bubble axis */
    bottom: calc(var(--space-6, 24px) + 56px + 14px);  /* sit just above the bubble */
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: var(--z-fixed, 300);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.acms-share-rail.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.acms-share-rail__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 1px;
}

.acms-share-rail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 17px;
    color: var(--color-text-secondary, #4a5056);
    background-color: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e2dc);
    border-radius: 9999px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, .12));
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .15s ease;
}

.acms-share-rail__btn:hover  { transform: scale(1.08); }
.acms-share-rail__btn:active { transform: scale(.92); }

.acms-share-rail__btn--facebook:hover  { color: #fff; border-color: #1877F2; background-color: #1877F2; }
.acms-share-rail__btn--x:hover         { color: #fff; border-color: #000;     background-color: #000; }
.acms-share-rail__btn--pinterest:hover { color: #fff; border-color: #E60023;  background-color: #E60023; }
.acms-share-rail__btn--instagram:hover {
    color: #fff;
    border-color: #dc2743;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}

.acms-share-rail__btn.is-copied {
    color: #fff;
    border-color: var(--color-success, #10B981);
    background-color: var(--color-success, #10B981);
}

/* Tablet + mobile: keep the rail, shrink it and drop the label to save height.
   Anchor still matches the TOC bubble (space-6 / 56px trigger in this range). */
@media (max-width: 1023px) {
    .acms-share-rail {
        right: calc(var(--space-6, 24px) + 9px);
        gap: 7px;
    }
    .acms-share-rail__btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .acms-share-rail__label {
        display: none;
    }
}

/* Phone: TOC bubble drops to space-4 anchor and a 48px trigger — follow it. */
@media (max-width: 639px) {
    .acms-share-rail {
        right: calc(var(--space-4, 16px) + 5px);
        bottom: calc(var(--space-4, 16px) + 48px + 10px);
    }
}