/* -------------------------
   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;
}



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

.header-area-white,
.footer-area-white {
  width: 100vw;
  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;
}









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

/* Let main content grow */
.desktop {
  flex: 1;
  max-width: 900px;
  width: 100%;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

/* New for Match Page */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
}




/* === Main & Content  BUILD.html === */
/* main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
} */

.desktop-profile-media {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1500px;   
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  min-height: 85vh;
}

.media-box-profile {
  background-color: transparent; /* #ffffff; */
  padding: 1.25rem 1rem 2rem;
  border-radius: 10px;
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
}







/* Desktop for the Emotion Profile Page */
.desktop-profile {
  flex: 1;
  max-width: 1100px;   /* 1100px;   */
  width: 100%;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}


.desktop-profile-match {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto; /* ✅ This is the key change */
  padding: 0 1rem;
  min-height: 85vh;
}






/* Headings */
.headings {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Page media.html */
.media-headings1 {
  font-size: 2.8rem;
  font-weight: bold;
  color: #464F5C;
  text-align: center;
  margin-top: 1.3rem;
  margin-bottom: 0.5rem;
}

.media-headings2 {
  font-size: 1.2rem;
  color: #464F5C;
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.0rem;
}

.media-headings-text1 {
  font-size: 2.8rem;
  font-weight: bold;
  color: #FF6500; 
  text-align: center;
  margin-top: 0.0rem;
  margin-bottom: 0.0rem;
}


.media-headings-image1 img {
  width: 1200px; /* or 100%, 50%, 20rem, etc. */
  max-width: 100%; /* prevents overflow */. 
  height: auto; /* maintains aspect ratio */
  display: block; /* removes bottom whitespace */
  margin: 0 auto; /* optional: centers the image */
}



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

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

.h2-media {
  font-size: 1.5rem;
  font-weight: 700;
  color: #464F5C;
  margin-left: 13.0rem;
  margin-bottom: 2.0rem;
  margin-top: 2.0rem;
  color: white;
}


/* Content Box */
/*  OLD
.content-box {
  position: relative;  
  background: var(--glass-bg);
  padding: 1.25rem 8rem 2rem 8rem;
  border-radius: var(--r-md);  
  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); 
}
*/

.content-box {
  position: relative;  
  background: var(--glass-bg);
  padding: 1.25rem 8rem 2rem 8rem;
  
    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;  */
    
    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); 
}



/* Content Box Profile */
.content-box-profile {
  background-color: #ffffff;
  padding: 1.25rem 1.0rem 2rem 1.0rem;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.content-box-profile img {
  width: 100%;
}



/* Match Box */
.match-box {
  background-color: #ffffff;
  padding: 1.25rem 8rem 2rem 8rem;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Match Box Profile 
.match-box-profile {
  background-color: #ffffff;
  padding: 1.25rem 1.0rem 2rem 1.0rem;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
*/

.match-box-profile img {
  width: 100%;
}



/* Typography */
.instant-emotion {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: white;
}

.our-emotion-machine {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: white;
}


/* Page build.html */

.build-headline {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 2.3rem;
  margin-bottom: 0.3rem;
  color: white;
}

.build-subline {
  font-size: 0.95rem;
  /* line-height: 1.4; */
  margin-bottom: 0.3rem;
  color: white;
}


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

p {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

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








/* Radio Buttons  on Page customaggregates.html */

.radio-group {
 margin-top: 1.0rem;
  margin-bottom: 20px;
  display: flex;           /* NEW: puts children in a row */
  align-items: center;  /* Vertically center the line */
  gap: 2rem;               /* Optional: spacing between buttons */
}

.radio-group label {
  display: flex;             /* ensures inline arrangement of input + text */
  flex: 1;
  min-width: 150px; /* ensure they don’t shrink too much */
  align-items: center;  /* Vertically center radio + text */
  gap: 0.5rem;               /* space between radio button and text */
  margin: 0;                 /* remove default spacing */
  font-weight: normal;
 font-size: 0.95rem;       /* 1rem; Optional: adjust label text size if needed */
  line-height: 1.4em; /* Ensures better alignment with scaled radio button */
  color: white; 
}

/* Increase radio button size by 50% */
.radio-group input[type="radio"] {
  width: 1.5em;
  height: 1.5em;
  margin-top: 2px; /* 0px  adjust this if necessary with 1,2, etc*/
  vertical-align: middle;
  /* accent-color: #FF6500; /*    /* This works in modern browsers like Chrome, Edge, Firefox */
}




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






/* Input and Button */
input {
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 0.8rem;  /* more padding left */
  margin-top: 0.5rem;
  margin-bottom: 0.1rem;    /* before: 1.5rem;  */
  border: 0px solid #8b8b8b;
  border-radius: 10px;
  font-size: 0.95rem;
  color: white; /* #404040;   #999999; */
  font-family: "Avenir", Helvetica, sans-serif;
  background-color: #5FAEE6 !important; /* red for DEV purposes */
  /* font-style: italic; */
}


input::placeholder {
  font-size: 0.95rem;
  color: white; /* #404040;   #999999;  red for DEV purposes*/
  font-family: "Avenir", Helvetica, sans-serif;
  font-style: italic;
  /* letter-spacing: 0.5px; */
}

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



/* Drop Downs */

    .select-wrapper {
      margin-bottom: 3rem; /* 100px;  - Prevent dropdown from opening upward */
    }



/* Styled Drop-down Box */




    .select-styled {
    width: 100%;
    max-width: 150px;
    padding: 0.5rem 0.5rem 0.5rem 0.8rem;  /* more padding left */
    margin-top: 0.5rem;
    margin-bottom: 0.1rem;
    border: 0px solid #8b8b8b;
    border-radius: 10px;
    font-size: 0.95rem;
    color: white; /* #404040; */
    font-family: "Avenir", Helvetica, sans-serif;
    background-color: #5FAEE6 !important; /* red for DEV purposes */
    appearance: none; /* removes default browser arrow styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /*  height width 24. white filling %23ffffff */
    background-size: 32; /* icon size 16px; */
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
}



#select-styled:focus,
#select-styled: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 */
#select-styled:-webkit-autofill,
#select-styled:-webkit-autofill:focus,
#select-styled:-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 */
}







    .select-styled-wide {
    width: 100%;
    max-width: 300px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.1rem;
    border: 0px solid #8b8b8b;
    border-radius: 10px;
    font-size: 0.95rem;
    color: white; /* #404040; */
    font-family: "Avenir", Helvetica, sans-serif;
    background-color: #5FAEE6 !important; /* red for DEV purposes */
    appearance: none; /* removes default browser arrow styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /*  height width 24*/
    background-size: 32; /* icon size 16px; */
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
}


.note {
  font-size: 0.95rem; 
  line-height: 1.5;     /* 1.5 */
  margin-top: 0.5rem;     /* distance to input form */
  margin-bottom: 1.8rem;   /* distance to Generate Button  1.2rem;   */
}






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

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

button:active {
  background-color: grey;
}

.button-deeplink {
  background-color: rgba(255, 101, 0, 0.05); /* = #ff6500;  20% Abdeckung*/
  color: black;   /* text color */
  border: 1px solid #ff6500;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.button-deeplink:hover {
  background-color: rgba(255, 101, 0, 0.15); 
}


.orange-link {
  color: #FF6500;
  text-decoration: none; /* Optional: removes underline */
}



/* Typography for Page manage.html */

.aligned-headings {
  width: 100%;
  margin-left: 4.5rem;  /* match .grid-two-column left margin */
}

.manage-headline {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0;
}

.manage-subline {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-top: 0;
  padding-bottom: 0;
}


.grid-two-column {
  display: flex;
  flex-direction: row;
  gap: 6rem; 
  /* margin-top: 2rem; */
  margin: 2rem 6rem 0rem 4rem;
}


.grid-left {
  flex: 0 0 66%;
}



.grid-right {
  flex: 0 0 34%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 0.3rem;  /* top 2.5rem; */
  padding: 0rem 4rem 0rem 0rem; 
}

@media (max-width: 768px) {
  .grid-two-column {
    flex-direction: column;
  }

  .grid-left,
  .grid-left-wide,  
  .grid-right {
    flex: 1 1 100%;
    margin: 0; /* optional: remove side margins if used */
  }

  .grid-right {
    margin-top: 2rem; /* add spacing when stacked */
  }
}

/* Grid on page industryprofiles.html */
.grid-two-column1 {
  display: block;         /* Remove flex – tables do NOT need it */
  margin: 2rem 6rem 0rem 4rem;
  /* gap: 2rem;  */
}

  /* margin-top: 2rem; */
  margin: 2rem 6rem 0rem 4rem;
}

.grid-left-wide {
  width: 100%;            /* 100% of parent width */
  max-width: 100%;        /* Prevent it from over-expanding */
}



.profile-table {
  width: 100%;  /* 85% */
  margin: 0rem auto; /* ✅ this centers the table horizontally */
  border-collapse: collapse;
  border-color: black; /* white; */
  text-align: left;
}


.profile-table th,
.profile-table td {
  padding: 0.2rem 0.5rem 0.2rem 0.5rem;  /* 0.75rem;   */
  /* border: 1px solid #ccc; */
}

.profile-table th {
  /*background-color: #f0f0f0; */
  font-weight: 600;
}

.profile-table td {
  font-size: 0.95rem; /* 0.95rem; Match other <td> font size */
  word-break: break-word;
}

/* Dynamic style classes from script_manageprofiles.js */

.profile-table input.profile-label,
.profile-table input.aggregate-label  {
  padding: 0.2rem 0rem 0.2rem 0.5rem;
  max-width: 150px;
}

.profile-table td img.icon-eye {
  width: 20px;
  height: 20px;
}

.profile-table td img.icon-info {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}


/* CheckBox  larger and centered*/
.profile-table td input[type="checkbox"] {
  transform: scale(1.5); /* 1.2 */
  cursor: pointer;
  display: block;
  margin: 0 auto; /* center horizontally */
  margin: 0.3rem 0 0.3rem 0;  /* margin used for more line height */
}

.profile-table img {
  display: block;
  margin: 0 auto;
}

.profile-table td img.icon-eye {
  width: 20px;
  height: 20px;
}

.profile-table td img.icon-info {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}



/* For editable columns */
    .profile-label,
    .matching-label {
      width: 180px;
      padding: 5px; /*5 px */
      font-size: 0.95rem; /* 16px;  */
     margin: 0rem; 
      /*margin-top: 0rem; */ 
      /*margin-right: 0rem; */
     /* margin-bottom: 0rem;    /* before: 1.5rem;  */  */
    }


.center-button {
  display: flex;
  justify-content: center;
  /*margin-top: 1rem;*/
  padding: 0.5rem 0rem 1.5rem 0rem;
}



/* Export options old */
.emotion-profile-export {
  width: 70%;
  margin: 1.5rem auto;
  text-align: left;
}

.emotion-profile-export button {
  margin-top: 0.5rem;
}

/* Responsive two-column layout for export options */
.two-column-export {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: stretch; /* ensures equal height on columns */
  margin-top: 2rem;
}

/* Each column styles */
.export-column {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff; /* Optional: helpful if using borders/shadows */
  padding: 1rem; /* Optional: spacing inside */
  box-sizing: border-box;
  border-radius: 8px; /* Optional: visual appeal */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Optional */
}

/* Stack columns vertically on small screens */
@media (max-width: 700px) {
  .two-column-export {
    flex-direction: column;
  }
}





/* START - Container for page profile.html with the entire option section */
.action-options {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: transparent; /* #ffffff; */
  border-radius: 10px;
  font-family: Arial, sans-serif;
}

.action-options h2 {
  font-size: 1.2rem;
  text-align: center;
  color: #374151;
  margin-bottom: 1.5rem; /*0.8rem; */
}

.option-group {
  margin-bottom: 2rem;   /* 2rem */
  display: flex;               /* Enable Flexbox */
  justify-content: center;     /* Center horizontally */
  flex-wrap: wrap;             /* Wrap on smaller screens */
  gap: 1rem;                   /* Optional: space between buttons */
}

.option-group secondary-links {
  color: white;
}




.option-group button {
  display: inline-block;
  width: auto;
  min-width: 250px;
  padding: 0.6rem 1.8rem;
  background-color: #ff6500;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
  text-align: center;
}

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


/* === CTA Styling (Scoped for Kaleidoscope Intro Section) === */

.cta-wrapper {
  margin-top: -1.5rem;  // -2rem;
  margin-left: 0rem; // -8rem;
  margin-right: 0rem; // -8rem;
  /* border: 1px solid red; */
}

.cta-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  /* margin: 2rem 0; */
  /* border: 1px solid blue; */
}

.cta-block {
  flex: 1 1 200px; /* grow/shrink allowed, 300px min width */
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* border: 1px solid green; */
}


/* Liquid Glass Button

.cta-block button {
    min-width: 200px;
    padding: 0.75rem 1.5rem;   
    font-family: "Avenir", Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;  
    color: #FF6500;  
    background: rgba(255, 101, 0, 0.10);  
    border: 1px solid rgba(255, 101, 0, 0.3);
    border-radius: 10px; 
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 1px 8px rgba(255, 101, 0, 0.20);    
    transition: background-color 0.2s ease;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-block button:hover {
      background: rgba(255, 101, 0, 0.20);   
      box-shadow: 0 2px 12px rgba(255, 101, 0, 0.30);  
}

 */



/* Start: Classic Button */

.cta-block button {
  background-color: #ff6500; 
  color: white;
  border: none;
  padding: 0.75rem 1.5rem; 
  border-radius: 10px;
  font-size: 1rem;
  font-family: "Avenir", Helvetica, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-width: 200px;
}

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

/* End: Classic Button */


.cta-text {
  font-family: "Avenir", Helvetica, sans-serif;
  margin-top: 1rem;  /*  0.75rem; */
  font-size: 0.95rem;
  line-height: 1.4;
  /* color: #333; */
  width: auto;   /* or 100%, 220px or auto */
  /* border: 1px solid black; */
  margin-bottom: 2.75rem;
  color: white;
}





@media (min-width: 600px) {
  .option-group:not(.secondary-links) {
    display: flex;
    justify-content: center;   /* ✅ keep it centered! */
    flex-wrap: wrap;
    gap: 1rem;
  }

  .option-group:not(.secondary-links) button {
    width: auto;
    min-width: 250px;
  }
}

/* Secondary link group styling */
.secondary-links  {
  font-size: 0.95rem;
  color: white; /* #374151; */
  text-align: center;
  font-weight: 400;
}

.secondary-links a {
  font-size: 0.95rem;
  color: #2563eb;
  text-decoration: none;
  margin: 0 1px;
  font-weight: 400;
}

.secondary-links a:hover {
  text-decoration: underline;
}

/* END - Container for page profile.html with the entire option section */






/* 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;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 2rem;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  text-align: center;
  border-radius: 10px;
  position: relative;
}

/* Modal  for page generate.html*/
.modal-generate {
  display: none; /* hide by default */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-family: sans-serif;
  color: #333;
  text-align: center;
}


/* New Modal  for page customaggregates.html*/
.modal-generate2 {
  display: none;
  position: absolute;
  inset: 0; /* shorthand for top, right, bottom, left = 0 */
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 1000;
  font-size: 1.1rem;
  font-family: sans-serif;
  color: #333;
  text-align: center;
  border-radius: 10px;
  padding: 2rem;
 /* box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); */
  /* FLEX CENTERING */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* New Modal  for page customaggregates.html*/
.modal-generate3 {
  position: fixed;
  inset: 0;
  display: none; /* start hidden */
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 1000;
  font-size: 1.1rem;
  font-family: sans-serif;
  color: #333;
  text-align: center;
  border-radius: 10px;
  padding: 2rem;
}





/* Modal  for page generate.html */
.modal-content-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem; /* spacing between bar and text */
  /* background-color: white; */
  /* padding: 1rem 2rem;  */
  /* border-radius: 10px;  */
  /* box-shadow: 0 2px 10px rgba(0,0,0,0.1);  */
}

.modal-content-inline .loading-bar {
  margin-bottom: 0.8rem; /* adjust up/down as needed */
}

.loading-bar {
  width: 80px;
  height: 6px;
  margin-top: 1rem;
  background: #ccc;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}


.loading-bar::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 40%;
  background: #666;
  animation: slide 1s infinite ease-in-out;
  border-radius: 4px;
}

@keyframes slide {
  0% {
    left: -40%;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 100%;
  }
}

.close-btn {
  position: absolute;
  right: 1rem;
  top: 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
}

@media print {
  body {
      -webkit-print-color-adjust: exact;
  }
}




/* === Media Specs: Invisible 3-column grid (40% / 30% / 30%) === */

.spec-grid {
  display: grid;
  grid-template-columns: 33% 34% 33%;
  gap: 0 2rem;            /* horizontal breathing room; no visible lines */
  align-items: start;     /* top-align column content */
  margin-left: 13.0rem;
  margin-right: 13.0rem;
  margin-bottom: 2.0rem;
  

}

/* Ensure content in each column is left-aligned */
.spec-grid-column {
  text-align: left;
  
  padding: 1rem 1rem 1rem 1.5rem;
  min-height: 160px;
  
  background: var(--glass-bg);
  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;  */
    
   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); 
}








/* Override centered headings inside the spec grid only */
.spec-grid .media-headings1,
.spec-grid .media-headings2 {
  text-align: left;
  color: white; 
}


/* Page media.html */
.media-headings11 {
  font-size: 2.8rem;
  font-weight: bold;
  color: white; /* #464F5C; */
}

.media-headings12 {
  font-size: 1.2rem;
  color: white; /* #464F5C; */
  margin-left: 0.0rem;
}




/* Optional: stack on small screens (safe, invisible behavior) */
@media (max-width: 800px) {
  .spec-grid {
    grid-template-columns: 1fr;
    gap: 1rem 0;
  }
}