/* ==== Sidebar / Profile cards ==== */
.profile-update .card {
    box-shadow: 0 0 10px rgba(0,0,0,.05);
    border: none;
    margin-bottom: 20px;
}
.profile-update .card-header {
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1rem 1.5rem;
}
.profile-update .card-body { padding: 1.5rem; }
/* ====== Профиль: меню слева ====== */
/* === Активный пункт: постоянная неоновая подсветка === */
.profile-update .list-group-item.active,
.profile-update .list-group-item[aria-current="page"],
.profile-update .list-group-item.active:hover,
.profile-update .list-group-item.active:focus {
  background: linear-gradient(90deg, rgba(0,184,255,.30), rgba(0,184,255,.08));
  border-color: #2bdfff;
  color: #ffffff;
  box-shadow:
    inset 4px 0 0 #2bdfff,            /* яркая полоса слева */
    inset 0 0 12px rgba(0,184,255,.18);
}

/* Иконка в активном пункте чуть ярче */
.profile-update .list-group-item.active i,
.profile-update .list-group-item[aria-current="page"] i {
  color: #aaf1ff;
  opacity: 1;
}

/* Hover ТОЛЬКО для неактивных пунктов */
.profile-update .list-group .list-group-item:hover:not(.active),
.profile-update .list-group-item-action:hover:not(.active),
.profile-update .list-group-item-action:focus:not(.active) {
  background: linear-gradient(90deg, rgba(0,184,255,.18), rgba(0,184,255,0));
  color: #e6f7ff;
  border-color: #1a5d7d;
  box-shadow: inset 3px 0 0 #2bdfff;
}

/* Базовое состояние пункта меню (оставляем как было) */
.profile-update .list-group.list-group-flush .list-group-item {
  background: rgba(5,16,26,.85);
  border: 1px solid #10263b;
  color: #bfe6ff;
  padding: 12px 16px;
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.profile-update .list-group.list-group-flush .list-group-item + .list-group-item {
  border-top-color: #0f2539;
}
.profile-update .list-group-item i.fa,
.profile-update .list-group-item i.fab,
.profile-update .list-group-item i.fas {
  margin-right: 10px;
  opacity: .9;
}
.profile-update .list-group .list-group-item:hover:not(.active) i {
  color: #9eeaff;
}
.profile-update .fa-fw { margin-right: 8px; }

/* Avatar */
.avatar-container { position: relative; display: inline-block; margin-bottom: 15px; }
.avatar-circle {
    width: 250px; height: 250px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-icon {
    position: absolute; bottom: 15px; right: 10px;
    background-color: var(--primary-color);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7);
    transition: all 0.3s ease;
}
.avatar-upload-icon:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.9); }
.upload-cloud-icon { color: #fff; font-size: 18px; margin: 0; cursor: pointer; padding: 9px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.avatar-upload-icon:hover .upload-cloud-icon { animation: pulse 1.5s infinite; }
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.1)} 100%{transform:scale(1)} }

/* ==== Tabs/Status cards (чтобы не дублировать во вьюхах) ==== */
.services-status-page .page-title { letter-spacing:1px; font-weight:800; text-transform:uppercase; color:#57c9ff; }
.tabs { display:flex; gap:10px; flex-wrap:wrap; }
.status-tab { padding:8px 12px; border:1px solid #1c2e44; border-radius:10px; text-decoration:none; color:#8fd3ff; background:#0b1b2b; box-shadow:0 0 6px rgba(0,195,255,.12) inset; }
.status-tab.active { border-color:#2bdfff; color:#e5f8ff; box-shadow:0 0 12px rgba(0,195,255,.35) inset; }
.status-tab .pill { margin-left:6px; background:#072236; border-radius:8px; padding:2px 6px; font-size:12px; }

.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.svc-card { display:flex; gap:14px; background:linear-gradient(180deg,#0b1624 0%, #0a1b2b 100%); border:1px solid #10263b; border-radius:16px; padding:16px; box-shadow:0 0 14px rgba(0,180,255,.08); }
.svc-card__icon i { font-size: 32px; line-height: 1; display: inline-block; }
.svc-card__icon img { width: 36px; height: 36px; object-fit: contain; display: inline-block; }
.svc-card__title { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:.5px; color:#cfeaff; }
.svc-card__desc { color:#9fc4e8; margin-top:6px; min-height:42px; }
.svc-card__meta { margin-top:8px; display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:#86b9dd; }
.meta-item i { margin-right:6px; }
.svc-card__actions { margin-top:12px; }
.btn-neon { display:inline-block; padding:8px 14px; border-radius:10px; background:#05263b; color:#cfeaff; text-decoration:none; border:1px solid #1a5d7d; box-shadow:0 0 10px rgba(43,223,255,.25) inset; }
.btn-neon:hover { border-color:#2bdfff; color:#e7fbff; }

.badge-status { padding:3px 8px; border-radius:999px; font-size:12px; border:1px solid transparent; }
.badge-success-neon { background:rgba(0,210,120,.12); border-color:#11e6a2; color:#baffec; }
.badge-danger-neon  { background:rgba(230,40,60,.10); border-color:#ff5f7a; color:#ffc2cb; }
.badge-warning-neon { background:rgba(255,195,0,.10); border-color:#ffc300; color:#ffe9a6; }

.section-subtitle { margin:28px 0 10px; font-size:16px; opacity:.9; letter-spacing:.6px; color:#9ddaff; }
.svc-table-wrap { background:#091423; border:1px solid #10263b; border-radius:12px; padding:6px; }
.svc-table { width:100%; border-collapse:separate; border-spacing:0; }
.svc-table thead th { font-weight:700; padding:10px; border-bottom:1px solid #16334c; color:#9ddaff; }
.svc-table tbody td { padding:10px; border-bottom:1px dashed #112b42; color:#cfeaff; vertical-align:top; }
.tbl-name { display:flex; align-items:center; gap:10px; }
.tbl-icon i { font-size: 18px; vertical-align: -2px; }
.tbl-icon img { width: 20px; height: 20px; object-fit: contain; }
.link-neon { color:#86e8ff; text-decoration:none; }
.link-neon:hover { color:#c7f6ff; text-decoration:underline; }

/* ===========================
   MY ORDERS (таблица/бейджи/прогресс)
   =========================== */
   .my-orders .summary { color:#6c757d; font-size:0.9rem; }

   /* Таблица с неоновой шапкой */
   .table.order-table {
     width:100%;
     border:1px solid var(--primary-color);
     background-color: rgba(0,0,0,0.85) !important;
     color:#cfeaff;
   }
   .table.order-table thead th{
     background-color: rgba(0,0,0,0.5);
     color: var(--primary-color);
     border-bottom: 2px solid var(--primary-color);
     text-transform: uppercase;
     font-weight: 700;
     letter-spacing: 1px;
     padding: 15px 10px;
   }
   .table.order-table tbody tr { transition: all .25s ease; }
   .table.order-table tbody tr:hover { background-color: rgba(var(--primary-color-rgb), .16) !important; }
   .table.order-table td{
     border-top:1px solid rgba(255,255,255,.1);
     padding:12px 10px; vertical-align:middle;
   }
   
   /* Ссылка-номер заказа */
   .order-link{
     color:var(--primary-color);
     text-decoration:none; font-weight:600;
     text-shadow:0 0 5px rgba(var(--primary-color-rgb), .5);
   }
   .order-link:hover{ color:var(--primary-color-hover); text-decoration:none; text-shadow:0 0 8px rgba(var(--primary-color-rgb), .8); }
   
   /* Бейджи статусов (используем bootstrap-классы, но чуть улучшим) */
   .order-table .badge{
     padding:7px 10px; border-radius:15px; font-weight:600;
     text-transform:uppercase; letter-spacing:.5px; font-size:.75rem;
     box-shadow:0 0 10px rgba(0,0,0,.3);
   }
   
   /* Прогресс-бары под тематику */
   .order-progress{
     height:26px; border-radius:16px; overflow:hidden;
     background: rgba(130, 136, 148, .35); /* серый фон как на скрине */
     box-shadow: 0 0 5px rgba(0,0,0,.3) inset;
   }
   .order-progress .progress-bar{
     display:flex; align-items:center; justify-content:center;
     font-weight:700; color:#fff; text-shadow:0 0 4px rgba(0,0,0,.6);
     transition: width .6s ease;
   }
   /* IN PROGRESS — серый, без текста */
   .order-progress .progress-bar.bg-warning{
     background: #8e949f;
     color: transparent; /* убираем проценты изнутри, как на скрине */
   }
   /* 0% — синий/бирюзовый */
   .order-progress .progress-bar.bg-info{
     background: #1b80c4;
     color: transparent;
   }
   /* 100% — синяя неоновая */
   .order-progress .progress-bar.bg-success{
     background: linear-gradient(90deg,#1167b1,#1aa3ff);
     box-shadow: 0 0 10px rgba(27,128,196,.6);
     color:#fff;
   }
   /* Cancelled — красная плашка */
   .order-progress .progress-bar.bg-danger{
     background: #b3394a;
     box-shadow: 0 0 10px rgba(179,57,74,.6);
   }
   
   /* Неоновая кнопка (используется и на change-password) */
   .btn-neon { border:1px solid #1a5d7d; box-shadow:0 0 10px rgba(43,223,255,.25) inset; }
   .btn-neon:hover { border-color:#2bdfff; }
   
   /* ===========================
      CHANGE PASSWORD (инфо-панель)
      =========================== */
   .change-password .info-panel{
     padding: 14px 16px;
     background: rgba(0, 0, 0, 0.80);
     border-radius: 8px;
     border-left: 4px solid var(--primary-color);
     color: #cfeaff;
     box-shadow: 0 0 10px rgba(43,223,255,.25);
   }
   .change-password .info-panel .fa-info-circle{ color: var(--primary-color); margin-right:8px; }
   

   /* ===== SERVICE STATUS — улучшенные карточки ===== */
.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:18px;
  }
  
  /* Общая карточка */
  .svc-card{
    display:flex; flex-direction:column;
    min-height: 200px;
    padding:18px 18px 14px;
    border-radius:16px;
    background: linear-gradient(180deg,#0b1624 0%, #0a1b2b 100%);
    border:1px solid #10263b;
    box-shadow: 0 6px 18px rgba(0,180,255,.08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    font-size: 26px;
  }
  .svc-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,180,255,.12);
    border-color:#1a3c58;
  }
  
  /* Статусные акценты */
  .svc-card.is-active   { --ring:#11e6a2; }
  .svc-card.is-soon     { --ring:#ffc300; }
  .svc-card.is-disabled { --ring:#ff5f7a; filter: grayscale(.05); opacity:.92; }
  .svc-card.is-disabled .svc-card__name{ opacity:.85; }
  
  /* Хедер */
  .svc-card__header{ display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; }
  .svc-card__icon{
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background: radial-gradient(ellipse at center, rgba(88,190,255,.10), rgba(0,0,0,.0));
    border:1px solid rgba(88,190,255,.18);
    box-shadow: 0 0 0 2px rgba(88,190,255,.06), 0 0 0 6px color-mix(in srgb, var(--ring) 16%, transparent);
  }
  .svc-card__icon i{ font-size:26px; color:#cfeaff; text-shadow:0 0 10px rgba(62,217,255,.55); line-height:1; }
  .svc-card__icon img{ width:28px; height:28px; object-fit:contain; display:block; }
  
  .svc-card__titlewrap{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .svc-card__name{
    font-weight:800; letter-spacing:.4px; color:#e6f3ff; font-size:26px;
    text-transform:uppercase;
  }
  
  /* Описание + список фактов */
  .svc-card__desc{
    margin:10px 0 8px;
    color:#a9c6e4; line-height:1.45;
    min-height: 44px;  /* удерживаем высоту чтобы карточки выравнивались */
    font-size: 18px;
  }
  
  .svc-card__list{
    margin:0; padding:0; list-style:none;
    display:grid; gap:6px;
    color:#8ab6dd; font-size:17px;

  }
  .svc-card__list li{ display:flex; align-items:center; gap:8px; }
  .svc-card__list i{ width:16px; text-align:center; opacity:.9; }
  .svc-card__list b{ color:#cfeaff; font-weight:700; }
  
  /* Футер */
  .svc-card__footer{ margin-top:auto; display:flex; justify-content:flex-start; }
  .svc-card__btn{ margin-top:10px; padding:8px 16px; border-radius:10px; font-size: 16px;}
  .svc-card__btn.is-disabled{
    opacity:.6; cursor:not-allowed;
    border-color:#24384a; box-shadow:none;
    font-size: 16px;
  }
  
  /* Бейджи (из твоего набора — оставляем) */
  .badge-status{ padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid transparent; }
  .badge-success-neon{ background:rgba(17,230,162,.12); border-color:#11e6a2; color:#baffec; }
  .badge-warning-neon{ background:rgba(255,195,0,.12);  border-color:#ffc300; color:#ffe9a6; }
  .badge-danger-neon{  background:rgba(255,95,122,.12); border-color:#ff5f7a; color:#ffc2cb; }
  
  /* Таблица (ниже) — без изменений */
  
  /* Заметка в карточке для soon/disabled */
.svc-note{
    padding:10px 12px;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:10px;
    background:rgba(6,20,32,.65);
    color:#bfe6ff;
    font-size:14px;
    display:flex; align-items:center; gap:8px;
  }
  .svc-note.subtle{ margin-top:8px; opacity:.85; }
  
  .svc-card__btn{ margin-top:10px; padding:8px 16px; border-radius:10px; }
  .svc-card__btn.is-disabled{
    opacity:.7; cursor:default;
    border-color:#24384a; box-shadow:none;
  }
  
  /* Подсветки по статусам (если ещё нет) */
  .svc-card.is-active   { --ring:#11e6a2; }
  .svc-card.is-soon     { --ring:#ffc300; }
  .svc-card.is-disabled { --ring:#ff5f7a; filter: grayscale(.05); opacity:.95; }
  

  .view-toggle { display:flex; gap:8px; }
  .view-toggle .vt-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px;
    border:1px solid #1c2e44; background:#0b1b2b;
    color:#9fd8ff; text-decoration:none;
    box-shadow:0 0 8px rgba(0,195,255,.12) inset;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .view-toggle .vt-btn i{ font-size:18px; line-height:1; }
  .view-toggle .vt-btn:hover{ border-color:#2bdfff; box-shadow:0 0 14px rgba(0,195,255,.32) inset; transform:translateY(-1px); }
  .view-toggle .vt-btn.active{ color:#e9fbff; border-color:#2bdfff; box-shadow:0 0 16px rgba(0,195,255,.45) inset; }