@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/* Classic Minimalist Wedding Styles */
/* Font imports */
/* Base reset and setup */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html, body, #root { 
  height: 100%; 
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body { 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}
/* Links */
a { 
  text-decoration: none;
  transition: color 0.2s ease;
}
/* ============================================
   ACCESSIBILITY: Focus Styles
   ============================================ */
/* Global focus-visible styles for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--chakra-colors-primary-gold, #C9A227);
  outline-offset: 2px;
}
/* Remove default focus outline (we use focus-visible instead) */
*:focus:not(:focus-visible) {
  outline: none;
}
/* Enhanced focus styles for interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--chakra-colors-primary-gold, #C9A227);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.2);
}
/* High contrast focus for dark backgrounds */
.dark-bg *:focus-visible,
[data-dark-bg] *:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}
/* Form elements inherit font */
input, select, textarea, button {
  font-family: inherit;
}
/* Fix text clipping in select elements */
select,
select.chakra-select {
  line-height: 1.6 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 1rem !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 48px !important;
}
select option {
  padding: 0.5rem;
  line-height: 1.6;
}
/* Ensure Chakra select wrapper doesn't clip */
.chakra-select__wrapper {
  overflow: visible !important;
}
/* Form control wrapper fix */
.chakra-form-control {
  overflow: visible !important;
}
/* Smooth transitions for interactive elements */
button, a, input, select, textarea {
  transition: all 0.2s ease;
}
/* Selection styling */
::selection {
  background: var(--chakra-colors-primary-soft);
  color: var(--chakra-colors-neutral-dark);
}
/* Language switcher - remove hover highlighting */
.chakra-menu__menuitem[data-focus],
.chakra-menu__menuitem:hover,
.chakra-menu__menuitem:focus {
  background: transparent !important;
  background-color: transparent !important;
}
/* Scrollbar styling (webkit) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Google Places: PlaceAutocompleteElement theming
   Match Chakra's Input variant='elegant' used across the form.
   Uses Chakra CSS variables (no new hard-coded colors).
*/
.mailingAddress-autocompleteWrapper {
  /* Keep the suggestions dropdown from being clipped */
  overflow: visible;
  /* Force light mode for the Google web component within */
  color-scheme: light;
}
#mailingAddress-autocomplete {
  display: block;
  width: 100%;
  --mailingAddress-border-color: var(--chakra-colors-primary-soft);
  /* Force light mode regardless of OS theme (Shadow DOM component) */
  color-scheme: light;
  font-family: var(--chakra-fonts-body);
  font-size: var(--chakra-fontSizes-md);
  line-height: 1.6;

  /* Google component library theme variables (best-effort; varies by version) */
  --gm-color-surface: transparent;
  --gm-color-on-surface: var(--chakra-colors-neutral-dark);
  --gm-color-outline: var(--chakra-colors-primary-soft);
  --gm-color-primary: var(--chakra-colors-primary-deep);
  --gm-font-family: var(--chakra-fonts-body);
  --gm-font-size: var(--chakra-fontSizes-md);

  --gmpx-color-surface: transparent;
  --gmpx-color-on-surface: var(--chakra-colors-neutral-dark);
  --gmpx-color-outline: var(--chakra-colors-primary-soft);
  --gmpx-color-primary: var(--chakra-colors-primary-deep);
  --gmpx-font-family: var(--chakra-fonts-body);
  --gmpx-font-size: var(--chakra-fontSizes-md);
}
#mailingAddress-autocomplete:focus-within {
  --mailingAddress-border-color: var(--chakra-colors-primary-deep);
}
/* Input surface */
#mailingAddress-autocomplete::part(input),
#mailingAddress-autocomplete::part(text-input),
#mailingAddress-autocomplete::part(search-input),
#mailingAddress-autocomplete::part(field),
#mailingAddress-autocomplete::part(form-field),
#mailingAddress-autocomplete::part(control) {
  width: 100% !important;
  background: transparent !important;
  color: var(--chakra-colors-neutral-dark) !important;
  font-family: var(--chakra-fonts-body) !important;
  font-size: var(--chakra-fontSizes-md) !important;
  line-height: 1.6 !important;

  /* Border/padding are handled by the Chakra wrapper for consistency */
  border: none !important;
  border-radius: 0 !important;

  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Make sure the host itself doesn't draw a focus ring */
#mailingAddress-autocomplete:focus,
#mailingAddress-autocomplete:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Placeholder */
#mailingAddress-autocomplete::part(input)::placeholder,
#mailingAddress-autocomplete::part(text-input)::placeholder,
#mailingAddress-autocomplete::part(search-input)::placeholder,
#mailingAddress-autocomplete::part(field)::placeholder,
#mailingAddress-autocomplete::part(control)::placeholder {
  color: var(--chakra-colors-neutral-muted) !important;
}
/* Suggestions popover */
#mailingAddress-autocomplete::part(listbox),
#mailingAddress-autocomplete::part(suggestions),
#mailingAddress-autocomplete::part(popover) {
  background: var(--chakra-colors-neutral-white) !important;
  color: var(--chakra-colors-neutral-dark) !important;
  border: 1px solid var(--chakra-colors-primary-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Individual suggestions */
#mailingAddress-autocomplete::part(option),
#mailingAddress-autocomplete::part(suggestion) {
  font-family: var(--chakra-fonts-body) !important;
  color: var(--chakra-colors-neutral-dark) !important;
}
#mailingAddress-autocomplete::part(option):hover,
#mailingAddress-autocomplete::part(suggestion):hover,
#mailingAddress-autocomplete::part(option)[aria-selected="true"],
#mailingAddress-autocomplete::part(suggestion)[aria-selected="true"] {
  background: var(--chakra-colors-neutral-light) !important;
}