/* =========================================================
   TOP BEST IPTV 2027 — Full WHMCS Twenty-One skin
   Palette: espresso / warm ivory / stone-sage / muted coral
   Uses CSS-only gradients so the look is practical in WHMCS.
   ========================================================= */
:root{
  --tb-ink:#23221f;
  --tb-espresso:#292821;
  --tb-espresso-2:#3a3931;
  --tb-ivory:#f2ecdf;
  --tb-cream:#e9e2d3;
  --tb-paper:#f7f2e8;
  --tb-sage:#a9ada3;
  --tb-sage-light:#c8ccc2;
  --tb-coral:#df6b5d;
  --tb-coral-deep:#c9574c;
  --tb-line:rgba(43,42,36,.16);
  --tb-shadow:0 18px 48px rgba(47,43,35,.10);
}

html{background:var(--tb-ivory)}
body.primary-bg-color,body{
  color:var(--tb-ink)!important;
  background:
    radial-gradient(1000px 620px at -8% 5%, rgba(169,173,163,.68) 0%, rgba(169,173,163,.20) 42%, transparent 72%),
    radial-gradient(850px 560px at 104% 12%, rgba(223,107,93,.22) 0%, rgba(223,107,93,.08) 45%, transparent 72%),
    linear-gradient(135deg,#eee7d8 0%,#f5efe4 42%,#d9d9cf 100%)!important;
  background-attachment:fixed!important;
  font-family:"Open Sans",Arial,sans-serif;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,rgba(35,34,31,.035),transparent 26%,rgba(255,255,255,.14) 58%,rgba(223,107,93,.035));
}

/* Header */
#header.header{background:transparent!important;border:0!important;box-shadow:none!important}
#header .navbar.navbar-light{
  background:linear-gradient(105deg,#26251f 0%,#35342d 62%,#46463e 100%)!important;
  border:0!important;padding-top:1rem;padding-bottom:1rem;
}
#header .navbar-brand,#header .navbar-brand:hover{color:#f4eee2!important;font-weight:600!important;letter-spacing:-.03em;font-size:1.45rem}
.tb-wordmark{white-space:nowrap}.tb-wordmark-top{color:#f4eee2}.tb-wordmark-iptv{color:#b9bcb1}.tb-wordmark-year{color:var(--tb-coral)}
#header .navbar-light .btn,#header .navbar-light .nav-link{color:#f3ecdf!important}
#header .navbar-light .search .form-control{background:rgba(247,242,232,.10)!important;color:#fff!important;border-color:rgba(255,255,255,.18)!important}
#header .navbar-light .search .form-control::placeholder{color:rgba(255,255,255,.64)}
#header .navbar-light .search .btn{background:rgba(247,242,232,.10)!important;border-color:rgba(255,255,255,.18)!important}
#header .cart-btn{border:1px solid rgba(255,255,255,.16)!important;border-radius:999px!important;padding:.65rem .85rem!important}
#header .badge-info{background:var(--tb-coral)!important;color:#fff!important}

.main-navbar-wrapper{
  background:linear-gradient(90deg,rgba(244,238,226,.96),rgba(222,221,210,.97) 55%,rgba(237,218,207,.96))!important;
  border-bottom:1px solid var(--tb-line)!important;box-shadow:0 8px 24px rgba(44,42,35,.06)
}
.main-navbar-wrapper .nav-link{color:#35342e!important;font-weight:600!important}
.main-navbar-wrapper .nav-link:hover,.main-navbar-wrapper .active>.nav-link{color:var(--tb-coral-deep)!important}
.dropdown-menu{background:#f6f0e5!important;border:1px solid var(--tb-line)!important;border-radius:4px!important;box-shadow:var(--tb-shadow)!important}
.dropdown-item{color:var(--tb-ink)!important}.dropdown-item:hover{background:#dedfd5!important;color:#222!important}
.topbar{background:#1f1f1b!important;color:#eee8dd!important;border:0!important}.topbar .btn,.topbar a{color:#eee8dd!important}

/* Main canvas on every WHMCS page */
section#main-body{background:transparent!important;padding-top:3rem;padding-bottom:4rem}
section#main-body>.container{position:relative}
.main-content,.primary-content{color:var(--tb-ink)}
.page-header h1,h1,h2,h3,h4,h5,h6{color:#25241f;letter-spacing:-.025em}
.page-header{border-bottom:1px solid var(--tb-line)!important;margin-bottom:2rem!important}
.page-header h1{font-weight:700!important}

/* Cards / panels / widgets */
.card,.panel,.list-group-item,.client-home-panels .panel{
  background:linear-gradient(145deg,rgba(248,244,235,.96),rgba(228,226,216,.90))!important;
  border:1px solid rgba(63,60,51,.14)!important;border-radius:6px!important;box-shadow:0 12px 30px rgba(46,43,35,.07)!important;
}
.card-header,.panel-heading{
  background:linear-gradient(100deg,rgba(169,173,163,.45),rgba(242,236,223,.65))!important;
  color:#26251f!important;border-bottom:1px solid var(--tb-line)!important;font-weight:700!important
}
.card-footer,.panel-footer{background:rgba(220,218,207,.52)!important;border-top:1px solid var(--tb-line)!important}
.card:hover{border-color:rgba(223,107,93,.32)!important}

/* Homepage remains a WHMCS portal, just fully reskinned */
.card-columns.home{gap:1.25rem}.card-columns.home .card{overflow:hidden;position:relative}
.card-columns.home .card:before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--tb-espresso),var(--tb-sage),var(--tb-coral))}
.action-icon-btns a{
  background:linear-gradient(145deg,rgba(247,242,232,.95),rgba(205,208,198,.78))!important;
  border:1px solid var(--tb-line)!important;border-radius:6px!important;color:#292823!important;box-shadow:0 10px 24px rgba(45,42,34,.07)!important
}
.action-icon-btns a:hover{transform:translateY(-2px);border-color:var(--tb-coral)!important;color:var(--tb-coral-deep)!important}
.action-icon-btns .ico-container{color:var(--tb-coral)!important}

/* Buttons */
.btn{border-radius:3px!important;font-weight:600!important;box-shadow:none!important}
.btn-primary,.btn-success,.btn-info,.btn.btn-primary{
  background:linear-gradient(110deg,var(--tb-coral-deep),var(--tb-coral))!important;border-color:var(--tb-coral-deep)!important;color:#fff!important
}
.btn-primary:hover,.btn-success:hover,.btn-info:hover{filter:brightness(.94)}
.btn-outline-primary{color:#34332d!important;border-color:#77796f!important;background:rgba(247,242,232,.30)!important}
.btn-outline-primary:hover{background:#34332d!important;border-color:#34332d!important;color:#f5efe4!important}
.btn-default,.btn-secondary{background:#d5d6cd!important;border-color:#b7b9af!important;color:#2d2c27!important}
a{color:#a9473f}a:hover{color:#7f342f}

/* Forms, login/register, tickets, checkout fields */
.form-control,.custom-select,.input-group-text,select.form-control{
  background:rgba(249,246,239,.88)!important;border:1px solid rgba(67,64,54,.22)!important;color:#292823!important;border-radius:3px!important
}
.form-control:focus,.custom-select:focus{border-color:var(--tb-coral)!important;box-shadow:0 0 0 .16rem rgba(223,107,93,.14)!important;background:#fbf7ef!important}
.form-control::placeholder{color:#858278!important}
label{color:#403e36;font-weight:600}
.logincontainer,.signupcontainer{background:linear-gradient(145deg,rgba(247,242,232,.96),rgba(208,210,200,.90))!important;border:1px solid var(--tb-line)!important;border-radius:6px!important;box-shadow:var(--tb-shadow)!important;padding:2rem!important}

/* Tables / invoices / services */
.table{color:#2c2b26;background:rgba(247,242,232,.58)}
.table thead th,.table th{background:#aeb2a8!important;color:#24231f!important;border-color:rgba(55,53,45,.15)!important}
.table td{border-color:rgba(55,53,45,.11)!important}.table-striped tbody tr:nth-of-type(odd){background:rgba(206,207,197,.26)!important}
.table-hover tbody tr:hover{background:rgba(223,107,93,.08)!important}
.dataTables_wrapper .dataTables_info,.dataTables_wrapper label{color:#4a483f!important}

/* Sidebars / knowledgebase / tickets */
.sidebar .card,.sidebar .panel{background:linear-gradient(160deg,rgba(199,202,192,.88),rgba(239,233,222,.92))!important}
.sidebar .list-group-item{box-shadow:none!important;border-radius:0!important;background:transparent!important}
.sidebar .list-group-item.active,.sidebar .list-group-item:hover{background:rgba(223,107,93,.12)!important;color:#843b35!important}
.kb-article-content,.announcement-single,.ticket-reply{background:rgba(248,244,235,.80);border-radius:5px}

/* Alerts / badges */
.alert{border-radius:4px!important;border-width:1px!important}.alert-info{background:#d9ddd6!important;border-color:#b5bbb1!important;color:#30322e!important}.alert-success{background:#d8dfd3!important;color:#31402f!important}.alert-warning{background:#eee1c9!important;color:#5c4b31!important}.alert-danger{background:#efd4ce!important;color:#6e332e!important}
.badge-primary,.label-primary{background:var(--tb-coral)!important}.badge-secondary{background:#74766e!important}

/* Modals */
.modal-content{background:linear-gradient(145deg,#f6f0e5,#dfe0d7)!important;border:1px solid var(--tb-line)!important;border-radius:6px!important;box-shadow:0 24px 70px rgba(24,23,20,.28)!important}
.modal-header,.modal-footer{border-color:var(--tb-line)!important}

/* Footer */
#footer.footer{
  background:
    radial-gradient(700px 300px at 92% 0%,rgba(223,107,93,.18),transparent 68%),
    linear-gradient(110deg,#25241f 0%,#34332d 58%,#45463f 100%)!important;
  color:#dcd6ca!important;border:0!important;padding-top:2.6rem;padding-bottom:2.6rem
}
#footer.footer a,#footer.footer .nav-link,#footer.footer .copyright{color:#dcd6ca!important}
#footer.footer a:hover{color:#ef7b6e!important}
#footer.footer .btn{color:#eee8dd!important;border-color:rgba(255,255,255,.18)!important}

/* Store/cart overrides */
#order-standard_cart,.cart-body{color:var(--tb-ink)!important}
#order-standard_cart .panel,#order-standard_cart .product,#order-standard_cart .summary-container,#order-standard_cart .view-cart-items{background:linear-gradient(145deg,#f5efe4,#dedfd6)!important;border-color:var(--tb-line)!important}
#order-standard_cart .products .product header,#order-standard_cart .view-cart-items-header{background:#a9ada3!important;color:#23221f!important}

/* Responsive readability */
@media(max-width:991.98px){
  section#main-body{padding-top:2rem}.main-navbar-wrapper{background:rgba(239,233,222,.98)!important}
  #header .navbar.navbar-light{padding:.75rem 0}.tb-wordmark{font-size:1.05rem}
}
@media(max-width:575.98px){
  body{font-size:15px}.card,.panel{border-radius:4px!important}.btn{min-height:42px}.page-header h1{font-size:1.75rem}
}
.tb-home-intro{padding:2.4rem 2.6rem;background:linear-gradient(112deg,rgba(42,41,35,.96) 0%,rgba(75,74,65,.94) 42%,rgba(174,178,168,.90) 74%,rgba(223,107,93,.78) 120%);border-radius:6px;box-shadow:var(--tb-shadow);position:relative;overflow:hidden}
.tb-home-intro:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-130px;top:-180px;border:1px solid rgba(247,242,232,.28);box-shadow:0 0 0 48px rgba(247,242,232,.035),0 0 0 96px rgba(247,242,232,.025)}
.tb-home-intro h1,.tb-home-intro p{color:#f5efe4!important}.tb-home-intro p{max-width:760px;color:#ddd8cd!important}

/* ===== TopBest 2027 homepage ===== */
.tb-portal-home{margin-top:-.75rem}.tb-hero{position:relative;padding:4.6rem 3.5rem 0;margin:0 0 4rem;background:linear-gradient(122deg,#272620 0%,#45443b 42%,#a8aca2 74%,#e36f61 125%);color:#f6f0e5;overflow:hidden;border:1px solid rgba(39,38,32,.16);box-shadow:0 24px 70px rgba(47,43,35,.12)}
.tb-hero:before{content:"";position:absolute;right:-120px;top:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(246,240,229,.24),rgba(246,240,229,.03) 44%,transparent 66%);border:1px solid rgba(246,240,229,.22)}
.tb-hero:after{content:"";position:absolute;left:46%;bottom:-170px;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,rgba(227,111,97,.34),rgba(227,111,97,0) 68%)}
.tb-hero .row,.tb-hero-metrics{position:relative;z-index:2}.tb-kicker,.tb-eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.17em;color:#d95f53}.tb-hero .tb-kicker{color:#f08a7f}.tb-hero h1{font-size:clamp(2.7rem,5.2vw,5.2rem);line-height:.98;letter-spacing:-.055em;margin:1rem 0 1.5rem;color:#f7f1e7!important}.tb-hero h1 span{color:#f08a7f}.tb-hero-copy{max-width:720px;font-size:1.08rem;line-height:1.8;color:#e2ddd3!important}.tb-hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}.tb-btn-coral{background:#df6c5f!important;border:1px solid #df6c5f!important;color:#fff!important;padding:.82rem 1.3rem!important;font-weight:700}.tb-btn-coral:hover{background:#c95b50!important;border-color:#c95b50!important}.tb-btn-ghost{border:1px solid rgba(247,241,231,.55)!important;color:#f7f1e7!important;padding:.82rem 1.3rem!important;background:rgba(255,255,255,.03)!important}.tb-hero-panel{background:linear-gradient(145deg,rgba(234,231,219,.94),rgba(174,178,168,.92));color:#282721;padding:2rem;min-height:280px;box-shadow:0 24px 60px rgba(0,0,0,.12)}.tb-hero-panel-label{font-size:.72rem;letter-spacing:.16em;font-weight:800;color:#8c433b}.tb-score-line{display:flex;align-items:flex-end;justify-content:space-between;margin:1.5rem 0}.tb-score-line strong{font-size:5rem;line-height:.85;font-weight:500}.tb-score-line span{text-align:right;font-size:1.05rem;line-height:1.35}.tb-panel-rule{height:1px;background:rgba(40,39,33,.2);margin:1.6rem 0}.tb-mini-points{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;font-size:.88rem}.tb-mini-points i{color:#d95f53;margin-right:.35rem}.tb-hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin:3.4rem -3.5rem 0;background:rgba(20,20,18,.24);border-top:1px solid rgba(255,255,255,.12)}.tb-hero-metrics>div{padding:1.25rem 1.4rem;border-right:1px solid rgba(255,255,255,.12)}.tb-hero-metrics>div:last-child{border-right:0}.tb-hero-metrics strong,.tb-hero-metrics span{display:block}.tb-hero-metrics strong{font-size:1.05rem;color:#f7f1e7}.tb-hero-metrics span{font-size:.76rem;color:#cbc6bd;margin-top:.2rem}
.tb-section{padding:1rem 0 4.5rem}.tb-section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2rem}.tb-section-heading.centered{justify-content:center;text-align:center}.tb-section-heading h2,.tb-review-method h2,.tb-final-cta h2{font-size:clamp(2rem,3vw,3.1rem);letter-spacing:-.045em;line-height:1.05;margin:.45rem 0;color:#282721!important}.tb-section-heading p{color:#6e6b63}.tb-text-link{color:#9f463e!important;font-weight:700;border-bottom:1px solid rgba(159,70,62,.35);padding-bottom:.15rem}.tb-provider-card{background:linear-gradient(145deg,#f4eee3,#dedfd6);border:1px solid rgba(67,65,57,.16);padding:1.55rem;box-shadow:0 16px 42px rgba(50,47,39,.07);transition:.2s ease}.tb-provider-card:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(50,47,39,.12)}.tb-provider-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.tb-rank{font-size:2.3rem;font-weight:500;line-height:1}.tb-tag{font-size:.66rem;letter-spacing:.13em;font-weight:800;color:#a9473f}.tb-provider-card h3{font-size:1.55rem;margin-bottom:.65rem}.tb-provider-card p{min-height:48px;color:#69665e}.tb-card-meta{display:flex;gap:.45rem;flex-wrap:wrap;margin:1.25rem 0}.tb-card-meta span{font-size:.7rem;padding:.35rem .55rem;border:1px solid rgba(40,39,33,.18);background:rgba(255,255,255,.22)}.tb-card-btn{width:100%;background:#2f2e29!important;color:#f6f0e5!important;border:0!important;padding:.75rem!important}.tb-empty-feature{display:flex;justify-content:space-between;align-items:center;gap:2rem;background:linear-gradient(110deg,#e8e2d7,#cfd2c8);padding:2rem;border-left:4px solid #dd6a5d}.tb-empty-feature p{margin:0;color:#6a675f}
.tb-device-section{border-top:1px solid rgba(55,53,47,.12);border-bottom:1px solid rgba(55,53,47,.12);padding-top:4.5rem;margin-bottom:4rem}.tb-device-card{display:flex;min-height:190px;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(150deg,#34332d,#20201c);color:#f6f0e5!important;border:1px solid rgba(227,111,97,.24);text-align:center;transition:.2s ease}.tb-device-card:hover{transform:translateY(-3px);background:linear-gradient(150deg,#414039,#272620)}.tb-device-card i{font-size:2.3rem;color:#e07a6f;margin-bottom:1.2rem}.tb-device-card strong{font-size:1.15rem}.tb-device-card span{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:#c6c2b8;margin-top:.8rem}
.tb-review-method{background:linear-gradient(115deg,#2c2b26 0%,#47463e 52%,#a7aaa0 100%);padding:3.2rem;margin-bottom:4rem;color:#eee8de}.tb-review-method h2{color:#f6f0e5!important}.tb-review-method p{color:#d3cec4}.tb-review-method .tb-eyebrow{color:#ee8276}.tb-review-method .tb-text-link{color:#f08a7f!important}.tb-method-list>div{display:grid;grid-template-columns:58px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.13)}.tb-method-list>div:last-child{border-bottom:0}.tb-method-list b{font-size:1.4rem;color:#ee8276}.tb-method-list strong,.tb-method-list small{display:block}.tb-method-list small{color:#c8c3b9;margin-top:.25rem}
.tb-help-card{display:block;height:100%;padding:1.7rem;background:linear-gradient(145deg,#f1ebdf,#d9dbd2);border:1px solid rgba(50,48,42,.14);color:#2c2b26!important}.tb-help-card i{font-size:1.6rem;color:#d86458}.tb-help-card h3{font-size:1.25rem;margin:1.2rem 0 .5rem}.tb-help-card p{color:#6c6961;min-height:48px}.tb-help-card span{font-weight:700;color:#9e463e}.tb-final-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2.6rem 3rem;margin-bottom:1rem;background:linear-gradient(105deg,#d9dbd2 0%,#eee7db 55%,#e8b0a6 130%);border:1px solid rgba(50,48,42,.14)}.tb-final-cta p{margin-bottom:0;color:#6b675f}

@media(max-width:991.98px){.tb-hero{padding:3rem 2rem 0}.tb-hero-metrics{margin:2.5rem -2rem 0;grid-template-columns:1fr 1fr}.tb-hero-metrics>div:nth-child(2){border-right:0}.tb-hero-metrics>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}.tb-final-cta{align-items:flex-start;flex-direction:column}.tb-review-method{padding:2rem}}
@media(max-width:575.98px){.tb-hero{padding:2.2rem 1.25rem 0}.tb-hero h1{font-size:2.65rem}.tb-hero-metrics{margin:2rem -1.25rem 0}.tb-hero-metrics>div{padding:1rem}.tb-section{padding-bottom:3rem}.tb-section-heading{align-items:flex-start;flex-direction:column}.tb-device-card{min-height:155px}.tb-review-method{padding:1.5rem}.tb-final-cta{padding:1.7rem}.tb-empty-feature{align-items:flex-start;flex-direction:column}}
/* ========================================
   TOPBEST - HOMEPAGE 4 PLAN ROW
======================================== */

.tb-plans-section {
    padding-top: 75px;
    padding-bottom: 75px;
}

.tb-home-plans {
    margin-top: 30px;
}

/* MAIN CARD */
.tb-home-plan-card {
    position: relative;
    height: 100%;
    min-height: 410px;
    padding: 32px 28px;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(224, 112, 99, .18),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #43463d 0%,
            #55594f 48%,
            #777b70 100%
        );

    color: #f5efe5;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 3px;

    box-shadow:
        0 20px 45px rgba(46, 43, 37, .14);

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.tb-home-plan-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 28px 55px rgba(46, 43, 37, .22);
}


/* LARGE NUMBER */

.tb-plan-number {
    font-size: 40px;
    line-height: .9;
    font-weight: 500;
    letter-spacing: -1px;

    color: rgba(255,255,255,.28);

    margin-bottom: 32px;
}


/* SMALL LABEL */

.tb-plan-label {
    color: #f08a7f;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 9px;
}


/* TITLE */

.tb-home-plan-card h3 {
    color: #fff8ef;

    font-size: 27px;
    font-weight: 500;

    margin-bottom: 12px;
}


/* DESCRIPTION */

.tb-home-plan-card > p {
    color: rgba(255,255,255,.72);

    font-size: 14px;
    line-height: 1.7;

    min-height: 48px;
}


/* FEATURES */

.tb-plan-features {
    margin-top: 17px;
    margin-bottom: 25px;
}

.tb-plan-features span {
    display: block;

    color: rgba(255,255,255,.88);

    font-size: 13px;

    margin: 9px 0;
}

.tb-plan-features i {
    color: #f08a7f;
    margin-right: 8px;
}


/* BUTTON */

.tb-plan-button {
    margin-top: auto;

    width: 100%;

    padding: 13px 18px;

    background: #f2ede3;

    color: #292a25 !important;

    border: 0;
    border-radius: 2px;

    font-weight: 600;
}

.tb-plan-button:hover {
    background: #ffffff;
}


/* ==============================
   1 YEAR - BEST VALUE
============================== */

.tb-home-plan-card.tb-best-plan {

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(244, 146, 130, .38),
            transparent 36%
        ),
        linear-gradient(
            140deg,
            #302e28 0%,
            #554a3f 45%,
            #8d6256 100%
        );

    border-color: rgba(240,138,127,.7);

    box-shadow:
        0 22px 55px rgba(117, 76, 66, .25);
}

.tb-best-badge {
    position: absolute;

    top: 18px;
    right: 18px;

    background: #ef887c;
    color: #282923;

    padding: 7px 12px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* MOBILE */

@media (max-width: 767px) {

    .tb-plans-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .tb-home-plan-card {
        min-height: 360px;
    }

}

/* ==========================================
   TOP BEST IPTV - AFFILIATE PAGE
========================================== */

.tb-affiliate-page {
    width: 100%;
}


/* HERO */

.tb-affiliate-hero {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1.5fr .7fr;
    align-items: center;
    gap: 50px;

    padding: 70px 65px;
    margin-bottom: 70px;

    border: 1px solid rgba(77, 63, 55, .12);
    border-radius: 26px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(183, 78, 67, .18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #f6f1e8 0%,
            #ebe7dc 50%,
            #d8d9ce 100%
        );
}

.tb-affiliate-eyebrow {
    display: inline-block;
    margin-bottom: 14px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #b34d43;
}

.tb-affiliate-hero h1 {
    max-width: 700px;
    margin: 0 0 20px;

    font-size: clamp(40px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -2.5px;
    font-weight: 700;

    color: #302a26;
}

.tb-affiliate-hero-content > p {
    max-width: 690px;
    margin: 0;

    font-size: 18px;
    line-height: 1.75;

    color: #625c56;
}


/* BUTTONS */

.tb-affiliate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.tb-affiliate-primary {
    padding: 14px 24px !important;

    border: 1px solid #332d29 !important;
    border-radius: 10px !important;

    background: #332d29 !important;
    color: #fff !important;

    font-weight: 700;
}

.tb-affiliate-primary:hover {
    background: #b34d43 !important;
    border-color: #b34d43 !important;
    color: #fff !important;
}

.tb-affiliate-secondary {
    padding: 14px 24px !important;

    border: 1px solid rgba(51,45,41,.25) !important;
    border-radius: 10px !important;

    background: rgba(255,255,255,.35) !important;
    color: #332d29 !important;

    font-weight: 700;
}


/* COMMISSION CARD */

.tb-commission-box {
    min-height: 250px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 35px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #39322e 0%,
            #272320 100%
        );

    box-shadow: 0 25px 55px rgba(38, 31, 27, .18);
}

.tb-commission-box span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #dca39b;
}

.tb-commission-box strong {
    display: block;

    margin: 8px 0;

    font-size: 64px;
    line-height: 1;
    letter-spacing: -3px;

    color: #f5eee5;
}

.tb-commission-box p {
    margin: 0;
    color: #c8c0b8;
}


/* SECTIONS */

.tb-affiliate-section,
.tb-affiliate-how {
    margin: 70px 0;
}

.tb-affiliate-heading {
    max-width: 700px;
    margin-bottom: 35px;
}

.tb-affiliate-heading h2 {
    margin: 0 0 12px;

    font-size: 38px;
    font-weight: 700;
    letter-spacing: -1.5px;

    color: #302a26;
}

.tb-affiliate-heading p {
    font-size: 17px;
    line-height: 1.7;
    color: #706961;
}


/* BENEFIT CARDS */

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

.tb-affiliate-card {
    padding: 30px;

    border: 1px solid rgba(72, 61, 54, .12);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(247,243,235,.95),
            rgba(226,226,215,.75)
        );
}

.tb-affiliate-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 50%;

    background: #b34d43;
    color: #fff;

    font-size: 18px;
}

.tb-affiliate-card h3 {
    margin-bottom: 10px;

    font-size: 20px;
    font-weight: 700;

    color: #332d29;
}

.tb-affiliate-card p {
    margin: 0;

    line-height: 1.7;
    color: #706961;
}


/* STEPS */

.tb-affiliate-steps {
    border-top: 1px solid rgba(65,55,48,.15);
}

.tb-affiliate-step {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 25px;

    padding: 30px 0;

    border-bottom: 1px solid rgba(65,55,48,.15);
}

.tb-step-number {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #b34d43;
}

.tb-affiliate-step h3 {
    margin: 0 0 7px;

    font-size: 22px;
    font-weight: 700;

    color: #332d29;
}

.tb-affiliate-step p {
    max-width: 650px;
    margin: 0;

    line-height: 1.7;
    color: #706961;
}


/* BOTTOM CTA */

.tb-affiliate-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    margin-top: 70px;
    padding: 45px 50px;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(190,83,72,.25),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #39322e,
            #26221f
        );
}

.tb-affiliate-cta h2 {
    margin: 0 0 8px;

    font-size: 34px;
    color: #f6f0e7;
}

.tb-affiliate-cta p {
    margin: 0;
    color: #c9c0b7;
}


/* MOBILE */

@media (max-width: 991px) {

    .tb-affiliate-hero {
        grid-template-columns: 1fr;
        padding: 45px 30px;
    }

    .tb-affiliate-grid {
        grid-template-columns: 1fr;
    }

    .tb-affiliate-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {

    .tb-affiliate-hero {
        padding: 35px 22px;
        border-radius: 18px;
    }

    .tb-affiliate-hero h1 {
        font-size: 39px;
        letter-spacing: -1.5px;
    }

    .tb-commission-box strong {
        font-size: 52px;
    }

    .tb-affiliate-heading h2 {
        font-size: 30px;
    }

    .tb-affiliate-step {
        grid-template-columns: 50px 1fr;
    }

    .tb-affiliate-cta {
        padding: 35px 25px;
    }
}

/* =========================================================
   LUNNA IPTV — Cosmic WHMCS skin override
   Dark navy + sky/ice blue. No gold/yellow accents.
   ========================================================= */
:root{
  --luna-bg:#030914;
  --luna-bg-2:#071426;
  --luna-panel:rgba(7,20,38,.88);
  --luna-panel-2:rgba(10,29,52,.90);
  --luna-sky:#7cc8ff;
  --luna-sky-2:#a8ddff;
  --luna-blue:#3f9fe8;
  --luna-text:#f4f9ff;
  --luna-muted:#9fb4c8;
  --luna-line:rgba(124,200,255,.20);
  --luna-shadow:0 18px 50px rgba(0,0,0,.34);
}
html{background:var(--luna-bg)!important}
body.primary-bg-color,body{
  color:var(--luna-text)!important;
  background-color:var(--luna-bg)!important;
  background-image:linear-gradient(rgba(2,8,18,.22),rgba(2,8,18,.22)),url('../img/luna-stars.png')!important;
  background-repeat:repeat!important;
  background-size:420px auto!important;
  background-attachment:fixed!important;
}
body:before{background:radial-gradient(800px 500px at 50% -10%,rgba(78,166,235,.12),transparent 70%)!important}
#header.header{background:rgba(2,8,18,.72)!important;border:0!important;backdrop-filter:blur(12px)}
#header .navbar.navbar-light,.main-navbar-wrapper,.topbar{
  background:rgba(3,10,22,.82)!important;
  border-color:var(--luna-line)!important;
  box-shadow:none!important;
}
#header .navbar-brand,#header .navbar-brand:hover,#header .navbar-light .btn,#header .navbar-light .nav-link,
.main-navbar-wrapper .nav-link,.topbar,.topbar a,.topbar .btn{color:var(--luna-text)!important}
#header .logo-img{max-height:48px;width:auto}
.main-navbar-wrapper .nav-link:hover,.main-navbar-wrapper .active>.nav-link,a,a:hover{color:var(--luna-sky)!important}
#header .badge-info,.badge-primary,.label-primary{background:var(--luna-blue)!important;color:#fff!important}
#header .navbar-light .search .form-control,#header .navbar-light .search .btn{background:rgba(8,24,43,.82)!important;border-color:var(--luna-line)!important;color:#fff!important}
section#main-body{background:transparent!important}
.main-content,.primary-content,.page-header h1,h1,h2,h3,h4,h5,h6,label{color:var(--luna-text)!important}
.page-header{border-color:var(--luna-line)!important}
.card,.panel,.list-group-item,.client-home-panels .panel,.logincontainer,.signupcontainer,
.kb-article-content,.announcement-single,.ticket-reply{
  background:linear-gradient(145deg,rgba(5,16,31,.94),rgba(8,28,50,.90))!important;
  color:var(--luna-text)!important;
  border:1px solid var(--luna-line)!important;
  border-radius:12px!important;
  box-shadow:var(--luna-shadow)!important;
}
.card-header,.panel-heading,.card-footer,.panel-footer{
  background:rgba(10,31,55,.88)!important;color:var(--luna-text)!important;border-color:var(--luna-line)!important
}
.card:hover{border-color:rgba(124,200,255,.48)!important}
.dropdown-menu,.modal-content{background:#071426!important;border:1px solid var(--luna-line)!important;color:var(--luna-text)!important}
.dropdown-item{color:var(--luna-text)!important}.dropdown-item:hover{background:rgba(124,200,255,.10)!important;color:var(--luna-sky)!important}
.btn-primary,.btn-success,.btn-info,.btn.btn-primary{
  background:linear-gradient(110deg,#318fd5,#79c8ff)!important;border-color:#66bdf8!important;color:#03101d!important;font-weight:700!important
}
.btn-primary:hover,.btn-success:hover,.btn-info:hover{filter:brightness(1.08)}
.btn-outline-primary{color:var(--luna-sky)!important;border-color:rgba(124,200,255,.55)!important;background:rgba(6,19,35,.55)!important}
.btn-outline-primary:hover{background:var(--luna-sky)!important;color:#03101d!important}
.btn-default,.btn-secondary{background:#0b2038!important;border-color:var(--luna-line)!important;color:var(--luna-text)!important}
.form-control,.custom-select,.input-group-text,select.form-control{
  background:rgba(4,15,29,.90)!important;border:1px solid var(--luna-line)!important;color:var(--luna-text)!important;border-radius:8px!important
}
.form-control:focus,.custom-select:focus{border-color:var(--luna-sky)!important;box-shadow:0 0 0 .16rem rgba(124,200,255,.14)!important;background:#07182b!important}
.form-control::placeholder{color:#7790a7!important}
.table{color:var(--luna-text)!important;background:rgba(4,15,29,.72)!important}.table thead th,.table th{background:#0b2946!important;color:var(--luna-text)!important;border-color:var(--luna-line)!important}.table td{border-color:var(--luna-line)!important}.table-striped tbody tr:nth-of-type(odd),.table-hover tbody tr:hover{background:rgba(124,200,255,.06)!important}
.sidebar .card,.sidebar .panel{background:linear-gradient(160deg,rgba(6,20,37,.96),rgba(8,30,53,.92))!important}.sidebar .list-group-item.active,.sidebar .list-group-item:hover{background:rgba(124,200,255,.10)!important;color:var(--luna-sky)!important}
.alert-info{background:#0a2c49!important;border-color:#195078!important;color:#d8efff!important}.alert-success{background:#0b332f!important;color:#d8fff8!important}.alert-warning{background:#2d2b19!important;color:#f5efc7!important}.alert-danger{background:#351c27!important;color:#ffdbe5!important}
#footer.footer{background:rgba(2,8,18,.90)!important;color:var(--luna-muted)!important;border-top:1px solid var(--luna-line)!important}
#footer.footer a,#footer.footer .nav-link,#footer.footer .copyright{color:#c8d8e7!important}#footer.footer a:hover{color:var(--luna-sky)!important}
#order-standard_cart,.cart-body{color:var(--luna-text)!important}#order-standard_cart .panel,#order-standard_cart .product,#order-standard_cart .summary-container,#order-standard_cart .view-cart-items{background:linear-gradient(145deg,#061426,#0a2038)!important;border-color:var(--luna-line)!important;color:var(--luna-text)!important}#order-standard_cart .products .product header,#order-standard_cart .view-cart-items-header{background:#0b2a49!important;color:#fff!important}
.master-breadcrumb{background:rgba(3,12,24,.70)!important;border-color:var(--luna-line)!important}.breadcrumb,.breadcrumb a{color:var(--luna-muted)!important}.breadcrumb-item.active{color:var(--luna-sky)!important}
@media(max-width:991.98px){.main-navbar-wrapper{background:rgba(3,10,22,.96)!important}}

/* =========================================
   LUNNA - CART / PRODUCT PAGE FIXES
   ========================================= */

/* Navbar ke neeche white/grey breadcrumb strip */
.master-breadcrumb,
.breadcrumb,
.breadcrumb-container {
    background: rgba(5, 18, 35, 0.92) !important;
    border: 1px solid rgba(102, 190, 255, 0.20) !important;
    color: #dceeff !important;
}

.master-breadcrumb .breadcrumb {
    background: transparent !important;
    margin-bottom: 0 !important;
}

.breadcrumb a,
.master-breadcrumb a {
    color: #75c8ff !important;
}

.breadcrumb-item.active {
    color: #b9cddd !important;
}


/* PRODUCT BOX HEADER */
.products .product header,
.product header,
.product .header,
.product .product-header {
    background: linear-gradient(
        135deg,
        #102d4a 0%,
        #123b60 100%
    ) !important;

    color: #ffffff !important;
    border-bottom: 1px solid rgba(116, 201, 255, 0.30) !important;
}


/* Product title ko clearly visible karo */
.products .product header span,
.products .product header h3,
.products .product header h4,
.product header,
.product header *,
.product .header,
.product .header * {
    color: #ffffff !important;
}


/* Product cards */
.products .product,
.product {
    background: rgba(7, 25, 45, 0.94) !important;
    border: 1px solid rgba(105, 194, 255, 0.25) !important;
}


/* Order button */
.products .product .btn,
.product .btn {
    background: linear-gradient(135deg, #79d0ff, #45aff0) !important;
    border-color: #79d0ff !important;
    color: #03111e !important;
    font-weight: 600 !important;
}

.products .product .btn:hover,
.product .btn:hover {
    background: #9cddff !important;
    border-color: #9cddff !important;
}
/* =========================================
   LUNNA - REVIEW & CHECKOUT
   ========================================= */

/* Cart product/options white area */
#order-standard_cart .view-cart-items .item,
#order-standard_cart .view-cart-items .item:nth-child(even),
#order-standard_cart .view-cart-items {
    background: rgba(7, 25, 45, 0.96) !important;
    color: #eef8ff !important;
}

/* Product name + price */
#order-standard_cart .view-cart-items .item .product-name,
#order-standard_cart .view-cart-items .item .amount,
#order-standard_cart .view-cart-items .item .cycle,
#order-standard_cart .view-cart-items .item span {
    color: #eef8ff !important;
}

/* Edit link */
#order-standard_cart .view-cart-items .item a {
    color: #70caff !important;
}


/* PROMO CODE AREA - remove white */
#order-standard_cart .promo-code-form,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-tabs {
    background: rgba(7, 25, 45, 0.96) !important;
    border-color: rgba(112, 202, 255, 0.22) !important;
}

/* Promo tab */
#order-standard_cart .view-cart-tabs .nav-tabs > li > a {
    background: #0b223a !important;
    color: #70caff !important;
    border-color: rgba(112, 202, 255, 0.25) !important;
}


/* Promo input */
#order-standard_cart .promo-code-form .form-control {
    background: #071b30 !important;
    border: 1px solid rgba(112, 202, 255, 0.30) !important;
    color: #ffffff !important;
}

#order-standard_cart .promo-code-form .form-control::placeholder {
    color: #819bb3 !important;
}


/* Validate Code */
#order-standard_cart .promo-code-form .btn {
    background: #0d2b49 !important;
    border-color: #24577d !important;
    color: #ffffff !important;
}

#order-standard_cart .promo-code-form .btn:hover {
    background: #153c60 !important;
}


/* ORDER SUMMARY */
#order-standard_cart .order-summary {
    background: #071b30 !important;
    border-color: rgba(112, 202, 255, 0.28) !important;
}

/* Grey Order Summary heading -> navy/blue */
#order-standard_cart .order-summary .summary-container {
    background: #071b30 !important;
}

#order-standard_cart .order-summary h2 {
    background: linear-gradient(135deg, #102d4a, #17466f) !important;
    color: #ffffff !important;
}


/* Checkout button */
#order-standard_cart .order-summary .btn-primary {
    background: linear-gradient(135deg, #79d0ff, #45aff0) !important;
    border-color: #79d0ff !important;
    color: #03111e !important;
    font-weight: 700 !important;
}

#order-standard_cart .order-summary .btn-primary:hover {
    background: #9cddff !important;
}


/* Continue Shopping */
#order-standard_cart .order-summary a {
    color: #70caff !important;
}
/* Configure product information */
#order-standard_cart .product-info {
    background: #0b1d30 !important;
    border: 1px solid #27465f !important;
    border-radius: 12px;
    padding: 22px !important;
    color: #edf5ff !important;
}

#order-standard_cart .product-info p,
#order-standard_cart .product-info strong {
    color: #edf5ff !important;
}

#order-standard_cart .sub-heading span {
    background: #071426 !important;
    color: #cce7ff !important;
}

/* Bouquet popup */
#selectbouquetswhileordering .modal-header {
    background: #102d48 !important;
    border-color: #27465f !important;
}

#selectbouquetswhileordering .modal-title,
#selectbouquetswhileordering .close {
    color: #edf5ff !important;
    opacity: 1 !important;
}

#responseholderqq .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 14px 0 18px;
    padding: 0;
    border: 0 !important;
    list-style: none;
}

#responseholderqq .nav-tabs li {
    margin: 0 !important;
}

#responseholderqq .nav-tabs li a {
    display: block;
    padding: 10px 16px;
    background: #10263d !important;
    border: 1px solid #27465f !important;
    border-radius: 8px;
    color: #cce7ff !important;
    text-decoration: none;
}

#responseholderqq .nav-tabs li.active a {
    background: #74c6ff !important;
    border-color: #74c6ff !important;
    color: #061526 !important;
}

#responseholderqq .tab-content {
    width: 100%;
}

#responseholderqq .tab-pane {
    display: none !important;
}

#responseholderqq .tab-pane.active {
    display: block !important;
    opacity: 1 !important;
}

#selectbouquetswhileordering .modal-body {
    max-height: 65vh;
    overflow-y: auto;
}

/* Navbar dropdown above page content */
#header,
.main-navbar-wrapper {
    position: relative;
    z-index: 1030 !important;
    overflow: visible !important;
}

#header .dropdown-menu,
.main-navbar-wrapper .dropdown-menu {
    z-index: 1040 !important;
}

section#main-body {
    position: relative;
    z-index: 1;
}