/* SNISHOP UI layer aligned with HeroUI v3.2.6 tokens/patterns.
   The production app is server-rendered PHP, so @heroui/react cannot be mounted
   directly without a React build. This adapter applies the same token model,
   focus behavior, surfaces, and interaction language without changing business logic. */
:root {
  --ui-ink: #11181c;
  --ui-muted: #64748b;
  --ui-border: #dfe5eb;
  --ui-accent: #006fee;
  --ui-accent-hover: #005bc4;
  --ui-accent-soft: #e8f1ff;
  --ui-success: #17c964;
  --ui-warning: #f5a524;
  --ui-danger: #f31260;
  --ui-ring: rgba(0, 111, 238, .28);
  --ui-radius-sm: 10px;
  --ui-radius: 14px;
  --ui-radius-lg: 18px;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7f9fb;
  --ui-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --ui-shadow-md: 0 10px 28px rgba(15, 23, 42, .10);
}
html { scroll-behavior: smooth; }
.ui-skip-link { position: fixed; left: 1rem; top: .75rem; z-index: 100001; transform: translateY(-180%); padding: .7rem 1rem; border-radius: 10px; background: var(--ui-ink); color: #fff; font-weight: 800; text-decoration: none; box-shadow: var(--ui-shadow-md); transition: transform 180ms ease; }
.ui-skip-link:focus { transform: translateY(0); }
#dashboard-main:focus { outline: none; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
button, a, input, select, textarea { touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), a { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .62; }
:where(button, a, input, select, textarea):focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 2px; }
:where(button, a).ui-action, :where(button, a)[class*="rounded"] { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
:where(button, a):active { transform: scale(.985); }
input, select, textarea { color: var(--ui-ink); border-radius: var(--ui-radius-sm); }
input::placeholder, textarea::placeholder { color: var(--ui-muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-ring); }
.ph { display: inline-block; line-height: 1; font-style: normal; }

/* HeroUI-like surfaces for existing server-rendered dashboard components. */
.dashboard-service-item, .product-card, .form-card, .dashboard-card, .stat-card {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
  background: var(--ui-surface);
}
.dashboard-service-item:hover, .product-card:hover, .dashboard-card:hover, .stat-card:hover {
  border-color: rgba(0, 111, 238, .35);
  box-shadow: var(--ui-shadow-md);
  transform: translateY(-2px);
}
.dashboard-service-item:focus-within, .product-card:focus-within { box-shadow: 0 0 0 3px var(--ui-ring), var(--ui-shadow-md); }
.dashboard-service-item .premium-icon, .product-card .premium-icon { border-radius: var(--ui-radius); }

/* Prevent layout shift and make form choices visually scannable. */
label { line-height: 1.35; }
input[type="radio"] + label, input[type="checkbox"] + label { min-height: 44px; }
.form-option, .package-option, .payment-option { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.form-option:hover, .package-option:hover, .payment-option:hover { border-color: rgba(0,111,238,.45); background: var(--ui-accent-soft); }
.form-option:has(input:checked), .package-option:has(input:checked), .payment-option:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: 0 0 0 2px var(--ui-ring); }

@media (max-width: 767px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  button, a[role="button"], input[type="submit"] { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .dashboard-service-item:hover, .product-card:hover, .dashboard-card:hover, .stat-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}