/*==================================================
SINGLE COUPON
BESTBUYOFFERZ
==================================================*/

:root{

    --bbo-primary:#312E81;
    --bbo-primary-hover:#4338CA;

    --bbo-secondary:#4F46E5;

    --bbo-dark:#0F172A;

    --bbo-accent:#F5B400;

    --bbo-bg:#F8FAFC;

    --bbo-border:#E5E7EB;

    --bbo-text:#1F2937;

    --bbo-muted:#6B7280;

    --bbo-success:#10B981;

    --bbo-danger:#EF4444;

    --bbo-radius:22px;

    --bbo-shadow:
    0 15px 45px rgba(15,23,42,.08);

    --bbo-transition:.30s ease;

}


.single-coupon-page{

    background:var(--bbo-bg);

    padding:50px 0 90px;

    overflow:hidden;

}


.single-coupon-page .container{

    max-width:1240px;

    margin:auto;

    padding:0 20px;

}


/*==================================================
Breadcrumb
==================================================*/

.coupon-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:35px;

    font-size:14px;

    color:var(--bbo-muted);

}

.coupon-breadcrumb a{

    color:var(--bbo-primary);

    text-decoration:none;

    font-weight:600;

    transition:var(--bbo-transition);

}

.coupon-breadcrumb a:hover{

    color:var(--bbo-secondary);

}

.coupon-breadcrumb span{

    opacity:.8;

}


/*==================================================
Hero
==================================================*/

.coupon-hero{

    display:grid;

    grid-template-columns:1.5fr .8fr;

    gap:35px;

    position:relative;

    padding:45px;

    border-radius:28px;

    overflow:hidden;

    background:

    radial-gradient(circle at top left,
    rgba(79,70,229,.18),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(245,180,0,.12),
    transparent 35%),

    linear-gradient(
    135deg,
    #0F172A,
    #1E293B,
    #0F172A);

    color:#fff;

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

    margin-bottom:45px;

}

.coupon-hero::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:

    rgba(255,255,255,.05);

    right:-130px;

    top:-130px;

}

.coupon-hero::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:

    rgba(245,180,0,.08);

    left:-90px;

    bottom:-90px;

}


/*==================================================
Hero Columns
==================================================*/

.coupon-hero-left{

    position:relative;

    z-index:2;

}

.coupon-hero-right{

    position:relative;

    z-index:2;

}


/*==================================================
Store Card
==================================================*/

.coupon-store-card{

    display:flex;

    align-items:center;

    gap:22px;

    margin-bottom:35px;

}

.coupon-store-card img{

    width:105px;

    height:105px;

    object-fit:contain;

    background:#fff;

    padding:14px;

    border-radius:20px;

    box-shadow:

    0 12px 35px rgba(0,0,0,.18);

}

.coupon-store-label{

    font-size:12px;

    letter-spacing:2px;

    color:#CBD5E1;

    margin-bottom:8px;

}

.coupon-store-card h2{

    color:#fff;

    margin:0;

    font-size:28px;

    font-weight:800;

}

.coupon-store-card a{

    display:inline-block;

    margin-top:10px;

    color:var(--bbo-accent);

    font-weight:700;

    text-decoration:none;

    transition:var(--bbo-transition);

}

.coupon-store-card a:hover{

    color:#fff;

}


/*==================================================
Heading
==================================================*/

.coupon-heading{

    margin-bottom:28px;

}

.coupon-heading h1{

    font-size:48px;

    line-height:1.18;

    margin:0 0 20px;

    font-weight:900;

    color:#fff;

    max-width:760px;

}


/*==================================================
Short Description
==================================================*/

.coupon-short-description{

    max-width:760px;

    font-size:17px;

    line-height:1.8;

    color:#E2E8F0;

}

.coupon-short-description p{

    margin:0;

}


/*==================================================
Hero Responsive Base
==================================================*/

@media(max-width:1100px){

.coupon-hero{

grid-template-columns:1fr;

}

.coupon-heading h1{

font-size:40px;

}

}

@media(max-width:768px){

.single-coupon-page{

padding:30px 0 90px;

}

.coupon-hero{

padding:28px;

border-radius:22px;

}

.coupon-store-card{

flex-direction:column;

align-items:flex-start;

}

.coupon-store-card img{

width:90px;

height:90px;

}

.coupon-heading h1{

font-size:30px;

line-height:1.3;

}

.coupon-short-description{

font-size:15px;

}

}

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

.coupon-badges{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    text-transform:uppercase;

    transition:var(--bbo-transition);

}

.badge.verified{

    background:rgba(16,185,129,.15);

    color:#34D399;

}

.badge.exclusive{

    background:rgba(245,180,0,.15);

    color:#F5B400;

}

.badge.featured{

    background:rgba(79,70,229,.18);

    color:#A5B4FC;

}

.badge.active{

    background:rgba(59,130,246,.18);

    color:#93C5FD;

}

.badge.expired{

    background:rgba(239,68,68,.18);

    color:#FCA5A5;

}

.badge.type{

    background:rgba(255,255,255,.10);

    color:#FFFFFF;

}


/*==================================================
ACTION CARD
==================================================*/

.coupon-action-card{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    border-radius:24px;

    padding:28px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.18);

}


/*==================================================
COUPON CODE BOX
==================================================*/

.coupon-code-box{

    margin-bottom:26px;

}

.coupon-code{

    display:flex;

    align-items:center;

    justify-content:center;

    height:78px;

    border:2px dashed var(--bbo-accent);

    border-radius:18px;

    background:#ffffff;

    color:var(--bbo-dark);

    font-size:32px;

    font-weight:900;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

    transition:var(--bbo-transition);

}

.coupon-code:hover{

    transform:translateY(-2px);

}


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

.copy-code-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    background:linear-gradient(
    135deg,
    var(--bbo-accent),
    #FACC15
    );

    color:#111827;

    font-size:16px;

    font-weight:800;

    transition:var(--bbo-transition);

    box-shadow:

    0 12px 30px rgba(245,180,0,.30);

}

.copy-code-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 18px 40px rgba(245,180,0,.45);

}


/*==================================================
PRIMARY BUTTON
==================================================*/

.coupon-primary-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:60px;

    margin-top:18px;

    border-radius:16px;

    background:linear-gradient(
    135deg,
    var(--bbo-primary),
    var(--bbo-secondary)
    );

    color:#fff;

    text-decoration:none;

    font-size:17px;

    font-weight:800;

    transition:var(--bbo-transition);

    box-shadow:

    0 18px 45px rgba(49,46,129,.30);

}

.coupon-primary-btn:hover{

    transform:translateY(-3px);

    color:#fff;

    box-shadow:

    0 25px 55px rgba(49,46,129,.45);

}


/*==================================================
COUPON META
==================================================*/

.coupon-meta{

    margin-top:28px;

    display:grid;

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

    gap:14px;

}

.coupon-meta div{

    background:rgba(255,255,255,.08);

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

    border-radius:16px;

    padding:18px 16px;

    text-align:center;

}

.coupon-meta strong{

    display:block;

    font-size:12px;

    color:#CBD5E1;

    letter-spacing:1px;

    margin-bottom:8px;

    text-transform:uppercase;

}

.coupon-meta span{

    display:block;

    color:#fff;

    font-size:16px;

    font-weight:700;

}


/*==================================================
CARD HOVER EFFECTS
==================================================*/

.coupon-action-card,
.coupon-store-card img{

    transition:all .35s ease;

}

.coupon-action-card:hover{

    transform:translateY(-5px);

    box-shadow:

    0 30px 60px rgba(0,0,0,.25);

}


/*==================================================
BUTTON ACTIVE
==================================================*/

.copy-code-btn:active,
.coupon-primary-btn:active{

    transform:scale(.97);

}


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

.copy-code-btn:focus,
.coupon-primary-btn:focus{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(245,180,0,.25);

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){

.coupon-meta{

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

}

}

@media(max-width:600px){

.coupon-action-card{

padding:22px;

}

.coupon-code{

font-size:24px;

letter-spacing:2px;

height:68px;

}

.copy-code-btn{

height:52px;

font-size:15px;

}

.coupon-primary-btn{

height:54px;

font-size:15px;

}

.coupon-meta{

grid-template-columns:1fr;

}

}

/*==================================================
CONTENT SECTION
==================================================*/

.coupon-content-section{

    margin:55px 0;

}

.coupon-content{

    background:#fff;

    border-radius:24px;

    padding:40px;

    border:1px solid var(--bbo-border);

    box-shadow:var(--bbo-shadow);

}

.coupon-content h2{

    font-size:34px;

    color:var(--bbo-dark);

    margin:0 0 25px;

    font-weight:800;

}

.coupon-content p{

    color:var(--bbo-text);

    line-height:1.9;

    margin-bottom:18px;

    font-size:17px;

}

.coupon-content ul,
.coupon-content ol{

    margin:20px 0 20px 25px;

}

.coupon-content li{

    margin-bottom:10px;

    color:var(--bbo-text);

    line-height:1.8;

}

.coupon-content img{

    max-width:100%;

    border-radius:16px;

    height:auto;

}


/*==================================================
INFO GRID
==================================================*/

.coupon-info-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    margin-top:55px;

}


/*==================================================
LEFT COLUMN CARDS
==================================================*/

.coupon-info-card{

    background:#fff;

    border-radius:22px;

    padding:32px;

    margin-bottom:30px;

    border:1px solid var(--bbo-border);

    box-shadow:var(--bbo-shadow);

    transition:var(--bbo-transition);

}

.coupon-info-card:hover{

    transform:translateY(-4px);

}

.coupon-info-card h2{

    margin:0 0 24px;

    font-size:28px;

    color:var(--bbo-dark);

}


/*==================================================
HOW TO USE
==================================================*/

.coupon-steps{

    margin:0;

    padding-left:24px;

}

.coupon-steps li{

    margin-bottom:18px;

    line-height:1.9;

    color:var(--bbo-text);

    font-size:16px;

}

.coupon-steps strong{

    color:var(--bbo-primary);

}


/*==================================================
TERMS
==================================================*/

.coupon-terms{

    margin:0;

    padding-left:20px;

}

.coupon-terms li{

    margin-bottom:16px;

    line-height:1.8;

    color:var(--bbo-text);

}


/*==================================================
SIDEBAR
==================================================*/

.coupon-sidebar{

    position:sticky;

    top:110px;

    height:fit-content;

}

.coupon-sidebar-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

    margin-bottom:28px;

    border:1px solid var(--bbo-border);

    box-shadow:var(--bbo-shadow);

    transition:var(--bbo-transition);

}

.coupon-sidebar-card:hover{

    transform:translateY(-4px);

}

.coupon-sidebar-card h3{

    margin:0 0 24px;

    color:var(--bbo-dark);

    font-size:24px;

}

.coupon-sidebar-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.coupon-sidebar-card li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid var(--bbo-border);

    font-size:15px;

}

.coupon-sidebar-card li:last-child{

    border-bottom:none;

}

.coupon-sidebar-card strong{

    color:var(--bbo-dark);

}

.coupon-sidebar-card span{

    color:var(--bbo-muted);

    font-weight:600;

}


/*==================================================
ABOUT STORE
==================================================*/

.store-description{

    color:var(--bbo-text);

    line-height:1.9;

    margin-bottom:22px;

}

.store-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 22px;

    border-radius:14px;

    background:var(--bbo-primary);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:var(--bbo-transition);

}

.store-link:hover{

    background:var(--bbo-secondary);

    color:#fff;

}


/*==================================================
RELATED COUPONS
==================================================*/

.related-coupons{

    margin:70px 0;

}

.related-coupons h2{

    margin:0 0 30px;

    color:var(--bbo-dark);

    font-size:34px;

    font-weight:800;

}

.related-grid{

    display:grid;

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

    gap:24px;

}

.related-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

    border:1px solid var(--bbo-border);

    box-shadow:var(--bbo-shadow);

    transition:var(--bbo-transition);

}

.related-card:hover{

    transform:translateY(-6px);

}

.related-card h3{

    margin:0 0 18px;

    font-size:22px;

    line-height:1.4;

}

.related-card h3 a{

    color:var(--bbo-dark);

    text-decoration:none;

}

.related-card h3 a:hover{

    color:var(--bbo-primary);

}

.related-excerpt{

    color:var(--bbo-muted);

    line-height:1.8;

    margin-bottom:22px;

}

.related-expiry{

    display:inline-block;

    margin-bottom:18px;

    color:var(--bbo-danger);

    font-weight:700;

    font-size:14px;

}

.related-button{

    display:inline-flex;

    padding:12px 18px;

    border-radius:12px;

    background:var(--bbo-primary);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:var(--bbo-transition);

}

.related-button:hover{

    background:var(--bbo-secondary);

    color:#fff;

}


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

.coupon-faq{

    margin-top:70px;

}

.coupon-faq h2{

    font-size:34px;

    color:var(--bbo-dark);

    margin-bottom:30px;

}

.faq-item{

    background:#fff;

    border-radius:20px;

    padding:28px;

    margin-bottom:22px;

    border:1px solid var(--bbo-border);

    box-shadow:var(--bbo-shadow);

}

.faq-item h3{

    margin:0 0 16px;

    color:var(--bbo-dark);

    font-size:22px;

}

.faq-item p{

    margin:0;

    color:var(--bbo-text);

    line-height:1.9;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1100px){

.related-grid{

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

}

.coupon-info-grid{

grid-template-columns:1fr;

}

.coupon-sidebar{

position:relative;

top:0;

}

}

@media(max-width:768px){

.coupon-content{

padding:26px;

}

.coupon-info-card{

padding:24px;

}

.related-grid{

grid-template-columns:1fr;

}

.related-card{

padding:24px;

}

.coupon-content h2,
.related-coupons h2,
.coupon-faq h2{

font-size:28px;

}

.coupon-sidebar-card{

padding:22px;

}

}

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

.coupon-mobile-bar{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    z-index:9999;

    display:none;

    gap:12px;

    padding:14px;

    background:rgba(15,23,42,.96);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:0 -10px 35px rgba(0,0,0,.18);

}

.mobile-copy-btn,
.mobile-deal-btn{

    flex:1;

    height:54px;

    border:none;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-weight:800;

    cursor:pointer;

    transition:all .30s ease;

}

.mobile-copy-btn{

    background:linear-gradient(
    135deg,
    var(--bbo-accent),
    #FFD54A
    );

    color:#111827;

}

.mobile-deal-btn{

    background:linear-gradient(
    135deg,
    var(--bbo-primary),
    var(--bbo-secondary)
    );

    color:#fff;

}

.mobile-copy-btn:hover,
.mobile-deal-btn:hover{

    transform:translateY(-2px);

}


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

#coupon-toast{

    position:fixed;

    left:50%;

    bottom:110px;

    transform:translateX(-50%) translateY(30px);

    background:#111827;

    color:#fff;

    padding:14px 22px;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    opacity:0;

    visibility:hidden;

    transition:all .35s ease;

    z-index:10000;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

#coupon-toast.show{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}


/*==================================================
GLOBAL ANIMATIONS
==================================================*/

.coupon-content,
.coupon-info-card,
.related-card,
.coupon-sidebar-card,
.coupon-action-card{

    transition:
    transform .30s ease,
    box-shadow .30s ease,
    border-color .30s ease;

}

.coupon-content:hover,
.coupon-info-card:hover,
.related-card:hover,
.coupon-sidebar-card:hover{

    border-color:rgba(79,70,229,.20);

}


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

.single-coupon-page ::-webkit-scrollbar{

    width:10px;

}

.single-coupon-page ::-webkit-scrollbar-track{

    background:#EEF2F7;

}

.single-coupon-page ::-webkit-scrollbar-thumb{

    background:var(--bbo-primary);

    border-radius:20px;

}

.single-coupon-page ::-webkit-scrollbar-thumb:hover{

    background:var(--bbo-secondary);

}


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

.single-coupon-page ::selection{

    background:var(--bbo-primary);

    color:#fff;

}


/*==================================================
LINKS INSIDE CONTENT
==================================================*/

.coupon-content a{

    color:var(--bbo-primary);

    font-weight:700;

    text-decoration:none;

}

.coupon-content a:hover{

    color:var(--bbo-secondary);

}


/*==================================================
TABLES
==================================================*/

.coupon-content table{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

.coupon-content th,
.coupon-content td{

    border:1px solid var(--bbo-border);

    padding:14px;

    text-align:left;

}

.coupon-content th{

    background:#F8FAFC;

    color:var(--bbo-dark);

}


/*==================================================
BLOCKQUOTE
==================================================*/

.coupon-content blockquote{

    margin:25px 0;

    padding:20px 25px;

    border-left:5px solid var(--bbo-primary);

    background:#F8FAFC;

    border-radius:12px;

    font-style:italic;

}


/*==================================================
IMAGES
==================================================*/

.coupon-content figure{

    margin:30px 0;

}

.coupon-content figcaption{

    margin-top:10px;

    text-align:center;

    color:var(--bbo-muted);

    font-size:14px;

}


/*==================================================
SMALL DEVICES
==================================================*/

@media(max-width:991px){

.coupon-mobile-bar{

display:flex;

}

.single-coupon-page{

padding-bottom:120px;

}

}

@media(max-width:576px){

.single-coupon-page .container{

padding:0 16px;

}

.coupon-breadcrumb{

font-size:13px;

gap:8px;

}

.coupon-content p,
.store-description,
.related-excerpt,
.faq-item p{

font-size:15px;

line-height:1.8;

}

.mobile-copy-btn,
.mobile-deal-btn{

height:50px;

font-size:15px;

}

#coupon-toast{

width:calc(100% - 30px);

text-align:center;

bottom:90px;

}

}

@media(max-width:420px){

.coupon-hero{

padding:22px;

}

.coupon-heading h1{

font-size:26px;

}

.coupon-store-card h2{

font-size:22px;

}

.badge{

font-size:11px;

padding:8px 14px;

}

.coupon-code{

font-size:20px;

letter-spacing:1px;

}

.coupon-content h2,
.related-coupons h2,
.coupon-faq h2{

font-size:24px;

}

.faq-item h3{

font-size:19px;

}

}

/*==================================================
JS ANIMATIONS
==================================================*/

.copy-code-btn.copied,
.mobile-copy-btn.copied{

    background:#10B981;

    color:#fff;

}

.fade-up{

    opacity:0;

    transform:translateY(25px);

    transition:all .6s ease;

}

.fade-up.visible{

    opacity:1;

    transform:translateY(0);

}


/*==================================================
END
==================================================*/