@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900&display=swap");

@layer base {
  #servv-wrap,
  #servv-wrap * {
    font-family: "Inter", sans-serif;
    /* font-weight: 400; */
    scroll-margin-top: 0;
  }

  .servv-app {
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@layer utilities {
  @keyframes slide-up {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0);
    }
  }

  .animate-slide-up {
    animation: slide-up 0.3s ease-out forwards;
  }
}
@layer components {
  :root {
    --ColorsEffectsShadowsshadow-xs: #1018280d;
  }
  tr span,
  tr * span,
  tr * * span,
  tr * * * span {
    @apply md:text-sm;
  }
  .hide-submenu-item {
    @apply hidden;
  }
  .wp-submenu li a[href*="servv-plugin-zoom-confirm-page"],
  .wp-submenu li a[href*="servv-plugin-calendar-confirm-page"],
  .wp-submenu li a[href*="servv-plugin-gmail-confirm-page"],
  .wp-submenu li a[href*="servv-plugin-stripe-confirm-page"] {
    @apply hide-submenu-item;
  }

  .section-container {
    @apply flex flex-col gap-5 border border-b-0 border-gray-200 p-4;
  }

  .section-heading {
    @apply text-lg font-semibold;
  }

  .section-description {
    @apply text-sm text-gray-700 font-medium;
  }

  .select-control {
    @apply p-2 border-solid border border-gray-200 rounded-lg text-gray-700;
  }

  select#timezone {
    @apply px-2 py-[0.125rem] border-solid border border-gray-300 rounded-lg text-gray-700 bg-white grow min-w-full;
  }
  select#timezone-select {
    @apply px-2 py-2 border-solid border border-gray-300 rounded-lg text-gray-700 bg-white grow min-w-full;
  }

  input.input-control.section-description {
    @apply px-2 py-1 rounded-lg text-md shadow-sm border-solid border border-gray-300 bg-white appearance-none hover:appearance-none;
  }
  input.input-control.section-description.text-center {
    @apply px-2 py-1 rounded-lg border-solid border border-gray-300 bg-white appearance-none hover:appearance-none;
  }
  input.input-control.section-description.text-center.w-full {
    @apply px-2 py-1 rounded-lg border-solid border border-gray-300 bg-white appearance-none hover:appearance-none;
  }
  .description-image {
    @apply pl-9 !important;
  }

  .input-control-with-icon-container {
    @apply relative flex items-center;
  }

  .select-control-with-icon-container {
    @apply relative flex items-center text-sm grow;
  }

  input.input-control-with-icon {
    @apply p-2 rounded-lg border-solid border border-gray-200 bg-white text-slate-400 w-full text-sm ps-10 text-sm;
  }

  .select-control-with-icon {
    @apply w-full;
  }
  .select-control-with-icon-left {
    @apply w-full;
  }

  .input-control-icon {
    @apply absolute left-4 size-6 stroke-gray-500 fill-white;
  }

  .input-control-icon-right {
    @apply absolute right-4 size-5;
  }
  .input-control-icon-left {
    @apply absolute left-4 size-5;
  }

  input.radio-control {
    @apply size-6 rounded-full border-2 border-gray-400 flex items-center justify-center;
  }
  input[type="checkbox"].checkbox-control {
    @apply w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-2 bg-white shadow-none;
  }

  input[type="checkbox"]:checked.checkbox-control {
    @apply w-4 h-4 text-white bg-gray-100 border-gray-300 rounded-sm focus:ring-purple-500 focus:ring-2 accent-white bg-brand-700 border-brand-700 shadow-none accent-brand-700;
  }

  input[type="checkbox"].checkbox-control:checked::before {
    /* display: none !important; */
    /* content: none !important; */
  }

  input[type="checkbox"]:checked.checkbox-control {
    @apply accent-brand-700;
  }

  .checkbox-control {
    @apply w-4 h-4 bg-white border-gray-300 rounded-sm focus:ring-purple-500 focus:ring-2 shadow-none;
  }
  input[type="checkbox"]:checked::before {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    padding: 0.25rem;
    background-color: white;
    mask: url("data:image/svg+xml;utf8,<svg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L3.5 6.5L1 4' stroke='black' stroke-width='1.6666' stroke-linecap='round' stroke-linejoin='round'/></svg>")
      no-repeat center;
    background-size: contain;
    padding-top: 1rem;
    padding-left: 1.15rem;
  }
  .wrap-break-word {
    overflow-wrap: break-word;
  }
  .period-control {
    @apply p-2 rounded-lg border-solid border-2 border-gray-200 bg-gray-100 text-slate-400 text-center;
  }

  .input-container-col {
    @apply flex flex-col gap-1.5;
  }

  .input-container-row {
    @apply flex flex-row gap-1;
  }

  .button-group-container {
    @apply flex grow flex-row gap-1 items-center justify-evenly rounded-lg border-solid border border-gray-300 bg-gray-100 text-slate-400 text-center;
  }

  .button-group-button {
    @apply rounded-lg grow border-solid p-2 border-gray-100 bg-gray-100 text-gray-500 text-center hover:bg-white hover:text-slate-500 disabled:bg-gray-100 transition-all duration-200 ease-in-out;
  }

  .button-group-button-active {
    @apply rounded-lg grow border-solid p-2 border-gray-100 bg-white text-center shadow-md transition-all duration-200 ease-in-out;
  }

  .button-group-button:disabled {
    @apply rounded-lg grow border-solid p-2 border-gray-100 bg-gray-100 text-gray-300 text-center cursor-not-allowed hover:text-gray-300 transition-all duration-200 ease-in-out;
  }

  .button-group-button-active:disabled {
    @apply rounded-lg grow border-solid p-2 border-gray-100 bg-gray-100 text-gray-500 text-center shadow-md cursor-not-allowed transition-all duration-200 ease-in-out;
  }

  .tabs-group-container {
    @apply flex flex-row text-sm font-medium text-center text-gray-500 border-b border-gray-200 w-fit;
  }

  .tab-element {
    @apply inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-violet-400 hover:border-violet-300;
  }
  .tab-active {
    @apply text-violet-600 border-violet-600;
  }
  .block-stack {
    @apply flex flex-col;
  }
  .inline-stack {
    @apply flex flex-row items-center;
  }
  .inline-stack .input-container-col {
    @apply grow;
  }
  .page-heading {
    @apply text-2xl;
  }
  .servv-page {
    @apply flex flex-row flex-1 h-full min-h-screen pl-8 pb-14 bg-white max-md:pl-1;
  }

  div.collapse-activator {
    @apply w-[10px] hover:cursor-pointer;
  }

  div.servv-logo-collapsed {
    @apply justify-self-start mt-6 ml-[-5px];
    background: left/cover no-repeat
      url("../public/assets/images/servv-logo.png");
    width: 40px;
    height: 40px;
    margin-left: 8px;
  }

  div.servv-logo-png {
    @apply justify-self-start mt-6 ml-2;
    background: left / contain no-repeat
      url("../public/assets/images/servv-logo.png");
    width: 180px;
    height: 40px;
    min-height: 40px;
  }

  .menu-item-title {
    font-family: "Inter";
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    color: rgba(113, 118, 128, 1);
  }
  .menu-icon {
    width: 22px;
    height: 22px;

    stroke: rgba(113, 118, 128, 1);
    stroke-width: 2;

    fill: rgba(0, 0, 0, 0.12);
  }

  .menu-item {
    @apply flex flex-row gap-2 no-underline hover:no-underline hover:cursor-pointer;
    @apply bg-opacity-100;
    font-family: "Inter";
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: rgba(113, 118, 128, 1);
    padding: 8px 12px;
  }

  .wp-admin .servv-sidebar {
    position: fixed;
    top: 32px;

    width: 280px;
    height: calc(100vh - 32px);

    overflow: hidden;
    background-color: rgba(245, 245, 245, 1);
    padding-left: 28px;
    z-index: 20;
  }
  @media screen and (max-width: 1280px) {
    .wp-admin .servv-sidebar {
      width: 210px;
      padding-left: 16px;
    }
  }
  .wp-admin .collapsed-sidebar {
    position: fixed;
    top: 32px;

    width: auto;
    height: calc(100vh - 32px);
    margin-left: 0;
    padding-left: 0;
    overflow: hidden;
    background-color: rgba(245, 245, 245, 1);
    /* padding-left: 28px; */
    z-index: 20;
  }

  .wp-admin #servv-wrap > .flex > main {
    margin-left: 280px;
  }
  @media screen and (max-width: 1280px) {
    .wp-admin #servv-wrap > .flex > main {
      margin-left: 210px;
    }
  }
  @media (max-width: 782px) {
    .wp-admin #servv-wrap > .flex > main {
      margin-left: 52px !important;
    }
  }
  .page-header {
    @apply flex flex-row justify-between w-full items-baseline m-0 p-0;
  }
  .page-action-button {
    @apply flex flex-row border rounded-lg border-gray-300 fill-gray-700 text-gray-700 font-semibold text-sm disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none disabled:fill-gray-700;
  }
  .button-icon {
    @apply w-[20px] text-gray-600 mr-1;
  }

  .primary {
    @apply text-white font-medium disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none disabled:fill-gray-700;
  }
  .primary .button-icon {
    @apply fill-white;
  }
  .primary .button-icon-disabled {
    @apply w-[20px] mr-1 fill-gray-700;
  }
  .button-group-connected {
    @apply flex flex-row gap-0 m-0;
  }
  .connected-button {
    @apply p-2 bg-white border-t border-b border-r border-gray-300 text-gray-700 text-sm font-semibold first:rounded-l-lg first:border-l last:rounded-r-lg;
  }
  .selected-button {
    @apply bg-gray-100;
  }
  .servv-card {
    @apply flex flex-col gap-0 m-0 border rounded-lg border-gray-200 w-full shadow-sm p-4;
  }
  .servv-card .card-header {
    @apply flex flex-col gap-3 w-full border-b border-gray-200 p-4;
  }
  .servv-card .card-header .card-heading {
    @apply flex flex-row flex-1 justify-start gap-4 items-center;
  }
  .servv-card .card-header .card-heading span {
    @apply text-lg text-gray-900 font-semibold;
  }
  .servv-card .card-header .card-heading span.pagination-control-text {
    @apply text-xs text-gray-900 font-regular;
  }
  .servv-card .card-description {
    @apply flex flex-row gap-1 text-sm font-regular text-gray-600;
  }
  .card-header-description-link {
    @apply text-primary-button-bg underline font-semibold;
  }
  .badge {
    @apply min-w-[55px] flex flex-row flex-nowrap border border-gray-300 text-gray-700 rounded-lg py-0.5 px-[0.125rem] text-xs grow-0 items-center justify-center whitespace-nowrap md:text-sm md:text-[0.65rem];
  }

  .badge-icon {
    @apply w-4;
  }
  .badge-small span {
    @apply text-xs font-medium px-md py-xxs inline-flex whitespace-nowrap sm:text-[0.5rem] md:text-[0.65rem];
  }
  .servv-card .card-header .card-heading .badge-small span {
    @apply text-xs font-medium px-md py-xxs inline-flex whitespace-nowrap sm:text-[0.5rem] md:text-[0.65rem];
  }
  .badge-medium span {
    @apply text-sm font-medium px-md py-xxs inline-flex whitespace-nowrap sm:text-[0.5rem] md:text-[0.65rem];
  }
  .badge-large small {
    @apply text-sm font-medium px-lg py-xs whitespace-nowrap sm:text-[0.5rem] md:text-[0.65rem];
  }
  .badge-gray {
    @apply bg-utility-gray-50 border-utility-gray-200 text-utility-gray-700;
  }
  .badge-brand {
    @apply bg-utility-brand-50 border-utility-brand-200 text-utility-brand-700;
  }
  .badge-error {
    @apply bg-utility-error-50 border-utility-error-200 text-utility-error-700;
  }
  .badge-warning {
    @apply bg-utility-warning-50 border-utility-warning-200 text-utility-warning-700;
  }
  .badge-success {
    @apply bg-utility-blue-ligth-50 border-utility-success-200 text-utility-success-700;
  }
  .badge-zoom {
    @apply bg-[#EFF8FF] border-[#B2DDFF] text-[#1D4ED8];
  }
  .badge-info {
    @apply bg-utility-success-50 border-utility-blue-ligth-200 text-utility-blue-ligth-700;
  }
  .badge-gray-blue {
    @apply bg-utility-gray-blue-50 border-utility-gray-blue-200 text-utility-gray-blue-700;
  }
  .badge-blue-light {
    @apply bg-[#F0F9FF] border-[#B9E6FE] text-[#026AA2];
  }

  .badge-infor {
    @apply bg-[#EFF8FF] border-[#B2DDFF] text-[#175CD3];
  }

  .badge-purple {
    @apply bg-[#F4F3FF] border-[#D9D6FE] text-[#5925DC];
  }
  /* ... */
  .badge-pill-outline {
    @apply border bg-white rounded-full;
  }
  .badge-pill-colour {
    @apply rounded-full;
  }
  .badge-colour {
    @apply rounded-lg;
  }
  .badge-modern {
    @apply rounded-lg bg-white;
  }
  .filter-table-headings th {
    @apply px-2 py-2 font-medium text-xs text-gray-600 bg-gray-50
    border-b border-gray-200 text-center
    first:text-left last:text-right
    whitespace-normal break-words
    max-sm:px-1 max-sm:py-1
    max-sm:text-[0.6rem];
  }

  table {
    @apply w-full table-auto border-collapse;
  }
  /* Rounded top corners (header) */
  .filter-table-headings th:first-child {
    @apply rounded-tl-lg;
  }

  .filter-table-headings th:last-child {
    @apply rounded-tr-lg;
  }

  /* Rounded bottom corners (last row) */
  .table-row:last-child td:first-child {
    @apply rounded-bl-lg;
  }

  .table-row:last-child td:last-child {
    @apply rounded-br-lg;
  }

  /* ONLY row separators */
  .table-row td {
    @apply px-2 py-2 text-sm text-gray-700
    border-b border-gray-200
    text-center
    max-md:text-[0.65rem]
    max-sm:text-[0.5rem];
  }

  /* Remove border on last row (optional) */
  .table-row:last-child td {
    @apply border-b-0;
  }

  .table-row td:first-child {
    @apply w-0 whitespace-nowrap text-left font-medium text-gray-900;
  }

  .table-row td:last-child {
    @apply w-0 whitespace-nowrap text-left overflow-visible;
  }

  .table-row td:nth-child(2) {
    @apply text-left;
  }

  .table-row .filter-table-link {
    @apply font-semibold underline cursor-pointer hover:text-primary-button-bg text-left;
  }

  .table-row td:first-child > *,
  .table-row td:last-child > * {
    @apply inline-flex;
  }

  /* ============================= */
  /* EVENTS TABLE BASE */
  /* ============================= */

  .events-table {
    @apply w-full table-fixed min-w-0;
  }

  /* All cells must be shrinkable */
  .events-table th,
  .events-table td {
    @apply min-w-0 overflow-hidden;
  }

  /* ============================= */
  /* HEADINGS */
  /* ============================= */

  .events-table thead th {
    @apply px-2 py-2 font-medium text-xs text-gray-600 bg-gray-50
    border-b border-gray-200 text-center
    whitespace-normal break-words
    max-sm:px-1 max-sm:py-1
    max-sm:text-[0.6rem];
  }

  /* Align first and last headings */
  .events-table thead th:first-child {
    @apply text-left;
  }

  .events-table thead th:last-child {
    @apply text-right;
  }

  /* ============================= */
  /* ROW CELLS */
  /* ============================= */

  .events-table tbody td {
    @apply px-2 py-2 text-sm text-gray-700
    border-b border-gray-200
    text-center
    max-md:text-[0.65rem]
    max-sm:text-[0.5rem];
  }

  /* First column = 40px */
  .events-table th:first-child,
  .events-table td:first-child {
    @apply w-[40px] max-w-[40px] whitespace-nowrap text-left font-medium;
  }

  /* Last column = 40px */
  .events-table th:last-child,
  .events-table td:last-child {
    @apply w-[40px] max-w-[40px] whitespace-nowrap text-left overflow-visible;
  }

  /* Second column left aligned */
  .events-table td:nth-child(2) {
    @apply text-left;
  }

  /* Links */
  .events-table .events-table-link {
    @apply font-semibold underline cursor-pointer hover:text-primary-button-bg;
  }

  /* Prevent flex items from breaking layout */
  .events-table td:first-child > *,
  .events-table td:last-child > * {
    @apply inline-flex;
  }

  /* Bookings table */

  .bookings-table {
    @apply w-full table-fixed min-w-0;
  }

  .bookings-table th,
  .bookings-table td {
    @apply min-w-0 overflow-hidden;
  }

  .bookings-table th {
    @apply text-xs max-sm:text-[0.6rem]
    whitespace-normal break-words
    max-sm:px-1 max-sm:py-1;
  }

  .bookings-table .cell-truncate {
    @apply block min-w-0 truncate max-sm:text-[0.65rem];
  }

  .bookings-table td[data-tooltip] {
    position: relative;
    overflow: visible;
  }

  .bookings-table td[data-tooltip]:hover::after {
    content: attr(data-full);
    position: absolute;
    z-index: 50;
    left: 0;
    top: 100%;
    margin-top: 4px;
    background: #111827;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }
  .bookings-table th:first-child,
  .bookings-table td:first-child {
    @apply w-[40px] max-w-[40px] whitespace-nowrap overflow-hidden;
  }
  .bookings-table .col-order {
    @apply w-[58px] max-w-[58px] whitespace-nowrap overflow-hidden;
  }

  .bookings-table .col-date {
    @apply w-[120px] max-w-[120px] whitespace-nowrap overflow-hidden;
  }

  .bookings-table .col-occurrence,
  .bookings-table .col-paid,
  .bookings-table .col-status {
    @apply w-[120px] max-w-[120px] whitespace-nowrap overflow-hidden;
  }

  .bookings-table .col-actions {
    @apply w-[80px] max-w-[80px] whitespace-nowrap overflow-hidden text-right;
  }

  /* Mobile */
  @media (max-width: 768px) {
    .bookings-table thead {
      @apply hidden;
    }

    .bookings-table tr {
      @apply block mb-3 border-b border-gray-200 bg-white p-3 shadow-sm;
    }
    .bookings-table tr:last-child {
      @apply border-0;
    }

    /* Reset ALL width limits on mobile */
    .bookings-table td,
    .bookings-table th {
      @apply w-auto max-w-none overflow-visible whitespace-normal;
    }

    /* Card cell layout → LEFT aligned */
    .bookings-table td {
      @apply flex flex-col items-start gap-1 py-2 text-left;
    }

    /* Label above value */
    .bookings-table td::before {
      content: attr(data-label);
      @apply font-semibold text-gray-600 text-xs;
    }

    /* Value text */
    .bookings-table td {
      @apply text-sm text-gray-900;
    }

    /* Actions row stays right if needed */
    .bookings-table td:last-child {
      @apply flex-row justify-end items-center border-0;
    }
    .bookings-table th:last-child,
    .bookings-table td:last-child,
    .bookings-table th:nth-last-child(2),
    .bookings-table td:nth-last-child(2),
    .bookings-table th:nth-last-child(3),
    .bookings-table td:nth-last-child(3) {
      @apply w-auto max-w-none whitespace-normal overflow-visible text-left;
    }
    .bookings-table th:first-child,
    .bookings-table td:first-child,
    .bookings-table th:nth-child(2),
    .bookings-table td:nth-child(2) {
      @apply w-auto max-w-none whitespace-normal overflow-visible text-left;
    }
    .bookings-table .cell-truncate {
      @apply block whitespace-normal break-all max-w-full w-full;
    }
  }

  /* table mobile */
  /* @media (max-width: 640px) {
    table,
    thead,
    tbody,
    th,
    tr,
    td {
      display: block;
    }

    thead {
      display: none;
    }

    .table-row {
      @apply mb-3 rounded-lg border border-gray-200 p-2;
    }

    .table-row td {
      @apply flex justify-between items-center
      border-none py-1 px-0;
    }

    .table-row td::before {
      content: attr(data-label);
      @apply font-medium text-gray-500;
    }
  } */

  .registrant {
    @apply py-3 px-1 hover:bg-utility-gray-200 flex flex-row items-center;
  }
  .page-header-description {
    @apply font-regular text-gray-600 text-md;
  }
  .dropdown-icon {
    @apply w-6 fill-gray-700 align-middle;
  }
  .dropdown-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .dropdown-icon-critical {
    @apply dropdown-icon fill-error-700;
  }
  .filter-table-dropdown-container {
    @apply relative;
  }
  .filter-table-dropdown {
    @apply absolute z-10 w-[240px] border rounded-lg border-gray-200 bg-white right-[0.5rem] mt-2 origin-top-right flex flex-col items-start;
  }
  .dropdown-header {
    @apply p-4 text-sm font-semibold text-gray-700 border-b flex flex-col w-full;
  }
  .dropdown-description {
    @apply font-regular wrap-break-word;
  }
  .dropdown-actions {
    @apply p-4 flex flex-col;
  }
  .dropdown-action {
    @apply text-sm text-gray-700 font-medium flex flex-row gap-2 items-center;
  }
  .servv-button-link {
    @apply font-semibold text-sm text-purple-700 no-underline;
  }
  .card-section-heading {
    @apply text-display-xs font-semibold text-gray-900;
  }
  .section-description {
    @apply text-sm font-regular text-gray-600;
  }
  .card-image {
    @apply bg-cover bg-no-repeat bg-center rounded-lg;
  }
  div .card-image {
    @apply bg-no-repeat bg-cover !important;
  }
  .page-content {
    @apply self-center pt-8 flex w-full;
  }
  .badge-image {
    @apply size-4 mr-1 ml-2 mb-[2px] bg-no-repeat bg-contain !important;
  }
  .servv-service-image {
    @apply card-image p-0 m-0 rounded-lg flex flex-col justify-end min-h-[250px];
  }
  .card-content {
    @apply flex flex-col p-4 gap-2;
  }
  .connected-account {
    @apply flex flex-col p-4 h-1/2 max-md:h-full w-full backdrop-blur-xl border-t border-gray-100;
  }
  .connected-account span {
    @apply text-white font-semibold text-sm;
  }
  .connected-account .badge span {
    @apply text-gray-900 font-regular;
  }
  .pagination-container {
    @apply flex flex-row justify-between p-4 bg-gray-50 rounded-b-lg;
  }
  button.pagination-control {
    @apply flex flex-row p-2 gap-2 justify-between items-center border border-gray-300 rounded-lg shadow-sm;
  }
  span.pagination-control-text {
    @apply text-sm;
  }
  button.pagination-control:disabled {
    @apply flex flex-row p-2 gap-2 justify-between items-center border border-gray-300 rounded-lg shadow-sm text-gray-300 fill-gray-300 cursor-not-allowed;
  }
  .pagination-control-icon {
    @apply size-4;
  }
  .annotated-layout {
    @apply grid grid-cols-[2fr_4fr] gap-8 w-full items-start;
  }
  .annotated-layout .section-annotation {
    @apply flex flex-col gap-1;
  }
  .annotated-section-title {
    @apply text-sm text-gray-700 font-semibold;
  }
  .annotated-section-description {
    @apply text-sm font-regular text-gray-700;
  }
  .section-content {
    @apply flex flex-col gap-3;
  }
  #servv-wrap {
    @apply bg-white min-h-screen max-[782px]:ml-0 max-[782px]:pl-0;
  }
  #wpcontent {
    @apply bg-white pl-0;
  }
  .page-content-placeholder {
    @apply flex flex-col gap-4 grow justify-center items-center h-[75vh];
  }
  .page-conetent-placeholder-title {
    @apply text-md text-gray-900 font-semibold;
  }
  .page-conetent-placeholder-description {
    @apply text-sm text-gray-600 font-regular;
  }
  .page-conetent-placeholder-actions {
    @apply flex flex-row gap-4;
  }
  .placeholder-icon {
    @apply size-12;
  }
  .dropdown {
    @apply relative;
  }
  .dropdown-content {
    @apply z-10 bg-white divide-y divide-gray-100 rounded-lg border w-44 absolute right-0 top-12 p-4;
  }
  .dropdown-content ul .input-container-row {
    @apply mb-2;
  }
  .collapsible-header {
    @apply flex flex-row gap-4 mb-2 px-4 py-2 rounded-sm justify-between hover:bg-gray-200 hover:cursor-pointer rounded-[6px];
  }
  .filters-dropdown {
    @apply flex flex-col items-start gap-3 pl-2;
  }
  .filters-dropdown a {
    @apply font-semibold text-md;
  }
  svg.breadcrumbs-icon {
    @apply size-4 fill-gray-300;
  }
  /* Previous */
  .loading {
    @apply blur-lg;
  }

  .date-range-select {
    @apply input-control section-description text-left w-full shadow-sm border-solid border border-gray-300 bg-white;
  }
  .shadow-multi {
    @apply xs-custom inset-top-line inset-outline;
  }
  #servv-on-product-widget {
    @apply mx-auto;
  }
  .servv-tabs li {
    margin-bottom: 0;
  }
  .mobile-cards-container {
    @apply block md:hidden;
  }

  .dashboard-card {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(213, 215, 218, 1);
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.06);
    box-shadow: 0px 1px 3px 0px rgba(10, 13, 18, 0.1);
    margin: 12px 0;
    padding-top: 24px;
    padding-bottom: 40px;
    padding-left: 32px;
    padding-right: 32px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-radius: 16px;
    min-height: calc(100vh - 64px);
    height: auto;
    flex: 1 1 auto;
    /* height: max-content; */
  }
  .servv-dashboard-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
  }

  .servv-dashboard-header.main-dashboard {
    flex-wrap: nowrap;
  }
  @media screen and (max-width: 480px) {
    .dashboard-card {
      max-width: 100%;
      padding-left: 12px;
      padding-right: 16px;
    }
    .servv-dashboard-header.main-dashboard {
      flex-direction: column;
    }
  }

  .servv-dashboard-header > :last-child {
    margin-left: auto;
  }

  .dashboard-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .dashboard-title {
    font-family: "Inter", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
  }

  .dashboard-description {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(113, 118, 128, 1);
  }
  .dashbaord-profile {
    display: flex;
    flex-direction: row;
    gap: 12px;
    min-width: 150px;
    flex-shrink: 0;
  }
  .profile-description {
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
  }
  .profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    align-self: center;
  }

  .profile-name {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: rgba(24, 29, 39, 1);
  }
  .profile-email {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(113, 118, 128, 1);
  }
  .profile-link .view-widget {
    color: rgba(122, 90, 248, 1);
    font-weight: 500;
    cursor: pointer;
  }
  .profile-link .view-widget:hover .profile-link .view-widget:active,
  .profile-link .view-widget:focus {
    color: rgba(122, 90, 248, 1);
    cursor: pointer;
  }
  .new-event-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px;

    width: 164px;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(122, 90, 248, 1);
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    color: rgba(255, 255, 255, 1);

    flex: none;
    order: 2;
    flex-grow: 0;
  }
  @media screen and (max-width: 480px) {
    .new-event-button {
      width: 100%;
    }
  }
  .events-actions-title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: rgba(24, 29, 39, 1);
  }

  .events-filters {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
  }
  @media screen and (max-width: 1080px) {
    .events-filters {
      justify-content: space-between;
      margin-top: 10px;
      margin-left: 0;
    }
  }
  @media screen and (max-width: 480px) {
    .events-filters {
      flex-direction: column;
      width: 100%;
      margin-bottom: 0;
      /* justify-content: space-between; */
      /* margin-top: 10px; */
      /* margin-left: 0; */
    }
  }
  .events-actions-bar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .events-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* flex: 1; */
  }
  .events-actions-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    flex: 1;
  }
  @media screen and (max-width: 1390px) {
    .events-actions-panel {
      flex: 0;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 8px;
    }
  }
  .events-actions-panel > :last-child {
    margin-left: auto;
  }
  @media screen and (max-width: 1080px) {
    .events-actions-panel > :last-child {
      /* flex: 1; */
      margin-right: auto;
      width: 100%;
    }
  }
  @media screen and (max-width: 660px) {
    .events-actions-panel > :last-child {
      /* flex: 1; */
      margin-right: auto;
      width: 100%;
      flex-wrap: wrap;
    }
  }

  @media (max-width: 640px) {
    .events-actions-panel > :last-child {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }
  @media screen and (max-width: 1080px) {
    .events-actions-panel > :last-child {
      margin-left: 0;
    }
  }
  .dashboard-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
  }

  .header-line {
    background: rgba(213, 215, 218, 1);
    width: 100%;
    height: 1px;
  }
  .event-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .event-badges {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
  }
  .event-image-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: rgba(245, 245, 245, 1);
    padding: 24px 8px;
    cursor: pointer;
  }
  .event-image-wrapper {
    border-radius: 12px;
    background: rgba(255, 255, 255, 1);
    padding: 4px;
    border: 2px solid rgba(233, 234, 235, 1);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
    width: 100%;
  }
  @media screen and (max-width: 480px) {
    .event-image-wrapper {
      width: auto;
    }
  }
  .event-image {
    border-radius: 20px;
    background: (245, 245, 245, 1);
    height: 164px;
    width: 244px;
    object-fit: contain;
  }
  .event-description {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }
  .event-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: rgba(24, 29, 39, 1);
  }
  .event-datetime {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(113, 118, 128, 1);
  }
  @media screen and (max-width: 480px) {
    .event-datetime {
      max-width: calc(100% - 48px);
    }
  }

  .event-image-container {
    position: relative;
  }

  .event-card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    z-index: 2;
  }

  .event-card:hover .event-card-actions {
    opacity: 1;
    pointer-events: auto;
  }

  .event-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;

    transition:
      background-color 150ms ease,
      box-shadow 150ms ease,
      transform 150ms ease;
  }

  .event-action-icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
  }

  .event-action-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
  }
  .event-action-btn.view {
    color: rgb(122, 90, 248); 
  }

  .event-action-btn.view:hover {
    background: rgba(122, 90, 248, 0.08);
    color: rgb(122, 90, 248);
    box-shadow: 0 2px 6px rgba(122, 90, 248, 0.18);
  }
  .event-action-btn.edit {
    color: rgb(122, 90, 248);
  }

  .event-action-btn.edit:hover {
    background: rgba(122, 90, 248, 0.12);
    box-shadow: 0 2px 8px rgba(122, 90, 248, 0.28);
    transform: scale(1.05);
  }

  .servv-event-badge {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    padding: 4px 12px;
    border-radius: 16px;
  }
  .badge-success {
    background: rgba(236, 253, 243, 1);
  }
  .badge-info {
    background: rgba(255, 250, 235, 1);
  }
  .badge-brand {
    background: rgba(238, 244, 255, 1);
  }
  .badge-warning {
    background: rgba(255, 250, 235, 1);
  }
  .tabs-container {
    box-sizing: border-box;

    display: flex;
    align-items: center;
    padding: 2px;

    /* width: 618px; */
    height: 44px;

    background: #f5f5f5;
    border: 1px solid #e9eaeb;
    border-radius: 10px;
  }
  @media screen and (max-width: 480px) {
    .tabs-container {
      width: 100%;
      max-width: 100%;
    }
  }
  .tab-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 40px;
    padding: 8px 14px;
    gap: 8px;

    border-radius: 8px;
    border: none;
    background: transparent;

    cursor: pointer;
  }

  .tab-button--active {
    background: #ffffff;
    border: 1px solid #d5d7da;

    box-shadow:
      0px 4px 8px -2px rgba(10, 13, 18, 0.1),
      0px 2px 4px -2px rgba(10, 13, 18, 0.06);
  }
  .tab-button--inactive {
    opacity: 0.5;
  }
  .tab-button-text {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #181d27;
    white-space: nowrap;
  }
  .tab-compact {
    height: 32px;
    padding: 4px 10px;
    gap: 6px;
    border-radius: 6px;
  }

  .tab-compact .tab-button-text {
    font-size: 14px;
    line-height: 18px;
  }
  .collapsible-section-heading {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #181d27;
    white-space: nowrap;
    border-radius: 6px;
  }
  @media screen and (max-width: 480px) {
    .tab-button-text {
      font-size: 13px;
    }
  }

  .tab-button--active .tab-button-text {
    font-weight: 600;
  }

  .tab-button--inactive .tab-button-text {
    font-weight: 500;
  }
  .tab-button {
    min-width: 120px;
  }
  @media screen and (max-width: 1024px) {
    .tab-button {
      height: 36px;
      padding: 6px 10px;
      gap: 6px;

      /* allow shrinking */
      min-width: 0;
    }

    .tab-button-text {
      font-size: 14px;
      line-height: 20px;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  @media screen and (max-width: 480px) {
    .tab-button {
      height: 32px;
      padding: 5px 8px;
      gap: 4px;
      min-width: 0;
    }

    .tab-button-text {
      font-size: 12px;
      line-height: 16px;

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

  @media screen and (max-width: 480px) {
    .tab-button {
      padding: 5px;
      font-size: 13px;
      gap: 2px;
      flex-shrink: 1;
      min-width: unset;
    }
  }

  .datepicker-root {
    position: relative;
    display: inline-block;
  }

  .datepicker-button {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    width: 180px;
    height: 40px;
    padding: 10px 14px;
    color: rgba(113, 118, 128, 1);
    background: #ffffff;
    border: 1px solid rgba(213, 215, 218, 1);
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    font-weight: 600;
    pointer-events: none;
  }
  @media screen and (max-width: 480px) {
    .datepicker-button {
      width: 100%;
    }
  }
  @media screen and (max-width: 480px) {
    .datepicker-root {
      width: 100%;
    }
  }

  .datepicker-icon {
    width: 24px;
    height: 24px;
    color: rgba(113, 118, 128, 1);
    flex-shrink: 0;
  }
  .filter-button {
    font-family: "Inter", sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    height: 40px;
    padding: 10px 14px;

    color: rgba(113, 118, 128, 1);
    background: #ffffff;
    border: 1px solid rgba(213, 215, 218, 1);
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);

    font-weight: 600;
    cursor: pointer;
  }
  @media screen and (max-width: 480px) {
    .filter-button {
      width: 100%;
    }
  }
  @media screen and (max-width: 480px) {
    .servv-dahboard-dropdown {
      width: 100%;
    }
  }

  .filter-button:hover {
    background: #f9fafb;
  }

  .filter-icon {
    width: 24px;
    height: 24px;
    color: rgba(113, 118, 128, 1);
    flex-shrink: 0;
  }

  .datepicker-label {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(113, 118, 128, 1);
  }

  .datepicker-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .datepicker-overlay-input {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;

    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
  .datepicker-root button[aria-label="Clear"],
  .datepicker-root button[type="button"]:has(svg path[d*="M6 18"]) {
    display: none !important;
  }
  .dashboard-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 200px auto;
    width: 100%;
  }
  .dashboard-empty-state-title {
    font-family: "Inter", sans-serif;
    font-size: 30px;
    line-height: 38px;
  }
  .events-pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
  }

  .events-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .events-pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d7d3e5;
    border-radius: 50%;
    background: white;
    color: #818097;
    cursor: pointer;
    transition: all 0.2s;
  }

  .events-pagination__btn:hover:not(:disabled) {
    background: #f5f4f8;
  }

  .events-pagination__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .events-pagination__numbers {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .events-pagination__number {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d7d3e5;
    border-radius: 50%;
    background: white;
    color: rgba(18, 22, 51, 0.5);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }

  .events-pagination__number:hover {
    background: #f5f4f8;
  }

  .events-pagination__number--active {
    background: #d7d3e5;
    border-color: #d7d3e5;
    color: rgba(18, 22, 51, 0.8);
    font-weight: 600;
  }

  .events-pagination__ellipsis {
    color: rgba(18, 22, 51, 0.5);
    font-size: 14px;
    padding: 0 4px;
  }

  .events-pagination__info {
    color: #818097;
    font-size: 14px;
  }

  @media (max-width: 640px) {
    .events-pagination__btn,
    .events-pagination__number {
      min-width: 36px;
      height: 36px;
      font-size: 13px;
    }
  }
  /* ================================
   CREATE EVENT – BASE
================================ */

  .create-event {
    padding: 32px;
    background: #ffffff;
  }

  .create-event__layout {
    display: flex;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
  }

  /* ================================
   SIDEBAR (FIXED – DO NOT MOVE)
================================ */

  .create-event__sidebar {
    position: fixed;
    top: 64px;
    left: 192px;
    /* left: 32px; */
    height: calc(100vh - 96px);
    width: 400px;

    padding: 24px;
    background: #f5f5f5;
    border: 1px solid #d5d7da;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(10, 13, 18, 0.1);

    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */

    overflow: hidden;
    z-index: 20;
    gap: 72px;
  }

  @media (max-width: 1370px) {
    .create-event__sidebar {
      width: 300px;
      max-width: calc(100vw - 36px);
      height: calc(100vh - 96px);
      gap: 24px;
    }
  }
  @media (max-width: 960px) {
    .create-event__sidebar {
      left: 36px;
    }
  }
  @media (max-width: 786px) {
    .create-event__sidebar {
      left: 36px;
    }
  }
  @media (max-width: 590px) {
    .create-event__sidebar {
      left: 5px;
    }
  }
  .create-event__sidebar.marketplace {
    left: 36px;
  }
  @media (max-width: 960px) {
    .create-event__sidebar.marketplace {
      left: 0;
    }
  }

  @media (max-width: 480px) {
    .create-event__sidebar {
      display: none;
    }
  }

  /* ================================
   STEPPER LAYOUT
================================ */

  .sidebar__stepper {
    display: grid;
    flex: 1;
  }

  .stepper__row {
    display: grid;
    grid-template-columns: 40px 1fr; /* icon | text */
    column-gap: 16px;
    align-items: start;
  }

  /* Icon box (40x40) */

  .icon-box {
    width: 40px;
    height: 40px;
    padding: 8px;

    display: grid;
    place-items: center;

    background: #ffffff;
    border-radius: 8px;
    box-shadow:
      0px 1px 3px rgba(10, 13, 18, 0.1),
      0px 1px 2px rgba(10, 13, 18, 0.06);

    opacity: 0.5;
  }
  .icon-box__svg {
    width: 24px;
    height: 24px;
    display: block;
  }

  /* Tall icons */
  .icon--tall {
    transform: translateY(1px);
  }

  /* Wide icons */
  .icon--wide {
    transform: translateY(0.5px);
  }

  /* Diagonal / tool icons */
  .icon--angled {
    transform: translate(-0.5px, 0.5px);
  }
  .icon--left {
    transform: translate(1px, 1px);
  }
  .icon-box.is-active {
    opacity: 1;
  }

  .icon-box__svg {
    width: 24px;
    height: 24px;
    display: block;
    overflow: visible;
  }

  /* Vertical connector */
  .icon-line {
    width: 1px;
    height: 38px;
    background: #d5d7da;
    margin: 0 auto;
  }

  /* ================================
   STEPPER TEXT COLUMN
================================ */
  .sidebar__stepper {
    display: grid;
  }

  .stepper__row {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    align-items: start;
  }

  .stepper-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0.5;
  }
  @media screen and (max-width: 915px) {
  }

  .stepper-text.is-active {
    opacity: 1;
  }

  .stepper-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
  }

  .stepper-subtitle {
    font-size: 14px;
    line-height: 20px;
    color: #717680;
  }

  @media (max-width: 696px) {
    .logo-wrapper {
      width: 40px;

      margin-bottom: 20px;
      overflow: hidden;
      position: relative;
    }

    .logo-wrapper .logo-bg {
      background-position: 40px center;
      background-size: auto 100%;
    }
    .sidebar__logo .servv-logo-png {
      width: 40px;
      height: 40px;
    }

    div.servv-logo-png {
      margin-left: 0;
    }

    .create-event__sidebar {
      width: auto;
      padding: 10px;
      align-items: center;
    }

    .sidebar__stepper {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .sidebar__stepper > * {
      align-items: center;
    }
    .stepper__row {
      display: flex;
      align-items: center;
    }

    .stepper__row .stepper-text {
      display: none;
    }
  }

  /* ================================
   CONTENT (OFFSET FOR FIXED SIDEBAR)
================================ */

  .create-event__content {
    margin-left: 432px; /* 400 sidebar + 32 gap */
    padding: 32px 0 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .create-event__content.marketplace {
    /* margin-left: calc(400px + 32px); */
    /* margin-right: auto; */
    padding: 32px 0 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  @media screen and (max-width: 1370px) {
    .create-event__content {
      margin-left: 332px;
    }
  }
  @media screen and (max-width: 690px) {
    .create-event__content {
      margin: 0 auto;
      max-width: 100%;
      width: 100%;
    }
  }

  @media screen and (max-width: 480px) {
    .create-event__content {
      margin-left: 0;
      max-width: 100%;
      width: 100%;
    }
  }

  .content__header {
    text-align: center;
    margin-bottom: 40px;
  }

  .header__icon {
    font-size: 40px;
    margin-bottom: 16px;
  }

  .content__body {
    flex: 1;
    width: 680px;
  }

  .content__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .calendar-placeholder,
  .time-placeholder {
    height: 426px;
    border: 1px solid #d5d7da;
    border-radius: 8px;
    background: #ffffff;
  }

  /* ================================
   FOOTER
================================ */

  .content__footer {
    width: 680px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
  }

  .btn-primary {
    background: #7a5af8;
    color: #ffffff;
    padding: 10px 32px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
  }

  .btn-secondary {
    background: transparent;
    color: #535862;
    border: none;
    font-weight: 600;
  }

  .btn-ghost {
    background: #ffffff;
    border: 1px solid #d5d7da;
    padding: 10px 16px;
    border-radius: 8px;
  }
  /* Bottom link container */
  .sidebar__bottom-link {
    /* margin: 0 auto; */
    width: 136px;
    height: 40px;

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

    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;

    cursor: pointer;
  }
  @media screen and (max-width: 690px) {
    .sidebar__bottom-link {
      display: flex;
      flex-direction: row;
      justify-items: center;
      width: auto;
    }
    .bottom-link__text {
      display: none;
    }
  }

  /* Icon */
  .bottom-link__icon {
    width: 40px;
    height: 40px;
    padding: 8px;
    display: block;
  }

  /* Text */
  .bottom-link__text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #717680;
  }
  .sidebar__bottom-link:hover .bottom-link__text {
    color: #000;
  }

  .sidebar__bottom-link:hover .bottom-link__icon {
    stroke: #000;
  }
  /* Logo background */
  .step__wrapper {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    /* margin-left: auto; */
  }
  .step__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .header__icon {
    width: 40px;
    height: 40px;
    color: rgba(24, 29, 39, 1);
  }
  .step__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }
  .step__header_title {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: rgba(0, 0, 0, 1);
  }
  .step__description {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: rgba(113, 118, 128, 1);
  }
  .step__content_date {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }

  @media screen and (max-width: 1370px) {
    .step__content_date {
      grid-template-columns: 1fr;
    }
  }

  .step__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 384px;
  }

  .step__content_delimeter {
    width: 100%;
    height: 1px;
    border-top: 1px solid rgba(213, 215, 218, 1);
    margin-bottom: 20px;
  }
  .step__content_date > :nth-child(odd) {
    grid-column: 1;
  }

  .step__content_date > :nth-child(even) {
    grid-column: 2;
  }
  @media screen and (max-width: 1280px) {
    .step__content_date > :nth-child(even) {
      grid-column: 1;
    }
  }
  .step__content_block {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .step__content_title {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: rgba(65, 70, 81, 1);
  }
  /* Calendar Inline */
  /* =========================
   Date picker menu (card)
========================= */
  .date-picker-menu {
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* calendar inside */
    align-items: flex-start;
    padding: 20px 24px;
    gap: 16px;

    width: 328px;
    min-height: 384px;

    background: #ffffff;
    border: 1px solid #d5d7da;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
  }
  @media screen and (max-width: 1280px) {
    .date-picker-menu {
      width: 100%;
    }
  }

  /* =========================
   DayPicker base layout
   (your markup uses .rdp-root)
========================= */
  .date-picker-menu .rdp-root,
  .date-picker-menu .rdp {
    width: 100%;
  }

  /* Months wrapper */
  .date-picker-menu .rdp-months {
    width: 100%;
  }

  /* =========================
   Header / nav
========================= */
  .date-picker-menu .rdp-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
  }

  /* Caption (December 2025) */
  .date-picker-menu .rdp-month_caption {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: -53px;
    height: 40px;
    margin-bottom: 20px;
  }

  .date-picker-menu .rdp-caption_label {
    font-family:
      Inter,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Arial,
      sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #414651;
  }

  /* Prev/Next buttons */
  .date-picker-menu .rdp-button_previous,
  .date-picker-menu .rdp-button_next {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .date-picker-menu .rdp-button_previous:hover,
  .date-picker-menu .rdp-button_next:hover {
    background: #f5f5f5;
  }

  /* Chevron */
  .date-picker-menu .rdp-chevron {
    width: 20px;
    height: 20px;
    fill: #717680;
  }

  /* =========================
   Weekdays row
========================= */
  .date-picker-menu .rdp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 40px);
    gap: 0;
    margin-bottom: 4px;
  }

  .date-picker-menu .rdp-weekday {
    font-family:
      Inter,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Arial,
      sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #717680;
    text-align: center;
  }

  /* =========================
   Days grid
========================= */
  .date-picker-menu .rdp-month_grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  @media screen and (max-width: 1280px) {
    .date-picker-menu .rdp-month_grid {
      width: auto;
      margin: 0 auto;
    }
  }

  .date-picker-menu .rdp-weeks .rdp-week {
    display: grid;
    grid-template-columns: repeat(7, 40px);
    height: 40px;
  }

  .date-picker-menu .rdp-day {
    width: 40px;
    height: 40px;
    padding: 0;
  }

  /* Day button (circle) */
  .date-picker-menu .rdp-day_button {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 0;
    background: transparent;

    font-family:
      Inter,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Arial,
      sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #414651;

    cursor: pointer;
  }

  /* Hover */
  .date-picker-menu .rdp-day_button:hover {
    background: #f5f5f5;
  }

  /* Today */
  .date-picker-menu .rdp-today .rdp-day_button {
    background: #f5f5f5;
    font-weight: 500;
  }

  /* Selected */
  .date-picker-menu .rdp-selected .rdp-day_button {
    background: #6941c6;
    color: #ffffff;
    font-weight: 500;
  }

  /* Outside month */
  .date-picker-menu .rdp-outside .rdp-day_button {
    color: #94a3b8;
  }

  /* Focus */
  .date-picker-menu .rdp-day_button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(105, 65, 198, 0.6);
  }

  .date-picker-menu .rdp-day_button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
  .servv-select__control {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 8px;

    width: 328px;
    height: 44px;

    background: #ffffff;
    border: 1px solid #d5d7da;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;

    position: relative;
  }
  @media screen and (max-width: 1280px) {
    .step__content_date .servv-select__control {
      width: 100%;
    }
  }
  .servv-select__native {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    border: 0;
    outline: none;
    background: transparent;

    width: 100%;
    height: 100%;

    font-family:
      Inter,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Arial,
      sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    color: #717680;
    cursor: pointer;
  }
  .servv-select__icon {
    width: 20px;
    height: 20px;

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

    color: #717680;
    pointer-events: none;
  }
  .servv-select__label {
    display: block;
    margin-bottom: 6px;

    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #414651;
  }
  .servv-select__control:focus-within {
    border-color: #6941c6;
    box-shadow: 0 0 0 3px rgba(105, 65, 198, 0.15);
  }
  .servv-select--disabled {
    background: #f9fafb;
  }

  .servv-select--disabled .servv-select__native {
    color: #94a3b8;
    cursor: not-allowed;
  }
  /* REMOVE focus ring */
  .servv-select__control:focus-within {
    border-color: #d5d7da;
    box-shadow: none;
  }

  /* Remove native focus outline */
  .servv-select__native:focus {
    outline: none;
  }
  .servv-select__native {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
  }
  .servv-select__icon {
    pointer-events: none;
  }
  /* ===============================
   REMOVE ALL SELECT FOCUS STYLES
=============================== */

  /* Native select focus */
  .servv-select__native:focus,
  .servv-select__native:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Wrapper focus (WP admin adds this) */
  .servv-select__control:focus,
  .servv-select__control:focus-within,
  .servv-select__control:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: #d5d7da !important;
  }

  /* WP admin global overrides */
  .servv-select *:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  /* ===============================
   REMOVE NATIVE SELECT ARROW
=============================== */

  .servv-select__native {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background: transparent !important;
    background-image: none !important;
  }

  /* Edge / IE arrow */
  .servv-select__native::-ms-expand {
    display: none;
  }
  .servv-select__control {
    position: relative;
  }

  .servv-select__icon {
    position: absolute;
    right: 14px;
    pointer-events: none;
  }
  /* Inputs */
  .servv-input {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 8px;
    position: relative;
    overflow: visible;
    height: 44px;

    background: #ffffff;
    border: 1px solid #d5d7da;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
  }
  .servv-input.input {
    height: 44px;
  }

  .servv-input.textarea {
    height: auto;
    align-items: flex-start;
  }

  .servv-input__content {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    /* height: 24px; */
  }

  .servv-input__content.input {
    align-items: center;
    height: 24px;
  }

  .servv-input__content.textarea {
    align-items: flex-start;
    height: auto;
  }
  .servv-input__native {
    width: 100%;
    height: 24px;

    border: 0;
    outline: none;
    background: transparent;

    font-family:
      Inter,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Arial,
      sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;

    color: #717680;
  }

  .servv-input.textarea .servv-input__native {
    height: auto;
    min-height: 96px;
    resize: vertical;
  }
  .servv-input__native--left {
    text-align: left;
  }

  .servv-input__native--center {
    text-align: center;
  }

  .servv-input__native--right {
    text-align: right;
  }
  .servv-input:focus-within,
  .servv-input__native:focus,
  .servv-input__native:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  .servv-input__native,
  .servv-input__native:focus,
  .servv-input__native:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  .servv-input:has(input:disabled) {
    background: #f9fafb;
  }

  .servv-input__native:disabled {
    color: #94a3b8;
    cursor: not-allowed;
  }
  .servv-input--error {
    border-color: #ef4444; /* red-500 */
  }

  .servv-input--error:focus-within {
    border-color: #dc2626; /* red-600 */
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
  }

  /* ===============================
   Step – Time control (inline)
=============================== */

  .step__time_control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* Center text inside time inputs */
  .step__time_control input {
    text-align: center;
    padding: 0;
    border: none;
  }

  /* Remove ALL focus outlines */
  .step__time_control input:focus,
  .step__time_control input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Prevent browser number spinners (safety) */
  .step__time_control input[type="number"]::-webkit-inner-spin-button,
  .step__time_control input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .step__time_control input[type="number"] {
    -moz-appearance: textfield;
  }
  /* ===============================
   Time period (AM / PM)
=============================== */

  .servv-time-period {
    box-sizing: border-box;
    height: 44px;
    min-width: 48px;

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

    padding: 10px 12px;

    font-family:
      "Inter",
      system-ui,
      -apple-system,
      sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    color: #414651;
    background: #ffffff;

    border: 1px solid #d5d7da;
    border-radius: 8px;

    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);

    cursor: pointer;
  }

  /* Hover */
  .servv-time-period:hover {
    background: #f5f5f5;
  }

  /* Disabled */
  .servv-time-period:disabled {
    color: #94a3b8;
    background: #f9fafb;
    cursor: not-allowed;
  }

  /* Remove focus outline */
  .servv-time-period:focus,
  .servv-time-period:focus-visible {
    outline: none !important;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  }
  /* ===============================
   Recurrence radio group
=============================== */

  .servv-recurrence-group {
    display: flex;
    align-items: center;
    gap: 24px;

    width: 328px;
    height: 44px;
  }

  /* Radio wrapper (label) */
  .servv-radio {
    display: flex;
    align-items: center;
    gap: 12px;

    cursor: pointer;
    position: relative;
  }

  .servv-radio::before,
  .servv-radio::after {
    content: none !important;
    display: none !important;
  }

  .servv-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  /* Custom radio base */
  .servv-radio__control {
    width: 20px;
    height: 20px;
    border-radius: 9999px;

    box-sizing: border-box;
    border: 1px solid #d5d7da;
    background: #ffffff;

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

  /* Checked outer */
  .servv-radio input:checked + .servv-radio__control {
    background: #f9f5ff;
    border-color: #6941c6;
  }

  /* Inner dot */
  .servv-radio input:checked + .servv-radio__control::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #6941c6;
  }

  /* Label text */
  .servv-radio__label {
    font-family:
      "Inter",
      system-ui,
      -apple-system,
      sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #414651;
    user-select: none;
  }

  /* Disabled state */
  .servv-radio input:disabled + .servv-radio__control {
    background: #f9fafb;
    border-color: #e5e7eb;
  }

  .servv-radio input:disabled ~ .servv-radio__label {
    color: #94a3b8;
  }

  /* Disabled cursor */
  .servv-radio:has(input:disabled) {
    cursor: not-allowed;
  }

  /* Root frame */
  .checkbox-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;

    height: 24px;
    cursor: pointer;
    user-select: none;
  }

  /* Hide native checkbox */
  .checkbox-item__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* Checkbox base (square) */
  .checkbox-item__box {
    width: 20px;
    height: 20px;

    box-sizing: border-box;
    border-radius: 4px; /* square with subtle rounding */

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

    background: #ffffff;
    border: 1px solid #d5d7da; /* Gray/300 */

    color: #6941c6; /* Brand/700 for checkmark */
  }

  /* Checked state */
  .checkbox-item__input:checked + .checkbox-item__box {
    background: #f9f5ff; /* Brand/50 */
    border-color: #6941c6; /* Brand/700 */
  }

  /* Checkmark */
  .checkbox-item__check {
    color: #6941c6; /* Brand/700 */
  }

  /* Label */
  .checkbox-item__label {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;

    color: #414651; /* Gray/700 */
  }

  /* Disabled */
  .checkbox-item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .servv_input {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* wrapper */
  .servv_input__control {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    padding: 10px 14px;
    gap: 8px;
    width: 100%;

    background: #ffffff;
    border: 1px solid #d5d7da;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
  }

  /* input / textarea */
  .servv_input__native {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;

    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #414651;

    min-height: 120px;
    resize: vertical;

    display: block;
  }
  .servv_input__control.textarea {
    align-items: flex-start;
  }

  /* placeholder */
  .servv_input__native::placeholder {
    color: #717680;
  }

  /* disabled */
  .servv_input--disabled {
    opacity: 0.6;
    pointer-events: none;
  }
  /* upload */
  .servv_upload {
    box-sizing: border-box;
    width: 100%;
    height: 126px;
    padding: 12px;
    border: 1px dashed #d5d7da;
    border-radius: 8px;
    background: #fafafa;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .servv_upload__icon {
    width: 40px;
    height: 40px;
    border-radius: 28px;
    background: #f5f5f5;
    color: rgba(113, 118, 128, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .servv_upload__text {
    display: flex;
    gap: 4px;
    font-size: 14px;
    align-items: baseline;
  }

  .servv_upload__action {
    background: none;
    border: none;
    color: #7a5af8;
    font-weight: 600;
    cursor: pointer;
  }

  .servv_upload__hint,
  .servv_upload__support {
    color: #717680;
    font-size: 12px;
  }

  /* checkboxes */
  .servv_checkbox_row {
    display: flex;
    gap: 24px;
  }

  .servv_checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: #414651;
  }

  .servv_checkbox input {
    width: 20px;
    height: 20px;
  }
  /* wrapper */
  .servv_tickets {
    gap: 24px;
  }

  /* card */
  .servv_ticket_card {
    border: 1px solid #e9eaeb;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
  }

  .servv_ticket_card--active {
    border-color: #7f56d9;
  }

  .servv_ticket_card__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .servv_ticket_card__check {
    width: 20px;
    height: 20px;
    background: #7f56d9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .servv_ticket_card__count {
    display: flex;
    gap: 6px;
    align-items: baseline;
  }

  /* quantity */
  .servv_ticket_quantity {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .servv_ticket_quantity__input {
    border: 1px solid #d5d7da;
    border-radius: 8px;
    padding: 10px 14px; /* IMPORTANT */
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .servv_ticket_quantity__input input.servv_ticket_quantity__field {
    border: none !important;
    box-shadow: none !important;
    outline: none;
    background: transparent;
    border-radius: 0;
  }
  .servv_ticket_quantity__input input.servv_ticket_quantity__field:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none;
  }
  .servv_ticket_quantity__field::-webkit-inner-spin-button,
  .servv_ticket_quantity__field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .servv_ticket_quantity__field {
    -moz-appearance: textfield;
  }

  .servv_ticket_quantity__input button {
    background: none;
    border: none;
    cursor: pointer;
  }

  .servv_ticket_quantity__placeholder {
    color: #717680;
  }

  .servv_ticket_quantity__hint {
    font-size: 14px;
    color: #717680;
    text-align: center;
    word-break: break-all;
    max-width: 375px;
  }

  /* availability */
  .servv_ticket_availability {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .servv_ticket_availability__options {
    display: flex;
    gap: 24px;
  }

  /* footer */
  .servv_tickets__footer {
    display: flex;
    justify-content: space-between;
  }
  .servv_ticket_quantity__field {
    width: 100%;
    text-align: center;
    border: none;
    outline: none;
    background: transparent;

    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #414651;
  }

  .servv_ticket_quantity__field::placeholder {
    color: #717680;
  }
  .servv_ticket_quantity__input button {
    all: unset;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    outline: none;
    cursor: pointer;

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

  .servv_ticket_quantity__input button:focus,
  .servv_ticket_quantity__input button:focus-visible,
  .servv_ticket_quantity__input button:active {
    outline: none;
    box-shadow: none;
  }
  .servv_ticket_quantity__input button::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  .servv_ticket_quantity__input svg {
    display: block;
    stroke: #717680;
  }

  .servv_ticket_quantity__input button:focus-visible {
    outline: 2px solid #7a5af8;
    outline-offset: 2px;
  }

  /* Buttons */
  /* Right actions container */
  .servv_actions {
    justify-self: flex-end;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-items: flex-end;
    gap: 16px;
    margin-top: auto;
    /* width: 251px; */
    height: 44px;
    /* margin: 0 auto; */
    margin-left: auto;
    /* padding-top: 24px; */
  }

  /* Base button */
  .servv_button {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 44px;
    border-radius: 8px;

    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;

    cursor: pointer;
    border: none;
    padding: 0;
  }

  /* Secondary button (Cancel) */
  .servv_button--secondary {
    /* width: 100px; */
    width: auto;
    padding: 10px 16px;

    background: #ffffff;
    border: 1px solid #d5d7da;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    color: #414651;
  }

  /* Primary button */
  .servv_button--primary {
    /* width: 135px; */
    width: auto;
    padding: 10px 32px;

    background: #7a5af8;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    color: #ffffff;
  }
  .servv_button--primary:disabled {
    background: #d0d5dd; /* muted gray */
    color: #98a2b3; /* softer text */
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
  }

  .servv_button--primary:disabled:hover {
    background: #d0d5dd; /* muted gray */
    color: #98a2b3; /* softer text */
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.85;
  }

  /* Danger button (Delete / Revert) */
  .servv_button--sm {
    height: 32px; /* ↓ from 44px */
    padding: 6px 12px;

    font-size: 14px; /* ↓ from 16px */
    line-height: 20px;
    border-radius: 6px;
  }

  /* Danger button */
  .servv_button--danger {
    background: #d92d20;
    border: 1px solid #b42318;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    color: #ffffff;
  }

  .servv_button--danger:hover {
    background: #b42318;
  }

  .servv_button--danger:active {
    background: #912018;
  }

  /* Hover states (optional but recommended) */
  .servv_button--secondary:hover {
    background: #f9fafb;
  }

  .servv_button--primary:hover {
    background: #6b4ce6;
  }
  .servv_button--md {
    height: 40px;
    padding: 8px 24px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 8px;
  }
  @media screen and (max-width: 480px) {
    .servv_button--md {
      font-size: 12px;
      padding: 6px 10px;
    }
  }
  .servv_button--primary {
    background: #7a5af8;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    color: #ffffff;
    border: none;
  }

  .servv_button--primary:hover {
    background: #6b4ce6;
  }

  /* remove focus outline */
  .servv_input__native:focus,
  .servv_input__native:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  .servv_input__native:focus,
  .servv_input__native:focus-visible,
  .servv_input__native textarea:focus,
  .servv_input__native textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  .servv-input__native--error {
    border-color: #ef4444 !important;
    outline: none;
  }

  .servv-input__native--error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
  }
  .servv-input__error-text {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    color: #ef4444;
  }
  .upload-bars {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    height: 6px;
  }

  .upload-bars span {
    flex: 1;
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #9333ea);
    border-radius: 4px;
    opacity: 0.3;
    animation: uploadPulse 1.2s ease-in-out infinite;
  }

  .upload-bars span:nth-child(2) {
    animation-delay: 0.2s;
  }
  .upload-bars span:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes uploadPulse {
    0% {
      opacity: 0.3;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.3;
    }
  }
  .icon-button-purple {
    width: 40px;
    height: 40px;
    padding: 0;

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

    background: transparent;
    border: none;
    border-radius: 9999px;

    cursor: pointer;
  }
  .icon-purple {
    width: 22px;
    height: 22px;

    stroke: #9b25f8;
    fill: none;

    filter: drop-shadow(0px 4px 6px rgba(155, 37, 248, 0.35));
  }
  .icon-button-purple:hover .icon-purple {
    filter: drop-shadow(0px 6px 10px rgba(155, 37, 248, 0.45));
  }

  .icon-button-purple:active .icon-purple {
    filter: drop-shadow(0px 2px 4px rgba(155, 37, 248, 0.5));
  }
  .icon-button-purple:hover:not(:disabled) .icon-purple {
    filter: drop-shadow(0px 6px 10px rgba(155, 37, 248, 0.45));
  }

  .icon-button-purple:active:not(:disabled) .icon-purple {
    filter: drop-shadow(0px 2px 4px rgba(155, 37, 248, 0.5));
  }

  /* Disabled */
  .icon-button-purple:disabled {
    cursor: not-allowed;
  }

  .icon-button-purple:disabled .icon-purple {
    opacity: 0.4;
    filter: none;
  }
  .icon-button-danger {
    width: 40px;
    height: 40px;
    padding: 0;

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

    background: transparent;
    border: none;
    border-radius: 9999px;

    cursor: pointer;
  }

  /* ICON */
  .icon-danger {
    width: 22px;
    height: 22px;

    stroke: #ef4444; /* red-500 */
    fill: none;

    /* filter: drop-shadow(0px 4px 6px rgba(239, 68, 68, 0.35)); */
    transition:
      filter 0.15s ease,
      opacity 0.15s ease;
  }

  /* Hover / active */
  .icon-button-danger:hover .icon-danger {
    filter: drop-shadow(0px 6px 10px rgba(239, 68, 68, 0.45));
  }

  .icon-button-danger:active .icon-danger {
    filter: drop-shadow(0px 2px 4px rgba(239, 68, 68, 0.5));
  }
  .servv_ticket_add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 6px 10px;
    border: none;
    background: transparent;

    cursor: pointer;
    user-select: none;

    color: rgba(122, 90, 248, 1);
    font-weight: 500;
    font-size: 14px;
  }

  .servv_ticket_add svg path {
    stroke: currentColor !important;
  }

  /* Hover / active */
  .servv_ticket_add:hover:not(:disabled) {
    opacity: 0.85;
  }

  .servv_ticket_add:active:not(:disabled) {
    transform: translateY(1px);
  }

  /* Disabled state */
  .servv_ticket_add:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    color: rgba(122, 90, 248, 1);
  }

  .servv_ticket_add:disabled svg,
  .servv_ticket_add:disabled .icon {
    color: rgba(122, 90, 248, 1);
  }

  .servv_ticket_card__remove {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 10px;
    border: none;
    background: transparent;

    cursor: pointer;
    user-select: none;

    color: rgba(220, 53, 69, 1); /* red */
    font-weight: 500;
    font-size: 14px;
  }

  /* 🔑 Override hard-coded SVG stroke */
  .servv_ticket_card__remove svg path {
    stroke: currentColor !important;
  }

  /* Hover */
  .servv_ticket_card__remove:hover:not(:disabled) {
    opacity: 0.85;
  }

  /* Disabled */
  .servv_ticket_card__remove:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .servv_ticket_sales_block {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* One row = date + time */
  .servv_datetime_row {
    display: grid;
    grid-template-columns: 204px 180px;
    gap: 16px;
    align-items: end;
    overflow: visible;
  }
  .servv_datetime_col {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
    gap: 6px;
  }
  .servv_field_label {
    display: block;
    margin-bottom: 6px;

    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #374151; /* gray-700 */
  }
  /* Date picker input */
  .servv_datetime_row input[type="text"],
  .servv_datetime_row input[type="number"] {
    height: 44px;
    font-size: 14px;
    font-family: Inter, system-ui, sans-serif;
  }

  /* Time input internal fields */
  .servv_datetime_row [class*="time"] input {
    height: 44px;
    font-size: 14px;
    font-family: Inter, system-ui, sans-serif;
  }
  .servv_datetime_row [class*="time"] {
    display: flex;
    /* align-items: center; */
    gap: 6px;
  }
  input.servv-input__native.servv-input__native--center {
    height: auto;
    border: none;
  }

  .servv-create-form-close {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 32px;
    height: 32px;

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

    border-radius: 50%;
    cursor: pointer;
    z-index: 10;

    transition:
      background-color 0.2s ease,
      transform 0.15s ease;
  }

  .servv-create-form-close:hover {
    background-color: rgba(0, 0, 0, 0.06);
    transform: scale(1.05);
  }

  .servv-create-form-close-icon {
    pointer-events: none;
  }

  .customize-list .section-description {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
  }
  /* Table should size columns by content */
  /* HEADER: centered (this already works) */
  .filters-page-table thead th {
    text-align: center;
  }

  /* BODY default: left */
  .filters-page-table tbody td {
    text-align: left;
  }

  /* FIRST column: left */
  .filters-page-table tbody td:first-child > * {
    justify-content: flex-start;
  }

  /* SECOND column: center */
  .filters-page-table tbody td:nth-child(2) > * {
    justify-content: left;
  }

  /* LAST column: right (buttons) */
  .filters-page-table tbody td:last-child > * {
    justify-content: flex-end;
  }
  /* HEADER */
  .filters-page-table thead th {
    text-align: center !important;
    width: fit-content;
  }
  .filters-page-table thead:first {
    max-width: unset;
  }
  .filters-page-table thead th:first-child {
    white-space: nowrap;
  }

  /* BODY */
  .filters-page-table tbody td {
    text-align: left;
  }
  .filters-page-table tbody :nth-child(2) {
    text-align: left;
    padding-left: 40px;
  }
  @media screen and (max-width: 480px) {
    .filters-page-table tbody :nth-child(2) {
      text-align: left;
      padding-left: unset;
    }
  }

  .filters-page-table tbody td:last-child {
    text-align: right;
  }

  .icon-box.is-completed {
    background: #12b76a;
    border-color: #12b76a;
  }

  .stepper-text.is-completed .stepper-title {
    color: #027a48;
  }
  .settings-icon {
    width: 24px;
  }

  .hover-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    padding: 4px 10px;
    border-radius: 999px;
    color: #000;
    box-shadow: 0 1px 4px rgba(122, 90, 248, 0.18);
    transition:
      background-color 180ms ease,
      box-shadow 180ms ease,
      color 180ms ease;
    width: fit-content;
  }

  .hover-badge {
    cursor: pointer;
  }
  .hover-badge:focus {
    box-shadow: 0 1px 4px rgba(122, 90, 248, 0.18);
    outline: none;
  }

  .hover-badge:hover {
    /* background-color: rgba(122, 90, 248, 0.75); */
    color: rgb(122, 90, 248);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(122, 90, 248, 0.18);
  }

  .badge-short {
    max-width: 80px;
    width: auto;
    margin: 0 auto;
  }
  /* Steps changes */
  .step-content-wrapper {
    position: relative;
    overflow: visible;
  }

  .step-slide {
    animation: stepSlideIn 280ms ease;
  }

  @keyframes stepSlideIn {
    from {
      opacity: 0;
      transform: translateX(24px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* ===============================
   OVERLAY
================================ */
  .servv-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);

    opacity: 0;
    animation: modalFadeIn 180ms ease forwards;
  }

  .servv-modal-overlay.closing {
    animation: modalFadeOut 160ms ease forwards;
  }

  /* ===============================
   MODAL WRAPPER (NO UI!)
================================ */
  .servv-modal {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    transform: translateY(24px) scale(0.98);
    animation: modalSlideIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  .servv-modal.closing {
    animation: modalSlideOut 160ms ease forwards;
  }

  /* ===============================
   ANIMATIONS
================================ */
  @keyframes modalFadeIn {
    to {
      opacity: 1;
    }
  }

  @keyframes modalFadeOut {
    to {
      opacity: 0;
    }
  }

  @keyframes modalSlideIn {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes modalSlideOut {
    to {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
    }
  }

  .settings-slide {
    position: relative;
    width: 100%;
  }
  .settings-card {
    transition:
      transform 0.25s ease,
      opacity 0.25s ease;
  }

  /* ENTER animation */
  .settings-edit-enter {
    animation: slideIn 0.25s ease forwards;
  }

  /* EXIT animation */
  .settings-edit-exit {
    animation: slideOut 0.25s ease forwards;
  }

  @keyframes slideIn {
    from {
      transform: translateX(40px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideOut {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(40px);
      opacity: 0;
    }
  }
  .registrants-centered {
    margin-left: 0 !important;
    margin: 0 auto !important;
  }

  /* ─── Calendar Page ─────────────────────────────────────── */
  .cal-card {
    gap: 0;
    padding-bottom: 40px;
  }

  .cal-header {
    margin-bottom: 16px;
  }

  .cal-divider {
    margin-bottom: 24px;
  }

  .cal-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }
  @media (min-width: 768px) {
    .cal-controls {
      flex-direction: row;
      align-items: center;
    }
  }

  .cal-search-wrap {
    min-width: 120px;
    flex-shrink: 1;
  }

  .cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 8px;
  }

  .cal-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: #555;
    flex-shrink: 0;
    padding: 0 4px;
  }

  .cal-nav-title {
    font-weight: 600;
    font-size: 16px;
    min-width: 0;
    text-align: center;
    color: rgba(24, 29, 39, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 2px;
  }

  .cal-right-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 1;
    min-width: 0;
  }

  .cal-clear-btn {
    color: rgba(122, 90, 248, 1);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .cal-grid {
    display: grid;
    border: 1px solid #e5e7eb;
    border-right: none;
    border-bottom: none;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .cal-weekday-cell {
    padding: 3px 4px;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
    text-align: center;
  }

  .cal-weekday-label {
    font-weight: 500;
    color: #9ca3af;
  }

  .cal-day-cell {
    padding: 2px;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
  }

  .cal-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-bottom: 2px;
    flex-shrink: 0;
    padding: 10px;
  }

  .cal-day-number--today {
    background: rgba(122, 90, 248, 1);
    padding: 10px;
  }

  .cal-day-number--today .cal-day-num-text {
    color: white;
    font-weight: 600;
  }

  .cal-day-scroll {
    overflow-y: auto;
  }

  .cal-event-badge {
    padding: 1px 4px;
    margin-bottom: 2px;
    border-radius: 0.25rem;
    cursor: pointer;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cal-popover {
    position: fixed;
    z-index: 9999;
    min-width: 280px;
    max-width: 320px;
  }
}
#servv-on-product-widget {
  all: unset;
  display: revert;
  box-sizing: border-box;
  max-width: 1080px;
}
#servv-on-product-widget * {
  font-family: "Inter" !important;
}