/* ==========================================================================
   CloudSpace UK — client portal skin
   Loads AFTER modern-blue-white.css (header.tpl) so it re-skins the whole
   WHMCS Twenty-One portal to match cloudspaceuk.co.uk.
   Palette + type mirror the main site design system.
   ========================================================================== */

:root{
  --cs-paper:#f5f6f9; --cs-paper2:#eef1f6; --cs-card:#ffffff;
  --cs-ink:#0f1628; --cs-txt:#1b2334; --cs-mut:#5a6478; --cs-dim:#98a1b3;
  --cs-blue:#2563eb; --cs-blue-d:#1f52c9; --cs-blue-l:#eaf1ff;
  --cs-line:rgba(15,23,42,.10); --cs-line2:rgba(15,23,42,.16);
  --cs-green:#059669; --cs-amber:#d97706; --cs-red:#dc2626;
}

/* ---------- base ---------- */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  background:var(--cs-paper) !important;
  color:var(--cs-txt);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4{font-weight:700;letter-spacing:-.02em;color:var(--cs-ink);}
a{color:var(--cs-blue);}
a:hover{color:var(--cs-blue-d);}
::selection{background:rgba(37,99,235,.18);}
:focus-visible{outline:2px solid rgba(37,99,235,.5);outline-offset:2px;}
.text-primary{color:var(--cs-blue) !important;}
.bg-primary{background-color:var(--cs-blue) !important;}
hr{border-color:var(--cs-line);}

/* ---------- buttons ---------- */
.btn{
  border-radius:11px; font-weight:600; letter-spacing:-.01em;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,background .2s,border-color .2s,color .2s;
}
.btn-primary,.btn-active-client{
  color:#fff !important; border:1px solid var(--cs-blue-d) !important;
  background:linear-gradient(180deg,#4278f4,#2563eb) !important;
  box-shadow:0 10px 22px -10px rgba(37,99,235,.6);
}
.btn-primary:hover,.btn-active-client:hover,.btn-primary:focus{
  background:linear-gradient(180deg,#3a6ef2,#1f5ae0) !important;
  transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(37,99,235,.7);
}
.btn-outline-primary{
  color:var(--cs-blue) !important; background:#fff !important;
  border:1px solid var(--cs-line2) !important;
}
.btn-outline-primary:hover{
  color:var(--cs-blue) !important; background:var(--cs-blue-l) !important;
  border-color:var(--cs-blue) !important; transform:translateY(-1px);
}
.btn-secondary,.btn-default,.btn-light{
  color:var(--cs-ink) !important; background:#fff !important;
  border:1px solid var(--cs-line2) !important; box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.btn-secondary:hover,.btn-default:hover,.btn-light:hover{
  border-color:var(--cs-blue) !important; color:var(--cs-blue) !important; transform:translateY(-1px);
}
.btn-success{background:linear-gradient(180deg,#10b981,#059669) !important;border-color:#047857 !important;color:#fff !important;}
.btn-danger,.btn-outline-danger:hover{background:var(--cs-red) !important;border-color:#b91c1c !important;color:#fff !important;}
.btn-outline-danger{color:var(--cs-red) !important;border:1px solid rgba(220,38,38,.4) !important;background:#fff !important;}
.btn-link{color:var(--cs-blue) !important;font-weight:600;}
.btn-lg{border-radius:12px;}
.btn-sm{border-radius:9px;}

/* ---------- cards & panels ---------- */
.card,.panel{
  background:var(--cs-card); border:1px solid var(--cs-line) !important;
  border-radius:16px !important; box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.card-header,.panel-heading{
  background:#fff !important; border-bottom:1px solid var(--cs-line) !important;
  font-weight:700; color:var(--cs-ink); border-radius:16px 16px 0 0 !important;
  padding:18px 22px;
}
.card-body,.panel-body{padding:22px;}
.card-title{color:var(--cs-ink);font-weight:700;letter-spacing:-.01em;}
.card-accent-blue,.card-accent{border-top:3px solid var(--cs-blue) !important;}
.client-home-cards .card:hover,.client-home-panels .panel:hover{
  border-color:rgba(37,99,235,.4) !important;
  box-shadow:0 18px 38px -20px rgba(37,99,235,.35);
  transform:translateY(-2px);
}
.well{background:var(--cs-paper2);border:1px solid var(--cs-line);border-radius:14px;}

/* prevent double-cards: when a page supplies its own .card, flatten the WHMCS
   content wrapper so the card stands alone (no card-inside-a-card) */
.primary-content:has(> .card),
.primary-content:has(> form > .card){
  background:transparent !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:0 !important;
}

/* clean, merged icon input fields (login, register, password reset, contact, etc.) */
.input-group-merge{
  border:1px solid var(--cs-line2); border-radius:10px; background:#fff;
  display:flex; align-items:stretch; overflow:hidden; box-shadow:none;
  transition:border-color .15s,box-shadow .15s;
}
.input-group-merge:focus-within{border-color:var(--cs-blue);box-shadow:0 0 0 3px rgba(37,99,235,.14);}
.input-group-merge .input-group-text{background:transparent !important;border:0 !important;box-shadow:none !important;color:var(--cs-dim);padding:0 .3rem 0 .9rem;}
.input-group-merge .form-control{border:0 !important;background:transparent !important;box-shadow:none !important;}
.input-group-merge .input-group-append .btn,.input-group-merge .btn-reveal-pw{border:0 !important;background:transparent !important;box-shadow:none !important;color:var(--cs-dim);}
.input-group-merge .btn-reveal-pw:hover{color:var(--cs-blue);}

/* textarea + select consistency with inputs */
textarea.form-control{min-height:120px;line-height:1.6;}
select.form-control,select.custom-select{cursor:pointer;}

/* file upload control */
.custom-file{height:auto;}
.custom-file-input{cursor:pointer;}
.custom-file-label{height:auto;padding:.6rem .85rem;border:1px solid var(--cs-line2);border-radius:10px;color:var(--cs-dim);line-height:1.5;}
.custom-file-label::after{height:100%;display:flex;align-items:center;background:var(--cs-paper2);color:var(--cs-ink);font-weight:600;border-left:1px solid var(--cs-line2);border-radius:0 9px 9px 0;padding:0 1rem;}

/* ---------- sidebar (client area nav) ---------- */
.sidebar .list-group-item,.sidebar-menu .list-group-item{
  border:0 !important; border-radius:10px !important; margin-bottom:2px;
  color:var(--cs-txt); font-weight:500; background:transparent;
  transition:background .18s,color .18s;
}
.sidebar .list-group-item:hover{background:var(--cs-blue-l);color:var(--cs-blue);}
.sidebar .list-group-item.active,.sidebar .list-group-item.panel-title.active{
  background:linear-gradient(180deg,#4278f4,#2563eb) !important; color:#fff !important;
  box-shadow:0 8px 18px -10px rgba(37,99,235,.6);
}
.sidebar .list-group-item.active a,.sidebar .list-group-item.active i{color:#fff !important;}
.sidebar .panel,.sidebar .card{border:1px solid var(--cs-line) !important;border-radius:16px !important;}
.sidebar .panel-heading,.sidebar .card-header{background:#fff !important;}

/* ---------- top / primary nav ---------- */
.primary-nav .nav-link,.navbar .nav-link{color:var(--cs-txt);font-weight:600;border-radius:9px;}
.primary-nav .nav-link:hover{color:var(--cs-blue);background:var(--cs-blue-l);}
.primary-nav .nav-link.active,.navbar .nav-link.active{color:var(--cs-blue) !important;}
.header,.header.header{background:#fff !important;border-bottom:1px solid var(--cs-line) !important;box-shadow:none !important;}
.navbar-brand img,.header img.logo,.navbar-brand .logo-img{max-height:40px;width:auto;}

/* dropdowns */
.dropdown-menu{
  border:1px solid var(--cs-line) !important; border-radius:14px !important;
  box-shadow:0 24px 50px -24px rgba(15,23,42,.35) !important; padding:8px;
}
.dropdown-item{border-radius:9px;font-weight:500;color:var(--cs-txt);padding:9px 12px;}
.dropdown-item:hover{background:var(--cs-blue-l);color:var(--cs-blue);}
.dropdown-item.active,.dropdown-item:active{background:var(--cs-blue) !important;color:#fff !important;}

/* header: cart + account on one line; hide the secondary nav row when it has no items */
.navbar .toolbar{flex-direction:row;align-items:center;}
.navbar .toolbar .nav-item{display:flex;align-items:center;}
.main-navbar-wrapper:not(:has(.nav-item)){display:none;}

/* cart button in header */
.cart-btn,.btn.cart-btn{border:1px solid var(--cs-line2) !important;border-radius:11px !important;color:var(--cs-ink) !important;background:#fff !important;}
.cart-btn:hover{border-color:var(--cs-blue) !important;color:var(--cs-blue) !important;}

/* ---------- tables ---------- */
.table{color:var(--cs-txt);}
.table thead th{
  background:var(--cs-paper2); color:var(--cs-mut);
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  border-bottom:1px solid var(--cs-line) !important; border-top:0 !important; padding:14px 16px;
}
.table td,.table th{border-top:1px solid var(--cs-line) !important;vertical-align:middle;padding:14px 16px;}
.table-hover tbody tr:hover{background:rgba(37,99,235,.045);}
.table-bordered,.table-bordered td,.table-bordered th{border-color:var(--cs-line) !important;}
.table-responsive,.table-container{border:1px solid var(--cs-line);border-radius:14px;overflow:hidden;}

/* ---------- forms ---------- */
.form-control,.custom-select,.form-select{
  border:1px solid var(--cs-line2) !important; border-radius:10px !important;
  color:var(--cs-ink); background:#fff; padding:.6rem .85rem; height:auto;
  transition:border-color .15s,box-shadow .15s;
}
.form-control:focus,.custom-select:focus,.form-select:focus{
  border-color:var(--cs-blue) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.14) !important;
}
.form-control::placeholder{color:var(--cs-dim);}
label,.control-label{font-weight:600;color:var(--cs-txt);font-size:.86rem;}
.input-group-text{background:var(--cs-paper2);border:1px solid var(--cs-line2);color:var(--cs-mut);border-radius:10px;}
.custom-control-input:checked~.custom-control-label::before{background:var(--cs-blue) !important;border-color:var(--cs-blue) !important;}

/* ---------- alerts ---------- */
.alert{border:1px solid var(--cs-line);border-left-width:4px;border-radius:12px;font-weight:500;}
.alert-primary,.alert-info{background:#eef4ff;border-color:var(--cs-blue);color:#1e3a8a;}
.alert-success{background:#ecfdf5;border-color:var(--cs-green);color:#065f46;}
.alert-warning{background:#fffbeb;border-color:var(--cs-amber);color:#92400e;}
.alert-danger{background:#fef2f2;border-color:var(--cs-red);color:#991b1b;}

/* ---------- badges / status labels ---------- */
.badge{border-radius:999px;font-weight:600;letter-spacing:.02em;padding:.4em .75em;}
.badge-primary{background:var(--cs-blue) !important;}
.badge.status-active,.label-active,.status-active{background:#d1fae5 !important;color:#065f46 !important;}
.badge.status-pending,.status-pending{background:#fef3c7 !important;color:#92400e !important;}
.badge.status-suspended,.status-suspended{background:#fee2e2 !important;color:#991b1b !important;}
.badge.status-cancelled,.badge.status-terminated,.status-cancelled,.status-terminated{background:#f1f3f7 !important;color:#5a6478 !important;}

/* ---------- nav tabs & pills ---------- */
.nav-tabs{border-bottom:1px solid var(--cs-line);}
.nav-tabs .nav-link{border:0;color:var(--cs-mut);font-weight:600;border-bottom:2px solid transparent;border-radius:0;}
.nav-tabs .nav-link:hover{color:var(--cs-ink);border-bottom-color:var(--cs-line2);}
.nav-tabs .nav-link.active{color:var(--cs-blue);background:transparent;border-bottom:2px solid var(--cs-blue);}
.nav-pills .nav-link{color:var(--cs-txt);font-weight:600;border-radius:10px;}
.nav-pills .nav-link.active{background:linear-gradient(180deg,#4278f4,#2563eb) !important;color:#fff;}

/* ---------- pagination & breadcrumb ---------- */
.pagination .page-link{color:var(--cs-blue);border:1px solid var(--cs-line);}
.pagination .page-item.active .page-link{background:var(--cs-blue);border-color:var(--cs-blue);color:#fff;}
.breadcrumb{background:transparent;padding-left:0;}
.breadcrumb-item.active{color:var(--cs-mut);}
.breadcrumb-item a{color:var(--cs-blue);}

/* progress bars */
.progress{background:#e7ebf3;border-radius:999px;}
.progress-bar{background:linear-gradient(90deg,#2563eb,#7ba6ff);}

/* ---------- footer ---------- */
#footer.footer,.footer{background:#0f1628 !important;color:rgba(255,255,255,.72) !important;border-top:0;padding:40px 0;}
.footer .nav-link,.footer a{color:rgba(255,255,255,.82) !important;font-weight:500;}
.footer .nav-link:hover,.footer a:hover{color:#fff !important;}
.footer .copyright{color:rgba(255,255,255,.55) !important;}
.footer .btn{background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.28) !important;color:#fff !important;border-radius:10px;}
.footer .btn:hover{background:rgba(255,255,255,.14) !important;border-color:#fff !important;transform:none;}