/* ==========================================================================
   Custom Components - Tailwind @apply based with CSS Variables
   ========================================================================== */

@layer components {
  /* ==========================================================================
     Buttons
     ========================================================================== */

  .btn-primary {
    @apply border-none rounded-full px-6 py-2
           font-medium text-sm transition-all duration-150
           cursor-pointer
           hover:-translate-y-0.5 active:translate-y-0
           disabled:opacity-60 disabled:cursor-not-allowed
           focus:outline-none;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
  }

  .btn-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
  }

  .btn-primary:focus-visible {
    box-shadow: var(--shadow-focus);
  }

  .btn-secondary {
    @apply rounded-full px-6 py-2 font-medium text-sm
           transition-all duration-150 cursor-pointer
           disabled:opacity-60 disabled:cursor-not-allowed
           focus:outline-none;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
  }

  .btn-secondary:hover {
    background-color: var(--color-bg-sunken);
  }

  .btn-secondary:focus-visible {
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.3);
  }

  .btn-success {
    @apply border-none rounded-full px-6 py-2
           font-medium text-sm transition-all duration-150
           cursor-pointer
           disabled:opacity-60 disabled:cursor-not-allowed
           focus:outline-none;
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
  }

  .btn-success:hover {
    background-color: var(--color-success-hover);
    box-shadow: var(--shadow-md);
  }

  .btn-danger {
    @apply border-none rounded-full px-6 py-2
           font-medium text-sm transition-all duration-150
           cursor-pointer
           disabled:opacity-60 disabled:cursor-not-allowed
           focus:outline-none;
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
  }

  .btn-danger:hover {
    background-color: var(--color-danger-hover);
    box-shadow: var(--shadow-md);
  }

  .btn-warning {
    @apply border-none rounded-full px-6 py-2
           font-medium text-sm transition-all duration-150
           cursor-pointer
           disabled:opacity-60 disabled:cursor-not-allowed
           focus:outline-none;
    background-color: var(--color-warning);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
  }

  .btn-warning:hover {
    background-color: var(--color-warning-hover);
    box-shadow: var(--shadow-md);
  }

  .btn-info {
    @apply border-none rounded-full px-6 py-2
           font-medium text-sm transition-all duration-150
           cursor-pointer
           disabled:opacity-60 disabled:cursor-not-allowed
           focus:outline-none;
    background-color: var(--color-info);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
  }

  .btn-info:hover {
    background-color: var(--color-info-hover);
    box-shadow: var(--shadow-md);
  }

  /* Icon button (circular) */
  .btn-icon {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-full
           p-0 transition-all duration-150 cursor-pointer
           focus:outline-none;
    box-shadow: var(--shadow-sm);
  }

  .btn-icon-warning {
    @apply btn-icon;
    background-color: var(--color-warning);
    color: var(--color-text-inverse);
  }

  .btn-icon-warning:hover {
    background-color: var(--color-warning-hover);
  }

  .btn-icon-info {
    @apply btn-icon;
    background-color: var(--color-info);
    color: var(--color-text-inverse);
  }

  .btn-icon-info:hover {
    background-color: var(--color-info-hover);
  }

  /* Ghost button */
  .btn-ghost {
    @apply px-3 py-2 rounded-md font-medium text-sm
           transition-all duration-150 cursor-pointer
           focus:outline-none;
    background-color: transparent;
    color: var(--color-text-secondary);
  }

  .btn-ghost:hover {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
  }

  /* ==========================================================================
     Form Controls
     ========================================================================== */

  .form-input {
    @apply w-full px-3 py-2 rounded-md text-sm
           transition-colors duration-150
           disabled:cursor-not-allowed
           read-only:cursor-default;
    background-color: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
  }

  .form-input::placeholder {
    color: var(--color-text-tertiary);
  }

  .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
  }

  .form-input:disabled {
    background-color: var(--color-bg-surface);
    opacity: 0.7;
  }

  .form-input:read-only {
    background-color: var(--color-bg-surface);
  }

  .form-select {
    @apply form-input appearance-none pr-10
           bg-[length:1.5em_1.5em] bg-[right_0.5rem_center] bg-no-repeat;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%236b7280%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
  }

  [data-theme="dark"] .form-select {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%239ca3af%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
  }

  .form-textarea {
    @apply form-input resize-none;
  }

  .form-checkbox {
    @apply h-4 w-4 rounded cursor-pointer;
    border-color: var(--color-border-default);
    color: var(--color-primary);
  }

  .form-checkbox:focus {
    --tw-ring-color: var(--color-primary);
  }

  /* Toggle Switch */
  .toggle-switch {
    @apply relative w-11 h-6 rounded-full cursor-pointer
           transition-colors duration-150
           after:content-[''] after:absolute after:top-0.5 after:left-0.5
           after:w-5 after:h-5 after:rounded-full
           after:transition-transform after:duration-150
           peer-checked:after:translate-x-5;
    background-color: var(--color-border-default);
  }

  .toggle-switch::after {
    background-color: var(--color-bg-elevated);
    box-shadow: var(--shadow-sm);
  }

  .peer:checked ~ .toggle-switch {
    background-color: var(--color-primary);
  }

  .peer:focus ~ .toggle-switch {
    box-shadow: var(--shadow-focus);
  }

  /* Form Label */
  .form-label {
    @apply block text-sm font-medium mb-1;
    color: var(--color-text-secondary);
  }

  /* Form Help Text */
  .form-help {
    @apply mt-1 text-xs;
    color: var(--color-text-tertiary);
  }

  .form-help-danger {
    @apply mt-1 text-xs;
    color: var(--color-danger);
  }

  /* ==========================================================================
     Layout Components
     ========================================================================== */

  /* Section Card */
  .section-card {
    @apply rounded-xl p-6;
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
  }

  /* Section Header */
  .section-header {
    @apply text-lg font-semibold pb-3 mb-4;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-accent);
  }

  /* Form Row */
  .form-row {
    @apply grid grid-cols-1 sm:grid-cols-12 gap-3 items-start mb-4;
  }

  .form-row-label {
    @apply sm:col-span-3 text-sm font-medium sm:text-right sm:pt-2;
    color: var(--color-text-secondary);
  }

  .form-row-input {
    @apply sm:col-span-7;
  }

  .form-row-help {
    @apply sm:col-span-7 sm:col-start-4;
  }

  /* ==========================================================================
     Navigation
     ========================================================================== */

  .nav-link {
    @apply flex items-center gap-2 px-4 py-2 rounded-md
           transition-colors duration-150;
    color: var(--color-text-secondary);
  }

  .nav-link:hover {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
  }

  .nav-link-active {
    @apply font-medium;
    background-color: var(--color-accent-soft);
    color: var(--color-text-primary);
  }

  .nav-link-active:hover {
    background-color: var(--color-accent-soft);
  }

  /* Tab Navigation */
  .nav-tabs {
    @apply flex flex-wrap gap-1 mb-6;
    border-bottom: 1px solid var(--color-border-light);
  }

  .nav-tab {
    @apply flex items-center gap-2 px-4 py-2 -mb-px text-sm font-medium
           transition-colors duration-150;
    color: var(--color-text-tertiary);
    border-bottom: 2px solid transparent;
  }

  .nav-tab:hover {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-border-default);
  }

  .nav-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }

  /* ==========================================================================
     Data Table
     ========================================================================== */

  .data-table {
    @apply w-full;
    border-collapse: separate;
    border-spacing: 0;
  }

  .data-table th {
    @apply font-semibold text-sm whitespace-nowrap px-4 py-3 text-center;
    background-color: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-default);
  }

  .data-table td {
    @apply align-middle text-sm px-4 py-3 text-center;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
  }

  .data-table tbody tr {
    @apply transition-colors duration-150;
  }

  .data-table tbody tr:hover {
    background-color: var(--color-primary-light);
  }

  /* Zebra striping for dark mode */
  [data-theme="dark"] .data-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-sunken);
  }

  [data-theme="dark"] .data-table tbody tr:hover {
    background-color: var(--color-primary-light);
  }

  /* ==========================================================================
     Badges
     ========================================================================== */

  .badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full
           text-xs font-medium;
  }

  .badge-success {
    background-color: var(--color-success-light);
    color: var(--color-success);
  }

  .badge-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
  }

  .badge-danger {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
  }

  .badge-info {
    background-color: var(--color-info-light);
    color: var(--color-info);
  }

  /* ==========================================================================
     Alerts
     ========================================================================== */

  .alert {
    @apply p-4 rounded-lg mb-4 flex items-center justify-between;
    border-left: 4px solid;
  }

  .alert-success {
    background-color: var(--color-success-light);
    color: var(--color-success);
    border-left-color: var(--color-success);
  }

  .alert-danger {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
    border-left-color: var(--color-danger);
  }

  .alert-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
    border-left-color: var(--color-warning);
  }

  .alert-info {
    background-color: var(--color-info-light);
    color: var(--color-info);
    border-left-color: var(--color-info);
  }

  /* ==========================================================================
     Loading Spinner
     ========================================================================== */

  .spinner {
    @apply inline-block border-2 border-current border-t-transparent
           rounded-full animate-spin;
  }

  .spinner-sm {
    @apply w-4 h-4;
  }

  .spinner-md {
    @apply w-6 h-6;
  }

  .spinner-lg {
    @apply w-8 h-8;
  }

  .spinner-gold {
    color: var(--color-accent-gold);
  }

  .spinner-white {
    color: var(--color-text-inverse);
  }

  /* ==========================================================================
     Loading Button
     ========================================================================== */

  .btn-loading {
    @apply relative pointer-events-none opacity-80;
  }

  .btn-loading .btn-text {
    @apply invisible;
  }

  .btn-spinner {
    @apply hidden absolute top-1/2 left-1/2;
    transform: translate(-50%, -50%);
  }

  .btn-loading .btn-spinner {
    @apply block;
  }

  /* ==========================================================================
     Accessibility
     ========================================================================== */

  .skip-link {
    @apply absolute -top-10 left-0 px-4 py-2
           z-[9999] no-underline rounded-br-md
           transition-all duration-150;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
  }

  .skip-link:focus {
    @apply top-0;
  }

  .sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
  }

  /* ==========================================================================
     Mobile Order Cards
     ========================================================================== */

  .order-card {
    @apply rounded-lg overflow-hidden;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
  }

  .order-card-header {
    @apply flex items-center justify-between p-3;
    background-color: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border-light);
  }

  .order-card-body {
    @apply p-3 grid grid-cols-2 gap-2 text-sm;
  }

  .order-card-label {
    @apply text-xs;
    color: var(--color-text-tertiary);
  }

  .order-card-value {
    color: var(--color-text-primary);
  }

  /* ==========================================================================
     Theme Toggle Button
     ========================================================================== */

  .theme-toggle-btn {
    @apply p-2 rounded-full transition-colors duration-150;
    background-color: transparent;
  }

  .theme-toggle-btn:hover {
    background-color: var(--color-bg-surface);
  }

  .theme-toggle-btn:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
  }

  .theme-toggle-btn .icon-sun,
  .theme-toggle-btn .icon-moon {
    @apply w-5 h-5 transition-transform duration-300;
  }

  .theme-toggle-btn .icon-sun {
    color: var(--color-accent-gold);
  }

  .theme-toggle-btn .icon-moon {
    color: var(--color-text-secondary);
  }

  /* ==========================================================================
     Glassmorphism Nav (for sticky header)
     ========================================================================== */

  .glass-nav {
    @apply backdrop-blur-lg;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid var(--color-border-light);
  }

  [data-theme="dark"] .glass-nav {
    background-color: rgba(15, 23, 42, 0.8);
  }

  /* Glass Footer (same as nav but with top border) */
  .glass-footer {
    @apply backdrop-blur-sm;
    background-color: rgba(255, 255, 255, 0.8);
    border-top: 1px solid var(--color-border-light);
  }

  [data-theme="dark"] .glass-footer {
    background-color: rgba(15, 23, 42, 0.8);
  }

  /* ==========================================================================
     Card with hover lift effect
     ========================================================================== */

  .card-hover {
    @apply transition-all duration-200;
  }

  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  /* ==========================================================================
     Sidebar Layout Components
     ========================================================================== */

  /* Sidebar Container */
  .sidebar {
    @apply fixed left-0 top-0 h-full flex flex-col z-sidebar;
    width: var(--sidebar-width);
    background-color: var(--color-bg-elevated);
    border-right: 1px solid var(--color-border-subtle);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Hidden on mobile by default */
  @media (max-width: 1023px) {
    .sidebar {
      transform: translateX(-100%);
    }

    .sidebar.is-open {
      transform: translateX(0);
    }
  }

  /* Sidebar Header (Logo area) */
  .sidebar-header {
    @apply flex items-center justify-between px-4 shrink-0;
    height: var(--header-height);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .sidebar-logo {
    @apply h-8 w-auto;
  }

  /* Sidebar Navigation */
  .sidebar-nav {
    @apply flex-1 overflow-y-auto py-4 px-3;
  }

  .sidebar-nav-section {
    @apply mb-6;
  }

  .sidebar-nav-title {
    @apply px-3 mb-2 text-xs font-semibold uppercase tracking-wide;
    color: var(--color-text-tertiary);
  }

  /* Sidebar Links */
  .sidebar-link {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg mb-1
           text-sm font-medium transition-all duration-150;
    color: var(--color-text-secondary);
  }

  .sidebar-link:hover {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
  }

  .sidebar-link-icon {
    @apply w-5 h-5 shrink-0;
    color: var(--color-text-tertiary);
  }

  .sidebar-link:hover .sidebar-link-icon {
    color: var(--color-text-secondary);
  }

  /* Active state with glow effect */
  .sidebar-link-active {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary-sm);
  }

  .sidebar-link-active:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
  }

  .sidebar-link-active .sidebar-link-icon {
    color: var(--color-primary);
  }

  /* Sidebar Footer */
  .sidebar-footer {
    @apply px-3 py-4 shrink-0;
    border-top: 1px solid var(--color-border-subtle);
  }

  .sidebar-user {
    @apply flex items-center gap-3 px-3 py-2 rounded-lg;
    background-color: var(--color-bg-surface);
  }

  .sidebar-user-avatar {
    @apply w-8 h-8 rounded-full flex items-center justify-center
           text-sm font-medium;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
  }

  .sidebar-user-info {
    @apply flex-1 min-w-0;
  }

  .sidebar-user-name {
    @apply text-sm font-medium truncate;
    color: var(--color-text-primary);
  }

  .sidebar-user-email {
    @apply text-xs truncate;
    color: var(--color-text-tertiary);
  }

  /* ==========================================================================
     Mobile Header & Drawer
     ========================================================================== */

  .mobile-header {
    @apply fixed top-0 left-0 right-0 flex items-center justify-between
           px-4 z-fixed lg:hidden;
    height: var(--mobile-header-height);
    background-color: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .mobile-header-logo {
    @apply h-7 w-auto;
  }

  .mobile-menu-btn {
    @apply p-2 rounded-lg transition-colors duration-150;
    color: var(--color-text-secondary);
  }

  .mobile-menu-btn:hover {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
  }

  /* Mobile Drawer Backdrop */
  .mobile-backdrop {
    @apply fixed inset-0 z-modal-backdrop lg:hidden;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .mobile-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* ==========================================================================
     Card with Glow Effect (Dark mode signature)
     ========================================================================== */

  .card-glow {
    @apply rounded-xl p-6;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .card-glow:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-lg), var(--shadow-glow-primary-sm);
  }

  /* Card with primary accent glow */
  .card-glow-primary {
    @apply card-glow;
    border-color: var(--color-primary-50);
  }

  .card-glow-primary:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
  }

  /* ==========================================================================
     Page Header
     ========================================================================== */

  .page-header {
    @apply mb-6 pb-4;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .page-title {
    @apply text-2xl font-semibold tracking-tight;
    color: var(--color-text-primary);
  }

  .page-subtitle {
    @apply mt-1 text-sm;
    color: var(--color-text-tertiary);
  }

  /* Page header with actions */
  .page-header-with-actions {
    @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4;
  }

  /* ==========================================================================
     Main Content Area
     ========================================================================== */

  .main-content {
    @apply min-h-screen;
    background-color: var(--color-bg-canvas);
    padding-top: var(--mobile-header-height);
  }

  @media (min-width: 1024px) {
    .main-content {
      margin-left: var(--sidebar-width);
      padding-top: 0;
    }
  }

  .main-content-inner {
    @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6;
  }

  .main-content-inner-wide {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6;
  }

  /* ==========================================================================
     Grid Background Pattern (for landing pages)
     ========================================================================== */

  .bg-grid-pattern {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  [data-theme="light"] .bg-grid-pattern {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  }

  /* Radial gradient overlay */
  .bg-glow-overlay {
    position: relative;
  }

  .bg-glow-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    height: 400px;
    background: radial-gradient(
      ellipse at center top,
      rgba(249, 115, 22, 0.15) 0%,
      transparent 70%
    );
    pointer-events: none;
  }

  [data-theme="light"] .bg-glow-overlay::before {
    background: radial-gradient(
      ellipse at center top,
      rgba(234, 88, 12, 0.08) 0%,
      transparent 70%
    );
  }

}

/* ==========================================================================
   Utilities
   ========================================================================== */

@layer utilities {
  /* Animations */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.25s ease-out forwards;
  }

  .animate-slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
  }

  /* Stagger delay utility */
  .stagger-1 { animation-delay: 50ms; }
  .stagger-2 { animation-delay: 100ms; }
  .stagger-3 { animation-delay: 150ms; }
  .stagger-4 { animation-delay: 200ms; }
  .stagger-5 { animation-delay: 250ms; }
  .stagger-6 { animation-delay: 300ms; }

  /* No resize textarea */
  .no-resize {
    resize: none;
  }

  /* Text colors using CSS variables */
  .text-primary-var { color: var(--color-text-primary); }
  .text-secondary-var { color: var(--color-text-secondary); }
  .text-tertiary-var { color: var(--color-text-tertiary); }

  /* Background colors using CSS variables */
  .bg-base-var { background-color: var(--color-bg-base); }
  .bg-elevated-var { background-color: var(--color-bg-elevated); }
  .bg-surface-var { background-color: var(--color-bg-surface); }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   Review Popover (outside @layer for higher specificity)
   ========================================================================== */

/* レビューバッジ（トリガーボタン） */
.review-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

.review-badge:hover {
  background-color: var(--color-bg-surface);
}

.review-badge:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* レビュー種別バッジ */
.review-badge-product {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 9999px;
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.review-badge-shop {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 9999px;
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.review-badge-empty {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ポップアップコンテナ - hiddenの詳細度を上げる */
.review-popover {
  position: fixed;
  z-index: var(--z-popover);
  width: 380px;
  max-height: 400px;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-xl);
}

/* 重要: .hiddenより高い詳細度で非表示を設定 */
.review-popover.hidden {
  display: none !important;
}

/* ポップアップヘッダー */
.review-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
}

.review-popover-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.review-popover-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.review-popover-close:hover {
  background-color: var(--color-bg-sunken);
  color: var(--color-text-primary);
}

/* ポップアップボディ */
.review-popover-body {
  padding: 0.75rem 1rem;
  max-height: 320px;
  overflow-y: auto;
}

/* レビューアイテム */
.review-item {
  padding: 0.75rem 0;
}

.review-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border-subtle);
}

.review-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

/* 星評価 - SVGサイズを明示的に指定 */
.review-stars {
  display: inline-flex;
  gap: 0.125rem;
}

.review-stars svg {
  width: 1rem;
  height: 1rem;
}

.review-date {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-left: auto;
}

.review-text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 0.5rem 0;
}

.review-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
}

.review-link:hover {
  text-decoration: underline;
}

.review-link svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* モバイル対応 */
@media (max-width: 1023px) {
  .review-popover {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-height: 70vh;
    border-radius: 0.75rem 0.75rem 0 0;
    animation: reviewSlideUp 0.25s ease-out;
  }

  .review-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-popover) - 1);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }
}

@keyframes reviewSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}