/* ===== Client Area Dashboard Tiles (Beautiful UI) ===== */
.tiles .tile{
  background: #ffffff;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px;
  padding: 22px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tiles .tile:hover,
.tiles .tile:focus{
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.10) !important;
}

.tiles .tile i{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--primary-light);
  color: var(--primary);
  flex: 0 0 52px;
}

.tiles .tile .tt-box-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tiles .tile .stat{
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.tiles .tile .title{
  font-size: 14px;
  opacity: .75;
  margin: 0;
}

/* Better spacing on small devices */
@media (max-width: 575.98px){
  .tiles .tile{
    padding: 18px 14px;
    border-radius: 14px;
  }
  .tiles .tile i{
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-basis: 46px;
    font-size: 22px;
  }
  .tiles .tile .stat{ font-size: 30px; }
}

/* ===== Dashboard Mixed Gradient Cards (Client Area Dashboard) ===== */
.clientarea-homepage .tiles .tile,
body.clientarea-homepage .tiles .tile,
body.page-clientarea .tiles .tile{
  overflow: hidden;
}

.clientarea-homepage .tiles .tile .stat,
body.clientarea-homepage .tiles .tile .stat,
body.page-clientarea .tiles .tile .stat,
.clientarea-homepage .tiles .tile .title,
body.clientarea-homepage .tiles .tile .title,
body.page-clientarea .tiles .tile .title{
  color: #fff !important;
  opacity: .95;
}

.clientarea-homepage .tiles .tile i,
body.clientarea-homepage .tiles .tile i,
body.page-clientarea .tiles .tile i{
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Services */
.clientarea-homepage .tiles .tile:nth-child(1),
body.clientarea-homepage .tiles .tile:nth-child(1),
body.page-clientarea .tiles .tile:nth-child(1){
  background: linear-gradient(135deg, #0d6efd, #00c6ff) !important;
}

/* Domains */
.clientarea-homepage .tiles .tile:nth-child(2),
body.clientarea-homepage .tiles .tile:nth-child(2),
body.page-clientarea .tiles .tile:nth-child(2){
  background: linear-gradient(135deg, #6f42c1, #b44cff) !important;
}

/* Tickets */
.clientarea-homepage .tiles .tile:nth-child(3),
body.clientarea-homepage .tiles .tile:nth-child(3),
body.page-clientarea .tiles .tile:nth-child(3){
  background: linear-gradient(135deg, #ff9800, #ff5722) !important;
}

/* Invoices */
.clientarea-homepage .tiles .tile:nth-child(4),
body.clientarea-homepage .tiles .tile:nth-child(4),
body.page-clientarea .tiles .tile:nth-child(4){
  background: linear-gradient(135deg, #28a745, #20c997) !important;
}



/* ====== FIX: Gradient tiles based on column position (WHMCS clientareahome.tpl) ====== */
.tiles .row > div:nth-child(1) > a.tile.tt-single-box{
  background: linear-gradient(135deg, #0d6efd, #00c6ff) !important;
  color: #fff !important;
}
.tiles .row > div:nth-child(2) > a.tile.tt-single-box{
  background: linear-gradient(135deg, #6f42c1, #b44cff) !important;
  color: #fff !important;
}
.tiles .row > div:nth-child(3) > a.tile.tt-single-box{
  background: linear-gradient(135deg, #ff9800, #ff5722) !important;
  color: #fff !important;
}
.tiles .row > div:nth-child(4) > a.tile.tt-single-box{
  background: linear-gradient(135deg, #28a745, #20c997) !important;
  color: #fff !important;
}

/* Text inside tiles */
.tiles .row > div > a.tile.tt-single-box .title,
.tiles .row > div > a.tile.tt-single-box .stat{
  color: #fff !important;
}

/* Icon looks nicer on gradient */
.tiles .row > div > a.tile.tt-single-box i{
  color: rgba(255,255,255,0.95) !important;
  opacity: 1 !important;
}

/* ===== Premium Icon Box Style (Dashboard Tiles) ===== */
.tiles .row > div > a.tile.tt-single-box > i{
  width: 65px !important;
  height: 65px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 32px !important;
  transition: transform .25s ease, background .25s ease;
}

.tiles .row > div > a.tile.tt-single-box:hover > i{
  transform: scale(1.15) rotate(5deg);
  background: rgba(255, 255, 255, 0.35) !important;
}