@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* =====================================================
   RESELLFAIR THEME - EDIT THESE VALUES TO CHANGE LOOK
   ===================================================== */
:root{
  --rf-primary:#6366f1;      /* main color */
  --rf-primary-2:#8b5cf6;    /* gradient middle */
  --rf-accent:#ec4899;       /* gradient end */
  --rf-dark:#0b1020;         /* topbar, page title, footer */
  --rf-text:#1e293b;
  --rf-muted:#64748b;
  --rf-bg:#f6f7fb;           /* page background */
  --rf-card:#ffffff;
  --rf-line:#e5e7f0;
  --rf-radius:18px;          /* card roundness */
  --rf-btn-radius:50px;      /* button roundness */
  --rf-font:'Poppins',Arial,sans-serif;
  --rf-grad:linear-gradient(135deg,var(--rf-primary),var(--rf-primary-2) 55%,var(--rf-accent));
}

/* ---------- base ---------- */
body{font-family:var(--rf-font);color:var(--rf-text);background:var(--rf-bg);font-size:14.5px}
h1,h2,h3,h4,h5,h6,.btn,.nav-link,.navbar{font-family:var(--rf-font)}
a{color:var(--rf-primary)}a:hover{color:var(--rf-primary-2)}

/* ---------- header (one shared header for every page) ---------- */
#header .topbar,.topbar{background:var(--rf-dark)!important;color:#cbd5e1}
.topbar a,.topbar .btn{color:#cbd5e1}
header.header .navbar,#header .navbar,.navbar-light{background:#fff!important;border-bottom:1px solid var(--rf-line)}
.navbar-brand img,.logo img{max-height:46px}
.navbar-light .navbar-nav .nav-link{font-weight:500;color:var(--rf-text)}
.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .active>.nav-link{color:var(--rf-primary)}
.main-navbar-wrapper,#main-menu{background:#fff;border-bottom:1px solid var(--rf-line)}
.dropdown-menu{border:1px solid var(--rf-line);border-radius:14px;box-shadow:0 14px 34px rgba(30,41,59,.12)}
.dropdown-item:hover{background:rgba(99,102,241,.08);color:var(--rf-primary)}

/* ---------- page title bar ---------- */
.master-breadcrumb{background:var(--rf-dark)!important;padding:26px 0 30px;margin-bottom:0;border:0}
.master-breadcrumb .breadcrumb{background:transparent;margin:0}
.master-breadcrumb .breadcrumb-item,.master-breadcrumb .breadcrumb-item a,.master-breadcrumb .breadcrumb-item.active{color:#94a3b8}
.header-lined h1,.header-lined{border:0}
.header-lined h1{font-weight:700}
#main-body{position:relative;z-index:3;padding-top:28px;padding-bottom:50px}

/* ---------- cards ---------- */
.card,.panel{background:var(--rf-card);border:1px solid var(--rf-line);border-radius:var(--rf-radius);box-shadow:0 10px 30px rgba(30,41,59,.05);overflow:hidden}
.card-header,.panel-heading{background:#fff;border-bottom:1px solid var(--rf-line);font-weight:600;padding:16px 22px}
.card-title{font-size:17px;font-weight:600;margin:0}
.card-body{padding:22px}
.card-footer{background:var(--rf-bg);border-top:1px solid var(--rf-line)}

/* ---------- sidebar ---------- */
.sidebar .card{margin-bottom:18px}
.sidebar .list-group-item{border:0;font-weight:500;color:var(--rf-muted);padding:11px 18px}
.sidebar .list-group-item:hover{background:rgba(99,102,241,.08);color:var(--rf-primary)}
.sidebar .list-group-item.active,.list-group-item.active{background:var(--rf-grad)!important;border-color:transparent!important;color:#fff!important}

/* ---------- dashboard tiles ---------- */
.tiles .tile{background:var(--rf-card);border:1px solid var(--rf-line);border-radius:var(--rf-radius);box-shadow:0 10px 30px rgba(30,41,59,.05);padding:20px;transition:.25s}
.tiles .tile:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(99,102,241,.16)}
.tiles .tile .stat{font-weight:800;font-size:30px;color:var(--rf-text)}
.tiles .tile .title{color:var(--rf-muted);font-weight:500}
.tiles .tile .highlight{background:var(--rf-grad)!important;height:4px}

/* ---------- buttons ---------- */
.btn{border-radius:var(--rf-btn-radius);font-weight:600;padding:.55rem 1.4rem;transition:.25s}
.btn-primary,.btn-info{background:var(--rf-grad);border:0;color:#fff;box-shadow:0 8px 20px rgba(99,102,241,.3)}
.btn-primary:hover,.btn-primary:focus,.btn-info:hover{background:var(--rf-grad);color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(99,102,241,.4)}
.btn-default,.btn-secondary,.btn-outline-primary{background:#fff;color:var(--rf-primary);border:2px solid var(--rf-primary)}
.btn-default:hover,.btn-secondary:hover,.btn-outline-primary:hover{background:var(--rf-primary);color:#fff}
.btn-success{border-radius:var(--rf-btn-radius)}
.btn-sm{padding:.3rem 1rem}

/* ---------- forms ---------- */
.form-control,.custom-select,select.form-control{border:1px solid var(--rf-line);border-radius:12px;padding:.65rem 1rem;height:auto;font-family:var(--rf-font)}
.form-control:focus{border-color:var(--rf-primary);box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.input-group .form-control{border-radius:12px}
label{font-weight:600;font-size:13px}

/* ---------- tables & labels ---------- */
.table thead th{border-bottom:1px solid var(--rf-line);color:var(--rf-muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.5px}
.table td{border-color:var(--rf-line);vertical-align:middle}
.table-list tbody tr:hover{background:rgba(99,102,241,.04)}
.label,.badge{border-radius:50px;padding:4px 12px;font-weight:600;font-size:12px}
.label.status-active,.status-active,.label.status-paid,.status-paid{background:rgba(16,185,129,.12)!important;color:#10b981!important}
.label.status-pending,.status-pending,.label.status-unpaid.status-pending{background:rgba(245,158,11,.14)!important;color:#b45309!important}
.label.status-unpaid,.status-unpaid,.label.status-cancelled,.status-cancelled,.label.status-terminated,.status-terminated,.label.status-overdue{background:rgba(239,68,68,.12)!important;color:#ef4444!important}
.label.status-open,.status-open,.label.status-answered,.status-answered,.label.status-customer-reply{background:rgba(99,102,241,.12)!important;color:var(--rf-primary)!important}
.label.status-closed,.status-closed,.label.status-suspended{background:#eef0f6!important;color:var(--rf-muted)!important}

/* ---------- alerts, tabs, pagination ---------- */
.alert{border-radius:14px;border:0}
.nav-tabs .nav-link.active,.nav-pills .nav-link.active{background:var(--rf-grad);color:#fff;border-color:transparent;border-radius:50px}
.nav-pills .nav-link{border-radius:50px}
.page-item.active .page-link{background:var(--rf-primary);border-color:var(--rf-primary)}

/* ---------- login / register ---------- */
.logincontainer,.card-login{max-width:460px;margin:0 auto}

/* ---------- domain search / order form ---------- */
.domain-checker-container,#order-standard_cart .domain-checker-bg{background:var(--rf-dark)!important;border-radius:var(--rf-radius)}
#order-standard_cart .view-cart-items-header,#order-standard_cart .sub-heading span{background:var(--rf-grad);color:#fff;border-radius:12px}
#order-standard_cart .order-summary{border-radius:var(--rf-radius)}
#order-standard_cart .products .product{border:1px solid var(--rf-line);border-radius:var(--rf-radius);box-shadow:0 10px 30px rgba(30,41,59,.05)}

/* ---------- footer (one shared footer for every page) ---------- */
#footer,footer.footer{background:var(--rf-dark);color:#94a3b8;border:0;padding:26px 0}
#footer a,footer.footer a{color:#cbd5e1}
#footer a:hover{color:#fff}
.back-to-top{background:var(--rf-grad);color:#fff;border-radius:50%}

/* ---------- mobile: one card per row ---------- */
@media(max-width:767px){
  .tiles .col-6,.tiles [class*="col-"]{flex:0 0 100%;max-width:100%}
  .master-breadcrumb{padding:20px 0 46px}
  .card-body{padding:18px}
}

/* =====================================================
   v1.1 - header logo, nav, domain search, buttons
   ===================================================== */
/* Logo: shows the Resellfair logo even when no logo URL is set in WHMCS */
.navbar-brand{display:block;width:230px;height:52px;margin:6px 0;padding:0;font-size:0!important;color:transparent!important;
  background:url('../img/logo.svg') no-repeat left center;background-size:contain}
.navbar-brand img{display:none!important}
header.header,#header{box-shadow:0 4px 18px rgba(30,41,59,.06)}
header.header .navbar{padding-top:6px;padding-bottom:6px}
.navbar-toggler,.btn-outline-light{border:1px solid var(--rf-line);border-radius:12px}
.toolbar .nav-link,.toolbar .btn{color:var(--rf-text)}
.cart-btn .badge,.badge-info{background:var(--rf-accent)!important;color:#fff}
.main-navbar-wrapper .navbar-nav>li>a{font-weight:500}

/* Buttons: every colour variant follows the theme */
.btn-success,.btn-warning{background:var(--rf-grad);border:0;color:#fff;box-shadow:0 8px 20px rgba(99,102,241,.25)}
.btn-success:hover,.btn-warning:hover{background:var(--rf-grad);color:#fff;transform:translateY(-2px)}
.btn-danger{border-radius:var(--rf-btn-radius)}

/* Domain search box (home / order / domain checker) */
.domain-checker-container,.domain-checker-bg{background:var(--rf-dark)!important;border-radius:var(--rf-radius);padding:34px 20px}
.domain-checker-container h2,.domain-checker-bg h2,.home-domain-search h2{font-weight:800}
.home-domain-search,.domain-search-form{max-width:760px;margin:0 auto}
.input-group-lg>.form-control{border-radius:50px 0 0 50px;padding-left:22px}
.captchaimage img{border-radius:10px}
.domain-pricing .tld-logo,.tld-pricing-header{border-radius:12px}
.btn-lg{padding:.8rem 2rem}

/* Page area */
.primary-content .card,.primary-content .panel{margin-bottom:20px}
.card-accent-blue,.card-accent-green,.card-accent-orange,.card-accent-red,.card-accent-asbestos,.card-accent-gold,.card-accent-midnight-blue,.card-accent-teal,.card-accent-pink{border-top:4px solid var(--rf-primary)}
.sub-heading span,.sub-heading-borderless span{color:var(--rf-text);font-weight:700}
#main-body .container,.master-breadcrumb .container{max-width:1180px}

/* v1.2 fixes */
.navbar-brand,.navbar-brand *{font-size:0!important;line-height:0}
.form-group label,.col-form-label,.control-label{text-align:left!important}
.primary-content h1,.primary-content .header-lined h1{margin-top:6px;font-size:28px}
.input-group>.form-control{min-width:0}

/* ===== v2: demo-style page title bar, sidebar & tiles ===== */
.master-breadcrumb{background:linear-gradient(135deg,#0b1020,#312e81 60%,#6d28d9)!important;padding:26px 0!important;border:0!important}
.master-breadcrumb .breadcrumb{background:transparent!important;margin:0!important}
.master-breadcrumb .breadcrumb-item,.master-breadcrumb .breadcrumb-item a,.master-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:#c7d2fe!important}
.master-breadcrumb .breadcrumb-item.active{color:#fff!important;font-weight:600}
#main-body{background:#f6f7fb!important;padding-top:28px!important}
.sidebar .card,.primary-content .card{border:1px solid #e5e7f0!important;border-radius:16px!important;box-shadow:0 6px 22px rgba(30,41,59,.06)!important;overflow:hidden}
.sidebar .card-header{background:#fff!important;font-weight:700;border-bottom:1px solid #e5e7f0!important}
.sidebar .list-group-item{border:0!important;padding:11px 18px!important;color:#1e293b!important;border-radius:0!important}
.sidebar .list-group-item:hover{background:#eef0ff!important;color:#6366f1!important}
.sidebar .list-group-item.active{background:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#ec4899)!important;color:#fff!important}
.tiles .tile{background:#fff!important;border:1px solid #e5e7f0!important;border-radius:16px!important;box-shadow:0 6px 22px rgba(30,41,59,.06)!important}
.tiles .tile .stat{color:#6366f1!important;font-weight:800}
.table thead th{background:#f6f7fb!important;border-bottom:1px solid #e5e7f0!important;color:#64748b;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px}
@media(max-width:767px){.tiles .col-6{flex:0 0 100%;max-width:100%}}