/**
 * e-residence.com "verde" theme (cream / forest / gold) for the forms app.
 *
 * Loaded ONLY for site_id=1 (eresidence) by layouts/app.blade.php, and only
 * when no white-label company override and no agency embed is active — other
 * instances (eresidency, nifportugal, notariuspublic, nienumberspain) and
 * b2b/white-label flows never receive this file. Selectors are additionally
 * prefixed with body.eresidence (hardcoded on every layouts/app page) so they
 * out-rank the shared inline <style> blocks and @push'ed stylesheets
 * (button.css, custom.css) without touching those cross-site files.
 *
 * Token values are copied verbatim from the marketing site's
 * src/styles/tokens.css (e-residence.com repo) — keep the two files in sync.
 * !important is used only to beat inline style="" attributes in the shared
 * Livewire view (select-cards state colors etc.), which must stay untouched
 * because every instance renders that same view.
 */

/* ---------------------------------------------------------------- fonts */
/* Self-hosted (mirrors the marketing site: no Google Fonts request). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/inter-latin-400-normal.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/inter-latin-500-normal.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/inter-latin-600-normal.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/inter-latin-700-normal.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/inter-latin-ext-400-normal.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/inter-latin-ext-500-normal.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/inter-latin-ext-600-normal.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/inter-latin-ext-700-normal.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/inter-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/inter-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/inter-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/inter-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/space-grotesk-latin-600-normal.woff2) format('woff2');
  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: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/space-grotesk-latin-ext-600-normal.woff2) format('woff2');
  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;
}

/* --------------------------------------------------------------- tokens */

:root {
  /* Brand palette (verbatim from the marketing site's tokens.css) */
  --color-brand-primary: #355c49;
  --color-brand-primary-deep: #26433a;
  --color-brand-forest: #223830;
  --color-brand-forest-deep: #16241e;
  --color-brand-leaf: #c9a06a;
  --color-brand-gold: #c9a06a;
  --color-brand-gold-ink: #81622d;
  --color-brand-sky: #efe8dc;
  --color-brand-flame: #c9a06a;

  --color-brand-ink: #1a1a18;
  --color-brand-muted: #6b6560;
  --color-brand-paper: #f5f0e8;
  --color-brand-surface: #faf8f4;

  --color-line: #e3dbcd;
  --color-line-strong: #857d70;

  --color-brand-accent: var(--color-brand-gold);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Geometry / depth / motion (component-scoped in Astro, root here) */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-soft: 0 18px 40px -28px rgba(58, 45, 24, 0.35);
  --shadow-gold: 0 12px 26px -16px rgba(201, 160, 106, 0.9);
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --dur-1: 140ms;
}

/* ----------------------------------------------------------------- base */

body.eresidence {
  background-color: var(--color-brand-paper);
  color: var(--color-brand-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.eresidence h1,
body.eresidence h2,
body.eresidence h3,
body.eresidence h4,
body.eresidence h5,
body.eresidence h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-brand-ink);
}

body.eresidence a {
  color: var(--color-brand-primary);
}
body.eresidence a:hover {
  color: var(--color-brand-primary-deep);
}

body.eresidence ::selection {
  background: rgba(201, 160, 106, 0.4);
}

body.eresidence :focus-visible {
  outline: 2px solid var(--color-brand-gold-ink);
  outline-offset: 2px;
}

body.eresidence .gray {
  color: var(--color-brand-muted);
}

body.eresidence .order-form h4 {
  font-size: 1.625rem;
  text-align: center;
}

/* --------------------------------------------------------------- header */

body.eresidence .eresidence-header {
  background-color: rgba(245, 240, 232, 0.95);
  border-bottom: 1px solid var(--color-line);
  padding-block: 14px;
}

body.eresidence .eresidence-header .logo-img {
  height: 28px;
}

/* The wordmark logo is wider than the old mark, so on narrow screens the
   navbar (which wraps by default) pushed WhatsApp and the language picker
   onto a second row. Scale the logo down and tighten the gaps so the header
   stays one row. */
@media (max-width: 575.98px) {
  body.eresidence .eresidence-header .container {
    flex-wrap: nowrap;
  }

  /* Let the brand column give way on the narrowest phones instead of pushing
     the language picker off-screen: flex items refuse to shrink past their
     content until min-width is cleared, and object-fit keeps the wordmark
     undistorted while it scales. */
  body.eresidence .eresidence-header .container > div:first-child,
  body.eresidence .eresidence-header .navbar-brand {
    min-width: 0;
  }

  body.eresidence .eresidence-header .container > div:last-child {
    flex: 0 0 auto;
  }

  body.eresidence .eresidence-header .logo-img {
    height: 22px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  body.eresidence .eresidence-header .whatsapp_logo {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }

  body.eresidence .eresidence-header .arrow-back {
    margin-right: 12px !important; /* set inline on the element */
  }
}

body.eresidence .eresidence-header .arrow-back {
  color: var(--color-brand-ink);
}
body.eresidence .eresidence-header .arrow-back:hover {
  color: var(--color-brand-primary);
}

body.eresidence .eresidence-header a#navbarDropdownMenuLink {
  display: inline-flex;
  align-items: center;
  color: var(--color-brand-ink);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-sm);
  background-color: var(--color-brand-surface);
  padding: 6px 10px;
  transition: border-color var(--dur-1) var(--ease);
}
body.eresidence .eresidence-header a#navbarDropdownMenuLink:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-ink);
}

body.eresidence .dropdown-menu {
  background-color: var(--color-brand-surface);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  overflow: hidden;
}
body.eresidence .dropdown-item {
  color: var(--color-brand-ink);
  font-size: 0.875rem;
}
body.eresidence .dropdown-item:hover,
body.eresidence .dropdown-item:focus {
  background-color: var(--color-brand-sky);
  color: var(--color-brand-primary);
}

body.eresidence .select_country_name {
  color: inherit;
}

/* --------------------------------------------------------------- footer */

body.eresidence .eresidence-footer {
  background-color: var(--color-brand-forest-deep);
  color: #b7b7af;
  font-size: 13.5px;
}
body.eresidence .eresidence-footer .p-3 {
  padding: 20px 16px !important;
}
body.eresidence .eresidence-footer a.text-dark {
  color: #d4d1ca !important;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
body.eresidence .eresidence-footer a.text-dark:hover {
  color: var(--color-brand-gold) !important;
}

/* -------------------------------------------------------------- buttons */

body.eresidence .btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  border-radius: var(--r-pill);
  padding: 13px 28px;
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
body.eresidence .btn:hover {
  transform: translateY(-1px);
}
body.eresidence .btn:active {
  transform: translateY(1px);
}
body.eresidence .btn:focus-visible {
  outline: 2px solid var(--color-brand-gold-ink);
  outline-offset: 2px;
  box-shadow: none;
}

body.eresidence .btn-primary {
  background-color: var(--color-brand-gold);
  border-color: transparent;
  color: var(--color-brand-ink);
  box-shadow: var(--shadow-gold);
}
body.eresidence .btn-primary:hover,
body.eresidence .btn-primary:focus,
body.eresidence .btn-primary:active {
  background-color: #d4ad79;
  border-color: transparent;
  color: var(--color-brand-ink);
}
body.eresidence .btn-primary:disabled,
body.eresidence .btn-primary.disabled {
  background-color: var(--color-brand-gold);
  border-color: transparent;
  color: var(--color-brand-ink);
  opacity: 0.55;
}

body.eresidence .btn-secondary {
  background-color: transparent;
  border: 1px solid var(--color-line-strong);
  color: var(--color-brand-ink);
  box-shadow: none;
}
body.eresidence .btn-secondary:hover,
body.eresidence .btn-secondary:focus,
body.eresidence .btn-secondary:active {
  background-color: var(--color-brand-sky);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-ink);
}

body.eresidence .btn-dark {
  background-color: var(--color-brand-forest);
  border-color: transparent;
  color: var(--color-brand-paper);
  border-radius: var(--r-pill) !important; /* beats inline border-radius:8px */
}
body.eresidence .btn-dark:hover,
body.eresidence .btn-dark:focus {
  background-color: var(--color-brand-forest-deep);
  color: var(--color-brand-paper);
}

body.eresidence .btn.coinbase-button {
  background-color: var(--color-brand-forest);
  border-color: transparent;
  color: var(--color-brand-paper);
  fill: var(--color-brand-paper);
  box-shadow: none;
}
body.eresidence .btn.coinbase-button:hover,
body.eresidence .btn.coinbase-button:focus {
  background-color: var(--color-brand-forest-deep);
  border-color: transparent;
  color: var(--color-brand-paper);
}

/* File-upload button (inline #007bff in the shared Livewire view): pull it
   into the pill button family as a forest secondary action. */
body.eresidence button[style*="#007bff"] {
  background-color: var(--color-brand-primary) !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  padding: 11px 24px !important;
  font-family: var(--font-sans);
  font-weight: 600;
  transition: background-color var(--dur-1) var(--ease);
}
body.eresidence button[style*="#007bff"]:hover {
  background-color: var(--color-brand-primary-deep) !important;
}

/* Pre-existing inline helper text (#6B7280 / #6b7280) sits on the cream page
   background now — remap to the AA-passing muted token (5.06:1 on cream). */
body.eresidence [style*="#6B7280"],
body.eresidence [style*="#6b7280"] {
  color: var(--color-brand-muted) !important;
}

/* ---------------------------------------------------------------- forms */

body.eresidence .form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-brand-ink);
}

body.eresidence .form-control,
body.eresidence .form-select {
  background-color: #fff;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-sm);
  color: var(--color-brand-ink);
  padding: 0.55rem 0.85rem;
}
body.eresidence .form-control::placeholder {
  color: var(--color-brand-muted);
}
body.eresidence .form-control:focus,
body.eresidence .form-select:focus {
  background-color: #fff;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 0.25rem rgba(53, 92, 73, 0.18);
  color: var(--color-brand-ink);
}

body.eresidence .form-check-input {
  border-color: var(--color-line-strong) !important; /* beats inline black */
}
body.eresidence .form-check-input:checked {
  background-color: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary) !important;
}
body.eresidence .form-check-input:focus {
  border-color: var(--color-brand-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(53, 92, 73, 0.18);
}

/* intl-tel-input country dropdown */
body.eresidence .iti__country-list {
  background-color: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--r-sm);
}

/* -------------------------------------------- package cards (list-group) */

body.eresidence .list-group-radio .list-group-item {
  background-color: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  color: var(--color-brand-ink);
  transition: background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
body.eresidence .list-group-radio .list-group-item:hover,
body.eresidence .list-group-radio .list-group-item:focus {
  background-color: var(--color-brand-surface);
  border-color: var(--color-line-strong);
}
body.eresidence .list-group-radio .form-check-input:checked + .list-group-item {
  background-color: var(--color-brand-sky);
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 2px var(--color-brand-primary);
}

body.eresidence .euro-sum {
  font-family: var(--font-display);
  font-weight: 600;
}

body.eresidence span.promocode {
  color: var(--color-brand-primary);
}

/* -------------------------------------------------- toggles & switches */

body.eresidence .toggle-container {
  background: var(--color-brand-sky);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--color-line);
}
body.eresidence .button-background {
  background: var(--color-brand-gold);
  border-radius: 9px;
}
body.eresidence .toggle-container .text {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-brand-ink);
}

body.eresidence .onoffswitch-label {
  border-color: var(--color-line-strong);
}
body.eresidence .onoffswitch-inner:before {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-ink);
}
body.eresidence .onoffswitch-inner:after {
  background-color: var(--color-brand-sky);
  color: var(--color-brand-muted);
}
body.eresidence .onoffswitch-switch {
  border-color: var(--color-line-strong);
}

/* -------------------------------------- select-cards (first-step choice) */
/* State colors are inline in the shared Livewire view; the attribute
   selectors below key off those exact inline values (#EFF6FF = idle,
   #22C55E = selected) so other instances keep the stock look. */

body.eresidence .select-card {
  border-radius: 12px !important;
}
body.eresidence .select-card[style*="#EFF6FF"] {
  background-color: var(--color-brand-surface) !important;
  border-color: var(--color-line) !important;
}
body.eresidence .select-card[style*="#22C55E"] {
  background-color: var(--color-brand-sky) !important;
  border-color: var(--color-brand-primary) !important;
}
body.eresidence .select-card svg[style*="#22C55E"],
body.eresidence .select-card span[style*="#22C55E"] {
  color: var(--color-brand-primary) !important;
}
body.eresidence .select-card:hover {
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------- odds and ends */

body.eresidence .success-form {
  color: var(--color-brand-primary) !important;
}

body.eresidence .nhr-step-info {
  background-color: var(--color-brand-surface) !important;
  border: 1px solid var(--color-line);
}

/* Verification yes/no tiles (order-verification.blade.php) */
body.eresidence .take_meals_opt {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-ink);
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: var(--shadow-gold);
}
body.eresidence .take_meals_opt:hover {
  filter: brightness(0.96);
}

/* document-info gray panels + hardcoded link blue */
body.eresidence div[style*="#f8f9fa"] {
  background-color: var(--color-brand-surface) !important;
  border-color: var(--color-line) !important;
}
body.eresidence a[style*="#0066cc"] {
  color: var(--color-brand-primary) !important;
}

/* Stripe embedded checkout step. The layout shell vertically centres its one
   child, so Stripe's shorter states (Link verification, the loading skeleton)
   sat in a large empty band. Pin the payment frame to the top instead, and
   drop the 100vw width, which ignores the scrollbar. Stripe renders inside a
   cross-origin iframe, so its interior is not reachable from here — that is
   configured on the Checkout Session (branding_settings). */
body.eresidence .er-form-shell:has(#checkout iframe) {
  align-items: flex-start !important; /* the shell sets this inline */
  padding-top: 24px;
  padding-bottom: 48px; /* keep the payment panel off the footer */
}
/* Give the intermediate wrapper a real width: without it every box below is
   percentage-sized with no intrinsic width and the frame collapses to the
   300px iframe default. */
body.eresidence .er-form-shell:has(#checkout iframe) > * {
  width: 100%;
}
body.eresidence #checkout:has(iframe) {
  width: 100% !important;
}

/* Trust badges strip: blend white PNG boxes into the cream page */
body.eresidence .certificated-images img {
  mix-blend-mode: multiply;
}

body.eresidence .center-text-custom {
  font-family: var(--font-sans);
  color: var(--color-brand-ink);
}