@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Syne:wght@700;800&display=swap');

:root {
  --finda-yellow: #f5c800;
  --finda-yellow-mid: #f0b800;
  --finda-yellow-soft: #fff8cc;
  --finda-orange: #ff9708;
  --finda-blue: #0c2558;
  --finda-blue-mid: #1a4a9a;
  --finda-blue-soft: #e8f0ff;
  --finda-sky: #1678c0;
  --finda-sky-soft: #d0e8f8;
  --finda-off: #fafbff;
  --finda-gray: #f2f4f8;
  --finda-text: #0a1628;
  --finda-muted: #4a6080;
  --finda-soft-muted: #8aaac8;
  --finda-radius: 18px;
  --finda-shadow: 0 8px 40px rgba(12, 37, 88, 0.12);
  --finda-font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --finda-display: 'Syne', var(--finda-font);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--finda-off) !important;
  color: var(--finda-text) !important;
  font-family: var(--finda-font) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-black {
  letter-spacing: -0.02em;
}

a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

/* Brand mark */
.finda-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none !important;
}

.finda-logo-mark {
  width: 168px;
  height: auto;
  aspect-ratio: 900 / 260;
  border-radius: 14px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--finda-orange);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  flex: 0 0 auto;
  padding: 5px 9px;
}

.finda-logo-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.finda-logo-word {
  font-family: var(--finda-font);
  font-size: 33px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}

.finda-logo-mark + .finda-logo-word,
.finda-logo-mark + span .finda-logo-word {
  display: none !important;
}

.finda-logo-orange {
  color: var(--finda-orange);
}

.finda-logo-blue {
  color: var(--finda-blue);
}

.finda-logo-word .finda-logo-uz {
  color: var(--finda-muted);
  font-family: var(--finda-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 1px;
  opacity: .75;
}

.finda-main-nav .finda-logo,
.finda-footer .finda-logo,
.finda-admin-sidebar .finda-logo {
  background: #fff;
  border-radius: 16px;
  padding: 7px 11px 7px 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

/* Global palette override for old Tailwind colors */
.bg-indigo-600,
.bg-blue-600,
.bg-purple-600,
.from-indigo-600,
.to-purple-600 {
  background-color: var(--finda-blue) !important;
  background-image: none !important;
}

.hover\:bg-indigo-700:hover,
.hover\:bg-blue-700:hover,
.bg-indigo-700,
.bg-blue-700 {
  background-color: var(--finda-blue-mid) !important;
}

.text-indigo-600,
.text-indigo-700,
.text-blue-600,
.text-blue-700,
.text-purple-600,
.hover\:text-indigo-600:hover,
.hover\:text-blue-600:hover,
.hover\:text-purple-600:hover {
  color: var(--finda-blue) !important;
}

.border-indigo-100,
.border-indigo-200,
.border-indigo-300,
.border-indigo-400,
.border-indigo-600,
.border-blue-100,
.border-blue-200,
.border-blue-300,
.border-blue-400,
.border-blue-600 {
  border-color: var(--finda-sky-soft) !important;
}

.bg-indigo-50,
.bg-blue-50 {
  background-color: var(--finda-blue-soft) !important;
}

.bg-indigo-100,
.bg-blue-100 {
  background-color: var(--finda-sky-soft) !important;
}

.shadow-indigo-200,
.shadow-blue-200,
.shadow-indigo-900\/20 {
  box-shadow: var(--finda-shadow) !important;
}

.focus\:ring-indigo-400:focus,
.focus\:ring-indigo-500:focus,
.focus\:ring-blue-400:focus,
.focus\:ring-blue-500:focus {
  --tw-ring-color: rgba(245, 200, 0, .45) !important;
}

.focus\:border-indigo-400:focus,
.focus\:border-blue-400:focus {
  border-color: var(--finda-yellow) !important;
}

.text-transparent.bg-clip-text {
  color: var(--finda-blue) !important;
  background-image: none !important;
}

button.bg-indigo-600,
a.bg-indigo-600,
button.bg-blue-600,
a.bg-blue-600,
input[type="submit"].bg-indigo-600 {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  font-weight: 800;
}

button.bg-indigo-600:hover,
a.bg-indigo-600:hover,
button.bg-blue-600:hover,
a.bg-blue-600:hover {
  background: var(--finda-yellow-mid) !important;
}

/* Public header */
.finda-main-nav {
  background: var(--finda-blue) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 2px 20px rgba(12,37,88,.28) !important;
  backdrop-filter: none !important;
  min-height: 62px;
}

.finda-main-nav a,
.finda-main-nav button {
  color: rgba(255,255,255,.78);
}

.finda-main-nav a:hover,
.finda-main-nav button:hover {
  color: #fff !important;
}

.finda-main-nav input {
  background: rgba(255,255,255,.96) !important;
  border-color: transparent !important;
}

.finda-main-nav .finda-post-btn {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.finda-main-nav .finda-post-btn:hover {
  background: var(--finda-yellow-mid) !important;
  color: var(--finda-blue) !important;
  transform: translateY(-1px);
}

.finda-lang-link-active {
  color: var(--finda-yellow) !important;
  border-bottom-color: var(--finda-yellow) !important;
}

/* Home page from supplied Finda mockup */
.finda-home-page {
  background: var(--finda-off) !important;
}

.finda-home-page .finda-hero {
  background: var(--finda-blue);
  position: relative;
  overflow: hidden;
  padding: 56px 24px 0;
  color: #fff;
}

.finda-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.finda-hero-pattern::before,
.finda-hero-pattern::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 72px solid rgba(245, 200, 0, .055);
}

.finda-hero-pattern::before {
  width: 520px;
  height: 520px;
  right: -140px;
  top: -140px;
}

.finda-hero-pattern::after {
  width: 300px;
  height: 300px;
  left: -90px;
  bottom: 32px;
  border-width: 48px;
}

.finda-hero-showreel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.finda-hero-showreel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12,37,88,.96) 0%, rgba(12,37,88,.9) 30%, rgba(12,37,88,.54) 62%, rgba(12,37,88,.38) 100%),
    linear-gradient(180deg, rgba(12,37,88,.12), rgba(12,37,88,.32));
}

.finda-cinema-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.finda-cinema-bg::before,
.finda-cinema-bg::after {
  content: "";
  position: absolute;
  width: 56vw;
  height: 56vw;
  border-radius: 999px;
  filter: blur(2px);
}

.finda-cinema-bg::before {
  right: -18vw;
  top: -26vw;
  background: radial-gradient(circle, rgba(245,200,0,.28), rgba(245,200,0,.06) 44%, transparent 68%);
  animation: findaCinemaSun 10s ease-in-out infinite;
}

.finda-cinema-bg::after {
  left: -22vw;
  bottom: -28vw;
  background: radial-gradient(circle, rgba(22,120,192,.42), rgba(22,120,192,.08) 44%, transparent 68%);
  animation: findaCinemaMoon 10s ease-in-out infinite;
}

.finda-cinema-grid {
  position: absolute;
  inset: -20% -10%;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(700px) rotateX(62deg) translateY(80px);
  transform-origin: center bottom;
  opacity: .5;
  animation: findaCinemaGrid 10s linear infinite;
}

.finda-cinema-sweep {
  position: absolute;
  inset: -40% auto -40% -22%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), rgba(245,200,0,.18), transparent);
  transform: skewX(-18deg);
  animation: findaCinemaSweep 10s ease-in-out infinite;
}

.finda-cinema-track {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 24px;
  width: 1500px;
  transform-style: preserve-3d;
  opacity: .82;
}

.finda-cinema-track.track-top {
  top: 56px;
  animation: findaCinemaTrackTop 10s ease-in-out infinite;
}

.finda-cinema-track.track-bottom {
  bottom: 54px;
  animation: findaCinemaTrackBottom 10s ease-in-out infinite;
}

.finda-cinema-frame {
  width: 245px;
  height: 150px;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  box-shadow: 0 28px 70px rgba(0,0,0,.26);
  overflow: hidden;
  transform: rotate(-4deg);
  background:
    linear-gradient(180deg, rgba(12,37,88,.05), rgba(12,37,88,.78)),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
}

.finda-cinema-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 74% 22%, rgba(255,255,255,.34), transparent 28%);
  opacity: .85;
}

.finda-cinema-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(180deg, transparent, rgba(3,10,24,.7));
}

.finda-cinema-frame i,
.finda-cinema-frame strong,
.finda-cinema-frame small {
  position: relative;
  z-index: 1;
  font-style: normal;
}

.finda-cinema-frame i {
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: rgba(245,200,0,.95);
  color: var(--finda-blue);
  font-size: 22px;
}

.finda-cinema-frame strong {
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.finda-cinema-frame small {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.72);
}

.finda-cinema-frame.frame-car { background: linear-gradient(180deg, rgba(12,37,88,.08), rgba(12,37,88,.82)), linear-gradient(135deg, #2458a6, #0f2b61 58%, #f5c800); }
.finda-cinema-frame.frame-home { background: linear-gradient(180deg, rgba(12,37,88,.08), rgba(12,37,88,.82)), linear-gradient(135deg, #22c069, #1678c0 52%, #0c2558); }
.finda-cinema-frame.frame-work { background: linear-gradient(180deg, rgba(12,37,88,.08), rgba(12,37,88,.82)), linear-gradient(135deg, #f5c800, #ff9708 48%, #0c2558); }
.finda-cinema-frame.frame-tech { background: linear-gradient(180deg, rgba(12,37,88,.08), rgba(12,37,88,.82)), linear-gradient(135deg, #111827, #1a4a9a 54%, #8aaac8); }

.finda-cinema-frame.frame-service,
.finda-cinema-frame.frame-garden,
.finda-cinema-frame.frame-fashion,
.finda-cinema-frame.frame-gift {
  transform: rotate(3deg);
}

.finda-cinema-frame.frame-service { background: linear-gradient(180deg, rgba(12,37,88,.08), rgba(12,37,88,.82)), linear-gradient(135deg, #334155, #1678c0 50%, #f5c800); }
.finda-cinema-frame.frame-garden { background: linear-gradient(180deg, rgba(12,37,88,.08), rgba(12,37,88,.82)), linear-gradient(135deg, #15803d, #22c069 40%, #0c2558); }
.finda-cinema-frame.frame-fashion { background: linear-gradient(180deg, rgba(12,37,88,.08), rgba(12,37,88,.82)), linear-gradient(135deg, #7c3aed, #1678c0 48%, #f5c800); }
.finda-cinema-frame.frame-gift { background: linear-gradient(180deg, rgba(12,37,88,.08), rgba(12,37,88,.82)), linear-gradient(135deg, #dc2626, #ff9708 48%, #0c2558); }

.finda-cinema-focus {
  position: absolute;
  right: max(32px, calc((100vw - 1200px) / 2 + 44px));
  top: 44%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--finda-blue);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  animation: findaCinemaFocus 10s ease-in-out infinite;
}

.finda-cinema-focus::before {
  content: "";
  position: absolute;
  inset: 42px;
  border-radius: inherit;
  background: rgba(245,200,0,.96);
  box-shadow: 0 0 70px rgba(245,200,0,.38);
}

.finda-cinema-focus::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(245,200,0,.5);
  animation: findaCinemaRing 10s ease-out infinite;
}

.finda-cinema-focus span {
  position: relative;
  z-index: 1;
}

.finda-cinema-pulse {
  position: absolute;
  inset: 18px;
  border-radius: inherit;
  border: 18px solid rgba(255,255,255,.08);
}

@keyframes findaCinemaSun {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  48% { transform: translate3d(-9vw, 8vw, 0) scale(1.18); opacity: 1; }
}

@keyframes findaCinemaMoon {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
  52% { transform: translate3d(10vw, -6vw, 0) scale(1.12); opacity: .95; }
}

@keyframes findaCinemaGrid {
  to { background-position: 0 144px, 144px 0; }
}

@keyframes findaCinemaSweep {
  0%, 14% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  28%, 54% { opacity: 1; }
  72%, 100% { transform: translateX(150vw) skewX(-18deg); opacity: 0; }
}

@keyframes findaCinemaTrackTop {
  0%, 100% { transform: translate3d(-3%, 0, 0) rotate(-4deg) scale(1.02); }
  45% { transform: translate3d(-33%, 24px, 0) rotate(-2deg) scale(1.08); }
  72% { transform: translate3d(-20%, -16px, 0) rotate(-5deg) scale(1.03); }
}

@keyframes findaCinemaTrackBottom {
  0%, 100% { transform: translate3d(-48%, 0, 0) rotate(4deg) scale(1.02); }
  45% { transform: translate3d(-18%, -28px, 0) rotate(2deg) scale(1.08); }
  72% { transform: translate3d(-34%, 12px, 0) rotate(5deg) scale(1.03); }
}

@keyframes findaCinemaFocus {
  0%, 100% { opacity: .72; transform: translate3d(22px, 10px, 0) scale(.9); }
  30%, 62% { opacity: 1; transform: translate3d(-18px, -12px, 0) scale(1.03); }
}

@keyframes findaCinemaRing {
  0%, 100% { transform: scale(.76); opacity: 0; }
  32% { transform: scale(.92); opacity: .9; }
  68% { transform: scale(1.12); opacity: 0; }
}

.finda-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.finda-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  padding: 5px 14px;
  border: 1px solid rgba(245, 200, 0, .3);
  border-radius: 999px;
  background: rgba(245, 200, 0, .14);
  color: var(--finda-yellow);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.finda-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c069;
  animation: pulse 2s infinite;
}

.finda-hero-title {
  font-family: var(--finda-display);
  font-size: clamp(38px, 6vw, 70px);
  line-height: 1.03;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: #fff !important;
  margin-bottom: 18px;
}

.finda-hero-title span {
  color: var(--finda-yellow);
}

.finda-hero-sub {
  max-width: 560px;
  color: rgba(255,255,255,.58) !important;
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 32px;
}

.finda-search-wrap {
  max-width: 760px;
  margin-bottom: 48px;
}

.finda-search-box {
  background: #fff;
  border-radius: var(--finda-radius);
  padding: 6px 6px 6px 20px;
  box-shadow: 0 8px 40px rgba(2, 10, 28, .34);
  gap: 10px !important;
}

.finda-search-box input,
.finda-search-box select,
.finda-search-box .region-picker-button {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.finda-search-box input {
  color: var(--finda-text) !important;
  padding-left: 0 !important;
}

.finda-search-box button[type="submit"] {
  border-radius: 12px !important;
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  box-shadow: none !important;
  padding: 13px 30px !important;
}

.finda-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.finda-hero-stats div {
  display: flex;
  flex-direction: column;
}

.finda-hero-stats strong {
  font-family: var(--finda-display);
  color: var(--finda-yellow);
  font-size: 28px;
  line-height: 1;
}

.finda-hero-stats span {
  margin-top: 4px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.finda-home-categories {
  max-width: none !important;
  margin-top: 0 !important;
  background: var(--finda-blue);
  padding: 0 24px 22px !important;
}

.finda-home-categories > .category-browser {
  max-width: 1200px;
  margin: 0 auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.finda-home-categories .category-browser > .grid:first-child {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  overflow-x: visible;
  padding: 0 0 20px !important;
  scrollbar-width: none;
}

.finda-home-categories .category-browser > .grid:first-child::-webkit-scrollbar {
  display: none;
}

.finda-home-categories .category-tab {
  flex: 0 0 auto;
  flex-direction: row !important;
  gap: 8px;
  min-width: auto !important;
  padding: 9px 16px !important;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 10px !important;
  color: rgba(255,255,255,.68) !important;
  background: transparent !important;
}

.finda-home-categories .category-tab:hover {
  border-color: rgba(245,200,0,.44) !important;
  color: #fff !important;
}

.finda-home-categories .category-icon {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
}

.finda-home-categories .category-title {
  width: auto !important;
  color: inherit !important;
  font-size: 13px !important;
  white-space: nowrap;
}

.finda-home-categories .category-tab.is-active {
  background: var(--finda-yellow) !important;
  border-color: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
}

.finda-home-categories .category-panel {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 18px;
  background: rgba(255,255,255,.06) !important;
  color: #fff;
}

.finda-home-categories .category-panel a,
.finda-home-categories .category-panel span,
.finda-home-categories .category-panel div {
  color: rgba(255,255,255,.86) !important;
}

.finda-home-categories .category-inner-chip,
.finda-home-categories .category-subgroup {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.finda-home-main {
  max-width: 1200px !important;
  margin-top: 40px !important;
}

.finda-home-main h2 {
  font-family: var(--finda-display);
  font-size: 24px !important;
  color: var(--finda-text) !important;
}

.finda-cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

.finda-ad-card {
  border-radius: 18px !important;
  border: 1px solid #e8eef8 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.finda-ad-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--finda-shadow) !important;
  border-color: var(--finda-sky-soft) !important;
}

.finda-ad-card-img {
  height: 180px !important;
  background: var(--finda-gray) !important;
}

.finda-ad-card .p-5 {
  padding: 14px 16px !important;
}

.finda-ad-card h3 {
  font-size: 14px !important;
  color: var(--finda-muted) !important;
  margin-top: 4px;
}

.finda-ad-card p.text-indigo-600 {
  color: var(--finda-blue) !important;
  font-size: 19px !important;
  margin-bottom: 10px !important;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* Footer */
.finda-footer {
  background: var(--finda-blue) !important;
  color: rgba(255,255,255,.72) !important;
  border-top: none !important;
}

.finda-footer h4 {
  color: #fff !important;
}

.finda-footer p,
.finda-footer li,
.finda-footer .text-slate-500,
.finda-footer .text-slate-400 {
  color: rgba(255,255,255,.56) !important;
}

.finda-footer a:hover {
  color: var(--finda-yellow) !important;
}

/* Cards and surfaces */
.card-hover,
.bg-white,
.rounded-2xl,
.rounded-3xl {
  border-color: #e8eef8;
}

.card-hover:hover {
  box-shadow: var(--finda-shadow) !important;
}

/* Home category browser */
.category-browser {
  background: #fff !important;
  border-color: #e8eef8 !important;
  box-shadow: 0 2px 16px rgba(12,37,88,.08) !important;
}

.category-tab.is-active {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
}

.category-tab.is-active *,
body.dark-theme .category-tab.is-active * {
  color: var(--finda-blue) !important;
}

.category-panel {
  background: #fff !important;
}

.category-inner-chip:hover,
.category-mega-sub-link:hover {
  border-color: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
}

/* Admin */
.finda-admin-sidebar {
  background: var(--finda-blue) !important;
  color: rgba(255,255,255,.72) !important;
}

.finda-admin-sidebar .bg-indigo-600,
.finda-admin-sidebar a.bg-indigo-600 {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
}

.finda-admin-sidebar a:hover {
  background: rgba(255,255,255,.09) !important;
}

.finda-admin-sidebar .bg-indigo-600:hover {
  background: var(--finda-yellow-mid) !important;
}

.finda-admin-sidebar .text-indigo-400 {
  color: var(--finda-yellow) !important;
}

/* Dark theme with new palette */
body.dark-theme {
  background: #07152e !important;
  color: #f8fafc !important;
}

body.dark-theme .finda-main-nav,
body.dark-theme .finda-footer,
body.dark-theme .finda-admin-sidebar {
  background: #071b3f !important;
}

body.dark-theme .bg-white,
body.dark-theme .category-browser,
body.dark-theme .category-panel {
  background: #102445 !important;
  border-color: rgba(208,232,248,.16) !important;
}

body.dark-theme .text-slate-900,
body.dark-theme .text-slate-800,
body.dark-theme .text-slate-700,
body.dark-theme .text-gray-900,
body.dark-theme .text-gray-800,
body.dark-theme .text-gray-700 {
  color: #f8fafc !important;
}

body.dark-theme .text-slate-600,
body.dark-theme .text-slate-500,
body.dark-theme .text-gray-600,
body.dark-theme .text-gray-500 {
  color: #b8c8dd !important;
}

body.dark-theme .category-tab.is-active {
  background: var(--finda-yellow) !important;
}

body.dark-theme .category-tab.is-active .category-title {
  color: var(--finda-blue) !important;
}

@media (max-width: 768px) {
  .finda-main-nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px;
    flex-wrap: wrap;
  }

  .finda-logo-word {
    font-size: 24px;
  }

  .finda-logo-mark {
    width: 132px;
    height: auto;
    aspect-ratio: 900 / 260;
    padding: 4px 7px;
    border-radius: 12px;
  }
}

/* Frontend safety pass: readable themes and no clipped text */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  line-height: 1.5;
}

body,
main,
section,
article,
.bg-white,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.card,
.panel {
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6,
p, a, button, label, span, td, th,
input, textarea, select {
  min-width: 0;
}

button,
.btn,
a[class*="bg-"],
input[type="submit"] {
  line-height: 1.25 !important;
  min-height: 38px;
  white-space: normal;
  text-align: center;
}

input,
textarea,
select {
  color: var(--finda-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: #6f819b !important;
  opacity: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.overflow-x-auto,
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
}

.finda-main-nav {
  gap: 16px;
}

.finda-main-nav > .flex:first-child,
.finda-main-nav > .flex:last-child {
  min-width: 0;
  flex-shrink: 0;
}

.finda-main-nav .finda-logo {
  min-height: 48px;
}

.finda-main-nav .finda-logo-word,
.finda-footer .finda-logo-word,
.finda-admin-sidebar .finda-logo-word {
  text-shadow: none;
}

.finda-main-nav .finda-logo-orange,
.finda-footer .finda-logo-orange,
.finda-admin-sidebar .finda-logo-orange {
  color: var(--finda-orange) !important;
}

.finda-main-nav .finda-logo-blue,
.finda-footer .finda-logo-blue,
.finda-admin-sidebar .finda-logo-blue {
  color: var(--finda-blue) !important;
}

.finda-main-nav a:not(.finda-logo):not(.finda-post-btn),
.finda-main-nav button:not(#theme-toggle-btn) {
  color: rgba(255,255,255,.86) !important;
}

.finda-main-nav a:not(.finda-logo):not(.finda-post-btn):hover,
.finda-main-nav button:not(#theme-toggle-btn):hover {
  color: #fff !important;
}

.finda-main-nav #theme-toggle-btn {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

.finda-main-nav input {
  color: var(--finda-text) !important;
}

.finda-admin-sidebar a {
  overflow-wrap: normal;
  word-break: normal;
}

.finda-admin-sidebar .finda-logo {
  justify-content: flex-start;
}

body.dark-theme {
  background: #07152e !important;
  color: #f8fafc !important;
}

body.dark-theme main,
body.dark-theme section:not(.finda-hero),
body.dark-theme article {
  color: #f8fafc;
}

body.dark-theme .bg-white,
body.dark-theme .bg-slate-50,
body.dark-theme .bg-gray-50,
body.dark-theme .bg-slate-100,
body.dark-theme .bg-gray-100,
body.dark-theme .card,
body.dark-theme .panel {
  background-color: #102445 !important;
  border-color: rgba(208,232,248,.18) !important;
}

body.dark-theme .bg-slate-900,
body.dark-theme .bg-gray-900,
body.dark-theme .bg-slate-800,
body.dark-theme .bg-gray-800 {
  background-color: #071b3f !important;
}

body.dark-theme .text-slate-900,
body.dark-theme .text-slate-800,
body.dark-theme .text-slate-700,
body.dark-theme .text-gray-900,
body.dark-theme .text-gray-800,
body.dark-theme .text-gray-700,
body.dark-theme .text-black {
  color: #f8fafc !important;
}

body.dark-theme .text-slate-600,
body.dark-theme .text-slate-500,
body.dark-theme .text-slate-400,
body.dark-theme .text-gray-600,
body.dark-theme .text-gray-500,
body.dark-theme .text-gray-400 {
  color: #c8d6ea !important;
}

body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
  background-color: #07152e !important;
  color: #f8fafc !important;
  border-color: rgba(208,232,248,.24) !important;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
  color: #a8bbd4 !important;
}

input.phone-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.16) !important;
}

input.phone-valid {
  border-color: #10b981 !important;
}

body.dark-theme table {
  color: #f8fafc !important;
}

body.dark-theme thead,
body.dark-theme th {
  background-color: #071b3f !important;
  color: #dbe8f8 !important;
}

body.dark-theme td {
  border-color: rgba(208,232,248,.14) !important;
}

body.dark-theme tr:hover {
  background-color: rgba(255,255,255,.045) !important;
}

body.dark-theme a:not(.finda-logo):not(.finda-post-btn):not([class*="bg-"]) {
  color: #7db7ff !important;
}

body.dark-theme .finda-main-nav a:not(.finda-logo):not(.finda-post-btn),
body.dark-theme .finda-admin-sidebar a:not(.finda-logo),
body.dark-theme .finda-footer a:not(.finda-logo) {
  color: rgba(255,255,255,.82) !important;
}

body.dark-theme .finda-main-nav a:not(.finda-logo):hover,
body.dark-theme .finda-admin-sidebar a:not(.finda-logo):hover,
body.dark-theme .finda-footer a:not(.finda-logo):hover {
  color: #fff !important;
}

body.dark-theme .finda-logo {
  background: transparent !important;
  box-shadow: none !important;
}

body.dark-theme .finda-logo-orange {
  color: var(--finda-orange) !important;
}

body.dark-theme .finda-logo-blue {
  color: var(--finda-blue) !important;
}

/* Cross-JSP dark theme readability guard. Many legacy JSP files use Tailwind
   utility colors directly, so keep text readable even when a page misses
   page-specific dark classes. */
body.dark-theme :where(.text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, .text-gray-800, .text-gray-700, .text-black, .text-blue-700, .text-indigo-700, .text-purple-700) {
  color: #f8fafc !important;
}

body.dark-theme :where(.text-slate-600, .text-slate-500, .text-slate-400, .text-gray-600, .text-gray-500, .text-gray-400) {
  color: #c8d6ea !important;
}

body.dark-theme :where(.text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-red-900) {
  color: #fca5a5 !important;
}

body.dark-theme :where(.text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-green-900) {
  color: #86efac !important;
}

body.dark-theme :where(.text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-orange-500, .text-orange-600, .text-orange-700, .text-yellow-500, .text-yellow-600, .text-yellow-700) {
  color: #fbbf24 !important;
}

body.dark-theme :where(.bg-white, .bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100, .bg-blue-50, .bg-indigo-50, .bg-red-50, .bg-green-50, .bg-yellow-50, .bg-amber-50, .bg-orange-50, .bg-purple-50) {
  background-color: #102445 !important;
  color: #f8fafc !important;
  border-color: rgba(208,232,248,.18) !important;
}

body.dark-theme :where(input, textarea, select, .form-control) {
  background-color: #07152e !important;
  color: #f8fafc !important;
  border-color: rgba(208,232,248,.24) !important;
  caret-color: #f8fafc !important;
}

body.dark-theme :where(input, textarea)::placeholder {
  color: #a8bbd4 !important;
  opacity: 1 !important;
}

body.dark-theme input:-webkit-autofill,
body.dark-theme input:-webkit-autofill:hover,
body.dark-theme input:-webkit-autofill:focus,
body.dark-theme textarea:-webkit-autofill,
body.dark-theme textarea:-webkit-autofill:hover,
body.dark-theme textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fafc !important;
  box-shadow: 0 0 0 1000px #07152e inset !important;
}

/* Final dark-mode contrast pass for all JSP controls. This file is usually
   loaded after the generic dark theme, so these rules win for real pages. */
body.dark-theme :where(button, .btn, a.btn, input[type="submit"], input[type="button"], input[type="reset"]) {
  color: #f8fafc !important;
  border-color: rgba(208,232,248,.24) !important;
  text-shadow: none !important;
}

body.dark-theme :where(button.bg-indigo-600, button.bg-blue-600, a.bg-indigo-600, a.bg-blue-600, input[type="submit"].bg-indigo-600, input[type="submit"].bg-blue-600, .btn-primary) {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  border-color: var(--finda-yellow) !important;
  box-shadow: 0 10px 28px rgba(245, 200, 0, .16) !important;
}

body.dark-theme :where(button.bg-indigo-600, button.bg-blue-600, a.bg-indigo-600, a.bg-blue-600, input[type="submit"].bg-indigo-600, input[type="submit"].bg-blue-600, .btn-primary) * {
  color: inherit !important;
}

body.dark-theme :where(button.bg-indigo-600:hover, button.bg-blue-600:hover, a.bg-indigo-600:hover, a.bg-blue-600:hover, input[type="submit"].bg-indigo-600:hover, input[type="submit"].bg-blue-600:hover, .btn-primary:hover) {
  background: var(--finda-yellow-mid) !important;
  color: var(--finda-blue) !important;
}

body.dark-theme :where(.bg-green-600, .bg-green-700, .bg-red-600, .bg-red-700, .bg-gray-600, .bg-gray-700, .bg-slate-600, .bg-slate-700) {
  color: #ffffff !important;
}

body.dark-theme :where(button.text-red-500, button.text-red-600, button.text-red-700, a.text-red-500, a.text-red-600, a.text-red-700) {
  color: #fca5a5 !important;
  background: transparent !important;
}

body.dark-theme :where(button.text-indigo-500, button.text-indigo-600, button.text-indigo-700, a.text-indigo-500, a.text-indigo-600, a.text-indigo-700) {
  color: #93c5fd !important;
}

body.dark-theme .finda-search-box {
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

body.dark-theme .finda-search-box input,
body.dark-theme .finda-search-box select,
body.dark-theme .finda-search-box .region-picker-toggle {
  background: transparent !important;
  color: var(--finda-text) !important;
  border-color: transparent !important;
}

body.dark-theme .finda-search-box input::placeholder {
  color: #51637d !important;
}

body.dark-theme .finda-search-box button[type="submit"] {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  border-color: var(--finda-yellow) !important;
}

body.dark-theme .region-picker-panel {
  background: #102445 !important;
  border-color: rgba(208,232,248,.2) !important;
}

body.dark-theme .region-picker-panel :where(button, div) {
  background-color: #102445 !important;
  color: #f8fafc !important;
  border-color: rgba(208,232,248,.16) !important;
}

body.dark-theme .region-picker-panel button:hover {
  background-color: #18365f !important;
  color: #ffffff !important;
}

body.dark-theme .finda-main-nav .finda-post-btn,
body.dark-theme a.finda-post-btn {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  border-color: var(--finda-yellow) !important;
  box-shadow: none !important;
}

body.dark-theme .finda-main-nav .finda-post-btn:hover,
body.dark-theme a.finda-post-btn:hover {
  background: var(--finda-yellow-mid) !important;
  color: var(--finda-blue) !important;
}

.auth-primary-button,
button.auth-primary-button,
a.auth-primary-button {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  border-color: var(--finda-yellow) !important;
  box-shadow: 0 14px 32px rgba(245, 200, 0, .18) !important;
}

.auth-primary-button:hover,
button.auth-primary-button:hover,
a.auth-primary-button:hover {
  background: var(--finda-yellow-mid) !important;
  color: var(--finda-blue) !important;
}

.auth-primary-button *,
.auth-primary-button span,
.auth-primary-button i {
  color: inherit !important;
}

.auth-primary-button:disabled {
  opacity: .82 !important;
  cursor: wait !important;
}

.auth-success-button,
button.auth-success-button {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

.auth-success-button *,
.auth-success-button span,
.auth-success-button i {
  color: inherit !important;
}

body.dark-theme .auth-primary-button,
body.dark-theme button.auth-primary-button,
html.dark .auth-primary-button,
html.dark button.auth-primary-button,
body.dark .auth-primary-button,
body.dark button.auth-primary-button {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  border-color: var(--finda-yellow) !important;
  text-shadow: none !important;
}

body.dark-theme .auth-primary-button:hover,
html.dark .auth-primary-button:hover,
body.dark .auth-primary-button:hover {
  background: var(--finda-yellow-mid) !important;
  color: var(--finda-blue) !important;
}

body.dark-theme .auth-success-button,
html.dark .auth-success-button,
body.dark .auth-success-button {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

html[data-theme="dark"] :where(button[class*="bg-indigo-"], button[class*="bg-blue-"], a[class*="bg-indigo-"], a[class*="bg-blue-"], input[type="submit"][class*="bg-indigo-"], input[type="submit"][class*="bg-blue-"], .auth-primary-button),
html.dark :where(button[class*="bg-indigo-"], button[class*="bg-blue-"], a[class*="bg-indigo-"], a[class*="bg-blue-"], input[type="submit"][class*="bg-indigo-"], input[type="submit"][class*="bg-blue-"], .auth-primary-button),
body.dark :where(button[class*="bg-indigo-"], button[class*="bg-blue-"], a[class*="bg-indigo-"], a[class*="bg-blue-"], input[type="submit"][class*="bg-indigo-"], input[type="submit"][class*="bg-blue-"], .auth-primary-button),
body.dark-theme :where(button[class*="bg-indigo-"], button[class*="bg-blue-"], a[class*="bg-indigo-"], a[class*="bg-blue-"], input[type="submit"][class*="bg-indigo-"], input[type="submit"][class*="bg-blue-"], .auth-primary-button) {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  border-color: var(--finda-yellow) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] :where(button[class*="bg-indigo-"], button[class*="bg-blue-"], a[class*="bg-indigo-"], a[class*="bg-blue-"], input[type="submit"][class*="bg-indigo-"], input[type="submit"][class*="bg-blue-"], .auth-primary-button) *,
html.dark :where(button[class*="bg-indigo-"], button[class*="bg-blue-"], a[class*="bg-indigo-"], a[class*="bg-blue-"], input[type="submit"][class*="bg-indigo-"], input[type="submit"][class*="bg-blue-"], .auth-primary-button) *,
body.dark :where(button[class*="bg-indigo-"], button[class*="bg-blue-"], a[class*="bg-indigo-"], a[class*="bg-blue-"], input[type="submit"][class*="bg-indigo-"], input[type="submit"][class*="bg-blue-"], .auth-primary-button) *,
body.dark-theme :where(button[class*="bg-indigo-"], button[class*="bg-blue-"], a[class*="bg-indigo-"], a[class*="bg-blue-"], input[type="submit"][class*="bg-indigo-"], input[type="submit"][class*="bg-blue-"], .auth-primary-button) * {
  color: inherit !important;
}

html[data-theme="dark"] :where(button[class*="bg-green-"], button[class*="bg-red-"], button[class*="bg-slate-"], button[class*="bg-gray-"], a[class*="bg-green-"], a[class*="bg-red-"], a[class*="bg-slate-"], a[class*="bg-gray-"], .auth-success-button),
html.dark :where(button[class*="bg-green-"], button[class*="bg-red-"], button[class*="bg-slate-"], button[class*="bg-gray-"], a[class*="bg-green-"], a[class*="bg-red-"], a[class*="bg-slate-"], a[class*="bg-gray-"], .auth-success-button),
body.dark :where(button[class*="bg-green-"], button[class*="bg-red-"], button[class*="bg-slate-"], button[class*="bg-gray-"], a[class*="bg-green-"], a[class*="bg-red-"], a[class*="bg-slate-"], a[class*="bg-gray-"], .auth-success-button),
body.dark-theme :where(button[class*="bg-green-"], button[class*="bg-red-"], button[class*="bg-slate-"], button[class*="bg-gray-"], a[class*="bg-green-"], a[class*="bg-red-"], a[class*="bg-slate-"], a[class*="bg-gray-"], .auth-success-button) {
  color: #ffffff !important;
}

/* Final button text guard. Some JSP pages load this brand file after their
   page-local styles, so keep the last word here for dark-theme controls. */
body.dark-theme :where(
  .profile-primary-action,
  button[class*="bg-indigo-"],
  button[class*="bg-blue-"],
  a[class*="bg-indigo-"],
  a[class*="bg-blue-"],
  input[type="submit"][class*="bg-indigo-"],
  input[type="submit"][class*="bg-blue-"],
  .btn-primary,
  .auth-primary-button,
  .api-button
) {
  background: var(--finda-yellow) !important;
  color: var(--finda-blue) !important;
  border-color: var(--finda-yellow) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--finda-blue) !important;
}

body.dark-theme :where(
  .profile-primary-action,
  button[class*="bg-indigo-"],
  button[class*="bg-blue-"],
  a[class*="bg-indigo-"],
  a[class*="bg-blue-"],
  input[type="submit"][class*="bg-indigo-"],
  input[type="submit"][class*="bg-blue-"],
  .btn-primary,
  .auth-primary-button,
  .api-button
) :where(span, i, svg, strong, b) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

body.dark-theme :where(.profile-danger-action, .btn-danger, button[class*="bg-red-"], a[class*="bg-red-"]) {
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.dark-theme :where(.profile-danger-action, .btn-danger, button[class*="bg-red-"], a[class*="bg-red-"]) :where(span, i, svg, strong, b) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 1100px) {
  .finda-cinema-track {
    opacity: .62;
  }

  .finda-cinema-focus {
    right: -32px;
    opacity: .62;
  }
}

@media (max-width: 820px) {
  .finda-hero-showreel {
    opacity: .48;
  }

  .finda-cinema-track {
    left: 18%;
    width: 1120px;
    gap: 14px;
  }

  .finda-cinema-frame {
    width: 190px;
    height: 118px;
    padding: 14px;
    border-radius: 18px;
  }

  .finda-cinema-frame i {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    font-size: 18px;
  }

  .finda-cinema-frame strong {
    font-size: 16px;
  }

  .finda-cinema-focus {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finda-cinema-bg::before,
  .finda-cinema-bg::after,
  .finda-cinema-grid,
  .finda-cinema-sweep,
  .finda-cinema-track,
  .finda-cinema-focus,
  .finda-cinema-focus::after {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .finda-main-nav {
    align-items: flex-start;
  }

  .finda-main-nav > .hidden.md\:flex {
    display: none !important;
  }

  .finda-main-nav .finda-post-btn {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}