/*
 * LIV International — TikTok Product Page Overrides  v1.0
 * =========================================================
 * Loads AFTER liv-prod-new.css + liv-prod-single.css (shared).
 * Contains ONLY TikTok-specific conditional pricing, savings
 * banner, and comparison layout.
 *
 * Aesthetic: "Botanical Flash Deal" — LIV's sage/gold palette
 * injected with youthful energy for the TikTok audience.
 *
 * RULES:
 *  - ZERO font-size declarations (DNN theme controls sizing)
 *  - All classes prefixed liv-tk- (TikTok-specific)
 *  - Self-contained — no external CSS variable dependencies
 *
 * Deploy: /Portals/0/frm/css/liv-tiktok-product.css?ver=1
 * =========================================================
 */


/* =============================================================
   1. CONDITIONAL VISIBILITY
   ============================================================= */

/* TikTok comparison — hidden by default */
.liv-prod-single .liv-tk-compare {
    display: none;
}

/* Retail standard — shown by default */
.liv-prod-single .liv-retail-only {
    display: block;
}

/* When TikTok referral (frmID=15): flip visibility */
.liv-prod-single.liv-frmid-15 .liv-tk-compare {
    display: block;
}
.liv-prod-single.liv-frmid-15 .liv-retail-only {
    display: none;
}


/* =============================================================
   2. TIKTOK SAVINGS BANNER
   Gradient ribbon with shimmer sweep animation.
   ============================================================= */

.liv-tk-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        #3d5441 0%,
        #5c7d62 40%,
        #b8955a 100%
    );
    color: #ffffff;
    padding: 18px 24px;
    border-radius: 14px;
    margin: 0 0 20px 0;
    text-align: center;
    letter-spacing: 0.4px;
    line-height: 1.5;
    box-shadow:
        0 4px 20px rgba(30, 43, 34, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Shimmer sweep — diagonal light band */
.liv-tk-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.12) 55%,
        transparent 70%
    );
    animation: liv-tk-shimmer 4s ease-in-out infinite;
}

@keyframes liv-tk-shimmer {
    0%   { left: -100%; }
    40%  { left: 150%; }
    100% { left: 150%; }
}

/* Subtle grain overlay for depth */
.liv-tk-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    pointer-events: none;
    border-radius: inherit;
}

.liv-tk-banner-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    opacity: 0.85;
    margin-bottom: 4px;
}

.liv-tk-banner-headline {
    font-weight: 900;
    letter-spacing: -0.3px;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.liv-tk-banner-sub {
    font-weight: 400;
    opacity: 0.8;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

/* Gold spark emoji accent */
.liv-tk-spark {
    display: inline-block;
    animation: liv-tk-pulse 2s ease-in-out infinite;
}

@keyframes liv-tk-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.85; }
}


/* =============================================================
   3. PRICE COMPARISON TABLE
   TikTok price hero + retail strikethrough.
   ============================================================= */

.liv-tk-compare .table {
    border-collapse: separate;
    border-spacing: 0 6px;
    margin: 0;
}

.liv-tk-compare .table td {
    border: none;
    vertical-align: middle;
    padding: 12px 16px;
}

/* ---- TikTok Hero Price Row ---- */
.liv-tk-hero-row {
    background: linear-gradient(135deg,
        #e8f0ea 0%,
        #f2f7f3 100%
    );
    border-radius: 12px;
}

.liv-tk-hero-row td {
    border-radius: 12px;
}

.liv-tk-hero-row td:first-child {
    border-radius: 12px 0 0 12px;
}

.liv-tk-hero-row td:last-child {
    border-radius: 0 12px 12px 0;
}

.liv-tk-hero-label {
    font-weight: 800;
    color: #3d5441;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.liv-tk-hero-label em {
    display: block;
    font-style: normal;
    font-weight: 500;
    color: #5c7d62;
    text-transform: none;
    letter-spacing: 0.1px;
    margin-top: 2px;
}

.liv-tk-hero-price {
    font-weight: 900;
    color: #3d5441;
    text-align: right;
    letter-spacing: -0.5px;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    /* Scale up via padding + weight instead of font-size */
    padding: 16px 20px !important;
}

/* ---- Retail Strikethrough Row ---- */
.liv-tk-retail-row td {
    color: #6b7a6e;
    font-weight: 400;
    padding: 8px 16px;
}

.liv-tk-retail-label {
    font-weight: 600;
    color: #6b7a6e;
    letter-spacing: 0.2px;
}

.liv-tk-price-strike {
    text-decoration: line-through;
    text-decoration-color: #dc4f4f;
    text-decoration-thickness: 2px;
    color: #9aab9d;
    font-weight: 500;
    text-align: right;
    opacity: 0.7;
}

/* ---- Savings Callout Row ---- */
.liv-tk-savings-row td {
    padding: 0;
}

.liv-tk-savings-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg,
        #faf5eb 0%,
        #f5edd8 100%
    );
    border: 1.5px solid #b8955a;
    border-radius: 10px;
    padding: 10px 18px;
    margin: 4px 0;
    text-align: center;
    font-weight: 800;
    color: #8a6c38;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    animation: liv-tk-save-glow 3s ease-in-out infinite;
}

@keyframes liv-tk-save-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 149, 90, 0.22); }
    50%      { box-shadow: 0 0 16px 4px rgba(184, 149, 90, 0.22); }
}

.liv-tk-savings-icon {
    display: inline-block;
    animation: liv-tk-pulse 2s ease-in-out infinite;
}


/* =============================================================
   4. RETAIL-ONLY LABEL OVERRIDE
   Replaces inline font-size: small on td elements.
   ============================================================= */

.liv-tk-label-secondary {
    font-weight: 600;
    color: #6b7a6e;
    letter-spacing: 0.1px;
}

.liv-tk-label-secondary em {
    display: block;
    font-style: italic;
    font-weight: 400;
    color: #9aab9d;
    margin-top: 2px;
}


/* =============================================================
   5. RESPONSIVE — Mobile adjustments
   ============================================================= */

@media (max-width: 480px) {
    .liv-tk-banner {
        padding: 14px 16px;
        border-radius: 10px;
    }

    .liv-tk-banner-eyebrow {
        letter-spacing: 1.8px;
    }

    .liv-tk-hero-price {
        padding: 12px 14px !important;
    }

    .liv-tk-savings-cell {
        padding: 8px 12px;
        letter-spacing: 0.8px;
    }
}


/* =============================================================
   6. ACCESSIBILITY — Reduced motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    .liv-tk-banner::before {
        animation: none;
    }
    .liv-tk-spark,
    .liv-tk-savings-icon {
        animation: none;
    }
    .liv-tk-savings-cell {
        animation: none;
        box-shadow: 0 0 8px 2px rgba(184, 149, 90, 0.22);
    }
}