@import url("https://unpkg.com/leaflet/dist/leaflet.css");


/* */

#app,
.app-shell,
.camera-screen,
.landing-screen {
  min-height: 100vh;
  background: #000; /* <— no white */
}

.app-shell img,
.app-shell video,
.app-shell canvas {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}

/* Center the app in the window */
.app-wrapper {
  height: 100vh;
  width: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

/* Phone-like frame shared by ALL screens */
.app-shell {
  width: 100%;
  max-width: 760px;
  max-height: 1100px;
  background: #0b0b0b;
  border-radius: 30px;           /* rounded corners */
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Scrollable content inside the shell */
.app-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  
}

.tiles button, .categories button {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: #3b82f6;
  color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
 }

.top-buttons {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: .5rem;
}



/* --- LANDING --- */
.landing {
  display: flex;
  flex-direction: column;
  text-align: center;
}



/* Main action buttons */
.main-actions {
 flex-direction: row;        /* side by side */
  justify-content: center;    /* center in phone */
  gap: 1rem;                  /* space between buttons */
  margin-top: auto;           /* push them lower inside landing screen */
  margin-bottom: 1rem;        /* distance from categories */
  flex-wrap: wrap; 
}

.big-btn {
  width: 250px;
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(90deg, #007aff, #00c6ff);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  transition: transform 0.15s;
  
}

.big-btn:hover {
  transform: translateY(-2px);
}

.big-btn.secondary {
  background: #f3f4f6;
  color: #374151;
}

/* Categories lower on screen */
.categories {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2rem;
}

.categories button {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.camera-screen {
  position: relative;        /* anchor for absolute children */
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Floating overlays */
.top-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 40;
}
.left-overlay {
  position: absolute;
  top: 58px;
  left: 18px;
  z-index: 40;

}







/* Torch / flash button */
.icon-btn {
  background: rgba(0, 0, 0, 0.5);      /* darker backdrop */
  border: none;
  border-radius: 50%;
  width: 64px;                         /* bigger circle */
  height: 64px;
  font-size: 44px;                     /* bigger icon glyph */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.45),      /* deeper drop shadow */
    0 2px 4px rgba(0,0,0,0.4) inset;  /* inner glow */
  backdrop-filter: blur(8px);
  transition: transform 0.15s, background 0.2s;
}

/* MAIN camera card - full screen cover */
        .camera-card {
          top: 0px;
          position: relative;
          width: 100%;
          height: 100%;
          aspect-ratio: 5/8;
          max-width: 760px;
          margin: 0 auto;
          overflow: hidden;
          background: #000;
          border: 0;
          box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* optional shadow for depth */
          z-index: 20;
}
/* video feed */
.feed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Controls - center bottom */
.controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 96px; /* moves shutter up off bottom UI */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 30;
}

/* Big shutter */
.big-shutter {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  box-shadow:
    0 6px 12px rgba(0,0,0,0.25),
    0 3px 6px rgba(0,0,0,0.2) inset,
    0 -3px 6px rgba(255,255,255,0.12) inset;
  transition: transform 0.15s, box-shadow 0.3s;
}
.big-shutter:active { transform: scale(0.94); }

/* swap camera - bottom right */
.swap {
  position: absolute;
  right: 68px;
  bottom: 100px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:30;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Result view styles (kept from original) */
.result-wrap {
  position: relative;
  width: 100%;
  flex: 1;               /* take all available height */
  background: #0b0b0b;
  border-radius: inherit;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */

}



.result-img {
  width: 100%;
  max-height: 60%;     /* or bigger if you widen the app */
  padding: 3px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  margin-bottom: .8rem; 
}

.explain-card {
  width: 100%;
  max-width: none;
  height: relative;
  background: #fff;
  border-radius: 12px;
  padding: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: .8rem; 

}

.loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;     /* center spinner vertically */
  gap: 1.4rem;                 /* more room between elements */
  text-align: center;
  padding-top: 15vh;           /* push down a bit on phones */
}

.loading-card h1{ margin:4px 0 0; font-size: 1.6rem; font-weight:800; }

.loading-card p{ margin:0; }

.circle-wrap{ position:relative; width: 260px; height:260px; margin-top:6px; }

.circle-wrap .img{
  position:absolute; top:20px; left:20px; width:220px; height:220px; border-radius:999px; background-size: cover; background-position:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.circle-wrap .ring{
  position:absolute; inset:0; border-radius:999px;
  background: conic-gradient(#6366f1 0% 25%, rgba(99,102,241,.15) 25% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 12px), #000 calc(50% - 11px));
          mask: radial-gradient(farthest-side, transparent calc(50% - 12px), #000 calc(50% - 11px));
  animation: spin 1.2s linear infinite;
}

.circle-wrap.done .ring{
  background: conic-gradient(#22c55e 0 100%);
  animation: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.check{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:999px; background:#22c55e; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:34px;
  box-shadow:0 12px 24px rgba(34,197,94,.35);
}

.ghost-btn{ border:2px solid #7c3aed; color:#7c3aed; background:transparent; padding:.8rem 1.2rem; border-radius:999px; font-weight:800; }

.primary-btn {
  border: 0;
  background: linear-gradient(135deg, #6366f1, #22c55e);
  color: #fff;
  padding: .9rem 1.4rem;
  border-radius: 14px;
  font-weight: 800;
  margin: 1rem 0 2rem;
  transition: transform 0.15s, background 0.3s;
}
.primary-btn:active { transform: scale(.96); }

.error{ background:#fee2e2; color:#7f1d1d; padding:.8rem 1rem; border-radius:14px; }

.audio-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.audio-toggle:hover {
  background: rgba(0,0,0,0.6);
}



/* Center modal inside phone */
.auth-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  background: rgba(0, 0, 0, 0.45);   /* soft backdrop */
  backdrop-filter: blur(6px);
}

/* Main modal container */
.auth-wrapper .modal {
  position: relative;
  width: 80%;
  height: auto;
  max-width: 360px;
  background: linear-gradient(145deg, #ffffff, #f9fafb);
  border-radius: 22px;
  padding: 1.8rem 1.4rem;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: popIn 0.35s ease;
}

/* Heading */
.auth-wrapper .modal h2 {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  color: #111827;
  margin-bottom: 0.4rem;
}

/* Inputs */
.auth-wrapper .modal input {
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  font-size: 1rem;
  background: #fff;
  transition: box-shadow 0.2s, border 0.2s;
}

.auth-wrapper .modal input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Buttons */
.auth-wrapper .modal .btn {
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 14px;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.auth-wrapper .modal .btn:hover {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.auth-wrapper .modal .btn:active {
  transform: scale(0.96);
}

/* Close button (secondary) */
.auth-wrapper .modal .btn.close {
  background: #e5e7eb;
  color: #374151;
}

/* Error message */
.auth-wrapper .modal p {
  color: #ef4444;
  font-size: 0.9rem;
  margin: 0;
  text-align: center;
}

/* Entrance animation */
@keyframes popIn {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* container for icon + bubble */
.auth-icon-wrap {
  position: absolute;
  top: 192px;
  right: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 45;
}

/* icon stays as before */
.auth-icon {
  background: none;
  border: none;
  font-size: 3.2rem;
  line-height: 1;
  cursor: pointer;
  color: #374151;
  text-shadow:
    0 3px 6px rgba(0,0,0,0.7),             /* main dark blur */
    0 6px 12px rgba(0,0,0,0.5);            /* extra depth */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
  transition: transform 0.15s, color 0.2s;
}
.auth-icon:hover {
  transform: scale(1.15);
  color: #111827;
}

/* text bubble under icon */
.auth-bubble {
  background: #11827;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}






.landing {
  background-color: #000;   /* fallback behind video */
}


/* --- Bottom controls on landing --- */
.bottom-bar {
  position: absolute;       /* always anchored */
  bottom: 10px;             /* spacing from bottom of shell */
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  z-index: 999;              /* above content, below modals */
}



/* pill-wrapper should mimic bottom-bar CameraCapture */
.pill-wrapper {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.2rem;
  z-index: 60;
}



/* Long pill behind icons */
.pill-nav {
  background: #FFAE00;
  border-radius: 16px 16px 0 0;  /* TL TR BR BL */  padding: 0 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(400px, 90%);
  height: 60px;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.5),
    inset 0 0 12px rgba(0,0,0,0.35);
}

.pill-nav button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  
}
.pill-nav button:hover {
  transform: scale(1.15);
}


.pill-left, .pill-right {
  display: flex;
  gap: 1rem;          /* ← spacing between buttons (you can use margin too) */
}


.settings-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.settings-screen h2 {
  font-size: 1.4rem;
  font-weight: 600;
}


.facts-card {
  width: 100%;
  max-width: none;
  height: relative;
  background: #fff;
  border-radius: 12px;
  padding: 3px;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.8);  text-align: center;
  font-size: 1.5rem;
  margin-bottom: .8rem; 
}

.facts-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;

}

.facts-card ul {
  padding-left: 1.5rem;
  margin: 1;
  text-align: left;
}

.facts-card li {
  margin-bottom: 0.8rem;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: left;
}





/* --- Move Flash Button --- */

.left-overlay {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 40;
}

/* --- Shared style for round camera utilities --- */
.camera-util {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.45),
    inset 0 1px 2px rgba(255,255,255,0.05);
  cursor: pointer;
  transition: transform 0.15s, background 0.25s;
  opacity: 0;                        /* fade-in start */
  animation: fadeInUtil 0.5s ease forwards;
  animation-delay: 0.35s;            /* wait for camera */
}


.camera-util:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.06);
}

/* Flash specific (emoji icon) */
.camera-util.flash {
  font-size: 32px;      /* big enough for emoji */
  line-height: 1;
}

/* Swap specific (SVG) */
.camera-util.swap svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

/* Fade-in animation */
@keyframes fadeInUtil {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


@keyframes fadeOut {
  0%   { opacity: 1; }
  70%  { opacity: 0.4; }
  100% { opacity: 0; }
}



/* --------------------------------------------- Mobile tweaks only --------------------------------------- */

/* --------------------------------------------- Mobile tweaks only --------------------------------------- */

/* --------------------------------------------- Mobile tweaks only --------------------------------------- */


@media (max-width: 2680px) {
html, body {
    height: 100%;
    margin: 0;
    padding: 0;  /* Add this explicitly */
    background: #000;
    overscroll-behavior-y: none;
    overflow-x: hidden;  /* Add this */
    width: 100.5%;

}

/* Top-level app container */
#app,
.app-shell,
.camera-screen,
.landing-screen {
  min-height: 100vh;              /* always full height */
  background: #000;               /* unify → black base, no white flashes */
}

/* App wrapper centers content */
.app-wrapper {
  height: 100vh;
  width: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Single phone-like shell */
.app-shell {
  width: 100%;                   /* exactly viewport width */
  height: 100dvh;                 /* dynamic viewport height for mobile */
  display: flex;
  flex-direction: column;
  border-radius: 0;               /* flat edges */
  background: #fff;               /* inside is white */
  box-shadow: none;               /* remove outer shadow */
  overflow-x: hidden;             /* stop right-side seam */
  position: relative;
  margin: 0;         /* Add this */
  padding: 0;        /* Add this */
}

/* Ensure children never push wider than shell */
.app-shell * {
  max-width: 100%;
  box-sizing: border-box;         /* extra safety */
}



/* PromoCarousel container itself */
.promo-carousel {
  position: relative;
  width: 100%;
  height: 150px;          /* adjust height you want */
  overflow: hidden;
  border-radius: 14px;
}

/* images */
.promo-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .6s ease-in-out;
  border-radius: 14px;
}
/* images */
.promo-slide img {
  width: 100%;
  height: 90%;
  object-fit: cover;          /* still fills the tile */
  transform-origin: center center;
  transform: scale(0.85);      /* try 0.9–0.95, not 0.4 */
  transition: transform 0.6s ease, opacity 0.6s ease-in-out;
  border-radius: 14px;
}



.promo-slide {
  position: absolute;
  inset: 0;
  display: flex;              /* center the image box */
  align-items: center;
  justify-content: center;
  overflow: hidden;           /* keep edges tidy */
}


.promo-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* dots */
.promo-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active { background: #fff; }

/* wrap so carousel pushes tiles */
.carousel-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto .5rem auto;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); /* Add shadow like tiles */
  border-radius: 14px; /* Match tile border radius */
}

.carousel-wrapper .promo-slide {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.08); /* light translucent layer */
  backdrop-filter: blur(4px);
}




/* Camera screen layout */
.camera-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #111;               /* optional for camera backdrop */
}



/* MAIN camera card - full screen cover */
        .camera-card {
          top: 0px;
          position: relative;
          width: 100%;
          height: 100%;
          max-width: 660px;
          margin: 0 auto; 
          overflow: hidden;
          background: #000;
          border: 0;
          box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* optional shadow for depth */
          z-index: 20;
}

.feed,
.camera-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* or contain, if you don’t want cropping */
  display: block;
}

@media (max-width: 680px) {
  /* ... your existing mobile styles ... */

  /* Prevent horizontal scroll on landing */
  .landing,
  .landing-screen {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Constrain categories grid */
  .categories-grid {
    max-width: 100%;
    padding: 0 0.5rem; /* Add padding so tiles don't touch edges */
  }

  /* Keep tile images from bleeding off screen */
  .category-tile,
  .category-cta {
    overflow: hidden; /* Already there, but ensure it's working */
    max-width: 100%;
  }
}


  /* Landing page spacing */
  .landing {
    padding: .75rem 0.75rem;
    justify-content: flex-start;
    overflow-y: auto;
  }

  /* Brand title */
  .brand {
    font-size: 1.5rem;
    margin: 0.5rem 0 1rem;
  }

  /* Two action buttons side by side */
  .main-actions {
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .big-btn {
    flex: 1 1 48%;
    min-width: 0;
    padding: 0.7rem;
    font-size: 1rem;
  }

  /* Category tiles in grid */
  .categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;


  }

  .categories button {
    font-size: 0.85rem;
    padding: 0.5rem;
  }

  /* Login bubble / icon size */
  .auth-icon-wrap {
    top: 3rem;
    right: 1rem;
  }

  .auth-icon {
    font-size: 2rem;
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);
  }

.feed, .camera-card video {
  pointer-events: none;
}

.bottom-bar {
  position: fixed;

  height: 52px;
  display: flex;
  align-items: center;
  z-index: 9999;

  

}

/* pill-wrapper should mimic bottom-bar CameraCapture */
.pill-wrapper {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.2rem;
  z-index: 60;
}

.circle-snap {
  position: absolute;
  left: 40%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #000;
  border: none;
  font-size: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;

  /* 👇 glow + bounce transition */
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.25),
    0 0 12px rgba(255, 255, 255, 0.15),
    inset 0 2px 4px rgba(255, 255, 255, 0.12);

  transition: transform 0.18s cubic-bezier(0.28, 0.84, 0.42, 1.1), 
              box-shadow 0.25s ease;
  cursor: pointer;
  /* Glow + pulse */
  animation: pulseAttention 2.2s infinite ease-in-out;
}


/* Pulse animation */
@keyframes pulseAttention {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(99, 102, 241, 0.6);
  }
  50% {
    transform: scale(1.05); /* slightly grow */
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.75);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(99, 102, 241, 0.6);
  }
}



/* Hover: a little "pop" */
.circle-snap:hover {
  transform: translateX(-50%) scale(1.08);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.35),
    0 0 16px rgba(255, 255, 255, 0.2),
    inset 0 3px 6px rgba(255, 255, 255, 0.15);
}

/* Pressed: shrink a bit, then bounce back */
.circle-snap:active {
  transform: translateX(-50%) scale(0.88);
  transition: transform 0.1s cubic-bezier(0.28, 0.84, 0.42, 1.2);
}


/* Long pill behind icons */
.pill-nav {
  background: #41AD63;
  border-radius: 16px 16px 0 0;  /* TL TR BR BL */
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;  /* Changed from center */
  padding-top: 0.3rem;      /* Add some top padding */  width: 100%;               /* stretch across screen */
  height: 75px;
  box-shadow: 

    0 4px 12px rgba(0, 0, 0, 0.8);        /* outer drop shadow */
}


.pill-nav button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  
}
.pill-nav button:hover {
  transform: scale(1.15);
}


.pill-left, .pill-right {
  display: flex;
  gap: .2rem;          /* ← spacing between buttons (you can use margin too) */
}


.pill-nav svg {
  color: #fff;          /* sets currentColor → white */
  stroke: #fff;         /* extra safety */
}



.settings-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.settings-screen h2 {
  font-size: 1.4rem;
  font-weight: 600;
}

.facts-card {
  width: 100%;
  max-width: none;
  height: relative;
  background: linear-gradient(145deg, #1e293b, #111827);
  border-radius: 12px;
  padding: 3px;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.8);  
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: .8rem; 

}

.facts-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.facts-card ul {
  padding-left: 1.5rem;
  margin: 1;
  text-align: left;
}

.facts-card li {
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: left;

}

/* Result view styles (kept from original) */
.result-wrap {
  position: relative;
  width: 100%;
  flex: 1;               /* take all available height */
  background: #0b0b0b;
  max-width: 100%;     /* 👈 prevent over-flow */
  overflow-x: hidden;  /* optional safety */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
  color: #f8fafc;             /* slightly softer white */

}

.result-img {
  width: 100%;
  max-width: 100%;     /* or bigger if you widen the app */
  padding: 2px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  margin-bottom: .8rem; 
}

.explain-card {
  width: 100%;
  max-width: none;
  height: relative;
  background: linear-gradient(145deg, #1e293b, #111827);
  border-radius: 12px;
  padding: 1px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: .8rem; 

}

.splash-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeOut 0.6s ease forwards;
  animation-delay: 2.6s; /* fade a bit before timeout */
  overflow: hidden;   /* 👈 no inner scroll */

}

.splash-video {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

@keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 0.4; }
  100% { opacity: 0; }
}




/* --- Categories Grid --- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 13.6rem;
  margin-top: 1rem;

}

/* Single tile */
.category-tile {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  padding: 0.5rem;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.8);
  color: #111;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.22s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(6px);
  height: 120px;
  overflow: hidden;  /* crop image */
}

/* Add snap icon to bottom left */
.category-tile:not(.category-cta)::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 8px;
  width: 24px;
  height: 24px;
  background: url('/icon.png') center/contain no-repeat;

  z-index: 3;
  transition: opacity 0.2s ease;
}


.category-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.6),
    inset 0 2px 6px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}

/* Title */
.category-tile h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 2;
  text-align: left;
}

/* Description */
.category-tile p {
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.3rem 0 0;
  color: #000000;
  max-width: 65%;   /* keep text column narrower */
  position: relative;
  z-index: 2;
  text-align: left;
}

.category-tile .tile-image {
  position: absolute;
  right: -10%;            /* push off right edge */
  bottom: -7px;          /* 🔽 lowers the image */
  width: 65%;             /* bigger column space */
  overflow: hidden;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start; /* don’t force center */
}

.category-tile .tile-image img {
  max-height: 140px;       /* 🔼 control actual size */
  width: auto;
  margin-top: 10px;        /* 🔽 nudge image lower */
  transform: translateX(10%); /* hide part off the tile */
  object-fit: contain;
  filter: drop-s
}


.category-tile:hover .tile-image img {
  transform: translateX(15%) scale(1.05);
}


/* CTA tile */
.category-cta {
  background: #fff;
  border-radius: 16px;
  padding: .8rem;
  margin: 1rem 0;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.8);  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* 👈 pushes button to bottom */
  min-height: 145px;                /* enough vertical space */
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;                 /* clean edges */
  margin-top: 1rem;
}

/* Title + description */
.category-cta h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: #000000;
  line-height: 1.4;
}

.category-cta p {
  font-size: 0.95rem;
  margin: 0.4rem 0 0;
  color: #000000;
  line-height: 1.5;
  max-width: 85%;
}

/* Blue button bottom-right */
.category-cta .btn-primary.btn-compact {
  align-self: flex-start;              /* 👈 moves to right side */
  margin-top: auto;                  /* 👈 pushes it down */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #41AD63;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.8);  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.25s;
}


.category-cta {
  position: relative; /* anchor for absolute children */
  overflow: hidden;   /* clip the image bleed */

}

.category-cta .tile-image {
  position: absolute;
  right: -25%;         
  top: 0;              /* pin to top */
  bottom: 0;           /* stretch full tile height */
  width: 65%;
  height: 100%;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.category-cta .tile-image img {
  min-height: 120%;   /* force taller */
  width: auto;        
  object-fit: cover;  
  object-position: top center;
  transform: translateY(-15px);


  /* 👇 now this will actually work */
  object-position: top center;
  /* fade left into white */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 45%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 45%, #000 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;

  /* 👇 ensures the transparent side shows as white instead of see-through */
  background: white;
}






/* Force nav SVGs to respect our chosen size */
.pill-nav svg {
  width: 44px !important;
  height: 44px !important;
  stroke-width: 2;
}

/* swap camera - bottom right */
.swap {
  position: absolute;
  left: 20px;
  top: 120px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:30;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}


.swap {
  font-size: 150%; /* relative to button size */
  line-height: 4;
}




/* --- Move Flash Button --- */

.left-overlay {
  position: absolute;
  top: 62px;
  left: 18px;
  z-index: 40;
}

/* --- Shared style for round camera utilities --- */
.camera-util {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.45),
    inset 0 1px 2px rgba(255,255,255,0.05);
  cursor: pointer;
  transition: transform 0.15s, background 0.25s;
  opacity: 0;                        /* fade-in start */
  animation: fadeInUtil 0.5s ease forwards;
  animation-delay: 0.35s;            /* wait for camera */
}


.camera-util:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.06);
}

/* Flash specific (emoji icon) */
.camera-util.flash {
  font-size: 32px;      /* big enough for emoji */
  line-height: 1;
}




/* Shopping block */
.shopping-card {
  background: #1e293b;
  padding: 1rem;
  border-radius: 14px;
  margin-top: 0rem;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.8);
  margin-bottom: 5rem;
}

.shopping-card h4 {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 0.8rem;
  margin-top: 0rem;
}

/* Grid */
.shopping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

/* Tile */
.shopping-item {
  background: #1a1a1a;
  border-radius: 10px;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;                 /* link color */
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform .15s;
}

.shopping-item:hover {
  transform: scale(1.04);
}

/* Image: bigger */
.shopping-item img {
  width: 100%;
  max-height: 130px;           /* bigger preview */
  object-fit: cover;
  border-radius: 6px;
  background: #000;
  margin-bottom: 0.4rem;
}

/* Text area */
.shopping-item .details {
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.35;
}

.shopping-item .title {
  font-weight: 600;
  color: #fff;
}

.shopping-item .price {
  margin-top: 0.25rem;
  font-weight: 500;
  color: #0ff;
}

.shopping-item .snippet {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: #ccc;
}



.recall-card {
  background: #ffe5e5;
  border: 1px solid #ff4d4d;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  color: #000000;
font-weight: 600;
}
.recall-card h4 {
  color: #b30000;
  margin-bottom: 0.5rem;

}


.back-btn {
  position: fixed;
  top: 43px;
  left: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.05);
  border: none;
  cursor: pointer;
  transition: transform 0.15s, background 0.25s;
  opacity: 0;                     /* fade-in like flash */
  animation: fadeInUtil 0.5s ease forwards;
  animation-delay: 0.35s;
  z-index: 40;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -1px 1px rgba(0, 0, 0, 0.06),
    0 5px 14px rgba(0, 0, 0, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.back-btn svg {
  stroke: currentColor;
  width: 24px;
  height: 24px;
}

.audio-toggle {
  position: absolute;
  top: 43px;
  right: 23px;
  width: 48px;
  height: 48px;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.05);

  border: none;
  cursor: pointer;
  transition: transform 0.15s, background 0.25s;
  opacity: 0;                     /* fade-in like flash */
  animation: fadeInUtil 0.5s ease forwards;
  animation-delay: 0.35s;
}

.audio-toggle:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.06);
}

/* Full-screen dark overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;          /* ✅ adds breathing room on small screens */
  z-index: 999;
}

/* Centered modal card */
.modal-card {
  background: linear-gradient(145deg, #ffffff, #f9fafb);
  max-width: 360px;         /* ✅ keeps card narrow */
  width: 100%;              /* let it shrink with overlay padding */
  padding: 1.8rem 1.4rem;
  border-radius: 22px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  animation: popIn 0.35s ease;
}


/* Heading */
.modal-card h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #111827;
  text-align: center;
}

/* Paragraph */
.modal-card p {
  font-size: 1rem;
  color: #374151;
  line-height: 1.6;
  margin: 0;
}

/* Primary button */
.modal-card .btn {
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 14px;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.modal-card .btn:hover {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.modal-card .btn:active {
  transform: scale(0.96);
}

/* Optional pop animation */
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


.snap-btn-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  margin-top: 2rem;

}

.snap-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #3730a3, #1e3a8a); /* darker cooler gradient */
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 9999px; /* pill shape */
  padding: 0.8rem 1.6rem;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),   /* deep main shadow */
    inset 0 1px 2px rgba(255, 255, 255, 0.12), /* subtle inner highlight */
    0 0 8px rgba(59, 130, 246, 0.4);  /* cool blue glow */
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.25s;
}

.snap-pill:hover {
  transform: scale(1.07);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.65),
    inset 0 1px 3px rgba(255, 255, 255, 0.15),
    0 0 12px rgba(59, 130, 246, 0.55); /* stronger blue glow */
}

.snap-pill:active {
  transform: scale(0.95);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    inset 0 1px 3px rgba(255, 255, 255, 0.1),
    0 0 6px rgba(59, 130, 246, 0.4);
}

.snap-pill-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}




/* --- Top Bar --- */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem .5rem;
  margin: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;

}

.top-logo {
  object-fit: contain;
}

.top-left {
  height: 40px;
  object-fit: contain;
  left: -19px;
  top: 0px;
  position: relative;
  margin-bottom: 1rem;
}

/* --- Toggle Switch --- */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  left: -50px;
  top: -5px;
}
/* When ON → move knob to the right */
.switch input:checked + .slider-icon {
  transform: translateX(22px);
  background: #fff;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #4b5563;
  transition: 0.4s;
  border-radius: 26px;
}

/* Track */
.slider-icon {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s, background 0.4s;
  color: #111; /* icon color */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}


.slider::before {
  content: "☀️"; /* default = sun */
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 50%;
  transition: 0.4s;
}

/* When checked → moon in knob */
input:checked + .slider::before {
  content: "🌙";
  transform: translateX(24px);
}


input:checked + .slider {
  background-color: #111827;
}

input:checked + .slider::before {
  transform: translateX(26px);
}

body.light,
body.light .app-wrapper,
body.light .app-shell,
body.light .landing.screen,
body.light .camera-screen,
body.light .settings-card,
body.light .result-wrap {
  background: #EDFAFF !important; /* page background in light mode */
  color: #111;
}

body.dark,
body.dark .app-wrapper,
body.dark .app-shell,
body.dark .landing.screen,
body.dark .camera-screen,
body.dark .settings-card,
body.dark .settings-screen,
body.dark .result-wrap {
  background: #000 !important; /* page background in dark mode */
  color: #fff;
}

/* 🌞 Light mode cards → white tiles, dark text */
body.light .facts-card,
body.light .explain-card,
body.light .examples-card,
body.light .shopping-card {
  background: #EDFAFF;
  color: #111111;
}

body.light .facts-card h3,
body.light .facts-card li,
body.light .explain-card h3,
body.light .explain-card p,
body.light .examples-card h4,
body.light .shopping-card h4,
body.light .shopping-card .title,
body.light .shopping-card .price,
body.light .shopping-card .snippet {
  color: #111111;
}

/* 🌙 Dark mode cards → dark tiles, white text */
body.dark .facts-card,
body.dark .explain-card,
body.dark .examples-card,
body.dark .shopping-card {
  background: #1e293b;
  color: #ffffff;
}

body.dark .facts-card h3,
body.dark .facts-card li,
body.dark .explain-card h3,
body.dark .explain-card p,
body.dark .examples-card h4,
body.dark .shopping-card h4,
body.dark .shopping-card .title,
body.dark .shopping-card .price,
body.dark .shopping-card .snippet {
  color: #ffffff;
}

/* 🌞 Light mode shopping-item → light tile + dark text */
body.light .shopping-item {
  background: #EDFAFF;      /* white tile */
  color: #111111;           /* dark text */
}

body.light .shopping-item .title,
body.light .shopping-item .price,
body.light .shopping-item .snippet {
  color: #111111;
}

/* 🌙 Dark mode shopping-item → dark tile + white text */
body.dark .shopping-item {
  background: #1a1a1a;      /* dark tile */
  color: #ffffff;           /* white text */
}

body.dark .shopping-item .title,
body.dark .shopping-item .price,
body.dark .shopping-item .snippet {
  color: #ffffff;
}

body.light .loading-card h1,
body.light .loading-card h2,
body.light .loading-card p {
  color: #111111;
}

body.dark .loading-card h2,
body.dark .loading-card p {
  color: #ffffff;
}




/* --- Ask Bar --- */
.ask-bar {
  position: fixed;
  bottom: 0px; /* 👈 sits right above your bottom-bar */
  left: 0;
  right: 0;
  background: #111; /* dark theme default */
  padding: 0.5rem 0.75rem;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
  z-index: 2000;

  display: flex;
  justify-content: center;
}

.ask-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 600px; /* 👈 keeps it narrow on wide screens */
}

.ask-form input {
  flex: 1;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: none;
  outline: none;
  font-size: 1rem;
  background: #f9fafb;
  color: #111;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.ask-form button {
  padding: 0.65rem 1.2rem;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.25s;
}

.ask-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(59,130,246,0.35);
}

.ask-form button:active {
  transform: scale(0.96);
}

/* Special tile for Snap world */
.snap-world-tile {
  grid-column: span 2;         /* make it full width */
  background: linear-gradient(135deg, #2563eb, #1e40af); /* nice blue gradient */
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.snap-world-tile h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.snap-world-tile p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: #e0e7ff;
}
.examples-wrapper {
  position: relative; /* anchor for arrows */
  margin: 0;
  padding: 0;
  height: auto; /* let content decide */
}

.examples-grid {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 0.25rem 0;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

.examples-grid a {
  flex: 0 0 auto;     /* don’t shrink */
  width: 80px;
  height: 140px;      /* taller images */
  display: block;
}

.examples-grid img {
  width: 100%;        /* fill parent */
  height: 100%;       /* fill parent */
  border-radius: 8px;
  object-fit: cover;  /* crop if needed */
}

/* Example card container */
.examples-card {
  width: 100%;
  max-width: none;
  background: #1e293b;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.8);
}

.examples-card h4 {
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 0.8rem;
}

/* Shared scroll button style */
.scroll-btn {
  position: absolute;
  top: 50%; /* vertical center */
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 10;
}

.scroll-btn.left { left: 0.25rem; }
.scroll-btn.right { right: 0.25rem; }

.scroll-btn:hover {
  background: rgba(0,0,0,0.8);
}


/* Fade-in animation */
@keyframes fadeInUtil {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  0%   { opacity: 1; }
  70%  { opacity: 0.4; }
  100% { opacity: 0; }
}

.crop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  overflow: hidden;
  display: block;
  touch-action: none;       /* 👈 important for iOS */
}

/* Captured image */
.crop-img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

/* Selection box */
.crop-selection {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  background: rgba(0,0,0,0.001); /* 👈 invisible but makes it touchable */
}

/* Handles */
.crop-selection .handle {
  position: absolute;
  width: 44px;
  height: 44px;
  touch-action: none !important;
  pointer-events: auto !important;
}
.handle.nw { left: -2px; top: -2px; cursor: nwse-resize; }
.handle.ne { right: -2px; top: -2px; cursor: nesw-resize; }
.handle.sw { left: -2px; bottom: -2px; cursor: nesw-resize; }
.handle.se { right: -2px; bottom: -2px; cursor: nwse-resize; }

.crop-selection .handle::before,
.crop-selection .handle::after {
  content: "";
  position: absolute;
  border-radius: 6px;      /* ✅ rounded ends */
}

/* --- Corner colors (Google-style mapping) --- */
.handle.nw::before,
.handle.nw::after { background: #f9ab00; } /* yellow */

.handle.ne::before,
.handle.ne::after { background: #d93025; } /* red */

.handle.sw::before,
.handle.sw::after { background: #1a73e8; } /* blue */

.handle.se::before,
.handle.se::after { background: #188038; } /* green */


/* --- L arms (make them thicker & longer) --- */
.handle.nw::before { left: 0; top: 0; width: 8px; height: 100%; }
.handle.nw::after  { left: 0; top: 0; width: 100%; height: 8px; }

.handle.ne::before { right: 0; top: 0; width: 8px; height: 100%; }
.handle.ne::after  { right: 0; top: 0; width: 100%; height: 8px; }

.handle.sw::before { left: 0; bottom: 0; width: 8px; height: 100%; }
.handle.sw::after  { left: 0; bottom: 0; width: 100%; height: 8px; }

.handle.se::before { right: 0; bottom: 0; width: 8px; height: 100%; }
.handle.se::after  { right: 0; bottom: 0; width: 100%; height: 8px; }



/* Inner mover */
.crop-mover {
  position: absolute;
  inset: 12px;
  cursor: move;
  touch-action: none !important;
  pointer-events: auto !important;
  background: rgba(0,0,0,0.001); /* 👈 invisible touch target */
}

/* Action buttons */
.crop-actions {
  position: fixed;
  bottom: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: .75rem;
  z-index: 10000;
  pointer-events: auto;
}
.crop-btn {
  border: 0;
  border-radius: 14px;
  padding: .8rem 1.2rem;
  font-weight: 800;
  cursor: pointer;
}
.crop-send { background: linear-gradient(135deg,#6366f1,#22c55e); color:#fff; }
.crop-cancel { background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25); }

.followup-card {
  max-height: 150px; /* Adjust this value as needed */
  overflow-y: auto;
  margin: .3rem 0;
  padding: 0; /* Remove padding from container */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%; /* Match other cards */
}

.followup-card h4 {
  margin: 0;
  padding: 1rem; /* Move padding to header */
  font-size: 1.1rem;
  color: #333;
  position: sticky;
  top: 0;
  background: #fff; /* Solid background instead of rgba */
  border-bottom: 1px solid #eee; /* Visual separator */
  z-index: 1;
}

.followup-card ul {
  list-style: none;
  padding: 1rem; /* Padding on the scrollable content */
  padding-bottom: 4rem; /* Extra space at bottom */
  margin: 0;
}

.followup-card li {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
  line-height: 1.5;
}

.followup-card li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* =============================================================
   ANIMAL TILES - PETS & ANIMALS SECTION - OTHER CAPTURES IMAGES
   ============================================================= */

/* Full-width captured image */
.captured-tile {
  width: 100%;
  min-height: 200px;
  max-height: 400px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  background: #f5f5f5;
}

.captured-tile img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

.captured-tile:hover img {
  transform: scale(1.05);
}

/* Remove grid - all tiles are full width */
.animal-info-grid {
  display: block;
  width: 100%;
}

/* ========================================
   SHARED ANIMAL TILE STYLES
   ======================================== */

.info-tile.breed-tile,
.info-tile.region-tile,
.info-tile.nutrition-tile {
  width: 100%;
  margin-bottom: 0.75rem;
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 
              0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================
   BREED TILE
   ======================================== */

.info-tile.breed-tile {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  min-height: 100px;
}

.info-tile.breed-tile .tile-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.info-tile.breed-tile .tile-value {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
  z-index: 2;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-tile.breed-tile .tile-icon {
  font-size: 3.5rem;
  opacity: 0.15;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
}

/* ========================================
   REGION TILE
   ======================================== */

.info-tile.region-tile {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  padding: 1.25rem 1.25rem 1.5rem 1.25rem; /* Equal left/right, extra bottom */
  min-height: auto;
  overflow: visible; /* Allow it to grow */
  height: auto; /* Explicitly auto height */
}

.info-tile.region-tile .tile-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.info-tile.region-tile .region-list {
  list-style: none;
  padding: 0 0 0.5rem 0; /* Add bottom padding to list itself */
  margin: 0;
  width: calc(100% - 0rem); /* Ensure it doesn't overflow */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 2;
  position: relative;
}

.info-tile.region-tile .region-list li {
  background: rgba(255, 255, 255, 0.95);
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #1f2937;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* ========================================
   NUTRITION TILE
   ======================================== */

.info-tile.nutrition-tile {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  min-height: 140px;
}

.info-tile.nutrition-tile .tile-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nutrition-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  position: relative;
  z-index: 2;
}

.nutrition-tag {
  background: rgba(255, 255, 255, 0.95);
  padding: 0.6rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #1f2937;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.info-tile.nutrition-tile .tile-icon {
  font-size: 3.5rem;
  opacity: 0.15;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* ========================================
   CAR/VEHICLE TILES SECTION
   ======================================== */

/* Make/Model combined - full width focal point */
.info-tile.make-model-combined {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 16px;
  padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  min-height: 90px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-tile.make-model-combined .tile-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  z-index: 3;
}

.info-tile.make-model-combined .tile-value {
  font-size: clamp(1.2rem, 4.5vw, 1.7rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  z-index: 3;
  position: relative;
  line-height: 1.3;
  max-width: 100%;
  word-wrap: break-word;
}

.info-tile.make-model-combined .tile-icon {
  font-size: 4.5rem;
  opacity: 0.15;
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  z-index: 1;
}

/* 2-column grid for year/speed */
.info-tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.info-tiles-grid .info-tile {
  min-height: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  border-radius: 16px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Year tile */
.info-tile.year-tile {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: #fff;
}

/* Speed tile */
.info-tile.speed-tile {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
}

/* Icons for year/speed tiles */
.info-tiles-grid .info-tile .tile-icon {
  font-size: 4.5rem;
  opacity: 0.15;
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  z-index: 1;
}

/* Specs grid - 2 columns */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Spec tiles */
.spec-tile {
  border-radius: 16px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.spec-tile.engine {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
}

.spec-tile.power {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
}

.spec-tile.accel {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  color: #fff;
}

.spec-tile.drivetrain {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  color: #fff;
}

.spec-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 2;
  position: relative;
}

.spec-value {
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 2;
  position: relative;
  max-width: 70%;
  word-wrap: break-word;
}

/* Spec tile icons */
.spec-tile .tile-icon {
  font-size: 4.5rem;
  opacity: 0.15;
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  z-index: 1;
}

/* Tile labels and values for year/speed */
.info-tile .tile-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 2;
  position: relative;
}

.info-tile .tile-value {
  font-size: clamp(1rem, 4vw, 1.3rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 2;
  position: relative;
  max-width: 70%;
  word-wrap: break-word;
}

/* Description section */
.description-section {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

.description-section p {
  color: #e2e8f0;
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 0;
}

/* ========================================
   FOOD IDENTIFICATION TILES SECTION
   ======================================== */

/* Safety/Edibility tile */
.info-tile.safety-tile {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.info-tile.safety-tile .tile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.info-tile.safety-tile .tile-header h4 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-tile.safety-tile .tile-content p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #fff;
}

.info-tile.safety-tile .warning-text {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.6rem;
  border-radius: 8px;
  margin-top: 0.5rem;
  font-weight: 600;
}

/* Nutrition tile */
.info-tile.nutrition-info-tile {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.info-tile.nutrition-info-tile .tile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.info-tile.nutrition-info-tile .tile-header h4 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-tile.nutrition-info-tile .tile-content p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nutrient-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.nutrient-grid p {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.5rem;
  border-radius: 8px;
  margin: 0;
  font-size: 0.85rem;
}

/* Classification tile */
.info-tile.classification-tile {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.info-tile.classification-tile .tile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.info-tile.classification-tile .tile-header h4 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-tile.classification-tile .tile-content p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Culinary uses tile */
.info-tile.culinary-tile {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.info-tile.culinary-tile .tile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.info-tile.culinary-tile .tile-header h4 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.culinary-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}

.culinary-list li {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.6rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.culinary-list li:last-child {
  margin-bottom: 0;
}

/* Health benefits tile */
.info-tile.benefits-tile {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.info-tile.benefits-tile .tile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.info-tile.benefits-tile .tile-header h4 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}

.benefits-list li {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.6rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.benefits-list li:last-child {
  margin-bottom: 0;
}

/* Facts tile - reuse existing but ensure food context */
.info-tile.food-facts-tile {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.info-tile.food-facts-tile .tile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.info-tile.food-facts-tile .tile-header h4 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.facts-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}

.facts-list li {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.6rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.facts-list li:last-child {
  margin-bottom: 0;
}

/* Q&A tile */
.info-tile.qa-tile {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  color: #fff;
}

.info-tile.qa-tile .tile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.info-tile.qa-tile .tile-header h4 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.qa-block {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.qa-block:last-child {
  margin-bottom: 0;
}

.qa-block .question {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.qa-block .answer {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}



}