/* =========================================================
   EVIDEX TECHNOLOGY
   SUBSCRIBER DASHBOARD
========================================================= */

:root {
  --evidex-blue: #2563eb;
  --evidex-blue-dark: #1d4ed8;
  --evidex-bg: #f5f7fb;
  --evidex-white: #ffffff;
  --evidex-text: #172033;
  --evidex-muted: #64748b;
  --evidex-border: #e2e8f0;
  --sidebar-width: 250px;
  --topbar-height: 76px;
  --evidex-white: #ffffff;
}

/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.subscriber-dashboard {
  font-family: "Poppins", sans-serif;
  background: var(--evidex-bg);
  color: var(--evidex-text);
}

/* =========================================================
   SIDEBAR
========================================================= */

.subscriber-sidebar {
  position: fixed;
  top: 0;
  left: 0;

  width: var(--sidebar-width);
  height: 100vh;

  background: #ffffff;

  border-right: 1px solid var(--evidex-border);

  display: flex;
  flex-direction: column;

  z-index: 1050;

  padding: 24px 18px;
}

/* BRAND */

.sidebar-brand {
  padding: 0 8px 25px;

  border-bottom: 1px solid var(--evidex-border);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;

  text-decoration: none;
  color: inherit;
}

.brand-logo {
  width: 44px;
  height: 44px;

  border-radius: 12px;

  background: var(--evidex-white);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  flex-shrink: 0;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--evidex-text);
}

.brand-name span {
  margin-top: 5px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 2px;

  color: var(--evidex-blue);
}

/* =========================================================
   SIDEBAR NAVIGATION
========================================================= */

.sidebar-nav {
  display: flex;
  flex-direction: column;

  gap: 7px;

  margin-top: 30px;
}

.sidebar-link {
  display: flex;
  align-items: center;

  gap: 14px;

  width: 100%;

  padding: 13px 14px;

  border-radius: 10px;

  text-decoration: none;

  color: #64748b;

  font-size: 14px;
  font-weight: 600;

  transition: all 0.2s ease;
}

.sidebar-link i {
  width: 20px;

  font-size: 18px;

  text-align: center;
}

.sidebar-link:hover {
  background: #eff6ff;
  color: var(--evidex-blue);
}

.sidebar-link.active {
  background: #eff6ff;
  color: var(--evidex-blue);
}

.sidebar-bottom {
  margin-top: auto;

  padding-top: 20px;

  border-top: 1px solid var(--evidex-border);
}

.logout-link:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* =========================================================
   TOPBAR
========================================================= */

.subscriber-topbar {
  position: fixed;

  top: 0;
  left: var(--sidebar-width);
  right: 0;

  height: var(--topbar-height);

  background: rgba(255, 255, 255, 0.96);

  border-bottom: 1px solid var(--evidex-border);

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 0 32px;

  z-index: 1000;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-brand {
  display: flex;
  align-items: center;

  gap: 12px;

  text-decoration: none;

  color: inherit;
}

.topbar-logo {
  width: 38px;
  height: 38px;

  border-radius: 10px;

  background: var(--evidex-white);

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.topbar-company {
  display: flex;
  flex-direction: column;
}

.topbar-company strong {
  font-size: 15px;
  font-weight: 700;
}

.topbar-company small {
  margin-top: 2px;

  font-size: 12px;

  color: var(--evidex-muted);
}

/* USER */

.topbar-user {
  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 14px;
  font-weight: 600;
}

.user-avatar {
  width: 40px;
  height: 40px;

  border-radius: 50%;

  background: var(--evidex-blue);

  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
}

/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu-btn {
  display: none;

  width: 40px;
  height: 40px;

  border: 0;

  border-radius: 10px;

  background: #eff6ff;

  color: var(--evidex-blue);

  font-size: 22px;
}

/* =========================================================
   MAIN
========================================================= */

.subscriber-main {
  margin-left: var(--sidebar-width);

  padding-top: var(--topbar-height);

  min-height: 100vh;
}

.subscriber-content {
  width: 100%;

  max-width: 1250px;

  margin: 0 auto;

  padding: 45px 35px 60px;
}

/* =========================================================
   PAGE HEADER
========================================================= */

.page-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 38px;
}

.page-eyebrow {
  display: block;

  margin-bottom: 7px;

  color: var(--evidex-blue);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 2px;
}

.page-title {
  margin: 0;

  font-size: 36px;

  line-height: 1.2;

  font-weight: 800;

  color: #172033;
}

.page-description {
  margin: 10px 0 0;

  color: var(--evidex-muted);

  font-size: 14px;
}

/* =========================================================
   BUTTON
========================================================= */

.evidex-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 46px;

  padding: 0 22px;

  border-radius: 10px;

  border: none;

  background: var(--evidex-blue);

  color: white;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  transition: all 0.2s ease;

  white-space: nowrap;
}

.evidex-btn:hover {
  background: var(--evidex-blue-dark);

  color: white;

  transform: translateY(-1px);
}

/* =========================================================
   STATISTICS
========================================================= */

.dashboard-stats {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  margin-bottom: 30px;
}

.dashboard-stat {
  min-height: 125px;

  background: white;

  border: 1px solid var(--evidex-border);

  border-radius: 16px;

  padding: 24px;

  display: flex;

  align-items: center;

  gap: 18px;

  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
}

.stat-icon {
  width: 52px;
  height: 52px;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-size: 22px;
}

.stat-icon.blue {
  background: #eff6ff;
  color: #2563eb;
}

.stat-icon.yellow {
  background: #fffbeb;
  color: #f59e0b;
}

.stat-icon.green {
  background: #ecfdf5;
  color: #059669;
}

.stat-number {
  margin: 0;

  font-size: 25px;

  font-weight: 800;

  color: #172033;
}

.stat-label {
  display: block;

  margin-top: 3px;

  color: var(--evidex-muted);

  font-size: 12px;
}

/* =========================================================
   EMPTY / WELCOME CARD
========================================================= */

.empty-state {
  background: white;

  border: 1px solid var(--evidex-border);

  border-radius: 18px;

  min-height: 330px;

  padding: 55px 30px;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-shadow: 0 5px 20px rgba(15, 23, 42, 0.03);
}

.empty-state-icon {
  width: 72px;
  height: 72px;

  border-radius: 50%;

  background: #eff6ff;

  color: var(--evidex-blue);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 30px;

  margin-bottom: 20px;
}

.empty-state h3 {
  margin: 0;

  font-size: 23px;

  font-weight: 800;
}

.empty-state p {
  max-width: 520px;

  margin: 10px auto 25px;

  color: var(--evidex-muted);

  font-size: 14px;

  line-height: 1.7;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {
  :root {
    --sidebar-width: 230px;
  }

  .subscriber-content {
    padding: 35px 25px 50px;
  }

  .page-title {
    font-size: 30px;
  }

  .dashboard-stats {
    gap: 15px;
  }

  .dashboard-stat {
    padding: 18px;
  }
}

@media (max-width: 767px) {
  /* SIDEBAR */

  .subscriber-sidebar {
    left: -260px;

    width: 250px;

    transition: left 0.25s ease;

    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.08);
  }

  .subscriber-sidebar.show {
    left: 0;
  }

  /* TOPBAR */

  .subscriber-topbar {
    left: 0;

    height: 68px;

    padding: 0 16px;
  }

  .mobile-menu-btn {
    display: flex;

    align-items: center;
    justify-content: center;
  }

  .topbar-company strong {
    font-size: 14px;
  }

  .topbar-company small {
    display: none;
  }

  .topbar-logo {
    width: 36px;
    height: 36px;
  }

  .topbar-user span {
    display: none;
  }

  .user-avatar {
    width: 38px;
    height: 38px;
  }

  /* MAIN */

  .subscriber-main {
    margin-left: 0;

    padding-top: 68px;
  }

  .subscriber-content {
    padding: 28px 16px 40px;
  }

  /* HEADER */

  .page-header {
    align-items: flex-start;

    flex-direction: column;

    margin-bottom: 28px;

    gap: 20px;
  }

  .page-title {
    font-size: 28px;
  }

  .page-description {
    font-size: 13px;
  }

  .evidex-btn {
    width: 100%;
  }

  /* STATS */

  .dashboard-stats {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .dashboard-stat {
    min-height: 95px;

    padding: 18px;
  }

  /* WELCOME */

  .empty-state {
    min-height: 300px;

    padding: 40px 20px;
  }

  .empty-state h3 {
    font-size: 21px;
  }
}

@media (max-width: 420px) {
  .topbar-brand {
    gap: 8px;
  }

  .topbar-company strong {
    font-size: 13px;
  }

  .page-title {
    font-size: 25px;
  }

  .subscriber-content {
    padding-left: 13px;
    padding-right: 13px;
  }
}
/* =========================================================
   EVIDEX TECHNOLOGY
   ORDERS PAGE
   ========================================================= */

.orders-page {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 0 70px;
  color: #172033;
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

.orders-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 35px;
}

.orders-label {
  display: block;
  margin-bottom: 8px;

  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.orders-header h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  color: #101828;
}

.orders-header p {
  margin-top: 8px;
  font-size: 15px;
  color: #667085;
}

.orders-shop-btn {
  min-height: 48px;
  padding: 12px 22px;

  border: none;
  border-radius: 12px;

  background: #2563eb;
  font-weight: 600;

  white-space: nowrap;
}

/* =========================================================
   ORDER SUMMARY
   ========================================================= */

.order-summary-card {
  min-height: 115px;

  display: flex;
  align-items: center;
  gap: 18px;

  padding: 24px;

  background: #ffffff;

  border: 1px solid #e6eaf0;
  border-radius: 18px;

  box-shadow: 0 8px 25px rgba(16, 24, 40, 0.04);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.order-summary-card:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
}

.order-summary-card .card-icon {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 15px;

  color: #ffffff;
  font-size: 21px;
}

.order-summary-card h2 {
  margin: 0;

  color: #101828;
  font-size: 27px;
  font-weight: 800;
}

.order-summary-card small {
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

/* =========================================================
   EMPTY ORDERS
   ========================================================= */

.empty-card {
  width: 100%;

  margin-top: 10px;
  padding: 75px 30px;

  background: #ffffff;

  border: 1px solid #e6eaf0;
  border-radius: 22px;

  box-shadow: 0 10px 35px rgba(16, 24, 40, 0.05);
}

.empty-icon {
  width: 78px;
  height: 78px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #eff6ff;
  color: #2563eb;

  font-size: 34px;
}

.empty-card h3 {
  color: #101828;
  font-size: 24px;
}

.empty-card p {
  max-width: 470px;

  margin: 10px auto 25px;

  line-height: 1.7;
  color: #667085;
}

/* =========================================================
   ORDER CARD
   ========================================================= */

.order-card {
  width: 100%;

  margin-top: 28px;

  background: #ffffff;

  border: 1px solid #e4e7ec;
  border-radius: 22px;

  overflow: hidden;

  box-shadow: 0 10px 35px rgba(16, 24, 40, 0.05);

  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.order-card:hover {
  transform: translateY(-2px);

  box-shadow: 0 15px 40px rgba(16, 24, 40, 0.08);
}

/* =========================================================
   ORDER HEADER
   ========================================================= */

.order-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 30px;

  padding: 28px 30px;

  border-bottom: 1px solid #edf0f4;
}

.order-info {
  min-width: 0;
}

.order-number {
  display: inline-block;

  margin-bottom: 8px;

  color: #2563eb;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1.5px;
}

.order-info h5 {
  margin-bottom: 8px;

  color: #101828;
  font-size: 18px;
}

.order-info small {
  color: #667085;
  font-size: 13px;
}

.order-total {
  min-width: 130px;

  text-align: right;
}

.status-badge {
  display: inline-flex;
  align-items: center;

  padding: 7px 13px;

  border-radius: 50px;

  font-size: 12px;
  font-weight: 700;
}

.order-total h4 {
  font-size: 20px;
}

/* =========================================================
   ORDER SECTIONS
   ========================================================= */

.order-section {
  padding: 25px 30px;

  border-bottom: 1px solid #edf0f4;
}

.section-heading {
  display: flex;
  align-items: center;

  margin-bottom: 20px;

  color: #101828;
  font-size: 16px;
  font-weight: 700;
}

.section-heading i {
  color: #2563eb;
}

/* =========================================================
   DELIVERY INFORMATION
   ========================================================= */

.delivery-box {
  padding: 20px;

  background: #f8fafc;

  border: 1px solid #edf0f4;
  border-radius: 14px;
}

.info-label {
  display: block;

  margin-bottom: 6px;

  color: #98a2b3;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.delivery-box strong {
  display: block;

  color: #344054;

  font-size: 14px;
  line-height: 1.6;

  word-break: break-word;
}

/* =========================================================
   ORDER TRACKING
   ========================================================= */

.order-tracker {
  position: relative;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  width: 100%;

  padding: 10px 0 5px;
}

.tracker-line,
.tracker-progress {
  position: absolute;

  top: 27px;
  left: 8%;

  width: 84%;
  height: 3px;

  border-radius: 10px;
}

.tracker-line {
  background: #e5e7eb;
}

.tracker-progress {
  background: #2563eb;

  transition: width 0.4s ease;
}

.tracker-step {
  position: relative;
  z-index: 2;

  width: 25%;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.tracker-icon {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 9px;

  border-radius: 50%;

  background: #ffffff;

  border: 2px solid #d0d5dd;

  color: #98a2b3;

  font-size: 14px;
}

.tracker-icon.completed,
.tracker-icon.current {
  color: #ffffff;

  border-color: #2563eb;
  background: #2563eb;
}

.tracker-icon.current {
  box-shadow: 0 0 0 5px #dbeafe;
}

.tracker-step span {
  color: #667085;

  font-size: 12px;
  font-weight: 600;
}

.tracker-step:nth-child(-n + 5) {
  min-width: 0;
}

/* =========================================================
   CANCELLED ORDER
   ========================================================= */

.cancelled-notice {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 17px 20px;

  border: 1px solid #fecaca;
  border-radius: 14px;

  background: #fef2f2;
}

.cancelled-notice > i {
  color: #dc2626;
  font-size: 24px;
}

.cancelled-notice strong {
  display: block;

  color: #991b1b;

  margin-bottom: 3px;
}

.cancelled-notice small {
  color: #b91c1c;
}

/* =========================================================
   ORDER ITEMS
   ========================================================= */

.order-items {
  display: flex;
  flex-direction: column;

  gap: 12px;
}

.order-item {
  display: grid;

  grid-template-columns: 72px minmax(0, 1fr) auto;

  align-items: center;

  gap: 18px;

  padding: 15px;

  background: #f8fafc;

  border: 1px solid #edf0f4;
  border-radius: 14px;
}

.order-product-image {
  width: 72px;
  height: 72px;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;

  border: 1px solid #e4e7ec;
  border-radius: 12px;
}

.order-product-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.no-product-image {
  color: #98a2b3;
  font-size: 22px;
}

.order-product-info {
  min-width: 0;
}

.order-product-info h5 {
  margin-bottom: 8px;

  color: #101828;

  font-size: 15px;
  font-weight: 700;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 18px;

  color: #667085;

  font-size: 12px;
}

.product-meta strong {
  color: #344054;
}

.order-item-total {
  color: #2563eb;

  font-size: 15px;
  font-weight: 800;

  white-space: nowrap;
}

/* =========================================================
   SHIPPING DETAILS
   ========================================================= */

.shipping-details {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 15px;
}

.shipping-detail {
  display: flex;
  flex-direction: column;

  gap: 8px;

  padding: 17px 20px;

  background: #f8fafc;

  border: 1px solid #edf0f4;
  border-radius: 13px;
}

.shipping-detail span {
  display: flex;
  align-items: center;

  gap: 8px;

  color: #667085;

  font-size: 12px;
  font-weight: 600;
}

.shipping-detail span i {
  color: #2563eb;
}

.shipping-detail strong {
  color: #344054;

  font-size: 13px;

  word-break: break-word;
}

/* =========================================================
   ORDER ACTIONS
   ========================================================= */

.order-actions {
  display: flex;
  align-items: center;

  gap: 12px;

  padding: 22px 30px;

  background: #fcfcfd;
}

.order-actions .btn {
  min-height: 43px;

  padding: 10px 18px;

  border-radius: 10px;

  font-size: 13px;
  font-weight: 600;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {
  .orders-page {
    max-width: none;

    padding: 30px 25px 60px;
  }

  .orders-header {
    align-items: flex-start;
  }

  .orders-header h2 {
    font-size: 28px;
  }

  .order-card-header {
    padding: 24px;
  }

  .order-section {
    padding: 22px 24px;
  }

  .order-actions {
    padding: 20px 24px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {
  .orders-page {
    padding: 25px 16px 50px;
  }

  /* Header */

  .orders-header {
    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 20px;

    margin-bottom: 25px;
  }

  .orders-header h2 {
    font-size: 25px;
  }

  .orders-header p {
    font-size: 14px;
    line-height: 1.6;
  }

  .orders-shop-btn {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Summary cards */

  .order-summary-card {
    min-height: 90px;

    padding: 18px;
  }

  .order-summary-card .card-icon {
    width: 46px;
    height: 46px;

    flex-basis: 46px;
  }

  .order-summary-card h2 {
    font-size: 23px;
  }

  /* Empty */

  .empty-card {
    padding: 55px 20px;
  }

  .empty-card h3 {
    font-size: 21px;
  }

  .empty-card p {
    font-size: 14px;
  }

  /* Order card */

  .order-card {
    margin-top: 20px;

    border-radius: 17px;
  }

  /* Order header */

  .order-card-header {
    display: flex;
    flex-direction: column;

    gap: 15px;

    padding: 20px;
  }

  .order-total {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    text-align: left;
  }

  .order-total h4 {
    margin: 0 !important;
    font-size: 18px;
  }

  /* Sections */

  .order-section {
    padding: 20px;
  }

  /* Delivery */

  .delivery-box {
    padding: 16px;
  }

  /* Tracker */

  .order-tracker {
    padding-top: 5px;
  }

  .tracker-line,
  .tracker-progress {
    top: 22px;

    left: 10%;

    width: 80%;
  }

  .tracker-icon {
    width: 34px;
    height: 34px;

    font-size: 12px;
  }

  .tracker-step span {
    font-size: 10px;
  }

  /* Items */

  .order-item {
    grid-template-columns: 58px minmax(0, 1fr);

    gap: 12px;

    padding: 12px;
  }

  .order-product-image {
    width: 58px;
    height: 58px;
  }

  .order-product-info h5 {
    font-size: 14px;
  }

  .product-meta {
    flex-direction: column;

    gap: 3px;
  }

  .order-item-total {
    grid-column: 2;

    font-size: 14px;
  }

  /* Shipping */

  .shipping-details {
    grid-template-columns: 1fr;
  }

  /* Actions */

  .order-actions {
    display: flex;
    flex-direction: column;

    padding: 18px 20px;
  }

  .order-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {
  .orders-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .orders-header h2 {
    font-size: 23px;
  }

  .order-card-header,
  .order-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .tracker-step span {
    font-size: 9px;
  }

  .order-product-image {
    width: 52px;
    height: 52px;
  }

  .order-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }
}
/* =========================================================
   PROFILE PAGE
========================================================= */

.page-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 40px 70px;
}

/* Page header */
.page-content > .d-flex {
  margin-bottom: 40px !important;
  gap: 25px;
}

.page-content > .d-flex > div {
  min-width: 0;
}

.page-content .text-primary.fw-semibold {
  display: inline-block;
  font-size: 12px;
  font-weight: 700 !important;
  letter-spacing: 2px;
  color: #2563eb !important;
  margin-bottom: 8px;
}

.page-content h2 {
  color: #14213d;
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 8px !important;
}

.page-content .text-muted {
  color: #64748b !important;
}

/* Main profile layout */
.page-content > .row {
  align-items: flex-start;
}

/* =========================================================
   GENERAL DASHBOARD BOX
========================================================= */

.dashboard-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
}

/* =========================================================
   PROFILE CARD
========================================================= */

.profile-card {
  position: relative;
  overflow: hidden;
}

.profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
}

.profile-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
}

.profile-avatar img {
  width: 135px;
  height: 135px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #eff6ff;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.15);
}

.profile-card h3 {
  color: #14213d;
  font-size: 21px;
  line-height: 1.35;
  word-break: break-word;
}

.profile-card > .text-center > p {
  font-size: 14px;
}

/* Active badge */
.profile-card .badge {
  font-size: 12px;
  font-weight: 600;
}

/* Divider */
.profile-card hr {
  border-color: #e2e8f0;
  opacity: 1;
}

/* =========================================================
   PROFILE DETAILS
========================================================= */

.profile-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.profile-detail-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 12px;
  font-size: 17px;
}

.profile-detail > div:last-child {
  min-width: 0;
}

.profile-detail small {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 3px;
}

.profile-detail strong {
  display: block;
  color: #1e293b;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* =========================================================
   RIGHT SIDE SECTIONS
========================================================= */

.section-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 13px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}

.dashboard-box h4 {
  color: #14213d;
  font-size: 20px;
}

.dashboard-box .form-label {
  color: #334155;
  font-size: 13px;
  margin-bottom: 8px;
}

.dashboard-box .form-control {
  min-height: 50px;
  border: 1px solid #dbe3ef;
  border-radius: 11px;
  background: #f8fafc;
  color: #334155;
  font-size: 14px;
  padding: 12px 15px;
}

.dashboard-box .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.dashboard-box .form-control[readonly] {
  cursor: default;
}

/* =========================================================
   SUMMARY CARDS
========================================================= */

.summary-card {
  height: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  transition: 0.2s ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  border-color: #bfdbfe;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.summary-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 18px;
}

.summary-card small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 3px;
}

.summary-card h4,
.summary-card h6 {
  margin: 0;
  color: #172554;
  font-size: 17px;
}

/* =========================================================
   QUICK ACTIONS
========================================================= */

.profile-action {
  min-height: 145px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 22px;
  border-radius: 15px;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  transition: all 0.2s ease;
}

.profile-action i {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  margin-bottom: 14px;
  font-size: 19px;
}

.profile-action span {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #172554;
}

.profile-action small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
}

/* Orders */
.orders-action i {
  background: #eff6ff;
  color: #2563eb;
}

.orders-action:hover {
  border-color: #93c5fd;
  background: #f8fbff;
  transform: translateY(-3px);
}

/* Shop */
.shop-action i {
  background: #ecfdf5;
  color: #059669;
}

.shop-action:hover {
  border-color: #86efac;
  background: #f7fffb;
  transform: translateY(-3px);
}

/* Logout */
.logout-action i {
  background: #fef2f2;
  color: #dc2626;
}

.logout-action:hover {
  border-color: #fecaca;
  background: #fffafa;
  transform: translateY(-3px);
}

/* =========================================================
   BUTTON
========================================================= */

.page-content .btn-primary {
  background: #2563eb;
  border-color: #2563eb;
  font-weight: 600;
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.18);
}

.page-content .btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  transform: translateY(-1px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .page-content {
    padding: 32px 25px 60px;
  }

  .page-content h2 {
    font-size: 30px;
  }

  .dashboard-box {
    padding: 25px;
  }

  .profile-card {
    margin-bottom: 0;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .page-content {
    padding: 25px 16px 50px;
    max-width: 100%;
  }

  /* Header becomes vertical */
  .page-content > .d-flex {
    align-items: flex-start !important;
    flex-direction: column;
    margin-bottom: 28px !important;
    gap: 18px;
  }

  .page-content h2 {
    font-size: 27px;
  }

  .page-content .text-primary.fw-semibold {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .page-content .btn-primary {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    min-height: 46px;
  }

  /* Cards */
  .dashboard-box {
    padding: 22px 18px;
    border-radius: 15px;
  }

  /* Profile */
  .profile-avatar img {
    width: 115px;
    height: 115px;
  }

  .profile-card h3 {
    font-size: 19px;
  }

  /* Personal info heading */
  .dashboard-box .d-flex.align-items-center {
    align-items: flex-start !important;
  }

  .section-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .dashboard-box h4 {
    font-size: 18px;
  }

  /* Form fields */
  .dashboard-box .form-control {
    min-height: 48px;
  }

  /* Summary cards */
  .summary-card {
    min-height: 78px;
  }

  /* Quick actions */
  .profile-action {
    min-height: 120px;
  }
}

/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {
  .page-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .dashboard-box {
    padding: 18px 15px;
  }

  .page-content h2 {
    font-size: 24px;
  }

  .page-content .text-muted {
    font-size: 13px;
    line-height: 1.6;
  }

  .profile-detail {
    gap: 10px;
  }

  .profile-detail-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .profile-detail strong {
    font-size: 13px;
  }

  .profile-action {
    min-height: 110px;
    padding: 18px;
  }
}
/* =========================================================
   EVIDEX TECHNOLOGY
   SUBSCRIBER DASHBOARD - INDEX
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL
--------------------------------------------------------- */

.subscriber-dashboard {
  margin: 0;
  padding: 0;

  min-height: 100vh;

  background: #f5f7fb;

  color: #172033;

  font-family: "Poppins", sans-serif;
}

/* ---------------------------------------------------------
   MAIN CONTENT
--------------------------------------------------------- */

.subscriber-main {
  margin-left: 250px;

  width: calc(100% - 250px);

  min-height: 100vh;

  padding-top: 80px;

  box-sizing: border-box;
}

.subscriber-content {
  width: 100%;

  max-width: 1180px;

  margin: 0 auto;

  padding: 45px 35px 60px;

  box-sizing: border-box;
}

/* ---------------------------------------------------------
   PAGE HEADER
--------------------------------------------------------- */

.page-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 35px;
}

.page-header-text {
  min-width: 0;
}

.page-eyebrow {
  display: block;

  margin-bottom: 8px;

  color: #2563eb;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.page-title {
  margin: 0 0 8px;

  color: #111827;

  font-size: 34px;

  font-weight: 800;

  line-height: 1.2;
}

.page-description {
  margin: 0;

  color: #64748b;

  font-size: 15px;

  line-height: 1.7;
}

/* ---------------------------------------------------------
   BUTTON
--------------------------------------------------------- */

.evidex-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 48px;

  padding: 0 22px;

  border: none;

  border-radius: 12px;

  background: #2563eb;

  color: #ffffff;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  white-space: nowrap;

  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);

  transition: all 0.2s ease;
}

.evidex-btn:hover {
  background: #1d4ed8;

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow: 0 12px 25px rgba(37, 99, 235, 0.25);
}

.evidex-btn i {
  font-size: 17px;
}

/* ---------------------------------------------------------
   STATISTICS
--------------------------------------------------------- */

.dashboard-stats {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;

  width: 100%;

  margin-bottom: 30px;
}

/* ---------------------------------------------------------
   STAT CARD
--------------------------------------------------------- */

.dashboard-stat {
  display: flex;

  align-items: center;

  gap: 18px;

  min-width: 0;

  min-height: 125px;

  padding: 25px;

  background: #ffffff;

  border: 1px solid #e5eaf1;

  border-radius: 18px;

  box-shadow: 0 5px 20px rgba(15, 23, 42, 0.04);

  box-sizing: border-box;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-stat:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

/* ---------------------------------------------------------
   STAT ICON
--------------------------------------------------------- */

.stat-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 55px;

  height: 55px;

  min-width: 55px;

  border-radius: 15px;

  font-size: 22px;
}

.stat-icon.blue {
  background: #eff6ff;

  color: #2563eb;
}

.stat-icon.yellow {
  background: #fff7ed;

  color: #f59e0b;
}

.stat-icon.green {
  background: #ecfdf5;

  color: #059669;
}

/* ---------------------------------------------------------
   STAT TEXT
--------------------------------------------------------- */

.stat-content {
  min-width: 0;
}

.stat-number {
  margin: 0 0 5px;

  color: #111827;

  font-size: 26px;

  font-weight: 800;

  line-height: 1.1;
}

.stat-label {
  display: block;

  color: #64748b;

  font-size: 13px;

  line-height: 1.4;
}

/* ---------------------------------------------------------
   WELCOME CARD
--------------------------------------------------------- */

.empty-state {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-height: 340px;

  padding: 45px 30px;

  background: #ffffff;

  border: 1px solid #e5eaf1;

  border-radius: 22px;

  text-align: center;

  box-shadow: 0 5px 25px rgba(15, 23, 42, 0.04);

  box-sizing: border-box;
}

/* ---------------------------------------------------------
   WELCOME ICON
--------------------------------------------------------- */

.empty-state-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 76px;

  height: 76px;

  margin-bottom: 20px;

  border-radius: 50%;

  background: #eff6ff;

  color: #2563eb;

  font-size: 32px;
}

/* ---------------------------------------------------------
   WELCOME TEXT
--------------------------------------------------------- */

.empty-state h3 {
  margin: 0 0 10px;

  color: #111827;

  font-size: 25px;

  font-weight: 800;
}

.empty-state p {
  max-width: 560px;

  margin: 0 auto 25px;

  color: #64748b;

  font-size: 14px;

  line-height: 1.8;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
  .subscriber-main {
    margin-left: 250px;

    width: calc(100% - 250px);

    padding-top: 75px;
  }

  .subscriber-content {
    padding: 35px 25px 50px;
  }

  .page-header {
    align-items: flex-start;
  }

  .page-title {
    font-size: 30px;
  }

  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .dashboard-stat {
    min-height: 105px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .subscriber-main {
    margin-left: 0;

    width: 100%;

    padding-top: 70px;
  }

  .subscriber-content {
    width: 100%;

    padding: 25px 16px 45px;
  }

  /* Header */

  .page-header {
    flex-direction: column;

    align-items: stretch;

    gap: 20px;

    margin-bottom: 25px;
  }

  .page-eyebrow {
    font-size: 10px;

    letter-spacing: 1.7px;
  }

  .page-title {
    font-size: 27px;
  }

  .page-description {
    font-size: 14px;
  }

  .page-header .evidex-btn {
    width: 100%;
  }

  /* Statistics */

  .dashboard-stats {
    grid-template-columns: 1fr;

    gap: 14px;

    margin-bottom: 20px;
  }

  .dashboard-stat {
    width: 100%;

    min-height: 95px;

    padding: 20px;
  }

  /* Welcome */

  .empty-state {
    min-height: 300px;

    padding: 35px 20px;

    border-radius: 18px;
  }

  .empty-state-icon {
    width: 65px;

    height: 65px;

    font-size: 27px;
  }

  .empty-state h3 {
    font-size: 22px;
  }

  .empty-state p {
    font-size: 13px;

    line-height: 1.7;
  }

  .empty-state .evidex-btn {
    width: 100%;

    max-width: 300px;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {
  .subscriber-content {
    padding-left: 12px;

    padding-right: 12px;
  }

  .page-title {
    font-size: 24px;
  }

  .dashboard-stat {
    padding: 16px;

    gap: 14px;
  }

  .stat-icon {
    width: 48px;

    height: 48px;

    min-width: 48px;

    font-size: 19px;
  }

  .stat-number {
    font-size: 23px;
  }

  .stat-label {
    font-size: 12px;
  }
}