@import "./intl-tel-input.css";
@import "tailwindcss";
@plugin "@tailwindcss/forms" {
  strategy: "base"; /* or "class" */
}
@custom-variant dark (&:where(.dark, .dark *));

/* ---------------------------------------------------------------- */
/* Self-hosted Instrument Sans — body / UI font.                   */
/* Modern humanist grotesque with character; pairs naturally with  */
/* Fraunces. Variable weight 400–700 + italics. Latin + Latin-ext  */
/* (full French/ES/DE/IT coverage). ~84 KB total.                  */
/* ---------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/instrument-sans/instrument-sans-latin-ext-wght-normal.woff2") format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/instrument-sans/instrument-sans-latin-wght-normal.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/instrument-sans/instrument-sans-latin-ext-wght-italic.woff2") format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/instrument-sans/instrument-sans-latin-wght-italic.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- */
/* Self-hosted Fraunces — editorial display serif.                 */
/* Covers Latin + Latin-ext (French, Spanish, German, Italian,     */
/* Portuguese etc. — everything a French travel agent types).      */
/* Vietnamese / Cyrillic subsets omitted to keep payload small.    */
/* Full axes: opsz 9–144, wght 100–900, SOFT 30–100, WONK 0–1.     */
/* ---------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/fraunces/fraunces-latin-ext-full-normal.woff2") format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/fraunces/fraunces-latin-full-normal.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  /* Let Fraunces auto-pick the right `opsz` master based on font-size. */
  html { font-optical-sizing: auto; }

  /* Editorial page hero — every <h1> becomes Fraunces by default.
     Sub-headings, form labels, buttons, etc. stay in Inter for
     scannability. Pages that want an opt-in display treatment on an
     <h2> / <h3> can add the `.heading-display` utility. */
  h1 {
    font-family: var(--font-serif);
    font-variation-settings: "SOFT" 50;
    letter-spacing: -0.02em;
    font-feature-settings: "ss01" on, "ss02" on;
  }
}

@theme {
  /* Font families */
  --font-sans: 'Instrument Sans Variable', 'Inter var', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: 'Fraunces Variable', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-display: 'Fraunces Variable', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  
  /* Primary color palette */
  --color-primary-50: #f5f3ff;
  --color-primary-100: #ede9fe;
  --color-primary-200: #ddd6fe;
  --color-primary-300: #c4b5fd;
  --color-primary-400: #a78bfa;
  --color-primary-500: #7D40E7;
  --color-primary-600: #6d28d9;
  --color-primary-700: #5b21b6;
  --color-primary-800: #4c1d95;
  --color-primary-900: #3c1764;
  --color-primary: #7D40E7;
  
  /* Background colors */
  --color-background: #ffffff;
  --color-background-dark: #111827;
}

@layer components {
  /* Pagy pagination styles (v43 series-nav) */
  .pagy.series-nav {
    @apply flex space-x-1 items-center justify-center;
  }

  .pagy.series-nav a[href] {
    @apply inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 dark:text-primary-400 dark:bg-primary-900/30 dark:hover:bg-primary-900/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }

  .pagy.series-nav a[aria-current="page"] {
    @apply inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md text-white bg-primary-600 dark:bg-primary-600 dark:text-white cursor-default;
  }

  .pagy.series-nav a[role="separator"] {
    @apply inline-flex items-center px-2 py-1.5 text-xs text-gray-400 dark:text-gray-600 cursor-default;
  }

  .btn {
    @apply inline-flex justify-center items-center px-4 py-2 rounded-lg text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50;
  }

  .btn-default {
    @apply bg-primary text-white hover:bg-primary-600 focus:ring-primary-500 border border-transparent;
  }

  .lp-submit-button {
    @apply mt-4 w-full bg-primary text-white hover:bg-primary-600 focus:ring-primary-500 focus:outline-none focus:ring-2 focus:ring-offset-2 border border-transparent rounded-lg px-4 py-2.5 text-sm font-medium cursor-pointer disabled:opacity-50;
  }

  .btn-outline {
    @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary-500 shadow-sm dark:bg-gray-800 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-700;
  }

  .btn--plain {
    @apply p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg focus:ring-primary-500;
  }

  .btn--icon {
    @apply p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full focus:ring-primary-500;
  }

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

  .badge--positive {
    @apply bg-green-100 text-green-800;
  }

  .badge--negative {
    @apply bg-red-100 text-red-800;
  }

  .badge-outline {
    @apply border border-gray-300 text-gray-700 dark:text-gray-300 dark:border-gray-600;
  }

  .card {
    @apply bg-white shadow rounded-lg dark:bg-gray-800 dark:shadow-gray-900/50;
  }

  .card-content {
    @apply p-6;
  }

  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
  }

  .input {
    @apply block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-600 dark:placeholder:text-gray-500;
  }

  .label {
    @apply block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100;
  }

  .alert {
    @apply p-4 rounded-lg;
  }

  .alert--positive {
    @apply bg-green-50 text-green-800 border border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800;
  }

  .alert--negative {
    @apply bg-red-50 text-red-800 border border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800;
  }

  /* Form group spacing */
  .field {
    @apply space-y-2;
  }

  /* Form error styles */
  .field_with_errors .input {
    @apply ring-red-500 focus:ring-red-500;
  }

  .field_with_errors .label {
    @apply text-red-600;
  }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }

  .text-subtle {
    @apply text-gray-500;
  }

  .text-destructive {
    @apply text-red-600;
  }

  .mis-2 {
    @apply ml-2 rtl:mr-2;
  }

  .mis-4 {
    @apply ml-4 rtl:mr-4;
  }

  .mie-2 {
    @apply mr-2 rtl:ml-2;
  }

  .mie-4 {
    @apply mr-4 rtl:ml-4;
  }

  /* Shake animation for incorrect password */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
  }

  .animate-shake {
    animation: shake 0.5s ease-in-out;
  }

  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out both;
  }

  /* Suppress default root cross-fade so only named transitions run */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  /* Prevent the group from animating size/position differences between steps */
  ::view-transition-group(wizard-step) {
    animation: none;
  }

  /* Wizard step transitions — forward (default) */
  ::view-transition-old(wizard-step) {
    animation: 0.25s ease-out both slide-to-left;
  }

  ::view-transition-new(wizard-step) {
    animation: 0.25s ease-out both slide-from-right;
  }

  /* Wizard step transitions — backward */
  :root[data-wizard-back]::view-transition-old(wizard-step) {
    animation: 0.25s ease-out both slide-to-right;
  }

  :root[data-wizard-back]::view-transition-new(wizard-step) {
    animation: 0.25s ease-out both slide-from-left;
  }

  @keyframes slide-to-left {
    to { transform: translateX(-30px); opacity: 0; }
  }

  @keyframes slide-from-right {
    from { transform: translateX(30px); opacity: 0; }
  }

  @keyframes slide-to-right {
    to { transform: translateX(30px); opacity: 0; }
  }

  @keyframes slide-from-left {
    from { transform: translateX(-30px); opacity: 0; }
  }

  /* Merchant payment & payment link View Transitions */
  ::view-transition-group(.merchant-payment),
  ::view-transition-group(.payment-link) {
    animation-duration: 0.3s;
  }

  /* New items slide in from the top */
  ::view-transition-new(.merchant-payment):only-child,
  ::view-transition-new(.payment-link):only-child {
    animation: 0.35s ease-out both slide-fade-in;
  }

  /* Removed items fade out */
  ::view-transition-old(.merchant-payment):only-child,
  ::view-transition-old(.payment-link):only-child {
    animation: 0.2s ease-in both fade-out;
  }

  /* Status changes crossfade smoothly */
  ::view-transition-old(.merchant-payment),
  ::view-transition-old(.payment-link) {
    animation: 0.2s ease-out both fade-out;
  }

  ::view-transition-new(.merchant-payment),
  ::view-transition-new(.payment-link) {
    animation: 0.3s ease-out 0.1s both fade-in;
  }

  @keyframes slide-fade-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* Improved modal animations */
  .modal-enter {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
  }

  .modal-backdrop-enter {
    transition: opacity 200ms ease-out;
  }

  /* ---------------------------------------------------------------- */
  /* intl-tel-input — flag sprite paths + theming to match our UI    */
  /* ---------------------------------------------------------------- */
  :root {
    --iti-path-flags-1x: url("/intl-tel-input/flags.webp");
    --iti-path-flags-2x: url("/intl-tel-input/flags@2x.webp");
    --iti-border-color: theme(--color-gray-300);
    --iti-hover-color: color-mix(in oklab, theme(--color-primary) 8%, transparent);
    --iti-dropdown-bg: #ffffff;
  }
  .dark {
    --iti-border-color: theme(--color-gray-600);
    --iti-dropdown-bg: theme(--color-gray-800);
    --iti-icon-color: theme(--color-gray-300);
  }
  .iti { width: 100%; }
  .iti__tel-input,
  .iti input.iti__tel-input,
  .iti input.iti__tel-input[type=tel] {
    @apply w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-700 dark:text-white shadow-sm;
    padding-left: 96px !important;
  }
  .iti--separate-dial-code .iti__selected-dial-code { @apply text-gray-700 dark:text-gray-300 font-medium; }
  .iti__dropdown-content { @apply shadow-lg ring-1 ring-black/5 dark:ring-white/10 rounded-md overflow-hidden; }

  /* ---------------------------------------------------------------- */
  /* Editorial display — used on page hero titles app-wide.           */
  /* `heading-display` is the global class; `clients-display` is      */
  /* kept as an alias for the Clients area that shipped ahead of the  */
  /* global rollout.                                                  */
  /* ---------------------------------------------------------------- */
  .heading-display,
  .clients-display {
    font-family: var(--font-serif);
    font-variation-settings: "SOFT" 50;
    letter-spacing: -0.02em;
    font-feature-settings: "ss01" on, "ss02" on;
  }
  .clients-label   { font-family: ui-sans-serif, system-ui; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: theme(--color-gray-500); }
  .dark .clients-label { color: theme(--color-gray-400); }
  .clients-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
  .clients-rule    { height: 1px; background: linear-gradient(90deg, transparent, theme(--color-gray-200) 10%, theme(--color-gray-200) 90%, transparent); }
  .dark .clients-rule { background: linear-gradient(90deg, transparent, theme(--color-gray-700) 10%, theme(--color-gray-700) 90%, transparent); }

  /* Animated primary button */
  .clients-btn-primary {
    @apply inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm;
    transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease-out, background-color .15s ease-out;
    will-change: transform, box-shadow;
  }
  .clients-btn-primary:hover {
    transform: translateY(-1px);
    background-color: theme(--color-primary-600);
    box-shadow: 0 6px 18px -6px color-mix(in oklab, theme(--color-primary) 55%, transparent);
  }
  .clients-btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px -3px color-mix(in oklab, theme(--color-primary) 40%, transparent); }
  .clients-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

  .clients-btn-ghost {
    @apply inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800;
    transition: background-color .15s ease-out, border-color .15s ease-out, transform .15s cubic-bezier(.2,.8,.2,1);
  }
  .clients-btn-ghost:hover { background-color: theme(--color-gray-50); border-color: theme(--color-gray-300); transform: translateY(-1px); }
  .dark .clients-btn-ghost:hover { background-color: theme(--color-gray-700); border-color: theme(--color-gray-600); }
  .clients-btn-ghost:active { transform: translateY(0); }

  /* Autofill spinner + result animations */
  .clients-spinner {
    width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    display: inline-block; animation: clients-spin .7s linear infinite;
  }
  @keyframes clients-spin { to { transform: rotate(360deg); } }

  @keyframes clients-stagger-in {
    from { opacity: 0; transform: translateY(6px); filter: blur(1px); }
    to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
  }
  .clients-enter { animation: clients-stagger-in .35s cubic-bezier(.2,.8,.2,1) both; }
  .clients-enter-delay-1 { animation-delay: .05s; }
  .clients-enter-delay-2 { animation-delay: .10s; }
  .clients-enter-delay-3 { animation-delay: .15s; }

  /* Autofill highlight — briefly pulses filled fields */
  @keyframes clients-field-flash {
    0%   { background-color: color-mix(in oklab, theme(--color-primary) 22%, transparent); }
    100% { background-color: transparent; }
  }
  .clients-flash { animation: clients-field-flash 1s ease-out; }

  /* Section chapter number — editorial touch */
  .clients-chapter {
    font-family: var(--font-serif);
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: theme(--color-primary);
    font-weight: 600;
  }

  /* Form-field focus lift */
  .clients-field input:focus, .clients-field select:focus, .clients-field textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in oklab, theme(--color-primary) 18%, transparent);
    border-color: theme(--color-primary);
  }
}