/* =====================================================
   GLOBAL / RESET
===================================================== */

.ssi-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:10px;
    padding:18px 15px;
    margin-bottom:20px;
}

.ssi-btn{
    display:inline-block;
    width:100%;
    padding:10px;
    border:none;
    border-radius:8px;
    background:#1e73be;
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    text-align:center;
    text-decoration:none;
    transition:0.2s;
}

.ssi-btn:hover{
    background:#155d94;
}

/* =====================================================
   LAYOUT
===================================================== */

.ssi-layout{
    display:flex;
    gap:24px;
    max-width:1200px;
    margin:40px auto;
}

.ssi-sidebar{
    width:300px;
    position:sticky;
    top:80px;
}

.ssi-main{
    flex:1;
}

/* =========================
   PAGE HEADER
========================= */

.ssi-page-header{
    margin-bottom:20px;
}

.ssi-page-title{
    font-size:28px;
    font-weight:700;
    margin-bottom:5px;
}

.ssi-page-subtitle{
    font-size:18px;
    font-weight:500;
    color:#666;
    margin-bottom:8px;
}

.ssi-page-updated{
    font-size:13px;
    color:#999;
    margin-bottom:10px;
}

/* =====================================
   DESCRIPTION (JS TRUNCATE VERSION)
===================================== */

.ssi-page-desc-wrap{
    position:relative;
    margin-bottom:15px;
}

.ssi-page-desc{
    line-height:1.6;
    font-size:15px;
    color:#333;
}

/* toggle */
.ssi-desc-toggle{
    margin-left:6px;
    color:#0073aa;
    cursor:pointer;
    font-size:14px;
    white-space:nowrap;
}

.ssi-desc-toggle:hover{
    text-decoration:underline;
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .ssi-page-title{
        font-size:22px;
    }

    .ssi-page-subtitle{
        font-size:16px;
    }

    .ssi-page-desc{
        font-size:13px;
    }

}

/* =====================================================
   BRAND HEADER
===================================================== */

.ssi-brand-header{
    text-align:center;
}

.ssi-brand-logo{
    max-width:120px;
    margin:0 auto 10px;
    display:block;
}

.ssi-brand-name{
    font-size:16px;
    font-weight:600;
    margin-bottom:8px;
}

/* rating */
.ssi-brand-rating{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.ssi-stars .star{
    font-size:22px;
    cursor:pointer;
    color:#ddd;
}

.ssi-stars .star.full{ color:#f39c12; }

.ssi-stars .star.half:before{
    content:'★';
    position:absolute;
    width:50%;
    overflow:hidden;
    color:#f39c12;
}

.ssi-rating-text{
    font-size:13px;
    color:#666;
}

.ssi-rating-message{
    display:none;
    font-size:13px;
    color:#27ae60;
    margin-top:6px;
}

/* =====================================================
   BRAND ABOUT
===================================================== */

.ssi-about-title{
    font-size:15px;
    font-weight:600;
    margin-bottom:10px;
}

.ssi-brand-description{
    font-size:14px;
    line-height:1.6;
    color:#444;
}

/* =====================================================
   BRAND STATS
===================================================== */

.ssi-stats-title{
    font-size:15px;
    font-weight:600;
    margin-bottom:12px;
}

.ssi-stats-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.ssi-stat-row{
    display:flex;
    justify-content:space-between;
    font-size:14px;
}

/* =====================================================
   COUPON LIST
===================================================== */

.ssi-coupon-wrap{
    margin-bottom:20px;
}

/* main */
.ssi-coupon-main{
    border:1px solid #e5e5e5;
    border-radius:10px;
    background:#fff;
    overflow:hidden;
}

.ssi-coupon-wrap.is-open .ssi-coupon-main{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

/* row */
.ssi-coupon-row{
    display:flex;
    gap:20px;
    padding:18px;
    align-items:center;
}

/* left */
.ssi-discount{
    width:90px;
    text-align:center;
    color:#1e73be
}

.ssi-discount-main{
    font-size:26px;
    font-weight:700;
}

.ssi-discount-sub{
    font-size:12px;
}

/* center */
.ssi-content{
    flex:1;
}

.ssi-title{
    font-size:18px;
    font-weight:600;
    margin:5px 0;
}

.ssi-meta-line{
    font-size:11px;
    color:#666;
    margin-bottom:6px;
}

.ssi-type{
    font-weight:600;
    color:#1e73be;
    margin-right:8px;
}

.ssi-verify{
    font-size:11px;
    padding:2px 6px;
    border-radius:5px;
}

.ssi-verify.verified{
    background:#e6f4ea;
    color:#1e7e34;
}

.ssi-verify.unverified{
    background:#f1f1f1;
    color:#777;
}

.ssi-expire{
    font-size:11px;
    margin-top:4px;
}

/* right */
.ssi-action{
    width:150px;
    text-align:right;
}

/* Turn gray */
.ssi-coupon-expired{
    opacity:0.6;
}

.ssi-expired-title{
    margin:25px 0 10px;
    font-size:18px;
    color:#888;
}

.ssi-expired-hidden{
    display:none;
}

/* toggle */
.ssi-expired-toggle-wrap{
    margin-top:10px;
}

.ssi-expired-toggle{
    cursor:pointer;
    color:#0073aa;
    font-size:14px;
}

.ssi-expired-toggle:hover{
    text-decoration:underline;
}

/* =====================================================
   COUPON TOGGLE (Dettagli)
===================================================== */

.ssi-coupon-toggle{
    border-top:1px solid #eee;
    background:#fafafa;
    padding:6px 14px;
    font-size:12px;
    cursor:pointer;
}

.ssi-toggle-inner{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

/* arrow */
.ssi-arrow{
    width:6px;
    height:6px;
    border-right:2px solid #333;
    border-bottom:2px solid #333;
    transform:rotate(45deg);
    transition:0.2s;
}

.ssi-coupon-wrap.is-open .ssi-arrow{
    transform:rotate(-135deg);
}

/* detail */
.ssi-detail-box{
    display:none;
    border:1px solid #e5e5e5;
    border-top:none;
    border-radius:0 0 10px 10px;
    background:#fafafa;
    padding:18px;
    position:relative;
}

.ssi-detail-close{
    position:absolute;
    top:10px;
    right:12px;
    font-size:16px;
    cursor:pointer;
    color:#888;
}

.ssi-detail-block{
    margin-bottom:14px;
}

.ssi-detail-block strong{
    display:block;
    font-size:13px;
    margin-bottom:4px;
}

.ssi-detail-block p{
    margin:0;
    font-size:14px;
    color:#555;
}

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

.ssi-brand-faqs{
    margin-top:30px;
}

.ssi-faq-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
}

.ssi-faq-intro{
    font-size:14px;
    color:#666;
    margin-bottom:20px;
}

.ssi-faq-list{
    border-top:1px solid #eee;
}

.ssi-faq-item{
    border-bottom:1px solid #eee;
}

.ssi-faq-question{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 10px;
    cursor:pointer;
    font-weight:600;
}

.ssi-faq-question:hover{
    background:#f9f9f9;
}

.ssi-faq-text{
    flex:1;
    font-size:15px;
    margin:0;
}

/* arrow */
.ssi-faq-arrow{
    width:14px;
    height:14px;
    position:relative;
}

.ssi-faq-arrow::before{
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    border-right:2px solid #333;
    border-bottom:2px solid #333;
    transform:rotate(45deg);
    transition:0.25s;
}

.ssi-faq-item.active .ssi-faq-arrow::before{
    transform:rotate(-135deg);
}

/* answer */
.ssi-faq-answer{
    display:none;
    padding:0 10px 15px 36px;
}

.ssi-faq-answer div{
    font-size:14px;
    color:#555;
    line-height:1.6;
}

/* highlight */
.ssi-faq-highlight{
    animation:ssiFaqHighlight 1.2s ease;
}

@keyframes ssiFaqHighlight{
    0%{background:#fff9d6;}
    100%{background:transparent;}
}

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

.ssi-faq-nav-title{
    font-size:16px;
    font-weight:600;
    margin-bottom:12px;
}

.ssi-faq-anchor{
    display:block;
    padding:8px;
    border-radius:6px;
    text-decoration:none;
    color:#333;
}

.ssi-faq-anchor:hover{
    background:#f5f7fa;
}

/* =====================================================
   RELATED BRANDS
===================================================== */

.ssi-related-brands{
    margin-top:40px;
}

.ssi-related-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:8px;
}

.ssi-related-desc{
    font-size:14px;
    color:#666;
    margin-bottom:20px;
}

.ssi-related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.ssi-related-item{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    border:1px solid #eee;
    border-radius:8px;
    background:#fff;
    overflow:hidden;
    transition:0.2s;
}

.ssi-related-item:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 14px rgba(0,0,0,0.06);
}

.ssi-related-logo{
    max-width:120px;
    max-height:50px;
}

.ssi-related-name{
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
    font-size:13px;
    color:#fff;
    padding:6px;
    background:linear-gradient(to top,rgba(0,0,0,0.7),transparent);
    opacity:0;
    transform:translateY(100%);
    transition:0.25s;
}

.ssi-related-item:hover .ssi-related-name{
    opacity:1;
    transform:translateY(0);
}


/* =====================================
   SEO CONTENT
===================================== */

.ssi-seo-content{
    margin-top:30px;
}

.ssi-seo-block{
    margin-bottom:28px;
    padding-bottom:20px;
    border-bottom:1px solid #eee;
}

.ssi-seo-title{
    font-size:20px;
    font-weight:600;
    margin-bottom:12px;
    color:#222;
    line-height:1.4;
}

.ssi-seo-text{
    font-size:15px;
    color:#444;
    line-height:1.7;
}

.ssi-seo-text p{
    margin-bottom:12px;
}

.ssi-seo-text ul{
    margin:10px 0 10px 20px;
}

.ssi-seo-text li{
    margin-bottom:6px;
}

.ssi-seo-text a{
    color:#0073aa;
    text-decoration:none;
}

.ssi-seo-text a:hover{
    text-decoration:underline;
}

.ssi-seo-text strong{
    font-weight:600;
}

.ssi-seo-text h3{
    font-size:16px;
    margin:15px 0 8px;
}

.ssi-seo-block:last-child{
    border-bottom:none;
}

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

@media (max-width:768px){

    .ssi-layout{
        display:flex;
        flex-direction:column;
    }

    /* MAIN first */
    .ssi-main{
        order:1;
        position:relative;
        z-index:2;
    }

    /* SIDEBAR second + disable sticky */
    .ssi-sidebar{
        order:2;
        width:100%;
        position:relative;
        top:auto;
        z-index:1;
        margin-top:20px; /* spacing */
    }

    /* coupon stack */
    .ssi-coupon-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .ssi-action{
        width:100%;
        text-align:left;
    }

    /* related grid */
    .ssi-related-grid{
        grid-template-columns:repeat(2,1fr);
    }
    
    .ssi-seo-title{
        font-size:18px;
    }

    .ssi-seo-text{
        font-size:14px;
    }
}

@media (max-width:480px){

    .ssi-related-grid{
        grid-template-columns:1fr;
    }
}


/* =====================================================
   Featured Brands Section
===================================================== */

.ssi-featured-brands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
    padding: 10px 20px;
    align-items: stretch;
}

/* Brand card */
.ssi-featured-brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 18px 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;

    text-decoration: none;
    transition: all 0.2s ease;
}

.ssi-featured-brand-item:hover {
    transform: translateY(-2px);
    border-color: #ddd;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Logo */
.ssi-featured-brand-logo img {
    max-width: 90px;
    max-height: 50px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* Brand name */
.ssi-featured-brand-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111;
    text-align: center;
    line-height: 1.3;
}

/* =====================================================
   Responsive
===================================================== */

/* Tablet */
@media (max-width: 768px) {

    .ssi-featured-brands {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 14px;
        padding: 35px 15px;
    }

    .ssi-featured-brand-logo img {
        max-width: 75px;
    }

    .ssi-featured-brand-name {
        font-size: 0.9rem;
    }
}

/* Mobile */
@media (max-width: 480px) {

    .ssi-featured-brands {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .ssi-featured-brand-item {
        padding: 12px 8px;
    }

    .ssi-featured-brand-logo img {
        max-width: 60px;
    }

    .ssi-featured-brand-name {
        font-size: 0.85rem;
    }
}


/* =====================================================
   Featured Coupons
===================================================== */

.ssi-featured-coupon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 40px 20px;
}

/* Card */
.ssi-featured-coupon-card {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 16px;
    transition: 0.2s ease;
    align-items: center;
}

.ssi-featured-coupon-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Logo */
.ssi-featured-coupon-logo {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ssi-featured-coupon-logo img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

/* Body */
.ssi-featured-coupon-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Brand */
.ssi-featured-coupon-brand {
    font-size: 0.75rem;
    color: #666;
    text-decoration: none;
}

/* Title */
.ssi-featured-coupon-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    margin: 2px 0 6px 0;
}

/* Meta row (IMPORTANT) */
.ssi-featured-coupon-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Verified */
.ssi-featured-coupon-verified {
    font-size: 0.8rem;
    color: #2e7d32;
    white-space: nowrap;
}

/* Action */
.ssi-featured-coupon-action {
    flex-shrink: 0;
}

/* Button */
.ssi-featured-coupon-btn {
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
}

/* Code */
.ssi-code-btn {
    background: #1e73be;
    color: #fff;
}

/* Deal */
.ssi-deal-btn {
    background: #1e73be;
    color: #fff;
    text-decoration: none;
}

/* =====================================================
   Responsive
===================================================== */

/* Tablet */
@media (max-width: 768px) {

    .ssi-featured-coupon-grid {
        grid-template-columns: 1fr;
        padding: 25px 15px;
    }

    .ssi-featured-coupon-meta {
        flex-wrap: wrap; /* allow break */
    }
    
    .ssi-featured-coupon-card {
        align-items: flex-start; 
    }

    .ssi-featured-coupon-logo {
        width: 60px;
    }

    .ssi-featured-coupon-logo img {
        max-height: 50px;
    }
}

/* Mobile */
@media (max-width: 480px) {

    .ssi-featured-coupon-card {
        flex-direction: column;
    }

    .ssi-featured-coupon-logo img {
        width: 50px;
        height: 50px;
    }

    .ssi-featured-coupon-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* =========================
   Latest Blog
========================= */

.ssi-latest-blog{
    padding: 10px 20px;
}

/* =========================
   HOME INFO
========================= */

.ssi-home-info{
    padding: 10px 20px;
}

.ssi-home-info-block{
    margin-bottom:20px;
}

/* H3 (smaller than section H2) */
.ssi-home-info-title{
    font-size:16px;
    font-weight:600;
    margin-bottom:8px;
    color:#222;
}

/* content */
.ssi-home-info-content{
    font-size:14px;
    line-height:1.7;
    color:#555;
}
.ssi-home-info-content h3{
    font-size: 20px;
    font-weight: 600;
}

/* spacing */
.ssi-home-info-content p{
    margin-bottom:10px;
}

/* links */
.ssi-home-info-content a{
    color:#0073aa;
}

.ssi-home-info-content a:hover{
    text-decoration:underline;
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .ssi-home-info-title{
        font-size:15px;
    }

    .ssi-home-info-content{
        font-size:13px;
    }

}