/* -------------------------
   0) Design Tokens
   ------------------------- */
:root {
  /* Background & glass */
  --bg: radial-gradient(1200px 800px at 20% -10%, #2a1a80 0%, #0a0b18 40%, #03040a 100%);
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-stroke: rgba(255, 255, 255, 0.22);
  --glass-stroke-subtle: rgba(255, 255, 255, 0.13);
  --glass-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  --blur: 24px;
  --saturate: 140%;

  /* Brand & acccents (kept from original) */
  --accent: #5FAEE6;
  --accent-hover: #59A4D8;
  --accent-contrast: #0E1116;

  /* Text */
  --text: #ffffff;
  --text-dim: rgba(255,255,255,0.8);
  --text-subtle: rgba(255,255,255,0.65);

  /* Radii & motion */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
  --transition: 220ms cubic-bezier(.2,.8,.2,1);

  /* Card elevation */
  --elev-1: 0 10px 24px rgba(0,0,0,.35);
  --elev-2: 0 18px 48px rgba(0,0,0,.45);
}

/* Respect reduced transparency / motion */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: rgba(20, 22, 28, 0.85);
    --glass-bg-strong: rgba(20, 22, 28, 0.95);
    --blur: 0px;
    --saturate: 110%;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms linear; }
}





/* ============================= */
/* Global Layout Reset & Base */
/* ============================= */

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  /* background-color: /*#f9fbfd;  /*chosen: #f9fbfd; slightly darker: #f8fafd;  before: #f3f6fa; */
  background: radial-gradient(circle, #0e006b 0%, #00010e 100%);
  font-family: "Avenir", Helvetica, sans-serif;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

/* Flex wrapper for footer behavior */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}







/* ============================= */
/* Header and Footer full-width with symmetrical padding */
/* ============================= */

.header-area-white,
.footer-area-white {
  width: 100%;
  background-color:  var(--glass-bg);
  /* background-color: transparent;     #ffffff;  transparent*/
  padding: 0.75rem 4.0vw; /* 18vw; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: 1px solid var(--glass-stroke-subtle);
  
  /* Liquid Glass: blur + saturate */
  backdrop-filter: saturate(var(--saturate)) blur(var(--blur));
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(var(--blur));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), var(--elev-1);
}



.header-left  {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: right;
}

.header-right {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: left;
}



.header-center {
  width: 60%;
  display: flex;
  justify-content: center;
  gap: 0.8rem; /* 1rem; */
}

nav span {
  font-size: 0.95rem;
  color: #161414;  /* white */
  font-weight: 500;
}

nav span a {
  letter-spacing: .01em;
  color: var(--text-dim);
   padding: .45rem .85rem; 
  border-radius: 999px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

nav span a:hover {
  background: rgba(255,255,255,0.11);
  color: var(--text);
  transform: translateY(-1px);
}

.wunder-logo-em {
  height: 14px;
  width: auto;
  object-fit: contain;
  margin-top: 0.4rem;
}

/* User Circle */
.user-circle {
  width: 29px;
  height: 29px;
  background-color: #7b7b7b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: saturate(var(--saturate)) blur(calc(var(--blur) * .6));
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(calc(var(--blur) * .6));
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.25), 0 8px 16px rgba(0,0,0,.35);
}



.user-initials {
  font-size:  0.85rem;
  font-weight: 500;
  color: white;
}








/* Footer */
.footer {
  width: 100%;
}

.footer-area-white {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: #161414;
}

.connect-image {
  height: 20px;
  object-fit: contain;
}





/* ============================= */
/* Typography */
/* ============================= */


h1 {
  font-size: 2.4rem;
  color: white; /* #464F5C; */
  /*background: linear-gradient(to top, #24262b, #b2d2f7); */
  /*-webkit-background-clip: text;*/
  /*-webkit-text-fill-color: transparent;*/
  margin-bottom: 0.25rem;
}

.h1explore {
  font-size: 1.7rem;
  font-weight: bold;
  color: white; /* #464F5C; */
  /*background: linear-gradient(to top, #24262b, #b2d2f7); */
  /*-webkit-background-clip: text;*/
  /*-webkit-text-fill-color: transparent;*/
  padding: 2rem 0 0 0;
  /*margin-bottom: 0.25rem; */
}

h2 {
  font-size: 1.2rem;
  color: #464F5C;
  margin: 0;
}

.subline {
  font-size: 1.5rem;
  color: white; /* #464F5C */
  margin: 0 0 3rem 0;
}

.copytext {
  font-size: 1.1rem;
  color: white; /* #464F5C */
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.copytextexplore {
  font-size: 1.1rem;
  color: white; /* #464F5C */
  /* margin: 0 0 1rem 0; */
}


h3 {
  font-size: 1rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-weight: normal;
}

p {
  font-size: 1.1rem; /* 0.95rem; */
  line-height: 1.5;
  margin-bottom: 1rem;
}

a {
  color: #000;
  text-decoration: none;
}

.image-title {
  font-size: 1.5rem;
  color: white; /* #464F5C */
  margin: 4rem 0 1rem 0;
  text-align: center;
}



/* ============================= */
/* Input Fields */
/* ============================= */

/* Input and Button */
input {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.1rem;    /* before: 1.5rem;  */
  border: 1px solid #8b8b8b;
  border-radius: 10px;
  font-size: 1.1rem; /* 0.95rem; */
  color: #404040;  /* #999999; */
  font-family: "Avenir", Helvetica, sans-serif;
  /* font-style: italic; */
}

textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.1rem;
  border: 1px solid #8b8b8b;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #404040;
  font-family: "Avenir", Helvetica, sans-serif;
  resize: vertical;
  max-height: 10rem; /* optional max height */
  overflow-y: auto;
}



/* ============================= */
/* Buttons */
/* ============================= */


/* Button NEW */
.button {
  display: inline-block;           /* NEW: make anchor behave like a button box */
  background-color: #ff6500;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: normal !important;
  transition: background-color 0.2s ease;
  text-decoration: none;           /* ensure no underline on <a> */
  line-height: 1;                  /* avoid extra inline spacing issues */
  margin-top: 0.75rem;             /* NEW: spacing from text above */
}




.button:hover {
  background-color: #ff4500;
}

.button:active {
  background-color: grey;
}

.button a {
  background-color: #ff6500;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;  /* 0.75rem 1.5rem; */
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color 0.2s ease;
}

.button a:hover {
  background-color: #ff4500;
}


/* .button:hover { background: var(--glass-bg-strong); transform: translateY(-1px); } */
/* .button:active { transform: translateY(0); box-shadow: inset 0 2px 8px rgba(0,0,0,.35); } */




.button-blue {
  background-color: #5FAEE6;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem; 
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem; /* 1.0rem */
  transition: background-color 0.2s ease;
}

.button-blue:hover {
  background-color: #59A4D8;
}

.button-blue:active {
  background-color: #FF4500;
}



/* ============================= */
/* Page: index.html */
/* ============================= */


#intro-area {

    width: 94%;
    max-width: 1300px; /* optional: keeps it from stretching too wide on big screens */
    margin: 0 auto;    /* centers it horizontally */
    padding: 1rem 1rem 3rem 1rem;
    /*border-bottom: 2px solid #ddd; */
    background: transparent; /* #f9f9f9; */
    box-sizing: border-box; /* ensures padding is included in width */

}

/* Hero wrapper: invisible 2-col grid (60% / 40%) */
#hero {
  width: 94%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem 1rem;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 5.0rem;   /* 1.5rem; */
  align-items: center;   /* vertical alignment */
  background: transparent;
  box-sizing: border-box;
}

/* Make intro-area behave as a normal block when nested in the hero grid */
#hero #intro-area {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0; /* your internal text spacing already handles vertical rhythm */
}

/* Right column image styling */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Glass */ 
 .hero-img { 
  width: 100%;
  height: auto;
  max-height: 530px;
  object-fit: contain;
  border-radius: var(--r-md);  /*10px; */
  background: var(--glass-bg);
  border: 0px solid var(--glass-stroke-subtle);
  backdrop-filter: saturate(var(--saturate)) blur(calc(var(--blur) * .4));
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(calc(var(--blur) * .4));
  box-shadow: var(--elev-1); 
  padding: 1rem;
}








/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
  #hero { grid-template-columns: 1fr; }
  .hero-right { order: 2; }  /* text first, image second */
}








/* ============================= */
/* Page: Explore html */
/* ============================= */


/* Row 1: Search area */

#search-area {
 /* new */
  display: grid;
  grid-template-columns: 48% 52%;  
  gap: 1.5rem;
  align-items: start;
  /* from before */
    width: 94%;
    max-width: 1300px; /* optional: keeps it from stretching too wide on big screens */
    margin: 0 auto;    /* centers it horizontally */
    margin-top: 1.5rem; 
    padding: 0rem 1rem 1.3rem 1rem;   /* 0rem no padding at the bottom;  */
    border: 2px solid rgba(0, 1, 14, 0.9);    /* border for whole search area on top   1px solid #ddd;  */
    
    border-radius: var(--r-md);  /*10px; */
    
   background: rgba(14, 0, 107, 0.00);  /* transparent;  */
    /* background: var(--glass-bg); */
    box-sizing: border-box; /* ensures padding is included in width */
    
  
  backdrop-filter: saturate(var(--saturate)) blur(calc(var(--blur) * .4));
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(calc(var(--blur) * .4));
  box-shadow: var(--elev-1); 

}



/* Left & Right columns */
.search-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}


.search-right { 
    min-height: 100px; /* 200px;  would create a padding/margin underneath */
    margin: 1.3rem 0 0 0;   /* 1.2. manage distance from top */
    width: 97%;
    border: 0px solid white;  /* for distance debugging */
}


/* Keep suggestions aligned to the search box */
.search-left .search-container { width: 100%; }
.search-left #search-box { width: 100%; }
.search-left #suggestion-list { width: 100%; }






/* Tabs Area right*/

/* 
elaborating best background colors
Marocco blue     rgba(14, 0, 107, 0.5);    #0e006b
Midnight blue     rgba(0, 1, 14, 0.3) ;         #00010e
*/

.tabs { 
  background: rgba(14, 0, 107, 0.3); 
  border: 0px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 0.5rem;  
  color: white;
}

.tablist {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
.tab {
  background: transparent;
  color: white;
  border: 1px solid transparent;
  padding: 0.75rem 0.75rem;   /* 0.75 = same box height as search bar.    0.4rem 0.75rem;*/
  border-radius: 8px;
  font-size: 1.0rem;   /* 0.95rem; */
  cursor: pointer;
}

.tab:hover { background: rgba(255,255,255,0.08); }
.tab-active {
  background: #5FAEE6;   /* #ff6500;  orange*/
  color: white;
  border-color: #5FAEE6;  /* #ff6500;  orange*/
}
.tab-panels { display: block; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }




/* Cards - NEW with variable width*/

/* Replace your existing .card-grid block */
.card-grid {
  display: flex;          /* was: grid */
  flex-wrap: wrap;        /* allow wrapping to next lines */
  gap: 0.75rem;           /* keep your spacing */
}

/* Tweak cards so they size by content (not stretch) */
.card {
  /* existing visual styles stay as-is */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 0.70rem;
  color: white;

  /* new behavior */
  flex: 0 0 auto;         /* don't grow/shrink to fill, keep intrinsic width */
  max-width: 28rem;       /* cap the width so long text wraps nicely */
  /* optional: set a soft minimum if you want */
  /* min-width: 10rem; */
}


/* OLD - Expending the card */
/* Show only <h3> by default; reveal .card-hover on hover (and keyboard focus) */

/* hide details by default */
/*
.card .card-hover {
  display: none;
  margin-top: 0.5rem;
  opacity: 0;                 
  transition: opacity 150ms ease-in-out;
}
*/

/* reveal on hover and keyboard focus for accessibility */
/*
.card:hover .card-hover,
.card:focus-within .card-hover {
  display: block;
  opacity: 1;
}
*/

/* NEW - Working like a classical mouse-over */

/* Make each card a positioning context */

.card {
  position: relative;              /* NEW: so the overlay positions to this card */
  flex: 0 0 auto;                  /* keep your flexible sizing behavior from step (1) */
  max-width: 28rem;
  background: rgba(255,255,255,0.06); 
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 0.75rem;
  color: white;
}

.card h3 { margin: 0 0 0.25rem 0; color: white; }
.card p { margin: 0; color: white; font-size: 0.95rem; opacity: 0.95; }



/* Card states */

/* Card Hover state (temporary hover effect) */
.card:hover {
  background: rgba(255, 255, 255, 0.12); /* slightly brighter */
  cursor: pointer;
}

/* Active state (persistent after click, via JS) */
.card.active {
  transform: scale(0.98);
  background: #5FAEE6;  /* brand blue */
}








.card-label {
  font-size: 1rem;
  padding: 0.05rem;
  font-weight: normal; /* override the default bold */
}

/* Tooltip/overlay: hidden by default */

.card .card-hover {
  position: absolute;
  left: 50%;
  
  top: 100%;                    /* was: top: 100%  → now above the card */
  /* bottom: 100%;          */          /* was: top: 100%  → now above the card */
  
  transform: translate(50%, 0.5rem); /* nudge upward */
  /* transform: translate(-50%, -0.5rem); */ /* nudge upward */
  
  z-index: 20;

  display: block;                  /* keep it out of layout flow; visibility handles show/hide */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  /* Styling */
  background: rgba(0, 1, 14, 0.90);   /* 0, 1, 14 *. rgba(20, 20, 20, 0.95); */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  max-width: min(32rem, 90vw);
  width: max-content;              /* shrink-to-fit by content */
  white-space: normal;             /* wrap text */
  text-wrap: pretty;

  /* Animation */
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
}




/* Mobile UI Tweak : Keep overlay inside viewport on very narrow screens */
@media (max-width: 480px) {
  .card .card-hover {
    left: 0;
    transform: translate(0, -0.5rem);  /* was: translate(0, 0.5rem) */
    max-width: calc(100vw - 2rem);
  }
}



/* Keyframe Trigger Rules */

@keyframes tooltip-show-hide {
  0%   { visibility: visible; opacity: 0;   transform: translate(-50%, -0.5rem); }
  10%  { visibility: visible; opacity: 1;   transform: translate(-50%, -0.25rem); }
  80%  { visibility: visible; opacity: 1;   transform: translate(-50%, -0.25rem); }
  100% { visibility: hidden;  opacity: 0;   transform: translate(-50%, -0.5rem); }
}

/* Trigger the 3s show→hold→hide when card is hovered or focused */
.card:hover .card-hover,
.card:focus-within .card-hover {
  animation: tooltip-show-hide 3s ease forwards;
  pointer-events: none; /* keeps it from "trapping" the hover */
}





/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .card .card-hover {
    transition: none;
  }
}




/* Responsive */
@media (max-width: 900px) {
  #search-area { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
}



/* Search Filter :: 3 Radio Button with Text */

/* Search Filter */

.uc-type-filter {
  color: white;                 /* so you can remove inline color=white in HTML if you want */
  overflow-x: auto;             /* allow horizontal scroll if the space is extremely tight */
}

.uc-type-filter__set {
  /* make it a single-row flex container */
  display: flex;
  align-items: center;
  flex-wrap: nowrap;            /* FORCE one line */
  gap: 1.25rem;                    /* space between legend and each option 0.75rem;   */
  white-space: nowrap;          /* keep all on one line */

  /* adaptive sizing: do NOT force full width */
  width: auto;                  /* CHANGED from 100% */
  max-width: 100%;

  background: rgba(95, 174, 230, 1.0);   /* keep your mid-blue */
  border: 0px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 0.35rem 0.5rem;      /* slightly tighter padding for small space */
  
  margin: 0.5rem 0 0.5rem 0rem;   
}

/* Visually hide the real legend (keep semantics) */
.uc-type-filter__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Search Filter Box */

.uc-type-filter__set {
  width: 98%; /* 100%; */
  /* background of Search Filter Box */
  /* brombeer very dark: 36,0,66 - brombeer dark1: 42,0,71brombeer dark: 59,2,98 - bromber mid: 84,22,128 */
  /* mid blue  95, 174, 230,0.8  #5FAEE6;*/
  background: rgba(82, 22, 128,0.85);    
  border: 0px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 0.5rem 0.75rem; /* 0.5rem 0.75rem; */
  
  /* Managing Spacing for veritcal Alignment and Distance to Box underneath */
  margin: 0.75rem 0 2.5rem 0.5rem;   /* lef 0.5  = fitting vertical line with Tabs & Cards */
}

.uc-type-filter__legend {
  font-size: 1.0rem;
  color: white;
  padding: 0 0.25rem;
}




/* Base size and alignment */

.uc-type-filter__option {
  display: flex;
  align-items: center;  /* ensures vertical centering with text */
  gap: 0.5rem;
}


/* Radio Button Special Styling */


.uc-type-filter__option input[type="radio"] {
  appearance: none; /* remove default browser rendering */
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid white; /* unselected border color   2px #5FAEE6;   */
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
  margin-bottom: 8px;
}

/* The "dot" */
.uc-type-filter__option input[type="radio"]::before {
  content: "";
  width: 1.25rem; /* 0.65rem; */
  height: 1.25rem;  /* 0.65rem; */
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s ease-in-out;
  background-color: white; /* selected color */
}

/* Show white dot when checked */
.uc-type-filter__option input[type="radio"]:checked::before {
  transform: scale(1);
}




/* === Search Filter: hover tooltips for inline labels === */

.uc-type-filter__option {
  position: relative;      /* anchor the tooltip to each label */
}

/* Reuse .card-hover styles but scope them to the filter */
.uc-type-filter__option .card-hover {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0.5rem);
  z-index: 30;

  /* Hidden by default; do not affect layout */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  /* Visuals consistent with your card tooltips */
  background: rgba(0, 1, 14, 0.90);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 0.5rem 0.75rem; 
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  max-width: min(28rem, 90vw);
  width: max-content;
  white-space: normal;

  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
}

/* Show tooltip when hovering the label text (or focusing inside for keyboard users) */
.uc-type-filter__option .uc-type-filter__text:hover + .card-hover,
.uc-type-filter__option:focus-within .card-hover {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0); /* subtle lift-in */
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Keep the entire filter on one line (already enforced, but this helps) */
.uc-type-filter__set {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Optional: prevent the label text from wrapping across lines */
.uc-type-filter__text {
  white-space: nowrap;
  cursor: help;            /* hint that it has a tooltip */
}







/* Search Container */

.search-container {
  position: relative;      /* allows suggestions to position relative to search box */
  width: 100%;
  max-width: 520px;    /* <-- adjust this number to your liking (e.g., 420px 360/480px) */
  border: none;          /* 20px solid red for debug; none*/
}




/* Search Box */

#search-box {
  width: 100%;              /* was 49% */
  /* remove the broken line: max-width; 30% */
  padding: 0.75rem;
  margin-bottom: 0;
  background-color: #5FAEE6 !important;  /*   #5FAEE6   #ff6500 */
  border: 0;
  color: white;
}


#search-box:focus,
#search-box:active {
    background-color: #5FAEE6 !important; /* force same color when focused */
    outline: none; /* remove blue browser outline */
    color: white;  /* keep white text */
}

/* Force background for Chrome autofill */
#search-box:-webkit-autofill,
#search-box:-webkit-autofill:focus,
#search-box:-webkit-autofill:active {
    box-shadow: 0 0 0px 1000px #5FAEE6 inset !important; /* repaint background */
    -webkit-box-shadow: 0 0 0px 1000px #5FAEE6 inset !important;
    -webkit-text-fill-color: white !important; /* keep text white */
    caret-color: white; /* keep cursor visible */
}


#search-box::placeholder {
    color: rgba(255, 255, 255, 0.7); /* lighter white for placeholder text */
}





/* New : Styling for Search magnifying glass */

/* Style for search input with icon */

.search-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 0.75rem; /* extra right padding for icon */
  background-color: #5FAEE6 !important;
  border: 0;
  border-radius: 10px;
  color: white;
  font-size: 1.1rem;
  font-family: "Avenir", Helvetica, sans-serif;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Magnifying glass icon inside input */
.search-icon {
  position: absolute;
  right: 0.75rem;
  top: 55%;
  transform: translateY(-50%);
  pointer-events: none; /* don’t block typing */
  display: flex;
  align-items: center;
}

.search-icon .icon {
  width: 1.3rem;   /* adjust size */
  height: 1.3rem;
  stroke: white; /* ensure white stroke */
}









#suggestion-list {
    position: absolute;
    top: 100%; /* directly under search box */
    left: 0;
    width: 100%; /* slightly smaller than search box  49%*/
    background: #d9eaf7;   /* #cfe6f8; #C1E0F9;  #f5f5f5;  light grey background    var(--glass-bg-strong);   */
    /* color: var(--text); */
    border: 1px solid var(--glass-stroke); /* #ccc; */
    border-top: none; /* visually connected to search box */
    border-radius: 0 0 var(--r-sm) var(--r-sm);  /* 0 0 6px 6px; rounded bottom corners */
    max-height: 620px;   /* 540 px = 15 lines × ~36px line-height; adjust to your actual line-height  60vh;*/
    overflow-y: auto;  /* keep scrollbar so all results remain accessible */
    list-style: none;
    padding: 0; /* no extra padding inside UL */
    margin: 0; /* remove top margin */
    display: none; /* hidden until there are matches */
    z-index: 1000; /* above other content */
    box-shadow: var(--elev-2); /* 0 2px 4px rgba(0,0,0,0.1);  subtle drop shadow */
   backdrop-filter: saturate(var(--saturate)) blur(calc(var(--blur) * .6));
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(calc(var(--blur) * .6));
}




/* Scrollbar Color */

/* Chrome, Edge, Safari */
#suggestion-list::-webkit-scrollbar {
  width: 8px;                 /* scrollbar width */
}

#suggestion-list::-webkit-scrollbar-track {
  background: white;        /* track color */
}

#suggestion-list::-webkit-scrollbar-thumb {
  background-color: #5FAEE6;      /* thumb (draggable part) color */
  border-radius: 4px;
}

/* Firefox */
#suggestion-list {
  scrollbar-width: thin;             /* "auto" | "thin" | "none" */
  scrollbar-color: #5FAEE6 white;      /* thumb color | track color */
}

/* Scrollbar tint */
/*
#suggestion-list::-webkit-scrollbar { width: 8px; }
#suggestion-list::-webkit-scrollbar-track { background: transparent; }
#suggestion-list::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
#suggestion-list { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
*/

#suggestion-list li { padding: .6rem .8rem; cursor: pointer; }

#suggestion-list li:hover
 { 
        /*background: rgba(255,255,255,0.7); */
        background:  #cfe6f8;  /* #C1E0F9; */
}

#suggestion-list li.active { 
}

#suggestion-list strong { color: var(--accent); }



#suggestion-list li {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}




























/* Row 2: Results area */

#results-area {
    width: 94%;
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* equal width columns */
    gap:0rem; /* 1rem */
    padding: 0 1rem 0 1rem; /* 1rem */
    box-sizing: border-box;
    align-items: stretch; /* stretch items in the same row */
}

/* Make the bordered .result-group stretch inside each column */
#results-area .result-group {
    flex: 1;              /* fill remaining column space without overshoot */
    display: flex;
    flex-direction: column;
    padding: 2.0rem 3.0rem;  /* padding inside the 2 boxes */
    
}

#results-area > .result-column {
    display: flex;
    flex-direction: column;
}



/* Responsive stacking for smaller screens */
@media (max-width: 768px) {
    #results-area {
        grid-template-columns: 1fr; /* Stack columns vertically */
    }
}

#results-area h1 {
  margin-top: 0;
  margin-bottom: 0;
}

.result-column {
    border: 0px solid #ccc;
    padding: 0rem; /* 1rem; */
    background: transparent; 
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* soft shadow */
    color: white;
    font-size: 1.1rem;   /* font size in the box */
}

.result-field {
    margin-bottom: 0rem; /* 1rem;   = Margin below "Use Case Details" and "Emotion Data" */ 
}

/* special look for the Short Name row */
.uc-shortname,
.uc-fullname  {
  /* font-weight: 700; */
  font-size: 1.4rem; /* ~18px 1.125rem */
  color: #5FAEE6;      /* red accent, tweak as needed */
  line-height: 1.1; /* 1.2;   unitless is best; scales with font-size */
  padding: 0 0 1.0rem 0;
}



#usecase-question {
    margin: 0.5rem 0 0;
}


.
.result-field strong {
    display: inline-block;
    min-width: 160px;
    color: white; /* #333; */
}

#description-column p {
    margin: 0.3rem 0 0;
}




/* New bordered group  - Borders around Results*/

/* Styling : Left Resul tBox */ 

.result-group {
    border: 1px solid rgba(0, 1, 14, 0.9);  /* 1px solid      255, 255, 255, 0.6)#ccc; */
    border-radius: 10px;
    padding: 1.5rem; /* 1.5rem; */
    margin-top: 0.5rem; /* 0.5rem; */
    /* background-color: #fafafa; // Light background for contrast */
    background: rgba(14, 0, 107, 0.3);  /* transparent;  */
}


/* Optional: style fields inside group */
.result-group .result-field {
    margin-bottom: 0.8rem;
}

.result-group .result-field:last-child {
    margin-bottom: 0; /* Remove bottom gap for last item */
}



#cta-styling {
    text-align: center; /* center text horizontally */
    color: white;       /* white text */
    display: flex;
    flex-direction: column;
    align-items: center; /* center child elements horizontally */
    padding: 0rem 0rem 10rem 0rem;
}


#emotion-column {
    background: transparent; /* #f9f9f9; */
}



.minikaleidoscope {
    min-height: 300px;
    width: 100%;
    margin: 0 auto;
    background-color: transparent;
    border: 1px solid transparent;   /* border of the minikaleidoscope area */
    border-radius: 6px;
    margin-bottom: 2rem;

    display: flex;
    justify-content: flex-start; /* align horizontally to left */
    align-items: center;         /* keep vertical centering */
    position: relative;
    padding-left: 1rem;          /* small left padding so content isn't touching edge */
}


.minikaleidoscope-wrapper {
   transition: transform 0.1s ease;
}


.kaleidoscope-center {
    border-radius: 50%;
    border: 1px solid white;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}



.satellite {
    border-radius: 50%;
    border: 1px solid white;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: clamp(0.7rem, 1vw, 1rem);
    padding: 0.3rem;
    color: black;
    transition: background-color 0.3s ease;
}


/* Active state */
.satellite-active {
    background-color: #ff6500 !important; /* orange */
    color: white;
    border-color: #ff6500;
}




/* Emotion Profiles : Data Requirements */

#emotion-profiles {
    margin-top: 0rem; /* 0.5rem; */
    color: white;
}

#emotion-profiles ul {
    padding-left: 1.2rem; /* indent bullets */
    margin: 0rem 0 0;  /* 0.5rem 0 0; */
}

#emotion-profiles li {
    margin-bottom: 0.3rem;
}






/* Row 3: action area */


#action-area {
 /* new */
  display: grid;
  grid-template-columns: 48% 52%;  
  gap: 1.5rem;
  align-items: start;
  /* from before */
    width: 94%;
    max-width: 1300px; /* optional: keeps it from stretching too wide on big screens */
    margin: 0 auto;    /* centers it horizontally */
    padding: 1rem 1rem 0rem 1rem;   /* 0rem no padding at the bottom;  */
    border: 0px solid #ddd;   /* border for whole search area on top */
    background: transparent; /* #f9f9f9; */
    box-sizing: border-box; /* ensures padding is included in width */
}




/* Left & Right columns */
.action-left {
min-height: 600px; /* 200px;  would create a padding/margin underneath */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  
}


.action-right { 
    min-height: 100px; /* 200px;  would create a padding/margin underneath */
    margin: 2.5rem 0 0 0;   /* 1.2. manage distance from top */
    width: 97%;
    border: 0px solid white;  /* for distance debugging */
    
}