/* ==========================================================
   MVPROMOCODES UI COMPONENTS
   Version: 1.0
   ========================================================== */

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 32px;

    border:none;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

    line-height:1;

    cursor:pointer;

    text-decoration:none;

    transition:.35s ease;

    white-space:nowrap;

}

.btn-primary{

    background:#16A34A;

    color:#fff;

    box-shadow:0 15px 35px rgba(22,163,74,.22);

}

.btn-primary:hover{

    background:#15803D;

    transform:translateY(-3px);

    box-shadow:0 22px 45px rgba(22,163,74,.30);

}

.btn-outline{

    background:#fff;

    color:#16A34A;

    border:2px solid #16A34A;

}

.btn-outline:hover{

    background:#16A34A;

    color:#fff;

}

/* ==========================================================
   BADGES
   ========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    background:#ECFDF5;

    color:#166534;

    border:1px solid #BBF7D0;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

}

/* ==========================================================
   HERO CARD
   ========================================================== */

.hero-card{

    background:linear-gradient(135deg,#16A34A,#22C55E);

    border-radius:28px;

    padding:48px;

    color:#fff;

    box-shadow:

        0 30px 60px rgba(22,163,74,.22),

        0 8px 20px rgba(0,0,0,.05);

}

.hero-card h2{

    font-size:48px;

    font-weight:900;

    margin:18px 0;

    letter-spacing:1px;

}

.hero-card p{

    color:#fff;

    line-height:1.8;

}

/* ==========================================================
   HERO STATS
   ========================================================== */

.hero-stats{

    display:flex;

    gap:40px;

    flex-wrap:wrap;

}

.hero-stats div{

    min-width:90px;

}

.hero-stats strong{

    display:block;

    font-size:30px;

    color:#0F172A;

}

.hero-stats span{

    font-size:14px;

    color:#64748B;

}

/* ==========================================================
   HERO CODE LIST
   ========================================================== */

.hero-code-list{

    list-style:none;

    padding:0;

    margin:0;

}

.hero-code-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.20);

}

.hero-code-list li:last-child{

    border-bottom:none;

}

.hero-code-list span{

    font-size:14px;

    opacity:.95;

}

/* ==========================================================
   PROMO CARDS
   ========================================================== */

.promo-card{

    background:#fff;

    border:1px solid #E2E8F0;

    border-radius:var(--radius-lg);

    padding:36px;

    text-align:center;

    transition:.35s ease;

    box-shadow:0 10px 35px rgba(15,23,42,.05);

}

.promo-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 15px 30px rgba(15,23,42,.05),
    0 35px 70px rgba(15,23,42,.08);

}

.promo-title{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:#DCFCE7;

    color:#166534;

    font-size:12px;

    font-weight:700;

    margin-bottom:20px;

}

.promo-code{

    font-size:42px;

    font-weight:900;

    color:#16A34A;

    letter-spacing:2px;

    margin-bottom:18px;

}

.promo-benefit{

    color:#64748B;

    line-height:1.9;

    margin-bottom:28px;

}

/* ==========================================================
   FEATURED PROMO
   ========================================================== */

.promo-card.featured{

    position:relative;

    border:2px solid #16A34A;

}

.promo-card.featured:hover{

    transform:translateY(-8px) scale(1.02);

}

.promo-card.featured::before{

    content:"⭐ RECOMMENDED";

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    background:#16A34A;

    color:#fff;

    padding:6px 18px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

}

/* ==========================================================
   TRUST BAR
   ========================================================== */

.trust-bar{

    background:#ECFDF5;

    border-top:1px solid #BBF7D0;

    border-bottom:1px solid #BBF7D0;

    padding:18px 0;

}

.trust-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    text-align:center;

    font-weight:700;

    color:#166534;

}

/* ==========================================================
   AI OVERVIEW
   ========================================================== */

.quick-answer{

    background:#fff;

    border-left:6px solid #16A34A;

    border-radius:20px;

    padding:48px;

    box-shadow:0 12px 35px rgba(15,23,42,.05);

}

.promo-highlight{

    display:inline-block;

    padding:6px 14px;

    background:#DCFCE7;

    color:#166534;

    border-radius:999px;

    font-weight:700;

}

/* ==========================================================
   COPY BUTTON
   ========================================================== */

.copy-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    border:none;

    border-radius:14px;

    padding:16px;

    background:#16A34A;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:
    background .3s,
    transform .3s,
    box-shadow .3s;

}

.copy-btn:hover{

    background:#15803D;

    transform:translateY(-2px);

}

/* ==========================================================
   UTILITIES
   ========================================================== */

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}
.mt-60{margin-top:60px;}

.text-center{
    text-align:center;
}

.w-100{
    width:100%;
}

/* ==========================================================
   FEATURE BOXES
========================================================== */

.feature-box{

    background:#fff;

    border:1px solid #E2E8F0;

    border-radius:var(--radius-lg);

    padding:35px;

    text-align:center;

    transition:.35s ease;

    box-shadow:0 8px 30px rgba(15,23,42,.04);

}

.feature-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(15,23,42,.10);

}

.feature-icon{

    width:72px;

    height:72px;

    margin:0 auto 20px;

    border-radius:18px;

    background:#ECFDF5;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}

.feature-box h3{

    margin-bottom:14px;

    font-size:22px;

    color:#0F172A;

}

.feature-box p{

    color:#64748B;

    line-height:1.8;

}

/* ==========================================================
   RELATED GUIDE CARDS
========================================================== */

.related-card{

    display:block;

    text-decoration:none;

    color:inherit;

    background:#fff;

    border:1px solid #E2E8F0;

    border-radius:var(--radius-lg);

    overflow:hidden;

    transition:.35s ease;

}

.related-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(15,23,42,.08);

}

.related-content{

    padding:30px;

}

.related-card h3{

    font-size:22px;

    margin-bottom:14px;

    color:#0F172A;

}

.related-card p{

    color:#64748B;

    line-height:1.8;

}

/* ==========================================================
   TABLE
========================================================== */

.table-wrapper{

    overflow-x:auto;

    background:#fff;

    border-radius:var(--radius-lg);

    border:1px solid #E2E8F0;

}

.compare-table{

    width:100%;

    border-collapse:collapse;

}

.compare-table th{

    background:#16A34A;

    color:#fff;

    padding:20px;

    text-align:left;

    font-size:15px;

}

.compare-table td{

    padding:18px 20px;

    border-bottom:1px solid #E2E8F0;

    color:#475569;

}

.compare-table tr:hover{

    background:#F8FAFC;

}

/* ==========================================================
   FAQ
========================================================== */

.faq-item{

    background:#fff;

    border:1px solid #E2E8F0;

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

}

.faq-question{

    cursor:pointer;

    padding:24px 30px;

    font-size:18px;

    font-weight:700;

    position:relative;

}

.faq-question::after{

    content:"+";

    position:absolute;

    right:30px;

    top:50%;

    transform:translateY(-50%);

    font-size:28px;

    color:#16A34A;

}

.faq-item.active .faq-question::after{

    content:"−";

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    padding:0 30px;

    transition:

        max-height .35s ease,

        padding .35s ease;

}

.faq-item.active .faq-answer{

    max-height:500px;

    padding:0 30px 28px;

}

/* ==========================================================
   AUTHOR CARD
========================================================== */

.author-card{

    display:flex;

    align-items:center;

    gap:35px;

    background:#fff;

    border:1px solid #E2E8F0;

    border-radius:var(--radius-lg);

    padding:40px;

}

.author-card img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #ECFDF5;

}

.author-card h3{

    font-size:28px;

    margin-bottom:8px;

}

.author-role{

    color:#16A34A;

    font-weight:700;

    margin-bottom:15px;

}

/* ==========================================================
   FOOTER
========================================================== */

.footer-column h3{

    font-size:20px;

    margin-bottom:20px;

}

.footer-column p{

    color:#CBD5E1;

    line-height:1.8;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:12px;

}

.footer-column a{

    color:#CBD5E1;

    text-decoration:none;

    transition:.3s;

}

.footer-column a:hover{

    color:#fff;

}

.footer-bottom{

    text-align:center;

    padding-top:35px;

    margin-top:60px;

    border-top:1px solid rgba(255,255,255,.1);

    color:#94A3B8;

    line-height:1.8;

}

/* ==========================================================
   TOAST
========================================================== */

.toast{

    position:fixed;

    left:50%;

    bottom:30px;

    padding:16px 32px;

    background:#16A34A;

    color:#fff;

    border-radius:999px;

    font-weight:700;

    opacity:0;

    visibility:hidden;

    transform:translate(-50%,20px);

    transition:

        opacity .3s ease,

        transform .3s ease,

        visibility .3s ease;

    z-index:9999;

    box-shadow:0 25px 50px rgba(22,163,74,.30);

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translate(-50%,0);

}

/* ==========================================================
   MVPROMOCODES COMPONENTS
   PART 3/3
   Animations • Sticky CTA • Loading • Accessibility
   ========================================================== */

/* ==========================================================
   STICKY CTA
========================================================== */

.sticky-cta{

    position:fixed;

    left:20px;

    right:20px;

    bottom:20px;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(100px);

    transition:

        opacity .35s ease,

        transform .35s ease,

        visibility .35s ease;

}

.sticky-cta.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.sticky-cta .btn{

    width:100%;

    justify-content:center;

    box-shadow:0 25px 50px rgba(22,163,74,.35);

}

/* ==========================================================
   SECTION HOVER
========================================================== */

.section{

    position:relative;

}

.section:hover{

    z-index:1;

}

/* ==========================================================
   CARD ANIMATION
========================================================== */

.promo-card,
.feature-box,
.related-card,
.author-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.promo-card:hover,
.feature-box:hover,
.related-card:hover{

    border-color:#16A34A;

}

/* ==========================================================
   BUTTON RIPPLE READY
========================================================== */

.btn{

    overflow:hidden;

    position:relative;

}

/* ==========================================================
   IMAGE
========================================================== */

img{

    max-width:100%;

    height:auto;

    display:block;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    transition:.3s;

}

a:hover{

    text-decoration:none;

}

/* ==========================================================
   INPUTS
========================================================== */

input,
textarea,
select{

    width:100%;

    border:1px solid #E2E8F0;

    border-radius:14px;

    padding:14px 18px;

    outline:none;

    transition:.3s;

    font:inherit;

}

input:focus,
textarea:focus,
select:focus{

    border-color:#16A34A;

    box-shadow:0 0 0 4px rgba(22,163,74,.12);

}

/* ==========================================================
   LISTS
========================================================== */

ul.clean{

    list-style:none;

    padding:0;

    margin:0;

}

/* ==========================================================
   DIVIDERS
========================================================== */

.divider{

    height:1px;

    background:#E2E8F0;

    margin:50px 0;

}

/* ==========================================================
   SHADOW HELPERS
========================================================== */

.shadow-sm{

    box-shadow:0 5px 20px rgba(15,23,42,.05);

}

.shadow{

    box-shadow:0 15px 35px rgba(15,23,42,.08);

}

.shadow-lg{

    box-shadow:0 25px 60px rgba(15,23,42,.12);

}

/* ==========================================================
   RADIUS
========================================================== */

.radius{

    border-radius:var(--radius-lg);

}

.radius-sm{

    border-radius:14px;

}

.radius-full{

    border-radius:999px;

}

/* ==========================================================
   FADE UP
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.animate{

    animation:fadeUp .7s ease both;

}

/* ==========================================================
   PULSE
========================================================== */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

.pulse{

    animation:pulse 2.5s infinite;

}

/* ==========================================================
   LOADING
========================================================== */

.loading{

    position:relative;

    overflow:hidden;

}

.loading::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    animation:loading 1.5s linear infinite;

}

@keyframes loading{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(100%);

    }

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#16A34A;

}

/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:#16A34A;

    color:#fff;

}

/* ==========================================================
   FOCUS
========================================================== */

:focus-visible{

    outline:3px solid rgba(22,163,74,.35);

    outline-offset:2px;

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

    .site-header,
    .sticky-cta,
    .copy-btn,
    .toast{

        display:none !important;

    }

}

/* ==========================================================
   DARK MODE READY
========================================================== */

@media(prefers-color-scheme:dark){

    :root{

        color-scheme:light;

    }

}


/* ==========================================================
   HELPERS
========================================================== */

.card{

    background:#fff;

    border:1px solid #E2E8F0;

    border-radius:var(--radius-lg);

    padding:32px;

}

.success{

    color:#16A34A;

}

.warning{

    color:#D97706;

}

.error{

    color:#DC2626;

}

.hidden{

    display:none !important;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   COPY BUTTON SUCCESS
========================================================== */

.copy-btn.copied{

    background:#15803D;

    pointer-events:none;

    opacity:.95;

}