/* Bairro360 Mobile Design System · premium layer */
:root {
  --ui-accent: var(--accent, #3158f5);
  --ui-accent-2: #6d4cff;
  --ui-ink: var(--ink, #102039);
  --ui-muted: var(--muted, #697892);
  --ui-surface: rgba(255, 255, 255, 0.88);
  --ui-line: color-mix(in srgb, var(--ui-ink) 10%, transparent);
  --ui-radius-sm: 14px;
  --ui-radius: 22px;
  --ui-radius-lg: 32px;
  --ui-shadow: 0 18px 50px rgba(15, 31, 58, 0.1);
  --ui-shadow-hover: 0 26px 70px rgba(15, 31, 58, 0.16);
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

body[data-ui] {
  position: relative;
  isolation: isolate;
  min-width: 320px;
}

body[data-ui]::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(107, 126, 158, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 126, 158, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 78%);
}

body[data-ui] button,
body[data-ui] a,
body[data-ui] input,
body[data-ui] select,
body[data-ui] textarea {
  -webkit-tap-highlight-color: transparent;
}

body[data-ui] button,
body[data-ui] a {
  transition:
    transform 180ms var(--ui-ease),
    box-shadow 180ms var(--ui-ease),
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

body[data-ui] button:not(:disabled):active,
body[data-ui] a:active {
  transform: scale(0.975);
}

body[data-ui] :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-accent) 28%, transparent);
  outline-offset: 3px;
}

body[data-ui] :where(input, select, textarea) {
  border-color: color-mix(in srgb, var(--ui-ink) 12%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

body[data-ui] :where(input, select, textarea):focus {
  border-color: color-mix(in srgb, var(--ui-accent) 58%, white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 11%, transparent);
}

body[data-ui] > header,
body[data-ui] .topbar,
body[data-ui] .app-header {
  border-bottom-color: color-mix(in srgb, var(--ui-ink) 9%, transparent);
  box-shadow: 0 10px 36px rgba(14, 29, 52, 0.07);
  backdrop-filter: blur(24px) saturate(1.35);
}

body[data-ui] :where(.mark, .brand-mark, .logo-button img) {
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--ui-accent) 26%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.28) inset;
}

body[data-ui] :where(.eyebrow, .kicker) {
  letter-spacing: 0.17em;
}

body[data-ui] :where(
    .product-card,
    .product,
    .booking-card,
    .card,
    .panel,
    .login-card,
    .order-card,
    .order,
    .job,
    .table-card,
    .history-row,
    .benefits,
    .search-panel,
    .wizard-panel,
    .catalog-panel,
    .about-card,
    .proof-card,
    .summary,
    .metric
  ) {
  border-color: color-mix(in srgb, var(--ui-ink) 9%, transparent);
  box-shadow: var(--ui-shadow);
}

@media (hover: hover) {
  body[data-ui] :where(.product-card, .product, .booking-card, .order-card, .order, .job, .table-card):hover {
    z-index: 1;
    border-color: color-mix(in srgb, var(--ui-accent) 32%, transparent);
    box-shadow: var(--ui-shadow-hover);
    transform: translateY(-4px);
  }

  body[data-ui] :where(.primary, .confirm-order, .flow-next, .round-add):not(:disabled):hover {
    box-shadow: 0 16px 36px color-mix(in srgb, var(--ui-accent) 32%, transparent);
    transform: translateY(-2px);
  }
}

body[data-ui] :where(.primary, .confirm-order, .flow-next, .round-add) {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ui-accent) 84%, white),
    var(--ui-accent) 62%,
    color-mix(in srgb, var(--ui-accent) 76%, #101e3a)
  );
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ui-accent) 27%, transparent);
}

body[data-ui] :where(.loading, .splash, .boot) b,
body[data-ui] .boot img {
  animation: ui-breathe 1.8s ease-in-out infinite;
}

body[data-ui] main > :not(.hidden),
body[data-ui] #app > :not(.hidden) {
  animation: ui-rise 520ms var(--ui-ease) both;
}

/* Food ordering: warm, editorial and product-led. */
body[data-ui="food-shop"] {
  --ui-accent: #ff5a2f;
  --ui-accent-2: #ff9d42;
  background:
    radial-gradient(circle at 92% 2%, rgba(255, 99, 51, 0.2), transparent 30rem),
    radial-gradient(circle at 5% 48%, rgba(255, 193, 106, 0.12), transparent 27rem),
    #f7f5f2;
}

[data-ui="food-shop"] .topbar-inner {
  height: 82px;
}

[data-ui="food-shop"] .hero {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 38px;
  box-shadow: 0 32px 90px rgba(19, 31, 51, 0.24);
}

[data-ui="food-shop"] .hero::after {
  background:
    linear-gradient(90deg, rgba(9, 18, 32, 0.94), rgba(9, 18, 32, 0.53) 62%, rgba(9, 18, 32, 0.2)),
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--ui-accent) 45%, transparent), transparent 42%);
}

[data-ui="food-shop"] .category-nav {
  position: sticky;
  z-index: 12;
  top: 82px;
  padding-block: 12px;
  background: color-mix(in srgb, #f7f5f2 88%, transparent);
  backdrop-filter: blur(20px);
}

[data-ui="food-shop"] .product-card {
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.93);
}

[data-ui="food-shop"] .product-image img {
  transition: transform 520ms var(--ui-ease);
}

@media (hover: hover) {
  [data-ui="food-shop"] .product-card:hover .product-image img {
    transform: scale(1.055);
  }
}

[data-ui="food-shop"] :where(.cart-drawer, .customizer) {
  border-left: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: -28px 0 90px rgba(12, 24, 43, 0.2);
  backdrop-filter: blur(22px);
}

/* Retail: clean commerce with blue-violet depth. */
body[data-ui="retail-shop"] {
  --ui-accent: #3158f5;
  --ui-accent-2: #714bff;
  background:
    radial-gradient(circle at 8% 22%, rgba(49, 88, 245, 0.13), transparent 30rem),
    radial-gradient(circle at 92% 56%, rgba(113, 75, 255, 0.1), transparent 28rem),
    #f4f7fc;
}

[data-ui="retail-shop"] .top {
  box-shadow: 0 10px 36px rgba(20, 43, 79, 0.08);
}

[data-ui="retail-shop"] .hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 73% 10%, rgba(90, 112, 255, 0.42), transparent 25rem),
    linear-gradient(125deg, #0b1e3a, #102d56 60%, #15294b);
}

[data-ui="retail-shop"] .hero::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.23;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, black, transparent 74%);
}

[data-ui="retail-shop"] .hero-inner {
  position: relative;
}

[data-ui="retail-shop"] .search-panel {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(24px) saturate(1.35);
}

[data-ui="retail-shop"] .product {
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,.94);
}

[data-ui="retail-shop"] .photo img,
[data-ui="retail-shop"] .cart-thumb img {
  transition: transform 520ms var(--ui-ease);
}

@media (hover: hover) {
  [data-ui="retail-shop"] .product:hover .photo img { transform: scale(1.06); }
}

/* Appointment experiences: boutique, immersive and calm. */
body[data-ui="barber-client"],
body[data-ui="barber-professional"] {
  --ui-accent: #8a63ff;
  --ui-accent-2: #36d7bd;
}

body[data-ui="beauty-client"],
body[data-ui="beauty-professional"] {
  --ui-accent: #e0448f;
  --ui-accent-2: #a867ff;
  background-image:
    linear-gradient(145deg, rgba(35, 10, 31, .9), rgba(30, 12, 38, .95)),
    radial-gradient(circle at 82% 5%, rgba(224, 68, 143, .42), transparent 31rem);
}

[data-ui$="-client"] :where(.booking-shell, .shop-layout) {
  gap: clamp(24px, 5vw, 68px);
}

[data-ui="barber-client"] :where(.wizard-panel, .catalog-panel),
[data-ui="beauty-client"] :where(.wizard-panel, .catalog-panel) {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, rgba(255,255,255,.22));
  border-radius: 34px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(28px) saturate(1.2);
}

[data-ui="barber-client"] .hero,
[data-ui="beauty-client"] .hero,
[data-ui="barber-professional"] .login-story,
[data-ui="beauty-professional"] .login-story {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
}

[data-ui="barber-client"] .hero::after,
[data-ui="beauty-client"] .hero::after,
[data-ui="barber-professional"] .login-story::after,
[data-ui="beauty-professional"] .login-story::after {
  position: absolute;
  right: -72px;
  bottom: -92px;
  width: 220px;
  height: 220px;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 45%, transparent);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 34px color-mix(in srgb, var(--ui-accent) 8%, transparent), 0 0 0 70px color-mix(in srgb, var(--ui-accent) 5%, transparent);
  pointer-events: none;
}

[data-ui="barber-client"] .choice,
[data-ui="beauty-client"] .choice,
[data-ui="barber-client"] .slot,
[data-ui="beauty-client"] .slot {
  border-radius: 18px;
}

[data-ui="barber-professional"] :where(.login-card, .agenda, .orders-panel),
[data-ui="beauty-professional"] :where(.login-card, .agenda, .orders-panel) {
  border-radius: 30px;
  backdrop-filter: blur(26px) saturate(1.25);
}

[data-ui="barber-professional"] .metrics > *,
[data-ui="beauty-professional"] .metrics > * {
  border-radius: 20px;
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}

/* Field services: technical precision with luminous accents. */
body[data-ui="workshop-client"],
body[data-ui="workshop-professional"] {
  --ui-accent: #18a8e6;
  --ui-accent-2: #21d3b3;
}

body[data-ui="service-client"],
body[data-ui="service-professional"] {
  --ui-accent: #2167f4;
  --ui-accent-2: #18c6a3;
}

[data-ui^="workshop-"] :where(.login-card, .panel, .card, .order, .modal-card),
[data-ui^="service-"] :where(.login-card, .panel, .card, .job, .modal-card) {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: color-mix(in srgb, #0c2036 86%, transparent);
  box-shadow: 0 28px 90px rgba(0, 5, 18, .32);
  backdrop-filter: blur(24px) saturate(1.25);
}

[data-ui^="workshop-"] :where(.login-card, .panel, .card, .order, .modal-card)::before,
[data-ui^="service-"] :where(.login-card, .panel, .card, .job, .modal-card)::before {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-accent) 75%, white), transparent);
  pointer-events: none;
}

[data-ui^="workshop-"] :where(.status, .step, .event),
[data-ui^="service-"] :where(.status-panel, .step, .event) {
  border-radius: 16px;
}

[data-ui^="workshop-"] .progress > *,
[data-ui^="service-"] .progress > * {
  box-shadow: 0 0 18px color-mix(in srgb, var(--ui-accent) 38%, transparent);
}

/* Waiter: fast touch targets and a floating navigation dock. */
body[data-ui="waiter"] {
  --ui-accent: #ec5b2b;
  --ui-accent-2: #ffad52;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 178, 96, .2), transparent 24rem),
    #f6f1eb;
}

[data-ui="waiter"] .app-header {
  min-height: 76px;
  background: rgba(255, 253, 249, .88);
}

[data-ui="waiter"] .table-card,
[data-ui="waiter"] .product-card,
[data-ui="waiter"] .order-card,
[data-ui="waiter"] .history-row {
  border-radius: 22px;
  background: rgba(255,255,255,.9);
}

[data-ui="waiter"] .bottom-nav {
  right: 14px;
  bottom: 12px;
  left: 14px;
  min-height: 68px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 22px;
  background: rgba(255, 253, 249, .88);
  box-shadow: 0 20px 55px rgba(45, 30, 20, .2);
  backdrop-filter: blur(24px) saturate(1.3);
}

[data-ui="waiter"] .bottom-nav button.active {
  border-radius: 16px;
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}

[data-ui="waiter"] .dialog {
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 -30px 90px rgba(30,20,14,.28);
}

@keyframes ui-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.025); }
}

@media (max-width: 760px) {
  :root { --ui-radius-lg: 26px; --ui-shadow: 0 14px 38px rgba(15,31,58,.1); }
  body[data-ui]::before { background-size: 36px 36px; }
  [data-ui="food-shop"] .hero,
  [data-ui="barber-client"] :where(.wizard-panel, .catalog-panel),
  [data-ui="beauty-client"] :where(.wizard-panel, .catalog-panel) { border-radius: 26px; }
  [data-ui="food-shop"] .category-nav { top: 74px; }
  [data-ui="waiter"] .mobile-shell { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui] *,
  body[data-ui] *::before,
  body[data-ui] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Technical apps keep their cinematic shell, with bright cards for readable workflows. */
[data-ui^="workshop-"] :where(.login-card, .panel, .card, .order, .modal-card),
[data-ui^="service-"] :where(.login-card, .panel, .card, .job, .modal-card) {
  border: 1px solid rgba(219, 229, 241, .88);
  background: rgba(249, 252, 255, .94);
  color: #14253d;
  box-shadow: 0 28px 90px rgba(0, 5, 18, .2);
}

[data-ui^="workshop-"] :where(.login-card, .panel, .card, .order, .modal-card) :where(h1, h2, h3, label),
[data-ui^="service-"] :where(.login-card, .panel, .card, .job, .modal-card) :where(h1, h2, h3, label) {
  color: #14253d;
}