.mobile-menu-btn {
  display: none;
}

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
    background:
      radial-gradient(circle at top left, rgba(143, 174, 209, 0.18), transparent 34%),
      linear-gradient(180deg, #eef4fb 0%, #f8f7f5 100%) !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  .dashboard-shell,
  .services-shell,
  .payments-shell,
  .settings-shell,
  .app-shell,
  .layout,
  .bookings-layout,
  .customers-shell,
  .calendar-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
  }

  .main,
  main,
  .main-area,
  .bookings-main,
  .customers-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* SIDEBAR DRAWER */
  .sidebar {
    position: fixed !important;
    display: block !important;
    top: 0 !important;
    left: -285px !important;
    width: 270px !important;
    max-width: 82vw !important;
    height: 100vh !important;
    z-index: 9998 !important;
    padding: 22px 16px !important;
    overflow-y: auto !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-right: 1px solid #e8e3dc !important;
    box-shadow: 20px 0 60px rgba(17, 24, 39, 0.16) !important;
    transition: left 0.25s ease !important;
  }

  .sidebar.mobile-open {
    left: 0 !important;
  }

  .sidebar a,
  .sidebar button,
  .logout {
    min-height: 44px !important;
  }

  /* TOPBAR */
  .topbar {
    height: 72px !important;
    min-height: 72px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #ebe6df !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 42px !important;
    min-width: 74px !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e8e3dc !important;
    color: #3f3a36 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08) !important;
    position: static !important;
    z-index: auto !important;
  }

  .search-box {
    display: none !important;
  }

  .top-actions,
  .topbar-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .bell,
  .notification {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .user-profile,
  .user-menu {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .user-profile img,
  .user-profile .profile-avatar,
  .profile-avatar,
  .avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  .user-profile strong,
  .user-menu strong {
    display: block !important;
    max-width: 92px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .user-profile p,
  .user-menu p,
  .search-box kbd {
    display: none !important;
  }

  /* MAIN CONTENT SPACING */
  .content,
  .main > .content,
  .main-area > .content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 16px 60px !important;
    overflow-x: hidden !important;
  }

  .bookings-main,
  .customers-main,
  .main {
    padding: 0 !important;
  }

  .bookings-main > section,
  .customers-main > section,
  .bookings-main .bookings-header,
  .customers-main .customers-header {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .bookings-main > .topbar,
  .customers-main > .topbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* HEADERS */
  .page-intro,
  .page-header,
  .page-head,
  .bookings-header,
  .customers-header {
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
  }

  .page-intro h1,
  .page-intro h2,
  .page-header h1,
  .page-header h2,
  .page-head h1,
  .bookings-header h1,
  .customers-header h1,
  h1 {
    font-size: clamp(34px, 12vw, 44px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
    max-width: 100% !important;
    word-break: normal !important;
  }

  .page-intro p,
  .page-header p,
  .page-head p,
  .bookings-subtext,
  .customers-subtext,
  .page-description {
    font-size: 16px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  .eyebrow,
  .bookings-eyebrow,
  .customers-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }

  /* BUTTON GROUPS */
  .bookings-header-actions,
  .customers-header-actions,
  .header-actions,
  .head-actions,
  .profile-image-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .bookings-header-actions a,
  .customers-header-actions a,
  .header-actions button,
  .head-actions a,
  .head-actions button,
  .profile-image-actions button,
  .add-service-btn,
  .primary-btn,
  .secondary-btn,
  .save-btn,
  .preview-btn {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 18px !important;
  }

  /* GRIDS TO SINGLE COLUMN */
  .stats-grid,
  .dashboard-grid,
  .bookings-stats-grid,
  .customers-stats-grid,
  .payment-stats,
  .settings-grid,
  .services-layout,
  .payments-layout,
  .builder-grid,
  .status-strip,
  .form-grid,
  .calendar-grid,
  .two-column,
  .left-column,
  .right-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
  }

  .left-column,
  .right-column {
    display: block !important;
  }

  /* CARDS */
  .card,
  .stat-card,
  .bookings-stat-card,
  .customers-stat-card,
  .settings-card,
  .services-table-card,
  .builder-card,
  .status-card,
  .profile-image-card,
  .calendar-card,
  .panel,
  .payment-stats .stat-card,
  .customer-card,
  .booking-card,
  .payments-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .stat-card,
  .bookings-stat-card,
  .customers-stat-card,
  .payment-stats .stat-card {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .stat-card h2,
  .stat-card h3,
  .bookings-stat-card h2,
  .customers-stat-card h2,
  .payment-stats h3 {
    font-size: 34px !important;
    line-height: 1.05 !important;
  }

  /* TABS / FILTER PILLS */
  .tabs,
  .bookings-filters,
  .customers-filter-pills,
  .builder-nav,
  .table-toolbar,
  .toolbar-actions,
  .calendar-actions,
  .view-toggle {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tabs button,
  .tab-btn,
  .bookings-filters button,
  .customers-filter-pill,
  .calendar-actions button,
  .view-toggle button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* TABLES BECOME CARDS */
  .table-head {
    display: none !important;
  }

  .service-row,
  .booking-row,
  .payment-row,
  .customer-row,
  .invoice-row,
  .task-row,
  .transaction-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 18px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
  }

  /* SERVICES */
  .services-table-card .page-header {
    margin-bottom: 14px !important;
  }

  #services-list,
  #addons-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* PAYMENTS */
  .withdraw-btn {
    width: 100% !important;
    max-width: 220px !important;
    min-height: 44px !important;
    margin-top: 10px !important;
  }

  /* SETTINGS */
  .profile-image-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .profile-image-card img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }

  /* PROFILE BUILDER */
  .builder-card {
    padding: 16px !important;
  }

  .builder-nav {
    margin-bottom: 16px !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* MODALS */
  .modal,
  .modal-content,
  .drawer,
  .popup {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
  }

  .bottom-banner {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .content,
  .main > .content,
  .main-area > .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .bookings-main > section,
  .customers-main > section {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .page-intro h1,
  .page-intro h2,
  .page-header h1,
  .page-header h2,
  .page-head h1,
  .bookings-header h1,
  .customers-header h1,
  h1 {
    font-size: 36px !important;
  }

.week-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* =========================================================
   BOOKINGS PAGE — MOBILE FINAL
   MATCHES REFERENCE SCREENSHOT
   ========================================================= */

@media (max-width: 900px) {

  body.bookings-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    color: #08133b !important;
  }

  body.bookings-page *,
  body.bookings-page *::before,
  body.bookings-page *::after {
    box-sizing: border-box !important;
  }

  body.bookings-page,
  body.bookings-page button,
  body.bookings-page a,
  body.bookings-page input {
    font-family: "Poppins", sans-serif !important;
  }

  .bookings-layout,
  .bookings-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
  }

  .bookings-main {
    padding-bottom: 92px !important;

    --bookings-navy: #071239;
    --bookings-blue: #2473ed;
    --bookings-blue-dark: #1763db;
    --bookings-grey: #747a8d;
    --bookings-light-grey: #9ca1af;
    --bookings-border: #e4e7ed;
    --bookings-page-bg: #ffffff;
    --bookings-green: #22b86b;
    --bookings-green-bg: #e7f8ef;
    --bookings-orange: #e89a12;
    --bookings-orange-bg: #fff5e4;
    --bookings-purple: #8a64e8;
    --bookings-purple-bg: #f1edff;
    --bookings-red: #e45f6b;
    --bookings-red-bg: #fff1f3;
  }

  .bookings-page-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 22px 24px 28px !important;
    overflow-x: hidden !important;
  }

  /* HEADER */

  .bookings-header {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
  }

  .bookings-heading-copy {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 15px !important;
  }

  .bookings-eyebrow {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: var(--bookings-blue) !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
  }

  .bookings-header h1 {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: var(--bookings-navy) !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
  }

  .bookings-subtext {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bookings-grey) !important;
    font-size: 10.5px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  .bookings-header-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .bookings-primary-btn,
  .bookings-secondary-btn {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .bookings-primary-btn {
    border: 1px solid var(--bookings-blue) !important;
    background: var(--bookings-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 11px rgba(36, 115, 237, 0.19) !important;
  }

  .bookings-secondary-btn {
    border: 1px solid var(--bookings-border) !important;
    background: #ffffff !important;
    color: #202333 !important;
  }

  .bookings-primary-btn svg,
  .bookings-secondary-btn svg {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* KPI CARDS */

  .bookings-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
  }

  .bookings-stat-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 92px !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 11px 8px 9px 10px !important;
    overflow: hidden !important;
    border: 1px solid var(--bookings-border) !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(20, 30, 60, 0.035) !important;
  }

  .booking-stat-accent {
    position: absolute !important;
    top: 8px !important;
    left: 0 !important;
    width: 2px !important;
    height: 26px !important;
    border-radius: 0 5px 5px 0 !important;
  }

  .stat-today-card .booking-stat-accent {
    background: var(--bookings-blue) !important;
  }

  .stat-week-card .booking-stat-accent {
    background: var(--bookings-purple) !important;
  }

  .stat-pending-card .booking-stat-accent {
    background: var(--bookings-orange) !important;
  }

  .stat-completed-card .booking-stat-accent {
    background: var(--bookings-green) !important;
  }

  .booking-stat-copy {
    display: block !important;
    width: calc(100% - 1px) !important;
    min-width: 0 !important;
  }

  .booking-stat-copy p {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #303447 !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .booking-stat-copy h2 {
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: var(--bookings-navy) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
  }

  .booking-stat-copy span {
    display: block !important;
    width: calc(100% - 23px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #858a99 !important;
    font-size: 5.8px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
  }

  .booking-stat-icon {
    position: absolute !important;
    right: 7px !important;
    bottom: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    min-height: 23px !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  .stat-today-card .booking-stat-icon {
    background: #edf4ff !important;
    color: var(--bookings-blue) !important;
  }

  .stat-week-card .booking-stat-icon {
    background: var(--bookings-purple-bg) !important;
    color: var(--bookings-purple) !important;
  }

  .stat-pending-card .booking-stat-icon {
    background: var(--bookings-orange-bg) !important;
    color: var(--bookings-orange) !important;
  }

  .stat-completed-card .booking-stat-icon {
    background: var(--bookings-green-bg) !important;
    color: var(--bookings-green) !important;
  }

  .booking-stat-icon svg {
    width: 12px !important;
    height: 12px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* FILTER PILLS */

  .bookings-filter-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 15px !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .bookings-filter-row::-webkit-scrollbar {
    display: none !important;
  }

  .bookings-filter-pill {
    appearance: none !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid var(--bookings-border) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #303447 !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .bookings-filter-pill.active {
    border-color: var(--bookings-blue) !important;
    background: var(--bookings-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 9px rgba(36, 115, 237, 0.18) !important;
  }

  /* BOOKING LIST */

  .bookings-list-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .booking-list-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px 10px 10px !important;
    overflow: hidden !important;
    border: 1px solid #e8eaef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 13px rgba(22, 30, 55, 0.045) !important;
  }

  .booking-list-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .booking-client {
    display: grid !important;
    grid-template-columns: 29px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  .booking-client-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #b8d1ef, #79a7dc) !important;
    color: #ffffff !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  .booking-client-copy,
  .booking-client-title-row {
    min-width: 0 !important;
  }

  .booking-client-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 0 2px !important;
  }

  .booking-client-title-row h3 {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #12162c !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .booking-client-copy > p {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #7e8290 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .booking-top-right {
    display: grid !important;
    grid-template-columns: auto 12px !important;
    grid-template-areas:
      "price menu"
      "badge badge" !important;
    align-items: center !important;
    justify-items: end !important;
    gap: 4px 7px !important;
    min-width: 76px !important;
    margin: 0 !important;
  }

  .booking-price {
    grid-area: price !important;
    margin: 0 !important;
    color: #1870df !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .booking-menu-btn {
    grid-area: menu !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    width: 12px !important;
    height: 18px !important;
    min-width: 12px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #818694 !important;
  }

  .booking-menu-btn span {
    width: 2px !important;
    height: 2px !important;
    border-radius: 50% !important;
    background: currentColor !important;
  }

  .booking-badge {
    grid-area: badge !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    font-size: 6px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
  }

  .booking-badge-confirmed {
    background: var(--bookings-green-bg) !important;
    color: #188f59 !important;
  }

  .booking-badge-pending {
    background: var(--bookings-orange-bg) !important;
    color: #b87211 !important;
  }

  .booking-badge-completed {
    background: var(--bookings-green-bg) !important;
    color: #188f59 !important;
  }

  .booking-badge-cancelled,
  .booking-badge-declined {
    background: var(--bookings-red-bg) !important;
    color: var(--bookings-red) !important;
  }

  .booking-list-bottom {
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid #eeeeF1 !important;
  }

  .booking-meta {
    margin: 0 0 7px !important;
    padding: 0 !important;
  }

  .booking-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: #eef4fc !important;
    color: #71809a !important;
    font-size: 6.2px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  /* COMPACT PILL ACTIONS */

  .booking-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .booking-actions a {
    appearance: none !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid #e2e6ed !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #2473ed !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .booking-actions a svg {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .booking-actions a[data-booking-action="approve"],
  .booking-actions a[data-booking-action="complete"],
  .booking-actions a[data-booking-action="decline"],
  .booking-actions a[data-customer-action="view"],
  .booking-actions a[data-booking-action="details"] {
    border-color: #e2e6ed !important;
    background: #ffffff !important;
    color: #2473ed !important;
  }

  .booking-actions a[data-recurring-action="pause"],
  .booking-actions a[data-recurring-action="resume"] {
    border-color: #f0dfbf !important;
    color: #b87211 !important;
  }

  .booking-actions a[data-recurring-action="cancel"] {
    border-color: #f1d8dc !important;
    color: var(--bookings-red) !important;
  }

  .booking-recurring-badge,
  .booking-series-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 14px !important;
    min-height: 14px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: 5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    white-space: nowrap !important;
  }

  .booking-recurring-badge {
    background: var(--bookings-purple-bg) !important;
    color: var(--bookings-purple) !important;
  }

  .booking-series-status {
    background: #edf4ff !important;
    color: var(--bookings-blue) !important;
  }

  .booking-series-paused {
    background: var(--bookings-orange-bg) !important;
    color: #b87211 !important;
  }

  .booking-series-cancelled {
    background: var(--bookings-red-bg) !important;
    color: var(--bookings-red) !important;
  }

  /* EMPTY STATE */

  .bookings-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 150px !important;
    padding: 24px 18px !important;
    border: 1px solid var(--bookings-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    text-align: center !important;
  }

  .bookings-empty-state h3 {
    margin: 0 0 5px !important;
    color: var(--bookings-navy) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .bookings-empty-state p {
    max-width: 250px !important;
    margin: 0 !important;
    color: var(--bookings-grey) !important;
    font-size: 7.5px !important;
    line-height: 1.5 !important;
  }

  /* MODAL */

  .booking-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10020 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    background: rgba(7, 18, 57, 0.43) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .booking-modal.hidden {
    display: none !important;
  }

  .booking-modal-content {
    position: relative !important;
    width: 100% !important;
    max-width: 340px !important;
    max-height: 82vh !important;
    padding: 20px 17px 17px !important;
    overflow-y: auto !important;
    border: 1px solid var(--bookings-border) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 55px rgba(7, 18, 57, 0.2) !important;
  }

  .booking-modal-content h2 {
    margin: 0 0 14px !important;
    color: var(--bookings-navy) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  .modal-close {
    position: absolute !important;
    top: 9px !important;
    right: 12px !important;
    color: var(--bookings-grey) !important;
    font-size: 21px !important;
    cursor: pointer !important;
  }

  .modal-details {
    display: grid !important;
    gap: 0 !important;
  }

  .modal-details p {
    display: grid !important;
    grid-template-columns: 75px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #edf0f4 !important;
    color: var(--bookings-grey) !important;
    font-size: 8px !important;
    line-height: 1.4 !important;
  }

  .modal-details strong {
    color: var(--bookings-navy) !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 370px) {

  .bookings-page-content {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .bookings-stats-grid {
    gap: 7px !important;
  }

  .bookings-stat-card {
    padding-right: 6px !important;
    padding-left: 8px !important;
  }

  .booking-stat-copy p {
    font-size: 6.4px !important;
  }

  .booking-stat-copy span {
    font-size: 5.3px !important;
  }

  .booking-actions {
    gap: 6px !important;
  }

  .booking-actions a {
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: 6.6px !important;
  }
}

/* CALENDAR PAGE - MOBILE WEEK VIEW FINAL */
@media (max-width: 900px) {

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

  .calendar-v2,
  .calendar-v2 *,
  .calendar-v2 *::before,
  .calendar-v2 *::after {
    box-sizing: border-box;
  }

  .calendar-v2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 12px 90px !important;
    overflow-x: hidden !important;
    background: #f7f9fc !important;

    --calendar-blue: #1769f6;
    --calendar-blue-dark: #0f56d9;
    --calendar-blue-soft: #edf4ff;
    --calendar-navy: #091641;
    --calendar-text: #5f667b;
    --calendar-muted: #9298a8;
    --calendar-border: #e4e8f0;
    --calendar-surface: #ffffff;
    --calendar-soft: #f7f9fc;
    --calendar-green: #19b879;
    --calendar-green-soft: #e9f8f2;
    --calendar-grey-dot: #c7cad3;
    --calendar-red: #d85d67;
    --calendar-red-soft: #fff3f4;
  }

  /* =========================================================
     PAGE HEADING
  ========================================================= */

  .mobile-calendar-page-head {
    width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 2px !important;
  }

  .mobile-calendar-page-head .eyebrow {
    margin: 0 0 3px !important;
    padding: 0 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: var(--calendar-blue) !important;
    text-transform: uppercase !important;
  }

  .mobile-calendar-page-head h1 {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    color: var(--calendar-navy) !important;
  }

  .mobile-calendar-page-head .page-description {
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: var(--calendar-text) !important;
  }

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

  .calendar-v2-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .calendar-v2-card,
  .date-panel-v2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: var(--calendar-surface) !important;
    border: 1px solid var(--calendar-border) !important;
    box-shadow: 0 7px 20px rgba(22, 34, 67, 0.045) !important;
  }

  /* =========================================================
     WEEK CALENDAR CARD
  ========================================================= */

  .calendar-v2-card {
    padding: 10px 9px 9px !important;
    border-radius: 15px !important;
  }

  .calendar-v2-toolbar {
    display: grid !important;
    grid-template-columns: 27px minmax(0, 1fr) auto 27px !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  .calendar-v2-toolbar h2,
  #calendar-month-title {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--calendar-navy) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .calendar-arrow-btn,
  .calendar-today-btn {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border: 1px solid var(--calendar-border) !important;
    background: #ffffff !important;
    color: var(--calendar-blue) !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .calendar-arrow-btn {
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 0 2px !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

  .calendar-today-btn {
    width: auto !important;
    min-width: 44px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    border-color: rgba(23, 105, 246, 0.18) !important;
    border-radius: 8px !important;
    background: var(--calendar-blue-soft) !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  /* =========================================================
     WEEK DAYS
  ========================================================= */

  .calendar-v2-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .calendar-day-v2 {
    appearance: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 63px !important;
    margin: 0 !important;
    padding: 5px 1px 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--calendar-navy) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  .calendar-day-v2.today:not(.selected) {
    background: var(--calendar-soft) !important;
  }

  .calendar-day-v2.selected {
    background: var(--calendar-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(23, 105, 246, 0.22) !important;
  }

  .calendar-day-name {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 6.2px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    color: var(--calendar-muted) !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .calendar-day-v2.selected .calendar-day-name {
    color: rgba(255, 255, 255, 0.76) !important;
  }

  .calendar-day-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: var(--calendar-navy) !important;
  }

  .calendar-day-v2.selected .calendar-day-number {
    background: transparent !important;
    color: #ffffff !important;
  }

  .calendar-day-indicator {
    display: block !important;
    flex: 0 0 auto !important;
    width: 4px !important;
    height: 4px !important;
    margin: 0 0 4px !important;
    border-radius: 50% !important;
  }

  .day-indicator-available {
    background: var(--calendar-green) !important;
  }

  .day-indicator-booked {
    background: var(--calendar-blue) !important;
  }

  .day-indicator-unavailable {
    background: var(--calendar-grey-dot) !important;
  }

  .calendar-day-v2.selected .calendar-day-indicator {
    background: #ffffff !important;
  }

  .calendar-day-detail {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 1px !important;
    overflow: hidden !important;
    font-size: 5.4px !important;
    line-height: 1.05 !important;
    font-weight: 500 !important;
    color: var(--calendar-text) !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .calendar-day-v2.selected .calendar-day-detail {
    color: rgba(255, 255, 255, 0.84) !important;
  }

  /* =========================================================
     LEGEND
  ========================================================= */

  .calendar-status-legend {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid #f0f2f6 !important;
  }

  .calendar-status-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    color: var(--calendar-text) !important;
    white-space: nowrap !important;
  }

  .legend-dot {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    border-radius: 50% !important;
  }

  .legend-available {
    background: var(--calendar-green) !important;
  }

  .legend-booked {
    background: var(--calendar-blue) !important;
  }

  .legend-unavailable {
    background: var(--calendar-grey-dot) !important;
  }

  /* =========================================================
     SELECTED DAY PANEL
  ========================================================= */

  .date-panel-v2 {
    padding: 13px 12px !important;
    border-radius: 15px !important;
  }

  .date-panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  #selected-date-title {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--calendar-navy) !important;
  }

  .view-day-btn {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 61px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--calendar-blue-soft) !important;
    color: var(--calendar-blue) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .view-day-btn svg {
    width: 10px !important;
    height: 10px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .selected-day-status-row {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 0 5px !important;
  }

  .selected-status-dot {
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--calendar-green) !important;
  }

  #date-status {
    appearance: none !important;
    width: fit-content !important;
    max-width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 23px 0 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    outline: none !important;
    background:
      linear-gradient(45deg, transparent 50%, #56876d 50%)
        calc(100% - 10px) 10px / 3px 3px no-repeat,
      linear-gradient(135deg, #56876d 50%, transparent 50%)
        calc(100% - 7px) 10px / 3px 3px no-repeat,
      var(--calendar-green-soft) !important;
    color: #347653 !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .selected-date-summary {
    margin: 0 !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--calendar-border) !important;
    font-size: 7.5px !important;
    line-height: 1.35 !important;
    color: var(--calendar-text) !important;
  }

  /* =========================================================
     PANEL SECTIONS
  ========================================================= */

  .date-panel-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--calendar-border) !important;
  }

  .section-mini-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  .section-mini-head h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: var(--calendar-navy) !important;
  }

  .section-mini-head p {
    display: none !important;
  }

  #slot-count,
  #booking-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: var(--calendar-blue-soft) !important;
    color: var(--calendar-blue) !important;
    font-size: 6.2px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* =========================================================
     EXISTING SAVED TIME SLOTS
  ========================================================= */

  .availability-slots-list {
    width: 100% !important;
    margin: 0 !important;
  }

  .slot-row-v2 {
    display: grid !important;
    grid-template-columns:
      22px
      minmax(0, 1fr)
      8px
      minmax(0, 1fr)
      26px !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .slot-row-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 29px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: var(--calendar-blue-soft) !important;
    color: var(--calendar-blue) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .slot-row-v2 label {
    display: flex !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .slot-row-v2 label > span {
    display: none !important;
  }

  .slot-time-display {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 29px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid var(--calendar-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--calendar-navy) !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  .delete-slot-btn {
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #f0d9dc !important;
    border-radius: 8px !important;
    background: var(--calendar-red-soft) !important;
    color: var(--calendar-red) !important;
    box-shadow: none !important;
  }

  .delete-slot-btn svg {
    width: 11px !important;
    height: 11px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* =========================================================
     ADD TIME ROW
  ========================================================= */

  .add-slot-row {
    display: grid !important;
    grid-template-columns:
      22px
      minmax(0, 1fr)
      8px
      minmax(0, 1fr)
      26px !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .time-row-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 29px !important;
    border-radius: 8px !important;
    background: var(--calendar-blue-soft) !important;
    color: var(--calendar-blue) !important;
  }

  .time-row-icon svg {
    width: 11px !important;
    height: 11px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .time-input-wrap {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .add-slot-row input {
    appearance: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 1px solid var(--calendar-border) !important;
    border-radius: 8px !important;
    outline: none !important;
    background: #ffffff !important;
    color: var(--calendar-navy) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 7.3px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  .time-row-divider {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 8px !important;
    height: 29px !important;
    margin: 0 !important;
    color: var(--calendar-muted) !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .clear-time-row-btn {
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #f0d9dc !important;
    border-radius: 8px !important;
    background: var(--calendar-red-soft) !important;
    color: var(--calendar-red) !important;
    box-shadow: none !important;
  }

  .clear-time-row-btn svg {
    width: 11px !important;
    height: 11px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .add-time-slot-btn {
    appearance: none !important;
    grid-column: 2 / 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: fit-content !important;
    min-width: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--calendar-blue) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .add-time-slot-btn span {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  /* =========================================================
     BOOKINGS
  ========================================================= */

  .booking-list-v2 {
    width: 100% !important;
    margin: 0 !important;
  }

  .bookings-empty-state,
  .empty-date-state {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    border: 1px dashed var(--calendar-border) !important;
    border-radius: 9px !important;
    background: var(--calendar-soft) !important;
    text-align: center !important;
  }

  .empty-booking-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 25px !important;
    height: 25px !important;
    margin: 0 auto 5px !important;
    border-radius: 8px !important;
    background: var(--calendar-blue-soft) !important;
    color: var(--calendar-blue) !important;
  }

  .empty-booking-icon svg {
    width: 12px !important;
    height: 12px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .bookings-empty-state strong,
  .empty-date-state strong {
    display: block !important;
    margin: 0 0 2px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--calendar-navy) !important;
  }

  .bookings-empty-state p,
  .empty-date-state p {
    max-width: 220px !important;
    margin: 0 auto !important;
    font-size: 6.5px !important;
    line-height: 1.35 !important;
    color: var(--calendar-text) !important;
  }

  .booking-row-v2 {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 0 5px !important;
    padding: 7px !important;
    border: 1px solid var(--calendar-border) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
  }

  .booking-time-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 25px !important;
    border-radius: 7px !important;
    background: var(--calendar-blue-soft) !important;
    color: var(--calendar-blue) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .booking-row-copy {
    min-width: 0 !important;
  }

  .booking-row-copy strong {
    display: block !important;
    margin: 0 0 2px !important;
    overflow: hidden !important;
    font-size: 7.7px !important;
    line-height: 1.15 !important;
    color: var(--calendar-navy) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .booking-row-copy p {
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 6.2px !important;
    line-height: 1.2 !important;
    color: var(--calendar-text) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .booking-row-end {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }

  .booking-row-end strong {
    font-size: 7.5px !important;
    line-height: 1 !important;
    color: var(--calendar-blue) !important;
  }

  .booking-row-end span {
    padding: 3px 5px !important;
    border-radius: 999px !important;
    background: var(--calendar-green-soft) !important;
    color: #347653 !important;
    font-size: 5.3px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
  }

  /* =========================================================
     NOTES
  ========================================================= */

  .notes-day-section {
    border-bottom: 0 !important;
    padding-bottom: 3px !important;
  }

  .notes-field-wrap {
    position: relative !important;
    width: 100% !important;
  }

  #date-note {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 9px 9px 18px !important;
    resize: none !important;
    border: 1px solid var(--calendar-border) !important;
    border-radius: 9px !important;
    outline: none !important;
    background: var(--calendar-soft) !important;
    color: var(--calendar-navy) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 7px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
  }

  #date-note::placeholder {
    color: var(--calendar-muted) !important;
  }

  #note-character-count {
    position: absolute !important;
    right: 8px !important;
    bottom: 6px !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--calendar-muted) !important;
    font-size: 5.8px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

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

  .date-panel-actions {
    display: grid !important;
    grid-template-columns: 0.85fr 1.15fr !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 11px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--calendar-border) !important;
  }

  .date-panel-actions button {
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 7.3px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .soft-danger-btn {
    border: 1px solid #efd9dc !important;
    background: var(--calendar-red-soft) !important;
    color: var(--calendar-red) !important;
  }

  .primary-save-btn {
    border: 1px solid var(--calendar-blue) !important;
    background: var(--calendar-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(23, 105, 246, 0.2) !important;
  }

  .primary-save-btn:disabled {
    cursor: wait !important;
    opacity: 0.65 !important;
  }

  /* =========================================================
     HIDDEN JS VALUES
  ========================================================= */

  .calendar-hidden-values,
  #selected-date-pill,
  #day-summary-status,
  #day-summary-hours,
  #day-summary-bookings {
    display: none !important;
  }

  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}


/* EXTRA-SMALL IPHONES */
@media (max-width: 390px) {

  .calendar-v2 {
    padding-right: 9px !important;
    padding-left: 9px !important;
  }

  .calendar-v2-card {
    padding-right: 7px !important;
    padding-left: 7px !important;
  }

  .calendar-v2-grid {
    gap: 1px !important;
  }

  .calendar-day-v2 {
    min-height: 60px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .calendar-day-name {
    font-size: 5.8px !important;
  }

  .calendar-day-number {
    font-size: 12px !important;
  }

  .calendar-day-detail {
    font-size: 5px !important;
  }

  .add-slot-row,
  .slot-row-v2 {
    grid-template-columns:
      20px
      minmax(0, 1fr)
      7px
      minmax(0, 1fr)
      24px !important;
    gap: 4px !important;
  }

  .time-row-icon,
  .slot-row-number {
    width: 20px !important;
  }

  .clear-time-row-btn,
  .delete-slot-btn {
    width: 24px !important;
    min-width: 24px !important;
  }
}

/* =========================================================
   CUSTOMERS PAGE — MOBILE FINAL
   MATCHES REFERENCE SCREENSHOT
   ========================================================= */

@media (max-width: 900px) {

  body.customers-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    color: #08133b !important;
  }

  body.customers-page *,
  body.customers-page *::before,
  body.customers-page *::after {
    box-sizing: border-box !important;
  }

  body.customers-page,
  body.customers-page button,
  body.customers-page input,
  body.customers-page textarea,
  body.customers-page select,
  body.customers-page a {
    font-family: "Poppins", sans-serif !important;
  }


  /* PAGE SHELL */

  body.customers-page .dashboard-shell,
  body.customers-page .customers-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
  }

  body.customers-page .customers-main {
    padding-bottom: 92px !important;

    --customers-navy: #071239;
    --customers-blue: #2473ed;
    --customers-blue-dark: #1763db;
    --customers-grey: #747a8d;
    --customers-light-grey: #9ca1af;
    --customers-border: #e4e7ed;
    --customers-green: #27b66f;
    --customers-green-bg: #e8f8f0;
    --customers-orange: #e69824;
    --customers-orange-bg: #fff4e4;
    --customers-purple: #8967e8;
    --customers-purple-bg: #f1edff;
    --customers-red: #e76571;
    --customers-red-bg: #fff0f2;
  }

  body.customers-page .customers-page-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 22px 24px 28px !important;
    overflow-x: hidden !important;
  }


  /* PAGE HEADER */

  body.customers-page .customers-header {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.customers-page .customers-heading-copy {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 15px !important;
  }

  body.customers-page .customers-eyebrow {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: var(--customers-blue) !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
  }

  body.customers-page .customers-header h1 {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: var(--customers-navy) !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
  }

  body.customers-page .customers-subtext {
    width: 100% !important;
    max-width: 325px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--customers-grey) !important;
    font-size: 10.5px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  body.customers-page .customers-header-actions {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.customers-page .customers-primary-btn {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--customers-blue) !important;
    border-radius: 8px !important;
    background: var(--customers-blue) !important;
    color: #ffffff !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 5px 11px rgba(36, 115, 237, 0.19) !important;
  }

  body.customers-page .customers-primary-btn svg {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }


  /* KPI CARDS */

  body.customers-page .customers-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  body.customers-page .customers-stat-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 94px !important;
    min-height: 94px !important;
    margin: 0 !important;
    padding: 11px 7px 9px 9px !important;
    overflow: hidden !important;
    border: 1px solid var(--customers-border) !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(20, 30, 60, 0.035) !important;
  }

  body.customers-page .customers-stat-card::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    left: 0 !important;
    width: 2px !important;
    height: 27px !important;
    border-radius: 0 5px 5px 0 !important;
    background: var(--customers-blue) !important;
  }

  body.customers-page .customers-stat-repeat::before {
    background: var(--customers-green) !important;
  }

  body.customers-page .customers-stat-new::before {
    background: var(--customers-orange) !important;
  }

  body.customers-page .customers-stat-value::before {
    background: var(--customers-purple) !important;
  }

  body.customers-page .customers-stat-copy {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.customers-page .customers-stat-copy p {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #303447 !important;
    font-size: 6.7px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.customers-page .customers-stat-copy h2 {
    display: block !important;
    width: calc(100% - 20px) !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--customers-navy) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.customers-page .customers-stat-copy span {
    display: block !important;
    width: calc(100% - 19px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #858a99 !important;
    font-size: 5.4px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
  }

  body.customers-page .customers-stat-icon {
    position: absolute !important;
    right: 7px !important;
    bottom: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    min-height: 23px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: #edf4ff !important;
    color: var(--customers-blue) !important;
  }

  body.customers-page .customers-stat-repeat .customers-stat-icon {
    background: var(--customers-green-bg) !important;
    color: var(--customers-green) !important;
  }

  body.customers-page .customers-stat-new .customers-stat-icon {
    background: var(--customers-orange-bg) !important;
    color: var(--customers-orange) !important;
  }

  body.customers-page .customers-stat-value .customers-stat-icon {
    background: var(--customers-purple-bg) !important;
    color: var(--customers-purple) !important;
  }

  body.customers-page .customers-pound-icon {
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  body.customers-page .customers-stat-icon svg {
    width: 12px !important;
    height: 12px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }


  /* SEARCH AND FILTERS */

  body.customers-page .customers-tools-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
  }

  body.customers-page .customers-search-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 11px !important;
  }

  body.customers-page .customers-search-box {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.customers-page .customers-search-box svg {
    position: absolute !important;
    top: 50% !important;
    left: 12px !important;
    width: 12px !important;
    height: 12px !important;
    transform: translateY(-50%) !important;
    fill: none !important;
    stroke: #8a8f9f !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
  }

  body.customers-page .customers-search-box input {
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 12px 0 33px !important;
    border: 1px solid var(--customers-border) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #202333 !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  body.customers-page .customers-search-box input::placeholder {
    color: #a0a4b0 !important;
    opacity: 1 !important;
  }

  body.customers-page .customers-search-box input:focus {
    border-color: #a8c5ec !important;
    box-shadow: 0 0 0 3px rgba(36, 115, 237, 0.07) !important;
  }

  body.customers-page .customers-filter-button {
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--customers-border) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #4a5061 !important;
    box-shadow: none !important;
  }

  body.customers-page .customers-filter-button svg {
    width: 13px !important;
    height: 13px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body.customers-page .customers-filter-pills {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.customers-page .customers-filter-pills::-webkit-scrollbar {
    display: none !important;
  }

  body.customers-page .customers-filter-pill {
    appearance: none !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid var(--customers-border) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #303447 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  body.customers-page .customers-filter-pill.active {
    border-color: var(--customers-blue) !important;
    background: var(--customers-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 9px rgba(36, 115, 237, 0.18) !important;
  }


  /* MAIN CONTENT */

  body.customers-page .customers-content-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.customers-page .customers-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px 10px 10px !important;
    overflow: hidden !important;
    border: 1px solid #e8eaef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 13px rgba(22, 30, 55, 0.045) !important;
  }

  body.customers-page .large-panel {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

  body.customers-page .panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
  }

  body.customers-page .panel-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--customers-navy) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
  }

  body.customers-page .customers-view-all {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--customers-blue) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  body.customers-page .customers-view-all svg {
    width: 8px !important;
    height: 8px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body.customers-page #customers-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }


  /* CUSTOMER CARDS */

  body.customers-page .customer-list-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 9px 9px !important;
    overflow: hidden !important;
    border: 1px solid #eceef2 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.customers-page .customer-list-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.customers-page .customer-profile {
    display: grid !important;
    grid-template-columns: 29px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.customers-page .customer-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #b8d1ef, #79a7dc) !important;
    color: #ffffff !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  body.customers-page .customer-copy {
    min-width: 0 !important;
  }

  body.customers-page .customer-copy h3 {
    width: 100% !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #12162c !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.customers-page .customer-copy p {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #7e8290 !important;
    font-size: 6.5px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.customers-page .customer-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    min-width: 52px !important;
    margin: 0 !important;
  }

  body.customers-page .customer-rating {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--customers-blue) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  body.customers-page .customer-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 5.8px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  body.customers-page .repeat-tag {
    background: var(--customers-green-bg) !important;
    color: #188f59 !important;
  }

  body.customers-page .new-tag {
    background: #edf4ff !important;
    color: var(--customers-blue) !important;
  }

  body.customers-page .vip-tag {
    background: var(--customers-purple-bg) !important;
    color: var(--customers-purple) !important;
  }

  body.customers-page .customer-list-bottom {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid #eeeeF1 !important;
  }

  body.customers-page .customer-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
  }

  body.customers-page .customer-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: #eef4fc !important;
    color: #71809a !important;
    font-size: 6px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
  }

body.customers-page .customer-actions {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

  body.customers-page .customer-actions a {
    appearance: none !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid #e2e6ed !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--customers-blue) !important;
    font-size: 6.8px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }


/* CUSTOMER INSIGHT CARDS */

body.customers-page .customers-side-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.customers-page .customers-insight-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 12px !important;
  align-items: center !important;
  gap: 11px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 10px 13px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.customers-page .top-customers-panel {
  border: 1px solid #dcefe4 !important;
  background: linear-gradient(
    90deg,
    #f3fbf6 0%,
    #ffffff 100%
  ) !important;
}

body.customers-page .lost-customers-panel {
  border: 1px solid #f4dfe2 !important;
  background: linear-gradient(
    90deg,
    #fff5f6 0%,
    #ffffff 100%
  ) !important;
}

body.customers-page .recent-activity-panel {
  border: 1px solid #dce8fa !important;
  background: linear-gradient(
    90deg,
    #f3f7fe 0%,
    #ffffff 100%
  ) !important;
}

body.customers-page .customer-notes-panel {
  border: 1px solid #e9e1f8 !important;
  background: linear-gradient(
    90deg,
    #f8f5fe 0%,
    #ffffff 100%
  ) !important;
}

body.customers-page .customers-insight-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  border-radius: 11px !important;
}

body.customers-page .customers-insight-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.customers-page .insight-green {
  background: #def3e6 !important;
  color: #28a963 !important;
}

body.customers-page .insight-red {
  background: #fde3e6 !important;
  color: #e45461 !important;
}

body.customers-page .insight-blue {
  background: #dfebfc !important;
  color: #2473ed !important;
}

body.customers-page .insight-purple {
  background: #eee5fb !important;
  color: #9253cf !important;
}

body.customers-page .customers-insight-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.customers-page .customers-insight-copy {
  min-width: 0 !important;
}

body.customers-page .customers-insight-content .panel-header {
  display: block !important;
  width: 100% !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
}

body.customers-page .customers-insight-content .panel-header h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--customers-navy) !important;
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

body.customers-page .customers-insight-summary {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #656b7a !important;
  font-size: 7.5px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.customers-page .customers-insight-value {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

body.customers-page .top-customers-panel .customers-insight-value {
  color: #279c5e !important;
}

body.customers-page .lost-customers-panel .customers-insight-value {
  color: #df525f !important;
}

body.customers-page .customers-insight-arrow {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: #777d8a !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


  /* EMPTY STATES */

  body.customers-page .empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 16px 12px !important;
    border: 1px dashed #e2e5eb !important;
    border-radius: 10px !important;
    background: #fafbfc !important;
    color: #858a99 !important;
    text-align: center !important;
    font-size: 7px !important;
    line-height: 1.4 !important;
  }

  body.customers-page .empty-state h3 {
    margin: 0 0 4px !important;
    color: var(--customers-navy) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  body.customers-page .empty-state p {
    max-width: 230px !important;
    margin: 0 !important;
    color: #858a99 !important;
    font-size: 6.5px !important;
    line-height: 1.4 !important;
  }


  /* ADD CUSTOMER MODAL */

  body.customers-page.sheet-open {
    overflow: hidden !important;
  }

  body.customers-page .add-customer-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    display: block !important;
    background: rgba(15, 20, 35, 0.36) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease !important;
  }

  body.customers-page .add-customer-overlay.show {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.customers-page .add-customer-sheet {
    position: fixed !important;
    top: 72px !important;
    right: 12px !important;
    left: 12px !important;
    z-index: 9999 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 96px) !important;
    margin: 0 !important;
    padding: 13px !important;
    overflow-y: auto !important;
    border: 1px solid #e2e6ed !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.24) !important;
    opacity: 0 !important;
    transform: translateY(-18px) scale(0.97) !important;
    pointer-events: none !important;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease !important;
  }

  body.customers-page .add-customer-sheet.show {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  body.customers-page .sheet-handle {
    width: 34px !important;
    height: 4px !important;
    margin: 0 auto 10px !important;
    border-radius: 999px !important;
    background: #dbe0e8 !important;
  }

  body.customers-page .sheet-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }

  body.customers-page .sheet-header p {
    margin: 0 0 4px !important;
    color: var(--customers-blue) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
  }

  body.customers-page .sheet-header h2 {
    margin: 0 !important;
    color: var(--customers-navy) !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
  }

  body.customers-page #close-add-customer {
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e3e6eb !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #555b6b !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  body.customers-page .add-customer-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.customers-page .add-customer-form label {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
    color: #343849 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  body.customers-page .add-customer-form input,
  body.customers-page .add-customer-form textarea,
  body.customers-page .add-customer-form select {
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid #dfe3e9 !important;
    border-radius: 9px !important;
    background: #fafbfc !important;
    color: #222638 !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  body.customers-page .add-customer-form textarea {
    min-height: 62px !important;
    resize: vertical !important;
  }

  body.customers-page .add-customer-form input:focus,
  body.customers-page .add-customer-form textarea:focus,
  body.customers-page .add-customer-form select:focus {
    border-color: #9dbce7 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(36, 115, 237, 0.07) !important;
  }

  body.customers-page .save-customer-btn {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 3px 0 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--customers-blue) !important;
    border-radius: 9px !important;
    background: var(--customers-blue) !important;
    color: #ffffff !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    box-shadow: 0 5px 12px rgba(36, 115, 237, 0.18) !important;
  }

  body.customers-page .save-customer-btn:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
  }
}


@media (max-width: 390px) {

  body.customers-page .customers-page-content {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  body.customers-page .customers-stats-grid {
    gap: 7px !important;
  }

  body.customers-page .customers-stat-card {
    padding-right: 5px !important;
    padding-left: 7px !important;
  }

  body.customers-page .customers-stat-copy p {
    font-size: 6.1px !important;
  }

  body.customers-page .customers-stat-copy h2 {
    font-size: 15.5px !important;
  }

  body.customers-page .customers-filter-pill {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
}

/* PAYMENTS PAGE - MOBILE APP COMPACT */
@media (max-width: 900px) {
  body {
    overflow-x: hidden !important;
  }

  .payments-shell,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .payments-shell .topbar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
  }

  .payments-shell .mobile-menu-btn {
    height: 34px !important;
    min-width: 60px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  .payments-shell .search-box {
    display: none !important;
  }

  .payments-shell .bell {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  .main .content {
    padding: 12px 8px 86px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .page-header,
  .tabs,
  .payments-layout,
  .payment-stats,
  .transactions-card,
  .side-card,
  .payout-guidance-card {
    width: auto !important;
    max-width: none !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  .page-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
  }

.page-header h2 {
  font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 2px !important;
  }

.page-header p {
  font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  .header-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .primary-btn,
  .secondary-btn {
    width: 100% !important;
height: 34px !important;
min-height: 34px !important;
border-radius: 13px !important;
font-size: 11px !important;
    font-weight: 700 !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }

  .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 3px !important;
    margin-bottom: 8px !important;
    border-radius: 14px !important;
  }

  .tabs button {
    flex: 0 0 auto !important;
height: 32px !important;
padding: 0 12px !important;
border-radius: 12px !important;
font-size: 11px !important;
    white-space: nowrap !important;
  }

  .payments-layout,
  .left-column,
  .right-column {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

.payout-guidance-card,
.transactions-card,
.side-card {
  padding: 12px !important;
  border-radius: 17px !important;
    overflow: hidden !important;
  }

  .payout-guidance-card span {
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.03em !important;
  }

  .payout-guidance-card h3 {
    font-size: 18px !important;
    line-height: 1.05 !important;
    margin: 3px 0 !important;
    letter-spacing: -0.03em !important;
  }

  .payout-guidance-card p {
    font-size: 12px !important;
    line-height: 1.28 !important;
    margin: 0 !important;
  }

  .payment-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .stat-card {
    min-height: 66px !important;
    padding: 10px !important;
    border-radius: 13px !important;
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    gap: 6px !important;
    align-items: start !important;
    overflow: hidden !important;
  }

  .stat-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  .stat-card p {
    font-size: 10px !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  .stat-card h3 {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 3px 0 !important;
    letter-spacing: -0.03em !important;
  }

  .stat-card span {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .withdraw-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 23px !important;
    height: 26px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
  }

  .card-header,
  .side-card-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
  }

  .card-header h3,
  .side-card h3 {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

.filters select,
.side-card-header select {
  width: 100% !important;
  height: 34px !important;
  font-size: 12px !important;
    border-radius: 9px !important;
    padding: 0 8px !important;
  }

  .table-head {
    display: none !important;
  }

.transaction-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 6px 10px !important;
  padding: 11px 12px !important;
  border-radius: 15px !important;
  margin-bottom: 8px !important;
  min-height: 0 !important;
  background: rgba(255,255,255,0.92) !important;
}

  .transaction-row h4 {
    font-size: 14px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .transaction-row p,
  .transaction-row span,
  .transaction-row a,
  .transaction-row strong {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .customer-avatar {
    width: 20px !important;
    height: 20px !important;
    font-size: 6.5px !important;
  }

  .status {
    width: fit-content !important;
    padding: 3px 6px !important;
    border-radius: 999px !important;
    font-size: 7.5px !important;
  }

  .table-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-top: 5px !important;
  }

  .table-footer p {
    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

  .pagination {
    justify-content: center !important;
    overflow: hidden !important;
    gap: 4px !important;
  }

  .pagination button {
    width: 23px !important;
    height: 23px !important;
    font-size: 8px !important;
    border-radius: 8px !important;
  }

  .pagination button:nth-child(n+4):nth-child(-n+7) {
    display: none !important;
  }

  .methods-card {
    display: none !important;
  }

  .revenue-card h2,
  .invoice-summary h2 {
    font-size: 19px !important;
    line-height: 1 !important;
    margin: 5px 0 2px !important;
  }

  .revenue-card p,
  .invoice-summary p {
    font-size: 8.5px !important;
    line-height: 1.15 !important;
  }

  .mini-chart {
    height: 98px !important;
    margin-top: 7px !important;
  }

  .mini-chart span {
    font-size: 6.5px !important;
  }

  .invoice-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .invoice-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 5px !important;
    padding: 7px 0 !important;
    font-size: 8.5px !important;
  }

  .view-invoices-btn {
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    margin-top: 6px !important;
  }
}

/* PAYMENTS - MOBILE PREMIUM CONSISTENCY PATCH */
@media (max-width: 900px) {
  body:has(.payments-shell) {
    background: #f7fbff !important;
  }

  body:has(.payments-shell) .page-header h2,
  body:has(.payments-shell) .card-header h3,
  body:has(.payments-shell) .side-card h3,
  body:has(.payments-shell) .transactions-card h3 {
    color: #3F3A36 !important;
    font-weight: 750 !important;
    letter-spacing: -0.035em !important;
  }

  body:has(.payments-shell) .page-header p,
  body:has(.payments-shell) .payout-guidance-card p,
  body:has(.payments-shell) .stat-card p,
  body:has(.payments-shell) .stat-card span,
  body:has(.payments-shell) .transaction-row p,
  body:has(.payments-shell) .transaction-row span {
    color: #6F685F !important;
  }

  body:has(.payments-shell) .payout-guidance-card,
  body:has(.payments-shell) .transactions-card,
  body:has(.payments-shell) .side-card,
  body:has(.payments-shell) .stat-card {
    border: 1px solid rgba(143, 174, 209, 0.28) !important;
    box-shadow: 0 12px 30px rgba(143, 174, 209, 0.12) !important;
  }

  body:has(.payments-shell) .tabs {
    background: rgba(246, 242, 237, 0.8) !important;
    border: 1px solid rgba(229, 221, 211, 0.8) !important;
  }

  body:has(.payments-shell) .tabs button {
    color: #6F685F !important;
    font-weight: 700 !important;
  }

  body:has(.payments-shell) .tabs button.active,
  body:has(.payments-shell) .tabs button[aria-selected="true"] {
    background: #fff !important;
    color: #4F7DAE !important;
    box-shadow: 0 6px 16px rgba(143, 174, 209, 0.18) !important;
  }

  body:has(.payments-shell) .primary-btn,
  body:has(.payments-shell) .secondary-btn,
  body:has(.payments-shell) .view-invoices-btn {
    font-weight: 750 !important;
    letter-spacing: -0.01em !important;
  }

  body:has(.payments-shell) .primary-btn {
    background: #8FAED1 !important;
  }

  body:has(.payments-shell) .secondary-btn {
    background: #fff !important;
    color: #4F7DAE !important;
    border: 1px solid rgba(229, 221, 211, 0.95) !important;
  }

  body:has(.payments-shell) .stat-card h3,
  body:has(.payments-shell) .transaction-row strong {
    color: #17213A !important;
    font-weight: 800 !important;
  }

  body:has(.payments-shell) .status {
    font-weight: 700 !important;
  }

  body:has(.payments-shell) .filters select,
  body:has(.payments-shell) .side-card-header select {
    color: #4F7DAE !important;
    background: #fff !important;
    border: 1px solid rgba(229, 221, 211, 0.95) !important;
  }

  body:has(.payments-shell) .transaction-row h4 {
    color: #17213A !important;
    font-weight: 750 !important;
  }

  body:has(.payments-shell) .transaction-row {
    border: 1px solid rgba(229, 221, 211, 0.8) !important;
  }
}

/* PAYMENTS - FINAL KPI + TAB BAR CLEANUP */
@media (max-width: 900px) {
  body:has(.payments-shell) .payout-guidance-card {
    padding: 10px 12px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(143,174,209,.18) !important;
    box-shadow: none !important;
  }

  body:has(.payments-shell) .payout-guidance-card h3 {
    font-size: 15px !important;
  }

  body:has(.payments-shell) .payout-guidance-card p {
    font-size: 9.5px !important;
  }

  body:has(.payments-shell) .payment-stats .stat-card {
    min-height: 58px !important;
    padding: 9px !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: center !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 18px rgba(79,125,174,.06) !important;
  }

  body:has(.payments-shell) .payment-stats .stat-card p {
    font-size: 8.5px !important;
  }

  body:has(.payments-shell) .payment-stats .stat-card h3 {
    font-size: 14px !important;
  }

  body:has(.payments-shell) .payment-stats .stat-card span {
    font-size: 7.8px !important;
  }

  body:has(.payments-shell) .payment-stats .stat-card .withdraw-btn {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    min-width: 82px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 7.5px !important;
    line-height: 20px !important;
    margin: 0 !important;
  }

  body:has(.payments-shell) .payment-stats .stat-card:has(.withdraw-btn) {
    padding-right: 100px !important;
  }

  body:has(.payments-shell) .tabs {
    background: rgba(255,255,255,.82) !important;
    border: 1px solid rgba(143,174,209,.16) !important;
    box-shadow: none !important;
  }
}

/* PAYMENTS - HIDE KPI PERCENTAGE COMPARISONS */
@media (max-width:900px){
  body:has(.payments-shell) .payment-stats .stat-card span {
    display: none !important;
  }

  body:has(.payments-shell) .payment-stats .stat-card {
    min-height: 50px !important;
  }
}

/* PAYMENTS - NEW LATEST PAYOUT CARD */
@media (max-width:900px){

.payout-guidance-card{

display:flex !important;
align-items:center !important;
gap:14px !important;

padding:14px !important;

border-radius:18px !important;

background:#fff !important;

border:1px solid rgba(143,174,209,.18) !important;

box-shadow:0 10px 22px rgba(79,125,174,.06) !important;

}

.payout-badge{

width:44px;
height:44px;

border-radius:14px;

background:#EEF7FF;

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

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

color:#4F7DAE;

flex-shrink:0;

}

.payout-content{

flex:1;

min-width:0;

}

.payout-content span{

display:block;

font-size:10px;

font-weight:700;

color:#4F7DAE;

margin-bottom:2px;

}

.payout-content h3{

margin:0;

font-size:18px;

font-weight:800;

line-height:1.1;

color:#17213A;

}

.payout-content p{

margin-top:4px;

font-size:11px;

line-height:1.35;

color:#6F685F;

}
}

/* PAYMENTS - HIDE ADMIN PAYOUT BUTTON ON MOBILE */
@media (max-width:900px){
  body:has(.payments-shell) .payment-stats .withdraw-btn{
    display:none !important;
  }

  body:has(.payments-shell) .payment-stats .stat-card:has(.withdraw-btn){
    padding-right:9px !important;
  }
}


/* SERVICES PAGE - MOBILE FINAL */
@media (max-width: 900px) {
  .services-shell,
  .services-shell .main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .services-shell .topbar {
    height: 72px !important;
    min-height: 72px !important;
    padding: 12px 14px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .services-shell .mobile-menu-btn {
    height: 42px !important;
    min-width: 74px !important;
    font-size: 13px !important;
  }

  .services-shell .top-actions {
    margin-left: auto !important;
    gap: 8px !important;
  }

  .services-shell .bell {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .services-shell .content {
    padding: 18px 6px 70px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .services-shell .page-header,
  .services-layout,
  .services-table-card {
    width: auto !important;
    max-width: none !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  .services-shell .page-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .services-shell .page-header h2 {
    font-size: 34px !important;
    line-height: 1 !important;
  }

  .services-shell .page-header p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .services-shell .add-service-btn {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
  }

  .services-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .services-table-card {
    padding: 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .table-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .tabs,
  .toolbar-actions {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .tabs button {
    flex: 0 0 auto !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
  }

  .toolbar-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .toolbar-actions button,
  .toolbar-actions select {
    width: 100% !important;
    height: 38px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  .service-row,
  .addon-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
  }

  .service-name {
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    gap: 8px !important;
    align-items: start !important;
    min-width: 0 !important;
  }

  .service-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
  }

  .service-name h4,
  .service-row h4 {
    font-size: 14px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  .service-row p {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .status {
    width: fit-content !important;
    padding: 5px 9px !important;
    font-size: 9px !important;
  }

  .addon-actions {
    display: flex !important;
    gap: 8px !important;
  }

  .action-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  .table-footer {
    font-size: 10px !important;
    margin-top: 10px !important;
  }
}


/* EDIT PROFILE V2 - MOBILE APP COMPACT */
@media (max-width: 900px) {
  body,
  .layout,
  .layout .main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #f4f8fc !important;
  }

  .layout .main {
    padding: 0 !important;
  }

  .layout .topbar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
  }

  .layout .search-box {
    display: none !important;
  }

  .layout .mobile-menu-btn {
    height: 34px !important;
    min-width: 60px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  .layout .bell {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  .profile-builder-v2 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px 76px !important;
    overflow-x: hidden !important;
  }

  .builder-v2-head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: start !important;
    margin-bottom: 8px !important;
  }

  .builder-v2-head h1 {
    font-size: 22px !important;
    line-height: 0.95 !important;
    letter-spacing: -0.05em !important;
    margin: 0 0 4px !important;
  }

  .builder-v2-head p {
    font-size: 9px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  #save-profile-btn {
    width: 58px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border-radius: 15px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  .builder-v2-layout,
  .builder-v2-main,
  .builder-v2-side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .completion-card,
  .step-editor,
  .preview-card,
  .help-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(143,174,209,0.18) !important;
    box-shadow: 0 10px 26px rgba(63,58,54,0.06) !important;
    overflow: hidden !important;
  }

  .completion-card {
    display: grid !important;
    grid-template-columns: 58px 1fr !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .completion-circle {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
  }

  .completion-circle strong {
    font-size: 15px !important;
  }

  .completion-circle span {
    font-size: 7px !important;
  }

  .completion-content h2 {
    font-size: 13px !important;
    line-height: 1.1 !important;
    margin: 0 0 3px !important;
  }

  .completion-content p {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .score-bar {
    height: 5px !important;
    margin: 7px 0 !important;
  }

  .completion-mini {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .completion-mini span {
    font-size: 7.5px !important;
    line-height: 1 !important;
  }

  .setup-steps {
    display: grid !important;
    gap: 8px !important;
  }

  .setup-step-card {
    min-height: 82px !important;
    padding: 10px !important;
    border-radius: 17px !important;
    display: grid !important;
    grid-template-columns: 38px 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .setup-step-card .step-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
  }

  .step-number {
    position: absolute !important;
    width: 17px !important;
    height: 17px !important;
    font-size: 7px !important;
  }

  .setup-step-card h3 {
    font-size: 12.5px !important;
    line-height: 1.08 !important;
    margin: 0 0 3px !important;
  }

  .setup-step-card h3 small {
    font-size: 6.5px !important;
    padding: 3px 5px !important;
    border-radius: 999px !important;
  }

  .setup-step-card p {
    font-size: 8.3px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .step-status {
    font-size: 7px !important;
    padding: 4px 6px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .step-arrow {
    display: none !important;
  }

  .step-editor {
    padding: 10px !important;
  }

  .section-title {
    margin-bottom: 10px !important;
  }

  .section-title h2 {
    font-size: 17px !important;
    line-height: 1 !important;
    margin: 0 0 3px !important;
  }

  .section-title p {
    font-size: 8.8px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .form-group-label {
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    gap: 8px !important;
    margin: 8px 0 !important;
  }

  .form-group-label span {
    width: 24px !important;
    height: 24px !important;
    border-radius: 9px !important;
    font-size: 8px !important;
  }

  .form-group-label h3 {
    font-size: 12px !important;
    margin: 0 0 2px !important;
  }

  .form-group-label p {
    font-size: 8.3px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .form-grid,
  .upload-grid,
  .verification-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .field label {
    font-size: 8.5px !important;
    margin-bottom: 4px !important;
  }

  .input,
  .textarea {
    min-height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    font-size: 10px !important;
  }

  .textarea {
    min-height: 78px !important;
  }

  .field small {
    font-size: 7.5px !important;
  }

  .upload-card {
    min-height: 84px !important;
    padding: 10px !important;
    border-radius: 15px !important;
  }

  .upload-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  .upload-card strong {
    font-size: 11px !important;
  }

  .upload-card span {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }

  .trust-centre-card {
    padding: 9px !important;
    border-radius: 15px !important;
  }

  .trust-centre-header {
    display: grid !important;
    grid-template-columns: 1fr 48px !important;
    gap: 8px !important;
    align-items: start !important;
  }

  .trust-kicker {
    font-size: 7px !important;
  }

  .trust-centre-header h3 {
    font-size: 13px !important;
    margin: 2px 0 !important;
  }

  .trust-centre-header p {
    font-size: 8.2px !important;
    line-height: 1.2 !important;
  }

  .trust-score {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  .trust-score strong {
    font-size: 13px !important;
  }

  .trust-score span {
    font-size: 6.8px !important;
  }

  .verification-card {
    display: grid !important;
    grid-template-columns: 26px 1fr auto !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 13px !important;
    align-items: center !important;
  }

  .verification-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 10px !important;
  }

  .verification-card h4 {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    margin: 0 0 2px !important;
  }

  .verification-card p {
    font-size: 7.5px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  .verification-status {
    font-size: 7px !important;
    margin-top: 3px !important;
  }

  .verification-btn {
    width: 58px !important;
    height: 22px !important;
    border-radius: 8px !important;
    font-size: 7px !important;
    padding: 0 6px !important;
  }

  .chip-entry {
    display: grid !important;
    grid-template-columns: 1fr 54px !important;
    gap: 6px !important;
  }

  .chip-add-btn {
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 8px !important;
  }

  .payout-card {
    display: grid !important;
    grid-template-columns: 30px 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 15px !important;
  }

  .payout-card h3 {
    font-size: 12px !important;
    margin: 0 0 3px !important;
  }

  .payout-card p {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }

  #connect-payouts-btn {
    grid-column: 1 / -1 !important;
    height: 30px !important;
    border-radius: 11px !important;
    font-size: 9px !important;
  }

  .preview-card-head h3 {
    font-size: 12px !important;
    margin: 0 !important;
  }

  .preview-card-head p {
    font-size: 8px !important;
  }

  .preview-top,
  .preview-top img,
  #preview-cover-img {
    height: 86px !important;
  }

  .preview-body {
    padding: 10px !important;
  }

  .preview-avatar {
    width: 38px !important;
    height: 38px !important;
    margin-top: -24px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
  }

  .preview-body h3 {
    font-size: 13px !important;
    margin: 5px 0 2px !important;
  }

  .preview-body p,
  .preview-meta,
  .preview-desc {
    font-size: 8.5px !important;
    line-height: 1.25 !important;
  }

  .preview-tags,
  .preview-services {
    gap: 5px !important;
  }

  .preview-tags span,
  .preview-services span {
    font-size: 8px !important;
    padding: 5px 7px !important;
    border-radius: 9px !important;
  }

  .preview-full-btn {
    height: 30px !important;
    border-radius: 11px !important;
    font-size: 9px !important;
    margin-top: 8px !important;
  }

  .help-card {
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    gap: 8px !important;
  }

  .help-card .step-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
  }

  .help-card h3 {
    font-size: 11px !important;
    margin: 0 0 3px !important;
  }

  .help-card p {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
}

/* BOOKING PAGE - STOP MOBILE DASHBOARD BREAKING BOOKING CALENDAR */
@media (max-width: 900px) {
  body.booking-page .calendar-weekdays,
  body.booking-page .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  body.booking-page .calendar-grid span {
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 11px !important;
  }

  body.booking-page .calendar-card {
    overflow: hidden !important;
  }
}

/* ===========================
   TYDIE APP BOTTOM NAV
=========================== */

/* 1. FORCE HIDE THE BOTTOM NAV BAR AND ICONS ON DESKTOP */
.tydie-app-bottom-nav {
  display: none !important;
}

/* 2. ONLY SHOW AND STYLE IT ON MOBILE/TABLET (UNDER 900PX) */
@media (max-width: 900px) {
  body {
    background: #ffffff !important;
    padding-bottom: 92px !important;
  }

  .sidebar {
    display: none !important;
  }

  .mobile-menu-btn {
    display: none !important;
  }

  .topbar {
    justify-content: flex-end !important;
  }

  .tydie-app-bottom-nav {
    display: grid !important; 
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 82px !important;
    background: #ffffff !important;
    border-top: 1px solid #eeeeee !important;
    z-index: 99999 !important;
    grid-template-columns: repeat(5, 1fr) !important;
    padding: 9px 8px 18px !important;
  }

  .tydie-app-bottom-nav a {
    text-decoration: none !important;
    color: #9a9a9a !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    font-family: "Poppins", sans-serif !important;
  }

  .tydie-app-bottom-nav svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    fill: none !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .tydie-app-bottom-nav a.active {
    color: #4f7dae !important; /* Fixed to your dark brand blue for better readability */
  }

  .tydie-app-bottom-nav span {
    font-weight: 400 !important;
  }
}

/* MORE MENU OVERLAYS (STAYS SAFE OUTSIDE) */
.tydie-more-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.18);
  z-index: 100000;
}

.tydie-more-menu.open {
  display: block !important;
}

.tydie-more-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 92px;
  background: #ffffff;
  border-radius: 26px;
  padding: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

.tydie-more-panel a {
  display: block;
  padding: 16px 18px;
  color: #6F685F;
  text-decoration: none;
  font-weight: 400;
  border-radius: 18px;
}

.user-profile {
  display: none !important;
}

@media (max-width: 760px) {
  .content {
    padding: 8px !important;
  }

  .page-intro {
    margin-bottom: 8px !important;
    gap: 6px !important;
  }

  .page-intro h2 {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  .page-intro p {
    font-size: 10px !important;
  }

  .date-picker {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
  }

  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
  }

  .stat-card {
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 7px !important;
    border-radius: 10px !important;
    display: grid !important;
    grid-template-columns: 24px 1fr auto !important;
    gap: 7px !important;
    align-items: center !important;
    background: linear-gradient(135deg, #ffffff, #f6faff) !important;
    border: 1px solid rgba(143,174,209,0.28) !important;
  }

  .stat-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    margin: 0 !important;
  }

  .stat-icon.blue {
    background: #dce9f7 !important;
    color: #4f7dae !important;
  }

  .stat-icon.amber {
    background: #fff0d6 !important;
    color: #c78316 !important;
  }

  .stat-icon.red {
    background: #ffe1e1 !important;
    color: #d94b4b !important;
  }

  .stat-card > div:nth-child(2) p {
    font-size: 7px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #6f685f !important;
  }

  .stat-card > div:nth-child(2) h3 {
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 1px 0 !important;
    color: #4f7dae !important;
    font-weight: 800 !important;
  }

  .stat-card > div:nth-child(2) span {
    font-size: 7px !important;
    line-height: 1 !important;
    color: #8c847b !important;
  }

  .stat-card b {
    position: static !important;
    justify-self: end !important;
    padding: 2px 5px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    background: #e4f7ec !important;
    color: #267348 !important;
  }

  .dashboard-grid {
    gap: 7px !important;
  }

  .card {
    min-height: auto !important;
    padding: 10px !important;
    border-radius: 13px !important;
  }

  .card-header {
    margin-bottom: 8px !important;
  }

  .card-header h3,
  .health-card h3 {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .card-header button,
  .card-filter-label {
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    border-radius: 8px !important;
  }

  .schedule-item,
  .booking-row,
  .task-row,
  .payment-row,
  .service-row {
    margin-bottom: 6px !important;
    padding: 7px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }

  .schedule-item h4,
  .booking-info h4,
  .task-row h4,
  .service-row h4 {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .schedule-item p,
  .booking-info p,
  .booking-date,
  .task-row p,
  .payment-row p,
  .service-row p {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }
}

/* PAYMENTS - MOBILE INVOICE MODAL */
@media (max-width:900px){

  #invoice-modal .modal{
    width:calc(100vw - 28px) !important;
    max-width:360px !important;
    padding:18px !important;
    border-radius:20px !important;
  }

  #invoice-modal .modal-header{
    margin-bottom:14px !important;
    align-items:center !important;
  }

  #invoice-modal .modal-header h3{
    font-size:22px !important;
    line-height:1.1 !important;
    margin:0 !important;
    font-weight:700 !important;
  }

  #invoice-modal .modal-header button{
    width:30px !important;
    height:30px !important;
    border-radius:10px !important;
    font-size:18px !important;
  }

  #invoice-form{
    gap:10px !important;
  }

  #invoice-form label{
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    font-size:11px !important;
    font-weight:600 !important;
  }

  #invoice-form input,
  #invoice-form textarea{
    height:36px !important;
    min-height:36px !important;
    border-radius:12px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  #invoice-form textarea{
    min-height:72px !important;
    padding:10px 12px !important;
    resize:none !important;
  }

  #invoice-form .form-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  #invoice-form .save-invoice-btn{
    margin-top:6px !important;
    height:40px !important;
    border-radius:14px !important;
    font-size:12px !important;
    font-weight:600 !important;
  }

}

/* SETTINGS - FORCE SUBSCRIPTION CARD BY POSITION */
@media (max-width: 900px) {
  .settings-shell .settings-grid > .settings-card:nth-child(2) {
    padding: 7px !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .settings-shell .settings-grid > .settings-card:nth-child(2) * {
    max-height: none !important;
  }

  .settings-shell .settings-grid > .settings-card:nth-child(2) h3 {
    font-size: 11px !important;
    margin: 0 !important;
  }

  .settings-shell .settings-grid > .settings-card:nth-child(2) p,
  .settings-shell .settings-grid > .settings-card:nth-child(2) span,
  .settings-shell .settings-grid > .settings-card:nth-child(2) h4,
  .settings-shell .settings-grid > .settings-card:nth-child(2) div {
    font-size: 7.2px !important;
    line-height: 1.05 !important;
  }

  .settings-shell .settings-grid > .settings-card:nth-child(2) .plan-feature-list,
  .settings-shell .settings-grid > .settings-card:nth-child(2) [id*="features"],
  .settings-shell .settings-grid > .settings-card:nth-child(2) [class*="feature"] {
    display: grid !important;
    gap: 3px !important;
  }

  .settings-shell .settings-grid > .settings-card:nth-child(2) .plan-feature-list > *,
  .settings-shell .settings-grid > .settings-card:nth-child(2) [id*="features"] > *,
  .settings-shell .settings-grid > .settings-card:nth-child(2) [class*="feature"] > * {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 7px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 7.2px !important;
    line-height: 20px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .settings-shell .settings-grid > .settings-card:nth-child(2) button {
    height: 24px !important;
    min-height: 24px !important;
    margin-top: 6px !important;
    border-radius: 9px !important;
    font-size: 7.5px !important;
    padding: 0 8px !important;
  }
}

/* SETTINGS - FIX VERIFICATION ICONS */
@media (max-width:900px){

.verify-row{
    position:relative !important;
    padding:8px 8px 8px 32px !important;
    min-height:40px !important;
}

.verify-row::before,
.verify-row i,
.verify-row .status-icon,
.verify-row .verify-icon{
    top:10px !important;
    left:10px !important;
    width:14px !important;
    height:14px !important;
    transform:none !important;
}

.verify-row strong{
    display:block !important;
    margin-bottom:2px !important;
}

.verify-row span{
    display:block !important;
}

}

/* MOBILE - PLAIN NOTIFICATION BELL */
@media (max-width: 900px) {
  .notification-bell,
  .bell {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .notification-bell:hover,
  .notification-bell:active,
  .bell:hover,
  .bell:active {
    background: rgba(143, 174, 209, 0.12) !important;
  }
}

/* CUSTOMERS - REMOVE HEADER CARD */
@media (max-width:900px){

  .customers-header{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 10px !important;
    border-radius: 0 !important;
    margin-bottom: 12px !important;
  }

}

/* ==========================================
   MOBILE SERVICE BUILDER - FINAL BASE
   SERVICE POPUP ONLY
========================================== */

@media (max-width:900px){

  /* Force the modal above the app shell and bottom navigation */
  #service-modal.modal-backdrop,
#addon-modal.modal-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:999999 !important;

    width:100vw !important;
    height:100dvh !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;

    background:rgba(20, 29, 45, 0.32) !important;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }

  #service-modal .service-builder-modal{
    position:absolute !important;
    inset:0 !important;

    display:block !important;

    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;

    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;

    margin:0 !important;
    padding:0 0 118px !important;

    border:none !important;
    border-radius:0 !important;

    background:#ffffff !important;
    box-shadow:none !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    transform:none !important;
  }

  /* Header */
  #service-modal .service-builder-header{
    position:relative !important;

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

    gap:16px !important;

    padding:
      max(24px, env(safe-area-inset-top))
      20px
      18px !important;

    margin:0 !important;

    border:none !important;
    background:#ffffff !important;
  }

  #service-modal .service-builder-header-copy{
    flex:1 !important;
    min-width:0 !important;
  }

  #service-modal .modal-eyebrow{
    display:none !important;
  }

  #service-modal #modal-title{
    margin:0 !important;

    color:#111b36 !important;

    font-size:28px !important;
    line-height:1.15 !important;
    font-weight:700 !important;
    letter-spacing:-0.7px !important;
  }

  #service-modal .builder-subtitle{
    margin:7px 0 0 !important;

    color:#727d95 !important;

    font-size:14px !important;
    line-height:1.5 !important;
    font-weight:400 !important;
  }

  #service-modal #close-modal{
    position:relative !important;
    top:0 !important;
    right:0 !important;

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

    flex:0 0 34px !important;

    width:34px !important;
    height:34px !important;

    padding:0 !important;
    margin:0 !important;

    border:1px solid #edf0f5 !important;
    border-radius:50% !important;

    background:#ffffff !important;
    color:#536079 !important;

    font-size:23px !important;
    line-height:1 !important;
    font-weight:400 !important;

    box-shadow:0 4px 14px rgba(31, 48, 78, 0.08) !important;
  }

  /* Progress line */
  #service-modal .service-builder-progress{
    display:grid !important;
    grid-template-columns:repeat(5, 1fr) !important;

    gap:8px !important;

    padding:0 20px 24px !important;
    margin:0 !important;
  }

  #service-modal .service-builder-progress span{
    display:block !important;

    width:100% !important;
    height:4px !important;

    border-radius:999px !important;

    background:#e6ebf5 !important;
  }

  #service-modal .service-builder-progress span.active{
    background:#2764ed !important;
  }

  #service-modal #service-form{
    width:100% !important;
    max-width:none !important;

    padding:0 20px !important;
    margin:0 !important;
  }

  /* Every form section */
  #service-modal .builder-section{
    display:grid !important;
    grid-template-columns:48px minmax(0, 1fr) !important;

    align-items:start !important;
    gap:14px !important;

    width:100% !important;

    padding:0 !important;
    margin:0 0 27px !important;

    border:none !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;
  }

  #service-modal .builder-section-content{
    width:100% !important;
    min-width:0 !important;
  }

  /* Icon circles */
  #service-modal .builder-section-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:48px !important;
    height:48px !important;

    margin:0 !important;

    border-radius:50% !important;

    background:#edf3ff !important;
    color:#2764ed !important;
  }

  #service-modal .builder-section-icon svg{
    width:23px !important;
    height:23px !important;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  /* Hide legacy numbered circles if one remains anywhere */
  #service-modal .builder-number{
    display:none !important;
  }

  /* Section headings */
  #service-modal .builder-section-head{
    display:block !important;

    width:100% !important;

    padding:0 !important;
    margin:0 0 12px !important;
  }

  #service-modal .builder-section-head > div{
    width:100% !important;
  }

  #service-modal .builder-section-head h4{
    margin:0 0 5px !important;

    color:#111b36 !important;

    font-size:17px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
    letter-spacing:-0.25px !important;
  }

  #service-modal .builder-section-head h4 small{
    color:#78839a !important;

    font-size:12px !important;
    font-weight:500 !important;
  }

  #service-modal .builder-section-head p{
    margin:0 !important;

    color:#758098 !important;

    font-size:12px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
  }

  #service-modal .required-star{
    color:#f05454 !important;
  }

  /* Inputs */
  #service-modal input,
  #service-modal textarea,
  #service-modal select{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    border:1px solid #dfe4ee !important;
    border-radius:11px !important;

    outline:none !important;

    background:#ffffff !important;
    color:#19233b !important;

    font-family:Poppins, sans-serif !important;
    font-size:14px !important;
    font-weight:400 !important;

    box-shadow:none !important;

    box-sizing:border-box !important;
    -webkit-appearance:none;
    appearance:none;
  }

  #service-modal input{
    height:50px !important;
    padding:0 14px !important;
  }

  #service-modal textarea{
    min-height:118px !important;
    height:118px !important;

    padding:14px 14px 32px !important;

    line-height:1.55 !important;

    resize:none !important;
  }

  #service-modal select{
    height:50px !important;

    padding:0 42px 0 14px !important;

    background-image:
      linear-gradient(45deg, transparent 50%, #6f7a91 50%),
      linear-gradient(135deg, #6f7a91 50%, transparent 50%) !important;

    background-position:
      calc(100% - 18px) 21px,
      calc(100% - 13px) 21px !important;

    background-size:5px 5px, 5px 5px !important;
    background-repeat:no-repeat !important;
  }

  #service-modal input::placeholder,
  #service-modal textarea::placeholder{
    color:#9aa4b8 !important;
    opacity:1 !important;
  }

  #service-modal input:focus,
  #service-modal textarea:focus,
  #service-modal select:focus{
    border-color:#2764ed !important;

    box-shadow:
      0 0 0 3px rgba(39, 100, 237, 0.10) !important;
  }

  /* Character counters */
  #service-modal .builder-textarea-wrap{
    position:relative !important;
    width:100% !important;
  }

  #service-modal .builder-character-count{
    position:absolute !important;

    right:12px !important;
    bottom:9px !important;

    color:#7d879b !important;

    font-size:11px !important;
    font-weight:500 !important;

    pointer-events:none !important;
  }

  /* Mobile pricing cards */
  #service-modal .mobile-pricing-options{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;

    gap:8px !important;

    width:100% !important;

    margin:0 0 12px !important;
  }

  #service-modal .mobile-pricing-card{
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;

    min-width:0 !important;
    min-height:170px !important;

    padding:14px 10px 12px !important;

    border:1px solid #dfe4ee !important;
    border-radius:11px !important;

    background:#ffffff !important;
    color:#111b36 !important;

    text-align:left !important;

    box-shadow:none !important;
  }

  #service-modal .mobile-pricing-card.active{
    border-color:#2764ed !important;

    background:#fbfdff !important;

    box-shadow:
      0 0 0 1px #2764ed,
      0 7px 17px rgba(39, 100, 237, 0.08) !important;
  }

  #service-modal .pricing-radio{
    display:block !important;

    width:18px !important;
    height:18px !important;

    margin:0 0 11px !important;

    border:2px solid #d4dae6 !important;
    border-radius:50% !important;

    background:#ffffff !important;
  }

  #service-modal .mobile-pricing-card.active .pricing-radio{
    border:5px solid #2764ed !important;
  }

  #service-modal .pricing-card-icon{
    display:block !important;

    min-height:23px !important;
    margin:0 0 9px !important;

    color:#2764ed !important;

    font-size:23px !important;
    line-height:1 !important;
  }

  #service-modal .mobile-pricing-card strong{
    display:block !important;

    margin:0 0 6px !important;

    color:#111b36 !important;

    font-size:12px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
  }

  #service-modal .mobile-pricing-card small{
    display:block !important;

    color:#7a859b !important;

    font-size:10px !important;
    line-height:1.5 !important;
    font-weight:400 !important;
  }

  /* Keep the real select for existing JavaScript, but hide it on mobile */
  #service-modal #service-pricing-type{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    padding:0 !important;
    margin:-1px !important;

    overflow:hidden !important;

    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;

    border:0 !important;
  }

  /* Price input */
  #service-modal .service-price-field{
    display:grid !important;
    grid-template-columns:54px minmax(0, 1fr) 58px !important;

    width:100% !important;
    height:50px !important;

    overflow:hidden !important;

    border:1px solid #dfe4ee !important;
    border-radius:11px !important;

    background:#ffffff !important;
  }

  #service-modal .service-price-field:focus-within{
    border-color:#2764ed !important;

    box-shadow:
      0 0 0 3px rgba(39, 100, 237, 0.10) !important;
  }

  #service-modal .price-prefix,
  #service-modal .price-suffix{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:#f4f6fa !important;
    color:#6f7a91 !important;

    font-size:14px !important;
    font-weight:500 !important;
  }

  #service-modal .price-prefix{
    border-right:1px solid #e1e5ed !important;
  }

  #service-modal .price-suffix{
    border-left:1px solid #e1e5ed !important;
  }

  #service-modal .service-price-field #service-price{
    width:100% !important;
    height:48px !important;

    padding:0 14px !important;

    border:none !important;
    border-radius:0 !important;

    box-shadow:none !important;
  }

  #service-modal .service-price-field #service-price:focus{
    box-shadow:none !important;
  }

  /* Sticky save area */
  #service-modal .service-builder-save-area{
    position:fixed !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    z-index:25 !important;

    padding:
      12px
      20px
      max(14px, env(safe-area-inset-bottom)) !important;

    border-top:1px solid #edf0f5 !important;

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

    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
  }

  #service-modal .save-service-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;

    width:100% !important;
    height:54px !important;

    padding:0 18px !important;
    margin:0 !important;

    border:none !important;
    border-radius:12px !important;

    background:#2764ed !important;
    color:#ffffff !important;

    font-family:Poppins, sans-serif !important;
    font-size:16px !important;
    font-weight:600 !important;

    box-shadow:
      0 10px 24px rgba(39, 100, 237, 0.24) !important;
  }

  #service-modal .form-note{
    display:none !important;
  }

}

/* ==========================================
   SERVICES PAGE V2 — STAGE 1
   MOBILE PAGE STRUCTURE
========================================== */

@media (max-width: 900px) {

  /* Clean full-width page canvas */
  .services-shell {
    background: #ffffff !important;
  }

  .services-shell .content {
    width: 100% !important;
    max-width: 100% !important;

    padding: 22px 16px 90px !important;
    margin: 0 !important;

    background: #ffffff !important;
  }

  /* Page heading */
  .services-shell .content > .page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;

    gap: 18px !important;
    margin: 0 0 22px !important;
  }

  .services-shell .content > .page-header h2 {
    margin: 0 !important;

    color: #111827 !important;

    font-size: 34px !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -1.1px !important;
  }

  .services-shell .content > .page-header p {
    margin: 6px 0 0 !important;

    color: #687386 !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
  }

  /* Full-width Add service button */
  .services-shell .content > .page-header .add-service-btn {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;

    padding: 0 18px !important;
    margin: 0 !important;

    border-radius: 10px !important;

    background: #2563eb !important;
    color: #ffffff !important;

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

    box-shadow: none !important;
  }

  /* Remove the giant white outer card */
  .services-shell .services-layout {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
  }

  .services-shell
  .services-layout
  > .services-table-card:first-child {
    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;
  }

  /* Filters and controls */
  .services-shell
  .services-layout
  > .services-table-card:first-child
  .table-toolbar {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    gap: 12px !important;
    margin: 0 0 18px !important;
  }

  /* Filter strip */
  .services-shell
  .services-layout
  > .services-table-card:first-child
  .tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    width: 100% !important;

    gap: 0 !important;
    padding: 4px !important;
    margin: 0 !important;

    overflow: visible !important;

    border: 1px solid #e3e7ee !important;
    border-radius: 10px !important;

    background: #f4f6f9 !important;
  }

  .services-shell
  .services-layout
  > .services-table-card:first-child
  .tabs .tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 40px !important;

    gap: 5px !important;
    padding: 0 5px !important;

    border-radius: 7px !important;

    color: #687386 !important;
    background: transparent !important;

    font-size: 10px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;

    box-shadow: none !important;
  }

  .services-shell
  .services-layout
  > .services-table-card:first-child
  .tabs .tab-btn.active {
    color: #2563eb !important;
    background: #ffffff !important;

    font-weight: 600 !important;

    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08) !important;
  }

  .services-shell
  .services-layout
  > .services-table-card:first-child
  .tabs .tab-btn span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 19px !important;
    height: 19px !important;

    border-radius: 50% !important;

    background: #e8edf4 !important;

    font-size: 9px !important;
  }

  .services-shell
  .services-layout
  > .services-table-card:first-child
  .tabs .tab-btn.active span {
    background: #e8f0ff !important;
    color: #2563eb !important;
  }

  /* Preview and dropdown row */
  .services-shell
  .services-layout
  > .services-table-card:first-child
  .toolbar-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    width: 100% !important;

    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
  }

  .services-shell
  .services-layout
  > .services-table-card:first-child
  .toolbar-actions button,
  .services-shell
  .services-layout
  > .services-table-card:first-child
  .toolbar-actions select {
    width: 100% !important;
    height: 42px !important;

    padding: 0 10px !important;

    border: 1px solid #dfe4ec !important;
    border-radius: 9px !important;

    background-color: #ffffff !important;
    color: #344054 !important;

    font-size: 11px !important;
    font-weight: 500 !important;

    box-shadow: none !important;
  }

}

/* ==========================================
   SERVICES PAGE V2 — STAGE 3
   SERVICE CARDS
========================================== */

@media (max-width: 900px) {

  .services-shell #services-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;

    width: 100% !important;
    margin: 0 !important;
  }

  .services-shell .service-card-v2 {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 18px !important;
    margin: 0 !important;

    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;

    background: #ffffff !important;

    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.03),
      0 6px 18px rgba(15, 23, 42, 0.04) !important;

    cursor: default !important;
  }

  .services-shell .service-card-v2:hover,
  .services-shell .service-card-v2.selected {
    border-color: #e5e7eb !important;
    background: #ffffff !important;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.03),
      0 6px 18px rgba(15, 23, 42, 0.04) !important;
  }

  /* Card header */
  .services-shell .service-card-v2-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    width: 100% !important;
    gap: 12px !important;
  }

  .services-shell .service-card-v2-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    min-width: 0 !important;
    gap: 8px !important;
  }

  .services-shell .service-card-v2-title h4 {
    margin: 0 !important;

    color: #111827 !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
  }

  /* Status pill */
  .services-shell .service-card-v2-title .status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;

    min-height: 22px !important;
    padding: 3px 8px !important;

    border-radius: 999px !important;

    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  .services-shell .service-card-v2-title .status.active {
    background: #eaf7ef !important;
    color: #27834d !important;
  }

  .services-shell .service-card-v2-title .status.inactive {
    background: #f1f3f5 !important;
    color: #737b87 !important;
  }

  /* Three-dot button */
  .services-shell .service-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 32px !important;
    height: 32px !important;

    padding: 0 0 7px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    color: #687386 !important;

    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;

    box-shadow: none !important;
  }

  .services-shell .service-more-btn:active {
    background: #f3f5f8 !important;
  }

  /* Description */
  .services-shell .service-card-v2-description {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;

    margin: 12px 0 0 !important;

    color: #667085 !important;

    font-size: 11px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  /* Divider */
  .services-shell .service-card-v2-divider {
    width: 100% !important;
    height: 1px !important;

    margin: 16px 0 !important;

    background: #edf0f3 !important;
  }

  /* Metadata */
  .services-shell .service-card-v2-meta {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    width: 100% !important;
    gap: 8px !important;
  }

  .services-shell .service-card-v2-meta-item {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
    gap: 4px !important;
  }

  .services-shell .service-card-v2-meta-item span {
    color: #98a2b3 !important;

    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  .services-shell .service-card-v2-meta-item strong {
    overflow: hidden !important;

    color: #344054 !important;

    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Existing actions hidden for the new menu */
  .services-shell .service-card-v2-actions {
    display: none !important;
  }

  /* Footer */
  .services-shell #table-footer {
    margin: 16px 0 0 !important;

    color: #98a2b3 !important;

    font-size: 10px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }


  /* SERVICES MOBILE ACTION SHEET */
@media (max-width: 900px) {

  .service-action-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(15, 23, 42, 0);
    pointer-events: none;
    transition: background 0.2s ease;
  }

  .service-action-sheet.show {
    background: rgba(15, 23, 42, 0.34);
    pointer-events: auto;
  }

  .service-action-sheet-panel {
    width: 100%;
    max-width: 520px;
    padding: 8px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
    transform: translateY(calc(100% + 30px));
    transition: transform 0.22s ease;
  }

  .service-action-sheet.show .service-action-sheet-panel {
    transform: translateY(0);
  }

  .service-action-sheet-handle {
    width: 38px;
    height: 4px;
    margin: 3px auto 10px;
    border-radius: 999px;
    background: #d8dee8;
  }

  .service-action-sheet-heading {
    padding: 8px 14px 14px;
    text-align: center;
  }

  .service-action-sheet-heading strong {
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .service-action-sheet button {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-top: 1px solid #edf0f4;
    background: transparent;
    color: #172033;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
  }

  .service-action-sheet button.danger {
    color: #dc2626;
  }

  .service-action-sheet button.cancel {
    margin-top: 8px;
    border-top: 0;
    border-radius: 14px;
    background: #f3f5f8;
    text-align: center;
  }
}
}

/* ADD-ON CARDS */
@media (max-width: 900px) {

  .services-shell .addons-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

  .services-shell .addon-card-v2 {
    margin: 0 !important;
  }

  .services-shell .addon-card-v2-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .services-shell .addon-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 32px !important;
    height: 32px !important;

    margin: 0 !important;
    padding: 0 0 7px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    color: #687386 !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;

    box-shadow: none !important;
    cursor: pointer !important;
  }

  .services-shell .addon-more-btn:active {
    background: #f3f5f8 !important;
  }

  .services-shell .addon-card-v2 .service-card-v2-actions {
    display: none !important;
  }
}

/* FIX ADD-ON ICONS */
#addon-modal .builder-section-icon{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

#addon-modal .builder-section-icon svg{
    width:24px !important;
    height:24px !important;
    max-width:24px !important;
    max-height:24px !important;
    display:block !important;
}

#addon-modal .builder-section{
    display:flex !important;
    align-items:flex-start !important;
    gap:16px !important;
}

#addon-modal .builder-section-content{
    flex:1 !important;
    min-width:0 !important;
}

/* ===== ADD-ON MODAL POLISH ===== */

@media (max-width:900px){

/* Icons */
#addon-modal .builder-section{
    display:flex!important;
    gap:18px!important;
    align-items:flex-start!important;
}

#addon-modal .builder-section-content{
    flex:1!important;
    min-width:0!important;
}

#addon-modal .builder-section-icon{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    border-radius:50%!important;
    background:#edf3ff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-shrink:0!important;
}

#addon-modal .builder-section-icon svg{
    width:24px!important;
    height:24px!important;
    stroke:#2d63e2!important;
    fill:none!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

/* Progress */
#addon-modal .service-builder-progress{
    display:flex!important;
    gap:12px!important;
    padding:0 22px 18px!important;
}

#addon-modal .service-builder-progress span{
    flex:1!important;
    height:5px!important;
    border-radius:999px!important;
    background:#e8edf7!important;
}

#addon-modal .service-builder-progress .active{
    background:#2d63e2!important;
}

/* Price field */
#addon-modal .service-price-field{
    display:grid!important;
    grid-template-columns:60px 1fr 70px!important;
    overflow:hidden!important;
    border:1px solid #d9e0ec!important;
    border-radius:18px!important;
}

#addon-modal .price-prefix,
#addon-modal .price-suffix{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#f4f7fb!important;
    color:#6d7b92!important;
    font-weight:700!important;
}

#addon-modal .service-price-field input{
    border:0!important;
    border-left:1px solid #d9e0ec!important;
    border-right:1px solid #d9e0ec!important;
    border-radius:0!important;
}

/* Sticky save button */
#addon-modal .service-builder-save-area{
    position:sticky!important;
    bottom:0!important;
    padding:18px!important;
    background:#fff!important;
    border-top:1px solid #edf1f6!important;
    z-index:50!important;
}

#addon-modal .save-service-btn{
    width:100%!important;
    height:58px!important;
    border-radius:18px!important;
    background:#2d63e2!important;
    color:#fff!important;
    font-size:18px!important;
    font-weight:700!important;
    border:0!important;
    box-shadow:0 12px 28px rgba(45,99,226,.22)!important;
}

}

/* ===== ADD-ON MODAL — MOBILE FULL-SCREEN ===== */

@media (max-width: 900px) {

  /* Full-screen backdrop */
  #addon-modal.modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;

    align-items: stretch !important;
    justify-content: stretch !important;

    background: #ffffff !important;
    overflow: hidden !important;
    z-index: 200000 !important;
  }

  /* Remove the narrow floating desktop panel */
  #addon-modal .service-builder-modal {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* Header */
  #addon-modal .service-builder-header {
    flex: 0 0 auto !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;

    padding: 24px 20px 12px !important;
    margin: 0 !important;

    border: 0 !important;
    background: #ffffff !important;
  }

  #addon-modal .service-builder-header-copy {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #addon-modal .modal-eyebrow {
    display: none !important;
  }

  #addon-modal #addon-modal-title {
    margin: 0 0 6px !important;

    color: #111a34 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.7px !important;
  }

  #addon-modal .builder-subtitle {
    max-width: 290px !important;
    margin: 0 !important;

    color: #77849f !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
  }

  #addon-modal #close-addon-modal {
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 0 3px !important;

    border: 1px solid #e5eaf2 !important;
    border-radius: 50% !important;

    background: #ffffff !important;
    color: #65738b !important;

    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    box-shadow: 0 4px 14px rgba(31, 43, 70, 0.06) !important;
  }

  /* Progress line */
  #addon-modal .service-builder-progress {
    flex: 0 0 auto !important;

    display: flex !important;
    gap: 10px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 14px 20px 18px !important;

    background: #ffffff !important;
  }

  #addon-modal .service-builder-progress span {
    flex: 1 1 0 !important;
    height: 4px !important;

    border-radius: 999px !important;
    background: #e8edf6 !important;
  }

  #addon-modal .service-builder-progress span.active {
    background: #2d63e2 !important;
  }

  /* Scrollable form area */
  #addon-modal #addon-form {
    flex: 1 1 auto !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 20px 130px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    background: #ffffff !important;
  }

  /* Remove separate floating cards */
  #addon-modal .builder-section {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 22px 0 !important;

    border: 0 !important;
    border-bottom: 1px solid #edf1f6 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
  }

  #addon-modal .builder-section:last-of-type {
    border-bottom: 0 !important;
  }

  /* Compact icons */
  #addon-modal .builder-section-icon {
    flex: 0 0 50px !important;

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

    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;

    margin: 0 !important;

    border-radius: 50% !important;
    background: #edf3ff !important;
  }

  #addon-modal .builder-section-icon svg {
    display: block !important;

    width: 23px !important;
    height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;

    fill: none !important;
    stroke: #2d63e2 !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #addon-modal .builder-section-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  #addon-modal .builder-section-head {
    margin: 0 0 12px !important;
  }

  #addon-modal .builder-section-head h4 {
    margin: 0 0 4px !important;

    color: #111a34 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px !important;
  }

  #addon-modal .builder-section-head p {
    margin: 0 !important;

    color: #77849f !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
  }

  #addon-modal .required-star {
    color: #ff5b5b !important;
  }

  /* Inputs */
  #addon-modal input,
  #addon-modal textarea {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    border: 1px solid #d8e0ec !important;
    border-radius: 14px !important;

    background: #ffffff !important;
    color: #111a34 !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    box-shadow: none !important;
    box-sizing: border-box !important;
    outline: none !important;
  }

  #addon-modal input {
    height: 54px !important;
    padding: 0 15px !important;
  }

  #addon-modal textarea {
    display: block !important;
    min-height: 124px !important;
    padding: 15px 15px 34px !important;

    line-height: 1.45 !important;
    resize: vertical !important;
  }

  #addon-modal input::placeholder,
  #addon-modal textarea::placeholder {
    color: #a8b2c4 !important;
    opacity: 1 !important;
  }

  #addon-modal input:focus,
  #addon-modal textarea:focus {
    border-color: #2d63e2 !important;
    box-shadow: 0 0 0 3px rgba(45, 99, 226, 0.1) !important;
  }

  /* Description counter */
  #addon-modal .builder-textarea-wrap {
    position: relative !important;
    width: 100% !important;
  }

  #addon-modal .builder-character-count {
    position: absolute !important;
    right: 14px !important;
    bottom: 11px !important;

    color: #77849f !important;
    font-size: 13px !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  /* Price input */
  #addon-modal .service-price-field {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 58px !important;

    width: 100% !important;
    height: 54px !important;

    margin: 0 !important;

    border: 1px solid #d8e0ec !important;
    border-radius: 14px !important;

    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #addon-modal .price-prefix,
  #addon-modal .price-suffix {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #f5f7fb !important;
    color: #6d7890 !important;

    font-size: 16px !important;
    font-weight: 600 !important;
  }

  #addon-modal .service-price-field input {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;

    padding: 0 12px !important;

    border: 0 !important;
    border-right: 1px solid #d8e0ec !important;
    border-left: 1px solid #d8e0ec !important;
    border-radius: 0 !important;

    box-shadow: none !important;
  }

  /* Hide unnecessary note beneath the button */
  #addon-modal .form-note {
    display: none !important;
  }

  /* Save bar fixed neatly at bottom */
  #addon-modal .service-builder-save-area {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom)) !important;

    border-top: 1px solid #e8edf4 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    box-shadow: 0 -8px 24px rgba(31, 43, 70, 0.06) !important;
    z-index: 50 !important;
  }

  #addon-modal .save-service-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: 0 !important;
    border-radius: 16px !important;

    background: #2d63e2 !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    box-shadow: 0 10px 24px rgba(45, 99, 226, 0.22) !important;
  }

  /* Add add-on button — match Add new service exactly */
.services-shell #open-addon-modal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;

  padding: 0 18px !important;
  margin: 0 0 22px !important;

  border: 0 !important;
  border-radius: 10px !important;

  background: #2563eb !important;
  color: #ffffff !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  box-shadow: none !important;
  opacity: 1 !important;
}
}

/* =========================================================
   TYDIE DASHBOARD — CLEAN MOBILE DESIGN
   SCREENSHOT 1 VISUAL SYSTEM
========================================================= */

@media (max-width: 900px) {

  /* ======================================================
     COMPLETE DASHBOARD RESET
  ====================================================== */

  body:has(.dashboard-shell) {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #101a33 !important;
    font-family: "Poppins", sans-serif !important;
  }

  body:has(.dashboard-shell) .dashboard-shell,
  body:has(.dashboard-shell) .main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body:has(.dashboard-shell) .content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px 10px !important;
    margin: 0 !important;
    padding: 18px 22px 108px !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body:has(.dashboard-shell) .dashboard-grid {
    display: contents !important;
  }

  /* Hide everything that is not part of screenshot 1 */

  body:has(.dashboard-shell) .tasks-card,
  body:has(.dashboard-shell) .payments-card,
  body:has(.dashboard-shell) .sms-card,
  body:has(.dashboard-shell) .services-card,
  body:has(.dashboard-shell) .health-card,
  body:has(.dashboard-shell) .bottom-banner {
    display: none !important;
  }

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

  body:has(.dashboard-shell) .page-intro {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body:has(.dashboard-shell) .schedule-card {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body:has(.dashboard-shell) .stats-grid {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body:has(.dashboard-shell) .recent-card {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  body:has(.dashboard-shell) .earnings-card {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  body:has(.dashboard-shell) .plan-addons-card {
    grid-column: 2 !important;
    grid-row: 5 !important;
  }

  /* ======================================================
     TOP BAR
  ====================================================== */

  body:has(.dashboard-shell) .topbar {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
    padding: 14px 22px 6px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:has(.dashboard-shell) .mobile-menu-btn,
  body:has(.dashboard-shell) .search-box {
    display: none !important;
  }

  body:has(.dashboard-shell) .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
  }

  body:has(.dashboard-shell) .notification-bell {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 17px !important;
  }

  /* ======================================================
     GREETING
  ====================================================== */

  body:has(.dashboard-shell) .page-intro {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  body:has(.dashboard-shell) .page-intro > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  body:has(.dashboard-shell) #dashboard-welcome {
    margin: 0 0 3px !important;
    padding: 0 !important;
    color: #101a33 !important;
    font-size: 22px !important;
    line-height: 1.16 !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
  }

  body:has(.dashboard-shell) #dashboard-business-name {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #777d8f !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  /* ======================================================
     DATE BAR
  ====================================================== */

  body:has(.dashboard-shell) #dashboard-date-picker {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 38px !important;
    border: 1px solid #e4e8ef !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 3px 12px rgba(20, 36, 65, 0.035) !important;
    color: #101a33 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-align: left !important;
  }

  body:has(.dashboard-shell) #dashboard-date-picker::before {
    content: "▦" !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #066df5 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  body:has(.dashboard-shell) #dashboard-date-picker::after {
    content: "⌄" !important;
    position: absolute !important;
    right: 14px !important;
    top: 46% !important;
    transform: translateY(-50%) !important;
    color: #101a33 !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  /* ======================================================
     SHARED TYPOGRAPHY
  ====================================================== */

  body:has(.dashboard-shell) .card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  body:has(.dashboard-shell) .card-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: #101a33 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
  }

  body:has(.dashboard-shell) .card-header button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border: 1px solid #e2e7ef !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #066df5 !important;
    font-family: inherit !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  /* ======================================================
     SCHEDULE
  ====================================================== */

  body:has(.dashboard-shell) .schedule-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body:has(.dashboard-shell) .schedule-card .card-header {
    margin-bottom: 7px !important;
  }

  body:has(.dashboard-shell) #today-bookings-list {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 12px 7px !important;
    border: 1px solid #e2e8f2 !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    background: #ffffff !important;
  }

  body:has(.dashboard-shell) .schedule-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fbfcfe !important;
  }

  body:has(.dashboard-shell) .schedule-item::before {
    content: "✓" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #eaf2ff !important;
    color: #066df5 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  body:has(.dashboard-shell) .schedule-item > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  body:has(.dashboard-shell) .schedule-item h4 {
    margin: 0 0 2px !important;
    padding: 0 !important;
    color: #101a33 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    white-space: normal !important;
  }

  body:has(.dashboard-shell) .schedule-item p {
    margin: 0 !important;
    padding: 0 !important;
    color: #777d8f !important;
    font-size: 7px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: normal !important;
  }

  body:has(.dashboard-shell) .schedule-item > span {
    display: none !important;
  }

  body:has(.dashboard-shell) .dashed-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 7px 12px 12px !important;
    outline: 1px solid #e2e8f2 !important;
    outline-offset: -1px !important;
    border: 0 !important;
    border-radius: 0 0 12px 12px !important;
    background: #ffffff !important;
    color: #066df5 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  body:has(.dashboard-shell) .dashed-btn::after {
    content: "" !important;
    position: absolute !important;
  }

  /* ======================================================
     KPI CARDS
  ====================================================== */

  body:has(.dashboard-shell) .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(.dashboard-shell) .stat-card {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    height: 72px !important;
    box-sizing: border-box !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e4e8ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 4px 13px rgba(20, 36, 65, 0.035) !important;
  }

  body:has(.dashboard-shell) .stat-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  body:has(.dashboard-shell) .stat-card-today .stat-icon {
    background: #eaf2ff !important;
    color: #066df5 !important;
  }

  body:has(.dashboard-shell) .stat-card-week .stat-icon {
    background: #edf8f2 !important;
    color: #149655 !important;
  }

  body:has(.dashboard-shell) .stat-card-revenue .stat-icon {
    background: #f5edff !important;
    color: #8f47d7 !important;
  }

  body:has(.dashboard-shell) .stat-card-customers .stat-icon {
    background: #fff0f1 !important;
    color: #ed4f64 !important;
  }

  body:has(.dashboard-shell) .stat-card > div:nth-child(2) {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body:has(.dashboard-shell) .stat-card p {
    margin: 0 0 2px !important;
    color: #747b8f !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  body:has(.dashboard-shell) .stat-card h3 {
    margin: 0 0 2px !important;
    color: #101a33 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
  }

  body:has(.dashboard-shell) .stat-card span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #8b91a0 !important;
    font-size: 5.5px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ======================================================
     RECENT BOOKINGS
  ====================================================== */

  body:has(.dashboard-shell) .recent-card {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #e4e8ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 4px 13px rgba(20, 36, 65, 0.035) !important;
  }

  body:has(.dashboard-shell) #recent-bookings-list {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(.dashboard-shell) .recent-card .booking-row {
    display: grid !important;
    grid-template-columns: 31px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 2px 8px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f5 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body:has(.dashboard-shell) .recent-card .booking-row:last-child {
    border-bottom: 0 !important;
  }

  body:has(.dashboard-shell) .recent-card .customer-circle {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #edf4ff !important;
    color: #066df5 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  body:has(.dashboard-shell) .recent-card .booking-info {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
  }

  body:has(.dashboard-shell) .recent-card .booking-info h4 {
    margin: 0 0 2px !important;
    color: #101a33 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:has(.dashboard-shell) .recent-card .booking-info p {
    margin: 0 !important;
    color: #858b9a !important;
    font-size: 6px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
  }

  body:has(.dashboard-shell) .recent-card .booking-date {
    grid-column: 3 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    color: #777d8f !important;
    font-size: 5.5px !important;
    line-height: 1.3 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  body:has(.dashboard-shell) .recent-card .pill {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font-size: 5px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
  }

  body:has(.dashboard-shell) .recent-card .pill.green {
    background: #edf8f2 !important;
    color: #148c50 !important;
  }

  body:has(.dashboard-shell) .recent-card .pill.amber {
    background: #fff3de !important;
    color: #9a671d !important;
  }

  /* ======================================================
   BOTTOM PROMOTIONAL CARDS — EXACT REFERENCE LAYOUT
====================================================== */

body:has(.dashboard-shell) .growth-promo-card {
  grid-column: 1 !important;
  grid-row: 5 !important;
}

body:has(.dashboard-shell) .plan-promo-card {
  grid-column: 2 !important;
  grid-row: 5 !important;
}

body:has(.dashboard-shell) .dashboard-promo-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 116px !important;
  min-height: 116px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(16, 26, 51, 0.035) !important;
}

body:has(.dashboard-shell) .growth-promo-card {
  border: 1px solid #dcefe3 !important;
  background: #f7fcf8 !important;
}

body:has(.dashboard-shell) .plan-promo-card {
  border: 1px solid #dbe7fb !important;
  background: #f7faff !important;
}

body:has(.dashboard-shell) .dashboard-promo-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 0 7px !important;
  border-radius: 6px !important;
}

body:has(.dashboard-shell) .dashboard-promo-icon svg {
  width: 13px !important;
  height: 13px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body:has(.dashboard-shell) .growth-promo-icon {
  background: #e8f7ed !important;
  color: #24945a !important;
}

body:has(.dashboard-shell) .plan-promo-icon {
  background: #e9f1ff !important;
  color: #096ef5 !important;
}

body:has(.dashboard-shell) .dashboard-promo-card > h3 {
  position: relative !important;
  z-index: 3 !important;
  width: 78% !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  color: #101a33 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

body:has(.dashboard-shell) .dashboard-promo-card > p {
  position: relative !important;
  z-index: 3 !important;
  width: 72% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #636b7e !important;
  font-size: 5.7px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

body:has(.dashboard-shell) .dashboard-promo-card > a {
  position: absolute !important;
  left: 12px !important;
  bottom: 10px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 6px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

body:has(.dashboard-shell) .growth-promo-card > a {
  color: #229357 !important;
}

body:has(.dashboard-shell) .plan-promo-card > a {
  color: #096ef5 !important;
}

body:has(.dashboard-shell) .dashboard-promo-card > a span {
  font-size: 10px !important;
  line-height: 1 !important;
}

/* Growth chart */

body:has(.dashboard-shell) .growth-mini-chart {
  position: absolute !important;
  right: 8px !important;
  bottom: 5px !important;
  z-index: 1 !important;
  display: block !important;
  width: 72px !important;
  height: 51px !important;
  overflow: visible !important;
}

body:has(.dashboard-shell) .growth-chart-fill {
  fill: rgba(73, 169, 109, 0.13) !important;
  stroke: none !important;
}

body:has(.dashboard-shell) .growth-chart-line {
  fill: none !important;
  stroke: #68b282 !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body:has(.dashboard-shell) .growth-mini-chart circle {
  fill: #68b282 !important;
}

/* Gift */

body:has(.dashboard-shell) .plan-gift {
  position: absolute !important;
  right: 7px !important;
  bottom: 4px !important;
  z-index: 1 !important;
  display: block !important;
  width: 57px !important;
  height: 57px !important;
  overflow: visible !important;
}

body:has(.dashboard-shell) .gift-box {
  fill: #cbdcff !important;
}

body:has(.dashboard-shell) .gift-lid {
  fill: #b7cffb !important;
}

body:has(.dashboard-shell) .gift-ribbon {
  fill: #8fb2ef !important;
}

body:has(.dashboard-shell) .gift-bow {
  fill: none !important;
  stroke: #bdd3fa !important;
  stroke-width: 7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
}

/* BOOKINGS PAGE — FORCE MOBILE WIDTH AND CENTRE */
@media (max-width: 900px) {

  html {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.bookings-page {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body.bookings-page .bookings-layout,
  body.bookings-page .bookings-main,
  body.bookings-page .bookings-page-content {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.bookings-page .bookings-main {
    margin-left: 0 !important;
  }

  body.bookings-page .bookings-page-content {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  body.bookings-page .bookings-header,
  body.bookings-page .bookings-header-actions,
  body.bookings-page .bookings-stats-grid,
  body.bookings-page .bookings-filter-row,
  body.bookings-page .bookings-list-section,
  body.bookings-page .booking-list-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.bookings-page .bookings-header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body.bookings-page .bookings-primary-btn,
  body.bookings-page .bookings-secondary-btn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.bookings-page .bookings-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* BOOKINGS PAGE — REMOVE EXCESS CARD HEIGHT */
@media (max-width: 900px) {

  body.bookings-page .booking-list-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 12px !important;
  }

  body.bookings-page .booking-list-top {
    min-height: 0 !important;
  }

  body.bookings-page .booking-list-bottom {
    min-height: 0 !important;
    margin-top: 10px !important;
    padding-top: 9px !important;
  }

  body.bookings-page .booking-actions {
    align-content: flex-start !important;
    min-height: 0 !important;
  }

  body.bookings-page .booking-actions a {
    height: 29px !important;
    min-height: 29px !important;
  }
}
/* =========================================================
   PAYMENTS PAGE — MOBILE FINAL
   ========================================================= */

@media (max-width: 900px) {

  /* =========================
     PAGE FOUNDATION
     ========================= */

  body.payments-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    color: #071239 !important;
  }

  body.payments-page,
  body.payments-page button,
  body.payments-page input,
  body.payments-page select,
  body.payments-page textarea {
    font-family: "Poppins", sans-serif !important;
  }

  body.payments-page *,
  body.payments-page *::before,
  body.payments-page *::after {
    box-sizing: border-box !important;
  }

  body.payments-page .payments-shell,
  body.payments-page .main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
  }

  body.payments-page .main {
    padding-bottom: 94px !important;

    --payments-navy: #071239;
    --payments-blue: #2473ed;
    --payments-blue-dark: #1763db;
    --payments-grey: #747a8d;
    --payments-light-grey: #9ba0ae;
    --payments-border: #e4e7ed;
    --payments-soft-blue: #edf4ff;
    --payments-green: #22a96b;
    --payments-green-bg: #e8f7ef;
    --payments-orange: #dc941c;
    --payments-orange-bg: #fff5e5;
    --payments-red: #e15a68;
    --payments-red-bg: #fff0f2;
  }

  body.payments-page .content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 22px 24px 30px !important;
    overflow-x: hidden !important;
  }

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

  body.payments-page .payments-page-header {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
  }

  body.payments-page .payments-heading-copy {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 15px !important;
  }

  body.payments-page .payments-eyebrow {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: var(--payments-blue) !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
  }

  body.payments-page .payments-page-header h1 {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: var(--payments-navy) !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
  }

  body.payments-page .payments-subtext {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--payments-grey) !important;
    font-size: 10.5px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  body.payments-page .payments-header-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.payments-page .payments-primary-btn,
  body.payments-page .payments-secondary-btn {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  body.payments-page .payments-primary-btn {
    border: 1px solid var(--payments-blue) !important;
    background: var(--payments-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 11px rgba(36, 115, 237, 0.19) !important;
  }

  body.payments-page .payments-secondary-btn {
    border: 1px solid var(--payments-border) !important;
    background: #ffffff !important;
    color: #202333 !important;
    box-shadow: none !important;
  }

  body.payments-page .payments-primary-btn svg {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body.payments-page .payments-action-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  /* =========================
     TABS
     ========================= */

  body.payments-page .tabs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 17px !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.payments-page .tabs::-webkit-scrollbar {
    display: none !important;
  }

  body.payments-page .tab-btn {
    appearance: none !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid var(--payments-border) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #303447 !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  body.payments-page .tab-btn.active {
    border-color: var(--payments-blue) !important;
    background: var(--payments-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 9px rgba(36, 115, 237, 0.18) !important;
  }

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

  body.payments-page .payments-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.payments-page .left-column,
  body.payments-page .right-column {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.payments-page .right-column {
    margin-top: 10px !important;
  }

  body.payments-page .payments-overview {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  body.payments-page .overview-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  body.payments-page .overview-heading h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--payments-navy) !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
  }

  body.payments-page .overview-period {
    appearance: none !important;
    width: auto !important;
    min-width: 86px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 24px 0 10px !important;
    border: 1px solid var(--payments-border) !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #454958 !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

    /* =========================
     PAYMENT KPI STRIP
     ========================= */

  body.payments-page .payment-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  body.payments-page .payment-stats .stat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.payments-page .payment-stats .stat-card > div:last-child {
    display: contents !important;
  }

  body.payments-page .stat-icon {
    position: static !important;

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

    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;

    margin: 0 0 9px !important;

    border-radius: 11px !important;

    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  body.payments-page .stat-icon.revenue {
    background: #e8f7ef !important;
    color: #22a96b !important;
  }

  body.payments-page .stat-icon.paid {
    background: #edf4ff !important;
    color: #2473ed !important;
  }

  body.payments-page .stat-icon.pending {
    background: #fff5e5 !important;
    color: #dc941c !important;
  }

  body.payments-page .stat-icon.overdue {
    background: #fff0f2 !important;
    color: #e15a68 !important;
  }

  body.payments-page .stat-card p {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 6px !important;
    padding: 0 !important;

    overflow: hidden !important;

    color: #6f7485 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.payments-page .stat-card h3 {
    display: block !important;
    width: 100% !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    color: #071239 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;

    white-space: nowrap !important;
  }

  body.payments-page .stat-card span {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    color: #868b99 !important;
    font-size: 6px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.payments-page .stat-card .positive {
    color: #22a96b !important;
    font-weight: 600 !important;
  }

  body.payments-page .stat-card .warning {
    color: #dc941c !important;
  }

  body.payments-page .stat-card .danger {
    color: #e15a68 !important;
  }

  body.payments-page .withdraw-btn {
    display: none !important;
  }

  /* =========================
     LATEST PAYOUT CARD
     ========================= */

  body.payments-page .payout-guidance-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 11px !important;
    padding: 10px 11px !important;
    overflow: hidden !important;
    border: 1px solid #dfe7f3 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f3f7fd 0%, #ffffff 100%) !important;
    box-shadow: 0 4px 13px rgba(22, 30, 55, 0.04) !important;
  }

  body.payments-page .payout-guidance-card::after {
    content: "›" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    color: #8d94a5 !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

body.payments-page .payout-badge{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:42px !important;
    height:42px !important;

    border-radius:50% !important;

    background:#eef5ff !important;
    color:#2473ed !important;

    box-shadow:none !important;

    font-size:0 !important;
}

body.payments-page .payout-badge::before{
    content:"➤";
    display:block;

    color:#2473ed;

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

    transform:rotate(-45deg);
}

  body.payments-page .payout-content {
    min-width: 0 !important;
  }

  body.payments-page .payout-content > span {
    display: block !important;
    margin: 0 0 2px !important;
    color: var(--payments-blue) !important;
    font-size: 5.8px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body.payments-page .payout-content h3 {
    margin: 0 0 2px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--payments-navy) !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.payments-page .payout-content p {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--payments-grey) !important;
    font-size: 5.8px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* =========================
     TRANSACTIONS CARD
     ========================= */

body.payments-page .transactions-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 0 18px !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.payments-page .transactions-card .card-header {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

  body.payments-page .payments-section-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  body.payments-page .transactions-card .card-header h3,
  body.payments-page .payments-section-heading h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--payments-navy) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
  }

  body.payments-page .payments-view-link {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--payments-blue) !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  body.payments-page .filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.payments-page .filters select {
    appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 22px 0 9px !important;
    border: 1px solid var(--payments-border) !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #555a69 !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

  body.payments-page .table-head {
    display: none !important;
  }

  body.payments-page #transactions-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.payments-page .transaction-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 51px !important;
    margin: 0 !important;
    padding: 8px 22px 8px 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid #e8ebf0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.payments-page .transaction-row:last-child {
    border-bottom: 0 !important;
  }

  body.payments-page .transaction-row > div:first-child {
    display: none !important;
  }

  body.payments-page .transaction-row .customer-cell {
    display: contents !important;
  }

  body.payments-page .customer-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #b8d1ef, #79a7dc) !important;
    color: #ffffff !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  body.payments-page .transaction-row .customer-cell strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #12162c !important;
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.payments-page .transaction-row > div:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    min-width: 0 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
  }

  body.payments-page .transaction-row > div:nth-child(3) h4 {
    display: none !important;
  }

  body.payments-page .transaction-row > div:nth-child(3) p {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #818694 !important;
    font-size: 5.8px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.payments-page .invoice-placeholder,
  body.payments-page .method-cell {
    display: none !important;
  }

  body.payments-page .transaction-row .status {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: end !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 15px !important;
    min-height: 15px !important;
    margin: 0 0 1px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 5.2px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    white-space: nowrap !important;
  }

  body.payments-page .transaction-row .status.paid {
    background: var(--payments-green-bg) !important;
    color: #178b57 !important;
  }

  body.payments-page .transaction-row .status.pending {
    background: var(--payments-orange-bg) !important;
    color: #b67111 !important;
  }

  body.payments-page .transaction-row .status.overdue {
    background: var(--payments-red-bg) !important;
    color: var(--payments-red) !important;
  }

  body.payments-page .transaction-row > strong {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    color: var(--payments-blue) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  body.payments-page .transaction-row .dots {
    position: absolute !important;
    top: 17px !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    min-width: 14px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #8a8f9d !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  body.payments-page .table-footer {
    display: block !important;
    width: 100% !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
  }

  body.payments-page .table-footer p {
    margin: 0 !important;
    padding: 0 !important;
    color: #9095a3 !important;
    font-size: 5.8px !important;
    line-height: 1.2 !important;
  }

  body.payments-page .pagination {
    display: none !important;
  }

  /* =========================
     REVENUE OVERVIEW
     ========================= */

  body.payments-page .revenue-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 11px !important;
    padding: 12px 11px !important;
    overflow: hidden !important;
    border: 1px solid #e6e8ed !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 13px rgba(22, 30, 55, 0.04) !important;
  }

  body.payments-page .revenue-card .side-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 7px !important;
  }

  body.payments-page .revenue-card .side-card-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--payments-navy) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
  }

  body.payments-page .revenue-card .side-card-header select {
    appearance: none !important;
    width: auto !important;
    min-width: 78px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 20px 0 8px !important;
    border: 1px solid var(--payments-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #555a69 !important;
    font-size: 6px !important;
  }

  body.payments-page .revenue-card > h2 {
    margin: 0 0 2px !important;
    padding: 0 !important;
    color: var(--payments-navy) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
  }

  body.payments-page .revenue-card > .positive {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--payments-green) !important;
    font-size: 6px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  body.payments-page .mini-chart {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 128px !important;
    margin: 8px 0 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(to bottom, transparent 24%, #f0f2f6 25%, transparent 26%),
      linear-gradient(to bottom, transparent 49%, #f0f2f6 50%, transparent 51%),
      linear-gradient(to bottom, transparent 74%, #f0f2f6 75%, transparent 76%) !important;
  }

body.payments-page .chart-area{
    position:absolute !important;
    left:32px !important;
    right:4px !important;
    bottom:18px !important;

    height:92px !important;

    background:linear-gradient(
        to top,
        rgba(36,115,237,.16),
        rgba(36,115,237,.03)
    ) !important;

    clip-path:polygon(
        0% 78%,
        12% 74%,
        26% 61%,
        40% 52%,
        55% 35%,
        70% 33%,
        84% 18%,
        100% 18%,
        100% 100%,
        0% 100%
    ) !important;
}

body.payments-page .chart-line{
    display:none !important;
}

  body.payments-page .mini-chart .y,
  body.payments-page .mini-chart .x {
    position: absolute !important;
    color: #989daa !important;
    font-size: 5px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  body.payments-page .mini-chart .y1 {
    top: 3px !important;
    left: 0 !important;
  }

  body.payments-page .mini-chart .y2 {
    top: 34px !important;
    left: 0 !important;
  }

  body.payments-page .mini-chart .y3 {
    top: 67px !important;
    left: 0 !important;
  }

  body.payments-page .mini-chart .y4 {
    bottom: 18px !important;
    left: 0 !important;
  }

  body.payments-page .mini-chart .x1 {
    bottom: 2px !important;
    left: 28px !important;
  }

  body.payments-page .mini-chart .x2 {
    bottom: 2px !important;
    left: 28% !important;
  }

  body.payments-page .mini-chart .x3 {
    bottom: 2px !important;
    left: 48% !important;
  }

  body.payments-page .mini-chart .x4 {
    bottom: 2px !important;
    left: 69% !important;
  }

  body.payments-page .mini-chart .x5 {
    right: 2px !important;
    bottom: 2px !important;
  }

  /* =========================
     PAYMENT METHODS
     ========================= */

  body.payments-page .methods-card {
    display: none !important;
  }

  /* =========================
     OUTSTANDING INVOICES
     ========================= */

  body.payments-page .invoices-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 11px !important;
    overflow: hidden !important;
    border: 1px solid #e6e8ed !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 13px rgba(22, 30, 55, 0.04) !important;
  }

  body.payments-page .invoices-card .side-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 9px !important;
  }

  body.payments-page .invoices-card .side-card-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--payments-navy) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
  }

  body.payments-page .invoices-card .side-card-header button {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--payments-blue) !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  body.payments-page .invoice-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
  }

  body.payments-page .invoice-summary > div {
    min-width: 0 !important;
    padding: 8px 9px !important;
    border-radius: 9px !important;
    background: #f7f9fc !important;
  }

  body.payments-page .invoice-summary h2 {
    margin: 0 0 3px !important;
    padding: 0 !important;
    color: var(--payments-navy) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
  }

  body.payments-page .invoice-summary p {
    margin: 0 !important;
    padding: 0 !important;
    color: #858a99 !important;
    font-size: 5.8px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
  }

  body.payments-page #outstanding-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.payments-page .invoice-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef0f4 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 6px !important;
  }

  body.payments-page .invoice-row:last-child {
    border-bottom: 0 !important;
  }

  body.payments-page .invoice-row a {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--payments-blue) !important;
    font-size: 6.5px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.payments-page .invoice-row span,
  body.payments-page .invoice-row strong {
    color: #262a38 !important;
    font-size: 6.5px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  body.payments-page .invoice-row b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  body.payments-page .invoice-row b.pending {
    background: var(--payments-orange-bg) !important;
    color: #b67111 !important;
  }

  body.payments-page .invoice-row b.overdue {
    background: var(--payments-red-bg) !important;
    color: var(--payments-red) !important;
  }

  body.payments-page .invoice-row b.paid {
    background: var(--payments-green-bg) !important;
    color: #178b57 !important;
  }

  body.payments-page .view-invoices-btn {
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 8px 0 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--payments-soft-blue) !important;
    color: var(--payments-blue) !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  /* =========================
     EMPTY STATES
     ========================= */

  body.payments-page .empty-state,
  body.payments-page .small-empty {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 10px !important;
    text-align: center !important;
    color: var(--payments-grey) !important;
    font-size: 7px !important;
    line-height: 1.5 !important;
  }

  body.payments-page .empty-state h3 {
    margin: 0 0 4px !important;
    color: var(--payments-navy) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  body.payments-page .empty-state p {
    margin: 0 !important;
    color: var(--payments-grey) !important;
    font-size: 6px !important;
    line-height: 1.45 !important;
  }

  /* =========================
     MODALS
     ========================= */

  body.payments-page .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 12px !important;
    background: rgba(7, 18, 57, 0.45) !important;
    backdrop-filter: blur(6px) !important;
  }

  body.payments-page .modal-backdrop.show {
    display: flex !important;
  }

  body.payments-page .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    margin: 0 !important;
    padding: 18px !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 80px rgba(7, 18, 57, 0.25) !important;
  }

  body.payments-page .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
  }

  body.payments-page .modal-header h3 {
    margin: 0 !important;
    color: var(--payments-navy) !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }

  body.payments-page .modal-header button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #f2f4f8 !important;
    color: var(--payments-navy) !important;
    font-size: 20px !important;
  }

  body.payments-page #invoice-form,
  body.payments-page .withdraw-modal-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  body.payments-page #invoice-form label,
  body.payments-page .withdraw-modal-body label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    color: #343847 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  body.payments-page #invoice-form input,
  body.payments-page #invoice-form textarea,
  body.payments-page .withdraw-modal-body input {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--payments-border) !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: var(--payments-navy) !important;
    font-size: 10px !important;
    outline: none !important;
  }

  body.payments-page #invoice-form textarea {
    min-height: 90px !important;
    resize: vertical !important;
  }

  body.payments-page .form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body.payments-page .save-invoice-btn {
    width: 100% !important;
    min-height: 42px !important;
    margin: 2px 0 0 !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    background: var(--payments-blue) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    box-shadow: 0 7px 16px rgba(36, 115, 237, 0.2) !important;
  }

  /* =========================
     TAB-SPECIFIC STATES
     ========================= */

  body.payments-page.invoice-tab-open .payments-layout {
    display: block !important;
  }

  body.payments-page.invoice-tab-open .right-column {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.payments-page.invoice-tab-open .revenue-card,
  body.payments-page.invoice-tab-open .methods-card {
    display: none !important;
  }

  body.payments-page.invoice-tab-open .invoices-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   PAYMENTS — SMALL IPHONES
   ========================================================= */

@media (max-width: 390px) {

  body.payments-page .content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.payments-page .payments-header-actions {
    gap: 8px !important;
  }

  body.payments-page .payments-primary-btn,
  body.payments-page .payments-secondary-btn {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 7.8px !important;
  }

  body.payments-page .payment-stats {
    gap: 8px !important;
  }

  body.payments-page .stat-icon {
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
  }

  body.payments-page .stat-card p {
    font-size: 6.4px !important;
  }

  body.payments-page .stat-card h3 {
    font-size: 14px !important;
  }

  body.payments-page .stat-card span {
    font-size: 5.4px !important;
  }

  body.payments-page .mini-chart {
  position: relative !important;
  width: 100% !important;
  height: 128px !important;
  margin-top: 8px !important;
  overflow: visible !important;
  background: transparent !important;
}

body.payments-page .real-revenue-chart {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

body.payments-page .chart-area,
body.payments-page .chart-line,
body.payments-page .mini-chart > .x,
body.payments-page .mini-chart > .y {
  display: none !important;
}
}

/* =========================================================
   SETTINGS PAGE — MOBILE FINAL
   ========================================================= */

.settings-mobile-home {
  display: none;
}

@media (max-width: 900px) {

  body.settings-page {
    margin: 0 !important;
    background: #ffffff !important;
    color: #091333 !important;
    font-family: "Poppins", sans-serif !important;
  }

  body.settings-page .settings-shell,
  body.settings-page .main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body.settings-page .topbar {
    height: 58px !important;
    min-height: 58px !important;
    padding: 8px 22px !important;
    border: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.settings-page .mobile-menu-btn {
    display: none !important;
  }

  body.settings-page .notification-bell {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 20px !important;
  }

  body.settings-page .content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 24px 112px !important;
    background: #ffffff !important;
  }

  body.settings-page .settings-mobile-home {
    display: block !important;
    width: 100% !important;
  }

  body.settings-page .settings-mobile-home ~ .page-header,
  body.settings-page .settings-mobile-home ~ .profile-image-card,
  body.settings-page .settings-mobile-home ~ .settings-grid,
  body.settings-page .settings-mobile-home ~ .customer-preview-card,
  body.settings-page .settings-mobile-home ~ .small-card-grid,
  body.settings-page .settings-mobile-home ~ .bottom-card-grid {
    display: none !important;
  }

  body.settings-page .settings-mobile-heading {
    margin: 0 0 18px !important;
  }

  body.settings-page .settings-mobile-heading > p {
    margin: 0 0 7px !important;
    color: #2473ed !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.17em !important;
    text-transform: uppercase !important;
  }

  body.settings-page .settings-mobile-heading h1 {
    margin: 0 0 7px !important;
    color: #091333 !important;
    font-size: 29px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.055em !important;
  }

  body.settings-page .settings-mobile-heading > span {
    display: block !important;
    max-width: 310px !important;
    color: #73798b !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  body.settings-page .settings-profile-summary,
  body.settings-page .settings-progress-summary,
  body.settings-page .settings-menu-card,
  body.settings-page .settings-subscription-summary {
    width: 100% !important;
    border: 1px solid #e4e7ee !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(16, 29, 64, 0.035) !important;
  }

  body.settings-page .settings-profile-summary {
    display: grid !important;
    grid-template-columns: 55px minmax(0, 1fr) 12px !important;
    align-items: center !important;
    gap: 13px !important;
    min-height: 115px !important;
    margin-bottom: 13px !important;
    padding: 15px 17px !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  body.settings-page .settings-profile-summary > img {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: linear-gradient(145deg, #9cbcea, #658ed8) !important;
  }

  body.settings-page .settings-profile-copy {
    min-width: 0 !important;
  }

  body.settings-page .settings-profile-title {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  body.settings-page .settings-profile-title h2 {
    margin: 0 !important;
    color: #11162d !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  body.settings-page .settings-profile-title span {
    padding: 3px 7px !important;
    border-radius: 5px !important;
    background: #e6f8ed !important;
    color: #24a75e !important;
    font-size: 7px !important;
    font-weight: 600 !important;
  }

  body.settings-page .settings-profile-copy > p {
    margin: 4px 0 9px !important;
    color: #777c8d !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
  }

  body.settings-page .settings-image-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 31px !important;
    padding: 0 11px !important;
    border: 1px solid #dfe3eb !important;
    border-radius: 8px !important;
    color: #2473ed !important;
    font-size: 8px !important;
    font-weight: 600 !important;
  }

  body.settings-page .settings-image-link svg {
    width: 13px !important;
    height: 13px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
  }

  body.settings-page .settings-chevron {
    color: #596071 !important;
    font-size: 27px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
  }

  body.settings-page .settings-progress-summary {
    margin-bottom: 13px !important;
    padding: 15px 17px 14px !important;
  }

  body.settings-page .settings-progress-top {
    display: grid !important;
    grid-template-columns: 1fr 62px !important;
    align-items: start !important;
    gap: 12px !important;
  }

  body.settings-page .settings-progress-top h2 {
    margin: 0 0 4px !important;
    color: #11162d !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  body.settings-page #mobile-health-score {
    display: block !important;
    margin: 0 0 4px !important;
    color: #091333 !important;
    font-size: 27px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  body.settings-page .settings-progress-top > div > span {
    color: #21a95d !important;
    font-size: 9px !important;
    font-weight: 600 !important;
  }

  body.settings-page .settings-progress-ring {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
  }

  body.settings-page .settings-progress-ring > svg:first-child {
    width: 58px !important;
    height: 58px !important;
    transform: rotate(-90deg) !important;
  }

  body.settings-page .settings-progress-ring circle {
    fill: none !important;
    stroke-width: 4 !important;
  }

  body.settings-page .ring-track {
    stroke: #e6e9f1 !important;
  }

  body.settings-page .ring-value {
    stroke: #2473ed !important;
    stroke-dasharray: 113.1 !important;
    stroke-dashoffset: 113.1;
    stroke-linecap: round !important;
    transition: stroke-dashoffset 0.35s ease !important;
  }

  body.settings-page .ring-icon {
    position: absolute !important;
    top: 17px !important;
    left: 17px !important;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: #2473ed !important;
    stroke-width: 1.5 !important;
  }

  body.settings-page .settings-progress-bar {
    width: calc(100% - 75px) !important;
    height: 5px !important;
    margin: -17px 0 10px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #ebedf1 !important;
  }

  body.settings-page .settings-progress-bar span {
    display: block !important;
    width: 0;
    height: 100% !important;
    border-radius: inherit !important;
    background: #21b062 !important;
    transition: width 0.35s ease !important;
  }

  body.settings-page .settings-progress-description {
    margin: 0 0 9px !important;
    color: #858a98 !important;
    font-size: 7.5px !important;
    line-height: 1.4 !important;
  }

  body.settings-page .settings-progress-list > div {
    display: grid !important;
    grid-template-columns: 18px 1fr !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 33px !important;
    border-bottom: 1px solid #eceef2 !important;
  }

  body.settings-page .settings-progress-list > div:last-child {
    border-bottom: 0 !important;
  }

  body.settings-page .settings-progress-list p {
    margin: 0 !important;
    color: #747988 !important;
    font-size: 8.5px !important;
  }

  body.settings-page .settings-check {
    width: 14px !important;
    height: 14px !important;
    border: 1.5px solid #cbd0dc !important;
    border-radius: 50% !important;
  }

  body.settings-page .settings-progress-list .complete .settings-check {
    position: relative !important;
    border-color: #20b064 !important;
    background: #20b064 !important;
  }

  body.settings-page .settings-progress-list .complete .settings-check::after {
    content: "✓" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
  }

  body.settings-page .settings-progress-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    color: #2473ed !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  body.settings-page .settings-progress-link span {
    font-size: 18px !important;
  }

  body.settings-page .settings-menu-card {
    margin-bottom: 13px !important;
    overflow: hidden !important;
  }

  body.settings-page .settings-menu-row {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 10px !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 59px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #e9ebf0 !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  body.settings-page .settings-menu-row:last-child {
    border-bottom: 0 !important;
  }

  body.settings-page .settings-menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }

  body.settings-page .settings-menu-icon svg {
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body.settings-page .settings-icon-blue {
    background: #edf3ff !important;
    color: #3979e8 !important;
  }

  body.settings-page .settings-icon-green {
    background: #eaf8ef !important;
    color: #20ad64 !important;
  }

  body.settings-page .settings-icon-purple {
    background: #f3edff !important;
    color: #9867ea !important;
  }

  body.settings-page .settings-icon-orange {
    background: #fff4df !important;
    color: #f2a316 !important;
  }

  body.settings-page .settings-icon-grey {
    background: #f0f1f5 !important;
    color: #697080 !important;
  }

  body.settings-page .settings-icon-plan {
    background: #f4efff !important;
    color: #9168e9 !important;
  }

  body.settings-page .settings-menu-copy {
    min-width: 0 !important;
  }

  body.settings-page .settings-menu-copy strong {
    display: block !important;
    margin-bottom: 3px !important;
    color: #15192f !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  body.settings-page .settings-menu-copy small {
    display: block !important;
    overflow: hidden !important;
    color: #838895 !important;
    font-size: 7.3px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.settings-page .settings-menu-row .settings-chevron {
    font-size: 21px !important;
  }

  body.settings-page .settings-subscription-summary {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 11px 14px !important;
  }

  body.settings-page .settings-subscription-summary strong {
    display: block !important;
    margin-bottom: 2px !important;
    color: #15192f !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  body.settings-page .settings-subscription-summary p {
    margin: 0 !important;
    color: #15192f !important;
    font-size: 8px !important;
  }

  body.settings-page #mobile-manage-plan-btn {
    width: auto !important;
    min-width: 70px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid #d9c9fb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #956be8 !important;
    font-size: 8px !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 900px) {
  body.settings-page
  .settings-mobile-home.mobile-settings-home-hidden {
    display: none !important;
  }

  body.settings-page
  .settings-grid.mobile-settings-parent-open,
  body.settings-page
  .small-card-grid.mobile-settings-parent-open,
  body.settings-page
  .bottom-card-grid.mobile-settings-parent-open {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.settings-page
  .mobile-settings-parent-open
  > *:not(.mobile-settings-section-open) {
    display: none !important;
  }

  body.settings-page
  .mobile-settings-section-open {
    display: block !important;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    margin: 12px auto 110px !important;
    box-sizing: border-box !important;
  }

  body.settings-page
  .mobile-settings-back-button {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2474ea;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  body.settings-page
  .mobile-settings-back-button span {
    font-size: 25px;
    line-height: 1;
  }
}

@media (max-width: 900px) {

  /* Live profile preview — hidden on settings home */
  body.settings-page #customer-preview-section {
    display: none !important;
  }

  /* Live profile preview — opened */
  body.settings-page
  #customer-preview-section.mobile-settings-section-open {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 100px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.settings-page
  #customer-preview-section
  .mobile-settings-back-button {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 4px 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #2473ed !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  body.settings-page
  #customer-preview-section
  .mobile-settings-back-button span {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  body.settings-page
  #customer-preview-section
  .card-title-row {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  body.settings-page
  #customer-preview-section
  .blue-label {
    margin: 0 0 5px !important;
    color: #2473ed !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  body.settings-page
  #customer-preview-section
  .card-title-row h3 {
    margin: 0 !important;
    max-width: none !important;
    color: #091333 !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
  }

  body.settings-page
  #customer-preview-section
  .preview-box {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px 18px !important;
    border: 1px solid #e4e7ee !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(16, 29, 64, 0.035) !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  body.settings-page
  #customer-preview-section
  .preview-cover {
    width: auto !important;
    height: 92px !important;
    margin: 0 -12px !important;
    border-radius: 0 !important;
  }

  body.settings-page
  #customer-preview-section
  .preview-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    height: 62px !important;
    margin: -31px auto 8px !important;
    border: 4px solid #ffffff !important;
    border-radius: 18px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body.settings-page
  #customer-preview-section
  #preview-business-name {
    margin: 0 0 3px !important;
    color: #091333 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  body.settings-page
  #customer-preview-section
  #preview-location-status {
    margin: 0 0 7px !important;
    color: #747988 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.settings-page
  #customer-preview-section
  #preview-rating {
    display: block !important;
    margin: 0 0 12px !important;
    color: #11162d !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  body.settings-page
  #customer-preview-section
  .preview-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  body.settings-page
  #customer-preview-section
  .preview-pills span {
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }
}