@charset "UTF-8";
/* ==========================================
   Base
========================================== */
/* reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

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

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================
   DESIGN TOKENS
   ========================================== */
/* ===============================
   Colors
=============================== */
/* Background */
/* Text */
/* Border */
/* ===============================
   Typography
=============================== */
/* 12 */
/* 14 */
/* 16 */
/* 18 */
/* 24 */
/* 32 */
/* ===============================
   Radius
=============================== */
/* ===============================
   Shadow
=============================== */
/* ===============================
   Layout
=============================== */
/* ===============================
   Animation
=============================== */
/* ===============================
   KPI Card Backgrounds
=============================== */
body {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: #1F2937;
  font-weight: 600;
}

h1 {
  font-size: var(--font-2xl);
}

h2 {
  font-size: var(--font-xl);
}

h3 {
  font-size: var(--font-lg);
}

h4 {
  font-size: var(--font-base);
}

h5 {
  font-size: var(--font-sm);
}

h6 {
  font-size: var(--font-xs);
}

p {
  margin: 0;
}

.login-page h1,
.login-page h2,
.login-page h3,
.login-page h4,
.login-page h5,
.login-page h6 {
  font-family: "Nunito", sans-serif;
}

/* ==========================================
   BASE STYLES
========================================== */
/* Body */
body {
  background: #F5F5F5;
  color: #4B5563;
  overflow-x: hidden;
}

/* Selection */
::selection {
  background: #111111;
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}

/* Buttons */
button {
  outline: none;
}
button:focus {
  outline: none;
}

/* Inputs */
input,
textarea,
select {
  outline: none;
}
input:focus,
textarea:focus,
select:focus {
  box-shadow: none;
}

/* Disabled */
[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Horizontal Line */
hr {
  margin: 0;
  border: 0;
  border-top: 1px solid #E5E7EB;
}

/* ==========================================
   Responsive Design Tokens
   ========================================== */
:root {
  /* Layout */
  --sidebar-width: 240px;
  --header-height: 84px;
  /* Typography */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-xxl: 32px;
  --radius-round: 999px;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;
}

/* ===============================
   Extra Large Desktop (1600px)
=============================== */
@media (max-width: 1600px) {
  :root {
    /* Layout */
    --sidebar-width: 220px;
    --header-height: 76px;
    /* Typography */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 15px;
    --font-lg: 17px;
    --font-xl: 19px;
    --font-2xl: 22px;
    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-xxl: 32px;
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:15px;
    --space-5:18px;
    --space-6:22px;
    --space-7:26px;
    --space-8:30px;
    --space-9:36px;
    --space-10:44px;
    --space-11:50px;
    --space-12:56px;
  }
}
/* ===============================
   Large Desktop (1440px)
=============================== */
@media (max-width: 1440px) {
  :root {
    --sidebar-width: 210px;
    --header-height: 72px;
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-lg: 17px;
    --font-xl: 18px;
    --font-2xl: 22px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-xxl: 32px;
    --space-1:4px;
    --space-2:8px;
    --space-3:10px;
    --space-4:14px;
    --space-5:18px;
    --space-6:20px;
    --space-7:24px;
    --space-8:28px;
    --space-9:34px;
    --space-10:40px;
    --space-11:46px;
    --space-12:52px;
  }
}
/* ===============================
   Desktop (1366px)
=============================== */
@media (max-width: 1366px) {
  :root {
    --sidebar-width: 200px;
    --header-height: 68px;
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 20px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-xxl: 32px;
    --space-1:4px;
    --space-2:6px;
    --space-3:10px;
    --space-4:12px;
    --space-5:16px;
    --space-6:18px;
    --space-7:22px;
    --space-8:26px;
    --space-9:30px;
    --space-10:36px;
    --space-11:42px;
    --space-12:48px;
  }
}
/* ===============================
   Laptop (1199px)
=============================== */
@media (max-width: 1199px) {
  :root {
    --sidebar-width: 90px;
    --header-height: 64px;
    --font-xs: 10px;
    --font-sm: 12px;
    --font-base: 14px;
    --font-lg: 15px;
    --font-xl: 17px;
    --font-2xl: 20px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-xxl: 32px;
    --space-1:2px;
    --space-2:4px;
    --space-3:8px;
    --space-4:10px;
    --space-5:14px;
    --space-6:16px;
    --space-7:20px;
    --space-8:24px;
    --space-9:28px;
    --space-10:32px;
    --space-11:36px;
    --space-12:40px;
  }
}
/* ===============================
   Tablet (991px)
=============================== */
@media (max-width: 767px) {
  :root {
    --sidebar-width: 0px;
    --header-height: 60px;
    --font-xs: 10px;
    --font-sm: 11px;
    --font-base: 12px;
    --font-lg: 14px;
    --font-xl: 16px;
    --font-2xl: 18px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-xxl: 32px;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 12px;
    --space-6: 14px;
    --space-7: 16px;
    --space-8: 20px;
    --space-9: 24px;
    --space-10: 28px;
    --space-11: 32px;
    --space-12: 36px;
  }
}
/* ==========================================
   Layout
========================================== */
/* ==========================================
   ADMIN LAYOUT
========================================== */
.admin-body {
  min-height: 100vh;
  background: #F5F5F5;
}

.admin-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
}
.admin-main .content {
  flex: 1;
  padding: var(--space-5);
}

/* ===========================
   Mobile Offcanvas Sidebar
=========================== */
.offcanvas.sidebar-offcanvas {
  width: 240px;
  border-right: 0;
}
.offcanvas.sidebar-offcanvas .offcanvas-body {
  padding: 0;
}
.offcanvas.sidebar-offcanvas .admin-sidebar {
  position: relative;
  width: 100%;
  height: 100%;
  border-right: 0;
}

/* ===========================
   Tablet & Mobile
=========================== */
@media (max-width: 1199px) {
  .admin-main {
    margin-left: 0;
    width: 100%;
  }
  .content {
    padding: var(--space-4);
  }
}
/* ==========================================
   ADMIN SIDEBAR
========================================== */
.admin-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.3s ease;
  z-index: 1000;
}
.admin-sidebar .sidebar-logo {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #E5E7EB;
  padding: var(--space-2);
  transition: 0.25s ease;
}
.admin-sidebar .sidebar-logo img {
  max-width: 97px;
  transition: 0.25s ease;
}
@media (max-width: 1600px) {
  .admin-sidebar .sidebar-logo img {
    max-width: 80px;
  }
}
.admin-sidebar .sidebar-nav {
  padding: var(--space-5) var(--space-2);
}
.admin-sidebar .sidebar-nav .nav {
  gap: var(--space-5);
}
.admin-sidebar .sidebar-nav .nav .nav-link {
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  color: #4B5563;
  font-size: var(--font-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: 0.25s ease;
}
.admin-sidebar .sidebar-nav .nav .nav-link:hover, .admin-sidebar .sidebar-nav .nav .nav-link.active {
  background: #111111;
  color: #FFFFFF;
}
.admin-sidebar .sidebar-nav .nav .nav-link:hover .nav-icon, .admin-sidebar .sidebar-nav .nav .nav-link.active .nav-icon {
  color: #FFFFFF;
}
.admin-sidebar .sidebar-nav .nav .nav-link .nav-icon {
  color: #111111;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-sidebar .sidebar-nav .nav .nav-link .nav-text {
  transition: opacity 0.2s ease;
}

/* ==========================================
   MINI SIDEBAR
========================================== */
body.sidebar-mini {
  --sidebar-width: 80px;
}
body.sidebar-mini .admin-sidebar .sidebar-logo img {
  max-width: 42px;
}
body.sidebar-mini .admin-sidebar .sidebar-nav .nav .nav-link {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
  gap: 0;
}
body.sidebar-mini .admin-sidebar .sidebar-nav .nav .nav-link .nav-text {
  display: none;
}

/* ==========================================
   HEADER
========================================== */
.admin-header {
  height: var(--header-height);
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-0) var(--space-5);
  position: sticky;
  top: var(--space-0);
  z-index: 99;
  /* Left */
}
.admin-header .header-left {
  display: flex;
  align-items: center;
  /* Toggle */
}
.admin-header .header-left .sidebar-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-md);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s ease;
}
.admin-header .header-left .sidebar-toggle:hover {
  background: #E5E7EB;
}
.admin-header .header-left .sidebar-toggle i {
  font-size: var(--font-l);
}
.admin-header {
  /* Right */
}
.admin-header .header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Notification */
}
.admin-header .header-right .notification {
  position: relative;
}
.admin-header .header-right .notification .notification-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  position: relative;
}
.admin-header .header-right .notification .notification-count {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-round);
  background: #EF4444;
  color: #FFFFFF;
  font-size: var(--font-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-header .header-right .notification .notification-dropdown {
  width: 360px;
  padding: var(--space-0);
  border-color: #E5E7EB;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.admin-header .header-right .notification .notification-dropdown .notification-header {
  padding: var(--space-2) var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E5E7EB;
}
.admin-header .header-right .notification .notification-dropdown .notification-header h5 {
  margin: var(--space-0);
  font-size: var(--font-sm);
  font-weight: 700;
}
.admin-header .header-right .notification .notification-dropdown .notification-header p {
  color: #9CA3AF;
  font-size: var(--font-xs);
}
.admin-header .header-right .notification .notification-dropdown .notification-header a {
  color: #FF7A1A;
  text-decoration: none;
  font-size: var(--font-sm);
  font-weight: 500;
}
.admin-header .header-right .notification .notification-dropdown .notification-list {
  max-height: 500px;
  overflow-y: auto;
  padding: var(--space-3);
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: #FFFFFF;
  margin-bottom: var(--space-4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-left: 2px solid transparent;
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item:last-child {
  margin-bottom: var(--space-0);
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item.warning {
  border-color: #FF7A1A;
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item.warning .notification-icon-box {
  background: rgba(245, 158, 11, 0.1);
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item.success {
  border-color: #22C55E;
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item.success .notification-icon-box {
  background: rgba(34, 197, 94, 0.1);
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item .notification-icon-box {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item .notification-content {
  flex: 1;
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item .notification-content .notification-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item .notification-content .notification-top h6 {
  margin: 0;
  font-size: var(--font-base);
  font-weight: 700;
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item .notification-content .notification-top span {
  color: #9CA3AF;
  font-size: var(--font-xs);
  font-weight: 500;
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item .notification-content p {
  color: #4B5563;
  font-size: var(--font-sm);
}
.admin-header .header-right .notification .notification-dropdown .notification-list .notification-item .notification-content .btn {
  margin-top: var(--space-3);
}
.admin-header .header-right {
  /* Divider */
}
.admin-header .header-right .header-divider {
  width: 1px;
  height: 26px;
  background: #E5E7EB;
}
.admin-header .header-right {
  /* User */
}
.admin-header .header-right .user-dropdown {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: none;
  padding: var(--space-0);
  /* Avatar */
}
.admin-header .header-right .user-dropdown .user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-round);
  background: #111111;
  color: #FFFFFF;
  font-size: var(--font-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-header .header-right .user-dropdown {
  /* Info */
}
.admin-header .header-right .user-dropdown .user-info {
  text-align: left;
}
.admin-header .header-right .user-dropdown .user-info h6 {
  margin: var(--space-0);
  font-size: var(--font-sm);
  font-weight: 600;
}
.admin-header .header-right .user-dropdown .user-info p {
  font-size: var(--font-xs);
  color: #9CA3AF;
}
.admin-header .header-right .dropdown-menu {
  border-radius: var(--radius-xl);
  padding: var(--space-0);
}
.admin-header .header-right .dropdown-menu .dropdown-header {
  padding: var(--space-4) var(--space-5);
}
.admin-header .header-right .dropdown-menu .dropdown-item {
  font-size: var(--font-sm);
  font-weight: 600;
  padding: var(--space-4) var(--space-5);
}
.admin-header .header-right .dropdown-menu .dropdown-item:last-child {
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}
.admin-header .header-right .dropdown-menu .dropdown-divider {
  margin: var(--space-0);
}

/* ==========================================
   Components
========================================== */
/* ==========================================
   STAT CARD
========================================== */
.stat-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 0.25s ease;
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
.stat-card {
  /* Top */
}
.stat-card .stat-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-card .stat-card-top .stat-card-header {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  /* Icon */
}
.stat-card .stat-card-top .stat-card-header .stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 1600px) {
  .stat-card .stat-card-top .stat-card-header .stat-card-icon {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 1600px) {
  .stat-card .stat-card-top .stat-card-header .stat-card-icon {
    width: 30px;
    height: 30px;
  }
}
.stat-card .stat-card-top .stat-card-header .stat-card-icon img {
  width: 16px;
  height: 16px;
}
@media (max-width: 1600px) {
  .stat-card .stat-card-top .stat-card-header .stat-card-icon img {
    width: 14px;
    height: 14px;
  }
}
.stat-card .stat-card-top .stat-card-header .stat-card-icon.restaurant {
  background: #F5F5F5;
}
.stat-card .stat-card-top .stat-card-header .stat-card-icon.reservation {
  background: #F59E0B;
}
.stat-card .stat-card-top .stat-card-header .stat-card-icon.customer {
  background: #111111;
}
.stat-card .stat-card-top .stat-card-header .stat-card-icon.order {
  background: #FFD0AD;
}
.stat-card .stat-card-top .stat-card-header .stat-card-icon.earning {
  background: #16A34A;
}
.stat-card .stat-card-top .stat-card-header .stat-card-icon.promotion {
  background: #FF7A1A;
}
.stat-card .stat-card-top .stat-card-header .stat-card-value {
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
.stat-card .stat-card-top {
  /* Growth */
}
.stat-card .stat-card-top .stat-card-growth {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-sm);
  font-weight: 600;
  color: #22C55E;
}
.stat-card .stat-card-top .stat-card-growth img {
  width: 16px;
  height: 16px;
}
.stat-card {
  /* Body */
}
.stat-card .stat-card-body {
  margin-top: var(--space-2);
}
.stat-card .stat-card-body .stat-card-title {
  margin: var(--space-0);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}
.page-header .page-header-left {
  flex: 1;
}
.page-header .page-header-left p {
  font-size: var(--font-xs);
  font-weight: 500;
}
.page-header .page-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.page-header .page-header-right .form-select {
  min-width: 180px;
}
.page-header .page-header-right .page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.chart-card {
  margin-top: var(--space-5);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
}
.chart-card .chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-5);
}
.chart-card .chart-card-header .chart-title {
  margin: var(--space-0);
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.chart-card .chart-card-header .chart-description {
  margin-top: var(--space-1);
  font-size: var(--font-xs);
  color: var(--text-secondary);
}
.chart-card .chart-body {
  height: 420px;
}

/* =====================================
   TABLE
===================================== */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-xl);
  background: #FFFFFF;
}
.table-wrapper .custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrapper .custom-table .action-tab {
  border-left: 1px solid #E5E7EB;
}
.table-wrapper .custom-table thead th {
  height: 50px;
  padding: var(--space-0) var(--space-3);
  background: #111111;
  color: #FFFFFF;
  font-size: var(--font-xs);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 1440px) {
  .table-wrapper .custom-table thead th {
    height: 40px;
  }
}
.table-wrapper .custom-table thead th:first-child {
  border-top-left-radius: var(--radius-xl);
}
.table-wrapper .custom-table thead th:last-child {
  border-top-right-radius: var(--radius-xl);
}
.table-wrapper .custom-table thead th:not(:first-child) {
  text-align: center;
}
.table-wrapper .custom-table tbody tr {
  transition: 0.25s ease;
}
.table-wrapper .custom-table tbody tr:hover {
  background: #FAFAFA;
}
.table-wrapper .custom-table tbody td {
  height: 50px;
  padding: var(--space-0) var(--space-3);
  font-size: var(--font-xs);
  font-weight: 600;
  color: #1F2937;
  border-top: 1px solid #E5E7EB;
}
@media (max-width: 1440px) {
  .table-wrapper .custom-table tbody td {
    height: 40px;
  }
}
.table-wrapper .custom-table tbody td:not(:first-child) {
  text-align: center;
}
.table-wrapper .custom-table tbody td .badge {
  font-size: 12px;
}
.table-wrapper .custom-table tbody td .table-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.table-wrapper .custom-table tbody td .table-actions .table-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.table-wrapper .custom-table tfoot .table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-3);
  border-top: 1px solid #E5E7EB;
}
.table-wrapper .custom-table tfoot .table-pagination .table-pagination-info {
  font-size: var(--font-xs);
}
.table-wrapper .custom-table tfoot .table-pagination .pagination {
  gap: var(--space-1);
}
.table-wrapper .custom-table tfoot .table-pagination .pagination .page-item .page-link {
  height: 32px;
  width: 32px;
  padding: var(--space-0);
  color: #111111;
  border-radius: var(--radius-md);
  text-align: center;
  align-content: center;
  justify-items: center;
}
@media (max-width: 1600px) {
  .table-wrapper .custom-table tfoot .table-pagination .pagination .page-item .page-link {
    font-size: var(--font-sm);
    height: 26px;
    width: 26px;
  }
}
.table-wrapper .custom-table tfoot .table-pagination .pagination .page-item .page-link.active {
  background-color: #111111;
  color: #FFFFFF;
  border-color: #111111;
}
.table-wrapper .custom-table tfoot .table-pagination .pagination .page-item .page-link:focus {
  box-shadow: none;
}
@media (max-width: 1600px) {
  .table-wrapper .custom-table tfoot .table-pagination .pagination .page-item .page-link img {
    height: 12px;
    width: 12px;
  }
}
.table-wrapper .custom-table tfoot .table-pagination .pagination .page-item .page-link[aria-label=Previous] img {
  rotate: 180deg;
}
.table-wrapper .custom-table tfoot .table-pagination .pagination .page-item .page-link.disabled img {
  opacity: 0.5;
}

/* `.details-grid` / `.detail-item` / `.bottom-border` were extracted from
   `.modal-body` so the User Details page can reuse them. Loaded here so the
   modals keep their styling wherever modal.scss is included. */
/* =====================================
   DETAIL GRID
   Read-only detail layout shared by the admin detail modals (customer,
   restaurant, content, reservation) and the User Details page. Lived under
   `.custom-modal .modal-body` until the User Details page needed it too.
===================================== */
.bottom-border {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: var(--space-3);
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1199px) {
  .details-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .details-grid {
    grid-template-columns: 1fr;
  }
}

.detail-item {
  min-width: 0;
}
.detail-item .detail-label {
  display: block;
  font-size: var(--font-sm);
  font-weight: 500;
  color: #9CA3AF;
}
.detail-item .detail-value {
  margin: var(--space-0);
  font-size: var(--font-sm);
  font-weight: 600;
  color: #1F2937;
  line-height: 1.5;
  word-break: break-word;
}

.custom-modal {
  border: none;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.custom-modal .modal-header {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid #E5E7EB;
}
.custom-modal .modal-header .badge {
  font-size: var(--font-xs);
}
.custom-modal .modal-title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: #1F2937;
}
.custom-modal .modal-body {
  padding: var(--space-5);
  max-height: calc(100vh - 160px);
  overflow: auto;
  /* `.bottom-border`, `.details-grid` and `.detail-item` now live in
     components/detail-grid.scss - shared with the User Details page. */
}
.custom-modal .modal-body .restaurant-detail-accordion .accordion-item:last-child {
  margin-bottom: var(--space-0);
}
.custom-modal .modal-footer {
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.custom-modal .btn-close {
  width: 32px;
  height: 32px;
  padding: var(--space-0);
  margin-right: var(--space-0);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  background: #F5F5F5;
  opacity: 0.8;
}
.custom-modal .btn-close:hover {
  opacity: 1;
}

/* ==========================================
   BUTTON BASE
========================================== */
.btn {
  min-width: 120px;
  height: 40px;
  font-size: var(--font-sm);
  margin: var(--space-0);
  border-radius: var(--radius-lg);
  transition: 0.25s ease;
  border: none;
  box-shadow: none !important;
}
@media (max-width: 1600px) {
  .btn {
    height: 36px;
  }
}
@media (max-width: 1366px) {
  .btn {
    height: 30px;
  }
}
.btn:focus, .btn:active {
  box-shadow: none !important;
}
.btn img,
.btn svg {
  width: 18px;
  height: 18px;
}
.btn.btn-primary {
  background-color: #111111;
  color: #FFFFFF;
}
.btn.btn-primary:hover {
  background-color: #444444;
}
.btn.btn-primary:focus {
  background-color: #444444;
}
.btn.btn-primary:active {
  background-color: #444444;
}
.btn.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #444444;
}
.btn.btn-secondary {
  background-color: #FF7A1A;
  color: #FFFFFF;
}
.btn.btn-secondary:hover {
  background-color: #ee6e12;
}
.btn.btn-secondary:focus {
  background-color: #ee6e12;
}
.btn.btn-secondary:active {
  background-color: #ee6e12;
}
.btn.btn-secondary:not(:disabled):not(.disabled):active {
  background-color: #ee6e12;
}
.btn.btn-tertiary {
  background-color: #EDEDED;
  color: #111111;
}
.btn.btn-tertiary:hover {
  background-color: #cfcfcf;
}
.btn.btn-tertiary:focus {
  background-color: #cfcfcf;
}
.btn.btn-tertiary:active {
  background-color: #cfcfcf;
}
.btn.btn-tertiary:not(:disabled):not(.disabled):active {
  background-color: #cfcfcf;
}
.btn.btn-sm {
  height: 30px;
  font-size: var(--font-xs);
  font-weight: 600;
}
.btn.btn-icon {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: var(--space-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F5;
  border: none;
  border-radius: var(--radius-sm);
  transition: 0.25s ease;
}
.btn.btn-icon img,
.btn.btn-icon svg {
  width: 14px;
  height: 14px;
}
.btn.btn-icon:hover {
  background: #111111;
}
.btn.btn-icon:hover img,
.btn.btn-icon:hover svg {
  filter: brightness(0) invert(1);
}
.btn.btn-icon:focus, .btn.btn-icon:active {
  box-shadow: none;
}
.btn.btn-icon.btn-icon-primary {
  background: #111111;
}
.btn.btn-icon.btn-icon-primary:hover {
  background: #FFFFFF;
  border: 1px solid #111111;
}
.btn.btn-icon.btn-icon-primary:hover img,
.btn.btn-icon.btn-icon-primary:hover svg {
  filter: brightness(1) invert(1);
}
.btn.btn-icon.btn-icon-danger {
  background: rgba(239, 68, 68, 0.1);
}
.btn.btn-icon.btn-icon-danger:hover {
  background: #EF4444;
}
.btn.btn-icon.btn-icon-danger:hover img,
.btn.btn-icon.btn-icon-danger:hover svg {
  filter: brightness(0) invert(1);
}

.filter-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  padding: var(--space-4);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-5);
}
@media (max-width: 1366px) {
  .filter-card {
    flex-direction: column;
    gap: var(--space-0);
  }
}
.filter-card .filter-card-left {
  flex: 1;
}
@media (max-width: 1366px) {
  .filter-card .filter-card-left {
    place-self: start;
    margin-bottom: var(--space-3);
  }
}
.filter-card .filter-card-left .filter-title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: #1F2937;
}
.filter-card .filter-card-left .filter-description {
  margin: var(--space-0);
  color: #4B5563;
  font-size: var(--font-xs);
  line-height: 1.5;
}
.filter-card .filter-card-left:empty {
  display: none;
}
.filter-card .filter-card-right {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-left: auto;
}
.filter-card .filter-card-right .form-input {
  width: 240px;
}
@media (max-width: 991px) {
  .filter-card .filter-card-right .form-input {
    width: 180px;
  }
}

.content-card {
  height: calc(100vh - 192px);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-xl);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  overflow: auto;
}
@media (max-width: 1600px) {
  .content-card {
    height: calc(100vh - 175px);
  }
}
@media (max-width: 1440px) {
  .content-card {
    height: calc(100vh - 170px);
  }
}
@media (max-width: 1366px) {
  .content-card {
    height: calc(100vh - 157px);
  }
}
@media (max-width: 1199px) {
  .content-card {
    height: calc(100vh - 145px);
  }
}
.content-card .content-card-body {
  padding: var(--space-5);
}

.promotion-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.promotion-card .promotion-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.promotion-card .promotion-header .promotion-title {
  margin: var(--space-0);
  font-size: var(--font-xl);
  font-weight: 700;
  color: #1F2937;
}
.promotion-card .promotion-header .promotion-days {
  margin-top: var(--space-2);
  color: #FF7A1A;
  font-size: var(--font-xl);
  font-weight: 700;
}
.promotion-card .promotion-body {
  border-top: 1px dashed #E5E7EB;
  border-bottom: 1px dashed #E5E7EB;
}
.promotion-card .promotion-body .promotion-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-0);
  border-bottom: 1px solid #E5E7EB;
}
.promotion-card .promotion-body .promotion-item:last-child {
  border: none;
}
.promotion-card .promotion-body .promotion-item .position {
  font-size: var(--font-base);
  font-weight: 600;
  color: #1F2937;
}
.promotion-card .promotion-body .promotion-item .price {
  margin-left: auto;
  font-weight: 700;
  color: #1F2937;
}
.promotion-card .promotion-body .info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-0);
}
.promotion-card .promotion-body .info-item {
  padding: var(--space-2);
  background: #F5F5F5;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-lg);
  transition: 0.25s ease;
}
.promotion-card .promotion-body .info-item .info-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-xs);
  font-weight: 500;
  color: #9CA3AF;
}
.promotion-card .promotion-body .info-item .info-value {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: 600;
  color: #1F2937;
  line-height: 1.2;
}
.promotion-card .promotion-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.promotion-card .promotion-footer .purchase-count {
  font-size: var(--font-xs);
  color: #4B5563;
}
.promotion-card .promotion-footer .promotion-actions {
  display: flex;
  gap: var(--space-2);
}

/* ---- Reward Management (Admin → Manage Reward) ---- */
.reward-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}
.reward-empty .reward-empty-title {
  margin: var(--space-0) var(--space-0) var(--space-2);
  font-size: var(--font-lg);
  font-weight: 600;
  color: #1F2937;
}
.reward-empty .reward-empty-text {
  max-width: 380px;
  margin: var(--space-0) var(--space-0) var(--space-5);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: #9CA3AF;
}

.reward-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.reward-delete-text {
  margin: var(--space-0);
  font-size: var(--font-sm);
  line-height: 1.6;
  color: #4B5563;
}
.reward-delete-text strong {
  color: #1F2937;
}

.add-rewards-form .invalid-feedback {
  min-height: 18px;
  margin-top: var(--space-1);
  font-size: var(--font-xs);
  color: #EF4444;
}
.add-rewards-form .form-control.is-invalid {
  border-color: #EF4444;
}

/* ---- Promotion package modal (Admin → Promotions) ---- */
.promo-positions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid #E5E7EB;
}
.promo-positions .promo-position-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-0);
}
.promo-positions .promo-position-row + .promo-position-row {
  border-top: 1px solid #E5E7EB;
}
.promo-positions .promo-position-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.promo-positions .promo-position-label .position {
  font-size: var(--font-sm);
  font-weight: 600;
  color: #1F2937;
}
.promo-positions .promo-position-label .promo-position-hint {
  font-size: var(--font-xs);
  color: #9CA3AF;
}
.promo-positions .promo-position-price {
  width: 200px;
  flex: 0 0 auto;
}

.promo-status-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
}
.promo-status-field .form-label {
  margin: var(--space-0);
}

@media (max-width: 575px) {
  .promo-positions .promo-position-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .promo-positions .promo-position-price {
    width: 100%;
  }
}
.badge {
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-round);
}
.badge.text-bg-secondary {
  background-color: rgba(255, 122, 26, 0.1) !important;
  color: #FF7A1A !important;
}
.badge.text-bg-success {
  background-color: rgba(34, 197, 94, 0.1) !important;
  color: #22C55E !important;
}
.badge.text-bg-danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: #EF4444 !important;
}
.badge.text-bg-warning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: #F59E0B !important;
}
.badge.text-bg-info {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: #3B82F6 !important;
}
.badge.text-bg-light {
  background-color: #F5F5F5 !important;
  color: #4B5563 !important;
}

.accordion .accordion-item {
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.accordion .accordion-button {
  background: rgba(255, 122, 26, 0.1);
  color: #111111;
  font-size: var(--font-base);
  font-weight: 600;
  padding: var(--space-4) var(--space-5);
  border: none;
  box-shadow: none;
}
.accordion .accordion-button:focus {
  box-shadow: none;
  border: none;
}
.accordion .accordion-button:not(.collapsed) {
  background: rgba(255, 122, 26, 0.1);
  color: #111111;
  box-shadow: none;
}
.accordion .accordion-body {
  padding: var(--space-5);
  background: #FFFFFF;
  border-top: 1px solid #E5E7EB;
}

.content-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-xl);
}

.toolbar-tabs {
  gap: var(--space-2);
  padding: var(--space-1);
  background: #F5F5F5;
  border-radius: var(--radius-round);
}
.toolbar-tabs .nav-link {
  min-width: 124px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-0) var(--space-5);
  border-radius: var(--radius-round);
  font-size: var(--font-sm);
  font-weight: 600;
  color: #111111;
  transition: 0.25s;
}
@media (max-width: 1600px) {
  .toolbar-tabs .nav-link {
    height: 36px;
  }
}
@media (max-width: 1366px) {
  .toolbar-tabs .nav-link {
    height: 30px;
  }
}
.toolbar-tabs .nav-link:hover {
  color: #111111;
}
.toolbar-tabs .nav-link.active {
  background: #111111;
  color: #FFFFFF;
  box-shadow: none;
}
.toolbar-tabs .nav-link:focus {
  box-shadow: none;
}

.content-quill-editor {
  background: #fff;
}

#normalBodySection .ql-toolbar.ql-snow {
  border-radius: var(--radius-lg, 8px) var(--radius-lg, 8px) 0 0;
  border-color: #e5e7eb;
}

#normalBodySection .ql-container.ql-snow {
  border-radius: 0 0 var(--radius-lg, 8px) var(--radius-lg, 8px);
  border-color: #e5e7eb;
  height: 220px;
  max-height: 220px;
}

#normalBodySection .ql-editor {
  min-height: 180px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 15px;
}

.content-page-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: 0.5rem;
  padding: 1rem 0 0.25rem;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.btn-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.form-label {
  font-size: var(--font-sm);
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.form-label span {
  color: #9CA3AF;
}

.form-input {
  position: relative;
  width: 100%;
}
.form-input .form-control {
  height: 40px;
  border: 1px solid #9CA3AF;
  border-radius: var(--radius-md);
  background: #FFFFFF;
  font-size: var(--font-sm);
  transition: 0.25s ease;
}
@media (max-width: 1600px) {
  .form-input .form-control {
    height: 36px;
  }
}
@media (max-width: 1366px) {
  .form-input .form-control {
    height: 30px;
  }
}
.form-input .form-control:focus {
  border-color: #4B5563;
  outline: none;
  box-shadow: none;
}
.form-input .form-control::placeholder {
  color: #9CA3AF;
}
.form-input .form-control:disabled, .form-input .form-control[readonly] {
  background-color: #F5F5F5;
}
.form-input.form-input.has-left-icon .form-control {
  padding-left: var(--space-10);
}
.form-input.form-input.has-left-icon .form-input-icon-left {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
}
.form-input.form-input.has-right-icon .form-control {
  padding-right: var(--space-10);
}
.form-input.form-input.has-right-icon .form-input-icon-right {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
}
.form-input .toggle-password {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-0);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  opacity: 0.8;
}
.form-input .toggle-password:hover {
  opacity: 1;
}
.form-input .toggle-password img {
  width: 16px;
  height: 16px;
}
.form-input:has(.toggle-password) .form-control {
  padding-right: var(--space-10);
}

/* Inline text action - "Change Password" in the My Profile modal.
   Named to avoid colliding with Bootstrap's own `.btn-link`. */
.btn-text-action {
  padding: var(--space-0);
  background: none;
  border: none;
  color: #FF7A1A;
  font-size: var(--font-sm);
  font-weight: 600;
}
.btn-text-action:hover {
  color: #ee6e12;
  text-decoration: underline;
}

textarea.form-control {
  font-size: var(--font-sm);
}
textarea.form-control:focus {
  border-color: #4B5563;
  outline: none;
  box-shadow: none;
}

/* ==========================================
   SELECT
========================================== */
.form-select {
  height: 40px;
  min-width: 200px;
  border: 1px solid #9CA3AF;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}
@media (max-width: 1600px) {
  .form-select {
    height: 36px;
    padding: var(--space-1) var(--space-8) var(--space-1) var(--space-3);
  }
}
@media (max-width: 1366px) {
  .form-select {
    height: 30px;
  }
}
.form-select:focus {
  border-color: #4B5563;
  outline: 0;
  box-shadow: none;
}

.form-check .form-check-label {
  font-size: var(--font-sm);
}
.form-check .form-check-input:checked {
  background-color: #FF7A1A;
  border-color: #FF7A1A;
}
.form-check .form-check-input:focus {
  box-shadow: none;
}

.form-switch {
  padding-left: var(--space-0);
}
.form-switch .form-check-input {
  width: 42px;
  height: 22px;
  margin: var(--space-0);
  cursor: pointer;
  background-color: #EDEDED;
  border-color: #EDEDED;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}
@media (max-width: 1600px) {
  .form-switch .form-check-input {
    width: 38px;
    height: 20px;
  }
}
.form-switch .form-check-input:focus {
  box-shadow: none;
  background-color: #111111;
  border-color: #111111;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-color: #FF7A1A;
  border-color: #FF7A1A;
}

.login-page {
  min-height: 100vh;
  padding: 16px;
  background: #F5F5F5;
}
.login-page .row {
  min-height: calc(100vh - 32px);
}
.login-page .login-left {
  height: calc(100vh - 32px);
}
.login-page .login-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* `min-height` (not `height`) so a tall card grows instead of being
     clipped — the logo used to get cut off at the top. */
  min-height: calc(100vh - 32px);
  padding: 40px 24px;
}
.login-page .login-right .login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  width: 100%;
  max-width: 520px;
}
.login-page .login-right .login-content .login-logo {
  width: 132px;
}
.login-page .login-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#F7B267 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.login-page .login-right > * {
  position: relative;
  z-index: 1;
}
.login-page {
  /* Short laptop screens: tighten only the card column so it fits without
     scrolling. Height-based, so width breakpoints are unaffected. */
}
@media (max-height: 800px) {
  .login-page .login-right {
    padding: 24px;
  }
  .login-page .login-right .login-content {
    gap: var(--space-4);
  }
  .login-page .login-right .login-content .login-logo {
    width: 112px;
  }
}

.auth-slider {
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}
.auth-slider .carousel,
.auth-slider .carousel-inner,
.auth-slider .carousel-item {
  height: 100%;
}
.auth-slider .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth-slider-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-11);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.05));
}
.auth-slider-content {
  max-width: 520px;
  color: #FFFFFF;
}
.auth-slider-content h2 {
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: var(--space-4);
}
.auth-slider-content p {
  font-size: var(--font-xl);
  color: #FFFFFF;
  line-height: 1.7;
  opacity: 0.5;
}
.auth-slider .carousel-indicators {
  justify-content: flex-start;
  left: 48px;
  right: auto;
  bottom: 32px;
  margin: var(--space-0);
  gap: var(--space-3);
}
.auth-slider .carousel-indicators button {
  width: 120px;
  height: 6px;
  border: none;
  border-radius: var(--radius-round);
  background: #4B5563;
  opacity: 0.3;
}
.auth-slider .carousel-indicators .active {
  opacity: 1;
  background: #FF7A1A;
}

.auth-form {
  width: 100%;
  max-width: 430px;
  margin: auto;
}
.auth-form .auth-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}
.auth-form .auth-card-header {
  margin-bottom: var(--space-7);
}
.auth-form .auth-card-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: var(--space-1);
}
.auth-form .auth-card-header p {
  color: #1F2937;
  font-size: var(--font-sm);
  line-height: 1.5;
  margin: var(--space-0);
}
.auth-form .required::after {
  content: " *";
  color: #EF4444;
}
.auth-form .password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 0;
}
.auth-form .password-toggle img {
  width: 18px;
}
.auth-form .auth-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-7);
}
.auth-form .auth-options .form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-0);
}
.auth-form .auth-options .forgot-link {
  color: #FF7A1A;
  font-size: var(--font-sm);
  text-decoration: none;
  font-weight: 600;
}
.auth-form .auth-options .forgot-link:hover {
  text-decoration: underline;
}
.auth-form {
  /* ---- Check-your-inbox card ---- */
}
.auth-form .auth-card-inbox .auth-card-header {
  margin-bottom: var(--space-3);
}
.auth-form .auth-inbox-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: var(--space-0) auto var(--space-4);
  background: rgba(255, 122, 26, 0.12);
  border-radius: var(--radius-round);
}
.auth-form .auth-inbox-badge img {
  width: 24px;
  height: 24px;
}
.auth-form .auth-email-pill {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: #F5F5F5;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-md);
  color: #1F2937;
  font-size: var(--font-sm);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  /* long addresses must wrap inside the 430px card, never overflow it */
  word-break: break-all;
}
.auth-form .auth-inbox-steps {
  counter-reset: auth-step;
  margin: var(--space-0) var(--space-0) var(--space-5);
  padding: var(--space-0);
  list-style: none;
  color: #4B5563;
  font-size: var(--font-sm);
  line-height: 1.5;
}
.auth-form .auth-inbox-steps li {
  position: relative;
  padding-left: 32px;
  min-height: 22px;
  counter-increment: auth-step;
}
.auth-form .auth-inbox-steps li strong {
  color: #1F2937;
  font-weight: 600;
  word-break: break-all;
}
.auth-form .auth-inbox-steps li::before {
  content: counter(auth-step);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(255, 122, 26, 0.12);
  border-radius: var(--radius-round);
  color: #FF7A1A;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1;
}
.auth-form .auth-inbox-steps li + li {
  margin-top: var(--space-3);
}
.auth-form .auth-inbox-note {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: #F5F5F5;
  border-left: 3px solid #FF7A1A;
  border-radius: var(--radius-sm);
  color: #4B5563;
  font-size: var(--font-sm);
  line-height: 1.5;
}
.auth-form .auth-inbox-note strong {
  color: #FF7A1A;
  font-weight: 600;
}
.auth-form .auth-resend-form {
  margin-bottom: var(--space-4);
}
.auth-form .auth-back-link {
  margin: var(--space-0);
}
.auth-form .auth-back-link a {
  color: #FF7A1A;
  font-size: var(--font-sm);
  font-weight: 600;
  text-decoration: none;
}
.auth-form .auth-back-link a:hover {
  text-decoration: underline;
}
@media (max-width: 575px) {
  .auth-form .auth-card {
    padding: var(--space-5);
  }
  .auth-form .auth-card-header h2 {
    font-size: var(--font-2xl);
  }
  .auth-form .auth-inbox-badge {
    width: 48px;
    height: 48px;
  }
  .auth-form .auth-inbox-badge img {
    width: 20px;
    height: 20px;
  }
}

.promotion-form .promotion-pricing {
  margin-top: var(--space-5);
  border-top: 1px dashed #E5E7EB;
}
.promotion-form .pricing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-0);
  border-bottom: 1px solid #E5E7EB;
}
.promotion-form .pricing-item:last-child {
  border-bottom: none;
}
.promotion-form .pricing-left h6 {
  margin: var(--space-0);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--font-base);
  font-weight: 600;
}
.promotion-form .pricing-left small {
  font-size: var(--font-xs);
  color: #9CA3AF;
  font-weight: 400;
}
.promotion-form .pricing-right {
  width: 240px;
}
.promotion-form .form-textarea {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  resize: none;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-lg);
  font-size: 15px;
  outline: none;
  transition: 0.25s;
}
.promotion-form .form-textarea:focus {
  border-color: #111111;
}

/*# sourceMappingURL=admin.css.map */