/* =====================================================================
   Cloudesta — Client Area modern restyle (VISUAL ONLY)
   Scoped under body.cds-ca (added on client-area templates only).
   No markup / data / logic changed. Revert = remove the <link> in
   includes/head.tpl and the body class in header.tpl.
   ===================================================================== */

.cds-ca{--b:#1697bf;--b2:#55bde5;--bd:#0f7ea0;--ink:#212122;--mut:#6b7480;--line:#e6ebf2;}

/* ---------- dashboard header card (home) ---------- */
.cds-ca .container-clientarea{
  position:relative;background:linear-gradient(135deg,#123d4d 0%,#1697bf 100%);
  border-radius:20px;padding:28px 32px;margin:18px 0 30px;overflow:hidden;
  box-shadow:0 18px 42px rgba(22,151,191,.20);}
.cds-ca .container-clientarea-bg{display:none;}
.cds-ca .clientarea-new-header .username,
.cds-ca .clientarea-new-header .adress,
.cds-ca .clientarea-new-header h5,
.cds-ca .clientarea-new-header .mergecolor,
.cds-ca .clientarea-new-header b{color:#fff!important;}
.cds-ca .clientarea-new-header .adress{opacity:.9;font-weight:500;}
.cds-ca .clientarea-new-header .profile-photo img{border:3px solid rgba(255,255,255,.65);box-shadow:0 6px 16px rgba(0,0,0,.18);}
.cds-ca .clientarea-new-header .profile-photo a{color:rgba(255,255,255,.85)!important;font-size:12px;}
.cds-ca .header-features-icons .badge.feat{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:13px;font-size:17px;margin-left:8px;background:rgba(255,255,255,.16)!important;
  color:#fff!important;transition:transform .2s,box-shadow .2s;}
.cds-ca .header-features-icons .badge.feat:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.18);}

/* ---------- overview cards (home) — glass + gradient accent ---------- */
.cds-ca .overview-services:not(.bg-yellow) .service-section{
  position:relative;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(22,151,191,.16);border-radius:18px;padding:34px 22px 28px;
  text-align:center;height:100%;overflow:hidden;box-shadow:0 12px 32px rgba(20,40,60,.07);
  transition:transform .25s,box-shadow .25s,border-color .25s;}
.cds-ca .overview-services:not(.bg-yellow) .service-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--b),var(--b2));}
.cds-ca .overview-services:not(.bg-yellow) .service-section:hover{
  transform:translateY(-6px);box-shadow:0 26px 50px rgba(22,151,191,.20);border-color:rgba(22,151,191,.38);}
.cds-ca .overview-services:not(.bg-yellow) .service-section img.svg,
.cds-ca .overview-services:not(.bg-yellow) .service-section svg{height:54px;width:auto;margin-bottom:14px;
  filter:drop-shadow(0 6px 12px rgba(22,151,191,.28));}
.cds-ca .overview-services:not(.bg-yellow) .service-section .title{font-size:20px;font-weight:800;color:var(--ink);margin-top:4px;}
.cds-ca .overview-services:not(.bg-yellow) .service-section .subtitle{font-size:13.5px;color:var(--mut);line-height:1.5;}
.cds-ca .overview-services .service-section .plans.badge.feat{
  background:linear-gradient(90deg,var(--b),var(--b2))!important;color:#fff!important;border-radius:999px;font-weight:700;}
/* ---------- Account Overview (home) — compact masonry, light bg, no yellow ---------- */
.cds-ca .overview-services.bg-yellow{background:#f5f8fb!important;border-radius:0!important;padding:52px 0!important;}
.cds-ca .overview-services.bg-yellow .section-heading{color:var(--ink)!important;font-weight:800;}
.cds-ca .overview-services.bg-yellow .section-subheading{color:var(--mut)!important;}
/* multi-column masonry: heading spans full width, panels flow into balanced columns */
.cds-ca .overview-services.bg-yellow .service-wrap > .row{column-count:3;column-gap:20px;margin:0;display:block;}
.cds-ca .overview-services.bg-yellow .service-wrap > .row::before,
.cds-ca .overview-services.bg-yellow .service-wrap > .row::after{content:none!important;display:none!important;}
.cds-ca .overview-services.bg-yellow .service-wrap > .row > div{float:none!important;width:100%!important;max-width:100%!important;padding:0!important;}
.cds-ca .overview-services.bg-yellow .service-wrap > .row > .col-md-12.text-center{
  -webkit-column-span:all;column-span:all;margin-bottom:20px;}
.cds-ca .overview-services.bg-yellow .rockbox{
  display:inline-block;width:100%;margin:0 0 20px;
  -webkit-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid;}
/* white gradient-accent cards */
.cds-ca .overview-services.bg-yellow .rockbox .service-section{
  position:relative;background:#fff!important;border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;text-align:left;overflow:hidden;box-shadow:0 10px 26px rgba(20,40,60,.06);
  transition:transform .2s,box-shadow .2s;}
.cds-ca .overview-services.bg-yellow .rockbox .service-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--b),var(--b2));}
.cds-ca .overview-services.bg-yellow .rockbox .service-section:hover{
  transform:translateY(-4px);box-shadow:0 18px 38px rgba(22,151,191,.14);}
.cds-ca .overview-services.bg-yellow .rockbox .service-section .title{
  font-size:15.5px;font-weight:800;color:var(--ink);padding-bottom:11px;margin-bottom:12px;
  border-bottom:2px solid #eef2f7;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cds-ca .overview-services.bg-yellow .rockbox .service-section .title .badge{
  background:linear-gradient(90deg,var(--b),var(--b2))!important;color:#fff!important;border-radius:999px;font-weight:700;}
.cds-ca .overview-services.bg-yellow .list-group{gap:6px;}
.cds-ca .overview-services.bg-yellow .list-group-item{
  background:#fff!important;border:1px solid #eef2f7!important;border-radius:10px!important;
  margin-bottom:0;padding:10px 13px;font-size:13px;color:#33414d;
  transition:background .15s,color .15s,border-color .15s,transform .15s;}
.cds-ca .overview-services.bg-yellow .list-group-item:hover{
  background:#f3f9fb!important;border-color:var(--b2)!important;color:var(--b)!important;transform:translateX(3px);}
.cds-ca .overview-services.bg-yellow .list-group-item i{color:var(--b);}
.cds-ca .overview-services.bg-yellow .list-group-item .badge{
  background:var(--b)!important;color:#fff!important;border-radius:999px;font-weight:700;}
.cds-ca .overview-services.bg-yellow .btn-default-yellow-fill{border-radius:11px;font-weight:700;margin-top:14px;}
@media (max-width:1100px){.cds-ca .overview-services.bg-yellow .service-wrap > .row{column-count:2;}}
@media (max-width:680px){.cds-ca .overview-services.bg-yellow .service-wrap > .row{column-count:1;}}

/* ---------- data tables (invoices / services / domains / tickets) ---------- */
.cds-ca .table-container{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 12px;
  box-shadow:0 10px 28px rgba(20,40,60,.05);}
.cds-ca .table-list{margin-bottom:4px;}
.cds-ca .table-list thead th{
  background:transparent;color:var(--mut);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;border:none;border-bottom:2px solid #eef2f7;padding:14px 12px;}
.cds-ca .table-list tbody td{border-color:#f0f3f7;vertical-align:middle;padding:14px 12px;color:#33414d;}
.cds-ca .table-list tbody tr{transition:background .15s;}
.cds-ca .table-list tbody tr:hover{background:#f6fbfd;}

/* ---------- status badges ---------- */
.cds-ca .label.status{border-radius:999px;padding:5px 13px;font-weight:700;font-size:11.5px;letter-spacing:.02em;}
.cds-ca .status-active,.cds-ca .status-paid,.cds-ca .status-completed{background:#e7f7ee!important;color:#15924f!important;}
.cds-ca .status-unpaid,.cds-ca .status-overdue,.cds-ca .status-cancelled,
.cds-ca .status-suspended,.cds-ca .status-terminated,.cds-ca .status-fraud,
.cds-ca .status-expired,.cds-ca .status-refunded{background:#fdeaea!important;color:#d22d2d!important;}
.cds-ca .status-pending,.cds-ca .status-draft,.cds-ca .status-open{background:#fff5e6!important;color:#c9760a!important;}

/* ---------- panels / sidebars ---------- */
.cds-ca .panel{border:1px solid var(--line)!important;border-radius:16px!important;
  box-shadow:0 8px 24px rgba(20,40,60,.05);overflow:hidden;}
.cds-ca .panel-heading{background:#fff!important;border-bottom:1px solid #eef2f7!important;padding:16px 18px;}
.cds-ca .panel-title{font-weight:800;color:var(--ink);font-size:15px;}
.cds-ca .panel-body{padding:18px;}
.cds-ca .list-group-item{border-color:#f0f3f7!important;transition:background .15s,color .15s;}
.cds-ca .sidebar .list-group-item.active,
.cds-ca .list-group-item.active{
  background:linear-gradient(90deg,var(--b),var(--b2))!important;border-color:transparent!important;color:#fff!important;}
.cds-ca .sidebar .list-group-item:hover:not(.active){background:#f3f9fb!important;color:var(--b)!important;}

/* ---------- buttons ---------- */
.cds-ca .btn-info{background:var(--b)!important;border-color:var(--b)!important;border-radius:10px;font-weight:600;}
.cds-ca .btn-info:hover{background:var(--bd)!important;border-color:var(--bd)!important;}
.cds-ca .btn-default{border-radius:10px;border-color:#dde4ec;}
.cds-ca .btn-default-yellow-fill{border-radius:11px;font-weight:700;padding:11px 24px;}
.cds-ca .btn-group .btn{border-radius:9px;}

/* ---------- forms (submit ticket / account details) ---------- */
.cds-ca .form-control,.cds-ca .selectpicker,.cds-ca select.form-control{
  border-radius:10px;border-color:#dde4ec;box-shadow:none;}
.cds-ca .form-control:focus{border-color:var(--b);box-shadow:0 0 0 3px rgba(22,151,191,.12);}
.cds-ca .form-group label,.cds-ca label.control-label{font-weight:600;color:#33414d;}
.cds-ca .card,.cds-ca .well{border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(20,40,60,.05);}