/* =========================================
   1. GLOBAL BLACK FRIDAY THEME OVERRIDES
   ========================================= */
:root {
    --bf-pink: #ff003c;
    --bf-dark: #0a0a0a;
}

/* Force Pink Buttons Everywhere */
.template-btn,
.template-btn.primary-btn,
.template-btn.secondary-btn,
div.friday-hosting-offer a.template-btn.primary-btn,
.black-friday-pricing-wrapper .template-btn,
.vps-pricing-table a.template-btn,
.footer-sb-form .template-btn,
.h5-domain-search-form .template-btn {
    background: var(--bf-pink) !important;
    background-color: var(--bf-pink) !important;
    border-color: var(--bf-pink) !important;
    color: #ffffff !important;
    background-image: none !important; /* Removes blue gradients */
    box-shadow: 0 4px 10px rgba(255, 0, 60, 0.3) !important;
    opacity: 1 !important;
}

.template-btn:hover {
    background-color: #d60033 !important;
    transform: translateY(-2px);
}

/* Heartbeat Animation for Main Button */
@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 60, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(255, 0, 60, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 60, 0); }
}
.pulse-effect {
    animation: pulse-red 2s infinite;
}

/* =========================================
   2. PRICING CARDS & TABS
   ========================================= */
.custom-bf-tabs {
    border: 1px solid rgba(0,0,0,0.1);
    padding: 5px;
    border-radius: 50px;
    display: inline-flex;
    background: #f5f5f5;
    flex-wrap: wrap;
    gap: 5px;
}
.custom-bf-tabs .nav-link {
    color: #333;
    font-weight: 600;
    border-radius: 50px;
    padding: 10px 25px;
    transition: all 0.3s ease;
}
.custom-bf-tabs .nav-link.active {
    background-color: var(--bf-pink);
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 0, 60, 0.3);
}

/* Lifetime Deal Glow */
.lifetime-deal {
    border: 2px solid var(--bf-pink);
    box-shadow: 0 0 20px rgba(255, 0, 60, 0.2);
    z-index: 1;
}
.lifetime-deal::after {
    content: "BEST VALUE";
    position: absolute;
    top: -14px; right: 20px;
    background: var(--bf-pink);
    color: #fff;
    font-size: 11px; font-weight: 800;
    padding: 4px 10px; border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Shared Hosting List Spacing */
.pricing-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid #f5f5f5;
    text-align: left;
}
.pricing-list li strong, .pricing-list li b { color: #000; font-weight: 800; }

/* Badges */
.save-badge {
    background: #ffe6ea; color: var(--bf-pink);
    font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px;
}
.discount-badge {
    position: absolute; top: 20px; left: 10px;
    background-color: #ffffff; color: var(--bf-pink);
    font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 4px;
    z-index: 20; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* =========================================
   3. VPS PRICING TABLE (High-Priority Fix)
   ========================================= */

/* Force Table Borders */
.vps-pricing-table table {
    border-collapse: separate; 
    border-spacing: 0; 
    border: 1px solid #e0e0e0;
}

/* HEADER FIX: Force Dark Black (Overrides Blue) */
/* We use 'body' here to make the rule stronger than your theme */
body .vps-pricing-table table thead tr th,
body .vps-pricing-table table thead th {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
    padding: 25px 10px; 
    vertical-align: top;
}

/* Fix the First Column (Features Title) */
body .vps-pricing-table table thead th:first-child { 
    background-color: #000000 !important; 
    vertical-align: middle; 
}

/* Fix the "Popular" Column Header */
body .vps-pricing-table table thead tr th.popular-column {
    background: #1f1f1f !important;
    background-color: #1f1f1f !important;
    border-top: 4px solid #ff003c !important;
    position: relative;
}

/* Highlight Body for Popular Column */
.vps-pricing-table tbody td.popular-column-body {
    background-color: #fffcfd !important;
    font-weight: 600; 
    color: #000;
    border-left: 1px solid #ffe0e6; 
    border-right: 1px solid #ffe0e6;
}

/* Popular Badge */
.popular-badge {
    background-color: #ff003c; 
    color: #fff;
    font-size: 10px; 
    font-weight: bold; 
    padding: 4px 10px; 
    border-radius: 20px;
    position: absolute; 
    top: -12px; 
    left: 50%; 
    transform: translateX(-50%);
    box-shadow: 0 2px 10px rgba(255, 0, 60, 0.5); 
    z-index: 10;
}

/* Price Styling */
.vps-pricing-table .price-stack h4 { 
    color: #ff003c !important; 
    font-size: 28px; 
    font-weight: 800; 
    margin: 5px 0; 
    text-shadow: none !important;
}
.vps-pricing-table .price-stack span { 
    color: #888 !important; 
    text-decoration: line-through; 
    font-size: 14px; 
}
.vps-pricing-table .h6 { 
    color: #fff !important; 
    font-size: 18px; 
    font-weight: 600; 
    display: block; 
}

/* =========================================
   4. DOMAIN SECTION & FOOTER
   ========================================= */
.bf-domain-box { padding: 100px 0; background-color: #f9f9f9; }

/* Right Side Coupon Card */
.domain-sale-card {
    background: #fff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 30px; position: relative; text-align: center; overflow: hidden;
    border: 2px solid #ffe6ea; max-width: 300px; margin-left: auto;
}
.domain-sale-ribbon {
    background: var(--bf-pink); color: #fff;
    position: absolute; top: 15px; right: -30px; transform: rotate(45deg);
    padding: 5px 40px; font-size: 10px; font-weight: bold; text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.off-badge-circle {
    background: #000 !important; color: #fff !important;
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: bold; position: absolute; top: 15px; left: 15px;
    line-height: 1.1; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* Footer */
.footer { background-color: #0a0a0a; color: #acacac; }
.footer-widget .widget-title, .ft-subtitle { color: #fff; font-weight: 700; }
.footer-nav li a { color: #acacac; transition: all 0.3s ease; text-decoration: none; }
.footer-nav li a:hover { color: var(--bf-pink); padding-left: 5px; }
.social-nav li a { background: #222; transition: all 0.3s ease; }
.social-nav li a:hover { background: var(--bf-pink); color: #fff; }
.footer-disclaimer p { font-size: 11px; line-height: 1.6; opacity: 0.6; margin-bottom: 8px; }

/* =========================================
   5. LIVE STOCK DOT ANIMATION
   ========================================= */
.blink-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #ff003c !important; /* Pink Color */
    border-radius: 50%;
    display: inline-block !important;
    animation: blinker 1.5s linear infinite;
    margin-right: 8px; /* Space between dot and text */
    vertical-align: middle;
}

@keyframes blinker {
    50% { opacity: 0; }
}