:root {
  --color-black: #131315;
  --color-gray: #575a5e;
  --color-light: #e0e0e2;
  --color-red: #e5242a;
  --color-dark-red: #ba2d0b;

  --surface: #ffffff;
  --surface-soft: #f8f8f9;
  --surface-muted: #f1f1f3;
  --surface-dark: #1b1b1e;

  --text: #131315;
  --text-soft: #575a5e;
  --text-muted: #8b8c90;

  --border: rgba(19, 19, 21, 0.09);
  --border-strong: rgba(19, 19, 21, 0.15);

  --shadow-xs: 0 2px 8px rgba(19, 19, 21, 0.04);
  --shadow-sm: 0 5px 16px rgba(19, 19, 21, 0.06);
  --shadow: 0 14px 36px rgba(19, 19, 21, 0.09);
  --shadow-lg: 0 26px 70px rgba(19, 19, 21, 0.14);

  --shadow-red: 0 12px 30px rgba(229, 36, 42, 0.16);

  --radius-small: 10px;
  --radius-medium: 14px;
  --radius-large: 22px;
  --radius-xl: 28px;

  --max-width: 1100px;

  --page-gap: 24px;
  --section-gap: 24px;
  --component-gap: 16px;

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================
   RESET / BASE
   ========================================= */
/* Purpose: Foundational variables and browser normalization. Change tokens here before creating one-off values elsewhere. */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(229, 36, 42, 0.035),
      transparent 34%
    ),
    var(--surface-soft);

  color: var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

::selection {
  background: rgba(229, 36, 42, 0.18);
  color: var(--color-black);
}

/* =========================================
   ADMIN HEADER
   ========================================= */
/* Purpose: Shared top navigation used by authenticated admin pages. Keep navigation structure and spacing consistent here. */

.admin-header {
  position: sticky;
  top: 0;
  z-index: 100;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);

  background: linear-gradient(
    180deg,
    rgba(19, 19, 21, 0.98),
    rgba(19, 19, 21, 0.94)
  );

  color: var(--color-light);

  box-shadow: 0 8px 28px rgba(19, 19, 21, 0.12);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.admin-header-inner {
  width: min(calc(100% - 32px), var(--max-width));
  min-height: 72px;

  margin: 0 auto;

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

  gap: 30px;
}

.admin-logo {
  position: relative;

  flex-shrink: 0;

  color: #ffffff;

  font-size: 1.18rem;
  font-weight: 850;
  letter-spacing: -0.04em;

  text-decoration: none;
}

.admin-logo::before {
  content: "";

  display: inline-block;

  width: 7px;
  height: 7px;

  margin-right: 8px;

  border-radius: 50%;

  background: var(--color-red);

  box-shadow:
    0 0 0 4px rgba(229, 36, 42, 0.11),
    0 0 18px rgba(229, 36, 42, 0.45);

  vertical-align: middle;
}

.admin-nav {
  display: flex;
  align-items: center;

  gap: 4px;
}

.admin-nav a,
.admin-nav button {
  position: relative;

  padding: 9px 12px;

  border: 0;
  border-radius: 10px;

  background: transparent;
  color: #9d9ea2;

  font-size: 0.84rem;
  font-weight: 680;

  text-decoration: none;

  cursor: pointer;

  transition:
    color 220ms ease,
    background 220ms ease,
    transform 220ms var(--ease-premium);
}

.admin-nav a:hover,
.admin-nav button:hover {
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;

  transform: translateY(-1px);
}

.admin-nav a.active {
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 4px 14px rgba(0, 0, 0, 0.12);
}

.admin-nav a.active::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 4px;

  width: 16px;
  height: 2px;

  border-radius: 999px;

  background: var(--color-red);

  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(229, 36, 42, 0.55);
}

.admin-nav form {
  margin: 0;
}

/* =========================================
   ADMIN MAIN LAYOUT
   ========================================= */
/* Purpose: Page-level containers and vertical rhythm. This controls the common width and spacing of admin screens. */

.admin-main,
.admin-container {
  width: min(calc(100% - 32px), var(--max-width));

  margin: 0 auto;

  padding: 52px 0 72px;
}

.admin-main > *,
.admin-container > * {
  min-width: 0;
}

.admin-main > * + *,
.admin-container > * + * {
  margin-top: var(--section-gap);
}

.admin-page-header {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-bottom: 32px;

  min-width: 0;
}

.admin-page-header > * {
  min-width: 0;
}

.admin-page-header h1 {
  margin: 0;

  color: var(--color-black);

  font-size: clamp(2rem, 4vw, 2.65rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
  font-weight: 820;
}

.admin-page-header p {
  margin: 10px 0 0;

  max-width: 680px;

  color: var(--text-soft);

  font-size: 0.96rem;
  line-height: 1.6;
}

.admin-header:not(.admin-page-header) {
  margin-bottom: 40px;
}

.admin-eyebrow {
  margin: 0 0 9px;

  color: var(--color-red);

  font-size: 0.72rem;
  font-weight: 850;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-subtitle {
  margin: 11px 0 0;

  color: var(--text-soft);

  font-size: 0.96rem;
  line-height: 1.55;
}

/* =========================================
   LAYOUT SAFETY
   ========================================= */
/* Purpose: Small defensive layout rules that prevent overflow and accidental horizontal scrolling on narrow screens. */

.admin-section,
.admin-card,
.admin-menu-view,
.admin-create-qr,
.admin-grid,
.labels-grid,
.admin-photo-gallery,
.admin-photo-select-gallery,
#admin-photos {
  min-width: 0;
}

.admin-section-header {
  min-width: 0;
}

.admin-section-header > * {
  min-width: 0;
}

/* =========================================
   ADMIN GRID
   ========================================= */
/* Purpose: Reusable grid primitives for dashboard-style cards and grouped admin content. */

.admin-grid {
  display: grid;

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

  gap: 18px;
}

/* =========================================
   ADMIN CARDS
   ========================================= */
/* Purpose: Shared card surface, border, shadow, and typography treatment used across admin sections. */

.admin-card {
  position: relative;

  display: block;

  padding: 28px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 18px;

  background: #ffffff;

  color: inherit;

  text-decoration: none;

  box-shadow: 0 8px 24px rgba(19, 19, 21, 0.055);

  transition:
    transform 320ms var(--ease-premium),
    box-shadow 400ms var(--ease-premium),
    border-color 300ms ease;
}

.admin-card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(229, 36, 42, 0.18),
    transparent
  );

  opacity: 0;

  transition: opacity 300ms ease;
}

.admin-card:hover {
  transform: translateY(-4px);

  border-color: rgba(19, 19, 21, 0.13);

  box-shadow: var(--shadow);
}

.admin-card:hover::before {
  opacity: 1;
}

.admin-card h2 {
  margin: 0 0 9px;

  color: var(--text);

  font-size: 1.3rem;
  font-weight: 780;
  letter-spacing: -0.025em;
}

.admin-card p {
  margin: 0;

  color: var(--text-soft);

  line-height: 1.62;
}

/* =========================================
   ADMIN SECTION
   ========================================= */
/* Purpose: Generic section headers and wrappers used by pages such as Photos, Labels, Settings, and Support. */

.admin-section {
  padding: 28px;

  border: 1px solid var(--border);
  border-radius: 18px;

  background: #ffffff;

  box-shadow: 0 8px 24px rgba(19, 19, 21, 0.05);
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 26px;
}

.admin-section-header h2 {
  margin: 0 0 6px;

  color: var(--text);

  font-size: 1.34rem;
  font-weight: 790;
  letter-spacing: -0.025em;
}

.admin-section-header p {
  margin: 0;

  color: var(--text-soft);

  font-size: 0.9rem;
  line-height: 1.5;
}

/* =========================================
   BUTTONS
   ========================================= */
/* Purpose: Primary shared button language plus the global icon system. Page-specific button variants should remain in their own sections. */

/* =========================================================
   SHARED ADMIN ICON SYSTEM
   =========================================================
   Purpose:
   - Provides one consistent wrapper for all reusable SVG icons.
   - Keeps icon sizing/alignment predictable across every admin page.
   - Uses currentColor so the surrounding button or control decides
     the icon color without needing page-specific SVG rules.

   Important:
   Page-specific icon containers (for example Support category icons)
   are intentionally styled in their own sections below. This prevents
   a global icon rule from accidentally overriding a page's visual design.
   ========================================================= */

.admin-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  vertical-align: middle;
}

.admin-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-primary-button {
  align-self: flex-start;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 46px;

  padding: 0 19px;

  border: 1px solid var(--color-black);
  border-radius: 13px;

  background: linear-gradient(180deg, #242427, #131315);

  color: #ffffff;

  font-size: 0.88rem;
  font-weight: 760;

  text-decoration: none;
  cursor: pointer;

  box-shadow:
    0 5px 14px rgba(19, 19, 21, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transition:
    transform 260ms var(--ease-premium),
    box-shadow 260ms ease,
    background 260ms ease;
}

.admin-primary-button:hover {
  transform: translateY(-2px);

  background: linear-gradient(180deg, #333337, #1c1c1f);

  box-shadow:
    0 10px 24px rgba(19, 19, 21, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.admin-primary-button:active {
  transform: translateY(0);
}

/* Destructive button variant used where an action removes or resets data. */
.admin-danger-button {
  border-color: #e5242a;
  background: #e5242a;
  color: #ffffff;
}

.admin-danger-button:hover:not(:disabled) {
  border-color: #ba2d0b;
  background: #ba2d0b;
  color: #ffffff;
}

.admin-danger-button:disabled {
  border-color: #e0e0e2;
  background: #e0e0e2;
  color: #a0a1a4;
}

.admin-section-header .admin-primary-button {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* =========================================
   EDIT BUTTON
   ========================================= */
/* Purpose: Reusable edit-action button styling for links and controls that open an editor. */

.admin-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  flex-shrink: 0;

  min-height: 40px;

  padding: 0 14px;

  border: 1px solid var(--color-black);
  border-radius: 11px;

  background: var(--color-black);
  color: #ffffff;

  font-size: 0.84rem;
  font-weight: 720;

  text-decoration: none;

  box-shadow: var(--shadow-xs);

  transition:
    transform 260ms var(--ease-premium),
    background 220ms ease,
    box-shadow 220ms ease;
}

.admin-edit-button:hover {
  transform: translateY(-2px);

  background: #2b2b2e;

  box-shadow: var(--shadow-sm);
}

.admin-edit-button span {
  font-size: 0.95rem;
  line-height: 1;
}

/* =========================================
   SETTINGS / STANDARD FORMS
   ========================================= */
/* Purpose: Common form layout and field presentation used by Settings and other standard admin forms. */

.admin-card form {
  display: flex;
  flex-direction: column;

  gap: 20px;
}

#change-password-form,
#restaurant-settings-form,
#restaurant-branding-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Settings branding image actions */
.branding-image-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.branding-image-actions .admin-primary-button,
.branding-image-actions .admin-secondary-button {
  width: auto;
  flex: 0 0 auto;
}

.form-group {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.form-group label {
  color: var(--text);

  font-size: 0.83rem;
  font-weight: 760;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;

  min-height: 49px;

  padding: 12px 14px;

  border: 1px solid var(--border-strong);
  border-radius: 12px;

  background: #fafafa;
  color: var(--text);

  font-size: 0.92rem;

  outline: none;

  box-shadow: inset 0 1px 2px rgba(19, 19, 21, 0.025);

  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.form-group textarea {
  min-height: 125px;

  resize: vertical;

  line-height: 1.6;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
  border-color: rgba(19, 19, 21, 0.22);

  background: #ffffff;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: rgba(229, 36, 42, 0.7);

  background: #ffffff;

  box-shadow:
    0 0 0 4px rgba(229, 36, 42, 0.08),
    0 5px 14px rgba(19, 19, 21, 0.04);
}

.settings-message {
  min-height: 1.25rem;

  margin: 0;

  color: var(--text-soft);

  font-size: 0.86rem;
}

/* =========================================================
   BACK BUTTON
   =========================================================
   Compact navigation control used on detail/editor pages.
   The button contains the shared SVG back icon, so the CSS only owns
   the hit area, surface treatment, hover motion, and icon sizing.
   ========================================================= */

.admin-back {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  border: 0;
  border-radius: 12px;

  background: #f1f1f2;
  color: #131315;
  text-decoration: none;

  box-shadow:
    0 2px 8px rgba(19, 19, 21, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);

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

.admin-back:hover {
  transform: translateX(-2px);
  background: #e7e7e9;

  box-shadow:
    0 5px 14px rgba(19, 19, 21, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.admin-back .admin-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

/* =========================================
   MENU ITEM FILTERS
   ========================================= */
/* Purpose: Search and filter controls used to narrow the menu-item list. */

.admin-item-filters {
  display: grid;

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

  gap: 11px;

  margin-bottom: 22px;
}

.admin-filter-select,
.admin-search-input {
  width: 100%;

  min-height: 48px;

  padding: 0 15px;

  border: 1px solid var(--border-strong);
  border-radius: 12px;

  background: #ffffff;
  color: var(--text);

  font-size: 0.9rem;

  outline: none;

  box-shadow: var(--shadow-xs);

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.admin-filter-select {
  cursor: pointer;
}

.admin-search-input::placeholder {
  color: var(--text-muted);
}

.admin-filter-select:hover,
.admin-search-input:hover {
  border-color: rgba(19, 19, 21, 0.2);
}

.admin-filter-select:focus,
.admin-search-input:focus {
  border-color: rgba(229, 36, 42, 0.7);

  box-shadow:
    0 0 0 4px rgba(229, 36, 42, 0.07),
    var(--shadow-xs);
}

/* =========================================
   MENU ITEMS
   ========================================= */
/* Purpose: Menu-item list cards, metadata, and action layout. */

.admin-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 17px 18px;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: #ffffff;

  box-shadow: var(--shadow-xs);

  transition:
    transform 300ms var(--ease-premium),
    border-color 250ms ease,
    box-shadow 300ms ease;
}

.admin-item-card + .admin-item-card {
  margin-top: 10px;
}

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

  border-color: rgba(229, 36, 42, 0.25);

  box-shadow: var(--shadow-sm);
}

.admin-item-info {
  min-width: 0;
}

.admin-item-info h3 {
  margin: 0 0 5px;

  color: var(--text);

  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.admin-item-info span {
  color: var(--text-soft);

  font-size: 0.84rem;
}

.admin-item-card > strong {
  flex-shrink: 0;

  color: var(--color-red);

  font-size: 0.96rem;
  font-weight: 820;
}

.admin-item-actions {
  display: flex;
  align-items: center;

  gap: 7px;

  flex-shrink: 0;
}

@media (min-width: 901px) {
  .admin-item-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 177px;
    align-items: center;
    gap: 20px;
  }

  .admin-item-card > strong {
    text-align: center;
  }

  .admin-item-actions {
    justify-content: flex-end;
  }
}

/* =========================================
   ITEM EDITOR
   ========================================= */
/* Purpose: Create/edit menu item form structure and field styling. */

#admin-item-edit {
  display: flex;
  flex-direction: column;

  gap: 20px;

  max-width: 760px;
}

.admin-form-group {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.admin-form-group label {
  color: var(--text);

  font-size: 0.84rem;
  font-weight: 760;
}

.admin-form-group input,
.admin-form-group textarea,
.admin-form-group select {
  width: 100%;

  padding: 13px 15px;

  border: 1px solid var(--border-strong);
  border-radius: 12px;

  background: #ffffff;
  color: var(--text);

  font-size: 0.92rem;

  outline: none;

  box-shadow: var(--shadow-xs);

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.admin-form-group input,
.admin-form-group select {
  min-height: 49px;
}

.admin-form-group textarea {
  min-height: 125px;

  resize: vertical;

  line-height: 1.6;
}

.admin-form-group input::placeholder,
.admin-form-group textarea::placeholder {
  color: var(--text-muted);
}

.admin-form-group input:hover,
.admin-form-group textarea:hover,
.admin-form-group select:hover {
  border-color: rgba(19, 19, 21, 0.2);
}

.admin-form-group input:focus,
.admin-form-group textarea:focus,
.admin-form-group select:focus {
  border-color: rgba(229, 36, 42, 0.7);

  background: #ffffff;

  box-shadow:
    0 0 0 4px rgba(229, 36, 42, 0.08),
    var(--shadow-xs);
}

/* =========================================
   EDITOR ACTIONS
   ========================================= */
/* Purpose: Save/delete controls at the bottom of item editor forms. */

.admin-form-actions {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 12px;
  padding-top: 22px;

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

.admin-save-button,
.admin-form-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 48px;

  padding: 0 21px;

  border-radius: 13px;

  font-size: 0.88rem;
  font-weight: 760;

  cursor: pointer;

  transition:
    transform 260ms var(--ease-premium),
    background 220ms ease,
    box-shadow 220ms ease;
}

.admin-save-button {
  border: 1px solid var(--color-black);

  background: linear-gradient(180deg, #252528, #131315);

  color: #ffffff;

  box-shadow: var(--shadow-xs);
}

.admin-save-button:hover {
  transform: translateY(-2px);

  box-shadow: var(--shadow-sm);
}

.admin-form-delete-button {
  border: 1px solid var(--color-dark-red);

  background: var(--color-dark-red);
  color: #ffffff;

  box-shadow: 0 5px 14px rgba(186, 45, 11, 0.12);
}

.admin-form-delete-button:hover {
  transform: translateY(-2px);

  background: var(--color-red);
  border-color: var(--color-red);

  box-shadow: var(--shadow-red);
}

.admin-save-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 17px;
  height: 17px;

  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

/* =========================================
   EXTRA PORTIONS
   ========================================= */
/* Purpose: Controls for adding and managing alternative portion sizes and prices. */

.admin-extra-portions {
  display: flex;
  flex-direction: column;

  gap: 11px;

  margin-top: 4px;
}

.admin-add-portion-button {
  align-self: flex-start;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 40px;

  padding: 0 15px;

  border: 1px solid var(--color-black);
  border-radius: 11px;

  background: var(--color-black);
  color: #ffffff;

  font-size: 0.84rem;
  font-weight: 720;

  cursor: pointer;

  transition:
    transform 250ms var(--ease-premium),
    background 220ms ease,
    box-shadow 220ms ease;
}

.admin-add-portion-button:hover {
  transform: translateY(-2px);

  background: #2c2c2f;

  border-color: #2c2c2f;

  box-shadow: var(--shadow-sm);
}

.admin-extra-portion-row {
  display: grid;

  grid-template-columns: minmax(0, 1fr) 150px 46px;

  align-items: center;

  gap: 9px;

  margin-bottom: 9px;
}

.admin-extra-portion-row input {
  width: 100%;

  min-height: 45px;

  padding: 0 13px;

  border: 1px solid var(--border-strong);
  border-radius: 11px;

  background: #ffffff;
  color: var(--text);

  font-size: 0.88rem;

  outline: none;

  box-shadow: var(--shadow-xs);
}

.admin-extra-portion-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 1px solid rgba(186, 45, 11, 0.35);
  border-radius: 12px;

  background: rgba(186, 45, 11, 0.08);
  color: var(--color-dark-red);

  cursor: pointer;

  transition:
    transform 250ms var(--ease-premium),
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

.admin-extra-portion-delete:hover {
  transform: translateY(-2px);

  background: var(--color-dark-red);
  color: #ffffff;

  box-shadow: 0 8px 20px rgba(186, 45, 11, 0.18);
}

/* =========================================
   DELETE BUTTON
   ========================================= */
/* Purpose: Reusable destructive/delete action styling for menu and admin records. */

.admin-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 40px;

  padding: 0 14px;

  border: 1px solid rgba(186, 45, 11, 0.28);
  border-radius: 11px;

  background: rgba(186, 45, 11, 0.08);
  color: var(--color-dark-red);

  font-size: 0.84rem;
  font-weight: 720;

  cursor: pointer;

  transition:
    transform 250ms var(--ease-premium),
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.admin-delete-button:hover {
  transform: translateY(-2px);

  background: var(--color-dark-red);

  border-color: var(--color-dark-red);

  color: #ffffff;

  box-shadow: 0 8px 20px rgba(186, 45, 11, 0.18);
}

.admin-trash-icon {
  position: relative;

  display: inline-block;

  width: 13px;
  height: 15px;

  flex: 0 0 14px;

  border: 1.7px solid currentColor;
  border-top: none;
  border-radius: 2px;
}

.admin-trash-icon::before {
  content: "";

  position: absolute;

  top: -4px;
  left: -3px;

  width: 17px;
  height: 2px;

  border-radius: 2px;

  background: currentColor;
}

.admin-trash-icon::after {
  content: "";

  position: absolute;

  top: -7px;
  left: 3px;

  width: 6px;
  height: 3px;

  border: 1.7px solid currentColor;
  border-bottom: none;

  border-radius: 3px 3px 0 0;
}

.admin-trash-icon span {
  position: absolute;

  top: 3px;
  left: 4px;

  width: 1px;
  height: 8px;

  background: currentColor;

  box-shadow: 4px 0 currentColor;
}

/* =========================================
   NOTIFICATIONS
   ========================================= */
/* Purpose: Shared in-page notification/toast presentation. JavaScript behavior lives in admin_modal.js. */

.admin-notification {
  position: fixed;
  right: 22px;
  bottom: 22px;

  z-index: 2000;

  width: max-content;
  max-width: min(380px, calc(100vw - 44px));

  padding: 13px 17px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;

  background: linear-gradient(145deg, #222225, #131315);

  color: #ffffff;

  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.45;

  box-shadow:
    0 18px 45px rgba(19, 19, 21, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  opacity: 0;
  visibility: hidden;

  transform: translateY(12px) scale(0.98);

  transition:
    opacity 280ms ease,
    transform 320ms var(--ease-premium),
    visibility 280ms ease;
}

.admin-notification.show {
  opacity: 1;
  visibility: visible;

  transform: translateY(0) scale(1);
}

.admin-notification.success {
  border-left: 3px solid var(--color-red);
}

.admin-notification.error {
  border-left: 3px solid var(--color-dark-red);
}

/* =========================================
   PHOTO MANAGEMENT
   ========================================= */
/* Purpose: Photo library grid, upload controls, thumbnails, and per-photo actions. */

#admin-photos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.admin-photo-card {
  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 18px;

  background: #ffffff;

  box-shadow: var(--shadow-sm);

  transition:
    transform 350ms var(--ease-premium),
    box-shadow 350ms var(--ease-premium),
    border-color 250ms ease;
}

.admin-photo-card:hover {
  transform: translateY(-5px);

  border-color: rgba(19, 19, 21, 0.14);

  box-shadow: var(--shadow);
}

.admin-photo-card img {
  display: block;

  width: 100%;
  aspect-ratio: 1 / 1;

  object-fit: cover;

  background: linear-gradient(135deg, #eeeeef, #fafafa);
}

.admin-photo-info {
  display: flex;
  flex-direction: column;

  gap: 5px;

  padding: 14px 15px 12px;
}

.admin-photo-info h3 {
  margin: 0;

  overflow: hidden;

  color: var(--text);

  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.35;

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

.admin-photo-info span {
  color: var(--text-muted);

  font-size: 0.74rem;
}

.admin-photo-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  padding: 0 14px 14px;
}

.admin-photo-action {
  position: relative;

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

  width: 38px;
  height: 38px;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 11px;

  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  transition:
    transform 240ms var(--ease-premium),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.admin-photo-action[data-tooltip]::after {
  content: attr(data-tooltip);

  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);

  padding: 6px 9px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;

  background: #131315;
  color: #ffffff;

  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  transform: translate(-50%, 4px);

  box-shadow: 0 8px 20px rgba(19, 19, 21, 0.18);

  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 160ms ease;

  z-index: 50;
}

.admin-photo-action[data-tooltip]:hover::after,
.admin-photo-action[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;

  transform: translate(-50%, 0);
}

.admin-photo-assign {
  border-color: var(--color-black);

  background: var(--color-black);
  color: #ffffff;
}

.admin-photo-assign:hover {
  transform: translateY(-2px);

  background: #303033;
  border-color: #303033;

  box-shadow: var(--shadow-sm);
}

.admin-photo-edit {
  border-color: var(--border-strong);

  background: var(--surface-muted);
  color: var(--text);
}

.admin-photo-edit:hover {
  transform: translateY(-2px);

  background: var(--color-gray);
  border-color: var(--color-gray);

  color: #ffffff;

  box-shadow: var(--shadow-sm);
}

.admin-photo-delete {
  border-color: rgba(186, 45, 11, 0.22);

  background: rgba(186, 45, 11, 0.08);
  color: var(--color-dark-red);
}

.admin-photo-delete:hover {
  transform: translateY(-2px);

  background: var(--color-red);
  border-color: var(--color-red);

  color: #ffffff;

  box-shadow: var(--shadow-red);
}

.admin-photo-delete:disabled {
  opacity: 0.35;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;
}

/* =========================================
   PHOTO PREVIEW / SELECTOR
   ========================================= */
/* Purpose: Shared photo preview and selection presentation used by forms and modals. */

.admin-photo-preview-wrapper {
  display: flex;
  align-items: center;

  gap: 16px;

  margin-top: 10px;

  min-width: 0;
}

.admin-photo-preview-wrapper > * {
  flex-shrink: 0;
}

.admin-photo-preview {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 110px;
  height: 110px;

  flex: 0 0 110px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: linear-gradient(135deg, #eeeeef, #fafafa);

  color: var(--text-muted);

  font-size: 13px;

  box-shadow: var(--shadow-xs);
}

.admin-photo-preview img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* Fixed Settings presentation size for restaurant logo. */
#restaurant-logo-preview {
  width: 120px;
  height: 120px;

  flex: 0 0 120px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: linear-gradient(135deg, #eeeeef, #fafafa);

  box-shadow: var(--shadow-xs);
}

#restaurant-logo-preview img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

/* Fixed Settings presentation size for homepage image. */
/* Fixed Settings presentation size for homepage image. */
#restaurant-homepage-preview {
  width: 180px;
  height: 105px;

  flex: 0 0 180px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 14px;

  background: linear-gradient(135deg, #eeeeef, #fafafa);

  box-shadow: var(--shadow-xs);
}

#restaurant-homepage-preview img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* Branding action groups must wrap instead of colliding. */
.admin-photo-preview-wrapper > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  min-width: 0;
}

.admin-select-photo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 43px;

  padding: 0 17px;

  border: 1px solid var(--color-red);
  border-radius: 11px;

  background: var(--color-red);
  color: #ffffff;

  font-size: 0.84rem;
  font-weight: 720;

  cursor: pointer;

  box-shadow: 0 6px 16px rgba(229, 36, 42, 0.13);

  transition:
    transform 240ms var(--ease-premium),
    background 220ms ease,
    box-shadow 220ms ease;
}

.admin-select-photo-button:hover {
  transform: translateY(-2px);

  background: #cf1f25;

  box-shadow: var(--shadow-red);
}

/* Dedicated Settings destructive controls. */
#remove-logo-button,
#remove-homepage-button {
  min-height: 43px;

  padding: 0 15px;

  border: 1px solid rgba(186, 45, 11, 0.28);
  border-radius: 11px;

  background: rgba(186, 45, 11, 0.07);

  color: var(--color-dark-red);

  font-size: 0.82rem;
  font-weight: 720;

  cursor: pointer;

  transition:
    transform 220ms var(--ease-premium),
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

#remove-logo-button:hover,
#remove-homepage-button:hover {
  transform: translateY(-2px);

  background: var(--color-dark-red);

  border-color: var(--color-dark-red);

  color: #ffffff;

  box-shadow: 0 8px 20px rgba(186, 45, 11, 0.18);
}

#remove-logo-button:active,
#remove-homepage-button:active {
  transform: translateY(0);
}

#remove-logo-button:disabled,
#remove-homepage-button:disabled {
  opacity: 0.38;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;
}

/* =========================================
   PHOTO SELECTOR
   ========================================= */
/* Purpose: Photo selection modal layout and gallery controls. */

#photo-search-input {
  margin-bottom: 18px;
  width: 100%;
  box-sizing: border-box;

  padding: 11px 14px 11px 42px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: #ffffff;
  color: var(--text);

  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;

  outline: none;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

#photo-search-input::placeholder {
  color: var(--text-soft);
}

#photo-search-input:focus {
  border-color: var(--color-black);

  box-shadow: 0 0 0 3px rgba(19, 19, 21, 0.08);
}

.admin-photo-select-overlay {
  position: fixed;
  inset: 0;

  z-index: 2000;

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

  padding: 24px;

  background: rgba(13, 13, 15, 0.72);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 280ms ease,
    visibility 280ms ease;
}

.admin-photo-select-overlay.show {
  opacity: 1;
  visibility: visible;
}

.admin-photo-select-modal {
  width: min(900px, 100%);
  height: min(760px, calc(100vh - 48px));

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xl);

  background: #ffffff;

  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.03);

  transform: translateY(16px) scale(0.965);

  transition: transform 380ms var(--ease-premium);
}

.admin-photo-select-overlay.show .admin-photo-select-modal {
  transform: translateY(0) scale(1);
}

.admin-photo-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  flex-shrink: 0;

  padding: 21px 25px;

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

  background: #ffffff;
}

.admin-photo-select-header h2 {
  margin: 0;

  color: var(--text);

  font-size: 1.25rem;
  font-weight: 790;
  letter-spacing: -0.025em;
}

.admin-photo-select-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 39px;
  height: 39px;

  flex-shrink: 0;

  padding: 0;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: var(--surface-soft);
  color: var(--text);

  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  transition:
    transform 260ms var(--ease-premium),
    background 220ms ease,
    border-color 220ms ease;
}

.admin-photo-select-close:hover {
  transform: rotate(90deg);

  background: rgba(229, 36, 42, 0.08);
  border-color: rgba(229, 36, 42, 0.18);
  color: var(--color-red);
}

.admin-photo-select-close .admin-icon {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}

.admin-photo-select-close:hover .admin-icon {
  transform: scale(1.05);
}

.admin-photo-select-gallery {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;

  gap: 14px;

  flex: 1 1 auto;

  min-height: 0;

  padding: 22px 25px;

  overflow-y: auto;

  overscroll-behavior: contain;

  background:
    radial-gradient(circle at top, rgba(229, 36, 42, 0.025), transparent 40%),
    #f7f7f8;
}

.admin-photo-select-gallery > p {
  grid-column: 1 / -1;

  margin: 0;

  padding: 50px 20px;

  color: var(--text-muted);

  font-size: 0.88rem;

  text-align: center;
}

.admin-photo-select-option {
  position: relative;

  display: block;

  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  padding: 0;

  border: 2px solid transparent;
  border-radius: 15px;

  background: var(--surface-muted);

  cursor: pointer;

  box-shadow: var(--shadow-xs);

  transition:
    transform 260ms var(--ease-premium),
    border-color 220ms ease,
    box-shadow 260ms ease;
}

.admin-photo-select-option:hover {
  transform: translateY(-3px);

  border-color: rgba(229, 36, 42, 0.4);

  box-shadow: var(--shadow-sm);
}

.admin-photo-select-option.selected {
  border-color: var(--color-red);

  box-shadow:
    0 0 0 3px rgba(229, 36, 42, 0.12),
    var(--shadow-sm);
}

.admin-photo-select-option img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================================
   MODAL OVERLAYS
   ========================================= */
/* Purpose: Shared modal backdrop and dialog surface behavior. */

.admin-modal-overlay,
.admin-photo-assignment-overlay,
.admin-photo-editor-overlay {
  position: fixed;
  inset: 0;

  z-index: 2000;

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

  padding: 24px;

  background: rgba(13, 13, 15, 0.68);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 280ms ease,
    visibility 280ms ease;
}

.admin-modal-overlay.show,
.admin-photo-assignment-overlay.show,
.admin-photo-editor-overlay.show {
  opacity: 1;
  visibility: visible;
}

.admin-delete-modal,
.admin-photo-assignment-modal {
  width: min(100%, 430px);

  padding: 29px;

  border: 1px solid var(--border);
  border-radius: 22px;

  background: linear-gradient(145deg, #ffffff, #fafafa);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.28),
    var(--shadow-lg);

  transform: translateY(14px) scale(0.965);

  transition: transform 360ms var(--ease-premium);
}

.admin-modal-overlay.show .admin-delete-modal,
.admin-photo-assignment-overlay.show .admin-photo-assignment-modal {
  transform: translateY(0) scale(1);
}

.admin-delete-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  margin-bottom: 18px;

  border: 1px solid rgba(186, 45, 11, 0.12);
  border-radius: 14px;

  background: rgba(186, 45, 11, 0.08);

  color: var(--color-dark-red);

  font-size: 1.2rem;
  font-weight: 900;
}

.admin-delete-modal h2,
.admin-photo-assignment-modal h2 {
  margin: 0 0 9px;

  color: var(--text);

  font-size: 1.3rem;
  font-weight: 790;
  letter-spacing: -0.025em;
}

.admin-delete-modal p,
.admin-photo-assignment-modal p {
  margin: 0;

  color: var(--text-soft);

  font-size: 0.9rem;
  line-height: 1.6;
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 25px;
}

.admin-modal-cancel,
.admin-modal-delete,
.admin-modal-assign {
  min-height: 45px;

  padding: 0 17px;

  border-radius: 11px;

  font-size: 0.86rem;
  font-weight: 750;

  cursor: pointer;

  transition:
    transform 220ms var(--ease-premium),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.admin-modal-cancel {
  border: 1px solid var(--border-strong);

  background: #ffffff;
  color: var(--text);
}

.admin-modal-cancel:hover {
  transform: translateY(-1px);

  background: var(--surface-soft);
}

.admin-modal-cancel .admin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
}

.admin-modal-delete,
.admin-modal-assign {
  border: 1px solid var(--color-red);

  background: var(--color-red);
  color: #ffffff;

  box-shadow: 0 5px 14px rgba(229, 36, 42, 0.12);
}

.admin-modal-delete:hover,
.admin-modal-assign:hover {
  transform: translateY(-2px);

  background: var(--color-dark-red);

  border-color: var(--color-dark-red);

  box-shadow: var(--shadow-red);
}

/* =========================================
   PHOTO EDITOR
   ========================================= */
/* Purpose: Photo editing modal layout, toolbar, and save/cancel controls. */

.admin-photo-editor-modal {
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);

  overflow: hidden;

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

  border-radius: var(--radius-xl);

  background: #ffffff;

  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.35),
    var(--shadow-lg);
}

.admin-photo-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding: 23px 27px;

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

.admin-photo-editor-header h2 {
  margin: 2px 0 5px;

  color: var(--text);

  font-size: 1.3rem;
  font-weight: 790;
  letter-spacing: -0.025em;
}

.admin-photo-editor-header p {
  margin: 0;

  color: var(--text-muted);

  font-size: 0.8rem;
}

.admin-photo-editor-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 39px;
  height: 39px;

  padding: 0;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: var(--surface-soft);
  color: var(--text);

  font-size: 1.4rem;
  line-height: 1;

  cursor: pointer;

  transition:
    transform 260ms var(--ease-premium),
    background 220ms ease;
}

.admin-photo-editor-close:hover {
  transform: rotate(90deg);

  background: var(--surface-muted);
}

.admin-photo-editor-body {
  display: grid;

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

  min-height: 420px;

  background:
    radial-gradient(
      circle at center,
      rgba(229, 36, 42, 0.025),
      transparent 55%
    ),
    #f5f5f6;
}

.admin-photo-editor-preview {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;

  padding: 30px;
}

.admin-photo-editor-preview img {
  display: block;

  max-width: 100%;
  max-height: 500px;

  object-fit: contain;

  border-radius: 13px;

  box-shadow:
    0 15px 38px rgba(19, 19, 21, 0.16),
    0 2px 8px rgba(19, 19, 21, 0.06);
}

.admin-photo-editor-tools {
  display: flex;
  flex-direction: column;

  gap: 8px;

  padding: 22px;

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

  background: #ffffff;
}

.admin-photo-editor-tools button {
  width: 100%;

  min-height: 43px;

  padding: 0 13px;

  border: 1px solid var(--border-strong);
  border-radius: 11px;

  background: #ffffff;
  color: var(--text);

  font-size: 0.82rem;
  font-weight: 680;

  cursor: pointer;

  transition:
    transform 220ms var(--ease-premium),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.admin-photo-editor-tools button:hover {
  transform: translateY(-1px);

  background: var(--surface-soft);

  border-color: rgba(19, 19, 21, 0.2);

  box-shadow: var(--shadow-xs);
}

.admin-photo-editor-footer {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  padding: 17px 27px;

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

  background: #ffffff;
}

/* =========================================
   PHOTO CROP
   ========================================= */
/* Purpose: Crop-specific editor controls and visual feedback. */

.admin-photo-crop-stage {
  position: relative;

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

  width: 100%;
  height: 100%;

  min-height: 360px;

  overflow: hidden;
}

.admin-photo-editor-image {
  display: block;

  max-width: 100%;
  max-height: 500px;

  object-fit: contain;

  user-select: none;
  -webkit-user-drag: none;

  border-radius: 12px;

  transition: transform 400ms var(--ease-premium);
}

.admin-photo-crop-box {
  position: absolute;

  z-index: 5;

  min-width: 60px;
  min-height: 60px;

  box-sizing: border-box;

  border: 2px solid #ffffff;

  background: rgba(19, 19, 21, 0.15);

  box-shadow:
    0 0 0 9999px rgba(19, 19, 21, 0.46),
    0 4px 15px rgba(19, 19, 21, 0.18);

  cursor: move;

  touch-action: none;
}

.admin-photo-crop-handle {
  position: absolute;

  width: 14px;
  height: 14px;

  border: 2px solid #ffffff;
  border-radius: 4px;

  background: var(--color-red);

  box-shadow: 0 2px 8px rgba(19, 19, 21, 0.25);
}

.admin-photo-crop-handle.handle-nw {
  top: -8px;
  left: -8px;

  cursor: nwse-resize;
}

.admin-photo-crop-handle.handle-ne {
  top: -8px;
  right: -8px;

  cursor: nesw-resize;
}

.admin-photo-crop-handle.handle-sw {
  bottom: -8px;
  left: -8px;

  cursor: nesw-resize;
}

.admin-photo-crop-handle.handle-se {
  right: -8px;
  bottom: -8px;

  cursor: nwse-resize;
}

/* =========================================
   PHOTO ASSIGNMENT
   ========================================= */
/* Purpose: Modal used to assign a photo to a menu item. */

.admin-photo-assignment-select,
.admin-photo-assignment-search {
  width: 100%;

  box-sizing: border-box;

  min-height: 45px;

  padding: 0 13px;

  border: 1px solid var(--border-strong);
  border-radius: 11px;

  background: #ffffff;
  color: var(--text);

  font-size: 0.88rem;

  outline: none;

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.admin-photo-assignment-select:focus,
.admin-photo-assignment-search:focus {
  border-color: rgba(229, 36, 42, 0.65);

  box-shadow: 0 0 0 4px rgba(229, 36, 42, 0.07);
}

.admin-photo-assignment-search {
  margin-top: 17px;
}

.admin-photo-assignment-list {
  display: flex;
  flex-direction: column;

  gap: 5px;

  max-height: 280px;

  margin-top: 11px;
  padding: 4px;

  overflow-y: auto;

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

  border-radius: 13px;

  background: var(--surface-soft);
}

.admin-photo-assignment-item {
  width: 100%;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 9px;

  background: transparent;
  color: var(--text);

  font-size: 0.84rem;
  font-weight: 620;

  text-align: left;

  cursor: pointer;

  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.admin-photo-assignment-item:hover {
  background: #ffffff;

  border-color: var(--border);
}

.admin-photo-assignment-item.selected {
  background: var(--color-black);

  border-color: var(--color-black);

  color: #ffffff;

  box-shadow: var(--shadow-xs);
}

.admin-photo-assignment-empty {
  margin: 0;

  padding: 20px 14px;

  color: var(--text-muted);

  font-size: 0.83rem;

  text-align: center;
}

.admin-photo-assignment-selected {
  margin: 9px 2px 0;

  color: var(--text-muted);

  font-size: 0.76rem;
  font-weight: 650;
}

/* =========================================
   CATEGORY MANAGEMENT
   ========================================= */
/* Purpose: Category list, actions, and ordering presentation. */

.admin-category-list {
  display: flex;
  flex-direction: column;

  gap: 9px;
}

.admin-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 15px 17px;

  border: 1px solid var(--border);
  border-radius: 15px;

  background: #ffffff;

  box-shadow: var(--shadow-xs);

  transition:
    transform 260ms var(--ease-premium),
    border-color 220ms ease,
    box-shadow 260ms ease;
}

.admin-category-row:hover {
  transform: translateY(-2px);

  border-color: rgba(19, 19, 21, 0.15);

  box-shadow: var(--shadow-sm);
}

.admin-category-information {
  min-width: 0;
}

.admin-category-information h3 {
  margin: 0;

  color: var(--text);

  font-size: 0.94rem;
  font-weight: 730;
}

.admin-category-information span {
  display: block;

  margin-top: 4px;

  color: var(--text-muted);

  font-size: 0.74rem;
  font-weight: 620;
}

.admin-category-actions {
  display: flex;
  align-items: center;

  gap: 7px;

  flex-shrink: 0;
}

.admin-category-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 37px;
  height: 37px;

  padding: 0;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: #ffffff;
  color: var(--text);

  font-size: 0.88rem;

  cursor: pointer;

  transition:
    transform 220ms var(--ease-premium),
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.admin-category-action:hover {
  transform: translateY(-2px);

  background: var(--color-black);

  border-color: var(--color-black);

  color: #ffffff;
}

.admin-category-delete {
  border-color: rgba(186, 45, 11, 0.18);

  color: var(--color-dark-red);
}

.admin-category-delete:hover {
  background: var(--color-dark-red);

  border-color: var(--color-dark-red);

  color: #ffffff;
}

/* =========================================
   CATEGORY MODALS
   ========================================= */
/* Purpose: Category create/edit modal layout and photo-mode controls. */

.admin-category-modal-overlay,
.admin-category-delete-overlay {
  position: fixed;
  inset: 0;

  z-index: 1500;

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

  padding: 24px;

  background: rgba(13, 13, 15, 0.6);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 260ms ease,
    visibility 260ms ease;
}

.admin-category-modal-overlay.show,
.admin-category-delete-overlay.show {
  opacity: 1;
  visibility: visible;
}

.admin-category-modal,
.admin-category-delete-modal {
  width: min(100%, 460px);

  padding: 27px;

  border: 1px solid var(--border);
  border-radius: 20px;

  background: #ffffff;

  box-shadow: var(--shadow-lg);
}

.admin-category-modal h2,
.admin-category-delete-modal h2 {
  margin: 0;

  color: var(--text);

  font-size: 1.23rem;
  font-weight: 790;
}

.admin-category-modal > p,
.admin-category-delete-modal > p {
  margin: 8px 0 0;

  color: var(--text-soft);

  font-size: 0.83rem;
  line-height: 1.55;
}

.admin-category-form {
  margin-top: 21px;
}

.admin-category-form-label {
  display: block;

  margin-bottom: 8px;

  color: var(--text);

  font-size: 0.77rem;
  font-weight: 750;
}

.admin-category-form-input {
  display: block;

  width: 100%;

  min-height: 47px;

  padding: 0 13px;

  border: 1px solid var(--border-strong);
  border-radius: 11px;

  background: #ffffff;
  color: var(--text);

  font-size: 0.88rem;

  outline: none;

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.admin-category-form-input:focus {
  border-color: rgba(229, 36, 42, 0.65);

  box-shadow: 0 0 0 4px rgba(229, 36, 42, 0.07);
}

.admin-category-delete-warning {
  margin-top: 14px !important;

  padding: 11px 13px;

  border-left: 3px solid var(--color-red);
  border-radius: 8px;

  background: rgba(229, 36, 42, 0.055);

  color: var(--text) !important;
}

/* =========================================
   ADMIN MENU VIEW
   ========================================= */
/* Purpose: Menu View configuration controls and preview presentation. */

.admin-menu-view {
  margin-bottom: 24px;
}

.admin-menu-view-card {
  position: relative;

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

  gap: 24px;

  padding: 29px 30px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-large);

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(255, 255, 255, 0.13),
      transparent 28%
    ),
    linear-gradient(135deg, #e5242a 0%, #ba2d0b 100%);

  color: #ffffff;

  text-decoration: none;

  box-shadow: var(--shadow-red);

  transition:
    transform 400ms var(--ease-premium),
    box-shadow 400ms var(--ease-premium);
}

.admin-menu-view-card::after {
  content: "";

  position: absolute;

  right: -70px;
  bottom: -90px;

  width: 240px;
  height: 240px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 50%;
}

.admin-menu-view-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 22px 48px rgba(229, 36, 42, 0.22);
}

.admin-menu-view-eyebrow {
  margin: 0 0 6px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 0.68rem;
  font-weight: 800;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-menu-view-card h2 {
  margin: 0 0 6px;

  font-size: 1.48rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.admin-menu-view-card p:last-child {
  margin: 0;

  color: rgba(255, 255, 255, 0.83);

  font-size: 0.85rem;
  line-height: 1.5;
}

.admin-menu-view-arrow {
  flex-shrink: 0;

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

  width: 43px;
  height: 43px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;

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

  font-size: 21px;

  transition:
    transform 300ms var(--ease-premium),
    background 220ms ease;
}

.admin-menu-view-card:hover .admin-menu-view-arrow {
  transform: translateX(4px);

  background: rgba(255, 255, 255, 0.2);
}

.admin-menu-category-wrapper {
  position: relative;
}

.admin-menu-options-button {
  position: absolute;
  top: 12px;
  right: 12px;

  width: 39px;
  height: 39px;

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

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;

  background: rgba(19, 19, 21, 0.72);
  color: #e0e0e2;

  font-size: 21px;

  cursor: pointer;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);

  backdrop-filter: blur(9px);

  transition:
    transform 220ms var(--ease-premium),
    background 220ms ease,
    border-color 220ms ease;
}

.admin-menu-options-button:hover {
  transform: scale(1.05);

  background: rgba(19, 19, 21, 0.9);

  border-color: rgba(255, 255, 255, 0.28);
}

.admin-menu-options {
  position: absolute;
  top: 58px;
  right: 12px;

  min-width: 175px;

  display: none;
  flex-direction: column;

  padding: 6px;

  background: linear-gradient(145deg, #242427, #131315);

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;

  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);

  z-index: 20;
}

.admin-menu-options.is-open {
  display: flex;
}

.admin-menu-options button {
  width: 100%;

  padding: 10px 12px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: #dedee1;

  font-size: 0.82rem;
  font-weight: 620;

  text-align: left;

  cursor: pointer;

  transition:
    background 180ms ease,
    color 180ms ease;
}

.admin-menu-options button:hover {
  background: rgba(255, 255, 255, 0.08);

  color: #ffffff;
}

.admin-menu-items {
  display: flex;
  flex-direction: column;

  gap: 12px;

  margin-top: 13px;
}

.admin-menu-item-card {
  position: relative;

  width: 100%;

  padding: 18px;

  border: 1px solid rgba(224, 224, 226, 0.075);
  border-radius: 15px;

  background: linear-gradient(145deg, #202023, #18181b);

  color: #e0e0e2;

  box-shadow: 0 7px 22px rgba(19, 19, 21, 0.08);

  transition:
    transform 280ms var(--ease-premium),
    border-color 220ms ease,
    box-shadow 280ms ease;
}

.admin-menu-item-card:hover {
  transform: translateY(-2px);

  border-color: rgba(229, 36, 42, 0.28);

  box-shadow: 0 12px 28px rgba(19, 19, 21, 0.14);
}

.admin-menu-item-info {
  display: flex;
  flex-direction: column;

  gap: 7px;
}

.admin-menu-item-info h3 {
  margin: 0;

  color: #f0f0f1;

  font-size: 1.05rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.admin-menu-item-info p {
  margin: 0;

  color: #a7a7ab;

  font-size: 0.87rem;
  line-height: 1.55;
}

.admin-menu-item-price {
  margin-top: 4px;

  color: #e5242a;

  font-size: 0.98rem;
  font-weight: 780;
}

/* =========================================
   LOGIN
   ========================================= */
/* Purpose: Authentication page layout and form presentation. */

.admin-login-page {
  position: relative;

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

  min-height: 100vh;
  min-height: 100svh;
  margin: 0;

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

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(229, 36, 42, 0.13),
      transparent 28%
    ),
    radial-gradient(circle at 85% 85%, rgba(186, 45, 11, 0.1), transparent 30%),
    #101012;

  color: var(--color-light);
}

.admin-login-page::before {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.015) 50%,
    transparent 100%
  );

  pointer-events: none;
}

.login-container {
  position: relative;
  z-index: 1;

  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

  padding: 24px;

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

.login-card {
  width: 100%;
  max-width: 430px;

  padding: 39px;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;

  background: linear-gradient(
    145deg,
    rgba(31, 31, 34, 0.98),
    rgba(23, 23, 26, 0.98)
  );

  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.login-header {
  margin-bottom: 31px;

  text-align: center;
}

.login-logo {
  display: inline-flex;
  align-items: center;

  margin-bottom: 23px;

  color: var(--color-red);

  font-size: 1.4rem;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.login-logo::before {
  content: "";

  width: 7px;
  height: 7px;

  margin-right: 8px;

  border-radius: 50%;

  background: var(--color-red);

  box-shadow:
    0 0 0 4px rgba(229, 36, 42, 0.1),
    0 0 18px rgba(229, 36, 42, 0.45);
}

.login-header h1 {
  margin: 0 0 8px;

  color: #ffffff;

  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.login-header p {
  margin: 0;

  color: #999a9e;

  font-size: 0.86rem;
  line-height: 1.55;
}

.login-form {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

.login-form .form-group {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.login-form label {
  color: #dedee1;

  font-size: 0.8rem;
  font-weight: 680;
}

.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  width: 100%;

  min-height: 49px;

  padding: 0 14px;

  border: 1px solid #37373b;
  border-radius: 12px;

  background: #131315;
  color: var(--color-light);

  font-size: 0.9rem;

  outline: none;

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.login-form input::placeholder {
  color: #68696d;
}

.login-form input:hover {
  border-color: #49494d;
}

.login-form input:focus {
  border-color: rgba(229, 36, 42, 0.7);

  background: #17171a;

  box-shadow:
    0 0 0 4px rgba(229, 36, 42, 0.08),
    inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.login-button {
  width: 100%;

  min-height: 50px;

  margin-top: 4px;

  padding: 0 14px;

  border: 1px solid var(--color-red);
  border-radius: 12px;

  background: linear-gradient(180deg, #ef3338, #e5242a);

  color: #ffffff;

  font-size: 0.9rem;
  font-weight: 760;

  cursor: pointer;

  box-shadow:
    0 9px 24px rgba(229, 36, 42, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);

  transition:
    transform 260ms var(--ease-premium),
    box-shadow 260ms ease,
    filter 220ms ease;
}

.login-button:hover {
  transform: translateY(-2px);

  filter: brightness(1.04);

  box-shadow:
    0 14px 30px rgba(229, 36, 42, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.login-button:active {
  transform: translateY(0);
}

/* =========================================
   CREATE QR
   ========================================= */
/* Purpose: QR creation page base structure and controls. */

.admin-create-qr {
  margin-top: 20px;
}

.admin-create-qr-card {
  position: relative;

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

  gap: 24px;

  padding: 28px 30px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-large);

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(229, 36, 42, 0.15),
      transparent 28%
    ),
    linear-gradient(135deg, #171719, #131315);

  color: #ffffff;

  text-decoration: none;

  box-shadow: 0 14px 36px rgba(19, 19, 21, 0.14);

  transition:
    transform 400ms var(--ease-premium),
    box-shadow 400ms var(--ease-premium),
    border-color 300ms ease;
}

.admin-create-qr-card:hover {
  transform: translateY(-4px);

  border-color: rgba(229, 36, 42, 0.32);

  box-shadow: 0 24px 55px rgba(19, 19, 21, 0.2);
}

.admin-create-qr-eyebrow {
  margin: 0 0 6px;

  color: var(--color-red);

  font-size: 0.68rem;
  font-weight: 850;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-create-qr-card h2 {
  margin: 0 0 8px;

  font-size: 1.38rem;
  font-weight: 790;
  letter-spacing: -0.025em;
}

.admin-create-qr-card p:last-child {
  margin: 0;

  color: #999a9e;

  font-size: 0.86rem;
  line-height: 1.5;
}

.admin-create-qr-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 43px;
  height: 43px;

  flex-shrink: 0;

  border: 1px solid rgba(229, 36, 42, 0.14);
  border-radius: 50%;

  background: rgba(229, 36, 42, 0.12);

  color: var(--color-red);

  font-size: 21px;

  transition:
    transform 300ms var(--ease-premium),
    background 220ms ease;
}

.admin-create-qr-card:hover .admin-create-qr-arrow {
  transform: translateX(4px);

  background: rgba(229, 36, 42, 0.2);
}

/* =========================================
   LABELS
   ========================================= */
/* Purpose: Label management list and action presentation. */

.labels-grid {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 16px;
}

.label-card {
  position: relative;

  padding: 18px;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: #ffffff;

  box-shadow: var(--shadow-xs);

  transition:
    transform 280ms var(--ease-premium),
    border-color 220ms ease,
    box-shadow 280ms ease;
}

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

  border-color: rgba(19, 19, 21, 0.14);

  box-shadow: var(--shadow-sm);
}

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

  gap: 12px;

  margin-bottom: 12px;
}

.label-name {
  margin: 0;

  color: var(--text);

  font-size: 1.05rem;
  font-weight: 780;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.label-status {
  flex-shrink: 0;

  padding: 5px 9px;

  border-radius: 999px;

  background: var(--surface-muted);
  color: var(--text-soft);

  font-size: 0.68rem;
  font-weight: 760;
}

.label-status.active {
  background: #e7f6ec;
  color: #176b35;
}

.label-description {
  min-height: 42px;

  margin: 0 0 15px;

  color: var(--text-soft);

  font-size: 0.85rem;
  line-height: 1.55;
}

.label-preview {
  display: inline-flex;
  align-items: center;

  margin-bottom: 15px;

  padding: 6px 10px;

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

  color: var(--text);

  font-size: 0.73rem;
  font-weight: 750;
}

.label-preview-badge {
  border-radius: 6px;
}

.label-preview-pill {
  border-radius: 999px;
}

.label-preview-ribbon {
  position: relative;

  border-radius: 4px 10px 10px 4px;

  padding-left: 14px;
  padding-right: 14px;
}

.label-preview-ribbon::before {
  content: "";

  position: absolute;
  left: -1px;
  top: 0;

  width: 4px;
  height: 100%;

  border-radius: 4px 0 0 4px;

  background: rgba(255, 255, 255, 0.7);
}

.label-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 5px;

  margin-bottom: 14px;
}

.label-option {
  padding: 5px 8px;

  border-radius: 7px;

  background: var(--surface-muted);
  color: var(--text-soft);

  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1;
}

.label-actions {
  display: flex;

  gap: 7px;

  padding-top: 2px;

  border-top: 1px solid rgba(19, 19, 21, 0.06);
}

.label-actions button {
  flex: 1;
}

.label-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.label-actions .admin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.label-close-button .admin-icon {
  width: 19px;
  height: 19px;
}

.secondary-button,
.danger-button {
  min-height: 41px;

  padding: 0 13px;

  border-radius: 11px;

  font-size: 0.82rem;
  font-weight: 720;

  cursor: pointer;

  transition:
    transform 240ms var(--ease-premium),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.secondary-button {
  border: 1px solid var(--border-strong);

  background: #ffffff;
  color: var(--text);
}

.secondary-button:hover {
  transform: translateY(-2px);

  background: var(--surface-muted);

  box-shadow: var(--shadow-xs);
}

.danger-button {
  border: 1px solid rgba(186, 45, 11, 0.3);

  background: rgba(186, 45, 11, 0.08);
  color: var(--color-dark-red);
}

.danger-button:hover {
  transform: translateY(-2px);

  background: var(--color-red);

  border-color: var(--color-red);

  color: #ffffff;

  box-shadow: var(--shadow-red);
}

.empty-state {
  padding: 48px 24px;

  border: 1px dashed rgba(19, 19, 21, 0.18);
  border-radius: 16px;

  background: linear-gradient(145deg, #ffffff, #fafafa);

  text-align: center;
}

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

  color: var(--text);

  font-size: 1.08rem;
  font-weight: 760;
}

.empty-state p {
  margin: 0;

  color: var(--text-soft);

  font-size: 0.86rem;
}

/* =========================================
   LABEL MODAL
   ========================================= */
/* Purpose: Create/edit label dialog and form controls. */

.label-modal-backdrop {
  position: fixed;
  inset: 0;

  z-index: 2000;

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

  padding: 20px;

  background: rgba(13, 13, 15, 0.68);

  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 280ms ease,
    visibility 280ms ease;
}

.label-modal-backdrop.open {
  display: flex;

  opacity: 1;
  visibility: visible;
}

.label-modal {
  width: min(620px, 100%);

  max-height: calc(100vh - 40px);

  overflow-y: auto;

  border: 1px solid var(--border);
  border-radius: var(--radius-large);

  background: #ffffff;

  box-shadow: var(--shadow-lg);

  transform: translateY(14px) scale(0.965);

  transition: transform 360ms var(--ease-premium);
}

.label-modal-backdrop.open .label-modal {
  transform: translateY(0) scale(1);
}

.label-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 20px;

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

.label-modal-header h2 {
  margin: 0;

  color: var(--text);

  font-size: 1.18rem;
  font-weight: 790;
}

.label-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 0;
  border-radius: 10px;

  background: var(--surface-muted);
  color: var(--text);

  font-size: 1.25rem;

  cursor: pointer;

  transition:
    transform 240ms var(--ease-premium),
    background 200ms ease,
    color 200ms ease;
}

.label-close-button:hover {
  transform: rotate(90deg);

  background: rgba(229, 36, 42, 0.08);
  color: var(--color-red);
}

.label-close-button:hover .admin-icon {
  transform: scale(1.05);
}

.label-cancel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.label-cancel-button .admin-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.label-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.label-save-button .admin-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.label-modal-body {
  padding: 20px;
}

.label-form-grid {
  display: grid;

  gap: 17px;
}

.label-form-group {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.label-form-group label {
  color: var(--text);

  font-size: 0.82rem;
  font-weight: 750;
}

.label-form-group input,
.label-form-group textarea,
.label-form-group select {
  width: 100%;

  min-height: 49px;

  padding: 12px 14px;

  border: 1px solid var(--border-strong);
  border-radius: 12px;

  background: #fafafa;
  color: var(--text);

  font-size: 0.9rem;

  outline: none;

  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.label-form-group textarea {
  min-height: 120px;

  resize: vertical;

  line-height: 1.6;
}

.label-form-group input:hover,
.label-form-group textarea:hover,
.label-form-group select:hover {
  border-color: rgba(19, 19, 21, 0.2);

  background: #ffffff;
}

.label-form-group input:focus,
.label-form-group textarea:focus,
.label-form-group select:focus {
  border-color: rgba(229, 36, 42, 0.7);

  background: #ffffff;

  box-shadow: 0 0 0 4px rgba(229, 36, 42, 0.07);
}

.label-checkbox-grid {
  display: grid;

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

  gap: 9px;
}

.label-checkbox-item {
  display: flex;
  align-items: center;

  gap: 8px;

  padding: 10px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: #ffffff;

  cursor: pointer;

  transition:
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease;
}

.label-checkbox-item:hover {
  border-color: rgba(229, 36, 42, 0.3);

  background: #fafafa;
}

.label-checkbox-item input {
  width: auto;
  min-height: auto;

  accent-color: var(--color-red);
}

.label-checkbox-item span {
  color: var(--text);

  font-size: 0.77rem;
  font-weight: 650;
}

.label-popup-fields {
  display: none;

  gap: 17px;
}

.label-popup-fields.open {
  display: grid;
}

.label-modal-footer {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  padding: 16px 20px 20px;

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

.label-modal-footer button {
  min-height: 45px;

  padding: 0 18px;

  border-radius: 11px;

  font-size: 0.84rem;
  font-weight: 750;

  cursor: pointer;

  transition:
    transform 220ms var(--ease-premium),
    background 200ms ease,
    box-shadow 200ms ease;
}

.label-cancel-button {
  border: 1px solid var(--border-strong);

  background: #ffffff;
  color: var(--text);
}

.label-cancel-button:hover {
  transform: translateY(-1px);

  background: var(--surface-muted);
}

.label-save-button {
  border: 1px solid var(--color-black);

  background: var(--color-black);
  color: #ffffff;

  box-shadow: var(--shadow-xs);
}

.label-save-button:hover {
  transform: translateY(-2px);

  background: #303033;

  border-color: #303033;

  box-shadow: var(--shadow-sm);
}

.label-message {
  display: none;

  margin-bottom: 17px;

  padding: 11px 13px;

  border-radius: 10px;

  font-size: 0.83rem;
  font-weight: 650;
}

.label-message.show {
  display: block;
}

.label-message.success {
  background: #e7f6ec;
  color: #176b35;
}

.label-message.error {
  background: #fff0ef;
  color: #b42318;
}

/* =========================================
   LABEL COLORS
   ========================================= */
/* Purpose: Reusable label color choices and visual states. */

.label-color-grid {
  display: grid;

  grid-template-columns: repeat(5, 42px);

  gap: 10px;

  margin-top: 8px;
}

.label-color-option {
  width: 42px;
  height: 42px;

  padding: 0;

  border: 3px solid transparent;
  border-radius: 10px;

  background: var(--label-color);

  cursor: pointer;

  box-shadow: var(--shadow-xs);

  transition:
    transform 180ms var(--ease-premium),
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.label-color-option:hover {
  transform: translateY(-2px) scale(1.03);

  box-shadow: var(--shadow-sm);
}

.label-color-option.selected {
  border-color: var(--color-black);

  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--color-black),
    var(--shadow-sm);
}

/* =========================================
   ADMIN ITEM LABEL SELECTOR
   ========================================= */
/* Purpose: Label selection UI used while editing menu items. */

.admin-label-selector {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 8px;
}

.admin-label-option {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding: 8px 11px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: #ffffff;
  color: var(--text);

  font-size: 0.81rem;
  font-weight: 650;

  cursor: pointer;

  box-shadow: var(--shadow-xs);

  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms var(--ease-premium),
    box-shadow 180ms ease;
}

.admin-label-option:hover {
  transform: translateY(-1px);

  border-color: rgba(19, 19, 21, 0.18);

  box-shadow: var(--shadow-sm);
}

.admin-label-option.selected {
  border-color: var(--color-black);

  background: var(--color-black);

  color: var(--color-light);

  box-shadow: 0 5px 14px rgba(19, 19, 21, 0.12);
}

.admin-label-option-color {
  width: 11px;
  height: 11px;

  flex-shrink: 0;

  border-radius: 50%;

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.admin-label-option-name {
  line-height: 1;
}

.admin-label-selector-empty {
  margin: 0;

  color: var(--text-muted);

  font-size: 0.83rem;
}

/* =========================================
   RESPONSIVE
   ========================================= */
/* Purpose: Responsive Support-page layout adjustments. */

@media (max-width: 900px) {
  .admin-nav {
    gap: 2px;
  }

  .admin-nav a,
  .admin-nav button {
    padding: 8px 9px;

    font-size: 0.78rem;
  }

  #admin-photos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .admin-header-inner {
    align-items: flex-start;
    flex-direction: column;

    padding: 15px 0;
  }

  .admin-nav {
    width: 100%;

    display: grid;

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

    gap: 4px;

    padding-bottom: 2px;
  }

  .admin-nav form {
    margin: 0;
  }

  .admin-nav form button {
    width: 100%;
  }

  .admin-main,
  .admin-container {
    padding: 35px 0 50px;
  }

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

    flex-direction: column;

    margin-bottom: 28px;
  }

  .admin-page-header h1 {
    font-size: 2rem;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-section {
    padding: 22px;
    border-radius: 16px;
  }

  .admin-section-header {
    align-items: flex-start;

    flex-direction: column;
  }

  .admin-primary-button {
    width: 100%;
  }

  .admin-item-filters {
    grid-template-columns: 1fr;
  }

  .admin-item-card {
    align-items: flex-start;

    flex-wrap: wrap;
  }

  .admin-item-actions {
    width: 100%;
  }

  .admin-extra-portion-row {
    grid-template-columns: minmax(0, 1fr) 100px 42px;
  }

  .admin-photo-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #admin-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-photo-editor-body {
    grid-template-columns: 1fr;
  }

  .admin-photo-editor-tools {
    flex-direction: row;

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

  .admin-photo-editor-tools button {
    flex: 1;
  }

  .admin-photo-editor-preview {
    min-height: 300px;
  }
}

@media (max-width: 600px) {
  .branding-image-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .branding-image-actions .admin-primary-button,
  .branding-image-actions .admin-secondary-button {
    width: 100%;
  }

  .admin-photo-preview-wrapper {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-photo-preview-wrapper > div {
    width: 100%;
  }

  #restaurant-logo-preview {
    width: 110px;
    height: 110px;
    flex-basis: 110px;
  }

  #restaurant-homepage-preview {
    width: 180px;
    height: 105px;
    flex: 0 0 180px;
  }

  .admin-logout-form {
    margin-left: 10px;
    padding-left: 10px;
  }

  .admin-logout-button {
    min-height: 40px;
    padding: 0 12px;
  }

  .admin-logout-button span:last-child {
    display: none;
  }
}

@media (max-width: 640px) {
  .labels-grid {
    grid-template-columns: 1fr;
  }

  .label-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .label-modal-backdrop {
    padding: 10px;
  }

  .label-modal {
    max-height: calc(100vh - 20px);
  }

  .label-modal-footer {
    flex-direction: column-reverse;
  }

  .label-modal-footer button {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .admin-photo-select-overlay {
    padding: 10px;
  }

  .admin-photo-select-modal {
    width: 100%;
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);

    border-radius: 20px;
  }

  .admin-photo-select-header {
    padding: 17px 19px;
  }

  .admin-photo-select-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    padding: 14px;
  }

  .admin-main,
  .admin-container {
    width: min(calc(100% - 24px), var(--max-width));
  }

  .admin-card {
    padding: 20px;
  }

  .admin-photo-preview-wrapper {
    align-items: flex-start;

    flex-direction: column;
  }

  .admin-photo-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #admin-photos {
    gap: 12px;
  }

  .admin-modal-overlay,
  .admin-photo-assignment-overlay,
  .admin-photo-editor-overlay,
  .admin-photo-select-overlay {
    padding: 14px;
  }

  .admin-delete-modal,
  .admin-photo-assignment-modal {
    padding: 23px;

    border-radius: 19px;
  }

  .admin-modal-actions {
    flex-direction: column-reverse;
  }

  .admin-modal-cancel,
  .admin-modal-delete,
  .admin-modal-assign {
    width: 100%;
  }

  .admin-form-actions {
    flex-direction: column;
  }

  .admin-save-button,
  .admin-form-delete-button {
    width: 100%;
  }

  .login-card {
    padding: 30px 24px;
  }

  .admin-create-qr-card,
  .admin-menu-view-card {
    padding: 23px;
  }
}

@media (max-width: 400px) {
  #admin-photos {
    grid-template-columns: 1fr;
  }

  .admin-header-inner {
    width: min(calc(100% - 20px), var(--max-width));
  }

  .admin-page-header h1 {
    font-size: 1.8rem;
  }
}

/* =========================================
   CATEGORY PHOTO SELECTOR OVERRIDES
   ========================================= */
/* Purpose: Targeted responsive/compatibility fixes for category photo selection. */

/*
 * The shared photo selector is intentionally constrained here.
 * This keeps gallery thumbnails compact and makes the modal usable
 * even when the restaurant has many large photos.
 */

.admin-photo-select-gallery {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;

  gap: 14px;

  flex: 1 1 auto;

  min-height: 0;

  padding: 22px 25px;

  overflow-y: auto;

  overscroll-behavior: contain;

  background:
    radial-gradient(circle at top, rgba(229, 36, 42, 0.025), transparent 40%),
    #f7f7f8;
}

.admin-photo-select-option,
.admin-photo-select-item {
  position: relative;

  display: block;

  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  padding: 0;

  border: 2px solid transparent;
  border-radius: 15px;

  background: var(--surface-muted);

  cursor: pointer;

  box-shadow: var(--shadow-xs);

  transition:
    transform 260ms var(--ease-premium),
    border-color 220ms ease,
    box-shadow 260ms ease;
}

.admin-photo-select-option:hover,
.admin-photo-select-item:hover {
  transform: translateY(-3px);

  border-color: rgba(229, 36, 42, 0.4);

  box-shadow: var(--shadow-sm);
}

.admin-photo-select-option.selected {
  border-color: var(--color-red);

  box-shadow:
    0 0 0 3px rgba(229, 36, 42, 0.12),
    var(--shadow-sm);
}

.admin-photo-select-option img,
.admin-photo-select-item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.admin-category-uploaded-photo-section {
  margin-top: 16px;
}

.admin-category-photo-preview {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 180px;
  height: 120px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface-muted);

  box-shadow: var(--shadow-xs);
}

.admin-category-photo-preview-image {
  display: none;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.admin-category-photo-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 12px;

  color: var(--text-muted);

  font-size: 0.78rem;
  text-align: center;
}

.admin-category-photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  margin-top: 10px;
}

.admin-category-photo-actions .admin-secondary-button {
  min-height: 42px;

  padding: 0 15px;

  border: 1px solid var(--border-strong);
  border-radius: 11px;

  background: #ffffff;
  color: var(--text);

  font-size: 0.82rem;
  font-weight: 720;

  cursor: pointer;

  transition:
    transform 220ms var(--ease-premium),
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.admin-category-photo-actions .admin-secondary-button:hover {
  transform: translateY(-1px);

  background: var(--surface-soft);

  border-color: rgba(19, 19, 21, 0.2);

  box-shadow: var(--shadow-xs);
}

/* Keep the category modal usable after adding photo controls. */
.admin-category-modal {
  max-height: calc(100vh - 48px);

  overflow-y: auto;
}

@media (max-width: 700px) {
  .admin-photo-select-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 11px;

    padding: 17px;
  }
}

@media (max-width: 500px) {
  .admin-photo-select-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    padding: 14px;
  }

  .admin-category-photo-preview {
    width: 100%;
    max-width: 240px;
    height: 150px;
  }
}

/* =========================================================
   CATEGORY PHOTO MODE — SELECTABLE CARDS
   ========================================================= */
/* Purpose: Selectable category photo-mode cards and their active/keyboard states. */

.admin-category-photo-mode-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.admin-category-photo-mode-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

/* Hide the browser's ugly default radio button */
.admin-category-photo-mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom radio indicator */
.admin-category-photo-mode-option::before {
  content: "";
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border: 2px solid var(--border-strong, var(--border));
  border-radius: 50%;
  background: var(--surface);
  box-sizing: border-box;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

/* Selected card */
.admin-category-photo-mode-option:has(input[type="radio"]:checked) {
  border-color: var(--primary-color, var(--primary));
  background: rgba(229, 36, 42, 0.045);
  box-shadow:
    0 0 0 1px rgba(229, 36, 42, 0.08),
    var(--shadow-xs);
}

/* Selected radio */
.admin-category-photo-mode-option:has(input[type="radio"]:checked)::before {
  border-color: var(--primary-color, var(--primary));
  background: radial-gradient(
    circle,
    var(--primary-color, var(--primary)) 0 5px,
    transparent 5.5px
  );
}

/* Hover */
.admin-category-photo-mode-option:hover {
  border-color: var(--primary-color, var(--primary));
  transform: translateY(-1px);
}

/* Keyboard focus */
.admin-category-photo-mode-option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--primary-color, var(--primary));
  outline-offset: 2px;
}

/* Text area */
.admin-category-photo-mode-option-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.admin-category-photo-mode-option-content strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.admin-category-photo-mode-option-content small {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* Mobile */
@media (max-width: 500px) {
  .admin-category-photo-mode-option {
    padding: 13px 14px;
  }

  .admin-category-photo-mode-option-content small {
    font-size: 0.73rem;
  }
}

/* =========================================================
   Category Ordering
   ========================================================= */
/* Purpose: Drag-and-drop category ordering presentation and controls. */

.admin-category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-category-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-sizing: border-box;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    opacity 180ms ease;
}

.admin-category-row:hover {
  border-color: var(--primary-color, var(--primary));
  box-shadow: var(--shadow-xs);
}

.admin-category-row.is-dragging {
  opacity: 0.55;
  transform: scale(0.985);
  border-color: var(--primary-color, var(--primary));
  box-shadow: var(--shadow-md);
}

.admin-category-row.is-drag-over {
  border-color: var(--primary-color, var(--primary));
  background: rgba(229, 36, 42, 0.045);
}

/* Drag handle */

.admin-category-drag-handle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 38px;
  color: var(--text-muted);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  border-radius: 8px;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.admin-category-drag-handle:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.035);
}

.admin-category-row.is-dragging .admin-category-drag-handle {
  cursor: grabbing;
  color: var(--primary-color, var(--primary));
}

/* Category information */

.admin-category-information {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.admin-category-information h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-category-information span {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Action buttons */

.admin-category-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.admin-category-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.admin-category-action:hover {
  transform: translateY(-1px);
}

.admin-category-edit:hover {
  color: var(--primary-color, var(--primary));
  border-color: var(--primary-color, var(--primary));
  background: rgba(229, 36, 42, 0.045);
}

.admin-category-delete:hover {
  color: var(--danger, #dc2626);
  border-color: var(--danger, #dc2626);
  background: rgba(220, 38, 38, 0.045);
}

.admin-category-action:active {
  transform: translateY(0);
}

.admin-category-action:focus-visible,
.admin-category-drag-handle:focus-visible {
  outline: 2px solid var(--primary-color, var(--primary));
  outline-offset: 2px;
}

/* Mobile */

@media (max-width: 600px) {
  .admin-category-row {
    gap: 10px;
    padding: 13px 14px;
  }

  .admin-category-drag-handle {
    width: 24px;
  }

  .admin-category-information h3 {
    font-size: 0.9rem;
  }

  .admin-category-information span {
    font-size: 0.72rem;
  }

  .admin-category-action {
    width: 34px;
    height: 34px;
  }
}

/* =========================================
   QR CREATION PAGE
   ========================================= */
/* Purpose: QR creation-specific page structure and supporting layout rules. */

.admin-qr-section {
  display: grid;

  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);

  gap: 34px;

  align-items: center;

  margin-top: 26px;

  padding-top: 26px;

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

.admin-qr-preview {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 1 / 1;

  padding: 28px;

  border: 1px solid var(--border);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at center,
      rgba(229, 36, 42, 0.025),
      transparent 65%
    ),
    var(--surface-soft);

  box-shadow: var(--shadow-sm);
}

.admin-qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 30px;

  border: 2px dashed rgba(19, 19, 21, 0.14);
  border-radius: 16px;

  color: var(--text-muted);

  font-size: 0.84rem;
  font-weight: 650;

  line-height: 1.5;

  text-align: center;
}

.admin-qr-details {
  display: flex;
  flex-direction: column;

  gap: 20px;

  min-width: 0;
}

.admin-qr-field {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.admin-qr-field label {
  color: var(--text);

  font-size: 0.8rem;
  font-weight: 760;
}

.admin-qr-value {
  min-height: 49px;

  display: flex;
  align-items: center;

  padding: 0 14px;

  border: 1px solid var(--border-strong);
  border-radius: 12px;

  background: var(--surface-soft);

  color: var(--text);

  font-size: 0.9rem;
  font-weight: 650;
}

.admin-qr-url-row {
  display: flex;
  align-items: stretch;

  gap: 8px;

  min-width: 0;
}

.admin-input {
  width: 100%;
  min-width: 0;

  min-height: 49px;

  padding: 0 14px;

  border: 1px solid var(--border-strong);
  border-radius: 12px;

  background: #fafafa;
  color: var(--text);

  font-size: 0.88rem;

  outline: none;

  box-shadow: inset 0 1px 2px rgba(19, 19, 21, 0.025);

  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.admin-input:hover {
  border-color: rgba(19, 19, 21, 0.22);

  background: #ffffff;
}

.admin-input:focus {
  border-color: rgba(229, 36, 42, 0.7);

  background: #ffffff;

  box-shadow:
    0 0 0 4px rgba(229, 36, 42, 0.08),
    0 5px 14px rgba(19, 19, 21, 0.04);
}

.admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 49px;

  padding: 0 17px;

  border: 1px solid var(--color-black);
  border-radius: 12px;

  background: var(--color-black);
  color: #ffffff;

  font-size: 0.84rem;
  font-weight: 720;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: var(--shadow-xs);

  transition:
    transform 240ms var(--ease-premium),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
}

.admin-button:hover:not(:disabled) {
  transform: translateY(-2px);

  background: #2c2c2f;

  border-color: #2c2c2f;

  box-shadow: var(--shadow-sm);
}

.admin-button:active:not(:disabled) {
  transform: translateY(0);
}

.admin-button:disabled {
  opacity: 0.4;

  cursor: not-allowed;

  box-shadow: none;
}

.admin-qr-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  padding-top: 4px;
}

.admin-qr-actions .admin-button,
.admin-qr-url-row .admin-button,
.admin-qr-logo-control .admin-button,
.admin-qr-reset-row .admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.admin-qr-message {
  min-height: 1.25rem;

  color: var(--text-soft);

  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-qr-message.success {
  color: #176b35;
}

.admin-qr-message.error {
  color: var(--color-dark-red);
}

/* QR page mobile layout */
@media (max-width: 700px) {
  .admin-qr-section {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .admin-qr-preview {
    width: min(100%, 360px);

    margin: 0 auto;
  }
}

@media (max-width: 500px) {
  .admin-qr-section {
    margin-top: 20px;
    padding-top: 20px;
  }

  .admin-qr-preview {
    padding: 20px;

    border-radius: 18px;
  }

  .admin-qr-url-row {
    flex-direction: column;
  }

  .admin-qr-actions {
    flex-direction: column;
  }

  .admin-qr-actions .admin-button {
    width: 100%;
  }

  .admin-qr-url-row .admin-button {
    width: 100%;
  }
}

/* =========================================
   CREATE QR PAGE — FINAL LAYOUT
   ========================================= */
/* Purpose: Final QR page layout polish and edge-to-edge header behavior. */

.admin-container:has(.admin-qr-section) {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Premium edge-to-edge header */
.admin-container:has(.admin-qr-section) > .admin-header {
  order: 1;

  width: 100vw;

  margin-top: -52px;
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);

  padding: 34px max(32px, calc((100vw - var(--max-width)) / 2));

  background:
    radial-gradient(
      circle at 92% 20%,
      rgba(229, 36, 42, 0.16),
      transparent 30%
    ),
    linear-gradient(135deg, #171719, #131315);

  color: #ffffff;

  box-shadow: 0 12px 34px rgba(19, 19, 21, 0.13);
}

.admin-container:has(.admin-qr-section) > .admin-header .admin-eyebrow {
  margin-bottom: 8px;
  color: var(--color-red);
}

.admin-container:has(.admin-qr-section) > .admin-header h1 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 820;
  line-height: 1.06;

  letter-spacing: -0.045em;
}

.admin-container:has(.admin-qr-section) > .admin-header .admin-subtitle {
  max-width: 680px;

  margin: 10px 0 0;

  color: #999a9e;

  font-size: 0.96rem;
  line-height: 1.55;
}

/* Back to Dashboard — text navigation below the header */
.admin-container:has(.admin-qr-section) > .admin-back-link {
  order: 2;

  align-self: flex-start;

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

  width: fit-content;

  margin-top: 14px;
  margin-bottom: 0;

  padding: 4px 0;

  border: 0;

  background: transparent;

  color: var(--text);

  font-size: 0.8rem;
  font-weight: 780;

  letter-spacing: 0.005em;

  text-decoration: none;

  transition:
    color 220ms ease,
    transform 220ms var(--ease-premium);
}

.admin-container:has(.admin-qr-section) > .admin-back-link:hover {
  color: var(--color-red);
  transform: translateX(-3px);
}

/* QR card */
.admin-container:has(.admin-qr-section) > .admin-card {
  order: 3;

  margin-top: 14px;

  border-color: rgba(19, 19, 21, 0.07);

  box-shadow: 0 8px 26px rgba(19, 19, 21, 0.055);
}

.admin-container:has(.admin-qr-section) > .admin-card:hover {
  transform: none;

  border-color: rgba(19, 19, 21, 0.07);

  box-shadow: 0 8px 26px rgba(19, 19, 21, 0.055);
}

/* QR fields */
.admin-container:has(.admin-qr-section) .admin-qr-value,
.admin-container:has(.admin-qr-section) .admin-input {
  border-color: rgba(19, 19, 21, 0.1);
}

.admin-container:has(.admin-qr-section) .admin-qr-value,
.admin-container:has(.admin-qr-section) .admin-input {
  background: #fafafa;
}

.admin-container:has(.admin-qr-section) .admin-input:hover {
  border-color: rgba(19, 19, 21, 0.18);
  background: #ffffff;
}

/* QR preview */
.admin-container:has(.admin-qr-section) .admin-qr-preview {
  border-color: rgba(19, 19, 21, 0.07);

  box-shadow: 0 6px 18px rgba(19, 19, 21, 0.045);
}

/* Mobile */
@media (max-width: 700px) {
  .admin-container:has(.admin-qr-section) > .admin-header {
    margin-top: -35px;

    padding: 30px 20px 32px;
  }

  .admin-container:has(.admin-qr-section) > .admin-back-link {
    margin-top: 12px;
    font-size: 0.76rem;
  }

  .admin-container:has(.admin-qr-section) > .admin-card {
    margin-top: 12px;
  }
}

@media (max-width: 500px) {
  .admin-container:has(.admin-qr-section) > .admin-header {
    padding: 28px 18px 30px;
  }

  .admin-container:has(.admin-qr-section) > .admin-back-link {
    margin-top: 10px;
  }
}

/* =========================================
   QR DESIGNER CONTROLS
   ========================================= */
/* Purpose: Shared QR designer controls such as buttons, inputs, and previews. */

.admin-qr-setting-group {
  margin-top: 22px;
}

.admin-qr-setting-group:first-of-type {
  margin-top: 16px;
}

.admin-qr-setting-label {
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* =========================================
   CONTROL GRID
   ========================================= */
/* Purpose: Responsive grid used to group QR designer controls. */

.admin-qr-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-qr-control {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.admin-qr-control > label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
}

/* =========================================
   COLOR CONTROL
   ========================================= */
/* Purpose: Color picker/control presentation for QR styling. */

.admin-qr-color-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 5px 10px 5px 5px;
  border: 1px solid rgba(19, 19, 21, 0.1);
  border-radius: 10px;
  background: #ffffff;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.admin-qr-color-control:hover {
  border-color: rgba(19, 19, 21, 0.18);
}

.admin-qr-color-control:focus-within {
  border-color: rgba(229, 36, 42, 0.5);
  box-shadow: 0 0 0 3px rgba(229, 36, 42, 0.08);
}

.admin-qr-color-control input[type="color"] {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.admin-qr-color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.admin-qr-color-control input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 7px;
}

.admin-qr-color-control input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 7px;
}

.admin-qr-color-control span {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

/* =========================================
   TRANSPARENT BACKGROUND CHECKBOX
   ========================================= */
/* Purpose: Special checkbox treatment for transparent QR backgrounds. */

.admin-qr-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
}

.admin-qr-checkbox input {
  appearance: none;
  -webkit-appearance: none;

  position: relative;
  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  margin: 0;

  border: 1.5px solid #b8b9bc;
  border-radius: 5px;

  background: #ffffff;

  cursor: pointer;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 100ms ease;
}

/* Hover */

.admin-qr-checkbox input:hover {
  border-color: #8f9195;
  box-shadow: 0 2px 7px rgba(19, 19, 21, 0.08);
}

/* Click */

.admin-qr-checkbox input:active {
  transform: scale(0.9);
}

/* =========================================
   CHECKED STATE
   ========================================= */
/* Purpose: Visual state rules for selected QR designer controls. */

.admin-qr-checkbox input:checked {
  border-color: #e5242a;
  background: #e5242a;

  box-shadow: 0 3px 9px rgba(229, 36, 42, 0.28);
}

/* THE ACTUAL CHECKMARK */

.admin-qr-checkbox input:checked::after {
  content: "";

  position: absolute;

  left: 5px;
  top: 2px;

  width: 5px;
  height: 9px;

  border: solid #ffffff;
  border-width: 0 2px 2px 0;

  transform: rotate(45deg);
}

/* Label becomes slightly stronger */

.admin-qr-checkbox:has(input:checked) {
  color: var(--text);
  font-weight: 700;
}

/* Keyboard focus */

.admin-qr-checkbox input:focus-visible {
  outline: none;

  border-color: #e5242a;

  box-shadow:
    0 0 0 3px rgba(229, 36, 42, 0.15),
    0 3px 9px rgba(229, 36, 42, 0.18);
}
/* =========================================
   PREMIUM SELECT
   ========================================= */
/* Purpose: Custom select styling used by the QR designer. */

.admin-qr-control .admin-select {
  width: 100%;
  min-height: 44px;
  padding: 0 42px 0 13px;
  border: 1px solid rgba(19, 19, 21, 0.1);
  border-radius: 10px;
  outline: none;

  appearance: none;
  -webkit-appearance: none;

  background-color: #ffffff;

  background-image:
    linear-gradient(45deg, transparent 50%, #575a5e 50%),
    linear-gradient(135deg, #575a5e 50%, transparent 50%);

  background-position:
    calc(100% - 17px) 18px,
    calc(100% - 12px) 18px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;

  color: var(--text);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.admin-qr-control .admin-select:hover {
  border-color: rgba(19, 19, 21, 0.2);
  background-color: #fafafa;
}

.admin-qr-control .admin-select:focus {
  border-color: rgba(229, 36, 42, 0.5);
  box-shadow: 0 0 0 3px rgba(229, 36, 42, 0.08);
}

.admin-qr-control .admin-select option {
  color: var(--text);
  background: #ffffff;
  font-weight: 600;
}

/* =========================================
   LOGO CONTROLS
   ========================================= */
/* Purpose: QR logo upload/remove controls. */

.admin-qr-logo-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-qr-upload-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(19, 19, 21, 0.1);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.admin-qr-upload-label:hover {
  border-color: rgba(19, 19, 21, 0.18);
  background: #fafafa;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(19, 19, 21, 0.06);
}

.admin-qr-upload-label:active {
  transform: translateY(0);
}

.admin-qr-upload-label input[type="file"] {
  display: none;
}

.admin-qr-remove-logo {
  min-height: 42px;
}

.admin-qr-remove-logo:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* =========================================
   TEXT CONTROLS
   ========================================= */
/* Purpose: QR text customization controls. */

.admin-qr-text-control {
  margin-top: 14px;
}

/* =========================================
   RESET
   ========================================= */
/* Purpose: QR reset action styling. */

.admin-qr-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(19, 19, 21, 0.07);
}

.admin-qr-reset-row .admin-button {
  min-height: 40px;
  font-size: 0.74rem;
}

/* =========================================
   PREVIEW LABEL
   ========================================= */
/* Purpose: QR preview label presentation. */

.admin-qr-preview-label {
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.45;
  color: var(--text);
}

.admin-qr-preview-label small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-soft);
}

/* =========================================
   MOBILE
   ========================================= */
/* Purpose: Mobile-specific QR designer layout adjustments. */

@media (max-width: 700px) {
  .admin-qr-control-grid {
    grid-template-columns: 1fr;
  }

  .admin-qr-logo-control {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-qr-upload-label,
  .admin-qr-remove-logo {
    width: 100%;
  }

  .admin-qr-reset-row {
    justify-content: stretch;
  }

  .admin-qr-reset-row .admin-button {
    width: 100%;
  }
}

/* =========================================================
   SUPPORT PAGE
   ========================================================= */
/* Purpose: Support page hero, search, and overall page presentation. */

.support-hero {
  margin-bottom: 24px;
}

.support-search {
  margin-top: 28px;
  max-width: 720px;
}

.support-search-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #575a5e;
}

.support-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 18px;
  border: 1px solid #d8d9db;
  border-radius: 10px;
  background: #ffffff;
  color: #131315;
  font-size: 15px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.support-search input::placeholder {
  color: #999b9f;
}

.support-search input:focus {
  border-color: #e5242a;
  box-shadow: 0 0 0 3px rgba(229, 36, 42, 0.1);
}

/* =========================================================
   SUPPORT — QUICK HELP NAVIGATION
   =========================================================
   Four clickable category shortcuts used to navigate the Support page.
   Keep the card, icon tile, hover state, and text rules together so this
   section remains easy to find and maintain.

   The icon tile supports both the current text/Unicode fallback and the
   shared .admin-icon SVG system. This keeps the red treatment consistent
   while the Support icons are being upgraded.
   ========================================================= */

.support-quick-help {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Individual category navigation card */
.support-help-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  width: 100%;
  min-height: 120px;
  padding: 20px;

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

  background: #ffffff;
  color: #131315;

  text-align: left;
  cursor: pointer;

  box-shadow: 0 2px 8px rgba(19, 19, 21, 0.04);

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

/* Card hover */
.support-help-card:hover {
  transform: translateY(-3px);

  border-color: rgba(201, 74, 79, 0.28);

  background: #fffdfd;

  box-shadow:
    0 8px 22px rgba(19, 19, 21, 0.08),
    0 0 0 1px rgba(201, 74, 79, 0.04);
}

/* Keyboard navigation */
.support-help-card:focus-visible {
  outline: none;

  border-color: #c94a4f;

  box-shadow:
    0 0 0 3px rgba(201, 74, 79, 0.14),
    0 8px 22px rgba(19, 19, 21, 0.08);
}

/* Category icon tile */
.support-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  border: 1px solid rgba(201, 74, 79, 0.1);
  border-radius: 12px;

  background: #fff1f1;
  color: #c94a4f;

  font-size: 18px;
  font-weight: 700;
  line-height: 1;

  transition:
    background 220ms ease,
    color 220ms ease,
    transform 220ms ease,
    border-color 220ms ease;
}

.support-help-icon svg {
  fill: none;
  stroke: #c94a4f;
}

/* Icon reacts with the card */
.support-help-card:hover .support-help-icon {
  background: #ffe7e8;
  border-color: rgba(201, 74, 79, 0.16);
  color: #b83f45;
  transform: translateY(-1px);
}

.support-help-card:hover .support-help-icon svg {
  fill: #b83f45;
}

/* Text area */
.support-help-content {
  display: flex;
  flex-direction: column;
  gap: 6px;

  min-width: 0;
  padding-top: 1px;
}

.support-help-content strong {
  color: #131315;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.support-help-content span {
  color: #575a5e;

  font-size: 13px;
  line-height: 1.45;
}

/* =========================================================
   FAQ
   ========================================================= */
/* Purpose: Expandable support FAQ presentation. */

.support-faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e1e2e4;
}

.support-faq-item {
  border-bottom: 1px solid #e1e2e4;
}

.support-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 4px;
  border: 0;
  background: transparent;
  color: #131315;
  text-align: left;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.support-faq-question:hover {
  color: #e5242a;
}

.support-faq-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f2f2f3;
  color: #575a5e;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.support-faq-item.open .support-faq-arrow {
  transform: rotate(45deg);
  background: #e5242a;
  color: #ffffff;
}

.support-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 0.25s ease,
    opacity 0.25s ease;
  opacity: 0;
}

.support-faq-answer p {
  min-height: 0;
  margin: 0;
  padding: 0 44px 0 4px;
  overflow: hidden;
  color: #575a5e;
  font-size: 14px;
  line-height: 1.7;
}

.support-faq-item.open .support-faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.support-faq-item.open .support-faq-answer p {
  padding-bottom: 20px;
}

/* =========================================================
   NO RESULTS
   ========================================================= */
/* Purpose: Empty-state presentation when Support search finds no matches. */

.support-no-results {
  padding: 48px 20px;
  text-align: center;
}

.support-no-results h3 {
  margin: 0 0 8px;
  color: #131315;
  font-size: 18px;
}

.support-no-results p {
  margin: 0;
  color: #575a5e;
  font-size: 14px;
}

/* =========================================================
   CONTACT SUPPORT
   ========================================================= */
/* Purpose: Support contact call-to-action section. */

.support-contact {
  margin-top: 24px;
}

.support-contact .admin-section-header {
  margin-bottom: 0;
}

.support-contact .admin-section-header > div {
  flex: 1;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Purpose: Responsive Support-page layout adjustments. */

@media (max-width: 1000px) {
  .support-quick-help {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .support-quick-help {
    grid-template-columns: 1fr;
  }

  .support-help-card {
    min-height: auto;
  }

  .support-faq-question {
    padding: 18px 0;
    font-size: 14px;
  }

  .support-faq-answer p {
    padding-right: 0;
  }

  .support-contact .admin-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   SUPPORT CONTACT MODAL
   ========================================================= */
/* Purpose: Contact Support dialog surface and overlay. */

body.support-modal-open {
  overflow: hidden;
}

.support-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.support-contact-modal[hidden] {
  display: flex;
}

.support-contact-modal.show {
  opacity: 1;
  visibility: visible;
}

.support-contact-overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 19, 21, 0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.support-contact-dialog {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 30px;
  border: 1px solid #e1e2e4;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(19, 19, 21, 0.22);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
}

.support-contact-modal.show .support-contact-dialog {
  transform: translateY(0) scale(1);
}

/* =========================================================
   MODAL HEADER
   ========================================================= */
/* Purpose: Support modal title and close-button layout. */

.support-contact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.support-contact-header h2 {
  margin: 0 0 7px;
  color: #131315;
  font-size: 24px;
  line-height: 1.25;
}

.support-contact-header p {
  margin: 0;
  color: #575a5e;
  font-size: 14px;
  line-height: 1.5;
}

.support-contact-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #f2f2f3;
  color: #575a5e;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.support-contact-close:hover {
  background: #e8e8e9;
  color: #131315;
}

/* =========================================================
   CONTACT FORM
   ========================================================= */
/* Purpose: Support contact form fields and validation presentation. */

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.support-contact-dialog .form-group {
  margin-bottom: 20px;
}

.support-contact-dialog .form-group label {
  display: block;
  margin-bottom: 8px;
  color: #131315;
  font-size: 14px;
  font-weight: 600;
}

.support-contact-dialog input,
.support-contact-dialog select,
.support-contact-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d8d9db;
  border-radius: 9px;
  background: #ffffff;
  color: #131315;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.support-contact-dialog input,
.support-contact-dialog select {
  height: 46px;
  padding: 0 13px;
}

.support-contact-dialog textarea {
  min-height: 150px;
  padding: 13px;
  resize: vertical;
  line-height: 1.55;
}

.support-contact-dialog input::placeholder,
.support-contact-dialog textarea::placeholder {
  color: #999b9f;
}

.support-contact-dialog input:focus,
.support-contact-dialog select:focus,
.support-contact-dialog textarea:focus {
  border-color: #e5242a;
  box-shadow: 0 0 0 3px rgba(229, 36, 42, 0.1);
}

/* =========================================================
   FORM ACTIONS
   ========================================================= */
/* Purpose: Support contact form action buttons. */

.support-contact-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid #e8e9ea;
}

/* =========================================================
   MOBILE
   ========================================================= */
/* Purpose: Mobile-specific QR designer layout adjustments. */

@media (max-width: 650px) {
  .support-contact-modal {
    padding: 12px;
  }

  .support-contact-dialog {
    max-height: calc(100vh - 24px);
    padding: 22px;
    border-radius: 14px;
  }

  .support-contact-header {
    margin-bottom: 22px;
  }

  .support-contact-header h2 {
    font-size: 21px;
  }

  .support-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .support-contact-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .support-contact-actions button {
    width: 100%;
  }
}

.support-contact-actions .admin-secondary-button {
  min-width: 100px;
}

.support-contact-actions #cancel-support-button {
  min-width: 100px;
  height: 46px;
  padding: 0 18px;
  border: 1px solid #d8d9db;
  border-radius: 9px;
  background: #ffffff;
  color: #575a5e;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.support-contact-actions #cancel-support-button:hover {
  background: #f5f5f6;
  border-color: #c9cacc;
  color: #131315;
}

@media (max-width: 650px) {
  .admin-nav form {
    display: contents;
  }

  .admin-nav form button {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #e5242a;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition:
      background 0.2s ease,
      color 0.2s ease;
  }

  .admin-nav form button:hover {
    background: rgba(229, 36, 42, 0.08);
    color: #ba2d0b;
  }
}

/* =========================================================
   DASHBOARD ICON CARDS
   ========================================================= */

.admin-dashboard-card {
  display: flex;
  align-items: center;
  gap: 18px;
}

.admin-dashboard-icon {
  width: 64px;
  height: 64px;

  flex: 0 0 64px;

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

  border: 1px solid rgba(19, 19, 21, 0.12);
  border-radius: 16px;

  background: #131315;

  box-shadow:
    0 4px 12px rgba(19, 19, 21, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  overflow: hidden;
}

.admin-dashboard-icon svg {
  width: 40px;
  height: 40px;

  display: block;
}

/* =========================================================
   HEADER LOGOUT
   ========================================================= */

.admin-logout-form {
  display: flex;
  align-items: center;

  margin-left: 18px;
  padding-left: 18px;

  border-left: 1px solid rgba(224, 224, 226, 0.9);
}

.admin-logout-button {
  min-height: 42px;

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

  gap: 9px;

  padding: 0 16px;

  border: 1px solid rgba(224, 224, 226, 0.95);
  border-radius: 12px;

  background: #ffffff;
  color: #131315;

  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 2px 8px rgba(19, 19, 21, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

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

.admin-logout-button:hover {
  transform: translateY(-1px);

  border-color: rgba(19, 19, 21, 0.18);

  background: #f7f7f8;

  box-shadow:
    0 5px 14px rgba(19, 19, 21, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.admin-logout-button:active {
  transform: translateY(0);

  box-shadow:
    0 2px 6px rgba(19, 19, 21, 0.08),
    inset 0 1px 2px rgba(19, 19, 21, 0.04);
}

.admin-logout-button:focus-visible {
  outline: none;

  border-color: #e5242a;

  box-shadow:
    0 0 0 3px rgba(229, 36, 42, 0.14),
    0 5px 14px rgba(19, 19, 21, 0.08);
}

.admin-logout-icon {
  width: 18px;
  height: 18px;

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

  flex: 0 0 18px;

  color: #575a5e;
}

.admin-logout-icon svg {
  width: 100%;
  height: 100%;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: color 180ms ease;
}

.admin-logout-button:hover .admin-logout-icon {
  color: #e5242a;
}

/* =========================================================
   DASHBOARD FINAL POLISH
   Arrow buttons + responsive logout
   ========================================================= */

/* ---------------------------------------------------------
   LARGE FEATURE CARD ARROWS
   --------------------------------------------------------- */

.admin-menu-view-arrow,
.admin-create-qr-arrow {
  width: 58px;
  height: 58px;

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

  flex: 0 0 58px;

  border: 2px solid #e5242a;
  border-radius: 50%;

  background: rgba(229, 36, 42, 0.08);
  color: #ffffff;

  box-shadow:
    0 0 0 5px rgba(229, 36, 42, 0.05),
    0 8px 24px rgba(19, 19, 21, 0.18);

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

.admin-menu-view-arrow svg,
.admin-create-qr-arrow svg {
  width: 25px;
  height: 25px;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-menu-view-card:hover .admin-menu-view-arrow,
.admin-create-qr-card:hover .admin-create-qr-arrow {
  transform: translateX(3px);

  background: #e5242a;
  border-color: #e5242a;

  box-shadow:
    0 0 0 6px rgba(229, 36, 42, 0.08),
    0 10px 28px rgba(19, 19, 21, 0.22);
}

/* ---------------------------------------------------------
   SMALL DASHBOARD CARD ARROWS
   --------------------------------------------------------- */

.admin-dashboard-card {
  position: relative;
}

.admin-dashboard-card-arrow {
  width: 32px;
  height: 32px;

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

  flex: 0 0 32px;

  margin-left: auto;

  border-radius: 50%;

  background: rgba(229, 36, 42, 0.08);
  color: #e5242a;

  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.admin-dashboard-card-arrow svg {
  width: 17px;
  height: 17px;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-dashboard-card:hover .admin-dashboard-card-arrow {
  transform: translateX(3px);

  background: #e5242a;
  color: #ffffff;
}

/* ---------------------------------------------------------
   LOGOUT — DESKTOP
   --------------------------------------------------------- */

.admin-logout-form {
  margin-left: 16px;
  padding-left: 16px;

  display: flex;
  align-items: center;

  border-left: 1px solid rgba(224, 224, 226, 0.8);
}

.admin-logout-button {
  width: auto;
  min-width: 0;
  height: 38px;

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

  gap: 8px;

  padding: 0 13px;

  border: 1px solid #e0e0e2;
  border-radius: 10px;

  background: #ffffff;
  color: #575a5e;

  font-size: 0.76rem;
  font-weight: 700;

  box-shadow: 0 2px 7px rgba(19, 19, 21, 0.06);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.admin-logout-button:hover {
  transform: translateY(-1px);

  border-color: rgba(229, 36, 42, 0.3);

  background: #fff5f5;
  color: #e5242a;
}

.admin-logout-icon {
  width: 16px;
  height: 16px;

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

  flex: 0 0 16px;
}

.admin-logout-icon svg {
  width: 100%;
  height: 100%;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

@media (max-width: 650px) {
  /* Keep the header compact instead of letting logout
     become another large navigation row. */

  .admin-header-inner {
    align-items: flex-start;
  }

  .admin-nav {
    padding-right: 0;
  }

  .admin-logout-form {
    align-self: flex-start;

    margin-left: 10px;
    padding-left: 10px;

    min-height: 38px;
  }

  .admin-logout-button {
    width: 40px;
    height: 40px;
    min-width: 40px;

    padding: 0;

    border-radius: 11px;

    gap: 0;
  }

  .admin-logout-button > span:last-child {
    display: none;
  }

  .admin-logout-icon {
    width: 17px;
    height: 17px;

    flex-basis: 17px;
  }

  /* Feature arrows become slightly smaller on phones. */

  .admin-menu-view-arrow,
  .admin-create-qr-arrow {
    width: 48px;
    height: 48px;

    flex-basis: 48px;

    border-width: 1.8px;
  }

  .admin-menu-view-arrow svg,
  .admin-create-qr-arrow svg {
    width: 21px;
    height: 21px;
  }

  /* Small card arrows */

  .admin-dashboard-card-arrow {
    width: 30px;
    height: 30px;

    flex-basis: 30px;
  }

  .admin-dashboard-card-arrow svg {
    width: 16px;
    height: 16px;
  }
}

#save-language-button {
  margin-top: 18px;
}

/* Mobile navigation trigger */
.admin-mobile-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e0e0e2;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.admin-mobile-menu-button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

@media (max-width: 700px) {
  .admin-mobile-menu-button {
    display: flex;
  }

  .admin-header-inner {
    width: min(calc(100% - 24px), var(--max-width));
    min-height: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
  }

  .admin-nav {
    display: none;
  }
}

/* ========================================
   Mobile Admin Navigation
   ======================================== */

.admin-mobile-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e0e0e2;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.admin-mobile-menu-button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

@media (max-width: 700px) {
  .admin-header-inner {
    width: min(calc(100% - 24px), var(--max-width));
    min-height: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
  }

  .admin-mobile-menu-button {
    display: flex;
  }

  .admin-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;

    width: min(300px, 82vw);
    height: 100dvh;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;

    padding: 76px 16px 20px;

    background: #131315;
    border-left: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);

    transform: translateX(100%);
    visibility: hidden;

    transition:
      transform 0.25s ease,
      visibility 0.25s ease;
  }

  .admin-nav.mobile-menu-open {
    transform: translateX(0);
    visibility: visible;
  }

  .admin-nav a,
  .admin-nav button {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 12px 14px;
    border-radius: 9px;
  }

  .admin-nav form {
    margin: 0;
    margin-top: auto;
  }

  .admin-nav form button {
    width: 100%;
  }
}

.admin-mobile-menu-close {
  display: none;
}

@media (max-width: 700px) {
  .admin-nav .admin-mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 18px;
    right: 18px;

    width: 32px;
    height: 32px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #9d9ea2;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
    text-align: center;

    transition: color 0.2s ease;
  }

  .admin-nav .admin-mobile-menu-close:hover {
    background: transparent;
    color: #ffffff;
  }
}

.admin-mobile-menu-button svg,
.admin-mobile-menu-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   Forgot Password
   ========================================================= */

.forgot-password-back {
  margin-top: 25px;
  text-align: center;
  color: #575a5e;
  font-size: 14px;
}

.forgot-password-back a {
  color: #e5242a;
  text-decoration: none;
}

.forgot-password-back a:hover {
  text-decoration: underline;
}

.forgot-password-success {
  margin-top: 25px;
  text-align: center;
}

.forgot-password-success h2 {
  margin: 0 0 10px;
}

.forgot-password-success p {
  margin: 0 0 20px;
  color: #575a5e;
  line-height: 1.6;
}

.forgot-password-success .login-button {
  width: 100%;
}

/* ========================================
   Restaurant Access Card
   ======================================== */

.restaurant-access-card {
  margin-bottom: 24px;
  padding: 22px 24px;
  border: 1px solid rgba(229, 36, 42, 0.25);
  border-radius: 16px;
  background: rgba(229, 36, 42, 0.06);
}

.restaurant-access-card.expired {
  border-color: rgba(229, 36, 42, 0.45);
  background: rgba(229, 36, 42, 0.1);
}

.restaurant-access-card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.restaurant-access-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e5242a;
}

.restaurant-access-status {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--color-dark-red);
}

/* Phone input + country selector */
.support-phone-input {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.support-phone-country,
.support-phone-input > #support-phone {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.support-phone-country {
  display: inline-flex;
  flex: 0 0 92px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;

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

  background: #ffffff;
  color: #131315;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
}

.support-phone-input > #support-phone {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;

  border-radius: 0 8px 8px 0;
}

/* =========================================================
   SUPPORT PHONE COUNTRY PICKER
   =========================================================
   Purpose:
   - Keep the country selector and phone input exactly aligned.
   - Keep the country dropdown anchored to the phone field.
   - Prevent the dropdown from "flying" to another position.
   - Provide clean desktop and mobile behavior.
   ========================================================= */

/* ---------------------------------------------------------
   PHONE FIELD WRAPPER
--------------------------------------------------------- */

.support-phone-group {
  position: relative;
}

.support-phone-input {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------
   COUNTRY SELECTOR
--------------------------------------------------------- */

.support-phone-country {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  flex: 0 0 94px;
  width: 94px;
  height: 46px;
  min-height: 46px;

  box-sizing: border-box;

  margin: 0;
  padding: 0 11px;

  border: 1px solid #d8d9db;
  border-right: 0;
  border-radius: 9px 0 0 9px;

  background: #ffffff;
  color: #131315;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.support-phone-country:hover {
  background: #fafafa;
}

.support-phone-country:focus {
  position: relative;
  z-index: 3;

  outline: none;

  border-color: #e5242a;

  box-shadow: 0 0 0 3px rgba(229, 36, 42, 0.1);
}

/* ---------------------------------------------------------
   COUNTRY FLAG
--------------------------------------------------------- */

#support-phone-country-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  min-width: 20px;

  font-size: 18px;
  line-height: 1;
}

/* ---------------------------------------------------------
   COUNTRY CODE
--------------------------------------------------------- */

#support-phone-country-code {
  display: inline-block;

  min-width: 30px;

  color: #131315;

  font-size: 13px;
  font-weight: 650;
  line-height: 1;

  text-align: center;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   COUNTRY ARROW
--------------------------------------------------------- */

.support-phone-country-arrow {
  display: block;

  width: 7px;
  height: 7px;

  margin-top: -4px;
  margin-left: 1px;

  border-right: 1.5px solid #575a5e;
  border-bottom: 1.5px solid #575a5e;

  transform: rotate(45deg);

  transition: transform 0.18s ease;
}

/* ---------------------------------------------------------
   PHONE NUMBER INPUT
--------------------------------------------------------- */

.support-phone-input > #support-phone {
  flex: 1 1 auto;

  width: auto;
  min-width: 0;

  height: 46px;
  min-height: 46px;

  box-sizing: border-box;

  margin: 0;

  border-radius: 0 9px 9px 0;
}

/*
   The global support form styles give every input a 1px border.
   We remove only the touching border here so the two controls
   visually behave like one combined field.
*/

.support-phone-country + #support-phone {
  border-left-color: #d8d9db;
}

/* ---------------------------------------------------------
   FOCUS STATE FOR THE WHOLE PHONE CONTROL
--------------------------------------------------------- */

.support-phone-input:focus-within .support-phone-country {
  border-color: #e5242a;
}

.support-phone-input:focus-within #support-phone {
  border-color: #e5242a;
}

/* ---------------------------------------------------------
   COUNTRY DROPDOWN
--------------------------------------------------------- */

/*
   IMPORTANT:
   The country menu is NOT inside .support-phone-input.
   It is a sibling below it.

   .support-phone-group is therefore our positioning anchor.
*/

.support-phone-country-menu {
  position: absolute;

  z-index: 1000;

  top: calc(100% + 6px);
  left: 0;

  width: 360px;
  max-width: 100%;

  box-sizing: border-box;

  overflow: hidden;

  border: 1px solid #d8d9db;
  border-radius: 10px;

  background: #ffffff;

  box-shadow:
    0 12px 28px rgba(19, 19, 21, 0.12),
    0 2px 6px rgba(19, 19, 21, 0.05);

  animation: supportCountryPickerIn 0.12s ease-out;
}

/*
   The hidden attribute must always win over the picker styling.
*/

.support-phone-country-menu[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------
   DROPDOWN ANIMATION
--------------------------------------------------------- */

@keyframes supportCountryPickerIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
   COUNTRY SEARCH AREA
--------------------------------------------------------- */

.support-phone-country-search {
  padding: 10px;

  border-bottom: 1px solid #e7e7e8;

  background: #ffffff;
}

.support-phone-country-search input {
  display: block;

  width: 100%;
  height: 38px;

  box-sizing: border-box;

  margin: 0;
  padding: 0 11px;

  border: 1px solid #d8d9db;
  border-radius: 7px;

  background: #f8f8f9;
  color: #131315;

  font-family: inherit;
  font-size: 13px;

  outline: none;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.support-phone-country-search input:hover {
  background: #ffffff;
}

.support-phone-country-search input:focus {
  background: #ffffff;

  border-color: #e5242a;

  box-shadow: 0 0 0 3px rgba(229, 36, 42, 0.08);
}

.support-phone-country-search input::placeholder {
  color: #999b9f;
}

/* ---------------------------------------------------------
   COUNTRY LIST
--------------------------------------------------------- */

.support-phone-country-list {
  max-height: 270px;

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

  padding: 5px;

  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: #c8c9cb transparent;
}

/* Chrome / Edge / Safari scrollbar */

.support-phone-country-list::-webkit-scrollbar {
  width: 7px;
}

.support-phone-country-list::-webkit-scrollbar-track {
  background: transparent;
}

.support-phone-country-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c8c9cb;
}

.support-phone-country-list::-webkit-scrollbar-thumb:hover {
  background: #aeb0b3;
}

/* ---------------------------------------------------------
   COUNTRY OPTIONS
--------------------------------------------------------- */

.support-phone-country-option {
  display: grid;

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

  align-items: center;

  width: 100%;
  min-height: 42px;

  box-sizing: border-box;

  margin: 0;
  padding: 7px 9px;

  border: 0;
  border-radius: 7px;

  background: transparent;
  color: #131315;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  text-align: left;

  cursor: pointer;

  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.support-phone-country-option:hover {
  background: #f2f2f3;
}

.support-phone-country-option:active {
  background: #e9e9ea;
}

.support-phone-country-option:focus {
  outline: none;
}

.support-phone-country-option:focus-visible {
  background: #f2f2f3;

  box-shadow: inset 0 0 0 1px rgba(87, 90, 94, 0.25);
}

/* ---------------------------------------------------------
   COUNTRY OPTION FLAG
--------------------------------------------------------- */

.support-phone-country-option-flag {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  min-width: 24px;

  font-size: 18px;
  line-height: 1;
}

/* ---------------------------------------------------------
   COUNTRY OPTION NAME
--------------------------------------------------------- */

.support-phone-country-option-name {
  min-width: 0;

  overflow: hidden;

  padding: 0 8px;

  color: #131315;

  line-height: 1.3;

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

/* ---------------------------------------------------------
   COUNTRY OPTION CODE
--------------------------------------------------------- */

.support-phone-country-option-code {
  padding-left: 8px;

  color: #777a7e;

  font-size: 12px;
  font-weight: 500;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {
  .support-phone-country {
    flex-basis: 90px;
    width: 90px;
  }

  .support-phone-country-menu {
    width: 100%;
    max-width: 100%;
  }

  .support-phone-country-list {
    max-height: 240px;
  }
}

/* ---------------------------------------------------------
   SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 420px) {
  .support-phone-country {
    flex-basis: 86px;
    width: 86px;

    gap: 6px;

    padding: 0 8px;
  }

  #support-phone-country-code {
    min-width: 27px;

    font-size: 12px;
  }

  #support-phone-country-flag {
    width: 18px;
    min-width: 18px;

    font-size: 17px;
  }

  .support-phone-country-arrow {
    width: 6px;
    height: 6px;
  }

  .support-phone-country-option {
    min-height: 44px;
  }
}

/* =========================================
   PHOTO ASSIGNMENT - CURRENT ASSIGNMENTS
   ========================================= */
/*
 * Shows the menu items currently using a photo.
 * Each assignment gets its own compact row so multiple
 * assignments remain readable without making the modal huge.
 */

.admin-photo-assignment-current {
  margin-top: 22px;
  margin-bottom: 22px;

  padding: 15px;

  border: 1px solid var(--border);
  border-radius: 15px;

  background: var(--surface-muted);
}

.admin-photo-assignment-current h3,
.admin-photo-assignment-assign-title {
  margin: 0 0 10px;

  color: var(--text);

  font-size: 0.82rem;
  font-weight: 780;
  letter-spacing: 0.01em;
}

.admin-photo-assignment-current-list {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.admin-photo-assignment-current-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-width: 0;

  padding: 10px 11px;

  border: 1px solid rgba(87, 90, 94, 0.12);
  border-radius: 11px;

  background: #ffffff;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.admin-photo-assignment-current-item:hover {
  border-color: rgba(229, 36, 42, 0.22);

  box-shadow: var(--shadow-xs);
}

.admin-photo-assignment-current-item > span {
  min-width: 0;

  overflow: hidden;

  color: var(--text);

  font-size: 0.88rem;
  font-weight: 650;

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

.admin-photo-assignment-current-empty {
  margin: 0 !important;

  color: var(--text-muted) !important;

  font-size: 0.84rem !important;
}

.admin-photo-assignment-unassign {
  flex: 0 0 auto;

  min-height: 32px;

  padding: 0 11px;

  border: 1px solid rgba(186, 45, 11, 0.18);
  border-radius: 9px;

  background: rgba(186, 45, 11, 0.06);

  color: var(--color-dark-red);

  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 720;

  cursor: pointer;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.admin-photo-assignment-unassign:hover {
  border-color: rgba(186, 45, 11, 0.32);

  background: rgba(186, 45, 11, 0.11);

  transform: translateY(-1px);
}

.admin-photo-assignment-unassign:active {
  transform: translateY(0);
}

.admin-photo-assignment-unassign:disabled {
  opacity: 0.6;

  cursor: wait;

  transform: none;
}

.admin-photo-assignment-assign-title {
  margin-top: 2px;
}

/* Mobile assignment rows */

@media (max-width: 500px) {
  .admin-photo-assignment-current {
    padding: 13px;
  }

  .admin-photo-assignment-current-item {
    align-items: flex-start;
  }

  .admin-photo-assignment-current-item > span {
    padding-top: 7px;
  }

  .admin-photo-assignment-unassign {
    min-height: 34px;
  }
}

/* =========================================================
   MAINTENANCE NOTE
   =========================================================
   This stylesheet intentionally keeps shared rules near the top and
   page-specific overrides near their relevant page sections. Avoid adding
   a second copy of an existing selector at the very bottom of the file.
   If a page needs a special appearance, add the rule beside that page's
   section and document why it overrides the shared style.
   ========================================================= */