/**
 * ARVYAM Component Styles
 * Phase 2 UI/UX - Steps 3 & 5
 */

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  /* Result Card Colors */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --card-shadow-hover: rgba(0, 0, 0, 0.15);
  --card-text-primary: #111827;
  --card-text-secondary: #6b7280;
  --card-text-muted: #9ca3af;

  /* CTA Button Colors */
  --cta-bg: #059669;
  --cta-bg-hover: #047857;
  --cta-bg-active: #065f46;
  --cta-text: #ffffff;
  --cta-focus-ring: #10b981;

  /* Spacing */
  --card-padding: 1rem;
  --card-gap: 1rem;
  --card-border-radius: 0.75rem;

  /* Typography */
  --card-title-size: 1.25rem;
  --card-title-weight: 600;
  --card-subtitle-size: 0.875rem;
  --card-subtitle-weight: 500;
  --card-description-size: 0.9375rem;
  --card-description-weight: 400;

  /* Transitions */
  --card-transition: all 0.2s ease-in-out;
}

/* ========================================================================
   UNIFIED BUTTON SYSTEM (Phase 13A.3)
   Based on elite e-commerce best practices
   ======================================================================== */

/**
 * Unified button system for all CTAs across the site
 * Variants: primary (revenue), secondary (navigation), tertiary (ghost)
 * Constitutional: WCAG 2.1 AA compliant (44px touch targets, accessible focus states)
 */

/* Base button - shared properties */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-height: 44px; /* WCAG touch target minimum */
  padding: 0 24px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

/* PRIMARY - Revenue/critical actions (forest green) */
.btn--primary {
  background: #0F766E;
  color: #FFFFFF;
  border-color: #0F766E;
}

.btn--primary:hover {
  background: #0D6860;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.btn--primary:active {
  transform: translateY(1px);
  background: #0A5850;
}

/* SECONDARY - Navigation actions (beige) */
.btn--secondary {
  background: #E6B17E;
  color: #1E1E1E;
  border-color: #E6B17E;
}

.btn--secondary:hover {
  background: #D9A06B;
  box-shadow: 0 4px 12px rgba(230, 177, 126, 0.3);
}

.btn--secondary:active {
  transform: translateY(1px);
  background: #CC8F58;
}

/* TERTIARY - Ghost/outline (white) */
.btn--tertiary {
  background: #FFFFFF;
  color: #2B2B2B;
  border-color: rgba(43, 43, 43, 0.15);
}

.btn--tertiary:hover {
  border-color: rgba(43, 43, 43, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn--tertiary:active {
  transform: translateY(1px);
  background: #F5F5F5;
}

/* Focus state (all variants) - WCAG 2.1 AA */
.btn:focus-visible {
  outline: 2px solid rgba(43, 43, 43, 0.75);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(230, 177, 126, 0.28);
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
  background: #D1D5DB;
  color: #9CA3AF;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  pointer-events: none;
}

/* Sizes (optional, for specific use cases) */
.btn--lg {
  padding: 0 32px;
  font-size: 18px;
  min-height: 56px;
}

.btn--sm {
  padding: 0 16px;
  font-size: 15px;
  min-height: 44px;
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* ========================================
   Result Card Base Styles
   ======================================== */

.result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-border-radius);
  box-shadow: 0 1px 3px var(--card-shadow);
  transition: var(--card-transition);
  cursor: pointer;
  overflow: hidden;
  height: 100%;
}

/* Hover effects - desktop only (not on touch/active) */
@media (hover: hover) and (pointer: fine) {
  .result-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px var(--card-shadow-hover);
  }
}

/* Step 11 Polish: Touch feedback for mobile - provides tactile response on tap */
.result-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px var(--card-shadow);
}

/* Focus state for keyboard navigation */
.result-card:focus {
  outline: 2px solid var(--cta-focus-ring);
  outline-offset: 2px;
}

.result-card:focus:not(:focus-visible) {
  outline: none;
}

.result-card:focus-visible {
  outline: 2px solid var(--cta-focus-ring);
  outline-offset: 2px;
}

/* ========================================
   Image Container
   ======================================== */

.result-card__image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f3f4f6;
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}

.result-card__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/5;  /* Portrait images for catalog */
  transition: transform 0.3s ease-in-out;
}

/* Image hover effect - desktop only */
@media (hover: hover) and (pointer: fine) {
  .result-card:hover .result-card__image {
    transform: scale(1.05);
  }
}

/* Step 11 Polish: Image touch feedback for mobile */
.result-card:active .result-card__image {
  transform: scale(1.02);
}

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

.result-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--card-padding);
  flex: 1;
}

/* Title */
.result-card__title {
  margin: 0;
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  color: var(--card-text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Subtitle */
.result-card__subtitle {
  margin: 0;
  font-size: var(--card-subtitle-size);
  font-weight: var(--card-subtitle-weight);
  color: var(--card-text-secondary);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Description */
.result-card__description {
  margin: 0;
  font-size: var(--card-description-size);
  font-weight: var(--card-description-weight);
  color: var(--card-text-muted);
  line-height: 1.6;
  flex: 1;
}

/* A1: Price Display */
.result-card__price {
  margin: 0.375rem 0 0.625rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--card-text-primary, #111827);
  font-family: "Lora", Georgia, serif;
  letter-spacing: -0.01em;
}

/* ========================================
   CTA Button (Layout Only - Core Styling from .btn)
   ======================================== */

.result-card__cta {
  /* Layout adjustments only - core button styling from .btn + .btn--primary */
  margin-top: 1.25rem;
  width: 100%;
}


/* ========================================
   Responsive Layouts
   ======================================== */

/* Mobile: 320px - Full width single column */
@media (max-width: 639px) {
  .result-card {
    max-width: 100%;
  }

  .result-card__content {
    padding: 1rem;
  }

  .result-card__title {
    font-size: 1.125rem;
  }
}

/* Tablet: 640px - 2 column grid */
@media (min-width: 640px) {
  .result-card {
    --card-padding: 1.25rem;
  }

  .result-card__content {
    gap: 0.875rem;
  }
}

/* Desktop: 960px+ - ALWAYS 3 column grid (constitutional requirement) */
@media (min-width: 1024px) {
  .result-card {
    --card-padding: 1.5rem;
  }

  .result-card__content {
    gap: 1rem;
  }

  .result-card__title {
    font-size: 1.375rem;
  }

  .result-card__description {
    font-size: 1rem;
  }
}

/* ========================================
   Dark Mode Support (Optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --card-bg: #1f2937;
    --card-border: #374151;
    --card-shadow: rgba(0, 0, 0, 0.3);
    --card-shadow-hover: rgba(0, 0, 0, 0.5);
    --card-text-primary: #f9fafb;
    --card-text-secondary: #d1d5db;
    --card-text-muted: #9ca3af;
  }

  .result-card__image-wrapper {
    background: #374151;
  }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .result-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }

  .result-card:hover {
    transform: none;
  }

  .result-card__cta {
    display: none;
  }
}

/* ========================================
   Consent Banner Styles
   Phase 2 UI/UX - Step 3
   ======================================== */

/* Overlay */
.consent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal */
.consent-modal {
  position: relative;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}

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

/* Card - Phase 13C: Premium styling to match result cards */
.consent-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06), 
              0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Phase 13C: Mobile consent card */
@media (max-width: 480px) {
  .consent-card {
    padding: 1.5rem 1.25rem;
  }
}

/* Title */
.consent-title {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

/* Explanation */
.consent-explanation {
  margin: 0 0 1.5rem 0;
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.6;
}

/* Checkbox Group */
.consent-checkbox-group {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

.consent-checkbox-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.consent-checkbox-item:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

.consent-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #059669;
}

.consent-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.consent-checkbox-label-wrapper {
  flex: 1;
}

.consent-checkbox-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.consent-required {
  font-weight: 400;
  color: #6b7280;
  font-size: 0.875rem;
}

.consent-checkbox-description {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Buttons */
.consent-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.consent-btn {
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-align: center;
  width: 100%;
}

.consent-btn:focus {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

.consent-btn:focus:not(:focus-visible) {
  outline: none;
}

.consent-btn:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Primary Button */
.consent-btn-primary {
  background: #059669;
  color: #ffffff;
}

.consent-btn-primary:hover {
  background: #047857;
}

.consent-btn-primary:active {
  background: #065f46;
  transform: translateY(1px);
}

/* Secondary Button */
.consent-btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.consent-btn-secondary:hover {
  background: #e5e7eb;
}

.consent-btn-secondary:active {
  background: #d1d5db;
  transform: translateY(1px);
}

/* Tertiary Button */
.consent-btn-tertiary {
  background: transparent;
  color: #059669;
  border: 1px solid #d1d5db;
}

.consent-btn-tertiary:hover {
  background: #f9fafb;
  border-color: #059669;
}

.consent-btn-tertiary:active {
  background: #f3f4f6;
  transform: translateY(1px);
}

/* Full Width Button */
.consent-btn-full {
  width: 100%;
}

/* Close Button */
.consent-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}

.consent-close:hover {
  background: #f3f4f6;
  color: #111827;
}

.consent-close:focus {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

.consent-close:focus:not(:focus-visible) {
  outline: none;
}

.consent-close:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Responsive */
@media (min-width: 640px) {
  .consent-card {
    padding: 2.5rem;
  }

  .consent-buttons {
    flex-direction: row;
    justify-content: flex-end;
  }

  .consent-btn:not(.consent-btn-full) {
    width: auto;
    min-width: 140px;
  }

  .consent-btn-tertiary {
    order: -1;
    margin-right: auto;
  }
}

/* Dark Mode - Consent Banner */
@media (prefers-color-scheme: dark) {
  .consent-card {
    background: #1f2937;
  }

  .consent-title {
    color: #f9fafb;
  }

  .consent-explanation {
    color: #d1d5db;
  }

  .consent-checkbox-group {
    background: #111827;
    border-color: #374151;
  }

  .consent-checkbox-item {
    border-color: #374151;
  }

  .consent-checkbox-label {
    color: #f9fafb;
  }

  .consent-checkbox-description {
    color: #9ca3af;
  }

  .consent-btn-secondary {
    background: #374151;
    color: #f9fafb;
  }

  .consent-btn-secondary:hover {
    background: #4b5563;
  }

  .consent-btn-tertiary {
    color: #10b981;
    border-color: #374151;
  }

  .consent-btn-tertiary:hover {
    background: #111827;
    border-color: #10b981;
  }

  .consent-close {
    color: #9ca3af;
  }

  .consent-close:hover {
    background: #374151;
    color: #f9fafb;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .consent-overlay,
  .consent-modal {
    animation: none;
  }

  .consent-btn,
  .consent-close {
    transition: none;
  }
}

/* Print - Consent Banner */
@media print {
  .consent-overlay {
    display: none;
  }
}

/* ========================================
   Consent Toast (A5: Butter-Bar Pattern)
   First-run bottom-right toast banner
   ======================================== */

.consent-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  max-width: 420px;
  animation: slideInUp 0.3s ease-out;
}

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

.consent-toast__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 1.25rem 1.5rem;
}

.consent-toast__title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.consent-toast__msg {
  font-family: "Lora", Georgia, serif;
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

.consent-toast__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Responsive toast adjustments */
@media (max-width: 480px) {
  .consent-toast {
    right: 16px;
    left: 16px;
    bottom: 16px;
    max-width: none;
  }

  .consent-toast__actions {
    flex-direction: column;
  }

  .consent-toast__actions .btn {
    width: 100%;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .consent-toast__card {
    background: #1f2937;
    border-color: #374151;
  }

  .consent-toast__title {
    color: #f9fafb;
  }

  .consent-toast__msg {
    color: #d1d5db;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .consent-toast {
    animation: none;
  }
}

/* ========================================
   RefineBar Component Styles
   Phase 2 UI/UX - Step 7
   ======================================== */

/**
 * Constitutional Compliance:
 * - Guest-First: Clear, simple UI (no complexity)
 * - ARVY Persona: Calm colors, soft shadows
 * - Accessibility: WCAG 2.1 AA (contrast, focus, touch targets)
 */

/* RefineBar Container */
.refine-bar {
  margin-top: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* RefineBar Form */
.refine-bar__form {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem;
}

.refine-bar__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  color: #2B2B2B;
  margin: 0 0 1rem 0;
  text-align: center;
}

/* Form Group */
.refine-bar__form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.refine-bar__label {
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: #2B2B2B;
  display: block;
}

/* Input Field */
.refine-bar__input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  font-size: 16px;
  font-family: "Lora", Georgia, serif;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.refine-bar__input::placeholder {
  color: #9B9791;
  opacity: 1;
}

.refine-bar__input:focus {
  outline: 2px solid rgba(43, 43, 43, 0.75);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(230, 177, 126, 0.28);
  border-color: rgba(230, 177, 126, 0.55);
}

.refine-bar__input[aria-invalid="true"] {
  border-color: #DC2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

/* Helper & Error Text */
.refine-bar__helper {
  font-family: "Lora", Georgia, serif;
  font-size: 13px;
  color: #9B9791;
  line-height: 1.4;
  display: block;
}

.refine-bar__error {
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: #DC2626;
  font-weight: 500;
  display: block;
  margin-top: 0.25rem;
}

.refine-bar__error:empty {
  display: none;
}

/* Submit Button */
.refine-bar__submit {
  width: 100%;
  height: 56px;
  min-height: 44px; /* WCAG touch target */
  padding: 0 2rem;
  border: none;
  border-radius: 14px;
  background: #E6B17E;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: "Lora", Georgia, serif;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(230, 177, 126, 0.3);
}

.refine-bar__submit:hover {
  background: #D9A06B;
  box-shadow: 0 4px 12px rgba(230, 177, 126, 0.4);
}

.refine-bar__submit:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(230, 177, 126, 0.3);
}

.refine-bar__submit:focus {
  outline: 2px solid rgba(43, 43, 43, 0.75);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(230, 177, 126, 0.28);
}

.refine-bar__submit:disabled {
  background: #D1D5DB;
  color: #9CA3AF;
  cursor: not-allowed;
  box-shadow: none;
}

/* Responsive Adjustments */
@media (min-width: 640px) {
  .refine-bar__submit {
    width: auto;
    min-width: 180px;
    display: block;
    margin: 0 auto;
  }
}

/* Dark Mode - RefineBar */
@media (prefers-color-scheme: dark) {
  .refine-bar {
    border-color: rgba(255, 255, 255, 0.08);
  }

  .refine-bar__title {
    color: #f9fafb;
  }

  .refine-bar__label {
    color: #f9fafb;
  }

  .refine-bar__input {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.08);
    color: #f9fafb;
  }

  .refine-bar__input::placeholder {
    color: #6b7280;
  }

  .refine-bar__helper {
    color: #9ca3af;
  }
}

/* Reduced Motion - RefineBar */
@media (prefers-reduced-motion: reduce) {
  .refine-bar__input,
  .refine-bar__submit {
    transition: none;
  }
}

/* Print - RefineBar */
@media print {
  .refine-bar {
    display: none;
  }
}

/**
 * WCAG 2.1 AA Compliance (RefineBar):
 * - Title (#2B2B2B on #fff): 15.3:1 ✓ AAA
 * - Label (#2B2B2B on #fff): 15.3:1 ✓ AAA
 * - Input text (#2B2B2B on #fff): 15.3:1 ✓ AAA
 * - Placeholder (#9B9791 on #fff): 4.6:1 ✓ AA
 * - Helper text (#9B9791 on #fff): 4.6:1 ✓ AA
 * - Error text (#DC2626 on #fff): 5.4:1 ✓ AA
 * - Button (#fff on #E6B17E): 4.5:1 ✓ AA
 * - Input height: 56px ✓ (≥44px)
 * - Button height: 56px ✓ (≥44px)
 * - Focus indicators: 2px outline + 4px halo ✓
 */
/**
 * ARVYAM LanguageSwitch Styles
 * Step 8: Language toggle component
 * 
 * Constitutional Compliance:
 * - Guest-First: Clean, simple toggle
 * - ARVY Persona: Calm colors, soft shadows
 * - Accessibility: WCAG 2.1 AA (contrast, focus, touch targets)
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   Container
   ═══════════════════════════════════════════════════════════════════════════════ */

.language-switch {
  display: inline-flex;
  gap: 0.75rem; /* A3: Increased from 0.5rem for better spacing */
  align-items: center;
  padding: 0.25rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  
  /* Ensure minimum touch targets */
  min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════════════════════ */

.language-switch__button {
  /* Reset button styles */
  appearance: none;
  border: none;
  background: transparent;
  padding: 0.5rem 1rem;
  margin: 0;
  cursor: pointer;
  
  /* Typography */
  font-family: var(--font-family-base, system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #6b7280; /* Gray-500 */
  
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 36px; /* 44px - 2×4px padding from container */
  
  /* Visual */
  border-radius: 6px;
  transition: all 0.2s ease;
  
  /* Touch targets (WCAG) */
  position: relative;
}

/* Hover state */
.language-switch__button:hover {
  background: rgba(251, 146, 60, 0.08); /* ARVYAM orange tint */
  color: #fb923c; /* Orange-400 */
}

/* Focus state (WCAG 2.1 AA) */
.language-switch__button:focus {
  outline: 2px solid #fb923c; /* ARVYAM orange */
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.15); /* Focus halo */
}

/* Active/Selected state */
.language-switch__button--active,
.language-switch__button[aria-pressed="true"] {
  background: #fb923c; /* ARVYAM orange */
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.language-switch__button--active:hover,
.language-switch__button[aria-pressed="true"]:hover {
  background: #f97316; /* Orange-500 (slightly darker) */
}

/* Disabled state */
.language-switch__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: transparent;
  color: #9ca3af; /* Gray-400 */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Floating Position (if no container provided)
   ═══════════════════════════════════════════════════════════════════════════════ */

.language-switch-floating {
  position: fixed;
  z-index: 9998; /* Below modals (9999+), above content */
  
  /* Shadow for elevation */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.language-switch-floating--top-right {
  top: 1rem;
  right: 1rem;
}

.language-switch-floating--top-left {
  top: 1rem;
  left: 1rem;
}

.language-switch-floating--bottom-right {
  bottom: 1rem;
  right: 1rem;
}

.language-switch-floating--bottom-left {
  bottom: 1rem;
  left: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Screen Reader Only (for announcements)
   ═══════════════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link utility (visible only on focus) - WCAG 2.1 AA */
.visually-hidden-focusable {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden-focusable:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  background: var(--color-text-primary, #2B2B2B);
  color: var(--color-bg-primary, #FFFFFF);
  border-radius: 0 0 0.5rem 0;
  font-size: 16px;
  font-weight: 600;
  font-family: "Lora", Georgia, serif;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  outline: 3px solid rgba(43, 43, 43, 0.85);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Responsive (Mobile)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .language-switch {
    gap: 0.25rem;
    padding: 0.125rem;
  }
  
  .language-switch__button {
    padding: 0.375rem 0.75rem;
    font-size: 0.813rem; /* Slightly smaller on mobile */
    min-width: 44px; /* Maintain touch target */
  }
  
  .language-switch-floating {
    /* Adjust floating position for mobile */
  }
  
  .language-switch-floating--top-right {
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Dark Mode Support (future Step 12)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  .language-switch {
    background: rgba(31, 41, 55, 0.95); /* Gray-800 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .language-switch__button {
    color: #d1d5db; /* Gray-300 */
  }
  
  .language-switch__button:hover {
    background: rgba(251, 146, 60, 0.15);
    color: #fbbf24; /* Amber-400 (better dark mode contrast) */
  }
  
  .language-switch__button:focus {
    outline-color: #fbbf24;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
  }
  
  .language-switch__button--active,
  .language-switch__button[aria-pressed="true"] {
    background: #f59e0b; /* Amber-500 */
    color: #1f2937; /* Gray-800 (dark text on bright button) */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Print Styles
   ═══════════════════════════════════════════════════════════════════════════════ */

@media print {
  .language-switch,
  .language-switch-floating {
    display: none; /* Hide language switch when printing */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Reduced Motion (A11y)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .language-switch__button {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   High Contrast Mode (Windows)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-contrast: high) {
  .language-switch {
    border: 2px solid currentColor;
  }
  
  .language-switch__button {
    border: 1px solid currentColor;
  }
  
  .language-switch__button:focus {
    outline-width: 3px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NOTES FOR STEP 12 (Museum-Grade Polish)
   ═══════════════════════════════════════════════════════════════════════════════

   1. Animation refinements:
      - Add micro-interactions (scale on active)
      - Smooth language transition (fade in/out)
      - Loading state during stringbank fetch

   2. Visual polish:
      - Subtle gradient on active state
      - Better shadow hierarchy
      - Custom font for language labels

   3. Layout integration:
      - Position in site header
      - Align with other nav elements
      - Responsive breakpoint refinements

   4. Accessibility enhancements:
      - Voice control support
      - Better screen reader announcements
      - Keyboard shortcut (Alt+L?)

   ═══════════════════════════════════════════════════════════════════════════════ */

/* ========================================================================
   PolicyFooter Styles - Step 9
   ======================================================================== */

/**
 * ARVYAM PolicyFooter Styles
 * Step 9: Legal footer component
 * 
 * Constitutional Compliance:
 * - Guest-First: Clean, simple layout
 * - ARVY Persona: Calm typography, minimal styling
 * - Accessibility: WCAG 2.1 AA (contrast, focus, touch targets)
 */

/* Container */
.policy-footer {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--card-text-secondary, #6b7280);
  font-size: 0.875rem;
  line-height: 1.5;
  background: var(--footer-bg, #fafaf9);
  border-top: 1px solid var(--footer-border, #e5e7eb);
}

/* Navigation wrapper */
.policy-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Links and buttons */
.policy-footer__link {
  /* Reset button styles */
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  
  /* Link styles */
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 0.75rem;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(107, 114, 128, 0.3);
  text-underline-offset: 4px;
  transition: all 0.2s ease;
}

/* Hover state */
.policy-footer__link:hover {
  color: var(--cta-bg, #059669);
  text-decoration-color: currentColor;
}

/* Focus state (WCAG 2.1 AA) */
.policy-footer__link:focus {
  outline: 2px solid var(--cta-focus-ring, #10b981);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Focus visible (keyboard only) */
.policy-footer__link:focus:not(:focus-visible) {
  outline: none;
}

.policy-footer__link:focus-visible {
  outline: 2px solid var(--cta-focus-ring, #10b981);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Separator */
.policy-footer__separator {
  color: var(--card-text-muted, #9ca3af);
  user-select: none;
  padding: 0 0.25rem;
}

/* Copyright text */
.policy-footer__copyright {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--card-text-muted, #9ca3af);
}

/* ========================================================================
   Responsive Adjustments
   ======================================================================== */

/* Mobile: Stack vertically for very small screens */
@media (max-width: 479px) {
  .policy-footer__nav {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .policy-footer__separator {
    display: none;
  }
  
  .policy-footer__link {
    width: 100%;
    text-align: center;
  }
}

/* Tablet and up: horizontal layout */
@media (min-width: 480px) {
  .policy-footer__nav {
    flex-direction: row;
  }
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
  .policy-footer {
    border-top-width: 2px;
  }
  
  .policy-footer__link {
    text-decoration-color: currentColor;
  }
  
  .policy-footer__link:focus {
    outline-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .policy-footer__link {
    transition: none;
  }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
  .policy-footer {
    background: var(--footer-bg-dark, #1f2937);
    border-top-color: var(--footer-border-dark, #374151);
    color: var(--card-text-secondary-dark, #9ca3af);
  }
  
  .policy-footer__link:hover {
    color: var(--cta-bg-dark, #10b981);
  }
  
  .policy-footer__copyright {
    color: var(--card-text-muted-dark, #6b7280);
  }
}

/* ========================================================================
   Language Pill Styles (A3: Footer-Right)
   ======================================================================== */

/**
 * Language pill - Simple English | हिंदी toggle
 * Positioned in footer-right on desktop, inline on mobile
 */

.lang-pill {
  position: sticky;
  right: 24px;
  bottom: 24px;
  margin-left: auto;
  display: inline-flex;
  z-index: 10;
  line-height: 1;
}

.lang-pill__btn {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  background: #fff;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.lang-pill__btn:hover {
  background: #f9f9f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.lang-pill__btn:focus-visible {
  outline: 2px solid rgba(43, 43, 43, 0.75);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(230, 177, 126, 0.28);
}

.lang-pill__btn:active {
  transform: translateY(1px);
}

.lang-pill__sep {
  opacity: 0.5;
  margin: 0 0.25rem;
}

.lang-pill__active {
  color: var(--accent, #E6B17E);
  font-weight: 700;
}

/* Mobile: keep inline within footer, no sticky positioning */
@media (max-width: 640px) {
  .lang-pill {
    position: static;
    right: auto;
    bottom: auto;
    margin-left: 0;
    margin-top: 1rem;
  }
  
  .lang-pill__btn {
    font-size: 12px;
    padding: 0.4rem 0.6rem;
  }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .lang-pill__btn {
    transition: none;
  }
}

/* ========================================================================
   Print Styles
   ======================================================================== */

@media print {
  .policy-footer {
    border-top: 1px solid #000;
    padding: 1rem;
  }
  
  .policy-footer__link {
    text-decoration: none;
    color: #000;
  }
  
  /* Show URLs after links in print */
  .policy-footer__link[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
  }
  
  .policy-footer__manage::after {
    content: "";
  }
}

/* ========================================================================
   End PolicyFooter Styles
   ======================================================================== */

/* ========================================================================
   Step 11 Performance Optimizations
   ======================================================================== */

/* Below-the-fold containment - renders off-screen content only when needed */
.cv-auto { 
  content-visibility: auto; 
  contain-intrinsic-size: 1px 1000px; 
}

/* ============================================================================
   PHASE 13B ADDITIONS - Meaning Engine UX Transformation
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PHASE 13B.6 + 13C: Meaning Input (Conversational Textarea)
   Phase 13C: Empty-box styling with soft purple focus ring
   ---------------------------------------------------------------------------- */

.meaning-input {
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #2B2B2B;
  background: #FFFFFF;
  
  /* Phase 13C: Empty-box styling */
  border: 1px solid var(--field-border, rgba(0, 0, 0, 0.06));
  border-radius: 8px;
  resize: none;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  
  /* Breathing animation (museum-grade premium detail) */
  animation: gentle-breathe 4s ease-in-out infinite;
}

/* Phase 13C: Hover state (empty-box anxiety solution) */
.meaning-input:hover {
  border-color: var(--field-border-hover, rgba(0, 0, 0, 0.12));
}

/* Phase 13C: Focus state with soft purple tech accent */
.meaning-input:focus,
.meaning-input:focus-visible {
  outline: none;
  border-color: var(--field-focus-ring, #C4B5FD);
  box-shadow: 0 0 0 1px var(--field-focus-ring, #C4B5FD), 
              0 0 0 8px rgba(196, 181, 253, 0.25);
}

/* Phase 13C: Placeholder removed - this style kept for fallback only */
.meaning-input::placeholder {
  color: #999;
  font-style: italic;
  opacity: 0; /* Phase 13C: Hidden by default */
}

/* Mobile: Prevent iOS zoom on focus */
@media (max-width: 768px) {
  .meaning-input {
    font-size: 16px;
  }
}

/* Breathing animation keyframes */
@keyframes gentle-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.005);
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .meaning-input {
    animation: none;
  }
}

/* ----------------------------------------------------------------------------
   PHASE 13B.2: Hindi Auto-Detect Nudge
   ---------------------------------------------------------------------------- */

.lang-nudge {
  display: none;
  background: #FFF9F0;
  border: 1px solid #E6B17E;
  border-radius: 8px;
  padding: 0.875rem 1rem;
  margin: 0.75rem 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #2B2B2B;
}

.lang-nudge p {
  margin: 0 0 0.625rem 0;
}

.lang-nudge p:last-child {
  margin-bottom: 0;
}

.lang-nudge-actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.lang-nudge-btn {
  padding: 0.5rem 1rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.875rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-nudge-btn--primary {
  background: #E6B17E;
  color: #FFFFFF;
}

.lang-nudge-btn--primary:hover {
  background: #D9A06D;
}

.lang-nudge-btn--secondary {
  background: transparent;
  color: #2B2B2B;
  border: 1px solid #E0E0E0;
}

.lang-nudge-btn--secondary:hover {
  background: #F5F5F5;
}

/* ----------------------------------------------------------------------------
   PHASE 13B.7: Budget Hint
   ---------------------------------------------------------------------------- */

.budget-hint {
  background: #F9FAFB;
  border-left: 3px solid #E6B17E;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-family: 'Lora', Georgia, serif;
  border-radius: 4px;
}

.budget-hint p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #2B2B2B;
}

.budget-hint strong {
  color: #1A1A1A;
  font-weight: 600;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .budget-hint {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
  }
  
  .lang-nudge {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
  }
  
  .lang-nudge-btn {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.875rem;
  }
}


/* ============================================================================
   PHASE 13B.HF - Unified System Feedback (ARVY speaks + hints stack)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   System Feedback Container (above textarea)
   ---------------------------------------------------------------------------- */

.system-feedback {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ARVY's persistent guidance line */
.system-feedback__base {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #6F6A62;
  font-style: italic;
}

/* ----------------------------------------------------------------------------
   Refined Hint Styles (softer, line-like appearance)
   ---------------------------------------------------------------------------- */

/* Language nudge - keep existing structure, ensure it works in stack */
.system-feedback .lang-nudge {
  margin: 0; /* Remove any external margin since container provides spacing */
}

/* Budget hint - softer appearance for inline context */
.system-feedback .budget-hint {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.9375rem;
  line-height: 1.4;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #F4E1C7;
  background: rgba(255, 247, 235, 0.8);
  color: #2B2B2B;
}

.system-feedback .budget-hint strong {
  color: #1A1A1A;
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Textarea Spacing Adjustment
   ---------------------------------------------------------------------------- */

.meaning-input {
  margin-top: 0; /* system-feedback already provides spacing above */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .system-feedback__base {
    font-size: 0.875rem;
  }
  
  .system-feedback .budget-hint {
    font-size: 0.875rem;
    padding: 0.4375rem 0.625rem;
  }
}

/* ============================================================================
   PHASE 13C: Mobile 375px Enhancements
   ============================================================================ */

/* Phase 13C: Extreme mobile (375px) */
@media (max-width: 375px) {
  .system-feedback__base {
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  
  .meaning-input {
    padding: 0.75rem 0.875rem;
    font-size: 15px;
  }
  
  .lang-nudge,
  .budget-hint {
    font-size: 0.8125rem;
    padding: 0.625rem 0.75rem;
  }
  
  .btn {
    padding: 0 20px;
    font-size: 16px;
  }
}