/* "Island Fresh v2" — customer portal sign-in pages (login, forgot / reset password).
   Loaded for couriers whose site uses template v2; CustomerPanelProvider sets --brand, --brand-dark, --brand-ink.
   Only touches Filament's "simple" auth layout; the signed-in portal pages are unchanged.
   Motion: transform/opacity only, runs a few times then stops, all off under reduced motion. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700&display=swap');

html:not(.dark) .fi-simple-layout {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(240,185,77,.38), transparent 62%),
    radial-gradient(800px 520px at -10% 112%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
    linear-gradient(180deg, #fff6e8 0%, #fffaf3 100%);
}
/* gold star dust, top right */
html:not(.dark) .fi-simple-layout::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(203,156,78,.75) 1.4px, transparent 1.9px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(60% 55% at 85% 0%, #000, transparent 75%);
          mask-image: radial-gradient(60% 55% at 85% 0%, #000, transparent 75%);
  opacity: .55;
}
/* plane with a gold sparkle trail */
html:not(.dark) .fi-simple-layout::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; top: 14%; width: 120px; height: 40px; opacity: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -22 130 44'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eef1f4'/%3E%3Cstop offset='.55' stop-color='%23aeb6bf'/%3E%3Cstop offset='1' stop-color='%236d7680'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23e2b45a'%3E%3Ccircle cx='-34' cy='0' r='3.2' opacity='.85'/%3E%3Ccircle cx='-48' cy='3' r='2.5' opacity='.6'/%3E%3Ccircle cx='-62' cy='-2' r='2' opacity='.45'/%3E%3Ccircle cx='-76' cy='2' r='1.5' opacity='.3'/%3E%3Ccircle cx='-90' cy='-1' r='1.1' opacity='.2'/%3E%3C/g%3E%3Cpath fill='url(%23s)' stroke='%235b636c' stroke-width='1' d='M24 0 C24 -2.6 21 -4 17 -4 L6 -4 L-6 -19 L-11 -19 L-4 -4 L-15 -4 L-19 -10 L-23 -10 L-20 0 L-23 10 L-19 10 L-15 4 L-4 4 L-11 19 L-6 19 L6 4 L17 4 C21 4 24 2.6 24 0 Z'/%3E%3Cpath fill='%23c9a227' d='M-23 -10 L-19 -10 L-17 -6 L-21 -6 Z'/%3E%3C/svg%3E");
}

/* Sign-in card */
html:not(.dark) .fi-simple-main {
  position: relative; border-radius: 24px !important; overflow: hidden;
  border: 1px solid #f0e2c6; background: #fff;
  box-shadow: 0 2px 4px rgba(20,33,61,.05), 0 24px 56px rgba(122,87,24,.16) !important;
}
html:not(.dark) .fi-simple-main::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand) 55%, #f0b94d);
}
.fi-simple-layout .fi-simple-header-heading {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 700; letter-spacing: -.01em;
}
.fi-simple-layout .fi-logo { height: 5.5rem !important; }

/* Solid brand button (the default came out pale) */
.fi-simple-layout .fi-btn.fi-color-primary,
.fi-simple-layout form button[type="submit"] {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand)) !important;
  color: var(--brand-ink, #fff) !important; border-radius: 999px !important; min-height: 48px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 28%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fi-simple-layout .fi-btn.fi-color-primary:hover,
.fi-simple-layout form button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 14px 28px color-mix(in srgb, var(--brand) 34%, transparent); }
.fi-simple-layout .fi-btn.fi-color-primary *,
.fi-simple-layout form button[type="submit"] * { color: var(--brand-ink, #fff) !important; }

/* Inputs: brand focus ring */
.fi-simple-layout .fi-input-wrp { border-radius: 12px !important; }
.fi-simple-layout .fi-input-wrp:focus-within { box-shadow: 0 0 0 2px var(--brand) !important; }
.fi-simple-layout .fi-link { color: var(--brand-dark) !important; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes v2-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  html:not(.dark) .fi-simple-main { animation: v2-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes v2-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
  html:not(.dark) .fi-simple-layout::before { animation: v2-twinkle 2.6s ease-in-out 3; }
  /* plane crosses the top of the screen in an arc, twice, then is gone */
  @keyframes v2-cross {
    0%   { opacity: 0; transform: translate(-140px, 60px) rotate(-12deg); }
    8%   { opacity: .9; }
    50%  { transform: translate(50vw, -10px) rotate(0deg); }
    92%  { opacity: .9; }
    100% { opacity: 0; transform: translate(105vw, 60px) rotate(12deg); }
  }
  html:not(.dark) .fi-simple-layout::after { animation: v2-cross 4.8s .6s cubic-bezier(.45,.05,.55,.95) 2 both; }
  @keyframes v2-shine { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
  .fi-simple-layout form button[type="submit"]::after {
    content: ""; position: absolute; inset: 0; width: 40%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    transform: translateX(-130%) skewX(-20deg); animation: v2-shine 3s 1.4s ease-in-out 3;
  }
}