html {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;

}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none; 
  -ms-overflow-style: none;
  margin:0;
  -ms-overflow-style: none; 
  scrollbar-width: none;    
  scrollbar-gutter: stable;

  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;

}

/* Hide scrollbar but allow scroll */
body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

html, body {
  font-family: var(--font-sans-serif);
}
.row {
  all:unset;
  display: flex;
  flex-wrap: wrap;
  width:100%;
  flex-direction: column;

}


*{ box-sizing:border-box; }

@media (max-width:991px){

  body{
    padding-bottom:60px;
  }

}

.top-z {
  z-index: 10000;
}
/* Z-index
  modal 3000
  dropdown 9999 
  image text 9999
  pin 9999
  posiiton elements : 100
  cookie 2000
  footer 10000
  header 1000
  search 10000
  icon toggle : 3001
  stick : 100;
  sitckyFeed : 200
  view-style-stick-feed : 300 
  animations 99999
  tags overlay selection 10001
  pinSelected 10000
  overlay : 9999
  overlayCam: 20000

@media (max-width: 479px) {
}

@media (max-width: 576px) {
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {

}
@media (min-width: 992px) {
  .container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}


  STYLES ::: 
.theme-style-gradient
.theme-style-pulse 
.theme-style-primary
.theme-style-secondary
.theme-style-support
.theme-style-dark
.theme-style-light
.theme-style-hover
.theme-style-footer
.theme-style-rating

.action-form
.action-options-grid
.action-options-list
.action-option-item
.action-button
.action-input
.action-preview
.action-close-icon
.action-apply-btn
.action-discard-btn
.action-checkbox
.action-toggle-switch
.action-select-option


.view-style-data
.view-style-header
.view-style-footer
.view-style-product-item
.view-style-browse
.view-style-search
.view-style-frame
.view-style-box
.view-style-badge
.view-style-category-filter
.view-style-story
.view-style-context-card
.view-style-carousel
.view-style-menu-grid
.view-style-menu-grid-tiny
.view-style-menu-row
.view-style-product-view
.view-style-photo-grid-line-full
.view-style-icon-grid
.view-style-icon-list
.view-style-icon-grid-mobile




.card_category
.card_badge
.card_title
.card_header
.card_basic
.card_flex
.card_column
.card_product
.card_business-card
.card_carousel
.card_list
.card_row
.card_compact


card_badge
card_category
card_title

new cards:

card_badge
card_header
card_menu
card_meta
card_row
card_text

card_column
card_row
card_product

.context_row
.context_paragraph
.context_list
.tags



.context-color
.context-side-color
.context-alert
.context-support
.bold   /// removed!
.context-dark
.context-white
.context-upper
.context-alias
.context-wrap
.context-category
.context-list
.context-page-title
.context-header
.context-pulse
.context-cta
.context-cta-primary
.context-cta-secondary
.context-cta-tertiary
.context-cta-pulsive
.context-cta-pulsive-primary 
.context-cta-pulsive-secondary 
.context-cta-pulsive-warning
.context-cta-pulsive-info
.context-cta-cut-corners 
.context-cta-split-color
.context-cta-neon
.context-cta-outline-cut
.context-cta-3d 



.icon-text-under
.basicIcon
.icon-tiny 
.icon_close 

.primaryIcon
.secondaryIcon
.mainIcon
    .darkIcon
    .lightIcon

.icon-toggle
.icon-glass
.icon-3d
.icon-gradient
.icon-neon 
.icon-glassmorphism
.icon-3d-effect
.icon-metallic
.icon-pulse 
.icon-shadow
.icon-outline
.icon-iphone
.icon-gold-luxe
.icon-platinum 
.icon-black-gold
.icon-app
.dock-icon
.map-icon
.icon-map



.hidden
.responsive
.active
.bigScreen
*/


:root {

  --font-sans-serif: 'Roboto Condensed', 'Roboto', sans-serif;
  --font-monospace: 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;


  --main-color: #0b3a44; /* Primary color */
  --side-color: #03bbbb; /* Side color */
  --text-color: var(--main-color);
  --hover-color: var(--side-color);


  --primary-surface-start: var(--side-color);
  --primary-surface-mid: #079fa7;
  --primary-surface-deep: #087d8b;
  --primary-surface-end: #075e6d;

  /* atmospheric highlights */
  --primary-surface-highlight: rgba(255, 255, 255, 0.22);
  --primary-surface-highlight-soft: rgba(255, 255, 255, 0.06);

  --primary-surface-glow: rgba(76, 255, 239, 0.16);

  /* depth */
  --primary-surface-shadow: rgba(0, 45, 55, 0.30);

  /* subtle texture */
  --primary-surface-light: rgba(255, 255, 255, 0.08);
  --primary-surface-light-soft: rgba(255, 255, 255, 0.035);

  /* layout */
  --primary-surface-gap: 12px;
  --primary-surface-padding: 12px;

  --support-color: #ea3000; /* Support color */
  --color-white: #fff; /* White */
  --color-light: #f9f9f9; /* Light */
  --color-dark: #000; /* Black */

  --text-alert-color:#ea3000;
  --text-dark: #343a40; /* Define the text-dark variable */
  --background-gradient-start:  var(--engagement-border);
  --background-gradient-middle: var(--engagement-bg);
  --background-gradient-end: var(--main-color);
  --background-gradient: linear-gradient(
    145deg,
    var(--background-gradient-start),
    var(--background-gradient-middle),
    var(--background-gradient-end)
  ); /* Matches bg-gradient class */
  --background-dark: var(--color-dark); /* Matches bg-dark class */
  --background-white: var(--color-white); /* Matches bg-white class */
  --background-warning: #ffc107; /* Matches bg-warning class */
  --background-info: #17a2b8; /* Matches bg-info class */
  --background-success: #28a745; /* Matches bg-success class */
  --background-primary: #007bff; /* Matches bg-primary class */

  --pulse-btn-bg: #ffc107;  /* Pulse button hover background color */
  --pulse-btn-hover-bg: #ff8800;  /* Pulse button hover background color */
  --pulse-btn-shadow: rgba(0, 0, 0, 0.1);  /* Pulse button shadow */
  --pulse-btn-hover-shadow: rgba(0, 0, 0, 0.2);  /* Pulse button hover shadow */
  --pulse-bg-start: #FFCC00;  /* Pulse background start color */
  --pulse-bg-end: #FF5864;    /* Pulse background end color */
  --pulse-border: #FF8800;    /* Border color for the pulse button */
  --pulse-border-radius: 0.375rem;  /* Border radius for the pulse button */
  --pulse-box-shadow: rgba(0, 0, 0, 0.2);  /* Box shadow for pulse effect */
  --pulse-animation-duration: 2s; /* Duration of the pulse animation */
  --pulse-animation-ease: ease-in-out; /* Easing function for the pulse animation */

  --engagement-bg: #071D24;
  --engagement-bg-deep: #05171D;
  --engagement-bg-soft: #0B2830;

  /* restrained turquoise */
  --engagement-border: rgba(66, 199, 194, 0.32);
  --engagement-border-hover: rgba(66, 199, 194, 0.62);

  --engagement-shadow: rgba(0, 0, 0, 0.32);

  /* typography */
  --engagement-text: #F2F5F3;
  --engagement-text-soft: #A6B7B8;
  --engagement-text-muted: #718688;

  /* interaction */
  --engagement-hover-bg: rgba(66, 199, 194, 0.08);
  --engagement-hover-text: #FFFFFF;

  /* premium accent */
  --engagement-context-color: #42C7C2;
  --engagement-option-checked: #42C7C2;

  /* selected action */
  --engagement-bg-selected: #163F43;
  --engagement-bg-selected-text: #F2F5F3;

  /* subtle premium highlight */
  --engagement-gold: #B9A77A;

  /* status */
  --engagement-status-processing: #42C7C2;
  --engagement-status-waiting: #C7A96B;
  --engagement-status-complete: #79BFA9;
  --engagement-status-idle: rgba(255,255,255,0.20);
  --footer-bg: var(--support-color);
  --footer-text-color: #fff;
  --footer-link-color: #fff;
  --footer-height: 60px;

  --field-calm:#57d9ff;
  --field-watch:#ffb347;
  --field-warning:#ff9234;
  --field-danger:#ff5e5e;
  --field-critical:#ff2b2b;
  --field-deep:#0f2230;
}



body.view-shutter {
  position: relative;
  overflow: hidden;
}

body.view-shutter::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  background: #000;
  clip-path: circle(0% at 50% 50%);
  animation: shutter-close 400ms ease-in-out forwards;
}

@keyframes shutter-close {
  0% {
      clip-path: circle(0% at 50% 50%);
  }

  45% {
      clip-path: circle(0% at 50% 50%);
  }

  100% {
      clip-path: circle(75% at 50% 50%);
  }
}

/* Monospace for code blocks */
pre, code, kbd, samp {
  font-family: var(--font-monospace)  !important;
}


/* layout */

#loading-qr {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color:transparent !important;
  padding: 20px;
  border-radius: 10px;
  z-index: 3100;
}

/* ------------------------------
   GENERIC SELECTED (SAFE)
-------------------------------- */
.selected  {
  transform: scale(1.02);
}
.extended {
  display: inline-flex !important;
  flex-direction: column !important;
  width: 100%;
  flex: 1 1 auto;
}

.selected::after {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 10px;
  background: var(--engagement-bg);
  color: white;
  border-radius: 50%;
  padding: 3px 5px;
  z-index: 10001;
}
.remove  {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.remove::after {
  content: "×";
  position: absolute;
  top: 0;
  right: -9px;
  font-size: 10px;
  border-radius: 50%;
  z-index: 10001;
}
.pin {
  position: relative;
  overflow: hidden;
}

.pin::after {
  content: "📌";
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 22px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 9999;  
}

.noText .image-text {
  display: none !important;
}

.noText .icon-text {
  display: none !important;
}


.disabled {
  position: relative;
  opacity: 0.6;         /* visually faded */
  pointer-events: none;  /* prevent interaction */
}

/* Gray overlay for images */
.disabled.img,
.disabled img {
  filter: grayscale(100%) brightness(0.8); /* gray and slightly dimmed */
  border: 1px solid #d0d0d0;             /* optional subtle border */
}

.disabled::after {
  content: "×";
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 16px;
  color: #d9534f;       /* soft red */
  background: white;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-weight: bold;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  padding-bottom: 2px;
  z-index: 999;
}

.enabled {
  position: relative;
  opacity: 1;            /* fully visible */
  pointer-events: auto;   /* normal interaction */
}

.enabled::after {
  content: "✓";           /* checkmark for enabled */
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 12px;
  color: #28a745;         /* soft green */
  background: white;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-weight: bold;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  z-index: 999;
}

.option {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
}

.option::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  border-radius: 3px;
  background: white;
}

.option.selected::before {
  background: #4caf50;
  border-color: #4caf50;
}

/*
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999 !important;
  overflow-y: auto;
  margin-left:70px;  
  height: 100vh;
  background: transparent;
  pointer-events: none;
}

*/

.overlay {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 70px;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999 !important;
  overflow-y: auto;
  overflow-x: hidden;

  background: transparent;


  box-sizing: border-box;
}

.overlayFull {
  z-index: 20000 !important;
}

.popup {
  width: 100%;
  height: 100%;
  
}

/* blur layer */
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
/*

*/
  z-index: 0;
}

.overlay.transparent::before {
  background:transparent;
  backdrop-filter: none;
}

.overlay.blur::before {
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(2px);
}


/* your modal box */
.overlay > * {
  position: relative;
  z-index: 1;
  pointer-events: auto;

}
/* Zoomed image styling */
.zoomed-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  cursor: zoom-out;
}
p img {
  width: auto !important;
  height: 14px !important;

}
@media (max-width: 576px) {
  .content-container { max-width: 540px; }

}
@media (min-width: 576px) {
  .content-container { max-width: 540px; }
}
@media (min-width: 768px) {
  .content-container { max-width: 720px; }
}
@media (min-width: 992px) {
  .content-container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .content-container { max-width: 100%;}
}
/* Row */

[class*="col-"] {
  box-sizing: border-box;
}

/* Column "0" Classes — force width to 0% and remove padding */
.col-0,
.col-sm-0,
.col-md-0,
.col-lg-0,
.col-xl-0 {
  display: none !important; /* Ensures total hide */
}

/* Default Columns */
@media (min-width: 0px) {
  .col-1 { width: 8.3333%; }
  .col-2 { width: 16.6666%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.3333%; }
  .col-5 { width: 41.6666%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.3333%; }
  .col-8 { width: 66.6666%; }
  .col-9 { width: 75%; }
  .col-10 { width: 83.3333%; }
  .col-11 { width: 91.6666%; }
  .col-12 { width: 100%; }
}

/* Responsive Columns */
@media (min-width: 576px) {
  .col-sm-1 { width: 8.3333%; }
  .col-sm-2 { width: 16.6666%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.3333%; }
  .col-sm-5 { width: 41.6666%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.3333%; }
  .col-sm-8 { width: 66.6666%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.3333%; }
  .col-sm-11 { width: 91.6666%; }
  .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1 { width: 8.3333%; }
  .col-md-2 { width: 16.6666%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333%; }
  .col-md-5 { width: 41.6666%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.3333%; }
  .col-md-8 { width: 66.6666%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.3333%; }
  .col-md-11 { width: 91.6666%; }
  .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1 { width: 8.3333%; }
  .col-lg-2 { width: 16.6666%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; }
  .col-lg-5 { width: 41.6666%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.3333%; }
  .col-lg-8 { width: 66.6666%; }
  .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.3333%; }
  .col-lg-11 { width: 91.6666%; }
  .col-lg-12 { width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1 { width: 8.3333%; }
  .col-xl-2 { width: 16.6666%; }
  .col-xl-3 { width: 25%; }
  .col-xl-4 { width: 33.3333%; }
  .col-xl-5 { width: 41.6666%; }
  .col-xl-6 { width: 50%; }
  .col-xl-7 { width: 58.3333%; }
  .col-xl-8 { width: 66.6666%; }
  .col-xl-9 { width: 75%; }
  .col-xl-10 { width: 83.3333%; }
  .col-xl-11 { width: 91.6666%; }
  .col-xl-12 { width: 100%; }
}
/* Auto Column Sizing */
.col { flex: 1 0 0%; }
@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
}
@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
}
@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
}
@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; }
}

/* Gutters */
.g-0 > [class*="col-"] { padding-right: 0; padding-left: 0; }
.g-1 > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.g-2 > [class*="col-"] { padding-right: 10px; padding-left: 10px; }
.g-3 > [class*="col-"] { padding-right: 15px; padding-left: 15px; }
.g-4 > [class*="col-"] { padding-right: 20px; padding-left: 20px; }
.g-5 > [class*="col-"] { padding-right: 25px; padding-left: 25px; }

.no-gutters {
  margin-left: 0;
  margin-right: 0;
}
.no-gutters > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
.w-auto {
  width: auto !important;
}
.w-100 {
  width: 100% !important;
}
.h-100 {
  height: 100% !important;
}

/* Alignments */
.row.align-items-start { align-items: flex-start; }
.row.align-items-center { align-items: center; }
.row.align-items-end { align-items: flex-end; }
.row.justify-content-start { justify-content: flex-start; }
.row.justify-content-center { justify-content: center; }
.row.justify-content-end { justify-content: flex-end; }
.row.justify-content-between { justify-content: space-between; }
.row.justify-content-around { justify-content: space-around; }

/* Display Utilities */
.d-none { display: none !important; }
@media (min-width: 576px) { 
  .d-sm-block { display: block !important; }
  .d-sm-none { display: none !important; }
}
@media (min-width: 768px) { 
  .d-md-block { display: block !important; }
  .d-md-none { display: none !important; }
}
@media (min-width: 992px) { 
  .d-lg-block { display: block !important; }
  .d-lg-none { display: none !important; }
}
@media (min-width: 1200px) { 
  .d-xl-block { display: block !important; }
  .d-xl-none { display: none !important; }
}

/* Offsets (Example for md) */
@media (min-width: 768px) {
  .offset-md-1 { margin-left: 8.3333%; }
  .offset-md-2 { margin-left: 16.6666%; }
  .offset-md-3 { margin-left: 25%; }
  .offset-md-4 { margin-left: 33.3333%; }
  .offset-md-5 { margin-left: 41.6666%; }
  .offset-md-6 { margin-left: 50%; }
  .offset-md-7 { margin-left: 58.3333%; }
  .offset-md-8 { margin-left: 66.6666%; }
  .offset-md-9 { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.3333%; }
  .offset-md-11 { margin-left: 91.6666%; }
}

/* Order Utilities */
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }

@media (min-width: 768px) {
  .order-md-0 { order: 0; }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-5 { order: 5; }
}

/* Auto Margins */
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

.top-400 {
  top: 400px;
}

.top-200 {
  top: 200px;
}

@media (min-width: 768px) {
  .top-200 {
    top: 240px;
  }
  .top-400 {
    top: 480px;
  }
}

@media (min-width: 1200px) {
  .top-200 {
    top: 300px;
  }
  .top-400 {
    top: 600px;
  }
}

@media (min-width: 1600px) {
  .top-200 {
    top: 360px;
  }
  .top-400 {
    top: 720px;
  }
}



/* Visually Hidden (accessibility) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.pointer {
  cursor: pointer;
}
.dropdown {
  position: relative; 
}
.dropdown-menu {
  z-index: 9999;
  max-height: 300px;
  overflow-y: auto;
  background-color: var(--color-white);
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 140px;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.dropdown-menu-item {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f1f1;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin: 0 !important;
  display: inline-flex;
  width: 100%;
  gap:8px;
}

.dropdown-menu-item:last-child {
  border-bottom: none;
}

.dropdown-menu-item:hover {
  background-color: #f5f5f5;
  color: #000;
}


.border {
  border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0); 
}

/* Rounded corners */
.rounded {
  border-radius: 0.8rem !important;
}

/* Small shadow */
.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075) !important;
}
.shadow-light {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12), 0px 2px 6px rgba(0, 0, 0, 0.08); 
}
.m-auto {margin: auto !important;}
.me-auto {margin-right: auto !important;}
.ms-auto {margin-left: auto !important;}
.me-0  { margin-right: 0 !important; }
.me-1  { margin-right: 0.25rem !important; }
.me-2  { margin-right: 0.5rem !important; }
.me-3  { margin-right: 0.9rem !important; }
.me-4  { margin-right: 1.5rem !important; }
.me-5  { margin-right: 3rem !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: 0.25rem !important; }
.mb-2  { margin-bottom: 0.5rem !important; }
.mb-3  { margin-bottom: 0.9rem !important; }
.mb-4  { margin-bottom: 1.5rem !important; }
.mb-5  { margin-bottom: 3rem !important; }
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: 0.25rem !important; }
.mt-2  { margin-top: 0.5rem !important; }
.mt-3  { margin-top: 0.9rem !important; }
.mt-4  { margin-top: 1.5rem !important; }
.mt-5  { margin-top: 3rem !important; }

/* Margin: all sides */
.m-0  { margin: 0 !important; }
.m-1  { margin: 0.25rem !important; }
.m-2  { margin: 0.5rem !important; }
.m-3  { margin: 0.9rem !important; }
.m-4  { margin: 1.5rem !important; }
.m-5  { margin: 3rem !important; }

/* Padding: all sides */
.p-0  { padding: 0 !important; }
.p-1  { padding: 0.25rem !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 0.9rem !important; }
.p-4  { padding: 1.5rem !important; }
.p-5  { padding: 3rem !important; }

@media (max-width: 479px) {
  /* Margin Right */
  .me-0  { margin-right: 0 !important; }
  .me-1  { margin-right: 0.25rem !important; }
  .me-2  { margin-right: 0.5rem !important; }
  .me-3  { margin-right: 0.75rem !important; }
  .me-4  { margin-right: 0.9rem !important; }
  .me-5  { margin-right: 1.5rem !important; }

  /* Margin Bottom */
  .mb-0  { margin-bottom: 0 !important; }
  .mb-1  { margin-bottom: 0.25rem !important; }
  .mb-2  { margin-bottom: 0.5rem !important; }
  .mb-3  { margin-bottom: 0.75rem !important; }
  .mb-4  { margin-bottom: 0.9rem !important; }
  .mb-5  { margin-bottom: 1.5rem !important; }

  /* Margin Top */
  .mt-0  { margin-top: 0 !important; }
  .mt-1  { margin-top: 0.25rem !important; }
  .mt-2  { margin-top: 0.5rem !important; }
  .mt-3  { margin-top: 0.75rem !important; }
  .mt-4  { margin-top: 0.9rem !important; }
  .mt-5  { margin-top: 1.5rem !important; }

  /* Margin All Sides */
  .m-0  { margin: 0 !important; }
  .m-1  { margin: 0.25rem !important; }
  .m-2  { margin: 0.5rem !important; }
  .m-3  { margin: 0.75rem !important; }
  .m-4  { margin: 0.9rem !important; }
  .m-5  { margin: 1.5rem !important; }

  /* Padding All Sides */
  .p-0  { padding: 0 !important; }
  .p-1  { padding: 0.25rem !important; }  
  .p-2  { padding: 0.5rem !important; }   
  .p-3  { padding: 0.75rem !important; }  
  .p-4  { padding: 0.9rem !important; }     
  .p-5  { padding: 1.5rem !important; }   
}




/* =========================================================
   CAMERA OVERLAY
   ========================================================= */

/* =========================================================
   CAMERA OVERLAY
   ========================================================= */

   .lify-camera-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* =========================================================
   CAMERA CONTAINER
   ========================================================= */

.lify-camera {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #000;

    color: #fff;

    display: block !important;
}


/* =========================================================
   VIDEO
   ========================================================= */

.lify-camera > [data-engage-id="camera-video"] {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;

    background: #000;

    z-index: 1;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   CANVAS
   ========================================================= */

.lify-camera > [data-engage-id="camera-canvas"] {
    display: none !important;

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
    pointer-events: none !important;
}
/* =========================================================
CAMERA MODE SWITCH
========================================================= */

.camFrame {
  position: relative !important;

  width: 52px !important;
  height: 52px !important;

  min-width: 52px !important;
  min-height: 52px !important;

  flex: 0 0 52px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  border-radius: 50% !important;

  cursor: pointer;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid rgba(255, 255, 255, 0.28);

  transition:
      transform 0.15s ease,
      background 0.15s ease,
      border-color 0.15s ease;
}

.camFrame:active {
  transform: scale(0.92);
}

.camFrame.video-mode {
  background: rgba(255, 255, 255, 0.22);

  border-color: rgba(255, 255, 255, 0.8);
}


/* =========================================================
MODE SWITCH ICON
========================================================= */

.camFrame-icon {
  width: 26px !important;
  height: 26px !important;

  min-width: 26px !important;
  min-height: 26px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #fff;
}

/* =========================================================
   TOP BAR
   ========================================================= */

.lify-camera-top {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: 76px !important;

    z-index: 20 !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    box-sizing: border-box !important;

    padding:
        calc(12px + env(safe-area-inset-top))
        18px
        8px
        18px !important;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65),
        rgba(0, 0, 0, 0)
    ) !important;
}


 /* =========================================================
    CLOSE
    ========================================================= */

    .lify-camera-close {
      position: relative !important;
  
      width: 44px !important;
      height: 44px !important;
  
      min-width: 44px !important;
      min-height: 44px !important;
  
      flex: 0 0 44px !important;
  
      display: flex !important;
  
      align-items: center !important;
      justify-content: center !important;
  
      margin: 0 !important;
      padding: 0 !important;
  
      box-sizing: border-box !important;
  
      border-radius: 50% !important;
  
      cursor: pointer;
  
      z-index: 20 !important;
  
      transition:
          background 0.15s ease,
          transform 0.15s ease;
  }
  
  .lify-camera-close:active {
      background: rgba(255, 255, 255, 0.18);
  
      transform: scale(0.94);
  }
  
  
  /* =========================================================
     CLOSE ICON
     ========================================================= */
  
  .lify-camera-close-icon {
      width: 28px !important;
      height: 28px !important;
  
      min-width: 28px !important;
      min-height: 28px !important;
  
      display: flex !important;
  
      align-items: center !important;
      justify-content: center !important;
  
      margin: 0 !important;
      padding: 0 !important;
  
      box-sizing: border-box !important;
  
      color: #fff;
  }
  
  .lify-camera-close-icon .icon {
      display: flex !important;
  
      align-items: center !important;
      justify-content: center !important;
  
      width: 28px !important;
      height: 28px !important;
  
      margin: 0 !important;
      padding: 0 !important;
  
      box-sizing: border-box !important;
  }
  
  .lify-camera-close-icon .icon::before {
      content: "×";
  
      display: block;
  
      width: 28px;
      height: 28px;
  
      font-size: 32px;
      line-height: 26px;
  
      font-weight: 300;
  
      text-align: center;
  
      color: #fff;
  }
  
  
  /* =========================================================
     DESKTOP — 70px SIDEBAR
     ========================================================= */
  
  @media (min-width: 769px) {
  
      .lify-camera-top {
          /*
           * Sidebar = 70px.
           *
           * Add a little extra breathing room so the close
           * button never sits underneath the sidebar.
           */
          padding-left: 90px !important;
          padding-right: 20px !important;
      }
  
  }
  
  
  /* =========================================================
     MOBILE
     ========================================================= */
  
  @media (max-width: 768px) {
  
      .lify-camera-top {
          padding-left: 12px !important;
          padding-right: 12px !important;
      }
  
  }
/* =========================================================
   TITLE
   ========================================================= */

.lify-camera-title {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff;

    font-size: 17px;
    line-height: 24px;

    font-weight: 600;

    letter-spacing: -0.2px;

    white-space: nowrap;

    text-align: center;

    pointer-events: none;
}


/* =========================================================
   TOP SPACER
   ========================================================= */

.lify-camera-spacer {
    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;
    min-height: 44px !important;

    flex: 0 0 44px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   QR FRAME
   ========================================================= */

/*
 * IMPORTANT:
 *
 * Do NOT allow generic .col-12 / .frame rules to affect this.
 *
 * The QR frame is an independent overlay element.
 */

.lify-camera-qr-frame {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: min(72vw, 300px) !important;
    height: min(72vw, 300px) !important;

    max-width: 300px !important;
    max-height: 300px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translate(-50%, -50%) !important;

    box-sizing: border-box !important;

    z-index: 10 !important;

    display: none !important;

    pointer-events: none !important;
}


/*
 * QR scanning is OFF by default.
 *
 * JS adds .active when enabled.
 */

.lify-camera-qr-frame.active {
    display: block !important;
}


/* =========================================================
   QR CORNERS
   ========================================================= */

.lify-camera-qr-corner {
    position: absolute !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border-color: #fff !important;
    border-style: solid !important;
    border-width: 0 !important;

    background: transparent !important;

    filter:
        drop-shadow(
            0 1px 4px rgba(0, 0, 0, 0.65)
        );

    z-index: 2 !important;
}


/* =========================================================
   QR TOP LEFT
   ========================================================= */

.lify-camera-qr-corner.top-left {
    top: 0 !important;
    left: 0 !important;

    border-top-width: 4px !important;
    border-left-width: 4px !important;

    border-radius: 8px 0 0 0 !important;
}


/* =========================================================
   QR TOP RIGHT
   ========================================================= */

.lify-camera-qr-corner.top-right {
    top: 0 !important;
    right: 0 !important;

    border-top-width: 4px !important;
    border-right-width: 4px !important;

    border-radius: 0 8px 0 0 !important;
}


/* =========================================================
   QR BOTTOM LEFT
   ========================================================= */

.lify-camera-qr-corner.bottom-left {
    left: 0 !important;
    bottom: 0 !important;

    border-left-width: 4px !important;
    border-bottom-width: 4px !important;

    border-radius: 0 0 0 8px !important;
}


/* =========================================================
   QR BOTTOM RIGHT
   ========================================================= */

.lify-camera-qr-corner.bottom-right {
    right: 0 !important;
    bottom: 0 !important;

    border-right-width: 4px !important;
    border-bottom-width: 4px !important;

    border-radius: 0 0 8px 0 !important;
}


/* =========================================================
   QR STATUS
   ========================================================= */

.lify-camera-qr-status {
    position: absolute !important;

    left: 50% !important;
    bottom: -52px !important;

    width: max-content !important;
    max-width: 90vw !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 7px 14px !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;

    color: #fff !important;

    font-size: 14px !important;
    line-height: 20px !important;

    font-weight: 500 !important;

    background: rgba(0, 0, 0, 0.60) !important;

    border-radius: 20px !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    pointer-events: none !important;

    z-index: 5 !important;
}


/* =========================================================
   CAMERA BOTTOM BAR
   ========================================================= */

   .lify-camera-bottom {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;

    z-index: 20 !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    /*
     * Keep all controls together like Instagram.
     * No space-between.
     */
    gap: 34px !important;

    padding:
        20px
        28px
        calc(20px + env(safe-area-inset-bottom))
        28px !important;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72),
        rgba(0, 0, 0, 0)
    ) !important;
}



/* =========================================================
   QR ICON
   ========================================================= */



.camIcon {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;

  min-width: 32px !important;
  min-height: 32px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;


}

.camIcon:active {
  transform: scale(0.92);
}

.camIcon.active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.8);
}



.camIcon .icon {
  width: 26px !important;
  height: 22px !important;

  position: relative !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  border-radius: 5px !important;
}

.camIcon .icon::before {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

.camIcon .icon::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}



/* =========================================================
   GALLERY
   ========================================================= */


/* =========================================================
   GALLERY ICON
   ========================================================= */




/* =========================================================
   SHUTTER
   ========================================================= */

   .lify-camera-shutter {
    position: relative !important;

    width: 78px !important;
    height: 78px !important;

    min-width: 78px !important;
    min-height: 78px !important;

    flex: 0 0 78px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border: 4px solid #fff !important;

    border-radius: 50% !important;

    background: transparent !important;

    cursor: pointer;

    transition:
        transform 0.12s ease,
        background 0.12s ease;
}


/*
 * Absolutely center the shutter inner circle.
 */
.lify-camera-shutter-inner {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 60px !important;
    height: 60px !important;

    min-width: 60px !important;
    min-height: 60px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translate(-50%, -50%) !important;

    box-sizing: border-box !important;

    border-radius: 50% !important;

    background: #fff !important;

    display: block !important;
}

.lify-camera-shutter:active {
    transform: scale(0.92);
}

.lify-camera-shutter:active
.lify-camera-shutter-inner {
    transform:
        translate(-50%, -50%)
        scale(0.92) !important;
}

.lify-camera-gallery-spacer {
  display: none !important;
}
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .lify-camera-top {
        height: 72px !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .lify-camera-qr-frame {
        width: min(76vw, 290px) !important;
        height: min(76vw, 290px) !important;
    }
    .lify-camera-bottom {
      gap: 24px !important;

      padding-left: 18px !important;
      padding-right: 18px !important;

      height: 140px !important;
      min-height: 140px !important;
  }

  .lify-camera-shutter {
      width: 72px !important;
      height: 72px !important;

      min-width: 72px !important;
      min-height: 72px !important;

      flex-basis: 72px !important;
  }

  .lify-camera-shutter-inner {
      width: 56px !important;
      height: 56px !important;

      min-width: 56px !important;
      min-height: 56px !important;
  }

  .lify-camera-qr-toggle,
  .lify-camera-gallery {
      width: 48px !important;
      height: 48px !important;

      min-width: 48px !important;
      min-height: 48px !important;

      flex-basis: 48px !important;
  }



}


/* =========================================================
   LANDSCAPE
   ========================================================= */

   @media (orientation: landscape) {

    .lify-camera-bottom {
        height: 120px !important;
        min-height: 120px !important;

        gap: 30px !important;

        padding-top: 12px !important;
        padding-bottom:
            calc(12px + env(safe-area-inset-bottom)) !important;
    }

}


@media (min-width: 769px) {

  .lify-camera-bottom {

      padding-left: 98px !important;
      padding-right: 28px !important;
  }

}

@media (max-width: 768px) {

  .lify-camera-bottom {
      gap: 28px !important;

      padding-left: 24px !important;
      padding-right: 24px !important;

      height: 150px !important;
      min-height: 150px !important;
  }

}



/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .lify-camera-qr-frame {
        width: min(55vh, 360px) !important;
        height: min(55vh, 360px) !important;

        max-width: 360px !important;
        max-height: 360px !important;
    }


    .lify-camera-qr-corner {
        width: 42px !important;
        height: 42px !important;
    }


    .lify-camera-bottom {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}
/* settings */


.frame {
  position: relative;
  margin: auto;
  display: flex;
  margin-bottom: 1px;
  min-width: 0;
}
.wrapper {
  display:contents;

}

.content-container {
  margin: auto;
  /*font-family: var(--font-sans-serif);
  color: var(--text-color);
  line-height: 1.35;
  word-break: keep-all; 
  white-space: normal;
  */
}
/* Basic text elements */
/*
.content-container span,
.content-container i,
.content-container a,
.content-container p {
  box-sizing: border-box;

  font-size: clamp(0.75rem, 1vw, 0.90rem);
  line-height: 1.45;
  letter-spacing: 0.3px;
  color: var(--text-color);

  word-break: keep-all;
  overflow-wrap: normal;
  white-space: normal;
}


*/
.content-container span,
.content-container i,
.content-container {
  box-sizing: border-box;

  font-size: clamp(0.75rem, 1vw, 0.90rem);
  line-height: 1.45;
  letter-spacing: 0.3px;
  color: var(--text-color);

  word-break: keep-all;
  overflow-wrap: normal;
  white-space: normal;
}
/* Bold emphasis */
.content-container .bold {
  font-weight: bold;
}

/* Ensure stacking context doesn't break layout */
.content-container * {
  z-index: 10;
  align-items:baseline;
}



/* ============================================
 RESPONSIVE BREAKPOINTS
 ============================================ */

/* Small screens (phones < 480px) */
@media (max-width: 480px) {
  .icon-map .icon-wrapper {
      width: 32px;
      height: 32px;
  }
  .icon-map .icon-text {
      font-size: 11px;
      padding: 1px 3px;
  }
}

/* Tablets (481px–768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .icon-map .icon-wrapper {
      width: 36px;
      height: 36px;
  }
  .icon-map .icon-text {
      font-size: 12px;
  }
}

/* Desktop large screens (> 1200px) */
@media (min-width: 1200px) {
  .icon-map .icon-wrapper {
      width: 44px;
      height: 44px;
  }
  .icon-map .icon-text {
      font-size: 14px;
  }
}

  
  /* ============================================================
     RESPONSIVENESS
     ============================================================ */
  
  /* ---------- Mobile: ≤480px ---------- */
  @media (max-width: 480px) {
    .context-default  {
      font-size: clamp(0.85rem, 3.5vw, 0.9rem);
    }
  
    .context-default .small {
      font-size: clamp(0.75rem, 3vw, 0.9rem);
    }
  }
  
  /* ---------- Tablets: 481px–1024px ---------- */
  @media (min-width: 481px) and (max-width: 1024px) {
    .context-default  {
      font-size: clamp(0.80rem, 1.2vw, 0.9rem);
    }

  }
  
  /* ---------- Large Desktops: ≥1600px ---------- */
  @media (min-width: 1600px) {
    .context-default  {
      font-size: clamp(0.70rem, 0.7vw, 0.80rem);
    }
  }
  
  /* ---------- Ultra-wide screens: ≥2200px ---------- */
  @media (min-width: 2200px) {
    .context-default  {
      font-size: clamp(0.68rem, 0.5vw, 0.75rem);
    }
  }
  

/* end of loader */

@media (max-width: 1200px) {
  .Image-Xlarge img {
    width: 800px;
  }
}

@media (max-width: 992px) {
  .Image-large img {
    width: 600px;
  }

  .Image-Xlarge img {
    width: 600px;
  }
}

@media (max-width: 768px) {
  .Image-medium img {
    width: 300px;
  }

  .Image-large img,
  .Image-Xlarge img {
    width: 400px;
  }
}

@media (max-width: 576px) {
  .Image-small img {
    width: 80px;
  }

  .Image-medium img {
    width: 200px;
  }

  .Image-large img,
  .Image-Xlarge img {
    width: 300px;
  }
}

@media (max-width: 375px) {
  .Image-thumbnail img,
  .Image-icon img {
    width: 25px;
  }

  .Image-small img {
    width: 60px;
  }

  .Image-medium img {
    width: 150px;
  }
}


@media (max-width: 901px) {
  .view-style-frame {
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }
}



@media (max-width: 992px) {
  .social-media-field-filters {
    display: none;
  }
}





/* Responsive font scaling */
@media (max-width: 575.98px) {
  .content-container span, .content-container i, .content-container {
    font-size: 0.7rem ;  /* Small phones */
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .content-container span, .content-container i, .content-container {
    font-size: 0.7rem ;     /* Small screens */
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .content-container span, .content-container i, .content-container {
    font-size: 0.7rem ;  /* Medium screens */
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .content-container span, .content-container i, .content-container {
    font-size: 0.8rem ;   /* Large screens */
  }
}

@media (min-width: 1200px) {
  .content-container span, .content-container i, .content-container {
    font-size: 0.9rem ;   /* Extra large screens */
  }
}


/* ----- Icon Responsive  ----- */
@media (max-width: 1100px) {

  .icon img {
    max-height: 36px ;
  }

}

/* Mobile: 1 per row */
@media (max-width: 370px) {

  .icon img {
    max-height: 24px ;
  }
}


/* Tablet */

@media (max-width: 768px) {
  
  .icon {

    font-size: 1.1rem ;
  }

  .icon i {
    font-size: 1.1rem ;
  }

}
@media (max-width: 370px) {
  .icon {
    width: 40px ; 
    height: 40px ; 
    font-size: 1.1rem ;
  }
}


iframe {
  width: 100%;       
  max-width: 100%;   
  border: none;      
  border-radius: 8px;   
  display: block;     
  object-fit: cover;  
}

.headerGrid {
  flex: 0 0 64px;
  height: 64px;
  min-height: 64px;
  max-height: 64px;

  width: calc(100% - 70px);
  margin-left: 70px;
  margin-bottom: 0;

  order: 1;
  z-index: 1000;

  box-sizing: border-box;
  overflow: hidden;
}



.feedGrid {
  display: flex;
  align-items: flex-start;
  margin: 0;
}
.stickyContainer {
  z-index : 200;
}
.langSelector {
  flex : 1 1 auto;
}

.engageContainer {
  bottom: 0;
}
.engageContainer .settings-container {
  display: flex;
  justify-content: end;
  position: absolute;
  top:0;
  right: 10%;
  z-index: 11;

}

.bottom {
  bottom: 0;
  margin-bottom: 0;
}
.engageContainer.bottom .flow-steps{
  max-height: 190px;
  bottom: 0;
}
.engageContainer.right {
  top:0;
  max-width: 30%;
  right:0;
}
.engageContainer.right .flowProcess-box {
  max-height: 600px;
  margin: 0;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute !important;
}

.engageContainer.liner {
  max-height: 48px;
}

/* =========================
   CONTAINER LAYOUT ONLY
========================= */

.reaction-container {
  display: flex;
  flex-direction: column;
  gap: 16px;

  padding: 18px;
}

/* QUESTION */
.reaction-container .reaction {
  margin: 0;
}

/* OPTIONS ROW */
.reaction-container .options {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: stretch;
}

/* EACH OPTION WRAPPER */
.reaction-container .selection {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 10px;
  cursor: pointer;
}


.controllerGrid {
  top:12%;
  right:5%;
  position: absolute !important;
  z-index: 100;
  margin:0;
  width: auto;

}


.footerGrid {
  flex:0 0 70px;
  order:2;
  
  z-index: 10000 !important;
}
.contentGrid {
  flex:1;
  order:3;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  margin-right: 0;
  width:calc(100% - 70px);
  margin-left:70px;  
  background-color: var(--color-light);

}

.contentGrid img {
  width: 100%;
  height: 100% ;
  object-fit: cover;  
}
.searchGrid {
  z-index: 10000 !important;
  padding: 0;
  margin: 0;
  position: absolute;
  top:64px;

}
@media (max-width: 786px) { 
  .headerGrid {
    margin-left:0;
    width:100%;

  }

  .overlay {
    left: 0;
    bottom: var(--footer-height);
    height: auto;
    max-height: none;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  .contentGrid {
    margin-left:0;
    padding-bottom:var(--footer-height);
    order:2;
    width:100%;
  }

  .footerGrid {
    order:3;
  }

}


/* Frame borders */
.productFrame {
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
}
.titleFrame {
  min-width: 100%;

}
.titleFrame .csatIcon {
  order : 4;
  justify-content: flex-end !important;
  text-align: end !important;
  flex:1 1 auto;
}

/* Browse mode wrapper */
.browse {

  align-items: center;
  min-height: 100%;
}


.resizer {
  width: 2px;
  cursor: col-resize;
  position: absolute;
  color: #ccc;
  z-index: 10;
  display: block !important;
}

.resizer:hover {
  background-color: #999;
}


.reactiveWizard .engagement-box {
  order : 2;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  
}
.reactiveWizard .meta-box {
  display: flex;
  flex-direction: column;
}
.reactiveWizard .meta-box p {
 margin: 1px;
}
.reactiveWizard .meta-box [data-engage-id="start"] {
  align-self: end;
}
.reactiveWizard .progress-box {
 order : 4;
 width: max-content;
}

.reactiveWizard .status-box {
 order : 1;
 width: max-content;

}

.reactiveWizard .action-box {
  order : 3;
  align-items: end;
  justify-content: end;
}

.wizard-engage-container {
  display: flex;
  flex-direction: column;
  
}

.flow-steps {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}
/*
.sub-container-collection-filter {
  padding: 10px;
  justify-content: center;
  align-items: center;
}
.sub-container-search-filter {
  max-width: 700px;
  justify-content: center;
  align-items: center;
}
*/

.container-prime {
  margin: 0;
}
.sub-container-meta {
  -webkit-overflow-scrolling: touch;
}
/*

.sub-container-category-filter {
  margin: 0;
  padding: 0;
  background:
  radial-gradient(circle at 28% 18%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.65) 18%,
      transparent 45%),
  radial-gradient(circle at 95% 50%,
      rgba(255,255,255,.25) 0%,
      transparent 45%),
  radial-gradient(circle at 50% 120%,
      rgba(120,140,170,.18) 0%,
      transparent 55%),

  linear-gradient(
      160deg,
      rgba(255,255,255,.35),
      rgba(245,247,250,.18) 50%,
      rgba(220,228,240,.28)
  );


  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.95),
    inset 12px 12px 24px rgba(255,255,255,.18),
    0 18px 40px rgba(0,0,0,.12),
    0 0 25px rgba(255,255,255,.35);

  backdrop-filter: blur(18px) saturate(180%);
}
*/


.sub-container-category-filter{

  position:relative;

  overflow:hidden;

}

.sub-container-category-filter::before,
.sub-container-category-filter::after{

  content:"";

  position:absolute;

  top:0;

  width:40px;

  height:100%;

  z-index:20;

  pointer-events:none;

}


.container-footer {
  display: flex;
  flex-direction: row;
}




/* end of themes*/
.justify-start {
  justify-content: flex-start !important;
  text-align: start !important;
  align-items: start !important;
}

.justify-center {
  justify-content: center !important;
  text-align: center !important;
  align-items: center !important;
}

.justify-end {
  justify-content: flex-end !important;
  text-align: end !important;
}

.auto {
  width: auto;
}
.flex-spacer {
  flex-grow: 1;
}

/* Justify Content: Space Between */
.justify-space-between {
  justify-content: space-between !important;
}

/* Justify Content: Space Around */
.justify-space-around {
  justify-content: space-around !important;
}

/* Justify Content: Space Evenly */
.justify-space-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-baseline {
  align-items: baseline;
}
.align-self-start {
  align-self: flex-start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

.align-content-start {
  align-content: flex-start;
}

.align-content-center {
  align-content: center;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-between {
  align-content: space-between;
}
.align-content-around {
  align-content: space-around;
}

.style-row {
  display: flex;
  flex-direction: row;
  gap:8px;
}
.style-full-row {
  display: flex;  
  gap: 8px; /* Adjust spacing between icon and text */
  width: 100%; /* Ensure container spans the desired width */
  flex-wrap: nowrap;
}
/* Column Layout: Text Under Icon */
.style-column {
  display: flex;
  flex-direction: column;
}
.style-centered {
  justify-content: center; /* Center content horizontally */
  align-items: center;     /* Center content vertically */
}
.style-stretch {
  display: flex;
  flex-direction: column;
  align-items: stretch;  
  justify-content: flex-start;
  gap: 6px;
 
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}

/* Centered Vertical Style: Center Only Vertically */
.style-centered-vertical {
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: flex-start; /* Align items at the top */
  height: 100%; /* Ensure content is centered vertically */
}
/* Base style: vertical scroll by default */

/* ============================= */
/* Responsive Fancy Scroll       */
/* ============================= */

.style-responsive-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;

  overflow-y: auto;
  overflow-x: hidden;
  gap: 15px;

  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(120,120,120,0.35) transparent;
 /* scrollbar-gutter: stable;*/
}

.style-responsive {
  display: flex;
  flex-direction: column;
}

/* ============================= */
/* Webkit Scrollbar              */
/* Chrome / Safari / Edge        */
/* ============================= */

.style-responsive-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.style-responsive-scroll::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 20px;
}

.style-responsive-scroll::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.28);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.style-responsive-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(80, 80, 80, 0.45);
}

/* cleaner fade edges */
.style-responsive-scroll {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%
  );
}

/* ============================= */
/* Mobile Layout                 */
/* ============================= */

@media (max-width: 479px) {

  .style-responsive {
    flex-direction: row;
  }

  .style-responsive-scroll {
    flex-direction: row;
    flex-wrap: nowrap;

    overflow-x: auto;
    overflow-y: hidden;

    padding-left: 20px;
    padding-right: 50px;

   /* touch-action: pan-x; */

    /* horizontal fade for mobile */
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
  }
}

.style-masonry {
  flex: 1 1 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Vertical scroll container */
[data-event="scroll"],
.style-vertical-scroll {
  
  overflow-y: auto;
  overflow-x: hidden;
  gap: 10px;

  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(120,120,120,0.35) transparent;
}

/* Horizontal scroll container */
.style-horizontal-scroll {
 
  overflow-x: auto;
  overflow-y: hidden;
  width: 100% !important;
  position: relative !important;

  gap: 15px;
  padding-right: 50px !important;
  align-items: end;

  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /*touch-action: pan-x; */

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(120,120,120,0.35) transparent;
  scroll-snap-type: x proximity;
  flex-wrap: unset !important;

}


/* Optional item styling */
.style-vertical-scroll .scroll-item {
  flex: 0 0 auto;
  padding: 5px;
  border-radius: 8px;
}

/* ============================= */
/* Chrome / Safari / Edge        */
/* ============================= */

.style-vertical-scroll::-webkit-scrollbar,
.style-horizontal-scroll::-webkit-scrollbar,
[data-event="scroll"]::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.style-vertical-scroll::-webkit-scrollbar-track,
.style-horizontal-scroll::-webkit-scrollbar-track,
[data-event="scroll"]::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 20px;
}

.style-vertical-scroll::-webkit-scrollbar-thumb,
.style-horizontal-scroll::-webkit-scrollbar-thumb,
[data-event="scroll"]::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.28);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.style-vertical-scroll:hover::-webkit-scrollbar-thumb,
.style-horizontal-scroll:hover::-webkit-scrollbar-thumb,
[data-event="scroll"]:hover::-webkit-scrollbar-thumb {
  background: rgba(80, 80, 80, 0.45);
}

/* Hidden until hover feel */
/*
.style-vertical-scroll,
.style-horizontal-scroll,
[data-event="scroll"] {
  scrollbar-gutter: stable;
}
*/

.style-vertical-scroll,
.style-horizontal-scroll {
    mask-image: none;
    -webkit-mask-image: none;
}
/*
.style-vertical-scroll,
.style-horizontal-scroll {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%
  );
}
*/

.position-absolute {
  position: absolute !important;
}
.position-centered {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute !important;
  z-index: 100;
}
.position-centered:hover {
  transform: translate(-50%, -50%) !important;
}

.position-centered-full {
  top: 50%;
  transform: translateY(-50%);
  position: absolute !important;
  z-index: 100;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%; /* or max-width: 600px; as needed */
}

.position-centered-full:hover {
  transform: translateY(-50%) !important;
}



.position-centered-width {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.position-centered-width:hover {
  transform: translateX(-50%) !important;
}
.position-top-right-corner {
  top: 0;
  right: 0;
  position: absolute !important;
  z-index: 100;
  margin:0;

}

.position-top-middle {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute !important;
  z-index: 100;

}

.position-top-left-corner {
  top: 0;
  left: 0;
  position: absolute !important;
  z-index: 100;

}

.position-top-middle:hover {

  transform: translateX(-50%) !important;
}


.position-bottom-right-corner {
  bottom: 0;
  right: 0;
  position: absolute !important;
  z-index: 100;

}

.position-bottom-middle {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute !important;
  z-index: 100;

}

.position-bottom-left-corner {
  bottom: 0;
  left: 0;
  position: absolute !important;
  z-index: 100;

}

.position-bottom-middle:hover {

  transform: translateX(-50%) !important;
}

.position-left-full-height {
  top: 0;
  left: 0;
  height: 100%;
  position: absolute !important;
  z-index: 100;

}

.position-footer {

  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  
  width: 70px;
  height: auto;
  
  overflow-y: auto;
  overflow-x: hidden;
  
}



@media (max-width: 786px) {

  .position-footer {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;

    width: 100%;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: space-around;

    overflow: visible;
    z-index: 11;
  }

}

.position-right-full-height {
  top: 0;
  right: 0;
  height: 100%;
  position: absolute !important;
  z-index: 100;

}

.position-top-full-width {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute !important;
    z-index: 100;

}

.position-bottom-full-height {
  bottom: 0;
  left: 0;
  width: 100%;
  position: absolute !important;
  z-index: 100;

}

.position-left-full-height:hover {
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
}

.position-right-full-height:hover {
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
}

.position-top-full-width:hover {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

.position-bottom-full-height:hover {
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

.position-sticky-bottom-right {
  position: fixed;
  bottom: 20px; 
  right: 20px; 
  z-index: 100; 

}
.sticky {
  position: sticky !important;
  z-index: 100;

}

.position-sticky-bottom-right:hover {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
}

.sticky:hover {
  position: sticky !important;
}

.stickyFeed {
  position: sticky !important;
  z-index: 200;
  background-color: white;

}

/* ========== DESKTOP / DEFAULT ========== */

.position-sticky-scroll {
  position: sticky;
  top: 0;
  align-self: flex-start;

  height: 100vh;
  overflow: visible;

  background: #fff;
  margin: 0;
}


.position-sticky-stage {
  position: sticky !important;
  align-self: flex-start;
  overflow: hidden;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  margin-top: 0;
  display: flex;
  background: #fff;
  transition: height 0.3s ease;
  width: 100%;

}



/* Cookie warning container */
#cookie-warning {
  background-color: var(--background-warning); /* Yellow background for warning */
  color: var(--color-dark); /* Dark text color */
  border-radius: 8px;
  padding: 15px 20px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  max-width: 90%;
  width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Inner content */
#cookie-warning small {
  display: block;
  line-height: 1.5;
}

/* Close button */
#cookie-warning .close-warning {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-weight: bold;
  color: #000;
  cursor: pointer;
}

[data-engage-type="mapSection"] {
  width: 100% !important;
  height: 100% !important;
}
[data-engage-type="spaceContainer"] {
  height: 200px;
  display: block !important;

}





/* Admin Classes */
.mini {
  max-width: 220px !important;
}
.small {
  max-width: 400px !important;
}
.medium {
  max-width: 600px !important;
}
.large {
  max-width: 800px !important;
}
.xlarge {
  max-width: 1200px !important;
}


.extended-content {   /* fetch ds */
  width: 100%;              
  box-sizing: border-box;   
  overflow: hidden;         
  transition: max-height 0.3s ease; 
}







/* Circle */
.shape-circle {
  border-radius: 50%;
}

/* Square */
.shape-square {
  border-radius: 0;
}

/* Oval */
.shape-oval {
  border-radius: 50% / 25%; /* Elongated circle */
}

/* Rounded Rectangle */
.shape-rounded-rect {
  border-radius: 15px; /* Rounded corners for rectangle */
}

/* Hexagon */
.shape-hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Star */
.shape-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Diamond */
.shape-diamond {
  transform: rotate(45deg); /* Rotated square to create diamond shape */
}

/* Heart */
.shape-heart {
  clip-path: polygon(50% 0%, 0% 30%, 50% 100%, 100% 30%);
}

/* Triangle */
.shape-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Parallelogram */
.shape-parallelogram {
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
}




/* ===================================================================
 BASELine
 =================================================================== */


p[data-obj-id],
a[data-obj-id],
i[data-obj-id] {
  gap: 8px;
}



 img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
/* =========================
   VECTOR BASE (NO GRAYSCALE FILTER)
   ========================= */

   .vector {
    opacity: 1;
    filter: none; /* IMPORTANT: remove grayscale hack */
    transition: all 0.25s ease;
  }
  
  /* optional inactive state if you ever need it */
  .vector.inactive {
    opacity: 0.35;
  }
  
  /* =========================
     WIND ROSE BASE COLORS
     ========================= */
  
  .wind-rose {
    overflow: visible;
  }
  
  /* GRID CIRCLES */
  .wind-rose circle {
    fill: none;
    stroke: rgba(148, 163, 184, 0.25); /* slate-400 soft */
    stroke-width: 1;
  }
  
  /* center dot */
  .wind-rose .center-dot {
    fill: rgba(148, 163, 184, 0.6);
    stroke: none;
  }
  
  /* default sector (VERY IMPORTANT: visible but muted) */
  .wind-rose .sector {
    fill: rgba(148, 163, 184, 0.06);
    stroke: rgba(148, 163, 184, 0.12);
    stroke-width: 1;
    transition: all 0.25s ease;
  }
  
  /* labels */
  .wind-rose text {
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    transition: all 0.25s ease;
  }
  
  /* =========================
     ACTIVE STATE (IMPORTANT FIX)
     ========================= */
  
  .wind-rose .dir.active .sector {
    fill: rgba(56, 189, 248, 0.18); /* cyan glow */
    stroke: rgba(56, 189, 248, 0.55);
    opacity: 1;
  }
  
  .wind-rose .dir.active text {
    fill: rgba(226, 232, 240, 0.95);
  }
  
  /* hover boost */
  .wind-rose .dir.active:hover .sector {
    fill: rgba(56, 189, 248, 0.28);
    stroke: rgba(56, 189, 248, 0.8);
  
    filter:
      drop-shadow(0 0 6px rgba(56, 189, 248, 0.25))
      drop-shadow(0 0 14px rgba(56, 189, 248, 0.15));
  }
.Image-BG, .Image-Full-H, .Image-Full-W, .Image-Xlarge,  .Image-thumbnail {
  flex-shrink: 0;
  /* position: absolute; */
}

.Image-BG img, .Image-Full-H img, .Image-Full-W img, .Image-Xlarge img,  .Image-thumbnail img {
    /* position: absolute; */
    object-fit: contain !important;
    z-index: 0;
    border-radius: 4px;
    /* not to ERSIN abousoout or none */

}

.Image-context {
  width: auto !important;
  height: 24px !important;
  padding: 4px !important;
}

.Image-cover  {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

}
.Image-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;

}
/* Thumbnail image */
.Image-thumbnail img {
  width: 50px !important;
  height: auto;
  max-width: 100%;
}

.Image-badge img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eee;
}

/* Icon image */
.Image-icon img {
  width: 28px !important;
  height: auto;
  max-width: 100%;
}

/* Small size image */
.Image-small img {
  width: 100px !important;
  height: auto;
  max-width: 100%;
}

/* Small size image */
.Image-regular img {
  width: 250px !important;
  height: auto;
  max-width: 100%;
}

/* Medium size image */
.Image-medium img {
  width: 300px !important;
  height: auto;
  max-width: 100%;
}

/* Large size image */
.Image-large img {
  width: 650px !important;
  height: auto;
  max-width: 100%;
}

/* Extra Large size image */
.Image-Xlarge img {
  width: 1200px !important;
  height: auto;
  max-width: 100%;
}

/* Full width image */
.Image-Full-W img {
  width: 100%;
  height: auto;
 /* position: absolute; */
  left:0;
  z-index: 0;
  max-height: 100%;
}

/* Full height image */
.Image-Full-H img {
  height: 100%;
  width: auto;
  top:0;
  left:0;
  z-index: 0;
  max-width: 100%;

}

.Image-cover img,
.Image-cover svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Thumbnail */
.Image-thumbnail img,
.Image-thumbnail svg {
  width: 50px !important;
  height: auto;
  max-width: 100%;
}

/* Badge */
.Image-badge img,
.Image-badge svg {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

/* Icon */
.Image-icon img,
.Image-icon svg {
  width: 36px !important;
  height: auto;
  max-width: 100%;
  border-radius: 2px;
}

/* Small */
.Image-small img,
.Image-small svg {
  width: 100px !important;
  height: auto;
  max-width: 100%;
}

/* Regular */
.Image-regular img,
.Image-regular svg {
  width: 250px !important;
  height: auto;
  max-width: 100%;
}

/* Medium */
.Image-medium img,
.Image-medium svg {
  width: 300px !important;
  height: auto;
  max-width: 100%;
}

/* Large */
.Image-large img,
.Image-large svg {
  width: 650px !important;
  height: auto;
  max-width: 100%;
}

/* XLarge */
.Image-Xlarge img,
.Image-Xlarge svg {
  width: 1200px !important;
  height: auto;
  max-width: 100%;
}

/* Full Width */
.Image-Full-W img,
.Image-Full-W svg {
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* Full Height */
.Image-Full-H img,
.Image-Full-H svg {
  height: 100%;
  width: auto;
  max-width: 100%;
}


.inline-vector {
  display:block;
  margin:auto;
  cursor:pointer;
}

.inline-vector .dir {
  opacity:.07;
  transition:all .25s ease;
}

.inline-vector .dir.active {
  opacity:1;
}

.inline-vector .dir:hover {
  opacity:1;
  filter:brightness(1.15);
}

.Image-BG  {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  z-index: 0;
}

/* Responsive behavior using media queries */
  
/* imageCut1 - Circular */


.imageCutCircularBorder {
  overflow: hidden !important;
  border-radius: 50% !important;
}

.imageCutCircularBorder img {
  object-fit: cover !important;
  border-radius: inherit !important;
}


.imageCutRoundedRectangle {
  overflow: hidden !important;
  border-radius: 15px !important;
}

.imageCutRoundedRectangle img {
  object-fit: cover !important;
  border-radius: inherit !important;
  border: 2px solid var(--side-color) !important;

}




.context-default {
  box-sizing: border-box;
  padding-right: 4px;

  font-size: clamp(0.90rem, 1vw, 1rem);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--text-color);

  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word; /* only if necessary */
  flex-direction: row;
}

/* Reset children so they behave naturally */
.context-default a,
.context-default p,
.context-default span {
  font: inherit;
  color: inherit;
}

/* Icons should not stretch */
.context-default i {
  width: auto;
  display: inline-block;
  vertical-align: baseline;
  color: inherit;
}


/* ===================================================================
 HOVER EFFECT — COLOR ONLY
 =================================================================== */

.context-default:hover {
  color: var(--support-color);
}

.context-default:hover * {
  color: inherit;
}


/* ===================================================================
 VARIANTS
 =================================================================== */

.shorten {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
/* Small */
.context-default.info {
  font-size: clamp(0.65rem, 0.9vw, 0.75rem);
  font-weight: 400;
}


/* Bold */
.context-default.bold {
  font-weight: 800;

  /* Only make THIS element flex */
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}


/* Thin */
.context-default.thin {
  font-weight: 300;
}


/* Underline */
.context-default.underline {
  text-decoration: underline;
}


/* Hover underline on specific item */
.context-default .action-option-item:hover {
  border-bottom: 1px solid var(--text-color);
}


/* Selected state */
.context-default.selected {
  color: var(--support-color);
  background: transparent;
  border: none;
}

.context-default .count {
border-bottom: 1px solid var(--text-color);

}

.context-color {
color: var(--text-color) !important;
}

/* Class for Side Context Color */
.context-side-color {
color: var(--text-side-color) !important;
}

/* Class for Alert Context Color */
.context-alert {
color: var(--text-alert-color) !important; /* Updated to use the variable */
}
.context-alert.form-check-input {
outline: 2px solid var(--text-alert-color);
outline-offset: 2px;
box-shadow: 0 0 4px var(--text-alert-color);
}

/* Class for Support Context Color */
.context-support, .context-support * {
color: var(--support-color) !important;
}

.context-white, .context-white * {
color: var(--color-white) !important;
}

.context-dark, .context-dark * {  
color: var(--text-dark) !important;
}

.context-muted, .context-muted * {
  font-size:.84rem;
  line-height:1.42;
  color:var(--engagement-text-muted);
  margin:0;
  max-width:95%;
}

.context-upper, .context-upper i {
  text-transform: uppercase;
}

.context-thin {
  font-style: italic;
  font-weight: 300;
}

.context-alias {
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(0, 0, 0, 0.6);
  text-align: right;
  margin-top: 12px;
  padding-right: 8px;
  user-select: none;
  letter-spacing: 0.03em;
  text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.context-wrap {
  word-wrap: break-word;
  white-space: pre-line;
}


.context-title {
  font-family: "Inter", "SF Pro Display", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  /*color: white;*/

  transition: letter-spacing 0.25s ease, opacity 0.25s ease;

}
.context-title:hover {
  letter-spacing: 0.22em;
  opacity: 0.85;
}

.context-header {
  font-size:1.05rem;

  font-weight:700;

  line-height:1.28;

  color:var(--text-color);

  margin:0;  
  letter-spacing: -.02em;
  transition: color .2s ease;
}
.context-header:hover {
  text-decoration: underline; 
}
.context-product-title span,
.context-product-title i,
.context-product-title p,
.context-product-title {

  font-size: clamp(0.75rem, 1vw, 0.90rem)  !important;
  font-weight: 600 !important;
  line-height: 21.5px !important;
  letter-spacing: -0.35px !important;
  margin: 0;
  padding: 0;
  text-decoration: none;

}


.context-category {
border-bottom: 0.4px solid var(--text-color);
width: auto;
}
.context-category:hover{
background-color: var(--side-color);
border-radius: 20px;
color: var(--side-color);
padding: 4px;
}
.context-category,
.context-category * {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
align-items: center;
}

.context-category p {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
align-items: center;
}
.context-category:hover  p {
font-size: 11px;

}
.context-category.selected {
text-decoration: underline; 

}
.context-category.selected,
.context-category.selected * {
text-decoration: underline !important;
color:var(--support-color) !important;
background: transparent !important;
border: none !important;
}

.context-category-options {
  display: flex;
  flex-direction: column;
}


.context-list {

width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: end;
white-space: nowrap;

}
.context-list:hover{
color: var(--side-color);
}
.context-list,
.context-list * {
font-size: 0.75rem !important;
line-height: 1.3 !important;
font-weight: 600;
text-transform: uppercase;
min-height: auto;

}
.context-list.small ,
.context-list.small * {
font-size: 0.65rem !important;
line-height: 1.3 !important;
font-weight: 400;
text-transform: uppercase;
}
.context-list.small:hover {
color: var(--side-color);
}
.context-list .action-option-item:hover {
border-bottom: 0.2px solid var(--text-color);
}

.context-list.selected {
text-decoration: underline; 

}
.context-list.selected,
.context-list.selected * {
text-decoration: underline !important;
color:var(--support-color) !important;
background: transparent !important;
border: none !important;
}


.context-page-title {
font-weight: 700;
font-size: 1.125rem;        /* ~18px */
margin-bottom: 12px;
border-bottom: 2px solid var(--engagement-border);
padding-bottom: 6px;
letter-spacing: 0.5px;
user-select: none;
line-height: 1.3;
}

/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
.context-header, .context-header i {
  font-size: 1.125rem;      /* ~18px */
}

.context-page-title {
  font-size: 1.25rem;       /* ~20px */
  margin-bottom: 16px;
  padding-bottom: 8px;
}
}

/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
.context-header, .context-header i {
  font-size: 1.25rem;       /* ~20px */
}

.context-page-title {
  font-size: 1.5rem;        /* ~24px */
}
}

.context-pulse {
display: inline-block;
animation: pulse 1.5s infinite;
}


/* Each button/item is a flex row */
.context-button {
  display: inline-flex;          /* inline-flex so it behaves like text but can flex */
  flex-direction: row;           /* row layout for count + label */
  align-items: center;           /* vertically center count and label */
  gap: 6px;                      /* spacing between count and label */
  padding: 6px 12px;             /* spacing inside pill */
  border-radius: 6px;            /* rounded corners */
  background-color: #f0f0f0;     /* pill background */
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin: 4px 4px 4px 0;         /* margin for wrapping */
  white-space: nowrap !important;
}

/* Hover effect */
.context-button:hover {
  background-color: #e0e0e0;
  transform: translateY(-1px);
}



.context-button.selected ,
.context-button.selected p,
.context-button.selected span,
.context-button.selected label {
color:  #f0f0f0;
}

/* Label */
.context-button .label {
flex: 1;
text-transform: capitalize;
}

.context-poi {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 3px 8px;
  border-radius: 999px;

  background: #f6f6f6;
  color: #555;

  font-size: 11px;
  font-weight: 500;
  line-height: 1;

  width: fit-content;
  max-width: 100%;
}

/* kill heavy wrapper visuals */
.context-poi .icon-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* icon becomes tiny or optional */
.context-poi .icon-wrapper {
  width: 14px;
  height: 14px;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* image icon shrink */
.context-poi img {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain;
}

/* label text */
.context-poi .icon-text {
  font-size: 11px;
  color: #666;
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* optional hover (subtle premium feel) */
.context-poi:hover {
  background: #ededed;
  color: #222;
}
@media (max-width: 768px) {

  .context-poi {
    padding: 0;
    background: transparent;
    gap: 0;
  }

  /* hide text completely */
  .context-poi .icon-text {
    display: none;
  }

  /* shrink icon to a micro badge */
  .context-poi .icon-wrapper {
    width: 18px;
    height: 18px;
  }

  .context-poi img {
    width: 16px !important;
    height: 16px !important;
  }

  /* remove any leftover spacing */
  .context-poi .icon-container {
    gap: 0;
  }
}
.context-cta {
  display: inline-block;
  color: var(--color-white); /* Keeps text white */
  background-color: var(--support-color); /* Strong, bright color for contrast */
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.3s ease-in-out, transform 0.2s ease;
  cursor: pointer;
  box-shadow: 0 4px 8px var(--pulse-btn-shadow); /* Reuse existing subtle shadow */
  }
  .context-cta a,
  .context-cta p,
  .context-cta i {
  color: var(--color-white);

}

.context-cta:hover {
  background-color: var(--pulse-btn-hover-bg); /* Warmer tone on hover */
  color: var(--color-white); /* Still readable on hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px var(--pulse-btn-hover-shadow);
}

.context-cta:active {
  background-color: var(--support-color); /* Match original background */
  transform: translateY(0);
  box-shadow: 0 4px 8px var(--pulse-btn-shadow);
}

.context-cta-primary {
  display: inline-block;
  color: var(--color-white);
  background: linear-gradient(180deg, var(--main-color), var(--side-color));
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1), -4px -4px 12px rgba(255, 255, 255, 0.2);
}

.context-cta-primary:hover {
  background: linear-gradient(145deg, var(--side-color), var(--main-color));
  transform: translateY(-2px); /* Slightly smaller hover effect for better UX */
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.15), -6px -6px 16px rgba(255, 255, 255, 0.2); /* Slightly stronger shadow */
}

.context-cta-primary:active {
  background: var(--main-color);
  transform: translateY(0);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.2); /* Softer, more refined shadow */
}
.context-cta-secondary {
display: inline-block;
color: var(--main-color);
background-color: var(--color-white);
padding: 12px 24px;
border: 2px solid var(--main-color);
border-radius: 8px;
text-decoration: none;
text-align: center;
transition: all 0.3s ease-in-out;
cursor: pointer;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1), -4px -4px 12px rgba(255, 255, 255, 0.2); /* Added shadow for depth */
}

.context-cta-secondary:hover {
background-color: var(--main-color);
color: var(--color-white);
border-color: var(--main-color);
transform: translateY(-2px); /* Slightly lift on hover */
box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.1), -6px -6px 16px rgba(255, 255, 255, 0.2); /* Slightly stronger shadow */
}

.context-cta-secondary:active {
background-color: var(--side-color);
color: var(--color-white);
border-color: var(--side-color);
transform: translateY(0); /* Removes hover effect when active */
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.2); /* Softer shadow for active state */
}
.context-cta-tertiary {
display: inline-block;
color: var(--main-color) !important;
background-color: var(--color-white) !important ;
padding: 10px; 
border: 2px solid var(--side-color);
border-radius: 8px;
text-decoration: none;
text-align: center;
transition: all 0.3s ease-in-out;
cursor: pointer;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1), -3px -3px 8px rgba(255, 255, 255, 0.2); /* Subtle depth */
}

.context-cta-tertiary:hover {
background-color: var(--side-color);
color: var(--support-color);
border-color: var(--side-color);
transform: translateY(-2px); /* Small lift on hover */
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1), -4px -4px 12px rgba(255, 255, 255, 0.2); /* Enhanced shadow */
}

.context-cta-tertiary:active {
background-color: var(--main-color);
color: var(--color-white);
border-color: var(--main-color);
transform: translateY(0); /* Button pressed effect */
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1), -3px -3px 8px rgba(255, 255, 255, 0.2); /* Softer shadow for pressed state */
}

.context-cta-pulsive {
display: inline-block;
color: var(--color-white);
background-color: var(--main-color);
padding: 14px 28px;
border: none;
border-radius: 50px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: pulse-animation 2s infinite ease-in-out;
}

.context-cta-pulsive:hover {
background-color: var(--side-color);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.context-cta-pulsive:active {
background-color: var(--hover-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.context-cta-pulsive {
display: inline-block;
color: var(--color-white) !important;
background-color: var(--main-color) !important;
padding: 14px 28px;
border: none;
border-radius: 50px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: pulse-animation 2s infinite ease-in-out;
}

/* Hover Effects */
.context-cta-pulsive:hover {
background-color: var(--side-color);
box-shadow: 0 0 18px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
transform: scale(1.05); /* Slightly scale up the button */
}

/* Active state */
.context-cta-pulsive:active {
background-color: var(--hover-color);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); /* Soft shadow for active state */
transform: scale(0.98); /* Slight scale down for pressed effect */
}



/* Custom Pulsing Effect Based on Color Themes */
.context-cta-pulsive-primary {
background-color: var(--main-color);
animation: pulse-animation 2s infinite ease-in-out;
}

.context-cta-pulsive-primary:hover {
background-color: var(--side-color);
}

.context-cta-pulsive-secondary {
background-color: var(--support-color);
animation: pulse-animation 2s infinite ease-in-out;
}

.context-cta-pulsive-secondary:hover {
background-color: var(--pulse-btn-hover-bg);
}

.context-cta-pulsive-warning {
background-color: var(--background-warning);
animation: pulse-animation 2s infinite ease-in-out;
color:white;
}

.context-cta-pulsive-warning *,
.context-cta-pulsive-warning *::before,
.context-cta-pulsive-warning *::after {
background-color: inherit;
color: inherit;
}


.context-cta-pulsive-warning:hover {
background-color: var(--pulse-btn-hover-bg);
}

.context-cta-pulsive-info {
background-color: var(--background-info);
animation: pulse-animation 2s infinite ease-in-out;
}

.context-cta-pulsive-info:hover {
background-color: var(--pulse-btn-hover-bg);
}

.context-cta-cut-corners {
display: inline-block;
color: var(--color-white);
background-color: var(--main-color);
padding: 14px 28px;
border: none;
border-radius: 10px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.3s ease-in-out;
position: relative;
overflow: hidden;
animation: pulse-animation 2s infinite ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.context-cta-cut-corners:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
background-color: var(--color-white);
transform: skew(45deg);
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow on the corner cut */
}

/* Hover Effects */
.context-cta-cut-corners:hover:before {
transform: skew(0deg); /* Fully straighten the corner cut on hover */
}

.context-cta-cut-corners:hover {
background-color: var(--side-color); /* Change background color */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
transform: scale(1.05); /* Slight scale up on hover for a subtle interactive feel */
}

.context-cta-cut-corners:active {
background-color: var(--hover-color); /* Change background on click */
transform: scale(0.98); /* Slight scale down for pressed effect */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Slightly softened shadow on active */
}

.context-cta-split-color {
display: inline-block;
background: linear-gradient(135deg, var(--main-color) 50%, var(--side-color) 50%);
padding: 14px 28px;
border: none;
border-radius: 10px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.4s ease-in-out; /* Slightly slower transition for smooth effect */
position: relative;
overflow: hidden;
animation: pulse-animation 2s infinite ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.context-cta-split-color:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-white);
transform: skew(-45deg);
z-index: -1;
transition: all 0.3s ease;
}

.context-cta-split-color:hover {
background: linear-gradient(135deg, var(--side-color) 50%, var(--main-color) 50%);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Increased shadow on hover for better feedback */
transform: scale(1.05); /* Slight scale-up for hover effect */
}

.context-cta-split-color:hover:after {
transform: skew(0deg); /* Smooth transition to fully straighten the skew on hover */
}

.context-cta-split-color:active {
background: linear-gradient(135deg, var(--hover-color) 50%, var(--side-color) 50%);
transform: scale(0.98); /* Slight scale-down for pressed effect */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Slightly softer shadow on active */
}
.context-cta-neon {
display: inline-block;
color: var(--color-white);
background-color: var(--main-color);
padding: 14px 28px;
border: none;
border-radius: 50px;
text-decoration: none;
text-align: center;
cursor: pointer;
box-shadow: 0 0 10px var(--side-color), 0 0 20px var(--side-color), 0 0 30px var(--side-color); /* Neon glow effect */
transition: all 0.3s ease-in-out;
animation: pulse-animation 2s infinite ease-in-out;
text-transform: uppercase; /* Adding uppercase for a stronger visual impact */
}

.context-cta-neon:hover {
background-color: var(--side-color);
box-shadow: 0 0 20px var(--pulse-btn-hover-bg), 0 0 40px var(--pulse-btn-hover-bg), 0 0 60px var(--pulse-btn-hover-bg);
transform: scale(1.05); /* Slight scale-up for hover effect */
}

.context-cta-neon:active {
background-color: var(--pulse-btn-hover-bg);
box-shadow: 0 0 15px var(--pulse-btn-hover-bg), 0 0 30px var(--pulse-btn-hover-bg), 0 0 45px var(--pulse-btn-hover-bg); /* Deeper glow on active */
transform: scale(0.98); /* Slight scale-down for pressed effect */
}
.context-cta-outline-cut {
display: inline-block;
color: var(--main-color);
background-color: transparent;
padding: 14px 28px;
border: 2px solid var(--main-color);
border-radius: 50px;
text-decoration: none;
text-align: center;
cursor: pointer;
position: relative;
overflow: hidden;
animation: pulse-animation 2s infinite ease-in-out;
transition: all 0.3s ease-in-out;
text-transform: uppercase; /* Adding uppercase for stronger visual appeal */
}

.context-cta-outline-cut:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--main-color);
z-index: -1;
transition: all 0.3s ease;
transform: scale(1); /* Keep it at scale 1 initially */
}

.context-cta-outline-cut:hover {
color: var(--color-white); /* Change text color on hover for better contrast */
background-color: var(--main-color); /* Fill background on hover */
}

.context-cta-outline-cut:hover:before {
transform: scale(1.4); /* Larger scale for more visual impact */
}

.context-cta-outline-cut:active {
background-color: var(--side-color); /* Active state with side color */
color: var(--color-white); /* Text color change on active */
box-shadow: 0 0 10px var(--side-color), 0 0 20px var(--side-color); /* Light shadow effect */
}
.context-cta-3d {
display: inline-block;
color: var(--color-white);
background-color: var(--main-color);
padding: 14px 28px;
border: none;
border-radius: 10px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.2);
animation: pulse-animation 2s infinite ease-in-out;
text-transform: uppercase; /* Added for a bolder, modern look */
}

.context-cta-3d:hover {
background-color: var(--side-color);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 15px 40px rgba(0, 0, 0, 0.4);
transform: translateY(-5px); /* Hover effect with subtle lift */
}

.context-cta-3d:active {
background-color: var(--pulse-btn-hover-bg);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.3);
transform: translateY(2px); /* Slightly pushed-down effect on active state */
}
.context-cta-box {
border: 1px solid var(--text-color);
padding: 12px;
width: auto;
}
.context-cta-box:hover,
.context-cta-box:hover * {
border: 1px solid var(--text-color);
background-color: var(--text-color);
color: var(--side-color);
}


.context-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;


  border-radius: 6px;

  background: rgba(0, 0, 0, 0.04);

  cursor: pointer;

  transition: all 0.15s ease;
}
.context-action p,
.context-action .icon i {
  font-size: 12px;
  font-weight: 600;
  color: #666;


}

.context-action:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #111;
}
.context-action.close {
  margin-right: 20px;
}
.context-action.close:hover {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}
.context-action.reset:hover {
  background: rgba(0, 123, 255, 0.12);
  color: #007bff;
}
.context-action.confirm {
  background: rgba(3, 187, 187, 0.15);
  color: #037b7b;
}




/* defaults */
.context_row {
  gap: 8px; 
  align-items: baseline; 
  word-break: keep-all;
}
.context_row > * {
  margin: 0;
}

/*
.context_paragraph {

  display: flex;
  flex-direction: column;
  gap: 8px; 
  margin-bottom: 4px;

}

.context_paragraph p {
  margin: 0;
  line-height: 1.2;
}


.context_list {
  display: flex;
  flex-direction: column !important;
  gap: 8px; 
  margin-bottom: 4px;
  align-items: start !important;
}
  
*/

.icon-container {
  display: flex;
  justify-content: center;
}

.icon {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  width: 80% ;
  height: 80% ;
}
.icon i {
  padding: 0;
  margin: 0;
}

.context-image {
  height: 16px !important;
  width: auto !important;
  margin-right: 6px;
}
.icon img {
  max-height: 44px;
  width: auto ;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  padding: 4px;

}


.icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  gap: 4px;
  margin-right: 4px;
  width: 26px;
  height: 26px;

}
.icon-text {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.icon-text:empty {
  display: none !important;
}
      
.icon-text-under  {
  display: flex;  
  align-items: center;
  text-align: center;
}
.icon-text-under .icon-container {
  flex-direction: column;
  align-items: center;

}
.icon-only .icon-text {
  display: none;
}




@media (max-width: 768px) {

  .icon-text-under .icon-wrapper {
      width: 45px;
      height: 45px;
  }

 

  .icon-text-under .icon {
      font-size: 25px; /* Adjusted icon size for mobile */
  }

  .icon-text-under p {
      font-size: 12px; /* Smaller text for mobile */
      margin-top: 5px;  /* Adjust text margin for mobile */
  }

}


@media (max-width: 480px) {

  .icon-text-under .icon {
      font-size: 20px; 
  }

  .basicIcon .icon {
      font-size: 20px; 
  }

  .icon-text-under p {
      font-size: 10px; 
  }

}



/*
    ******************
    ICONS
    ******************
*/


.basicIcon {
  gap: 8px !important;
}

.basicIcon .icon-wrapper {
  display: inline-flex !important;
  height: 36px;
  width: 36px;
}

.basicIcon .icon {
  font-size: 30px;
}
.basicIcon img {
  max-height: 50px !important;
}

.basicIcon p {
  margin: 0;
}


/* ===========================================================
   BIG ICON QUICK ACTIONS
   =========================================================== */

   .bigIcon{

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;
    user-select:none;

    transition:
        transform .22s cubic-bezier(.22,1,.36,1),
        opacity .22s,
        filter .22s;

}

/* ----------------------------------------------------------- */

.bigIcon .icon-container{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    gap:10px;

    min-width:90px;

}

/* ----------------------------------------------------------- */

.bigIcon .icon-wrapper{

    width:76px;
    height:76px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(245,247,250,.88)
        );

    border:1px solid rgba(255,255,255,.85);

    backdrop-filter:blur(18px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 8px 22px rgba(25,35,60,.10);

    transition:inherit;

}

/* ----------------------------------------------------------- */

.bigIcon .icon{

    width:40px;
    height:40px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.bigIcon img{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

}

/* ----------------------------------------------------------- */

.bigIcon .icon-text{

    margin:0;

    font-size:13px;
    font-weight:600;

    color:#2d3748;

    line-height:1.25;

    letter-spacing:.2px;

    text-align:center;

}

/* ===========================================================
   HOVER
   =========================================================== */

.bigIcon:hover{

    transform:translateY(-5px);

}

.bigIcon:hover .icon-wrapper{

    transform:scale(1.08);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 16px 34px rgba(25,35,60,.18);

}

/* ===========================================================
   ACTIVE
   =========================================================== */

.bigIcon:active{

    transform:translateY(-1px);

}

.bigIcon:active .icon-wrapper{

    transform:scale(.94);

}

/* ===========================================================
   SELECTED
   =========================================================== */

.bigIcon.selected .icon-wrapper{

    background:
        linear-gradient(
            #ffffff,
            #eef7ff
        );

    border-color:rgba(70,160,255,.35);

    box-shadow:
        0 0 0 4px rgba(70,160,255,.10),
        0 16px 36px rgba(70,160,255,.22);

}


/* ===========================================================
   MOBILE
   =========================================================== */

@media (max-width:768px){

    .bigIcon .icon-wrapper{

        width:68px;
        height:68px;

        border-radius:20px;

    }

    .bigIcon .icon{

        width:34px;
        height:34px;

    }

    .bigIcon .icon-text{

        font-size:12px;

    }

}

.actionIcon .icon-wrapper {

  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.actionIcon .icon-text {
  display: none;
}

.actionIcon:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.04);
}

.outlineIcon .icon-wrapper {
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

  transition: background 0.25s ease,
              box-shadow 0.25s ease,
              transform 0.2s ease;

}

.closeIcon {
  border-radius: 50%; 
  transition: all 0.2s ease;
  z-index: 10;
}
.closeIcon:hover {
  background: #f2f2f2;
  transform: scale(1.05);
}

.closeIcon:active {
  transform: scale(0.95);
}

.toolIcon {
  border-radius: 6px;
}
.toolIcon .icon-wrapper {
  background-color: transparent;
  border: none;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s ease-in-out;
  flex-shrink: 0;
  font-size: 16px;
  color:#444;
}

.toolIcon:hover {
  background-color: #5a5a5a;
  transform: scale(1.05);
}


.primaryIcon .icon-wrapper {
  background: linear-gradient(145deg,var(--support-color), var(--main-color));
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.06),
    inset 2px 2px 5px rgba(0, 0, 0, 0.35),
    0 6px 10px rgba(0, 0, 0, 0.4); /* reduced darkness */
  backdrop-filter: blur(2px);
}
.primaryIcon a,
.primaryIcon i,
.primaryIcon p {
  color: var(--engagement-text);
}

.secondaryIcon .icon-wrapper {
  background: linear-gradient(145deg,var(--support-color), var(--side-color));
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.06),
    inset 2px 2px 5px rgba(0, 0, 0, 0.35),
    0 6px 10px rgba(0, 0, 0, 0.4); /* reduced darkness */
  backdrop-filter: blur(2px);
}

.secondaryIcon a,
.secondaryIcon i,
.secondaryIcon p {
  color: var(--engagement-text);
}


.mainIcon .icon {
  background: linear-gradient(145deg, var(--color-light), var(--color-white));
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.5),
    inset 2px 2px 5px rgba(0, 0, 0, 0.05),
    0 6px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.mainIcon i {
  color: var(--color-dark);

}



.darkIcon .icon-wrapper {
  background: linear-gradient(145deg, black, var(--color-dark));
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.5),
    inset 2px 2px 5px rgba(0, 0, 0, 0.05),
    0 6px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.darkIcon i {
  color: var(--color-white);

}
.lightIcon .icon-wrapper {
  background: linear-gradient(145deg, white, var(--color-light));
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.5),
    inset 2px 2px 5px rgba(0, 0, 0, 0.05),
    0 6px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.lightIcon i {
  color: black;
}
.transparentIcon .icon-wrapper {
  background: transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  border:none !important;
}
/* Soft Glassy Settings Button */
.softIcon .icon-wrapper {
  backdrop-filter: blur(6px);                    
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;              
  opacity: 0.65;


}
.softIcon i {
  color: var(--color-white);                                     /* soft dark icon color */
  transition: color 0.3s ease;
}
.softIcon:hover .icon-wrapper {
  transform: translateY(-2px);
  box-shadow:
    inset -2px -2px 6px rgba(255, 255, 255, 0.6),
    inset 2px 2px 6px rgba(0, 0, 0, 0.05),
    0 6px 12px rgba(0, 0, 0, 0.12);               /* slightly stronger shadow */
  background: linear-gradient(145deg, #ffffff, #e6e6e9);
}

.softIcon:hover i {
  color: #000;                                     /* slightly darker on hover */
}

.liveIcon  .icon-wrapper {
  animation: monitorIcon 6s ease-in-out infinite;
}

.live {
  position: relative;
  z-index: 9999;
}

/* pulse ring */
.live::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 122, 255, 0.35);
  animation: livePulse 1.4s ease-out infinite;
  pointer-events: none;
}

/* core dot emphasis */
.live {
  box-shadow: 0 0 10px rgba(0, 122, 255, 0.8);
}

/* pulse animation */


.pulseSoft .icon-wrapper {

  animation:
      monitorIcon 6s ease-in-out infinite,
      pulseSoft 3s ease-in-out infinite;
}

.pulseMedium .icon-wrapper {

  animation:
      monitorIcon 5s ease-in-out infinite,
      pulseMedium 1.8s ease-in-out infinite;
}

.pulseHard .icon-wrapper {

  animation:
      monitorIcon 4s ease-in-out infinite,
      pulseHard .95s ease-in-out infinite;
}

.pulseCritical .icon-wrapper {

  animation:
      monitorIcon 3s ease-in-out infinite,
      pulseCritical .55s linear infinite;
}



.grayIcon .icon-wrapper {

  background:
      linear-gradient(
          145deg,
          rgba(90,90,90,0.92),
          rgba(145,145,145,0.64)
      );

  box-shadow:
      0 0 22px rgba(0,0,0,0.22);

  opacity: .7;
}

/* Soft Glassy + Icon (View Only) */
.glassyIcon .icon-wrapper {
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(240,240,243,0.7));
  box-shadow:
    inset -2px -2px 6px rgba(255, 255, 255, 0.6),
    inset 2px 2px 6px rgba(0, 0, 0, 0.05),
    0 4px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.glassyIcon i {
  color: #444;
  transition: color 0.3s ease;
}

/* Hover: visual only */
.glassyIcon:hover .icon-wrapper {
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(245,245,248,0.75));
  box-shadow:
    inset -2px -2px 6px rgba(255, 255, 255, 0.7),
    inset 2px 2px 6px rgba(0, 0, 0, 0.06),
    0 6px 12px rgba(0, 0, 0, 0.12);
}

.glassyIcon:hover i {
  color: #222;
}
.redIcon .icon-wrapper {
  background: linear-gradient(145deg,#ff4b5c,#ff7b88);
  box-shadow:
    inset -2px -2px 5px rgba(255,255,255,0.06),
    inset 2px 2px 5px rgba(0,0,0,0.35),
    0 6px 12px rgba(255,75,92,0.35);
}
.redIcon i {
  color: white;
}

.amberIcon .icon-wrapper {
  background:
      linear-gradient(
          145deg,
          rgba(255,182,43,0.96),
          rgba(255,226,124,0.7)
      );
  box-shadow:
      0 0 30px rgba(255,182,43,0.32),
      inset 0 1px 1px rgba(255,255,255,0.08);
}

.rated .icon i {
  color: #f1c40f;
}

.rated img{
  filter:
      brightness(0)
      saturate(100%)
      invert(74%)
      sepia(92%)
      saturate(2500%)
      hue-rotate(2deg)
      brightness(1.08)
      contrast(1.2);
}
/* star */
.csatIcon{
  width:120px;
  display:inline-flex;
  max-width: max-content;
}

.csatIcon .icon-container{
  display:inline-flex;
  align-items:center;
  gap:4px;

  padding:2px 6px;

  border-radius:999px;
  background:rgba(241,196,15,.12);
}

.csatIcon .icon-wrapper {
  margin: 0;
  padding: 0;
  gap:  0;
}

.csatIcon .icon-text{
  margin:0;
  padding:0;

  line-height:1;
  font-size:11px;
  font-weight:600;

  color:#444 !important;
}

.blueIcon .icon-wrapper {
  background: linear-gradient(
    135deg,
    #03bbbb,
    #00e0e0
  );
  box-shadow:
    0 6px 18px rgba(3, 187, 187, 0.35),
    0 0 12px rgba(0, 224, 224, 0.45);
  }

.blueIcon .icon-wrapper:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px rgba(3, 187, 187, 0.45),
    0 0 16px rgba(0, 224, 224, 0.6);
}

.blueIcon i {
  transform: translateY(-1px);
}

.purpleIcon .icon-wrapper {
  background: linear-gradient(145deg,#7b3fe4,#b27cff);
  box-shadow:
    inset -2px -2px 5px rgba(255,255,255,0.06),
    inset 2px 2px 5px rgba(0,0,0,0.35),
    0 6px 12px rgba(123,63,228,0.35);
}
.purpleIcon i {
  color: white;
}



.greenIcon .icon-wrapper {
  background: linear-gradient(145deg,#1ea96b,#4be39e);
  box-shadow:
    inset -2px -2px 5px rgba(255,255,255,0.06),
    inset 2px 2px 5px rgba(0,0,0,0.35),
    0 6px 12px rgba(30,169,107,0.35);
}
.greenIcon i {
  color: white;
}

.goldIcon .icon-wrapper {
  background: linear-gradient(145deg,#d6a800,#ffd54a);
  box-shadow:
    inset -2px -2px 5px rgba(255,255,255,0.08),
    inset 2px 2px 5px rgba(0,0,0,0.3),
    0 6px 14px rgba(214,168,0,0.45);
}
.goldIcon .icon-wrapper {
  background: linear-gradient(145deg,#d6a800,#ffd54a);
  box-shadow:
    inset -2px -2px 5px rgba(255,255,255,0.08),
    inset 2px 2px 5px rgba(0,0,0,0.3),
    0 6px 14px rgba(214,168,0,0.45);
}
.goldIcon i {
  color: #3b2a00;
}

.orangeIcon .icon-wrapper {
  background: linear-gradient(145deg,#ff7b00,#ffb347);
  box-shadow:
    inset -2px -2px 5px rgba(255,255,255,0.06),
    inset 2px 2px 5px rgba(0,0,0,0.35),
    0 6px 12px rgba(255,123,0,0.4);
}
.orangeIcon i {
  color: white;
}


.gradientIcon .icon-wrapper {
  background: linear-gradient(
    135deg,
    #ff6a00,
    #ff00cc,
    #7b3fe4,
    #00c6ff
  );
  box-shadow:
    0 6px 16px rgba(0,0,0,0.35),
    0 0 10px rgba(255,0,200,0.25);
}
.gradientIcon i {
  color: white;
}





.icon-stickyFeed {
  height: 40px;
  width: 40px;
  align-content: center;
  justify-content: center;
  display: flex;
}

.icon-stickyFeed .icon i {
  font-size: 22px;
  color: #333333;
  transition: transform 0.3s ease, color 0.3s ease;
  opacity: 0.3; transform: translateY(0px);

}

/* Hover effect */
.icon-stickyFeed:hover {
  transform: scale(1.2);
}

.icon-stickyFeed:hover .icon i {
  color: var(--engagement-border);
}
/* AI Icon (Fancy Button) */
.icon-ai {
  position: absolute;
  bottom: 20px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  border-radius: 50%; /* Circular button */
  padding: 15px; /* Button size */
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

.icon-ai:hover {
  transform: scale(1.1); /* Slightly increase size on hover */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}

/* Icon Style */
.icon-ai .icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.icon-ai .icon {
  font-size: 2rem; /* Icon size */
  color: white; /* White icon color */
}

/* Optional: Glow Effect */
.icon-ai:focus {
  outline: none;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.8); /* Green glow on focus */
}

.icon-ai .icon-wrapper.dragging {
  opacity: 0.7; 
}



.likeIcon {
  position: relative;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
  background-color: #fff;
  border-radius: 8px; /* Rounded corners for a softer look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s, scale 0.2s; /* Smooth transitions */
}

.likeIcon:hover {
  background-color: rgba(255, 87, 34, 0.8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); /* More prominent shadow */
  transform: translateY(-8px) scale(1.05); /* Slight lift and scale effect */
  
}
.likeIcon:hover i  {
  color: #fff;
  transform: scale(1.2);
}


@media (max-width: 480px) {

  .basicIcon p {
      font-size: 10px; 
  }

}


@media (max-width: 768px) {

  .basicIcon {
      flex-direction: column;
      align-items: center;
  }

  .basicIcon .icon {
      font-size: 25px;
  }
  .basicIcon p {
      font-size: 12px;
      margin-top: 5px;
  }
}


.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  width: auto;
  padding: 4px;
  border-radius: 4px;
}

.tags p {
  display: inline-flex;      /* make each tag inline */
  align-items: center;
  justify-content: center;
  margin: 0; 
  padding: 0.25rem 0.6rem !important;
  font-size: 0.75rem !important;
  border-radius: 12px;
  background: #e0e0e0 !important;
  color: #555 !important;
  white-space: nowrap !important;
  cursor: default;
}

.tags p.selected {
  background-color: #d0d0ff; /* highlight selected */
  color: #222;
  padding: 0.25rem 0.8rem;
}
.tags .frame {
    width: min-content;
    gap: 4px;
}

.count {
  display: flex;  
  justify-content: center;
  align-items: center;
  min-width: 22px;
  height: 22px;
  margin: 0; 
  padding: 0.6rem !important;
  font-size: 0.65rem !important;
  border-radius: 12px;
  white-space: nowrap !important;
  cursor: default;
  background-color: var(--engagement-bg, #007bff);
  color: var(--engagement-context-color, #fff) !important;
  margin-right: 6px;
  margin-left: 6px;


}

.progression-value {
  font-size: 16px; /* Adjust size for better readability */
  font-weight: bold; /* Highlight the value */
  color: #2196f3; /* Match the slider theme */
  text-align: center; /* Center align */
  margin-bottom: 10px; /* Add spacing above the slider */
  animation: fadeIn 0.3s ease-in-out; /* Smooth fade-in effect */
}

/* Slider Track */
.progression-slider {
  -webkit-appearance: none; /* Remove default appearance */
  appearance: none; /* Remove default appearance */
  width: 100%; /* Full width */
  height: 10px; /* Track height */
  background: linear-gradient(90deg, #4caf50 0%, #2196f3 100%); /* Gradient background */
  border-radius: 5px; /* Rounded edges */
  outline: none; /* Remove focus outline */
  transition: background 0.3s ease-in-out; /* Smooth gradient transition */
  cursor: pointer; /* Change cursor to pointer */
}

/* Slider Thumb */
.progression-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Remove default appearance */
  appearance: none;
  width: 20px; /* Thumb width */
  height: 20px; /* Thumb height */
  background: #ffffff; /* White thumb */
  border: 3px solid #2196f3; /* Blue border */
  border-radius: 50%; /* Circular thumb */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  transition: transform 0.2s ease-in-out; /* Smooth scaling effect */
}

/* Hover and Active Effects */
.progression-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2); /* Slight zoom on hover */
}

.progression-slider:active::-webkit-slider-thumb {
  transform: scale(1.3); /* Bigger zoom on click */
  background: #ff5722; /* Change color on active */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Stronger shadow */
}

/* Firefox Thumb */
.progression-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 3px solid #2196f3;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

.progression-slider:hover::-moz-range-thumb {
  transform: scale(1.2);
}

.progression-slider:active::-moz-range-thumb {
  transform: scale(1.3);
  background: #ff5722;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.liked {
  animation: likePulse 0.4s ease;
  color: rgba(255, 87, 34, 0.8) !important;
}

.like-bubble {

  background: #e74c3c;
  color: white;
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.8);
  animation: bubbleUp 0.6s forwards;
}


.skeleton {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 6px;
  width: 220px;

}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.6) 50%,
      transparent 100%
  );
  animation: shimmer 1.2s infinite;
}


/* match your real proportions */

.skeleton-card {
  gap: 0.5rem;
}

.skeleton-title {
  height: 18px;
  width: 60%;
  margin-bottom: 10px;
}

.skeleton-count {
  height: 14px;
  width: 40px;
}

.skeleton-image {
  height: 140px; /* match your Image-cover height */
  margin-top: 12px;
}


.error {
  border: 2px solid #dc3545 !important;
}

.error:focus {
  outline: 2px solid #dc3545;
}

/* MAP */

/* CARDS */



/*
.card_basic {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;

  background: var(--card-bg, #1e1e1e);
  transition: all 0.2s ease;

  min-height: 64px;
  justify-content: space-between;

}


.cardIcon {
  flex-shrink: 0;
  order:1;
}

.cardIcon .icon-wrapper {
  width: 42px;
  height: 42px;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.05);
}

.cardIcon i {
  font-size: 18px;
}




.cardContext {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  order: 2;
}
.cardCount {
  order:3;
  font-size: 9px !important;
}
*/


/* Base Card Styles */
/* base text reset inside card */
/* CARD: independent floating feel */
.jelly{

  background:
      radial-gradient(circle at 28% 22%,
          rgba(255,255,255,.82) 0%,
          rgba(255,255,255,.25) 18%,
          rgba(255,255,255,0) 42%),

      radial-gradient(circle at 72% 82%,
          rgba(0,0,0,.10) 0%,
          rgba(0,0,0,0) 45%),

      linear-gradient(145deg,
          #59f3ef 0%,
          #03d6d0 30%,
          #03bbbb 100%,
          #0b7f83 65%);

  border:1px solid rgba(255,255,255,.35);

  box-shadow:
      inset 0 2px 2px rgba(255,255,255,.65),
      inset 0 -14px 30px rgba(0,0,0,.10),
      inset 14px 14px 30px rgba(255,255,255,.12),
      0 12px 24px rgba(3,187,187,.22);

  backdrop-filter:blur(10px);
  overflow:hidden;

  animation:jellyFloat 1s ease-in-out infinite;
}
.jelly::before{
  content:"";
  position:absolute;
  top:12%;
  left:15%;
  width:45%;
  height:25%;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  filter:blur(12px);
}

.jelly::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
      radial-gradient(circle at 25% 25%,
          rgba(255,255,255,.45),
          transparent 35%);
  mix-blend-mode:screen;
}


.background-engagement {
  background:
    radial-gradient(circle at top right, rgba(59,130,246,0.12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(139,92,246,0.10), transparent 25%),
    var(--engagement-bg);
  color: var(--engagement-text);

}

.background-blue{
  background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,.2) 20%, transparent 45%),
      radial-gradient(circle at 70% 80%, rgba(0,0,0,.15), transparent 45%),
      linear-gradient(145deg,#67d8ff,#32b8ff 35%,#1284ff);
}

.background-red{
  background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,.2) 20%, transparent 45%),
      radial-gradient(circle at 70% 80%, rgba(0,0,0,.15), transparent 45%),
      linear-gradient(145deg,#ff9da4,#ff5c73 35%,#d7263d);
}

.background-green{
  background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,.2) 20%, transparent 45%),
      radial-gradient(circle at 70% 80%, rgba(0,0,0,.15), transparent 45%),
      linear-gradient(145deg,#8ff7d2,#38d99c 35%,#0ca678);
}

.background-orange{
  background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,.2) 20%, transparent 45%),
      radial-gradient(circle at 70% 80%, rgba(0,0,0,.15), transparent 45%),
      linear-gradient(145deg,#ffd88d,#ffad33 35%,#ff7a00);
}

.background-purple{
  background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,.2) 20%, transparent 45%),
      radial-gradient(circle at 70% 80%, rgba(0,0,0,.15), transparent 45%),
      linear-gradient(145deg,#dbb8ff,#a66dff 35%,#6b2ed6);
}

/*
.card_basic {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;

  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);

  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all 0.2s ease;

  height: 72px;
}
*/
.card_basic{

  display:flex;
  align-items:center;

  gap:14px;

  height:74px;

  padding:12px 16px;

  border-radius:18px;

  background:
      linear-gradient(
          180deg,
          rgba(255,255,255,.72),
          rgba(255,255,255,.42)
      );

  border:1px solid rgba(255,255,255,.45);

  backdrop-filter:
      blur(10px);

  box-shadow:

      inset 0 1px 0 rgba(255,255,255,.9),

      0 5px 18px rgba(35,45,80,.05);

  transition:
      transform .25s,
      box-shadow .25s,
      background .25s;

}

.view-style-card-item.selected .card_basic{

  background:

      linear-gradient(
          rgba(255,255,255,.95),
          rgba(255,255,255,.75)
      );

  border-color:rgba(60,170,255,.18);

  box-shadow:

      inset 0 1px 0 white,

      0 16px 34px rgba(60,170,255,.16);

}

/* subtle lift (premium, not playful) */
.card_basic:hover{

  transform:translateY(-3px);

  background:

      linear-gradient(
          rgba(255,255,255,.88),
          rgba(255,255,255,.58)
      );

  box-shadow:

      inset 0 1px 0 rgba(255,255,255,.95),

      0 14px 32px rgba(35,45,80,.10);

}

/* ICON */
.card_basic .cardIcon {
  order: 1;
}

/* ICON */
.card_basic .icon {
  height: 100% !important;
  width: 100% !important;

}

.card_basic img {
  padding: 0;
}


.card_basic .cardIcon .icon-wrapper{

  width:46px;
  height:46px;

  border-radius:14px;

  padding:8px;

  background:

      linear-gradient(

          rgba(255,255,255,.95),

          rgba(245,247,250,.82)

      );

  border:1px solid rgba(255,255,255,.85);

  box-shadow:

      inset 0 1px 0 rgba(255,255,255,.9),

      0 3px 10px rgba(0,0,0,.06);

}



.cardContext{

  font-size:14px;

  font-weight:650;

  letter-spacing:.15px;

  color:#1e293b;

  line-height:1.15;
  order:2;
  flex: 1 1 auto;

}

.cardCount{

  font-size:11px;

  font-weight:500;

  color:rgba(60,70,90,.55);

  letter-spacing:.25px;
  order:3

}
.card_basic{

  align-items:center;
}

.cardContext{

  margin:0;
}

.cardCount{

  margin-top:3px;
}


@media(max-width:768px){

  .card_basic{
  
      height:66px;
  
      border-radius:16px;
  
      padding:10px 14px;
  
  }
  
  .cardIcon .icon-wrapper{
  
      width:40px;
      height:40px;
  
  }
  
  .cardIcon img{
  
      width:20px;
      height:20px;
  
  }
  
  }
/****/
.card_category {
  position: relative;
  width: 220px;           /* fixed width */

  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  aspect-ratio: 1 / 1.4; /* taller than wide */
  background-color: #000;
  margin: 0;              /* remove 1px */
  flex-shrink: 0;         /* IMPORTANT */
  height: 240px;
}
.card_category.small {
  width: 120px;
}

/* Hover effect */
.card_category:hover {
  transform: scale(1.08);
  z-index: 10;
}


/* Image covering the card */
.card_category .Image-cover img {
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 0.3s ease;
}

.card_category:hover .Image-cover img {
  transform: scale(1.05);
}


/* Title styling */
.card_category .context-default {
  font-size: 18px !important;
  font-weight: bold !important;
  margin: 0;
  color: #fff !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* Icon styling */
.card_category .icon i {
  font-size: 22px;
  margin-bottom: 2px;
  color: #fff;
}

/* Text below icon (count etc.) */
.card_category .icon-text {
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}




/* Responsive adjustments */
@media (max-width: 768px) {
  .card_category {
    aspect-ratio: 1 / 1.4;
    width: 150px;

  }
  .card_category .context-bold {
    font-size: 14px;
  }
  .card_category .icon i {
    font-size: 18px;
  }
  .card_category .icon-text {
    font-size: 12px;
  }
}


.card_category .selected > * {
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;

}

/* Selected card border + subtle effect */
.card_category.selected {
  border: 3px solid var(--engagement-option-checked);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transform: scale(1.03);
  transition: all 0.3s ease;
}

/* Slight overlay effect on selected image */
.card_category.selected .Image-cover img {
  filter: brightness(0.85) saturate(1.1);
}
.card_category .card_meta {
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;

}

.card_category.selected .card_meta,
.card_category.selected .card_meta p,
.card_category.selected .icon-text,
.card_category.selected .icon i {
  background: none !important;
  color: inherit !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* Optional: glow effect on icon */
.card_category.selected .icon {
  transition: all 0.25s ease;
}
.card_category.selected .icon:hover {
  transform: scale(1.1);
}
.card_meta {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 12px 10px;
  justify-content: flex-end;
  z-index: 9999;
}


.card_title {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  background-color: var(--highlight-bg, #f5f5f5); /* subtle background */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 6px;
}


/* ===============================
   BADGE CARD (single item)
================================ */

.card_badge {
  position: relative;
  width: auto;
  max-width: 480px;
  min-width: 200px;
  height: 240px;
  padding: 14px 16px;
  border-radius: 14px;
  /*
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.85)s
  );
  */
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.3s ease,
              box-shadow 0.3s ease;
  overflow: hidden;
  /*
  max-width: 25%;
  flex: 0 0 25%;
  */
}

/* Lift on hover */
.card_badge:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
}


/* ===============================
   TITLE (Name)
================================ */

.card_badge .bold {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  letter-spacing: 0.02em;
}


/* ===============================
   META ROW (icons)
================================ */

.card_badge .card_meta {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  background: none;
  padding-right: 10% !important;
}



.card_badge.private * {
  filter: brightness(1.2); 
}

.card_badge.private .Image-badge img {
  filter: brightness(0.7);
}



.card_header {
  display: flex;
  justify-content: flex-start; 
  gap: 12px;
  padding: 12px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: default;
  transition: all 0.2s ease;
  width: 100%;
  border-bottom: 0.2px solid #d1d1d1 !important;
}

.card_header i {
  font-size: 1.2rem;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card_header p {
  margin: 0;
  line-height: 1.3;
}

/* Subtle hover effect */
.card_header:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
/*
.card_basic {
  max-width: 600px;
  border-radius: 12px;
  overflow: visible;
  background-color: var(--color-white);
  box-shadow: 0 8px 16px var(--pulse-btn-shadow);
  color: var(--text-color);
  position: relative;
  justify-content: space-around;
}
*/
/* Base card */
.card_column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 25px;
  border-radius: 16px;
  background-color: var(--background-white);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);

  transform: perspective(800px) rotateX(0deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;

  position: relative;
  overflow: visible;

  /* IMPORTANT: remove fixed height */
  min-height: max-content;
  height: 220px;
  min-width:  min-content;;

}

/* Hover */
.card_column:hover {
  transform: perspective(800px) rotateX(3deg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  background-color: var(--color-light);
}

/* Full width children */
/*
.card_column > * {
  width: 100%;
  text-align: center;
}

*/
/* IMAGE (if exists) */
.card_column > * img {
  width: 100%;
  border-radius: 4%;
  object-fit: cover;
  border: 4px solid var(--color-white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  background-color: var(--color-white);
  transition: transform 0.3s ease;
}

.card_column > * img:hover {
  transform: scale(1.05);
}

/* Typography */

/*
.card_column > * p:first-of-type {
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.card_column > * p:last-of-type {
  font-size: 16px;
  font-style: italic;
  margin: 0;
}
*/

/* Divider */
.card_column {
  border-bottom: 2px solid var(--color-light);
}

/* =========================
   RESPONSIVE BREAKPOINTS
========================= */

/* Tablets */
@media (max-width: 768px) {
  .card_column {
    padding: 20px;
    min-height: 180px;
  }
/*
  .card_column > * p:first-of-type {
    font-size: 18px;
  }

  .card_column > * p:last-of-type {
    font-size: 14px;
  }
  */
}

/* Mobile */
@media (max-width: 480px) {
  .card_column {
    padding: 16px;
    min-height: auto;
  }
/*
  .card_column > * p:first-of-type {
    font-size: 16px;
  }

  .card_column > * p:last-of-type {
    font-size: 13px;
  }
  */

  .card_column:hover {
    transform: none; 
  }

}

/* Main card container */
.card_profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(145deg, #1f1f1f, #2c2c2c);
  border-radius: 16px;
  padding: 16px;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  width: 100%;
  max-width: 740px;
  margin: 12px auto;
}

.card_profile:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

/* Profile image */
.card_profile img {
  width: 100%;
  height: auto;
  max-height: 220px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}

.card_profile img:hover {
  transform: scale(1.05);
}

/* Name wrapper */
.card_profile .title {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.card_profile .context-default.bold {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
}

/* Occupation / meta */
.card_profile .meta {
  color: #ccc;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Occupation / meta */
.card_profile .context-default {
  color: #ccc;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Responsive layout */
@media (min-width: 480px) {
  .card_profile {
      max-width: 360px;
  }
}

@media (min-width: 768px) {
  .card_profile {
      max-width: 600px;
  }
}

@media (min-width: 1024px) {
  .card_profile {
      max-width: 740px;
  }
}

.card_product {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  border-radius: 16px;
  background-color: var(--background-white);
  border: 1px solid var(--color-light);
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.card_product:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

/* Product Image */
.card_product > * img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* Product Name */
.card_product > * p:first-of-type {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 6px;
  text-align: center;
}

/* Product Price / Detail */
.card_product > * p:last-of-type {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 10px;
  text-align: center;
}/* Business Card Style View - Digital ID */

/* Target the first image inside card_business-card */
/* Ensure the parent container can stretch to fit content */

/* Horizontal card row */
.card_row {
  display: flex;
  flex-direction: row;       /* Align cards horizontally */
  overflow-x: auto;          /* Enable horizontal scrolling */
  gap: 15px;                 /* Space between cards */
  padding: 10px 0;
  scroll-behavior: smooth;   /* Smooth scroll on drag/scroll */
  width: 100vh !important;
}

/* Hide default scrollbar if you want cleaner look */
.card_row::-webkit-scrollbar {
  height: 8px;
}

.card_row::-webkit-scrollbar-thumb {
  background-color: var(--side-color);
  border-radius: 5px;
}

.card_row::-webkit-scrollbar-track {
  background: var(--color-light);
}

/* Cards inside row */
.card_row > * {
  flex: 0 0 auto;           /* Prevent shrinking, keep width */
  width: 180px;              /* Small card width */
  background-color: var(--background-white);
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card_row > *:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.card_row > * img {
  width: 100%;
  height: 120px; /* Smaller than vertical list */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}




.isOpen {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  color: #fff;
}

/* Closed state — soft red gradient */
.closed {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  color: #fff;
}


.spinner {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #03bbbb; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.progress {

  position: relative;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
  z-index: 9999;
}

.progress .progress-bar {
  height: 100%;
  width: 35%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--engagement-border, #4caf50),
    #8bc34a,
    var(--engagement-border, #4caf50),
    transparent
  );
  background-size: 200% 100%;
  animation: progressSlide 1.2s linear infinite;
}

.progress.progress-complete .progress-bar {
  animation: progressComplete 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Width expands and contracts slowly */

.loading-bar {
  width: 100%;
  height: 3px;          /* thinner */
  background-color: #e0e0e0; /* light grey background */
  overflow: hidden;
  position: relative;
  margin: 8px 0;
  border-radius: 2px;
}

.loading-bar::before {
  content: '';
  position: absolute;
  left: -30%;
  width: 30%;
  height: 100%;
  animation: loading-bar 1s ease-in-out infinite;
  border-radius: 2px;
}

.upload-processing-message {
  position: relative;
  overflow: hidden;

  /* 👇 critical for iOS Safari animation rendering */
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  will-change: transform;
}
/* ensure image behaves nicely */
.upload-processing-message img {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(0px);
  transition: filter 0.3s ease;
}

/* scanning overlay */
.upload-processing-message::after {
  content: "";
  position: absolute;
  top: -150%;
  left: 0;
  width: 100%;
  height: 150%;
  
  /* scanning gradient */
  background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 255, 180, 0.08) 45%,
      rgba(0, 255, 180, 0.18) 50%,
      rgba(0, 255, 180, 0.08) 55%,
      transparent 100%
  );

  animation: scanDown 1.6s linear infinite;
  pointer-events: none;
}

/* subtle grid / AI layer */
.upload-processing-message::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 2px,
      transparent 6px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0.5;
}

/* animation */


/* optional "processing glow" */
.upload-processing-message.processing img {
  filter: brightness(0.95) saturate(1.1);
}

/* subtle pulse border */
.upload-processing-message.processing {
  box-shadow: 0 0 0 1px rgba(0, 255, 180, 0.15),
              0 0 20px rgba(0, 255, 180, 0.08);
}

.timeline {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.timeline-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

.timeline-item.current {
  background-color: #007bff;
  color: white;
}

.timeline-item.completed {
  background-color: #28a745;
  color: white;
}

.timeline-item.upcoming {
  background-color: #6c757d;
  color: white;
}

.timeline-item:hover {
  background-color: #0056b3;
  color: white;
}
/* No color box shaping */
.theme-style-primary {
 
  background:
    radial-gradient(
      ellipse at 18% 0%,
      var(--primary-surface-highlight) 0%,
      var(--primary-surface-highlight-soft) 22%,
      transparent 48%
    ),

    radial-gradient(
      ellipse at 88% 18%,
      var(--primary-surface-glow) 0%,
      transparent 38%
    ),

    radial-gradient(
      ellipse at 70% 100%,
      var(--primary-surface-shadow) 0%,
      transparent 48%
    ),

    linear-gradient(
      145deg,
      var(--primary-surface-start) 0%,
      var(--primary-surface-mid) 8%,
      var(--primary-surface-deep) 22%,
      var(--primary-surface-end) 100%
    );
}

.theme-style-primary a:hover {
  color: var(--hover-color);
  text-decoration: underline;
}

/* 2. Secondary Theme */
.theme-style-secondary {
  background-color: var(--side-color);
  color: var(--color-dark);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4), 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-style-secondary:hover {
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.5), 0px 6px 15px rgba(0, 0, 0, 0.3);
}

.theme-style-secondary a {
  color: var(--main-color);
  transition: color 0.3s ease;
}

.theme-style-secondary a:hover {
  color: var(--hover-color);
}

.theme-style-secondary p, 
.theme-style-secondary i {
  color: var(--text-dark);
}


.theme-style-cta {
  background: var(--background-gradient);
  color: var(--engagement-text);

  box-shadow: 0 10px 30px var(--engagement-shadow);
}

.theme-style-cta::before {
  background: radial-gradient(
      circle,
      var(--engagement-border-hover),
      transparent 70%
  );
}

.theme-style-cta .context-default {
  color: var(--engagement-text);
}

.theme-style-cta .context-title {
  color: var(--color-white);
}

/* 3. Support Theme */
.theme-style-support {
  background-color: var(--support-color);
  color: var(--color-white);
  box-shadow: inset 0px 2px 10px rgba(255, 255, 255, 0.2), 0px 5px 15px rgba(0, 0, 0, 0.2);
  padding: 15px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 8px;
}

.theme-style-support:hover {
  box-shadow: inset 0px 3px 12px rgba(255, 255, 255, 0.3), 0px 6px 20px rgba(0, 0, 0, 0.3);
}
.theme-style-support a:hover {
  color: var(--hover-color);
}
.theme-style-support a,
.theme-style-support p, 
.theme-style-support i {
  color: var(--main-color);
}

/* 4. Dark Theme */
.theme-style-dark {
  background-color: var(--background-dark);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  backdrop-filter: blur(12px);
  --webkit-backdrop-filter: blur(12px);
}

.theme-style-dark:hover {
  box-shadow: 0px 20px 40px rgba(255, 255, 255, 0.2), 0px 8px 20px rgba(0, 0, 0, 0.4);
}

.theme-style-dark a {
  color: var(--side-color);
}

.theme-style-dark a:hover {
  color: var(--hover-color);
}

.theme-style-dark p, 
.theme-style-dark i {
  color: var(--text-side-color);
}


.theme-style-light {
  background: linear-gradient(135deg, #fefefe 0%, #f3f5f7 100%); /* soft light gradient */
  color: var(--text-dark);
  padding: 18px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 8px;
}

.theme-style-light:hover {
  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.3), 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.theme-style-light a {
  color: var(--main-color);
}

.theme-style-light a:hover {
  color: var(--hover-color);
}

.theme-style-light p, 
.theme-style-light i {
  color: var(--main-color);
}


/* Mobile responsive */

.theme-style-header {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  backdrop-filter: blur(12px);
  --webkit-backdrop-filter: blur(12px);
  background: var(--color-light);
  border-bottom: 1px solid #eee;
}



.theme-style-header i {
  color: var(--text-color);
}

.theme-style-header .icon-wrapper:hover {
  background: #f7f7f7;
}

.theme-style-footer {
  background: linear-gradient(135deg, #1e1e1e, #2c2c2c); 
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: background 0.3s ease, color 0.3s ease;
}
/* Footer icons */
.theme-style-footer .icon-wrapper {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.theme-style-footer .icon-wrapper:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25), 0 0 10px rgba(255, 255, 255, 0.05);
  transform: scale(0.8);
}

.theme-style-footer .icon-wrapper:hover,
.theme-style-header .icon-wrapper:hover {
  animation: pulse-focus 0.6s ease-in-out forwards;
}

/* Smooth continuous pulse (optional for active/focus) */
.theme-style-footer .icon-wrapper.active,
.theme-style-header .icon-wrapper.active {
  animation: pulse-focus 1.2s ease-in-out infinite;
}
.theme-style-footer i {
  font-size: larger;
}
.theme-style-footer i:hover {
  transform: translateY(-2px);
  color:white;
}

.theme-style-footer .icon-wrapper,
.theme-style-footer i {
  transition: opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}


@media (max-width: 768px) {
  /*
  .theme-style-header {
    padding: 12px 15px;
  }
  */
  .theme-style-header .context-title {
    font-size: 1.1rem;
  }
  .theme-style-footer {
 
    gap: 10px;
    padding: 12px 15px;
    border: none;
    border-radius:0;
    opacity: 0.97;
  }
}

/*

.theme-style-post {
  position: relative;
  inset: 0;
  height: 100vh;
  width: 100dvh;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
}

.theme-style-post .engageForm-meta {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.theme-style-post .engageForm-meta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.theme-style-post .wizard-engage-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;

  display: flex;
  flex-direction: column;

  height: 100%;

  padding: 16px;
  width: 100%;
}
.theme-style-post .meta-box {
  display: flex;
  flex-direction: column;
  gap: 10px;

  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);

  padding: 12px;
}
.theme-style-post .action-option-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.theme-style-post .actionIcon {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-style-post::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  z-index: 2;
  pointer-events: none;
}

*/
.theme-style-post {
  position: relative;
  inset: 0;

  width: 100dvw;
  height: 100dvh;

  display: flex;
  flex-direction: column;

  z-index: 9999;
  overflow: hidden;

  background: #000;
}


/* --------------------------------------------------
   IMAGE
-------------------------------------------------- */

.theme-style-post .engageForm-meta {
  position: absolute;
  inset: 0;

  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.theme-style-post .engageForm-meta > .noEnlarge {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.theme-style-post .engageForm-meta img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;
}


/* --------------------------------------------------
   IMAGE GRADIENTS
-------------------------------------------------- */

.theme-style-post::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.22) 0%,
      transparent 18%,
      transparent 58%,
      rgba(0,0,0,.72) 100%
    );
}


/* --------------------------------------------------
   CONTENT / COMPOSER
-------------------------------------------------- */

.theme-style-post .wizard-engage-container {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 4;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;

  width: 100%;
  height: 100%;

  padding: 20px;
  box-sizing: border-box;

  pointer-events: none;
}


/* --------------------------------------------------
   META / CAPTION AREA
-------------------------------------------------- */

.theme-style-post .engageForm-meta {
  pointer-events: none;
}

.theme-style-post .engageForm-meta > * {
  pointer-events: auto;
}


.theme-style-post .meta-box {
  width: 100%;
  max-width: 680px;

  margin: 0 auto;

  display: flex;
  flex-direction: column;

  gap: 12px;

  padding: 0;

  background: transparent;

  backdrop-filter: none;
}


/* --------------------------------------------------
   CAPTION INPUT
-------------------------------------------------- */

.theme-style-post .action-input {
  width: 100%;

  display: flex;
  align-items: center;

  background: rgba(255,255,255,.14);



  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 8px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.15);

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
  position: absolute;
  top: 0;
  left: 0;
}


.theme-style-post .action-input:focus-within {
  background: rgba(255,255,255,.20);

  border-color: rgba(255,255,255,.45);

  transform: translateY(-1px);
}

.theme-style-post .action-input.textarea textarea {
  width: 80%;

  min-height: 48px;
  max-height: 140px;

  padding: 13px 16px;

  box-sizing: border-box;

  resize: none;

  border: 0;
  outline: 0;

  background: transparent;

  color: #fff;

  font-size: 15px;
  line-height: 1.4;

  font-family: inherit;
}
.theme-style-post .greenIcon .icon-wrapper {
  background: none;
  box-shadow: none;

}

.theme-style-post .action-input textarea::placeholder {
  color: rgba(255,255,255,.82);
}


.theme-style-post .action-input textarea:focus::placeholder {
  color: rgba(255,255,255,.55);
}


/* --------------------------------------------------
   ACTION AREA
-------------------------------------------------- */

.theme-style-post .action-box {
  display: flex;

  justify-content: flex-end;
  align-items: center;

  width: 100%;

  background: transparent;

  padding: 0;
  position: absolute;
  top: 40px;
}

.selection-context {

  margin-left: 8px;
  
}
.selection-context p {

  margin-left: 8px;
  
}
/* --------------------------------------------------
   SAVE BUTTON
-------------------------------------------------- */


.theme-style-post .actionIcon:hover {
  transform: scale(1.06);

  box-shadow:
    0 10px 30px rgba(0,0,0,.34);
}


.theme-style-post .actionIcon:active {
  transform: scale(.94);
}


.theme-style-post .actionIcon .icon-wrapper {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;
}


.theme-style-post .actionIcon img {
  width: 36px;
  height: 36px;

  object-fit: contain;

  filter: none;
}


/* --------------------------------------------------
   REMOVE OLD GREEN BUTTON STYLING
-------------------------------------------------- */


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 600px) {

  .theme-style-post .wizard-engage-container {
    padding: 14px;
  }

  .theme-style-post .meta-box {
    gap: 10px;
  }

  .theme-style-post .action-input {
    border-radius: 16px;
  }

  .theme-style-post .action-input textarea {
    min-height: 46px;

    padding: 12px 14px;

    font-size: 14px;
  }

  .theme-style-post .actionIcon {
    width: 48px;
    height: 48px;

    flex-basis: 48px;
  }

  .theme-style-post .actionIcon .icon-wrapper {
    width: 48px;
    height: 48px;
  }
}


/* --------------------------------------------------
   SMALL PHONES
-------------------------------------------------- */

@media (max-width: 380px) {

  .theme-style-post .wizard-engage-container {
    padding: 12px;
  }

  .theme-style-post .actionIcon {
    width: 46px;
    height: 46px;

    flex-basis: 46px;
  }

  .theme-style-post .actionIcon .icon-wrapper {
    width: 46px;
    height: 46px;
  }
}


.theme-style-meta img {

  max-height: 720px;

}


/* --------------------------------------------------
   CAPTION
-------------------------------------------------- */

.theme-style-meta .context-meta {
  margin: 0;

  padding: 14px 18px 16px;

  font-size: 14px;
  line-height: 1.45;

  font-weight: 400;

  color: #292929;

  overflow-wrap: anywhere;
}


/* --------------------------------------------------
   IMAGE + CAPTION SEPARATION
-------------------------------------------------- */

.theme-style-meta > p.context-meta {
  border-top: 1px solid rgba(0, 0, 0, .05);
}


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 768px) {

  .theme-style-meta {
    width: 100%;
    max-width: none;

    border-radius: 14px;

    border-left: 0;
    border-right: 0;

    box-shadow: none;
  }

  .theme-style-meta img {
    max-height: 80vh;
  }

  .theme-style-meta .context-meta {
    padding: 13px 15px 15px;

    font-size: 14px;
  }
}


/* --------------------------------------------------
   VERY SMALL MOBILE
-------------------------------------------------- */

@media (max-width: 480px) {

  .theme-style-meta {
    border-radius: 0;
  }

  .theme-style-meta img {
    max-height: 78vh;
  }

  .theme-style-meta .context-meta {
    padding: 12px 14px 15px;

    font-size: 14px;
    line-height: 1.45;
  }
}
/* end of actions */

/* Image View */

/* login actions */ 


/* LOGIN CLASSES */
/* OTP Container */


/* =========================================================
   OTP
========================================================= */

.view-style-engagement .otp-input,
.otp-input {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 48px !important;
    height: 56px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-bottom: 3px solid rgba(255,255,255,0.20) !important;
    border-radius: 10px !important;

    background: rgba(255,255,255,0.08) !important;
    color: inherit !important;

    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    text-align: center !important;

    outline: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease !important;
}


/* Hover */

.view-style-engagement .otp-input:hover,
.otp-input:hover {
    border-bottom-color: var(--engagement-border-hover) !important;
}


/* Focus */

.view-style-engagement .otp-input:focus,
.otp-input:focus {
    border-bottom-color: var(--engagement-context-color) !important;

    background: rgba(66,199,194,0.07) !important;

    transform: translateY(-2px) scale(1.05) !important;

    box-shadow:
        0 0 0 3px rgba(66,199,194,0.10),
        0 8px 20px rgba(0,0,0,0.15) !important;

    z-index: 2;
    position: relative;
}


/* Filled */

.view-style-engagement .otp-input:not(:placeholder-shown),
.otp-input:not(:placeholder-shown) {
    border-bottom-color: var(--engagement-border) !important;
}


/* Invalid */

.view-style-engagement .otp-input.context-alert,
.otp-input.context-alert {
    border-bottom-color: var(--support-color) !important;
    animation: otp-shake 0.3s ease;
}





/* Mobile */

@media (max-width: 480px) {

    .otp-input {
        width: 40px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        scroll-margin: 0 !important;
        scroll-snap-align: none !important;
    }


    
    .otp-input {
        scroll-margin: 0 !important;
        scroll-snap-align: none !important;
    }


    .otp-wrapper {
        gap: 8px;
        justify-content: center;
        padding: 0 10px;
        touch-action: pan-y;
        overflow: hidden;


    }

    .view-style-engagement .otp-input:focus,
    .otp-input:focus {
        transform: none !important;

        box-shadow:
            0 0 0 2px rgba(66,199,194,0.10) !important;
    }
}
/*** interaction design **/

.interactionFrame p,
.interactionFrame .icon-text {
  margin: 0;
  color: #333 !important;
  font-size: 11px !important;
  overflow: unset !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: nowrap;
  font-size: 13px !important;
} 
.interactionFrame .icon-container {
  justify-content: start;
  align-items: center;
}
.interactionFrame .icon-wrapper {
  margin: 0;
  gap:0;
}

.social-comment-container {
  padding: 8px 10px;
  flex: 1 1 auto;
}

/* main input box */
.comment-input-box {
  display: flex;
  align-items: center;
  gap: 8px;

  background: rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  padding: 6px 10px;

  transition: all 0.2s ease;
}

/* focus state (VERY important) */
.comment-input-box:focus-within {
  background: rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* textarea */
.social-comment-textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;

  background: transparent;

  font-size: 14px;
  line-height: 1.4;
  color: #222;

  min-height: 20px;
  max-height: 80px;
}

/* placeholder tone */
.social-comment-textarea::placeholder {
  color: #999;
}

/* submit button */
.comment-submit-btn {
  width: 32px;
  height: 32px;

  border: none;
  border-radius: 10px;

  background: transparent;
  color: #aaa;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* active state */
.social-comment-textarea:not(:placeholder-shown) + .comment-submit-btn {
  color: #000;
}

/* hover */
.comment-submit-btn:hover {
  background: rgba(0,0,0,0.06);
}

/* disabled feel */
.social-comment-textarea:placeholder-shown + .comment-submit-btn {
  opacity: 0.4;
  pointer-events: none;
}


.comment-input-box {
  transform: scale(0.98);
}

.comment-input-box:focus-within {
  transform: scale(1);
}
.comment-submit-btn:active {
  transform: scale(0.9);
}
/**** View styles ***/
/* =========================================================
   ENGAGEMENT UI SYSTEM
   Scoped ONLY to .view-style-engagement
   Modern SaaS / AI Platform Style
========================================================= */
/* =========================================
   OVERLAY INTERACTION STYLE
========================================= */

.view-style-interaction {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute !important;
  max-width: 480px;
  max-height: 80%;
}

/* =========================================
 WIZARD CONTAINER
========================================= */

.view-style-interaction .wizard-engage-container {

  background: #fff;
  border-radius: 18px;
  padding: 28px;

  min-width: 320px;
  max-width: 420px;

  box-shadow:
      0 20px 60px rgba(0,0,0,.18),
      0 2px 10px rgba(0,0,0,.08);

  animation: scaleIn .18s ease;

  display: flex;
  flex-direction: column;
  gap: 18px;
}



/*
.view-style-interaction .frame {

  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
*/
/* =========================================
 CONTENT
========================================= */


.view-style-interaction .action-box {

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center !important;

  gap: 16px;

  margin-top: 8px;
}


/* =========================
   THEME: REACTION STYLE
========================= */

.view-style-reaction {
  background: rgba(18, 20, 26, 0.72);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);

  padding: 18px;
}

/* QUESTION TEXT */
.view-style-reaction .reaction {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  margin-bottom: 10px;
}

/* =========================
   OPTION BASE LAYOUT
========================= */

.view-style-reaction .selection {
  position: relative;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);

  transition: all 0.25s ease;

  cursor: pointer;
}

/* ICON BASE */
.view-style-reaction .icon-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.view-style-reaction .icon i {
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.2s ease;
}

.view-style-reaction .icon-text {
  color: rgba(255, 255, 255, 0.6);
}

/* =========================
   HOVER STATE (SOFT YELLOW UX)
========================= */

.view-style-reaction .selection:hover {
  background: rgba(255, 215, 120, 0.08);
  border-color: rgba(255, 200, 80, 0.35);

  box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.25),
      0 0 18px rgba(255, 200, 80, 0.18);

  transform: translateY(-3px) scale(1.04);
}

/* ICON HOVER */
.view-style-reaction .selection:hover .icon-wrapper {
  background: rgba(255, 200, 80, 0.12);
  box-shadow: 0 0 14px rgba(255, 200, 80, 0.25);
}

.view-style-reaction .selection:hover .icon i {
  color: #ffd36a;
  transform: scale(1.1);
  text-shadow: 0 0 10px rgba(255, 210, 90, 0.4);
}

.view-style-reaction .selection:hover .icon-text {
  color: rgba(255, 230, 160, 0.9);
}

/* =========================
   ACTIVE STATE (SELECTION CONFIRMED)
========================= */

.view-style-reaction .selection.active {
  background: linear-gradient(
      135deg,
      rgba(80, 160, 255, 0.22),
      rgba(140, 90, 255, 0.18)
  );

  border-color: rgba(120, 180, 255, 0.45);

  box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.3),
      0 0 22px rgba(120, 180, 255, 0.25);

  transform: translateY(-1px) scale(1.05);
}

/* ACTIVE ICON */
.view-style-reaction .selection.active .icon-wrapper {
  background: rgba(120, 180, 255, 0.18);
}

.view-style-reaction .selection.active .icon i {
  color: #7fb6ff;
  text-shadow: 0 0 12px rgba(120, 180, 255, 0.6);
}

/* PRESS FEEDBACK */
.view-style-reaction .selection:active {
  transform: scale(0.98);
}

/* =========================
   STAR FILL BEHAVIOR (PREVIOUS + CURRENT)
   (requires JS hover-fill OR class-based system)
========================= */

/* dim default stars */
.view-style-reaction .icon i {
  transition: all 0.2s ease;
}

/* filled state (JS adds hover-active) */
.view-style-reaction .selection.hover-active .icon i {
  color: #ffd36a;
  text-shadow: 0 0 10px rgba(255, 210, 90, 0.45);
}

/* optional smooth reset */
.view-style-reaction .selection.hover-active {
  transform: translateY(-2px) scale(1.03);
}
/* =========================================
 ANIMATIONS
========================================= */

/* =========================================================
   ENGAGEMENT UI SYSTEM (CLEAN FINAL DROP-IN)
========================================================= */
/* =========================================================
   MONITOR VIEW STYLE
========================================================= */

.view-style-monitor {
   
  position: absolute !important;
  overflow: hidden;
  border-radius:0 0 0 8px;
  background:
      linear-gradient(
          180deg,
          rgba(15,18,30,.96),
          rgba(8,10,18,.98)
      );

  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
      0 20px 80px rgba(0,0,0,.45);

  backdrop-filter: blur(24px);

  color: #f5f7fb;
  max-width: min-content;
  opacity: 0.4;
}
.view-style-monitor:hover {
   
  opacity: 0.9;
}


/* =========================================================
 LAYOUT
========================================================= */

.view-style-monitor .wizard-stage-container {
  height: 100%;
  padding: 1rem;

  border-right:
      1px solid rgba(255,255,255,.06);

  background:
      linear-gradient(
          180deg,
          rgba(255,255,255,.02),
          rgba(255,255,255,.01)
      );
  flex: 1 1 auto;
}

.view-style-monitor .wizard-engage-container {
  display: none;
}

.view-style-monitor .monitor-group-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================================================
 MONITOR CARDS
========================================================= */

.view-style-monitor .monitor-group {
  position: relative;

  display: flex;
  flex-direction: column;

  background:
      linear-gradient(
          180deg,
          rgba(255,255,255,.045),
          rgba(255,255,255,.025)
      );

  border:
      1px solid rgba(255,255,255,.05);

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

.view-style-monitor .monitor-group:hover{

  transform: translateY(-2px);

  border-color:
      rgba(90,150,255,.35);

  background:
      linear-gradient(
          180deg,
          rgba(90,150,255,.12),
          rgba(255,255,255,.03)
      );
}

/* overlay view of monitor */

.view-style-dashboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: #0b0f14;
  color: #e6e6e6;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI;
  width: max-content;
}

/* =========================
 FRAME BASE
========================= */
.view-style-dashboard .frame {
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================
 HEADER (STATE BAR)
========================= */
.view-style-dashboard .monitor_header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #3b82f6;
}

/* state colors */
.view-style-dashboard .monitor_header .icon-container:nth-child(1) .icon-wrapper {
  background: rgba(255, 80, 80, 0.15);
  border: 1px solid rgba(255, 80, 80, 0.3);
}

.view-style-dashboard .monitor_header .icon-container:nth-child(2) .icon-wrapper {
  background: rgba(0, 255, 140, 0.12);
  border: 1px solid rgba(0, 255, 140, 0.25);
}

/* distance emphasis */
.view-style-dashboard .monitor_header .icon-container:nth-child(3) .icon-wrapper {
  background: rgba(59, 130, 246, 0.12);
}

/* =========================
 CORE (POSITION / ZONE)
========================= */
.view-style-dashboard .monitor_core {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.view-style-dashboard .monitor_core .icon-wrapper {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* =========================
 ANALYTICS (MOVEMENT)
========================= */
.view-style-dashboard .monitor_analytics {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.view-style-dashboard .monitor_analytics .icon-wrapper {
  background: rgba(255, 255, 255, 0.04);
}

/* highlight unstable */
.view-style-dashboard .monitor_analytics .unstable {
  color: #ff4d4d;
}

/* =========================
 HEALTH (SYSTEM STRIP)
========================= */
.view-style-dashboard .monitor_health {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  opacity: 0.9;
}

.view-style-dashboard .monitor_health .icon-wrapper {
  background: rgba(255, 0, 0, 0.08);
  border: 1px solid rgba(255, 0, 0, 0.15);
}

/* =========================
 ACTION BUTTON
========================= */
.view-style-dashboard .action-box {
  display: flex;
  justify-content: center;
  padding: 14px;
}

.view-style-dashboard .action-box .icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.view-style-dashboard .action-box .icon-wrapper:hover {
  transform: scale(1.05);
}


.view-style-engagement {
  position: absolute;
  width: 100%;

  display: flex;
  flex-direction: row;
  gap: 18px;

  padding: 28px;
/*
  border: 1px solid var(--engagement-border);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.025),
      rgba(255,255,255,0.008)
    ),
    var(--engagement-bg);

  box-shadow:
    0 20px 60px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.025);

  backdrop-filter: blur(20px);
*/
  overflow: hidden;

}

.view-style-engagement .context-default {
  color: var(--engagement-text) !important;

}

/* =========================================================
   GRID BACKGROUND
========================================================= */

.view-style-engagement::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);

  background-size: 32px 32px;

  pointer-events: none;
  opacity: .4;
}

/* =========================================================
   FRAME
========================================================= */


.view-style-engagement .frame:hover {
  border-color: var(--engagement-border-hover);
  transform: translateY(-1px);
}

/* =========================================================
   TITLE / DESCRIPTION
========================================================= */

.view-style-engagement .context-default {
  color: var(--engagement-text-soft);
}
/* =========================================================
   STATUS GROUP (DOT SYSTEM ONLY)
========================================================= */
.view-style-engagement .state-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.view-style-engagement [data-engage-type="status_group"] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;


}

/* kill all text nodes */
.view-style-engagement [data-engage-type="status"] .icon-text {
  display: none !important;
}

/* base dot */
.view-style-engagement .status-indicator {
  width: 12px;
  height: 12px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.18);

  transition: all 0.25s ease;
}

/* =========================================================
   STATUS STATES
========================================================= */

/* processing */
.view-style-engagement .state-processing {
  background: #3b82f6;
  box-shadow: 0 0 16px rgba(59,130,246,.6);
  animation: pulseMarker 1.8s infinite;
}

/* waiting */
.view-style-engagement .state-waiting {
  background: #f59e0b;
  box-shadow: 0 0 16px rgba(245,158,11,.5);
  animation: pulseAmber 1.6s infinite;
}

/* complete */
.view-style-engagement .state-complete {
  background: #10b981;
  box-shadow: 0 0 16px rgba(16,185,129,.5);
}

/* idle */
.view-style-engagement .state-idle {
  background: rgba(255,255,255,0.25);
  opacity: .5;
}

/* =========================================================
   STATUS ANIMATIONS
========================================================= */



/* =========================================================
   PROGRESS BAR (STYLE-DRIVEN ONLY)
========================================================= */

.view-style-engagement .progress-container {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;

}

/* main bar container */
.view-style-engagement [data-engage-type="progress_bar"].hidden {
  display: block !important;
  width: 100%;
  height: 4px;

  border-radius: 999px;

  background: rgba(255,255,255,0.06);

  position: relative;
}
.view-style-engagement [data-engage-type="progress_bar"] {

  position: relative;

  height: 10px;

  border-radius: 999px;

  background: rgba(255,255,255,0.06);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.08);
  margin: 0;
  padding: 0;
}

/* FULL WIDTH TRACK */
.view-style-engagement [data-engage-type="progress_bar"]::before {
  content: "";

  position: absolute;
  inset: 0;

  background: rgba(255,255,255,0.06);
}

/* FILL = WIDTH OF ELEMENT ITSELF */
.view-style-engagement [data-engage-type="progress_bar"]::after {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 100%;

  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);

  transform-origin: left;

  transition: transform 0.4s ease;

  /* IMPORTANT: controlled by inline width */
  transform: scaleX(var(--fill, 0));
}

.view-style-engagement .step-dots {
  display: flex;
  align-items: center;
  justify-content: space-between;

  position: relative;

  padding: 10px 4px;
  max-width: 360px;
  gap:8px;
}

/* BACKGROUND LINE (TRACK) */
.view-style-engagement .step-dots::before {
  content: "";
  position: absolute;

  left: 8px;
  right: 8px;
  top: 50%;

  height: 2px;

  background: rgba(255,255,255,0.08);
  transform: translateY(-50%);
  z-index: 0;
}

/* DOT BASE */
.view-style-engagement .step-dot {
  width: 14px;
  height: 14px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  z-index: 1;

  transition: all 0.25s ease;
}

/* COMPLETED */
.view-style-engagement .step-dot.state-completed {
  background: linear-gradient(135deg, #10b981, #3b82f6);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.15);
}

/* ACTIVE (PULSING FOCUS) */
.view-style-engagement .step-dot.state-active {
  background: #3b82f6;
  box-shadow: 0 0 0 6px rgba(59,130,246,0.15);

  animation: pulseDot 1.6s infinite;
}

/* PENDING */
.view-style-engagement .step-dot.state-pending {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
}

/* PULSE ANIMATION */

.view-style-engagement .step-dots::after {
  content: "";
  position: absolute;

  left: 8px;
  top: 50%;

  height: 2px;

  width: var(--fill, 0%);

  background: linear-gradient(90deg, #3b82f6, #10b981);

  transform: translateY(-50%);
  z-index: 0;
}
/* =========================================================
   INPUTS / BUTTONS (kept clean)
========================================================= */
.view-style-engagement input,
.view-style-engagement textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    font-size: 14px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.view-style-engagement input:focus,
.view-style-engagement textarea:focus {
  outline:none;
  border-color:#03bbbb;
  box-shadow:0 0 0 3px rgba(3,187,187,.15);
}


/* =========================================
   FLOW RESPONSE CONTAINERS (ITEMS / BASKET)
========================================= */
/* =========================================
   FLOW STEP
========================================= */

.view-style-engagement .flow-step-wrapper{
  display:flex;
  align-items:flex-start;
  flex-direction: row;
  gap:12px;

  padding:12px;
  margin-bottom:10px;

  border-radius:14px;

  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}


/* =========================================
   RESPONSE
========================================= */

.view-style-engagement .flow-response{
  flex:1;
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:2px;
}


/* =========================================
   TREE GROUP
========================================= */
.view-style-engagement .flow-response-group {
  display: flex;
  flex-direction: column;
}

.view-style-engagement .flow-response-group,
.view-style-engagement .flow-response-wrapper{
  position:relative;
}


/* =========================================
   TREE NEST
========================================= */

.view-style-engagement .flow-response-nested{
  position:relative;

  margin-left:4px;

  display:flex;
  flex-direction:column;
  gap:2px;
}


/* vertical tree line */
.view-style-engagement .flow-response-nested::before{
  content:"";

  position:absolute;
  left:0;
  top:0;
  bottom:6px;

  width:1px;

  background:rgba(255,255,255,.08);
}


/* =========================================
   ROW
========================================= */

.view-style-engagement .flow-response-wrapper{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  min-height:26px;
}


/* =========================================
   BRANCH CONNECTOR
========================================= */

.view-style-engagement .flow-response-wrapper::before,
.view-style-engagement .flow-response-group > .flow-response-key::before{
  content:"";

  position:absolute;

  left:-14px;
  top:13px;

  width:10px;
  height:1px;

  background:rgba(255,255,255,.08);
}


/* =========================================
   KEYS
========================================= */

.view-style-engagement .flow-response-key{
  margin:0;

  font-size:11px;
  font-weight:600;

  color:rgba(255,255,255,.58);

  white-space:nowrap;
}


/* =========================================
   VALUES
========================================= */

.view-style-engagement .flow-response-value{
  margin:0;

  font-size:12px;
  color:#fff;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  max-width:60%;
  flex : 1 1 auto;
  text-align: start;
}


/* =========================================
   GROUP LABELS
========================================= */

.view-style-engagement .flow-response-group > .flow-response-key{
  position:relative;

  display:flex;
  align-items:center;

  height:26px;

  color:#fff;

  font-size:11px;
  font-weight:700;

  letter-spacing:.02em;
}

.view-style-engagement.single-row .wizard-engage-container {
  flex-direction: row ;

}
.view-style-engagement.single-row .engagement-box {
  width: auto;
  flex: 1 1 auto;
  margin-right: 8px;
}
.view-style-engagement.single-row .action-box {
  width: auto;
  margin: auto;
  align-items: center;


}
.view-style-engagement.single-row .action-option-item {
  margin: 0;
  margin-right: 20px;
}
.view-style-engagement.single-row .action-option-item .action-input {
  margin: 0;
}
.view-style-engagement.single-row  .icon-wrapper {
  margin: 0;
  gap:0;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {
  .view-style-engagement {
      flex-direction: column;  
      padding: 12px;           
      gap: 12px;
      overflow-x: hidden;
      margin: 0;
  }
  .view-style-engagement .wizard-stage-container,
  .view-style-engagement .wizard-engage-container {
      width: 100% !important;
      flex: 1 1 100%;
      padding: 12px;
  }
  .view-style-engagement .flow-response-wrapper {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
  
    .view-style-engagement  .flow-response-value {
      max-width: 100%;
      white-space: normal;
    }
  
    .view-style-engagement .flow-response-wrapper::before {
      display: none; /* kill connector lines */
    }
  
    .view-style-engagement  .flow-response-nested::before {
      display: none;
    }
    .view-style-engagement  .step-dots {
      max-width: 100%;
      overflow-x: auto;
      justify-content: flex-start;
      gap: 10px;
    }
    .view-style-engagement  input {
      font-size: 16px; /* prevents iOS zoom */
      padding: 14px;
    }


}

/* ==========================================================
   REGISTER FORM
   ========================================================== */

   .register-form{

    gap:18px;

    padding:20px;

    border-radius:20px;
    max-height: 80vh;
}

/* ==========================================================
   TEXT INPUTS
   ========================================================== */

.register-form .action-option-item{
    width:100%;
}
.register-form .action-input::placeholder{

    color:#9ca3af;
    text-transform:capitalize;
}




/* ==========================================================
   SECTIONS
   ========================================================== */

.register-form .register-section{

    display:flex;
    flex-direction:column;
    gap:6px;

    padding:14px;

    border:1px solid #ececec;
    border-radius:14px;

}

/* empty sections */

.register-form .register-section:empty{
    display:none;
}

/* ==========================================================
   CHECKBOXES
   ========================================================== */

.register-form .action-button{

    margin:0;
}

.register-form .action-checkbox{

    display:flex;
    align-items:center;
    gap:12px;

    min-height:42px;

    padding:8px 10px;

    border-radius:10px;

    cursor:pointer;

    transition:.15s;
}

.register-form .action-checkbox:hover{

    background:rgba(3,187,187,.06);
}

/* checkbox */

.register-form .action-checkbox input{

    display:none;
}


/* label */

.register-form .action-checkbox{

    font-size:14px;
    font-weight:500;

    color:#374151;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:640px){

    .register-form{

        padding:14px;
        gap:14px;
    }

    .register-form .action-input{

        height:48px;
    }
}


/* ==========================================================
   OPENING HOURS
   ========================================================== */

/* one day */

.register-form .opening-hours-row{

    display:grid;
    grid-template-columns: 170px 1fr 1fr;
}



.register-form .opening-hours-row .action-option-item span{

    font-size:11px;
    font-weight:600;
    color:#6b7280;

    text-transform:uppercase;
    letter-spacing:.05em;
}

.register-form .opening-hours-row .opening-time{

    width:100%;
    height:44px;
    padding:0 12px;
}

/* disabled day */

.register-form .opening-hours-row:not(:has(input[type="checkbox"]:checked))
.action-option-item{

    opacity:.45;
    pointer-events:none;
}
/* mobile */

@media (max-width:640px){

    .register-form .opening-hours-row{

        grid-template-columns:1fr;
        gap:10px;
    }

    .register-form .opening-hours-row .context-default{

        margin-bottom:2px;
    }

    .register-form .opening-hours-row .action-option-item{

        width:100%;
    }
}


@media (max-width:640px){

    .register-form .opening-hours-row{

        grid-template-columns:1fr;
        gap:10px;
    }

    .register-form .opening-hours-row .context-default{

        margin-bottom:2px;
    }

    .register-form .opening-hours-row .action-option-item{

        width:100%;
    }
}
/* Search Section */
.view-style-data {
  background-color: #fdfdfd;
  border-radius: 10px;
  margin: 0;
  color: #2c2c2c;
  max-width: 720px;
  width: 100%;

  display: flex;
  flex-direction: column;

  /* Prevent the whole component from creating horizontal scrolling */
  overflow-x: hidden;
}


/* =========================================================
   NORMAL DATA ROW
   Label + value
   ========================================================= */

.view-style-data .context_row {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);

  gap: 8px;
  align-items: start;

  border-bottom: 1px solid color-mix(
    in srgb,
    var(--text-color) 15%,
    transparent
  );

  padding: 6px 4px;
}


/* All direct children */

.view-style-data .context_row > * {
  margin: 0;
  min-width: 0;
}


/* All text */

.view-style-data .context_row p {
  font-size: 12px;
  color: #717171;
  line-height: 1.3;

  margin: 0;

  white-space: normal;
  overflow: visible;

  overflow-wrap: anywhere;
  word-break: normal;
}


/* Label */

.view-style-data .context_row > .bold {
  font-weight: 600;
  color: #555;

  overflow: visible;
}


/* Value */

.view-style-data .context_row > p:not(.bold) {
  text-align: left;
}


/* =========================================================
   HAZARD / ICON ROW
   ========================================================= */

.view-style-data .context_row > .view-style-icon-grid-mobile {
  min-width: 0;
}


/* One-row hazard grid */

.view-style-data .view-style-icon-grid-mobile.one-row {
  display: flex;
  flex-wrap: nowrap;

  gap: 12px;

  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
}


/* Hide scrollbar Chrome / Safari */

.view-style-data .view-style-icon-grid-mobile.one-row::-webkit-scrollbar {
  display: none;
}


/* Individual hazard */

.view-style-data .view-style-icon-grid-mobile.one-row > .col-auto {
  flex: 0 0 68px;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .view-style-data {
    padding: 0;
  }

  .view-style-data .context_row {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    padding: 6px 4px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .view-style-data {
    border-radius: 8px;
  }


  /* Stack label and value */

  .view-style-data .context_row {
    display: grid;
    grid-template-columns: 1fr;

    gap: 2px;

    padding: 9px 4px;
  }


  /* Label */

  .view-style-data .context_row > .bold {
    font-size: 11px;
    font-weight: 600;
    color: #666;
  }


  /* Value */

  .view-style-data .context_row > p:not(.bold) {
    font-size: 13px;
    color: #2c2c2c;
    line-height: 1.35;
  }


  /* =======================================================
     HAZARDS
     ======================================================= */

  .view-style-data .context_row > .view-style-icon-grid-mobile.one-row {
    display: flex;
    flex-wrap: nowrap;

    gap: 12px;

    width: 100%;

    padding: 4px 0;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
  }


  .view-style-data
  .context_row
  > .view-style-icon-grid-mobile.one-row::-webkit-scrollbar {
    display: none;
  }


  /* Keep each hazard item fixed width */

  .view-style-data
  .view-style-icon-grid-mobile.one-row
  > .col-auto {
    flex: 0 0 68px;
    width: 68px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .view-style-data .context_row {
    padding: 8px 2px;
  }

  .view-style-data .context_row > .bold {
    font-size: 10px;
  }

  .view-style-data .context_row > p:not(.bold) {
    font-size: 12px;
  }


  .view-style-data
  .view-style-icon-grid-mobile.one-row
  > .col-auto {
    flex-basis: 64px;
    width: 64px;
  }
}
/*
.view-style-data {
  background-color: #fdfdfd;
  border-radius: 10px;
  margin: 0;
  color: #2c2c2c;
  max-width: 720px;
  width: 100%;

  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}


.view-style-data .context_row {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);

  gap: 8px;
  align-items: start;

  border-bottom: 1px solid color-mix(
    in srgb,
    var(--text-color) 15%,
    transparent
  );

  padding: 6px 4px;
}


.view-style-data .context_row > * {
  margin: 0;
  min-width: 0;
}


.view-style-data .context_row p {
  font-size: 12px;
  color: #717171;
  line-height: 1.3;

  margin: 0;

  white-space: normal;
  overflow: visible;

  overflow-wrap: anywhere;
  word-break: normal;
}


.view-style-data .context_row > .bold {
  font-weight: 600;
  color: #555;

  overflow: visible;
}


.view-style-data .context_row > p:not(.bold) {
  text-align: left;
}


@media (max-width: 768px) {
  .view-style-data {
    padding: 0;
  }

  .view-style-data .context_row {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    padding: 6px 4px;
  }
}


@media (max-width: 479px) {
  .view-style-data {
    padding: 0;
  }

  .view-style-data .context_row {
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    gap: 6px;
  }

  .view-style-data .context_row p {
    font-size: 11px;
  }
}
*/
/*
.view-style-data {
  background-color: #fdfdfd;
  border-radius: 10px;
  margin: 0;
  color: #2c2c2c;
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.view-style-data .context_row {
  display: grid;
  grid-template-columns: 40% 60%;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 15%, transparent);
  padding: 4px;
}


.view-style-data .context_row p {
  word-break: normal;
  font-size: 12px;
  color: #717171; 
  line-height: 1.3;

  margin-top: 2px;

  
  overflow: hidden;
  

}
@media (max-width: 768px) {
  .view-style-data {
    padding: 0;
  }
  .view-style-data .bold {
    width: 100%;
  }
}

@media (max-width: 479) {
  .view-style-data {
    padding: 0;
  }
}
*/
/*
@media (max-width: 576px) {
  .view-style-data .context_row {
    grid-template-columns: 1fr;
    gap:0;
  }
}

/*
.view-style-header {
  
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-right: 10px


}

.view-style-header > .frame {
  display: flex;
  align-items: baseline; 
}
*/
.view-style-header {
  display: flex;
  align-items: center; 
  flex-direction: column;
  position: sticky;
  top :0 ;
  padding: 0;
}

.view-style-header .first {
  margin-left: 10px;

}

.view-style-header > .frame {
  display: flex;
  align-items: center; /* FIX */
}

.view-style-header .icon-wrapper {
  width: 24px;
  height: 24px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-style-menu-row,
.view-style-header .icon {
  width: 100%;
  height: 100%;
}
/* =========================
   Footer Container
========================= */

.view-style-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  height:100%;
}

.view-style-footer > .frame {
  flex-direction: column;
  align-items: center;
  gap:6px;
}

.view-style-footer .rFrame {
  padding-bottom: 10px;
}




/* =========================
 Responsive Adjustments
========================= */
/*@media (max-width:479px){*/
@media (max-width: 768px) {
  .scrolling {
    opacity: 0.65;
    transform: translateY(8px);
    filter: blur(1px);
  }

  .view-style-footer{
    flex-direction:row;
    align-items:center;
    justify-content:space-around;
    gap:0;
    height:100%;
    padding: 0 8px;
    
  }



  .view-style-footer > .frame{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
  }

  .view-style-footer .midFrame {
    position: fixed;
    left: -100%;
    width: 70px;
    height: auto;
    transition: left 0.3s ease;
    left: 0;
    flex-direction: column;
    bottom: 0px;    
    padding-bottom: 8px;
  }
  .view-style-footer .rFrame {
    align-items: flex-end !important;
    margin-right: 0;
    order : 2;

  }
  .view-style-footer .leftFrame {
    position: fixed;
    left: -100%;
    width: 70px;
    height: 100%;
    transition: left 0.3s ease;
    left: 0;
    flex-direction: column;
    bottom: 0px;
    padding-bottom: 80px;
    padding-top: 80px;
    border-top-right-radius:8px;
    gap:14px;
    opacity: unset;
  }

  .mapOverlayControl {

    margin-bottom: 100px;
  
  }
}






.view-style-social-media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;  
  padding: 10px;
  position: relative;
  width: 100%; 
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  padding: 10px;
}
.view-style-social-media-gallery.active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  overflow: auto;
  display: block !important;
  padding: 0;
  margin: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
}


.view-style-social-media-gallery > * {
  padding: 0 !important;
}

/* Image Styling */
.view-style-social-media-gallery video,
.view-style-social-media-gallery img {
  width: 100%; 
  height: auto; 
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  object-fit: cover; 
}

/* Style for enlarged image */
.view-style-social-media-gallery img.enlarged {
  transform: scale(2);
  z-index: 999; 
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5); 
}

.view-style-social-media-gallery img:not(.enlarged):hover {
  transform: scale(1.05);
  transition: transform 0.2s ease-in-out;
}

/* notes for social media */

/* The sticky note frames */
/* Pin board container */
.view-style-notes {
  background-color: #f4f4f4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  gap: 20px;
}

/* Single sticky note */
.view-style-notes .note-item {
  background-color: #f9e356;
  width: 200px;
  height: auto;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* Hover effect */
.view-style-notes .note-item:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
}

.view-style-notes .note-item i,
.view-style-notes .note-item a,
.view-style-notes .note-item p {
  color: var(--color-dark);
}
/* Note text */


/* Pin effect (red triangle) */
.view-style-notes .note-item::before {
  content: "📌"; 
  position: absolute;
  top: -15px;
  left: 10px;
  font-size: 24px;
  line-height: 1;
  z-index: 10;
  transition: transform 0.3s ease;
}

/* Optional animation on hover */
.view-style-notes .note-item:hover::before {
  transform: scale(1.2) rotate(10deg);
}


/* Optional: Rotated note variations for realism */
.note-rotate-1 { transform: rotate(-5deg); }
.note-rotate-2 { transform: rotate(-3deg); }
.note-rotate-3 { transform: rotate(2deg); }
.note-rotate-4 { transform: rotate(4deg); }
.note-rotate-5 { transform: rotate(-2deg); }


/* Optional: Pin on top-right variation */
.pin-top-right::before {
  left: auto;
  right: 10px;
}

/* Responsive scaling for mobile */
@media (max-width: 576px) {
  .view-style-notes .note-item {
    width: 140px;
    height: auto;
    padding: 8px;
  }

  .pinned {
    font-size: 0.9rem;
  }
}


/*

.view-style-browse {
  display: flex !important;
  flex-wrap: wrap;
}
*/


/* =========================
   MASONRY CONTAINER
========================= */

.view-style-browse {
  width: 100%;
  padding-left:  12px;
  padding-right: 12px;
  gap: 12px;

}

.view-style-browse > .style-masonry {
  width: calc(
      (100% - (var(--cols) - 1) * 20px) / var(--cols)
  );

  flex: 0 0 calc(
      (100% - (var(--cols) - 1) * 20px) / var(--cols)
  );

  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* MAP ITEM */
/* ---------- MAP CARD ---------- */

.view-style-map-item{
  width:min(340px,92vw);
  margin:0 auto;

  background:#fff;
  border-radius:20px;
  overflow:hidden;

  box-shadow:
      0 10px 35px rgba(0,0,0,.14),
      0 2px 8px rgba(0,0,0,.08);

  border:1px solid rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  padding: 8px;
}


/* remove feed look */

.view-style-map-item .productFrame{
  display:flex;
  flex-direction:column;
}


/* ---------- HEADER ---------- */

.view-style-map-item .titleFrame{
  order:-1;

  display:flex;
  align-items:center;
  gap:10px;
  justify-content: space-between;
  padding:16px 18px 12px;

  border-bottom:1px solid rgba(0,0,0,.05);
}

/* ---------- DESCRIPTION ---------- */
/*

.view-style-map-item .context-paragraph{
  margin:0;

  padding:0 18px 16px;

  font-size:14px;
  line-height:1.55;

  color:#666;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

*/

/* ---------- RATING ---------- */


/* ---------- DATA ---------- */


/* =========================
   MASONRY ITEMS
========================= */

.view-style-product-item {
  display: inline-block;       /* key for masonry */
  width: 100%;                 /* JS controls column width via inline style */
  margin: 0 8px 16px;
  vertical-align: top;
  break-inside: avoid;         /* prevent splitting */
  /* width: calc(100% / var(--cols)); */

}



/* =========================
   CARD BASE
========================= */
.view-style-product-item {
  position: relative;
  padding: 8px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  border-radius: 16px;

  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* hover 
.view-style-product-item:hover {
  transform: translateY(-4px);
  transition: transform 0.25s ease;
}
*/


.view-style-product-item .titleFrame {
  padding: 8px 10px 6px;
  position: relative;
  border-top:1px solid;
  align-items: center !important;
  justify-content: space-between;
}

/*
.view-style-product-item .context-product-title {
  font-size: 14px;
  font-weight: 500;         
  color: #222;
  line-height: 1.3;

  padding-right: 48px;      

  display: -webkit-box;
  -webkit-line-clamp: 2;    
  -webkit-box-orient: vertical;
  overflow: hidden;
}
*/

/*
.view-style-product-item .csatIcon {
  position: absolute;
  top: 8px;
  right: 10px;

  display: flex;
  align-items: center;
  gap: 3px;

  font-size: 12px;
} 


.view-style-product-item .csatIcon .icon-wrapper,
.view-style-product-item .csatIcon .icon-container {
  all: unset;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

/* star */
/*
.view-style-product-item .csatIcon i {
  font-size: 11px;
  color: #ff385c;
}

/* rating text */
/*
.view-style-product-item .csatIcon .icon-text {
  font-size: 12px;
  font-weight: 500;
  color: #222;
}

*/
/*

.view-style-product-item .context_row p {
  font-size: 12px;
  color: #717171; 
  line-height: 1.3;

  margin-top: 2px;

  
  overflow: hidden;
  
  
}
*/
/* =========================
   REMOVE HEIGHT CONSTRAINTS
========================= */

.view-style-map-item .productFrame,
.view-style-product-item .productFrame {
  position: relative;
  padding: 0;
  justify-content: center;

}
.view-style-map-item .lastFrame,
.view-style-product-item .lastFrame {
  display: block;
  width: 100%;
}

/* =========================
   CONTENT FLOW
========================= */
.social-post-content {
  order:1;
  width: 100%;
}

.social-comment-header {
  max-width: max-content;
}
.social-comment {
  gap:4px;
} 
/* actions row */
/*
.view-style-product-item .social-post-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.view-style-product-item .social-post-actions-lcontainer,
.view-style-product-item .social-post-actions-rcontainer {
  display: flex;
  align-items: center;
  margin-right: 2px;
}


.view-style-product-item .social-comment-textarea {
  flex: 1 1 auto;
  gap:8px;
}

*/

/* =========================
   CARD MODE (MINIMAL / CLEAN)
========================= */

.interactionFrame {
  top: 8px;
  transform: none;

  display: flex;
  flex-direction: column;  
  gap: 6px;

  background: none;  
  backdrop-filter: none;
}

/* flatten layout */
.interactionFrame .social-post-actions {
  display: flex;
  flex-direction: row;
}

.interactionFrame .icon-wrapper {
  width: 26px;
  height: 26px;

  background: transparent;   /* ❌ no background */
  border-radius: 50%;

  transition: all 0.2s ease;
}

/* icon */
.interactionFrame i {
  font-size: 13px;
  color: #555;
}

/* subtle hover (premium feel) */
.interactionFrame .icon-wrapper:hover {
  background: rgba(0,0,0,0.05);
  transform: scale(1.08);
}
.interactionFrame i:hover {
  color: #000;
}

.social-post-actions-lcontainer {
  display: flex;
  flex: 1 1 auto;
  margin-left: 10px;
}
.social-comment-container {
  order:2;
  width: 100%;

}

/* bottom gradient */
.view-style-product-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  pointer-events: none;
}


.view-style-meta-item {
  display: flex;
  gap: 12px;
  width: 100%;
  margin: 0 8px 16px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease;
}

.view-style-meta-item:hover {
  transform: translateY(-3px);
}
.view-style-meta-item .meta-image {
  width: 120px;
  min-width: 120px;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  flex-shrink: 0;
}

.view-style-meta-item .meta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.view-style-meta-item .meta-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 2px;
}

.view-style-meta-item .meta-title {
  font-size: 14px;
  font-weight: 600;
  color: #222;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-style-meta-item .meta-sub {
  font-size: 12px;
  color: #717171;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-style-meta-item .meta-rating {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 12px;
}

.view-style-meta-item .meta-rating i {
  color: #ff385c;
  font-size: 11px;
}

.view-style-meta-item .meta-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
}

.view-style-meta-item .meta-actions i {
  font-size: 13px;
  color: #555;
  transition: 0.2s ease;
}

.view-style-meta-item .meta-actions i:hover {
  color: #000;
  transform: scale(1.1);
}


/* =========================
   MOBILE BROWSE
========================= */
@media (max-width: 768px) {

  .view-style-browse {
    padding-left: 8px;
    padding-right: 8px;
    gap:8px;
  }
  .interactionFrame {
    padding-bottom:4px;
  }
  .view-style-product-image .interactionFrame .icon-wrapper {
    width: 32px;
    height: 32px;
  }
  .view-style-product-image .interactionFrame i {
    font-size: 13px;
  }
  .view-style-product-image .titleFrame {
    top: 6px;
    left: 6px;
    padding: 3px 6px;
    gap: 5px;
  }

  .view-style-product-image .Image-thumbnail {
    width: 16px;
    height: 16px;
    min-width: 16px;
  }

  .view-style-product-image .context-alias {
    font-size: 11px;
  }
  .view-style-meta-item .meta-title {
    font-size: 13px;
  }

  .view-style-meta-item .meta-sub {
    font-size: 11px;
  }

  .interactionFrame .icon-wrapper {
    position: relative;
  }

  .interactionFrame .icon-wrapper::after {
    content: "";
    position: absolute;
    inset: -6px;
  }

  .view-style-product-item .social-post-actions-lcontainer {

    margin: 0;

  }


    .view-style-product-item .titleFrame {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
  
      margin: 0;
      padding: 0;
  
    }
  
    /* TITLE - allow real wrapping (no wasted space) */
    .view-style-product-item .context-product-title {
      flex: 1;
      min-width: 0;
  
      font-size: 13px;
      font-weight: 600;
      line-height: 1.25;
  
      margin: 0;
      padding: 0;
  
      white-space: normal;      /* ✅ allow wrap */
      overflow: hidden;
  
      display: -webkit-box;
      -webkit-line-clamp: 2;    /* max 2 lines (not forced 1) */
      -webkit-box-orient: vertical;
    }


    .view-style-product-item .social-post-actions-lcontain {
      flex: 0;
    }
  
}

@media (max-width: 576px) {
  .view-style-meta-item {
    gap: 10px;
  }

  .view-style-meta-item .meta-image {
    width: 88px;
    min-width: 88px;
  }
}


/*
.view-style-product-item .contentFrame {
  display: block;
  margin-top: 8px;
  padding-top: 8px;

  border-top: 1px solid #eee;

  font-size: 12px;
  color: #444;

  animation: contentReveal 0.25s ease;
}

.contentFrame .view-style-frame {
  font-weight: 500;
  color: #222;
  margin-bottom: 4px;
}

.contentFrame .style-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #717171;
}

.contentFrame .context-poi {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 3px 8px;
  border-radius: 999px;

  background: #f7f7f7;
  font-size: 11px;
}

.contentFrame .context-poi img {
  width: 12px;
  height: 12px;
}

.contentFrame .context-poi .icon-text {
  display: inline; 
}


@keyframes contentReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-style-product-item.expanded {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

*/

/* end of image view*/
.view-style-sticky {
  background-color: var(--color-white);

}
.view-style-sticky-feed {
  position: fixed !important;
  z-index: 300;
  background-color: transparent;
  overflow: hidden;
  max-width: 40px;
}

.view-style-settings {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 6px;
  min-height: 24px;
  width: 100%;
}



/* ROOT SEARCH CONTAINER */
/*

/*

.overlay .view-style-search {
  flex: 1;
} 

*/
/* ----------------------- */
/* SEARCH INPUT */
/* ----------------------- */

.container-search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;   /* allow expansion */
  min-width: 0;     /* prevent overflow bugs */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: all 0.2s ease;
  max-width: 520px;

}

.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;

  width: 100%;
}

/* INPUT */
/* ---------------------------------
   Search Wrapper
---------------------------------- */

.search-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}


/* ---------------------------------
 Search Input
---------------------------------- */


.search-input {
  width: 100%;
  height: 42px;

  padding: 0 42px;

  border: none;
  outline: none;

  border-radius: 999px;

  background: #f2f2f2;
  box-shadow: none;

  color: #1a1a1a;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;

  -webkit-appearance: none;
  appearance: none;

  transition:
      background-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ---------------------------------
 Hover
---------------------------------- */

.search-input:hover {
  background: #f2f2f2;

  box-shadow:
      0 2px 8px rgba(0,0,0,0.06),
      0 1px 2px rgba(0,0,0,0.03);
}




/* ---------------------------------
 Focus
---------------------------------- */

.search-input:focus,
.search-input:focus-visible {
  background: #f2f2f2;
  box-shadow: none;
  transform: none;

  outline: none;
  border: none;

  background: #ffffff;

}


/* ---------------------------------
 Placeholder
---------------------------------- */

.search-input::placeholder {
  color: rgba(0,0,0,0.38);
  font-weight: 400;
}


/* ---------------------------------
 Remove browser search styling
---------------------------------- */

.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration {
  display: none;
}

.search-input::-ms-clear,
.search-input::-ms-reveal {
  display: none;
}


/* ---------------------------------
 Disabled
---------------------------------- */

.search-input:disabled {
  opacity: .6;
  cursor: not-allowed;
}


/* ---------------------------------
 Mobile
---------------------------------- */

@media (max-width: 768px) {

  .search-input {
      height: 40px;
      font-size: 16px; /* prevents iOS zoom */
      padding: 0 40px;
  }

}



/* LEFT ICON (important) */
.search-wrapper::before {
  content: "\f002"; /* font awesome search */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;

  position: absolute;
  left: 12px;
  font-size: 13px;

  color: rgba(0,0,0,0.4);
}


.search-icon {
  position: absolute;
  right: 10px;
  font-size: 18px;
  opacity: 0.8;
}


.container-search:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}


.userFilters {
 flex:1 1 auto;
}




@media (max-width: 768px) {

  .container-search:not(.hidden) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    width: 100%;
    padding: 8px 12px;

    background: #fff;
    z-index: 50;
  }

}

/***search overlay **/ 
/* CONTAINER → make it feel like dropdown */
.search-view {
  background: #fff;
  border-radius: 14px;
  margin-top: 6px;

  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

  overflow: hidden;
  flex: 1 1 auto;
}


/* REMOVE heavy card feel */
.search-context {
  padding: 0;
  border: none;
}


/* ITEM → turn into suggestion row */
.search-item {
  display: flex;
  align-items: center;

  height: 44px;                 /* key change */
  padding: 0 14px;

  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.85);

  border-bottom: 1px solid rgba(0,0,0,0.04);
  background: transparent;

  transition: background 0.15s ease;
  flex: 1 1 auto;

}


/* REMOVE last divider */
.search-context:last-child .search-item {
  border-bottom: none;
}


/* HOVER / TAP */
.search-item:hover {
  background: rgba(0,0,0,0.05);
}

.search-item::before {
  content: "🔍";
  font-size: 13px;

  margin-right: 10px;
  opacity: 0.5;
}


/* EMAIL / USER TYPE (auto detect feel) */
.search-item:has([data-engage-id*="@"]),
.search-item:contains("@") {
  font-size: 13px;
  color: rgba(0,0,0,0.65);
}

.items {
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}



/* MOBILE TUNING */
@media (max-width: 768px) {

  .search-item {
    height: 42px;
    padding: 0 12px;
    font-size: 13px;
  }

  .search-view {
    border-radius: 12px;
  }
}
/*
.searchResult {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;

}

.search-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.items {
  flex: 1;
  min-height: 0;
  overflow-y: auto; 
}

.trendyResults {
  max-height: 120px;
}

.search-item {
  flex: 1;
  order:2;
}


.searchResult .items {
  width: 100%;
}
.search-context .count {
  order:1;
}

/* ----------------------- */
/* instant SEARCH          */
/* ----------------------- */
/*
.instant-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;

  padding: 0.6rem 0.9rem;
  border-radius: 1rem;

  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0,0,0,0.08);

  transition: 
    border 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

-.instant-search-wrapper:focus-within {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.instant-search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;

  font-size: 1rem;
  font-weight: 500;

  color: #111;
}

.instant-search-input::placeholder {
  color: rgba(0,0,0,0.4);
  font-weight: 400;
}

.instant-search-icon {
  width: 18px;
  height: 18px;
  margin-right: 0.6rem;
  opacity: 0.6;
}

/* Clear button */
.clear-btn {
  background: none;
  border: none;
  font-size: 1rem;
  opacity: 0.4;
  cursor: pointer;
  display: none;
}

.instant-search-input:not(:placeholder-shown) + .clear-btn {
  display: block;
}




/*
.view-style-overlay {
  
  width: 100%;
  padding: 16px 14px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  background-color: var(--color-white);
  max-width: 768px;
  margin: 0 !important;
}
.view-style-overlay::before {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: rgba(0,0,0,0.85);
}

@media (max-width: 768px) {
  .view-style-overlay {
    padding: 14px 12px 18px;
  }

  .context-search {
    font-size: 12px;
    padding: 7px 11px;
  }

  .action-toggle-switch {
    font-size: 13px;
  }
}

.context-search {
  display: inline-flex;
  align-items: center;

  padding: 8px 12px;
  margin: 4px 6px 6px 0;

  font-size: 13px;
  font-weight: 500;

  background: #f4f4f4;
  border-radius: 999px;

  color: rgba(0,0,0,0.75);

  transition: all 0.2s ease;
}

.context-search:hover {
  background: #eaeaea;
}

.context-search:active {
  transform: scale(0.96);
}
.context-search.icon-basic,
.context-search {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  margin: 6px 0;
}



.view-style-overlay > .context-search:nth-child(1),
.view-style-overlay > .context-search:nth-child(2) {
  margin-top: 4px;
}

.view-style-overlay > .context-search:nth-child(3) {
  margin-top: 14px;
}
*/
/* end of search container */
/* end of search */
/* filter cards */
/* ==============================
   Applied Filters Container
================================= */
/* ============================= */
/* FILTER CONTAINER LAYOUT FIX  */
/* ============================= */



/* ============================= */
/* FILTER CARD */
/* ============================= */

.social-media-category-filters {
  padding-bottom: 3px;
}
.social-media-applied-filters-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  background: #ffffff;
  border-radius: 6px;
  gap: 2px; 
}

/* ============================= */
/* HEADER */
/* ============================= */

.filterHeader {
  display: flex;
  align-items: center;
  width: auto;
  flex-shrink: 0;
  margin-left: 4px;

}

.filterHeader p {
  font-size: 13px;
  font-weight: 600;
}


/* ============================= */
/* TAG WRAPPER (FIXED WRAPPING) */
/* ============================= */

.filterTags {
  display: flex;
  align-items: center;
  gap: 0;  
  max-height: 48px;
  margin: 0;
}

.filterTags > * {
  flex-shrink: 0;            /* prevents icons/text squishing */
}


/* ============================= */
/* FILTER CHIP */
/* ============================= */
.context-tiny {
  display: flex;  
  justify-content: center;
  align-items: center;

  font-size: 11px !important;
  font-weight: 500;
  padding: 6px;
  line-height: 1.2 !important;

  border-radius: 8px;

  background: rgba(3, 187, 187, 0.12);
  color: #037b7b !important;

  max-width: 400px;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.context-tiny:hover {
  background: rgba(3, 187, 187, 0.12);
  opacity: 1;
  transform: scale(1.1);
}


.context-tag {
  display: flex;
  align-items: center;
  gap: 7px;

  margin: 0;
  padding: 7px 11px;

  width: fit-content;
  max-width: 90%;

  border-radius: 8px;

  background: rgba(7, 29, 36, 0.72);
  color: var(--engagement-text);

  font-size: 11px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.1px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.18);

  border-left: 2px solid var(--side-color);
}

.filter-key,
.filter-key p {
  font-size: 11px;
  color: #666;
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* ============================= */
/* LOCK / PIN ICONS */
/* ============================= */

.append:not(.hidden) {
  font-size: 11px;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden:not(.context-tiny) {
  font-size: 11px;
  border: 1px solid #03bbbb;
  color: #03bbbb;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================= */
/* SELECTION WRAPPER */
/* ============================= */

[data-engage-type="selectionWrapper"] {
  display: flex !important;
  flex-direction: row;
  gap: 6px;
  max-height: 64px; 
  overflow-y: auto;
}


/* ============================= */
/* REMOVE BUTTON */
/* ============================= */


/* BADGE CARDS */


.chat-frame {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 100%;
  max-width: 400px;
  height: 500px;
  background: linear-gradient(145deg, #f9fafa, #e8edf1);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  z-index: 9999 !important;
  transition: all 0.3s ease;
}

/* Chat Area (Messages) */
.chat-area {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

/* Chat Message Bubbles */
.chat-message {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 18px;
  margin: 4px 10px;
  font-size: 16px;
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  display: inline-block;
  position: relative;
  white-space: pre-wrap;

}

/* User Message Bubble */
.chat-message.user-message {
  align-self: flex-end;
  background-color: #DCF8C6;
  color: #000;
  border-bottom-right-radius: 0;
  
}

/* Assistant Message Bubble */
.chat-message.assistant-message {
  align-self: flex-start;
  background-color: #FFFFFF;
  color: #000;
  border-bottom-left-radius: 0;
  border: 1px solid #E0E0E0;
}

/* Input Area */





/* MAIN INPUT SURFACE */
.chat-input {

  display: flex;
  align-items: center;
  gap: 8px;

  background: rgba(0, 0, 0, 0.04);
  padding: 6px 10px;

  transition: all 0.2s ease;
}


/* focus = whole thing reacts */
.chat-input:focus-within {
  background: rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  transform: scale(1);
}

.chat-input-box {
  flex : 1 1 auto;
}
/* TEXTAREA */
.chat-input textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;

  font-size: 14px;
  line-height: 1.4;
  color: #222;

  min-height: 20px;
  max-height: 80px;
}

.chat-input textarea::placeholder {
  color: #999;
}

/* SEND BUTTON */
.chat-send-button {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  color: #aaa;

  transition: all 0.2s ease;

  opacity: 0.4;
  pointer-events: none;
}

/* ACTIVE STATE (this now works logically) */
.chat-input.has-text .chat-send-button {
  color: #000;
  opacity: 1;
  pointer-events: auto;
}

/* hover */
.chat-send-button:hover {
  background: rgba(0,0,0,0.1);
}

/* press */
.chat-send-button:active {
  transform: scale(0.9);
}



.chat-footer-view {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 15px;
  max-width: 100%;
  z-index: 9999;
  gap: 12px;
}

.chat-footer-view {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  padding-bottom: calc(10px + constant(safe-area-inset-bottom));
}


.chat-footer-view .chat-settings-container {
  display: flex;
  gap: 10px;
  align-self: flex-end;
  border: 0;
  margin-right: 20px;
}

.chat-footer-view .chat-input {
  width: 100%;
  max-width: 800px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
}

.chat-footer-view .chat-input-box textarea {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  border: none;
  background: transparent;  
  resize: vertical;
  outline: none;
  font-size: 16px;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 0;
  box-shadow:none;

}

.chat-footer-view .chat-input-box textarea:focus {
  background: #fff;
}

.chat-footer-view .chat-send-button {
  width: 44px;
  height: 44px;
  background-color: #00BFAE;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.chat-footer-view .chat-send-button:hover {
  background-color: #007f6f;
}

/* end of chat footer **/

/* Typing Animation */
.typing-animation-container {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  margin-top: 10px;
}

.typing-dot {
  font-size: 30px;
  color: #00BFAE;
  animation: blink 1.2s infinite step-start;
  margin: 0 4px;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.4s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.8s;
}

.show-typing {
  opacity: 1;
}

.chat-button {
  z-index: 9999;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  border: none;
  background: transparent;
  padding: 0;
}

.chat-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.pixel-glitch:hover img {
  image-rendering: pixelated;
  filter: contrast(400%) brightness(150%) saturate(0%);
  animation: pixelGlitch 0.4s steps(3, end) infinite alternate;
}

.idle-bounce img {
  animation: idleBounce 2s ease-in-out infinite;
}

.secret-mode img {
  filter: hue-rotate(270deg) brightness(120%) saturate(150%);
  transform: rotate(360deg);
  transition: transform 1s ease, filter 1s ease;
}
.chat-button.secret-mode::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100px;
  height: 100px;
  pointer-events: none;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 10px 10px;
  animation: pixelDrift 0.5s infinite linear;
  opacity: 0.5;
  z-index: -1;
  filter: drop-shadow(0 0 4px #0ff);
}
.chat-settings-container {
  display: flex;
  justify-content: flex-end;   /* Align buttons to the right */
  gap: 8px;                   /* Space between buttons */
  padding: 1px 15px 5px 15px; /* Top and sides padding */
  width: 100%;
}


.easter-pew img {
  animation: pewBounce 0.3s ease-in-out 3;
}


@media (max-width: 768px) {
  .chat-modal-view {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    cursor: default;
    overflow-y: auto; 
  }
  .chat-frame {
    border:0;
    border-radius: 0;
    height: 100%;
  }


  
  .chat-area {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
  }
  .chat-footer-view {
    padding: 0;
    bottom: env(safe-area-inset-bottom);
    bottom: constant(safe-area-inset-bottom);
    max-height: 50%;
  }

  
  .chat-footer-view .chat-area {
    width: 80%;
  }
  .chat-footer-view .chat-input {
    margin-bottom: 10px;
    
    width: 80%;
  }


  .chat-settings-container {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}


/* Camera shutter transition */

/* end of chat*/
.view-style-rail {
  display: block;
  padding: 12px;
}
.view-style-rail .view-style-map-item {
  min-width: 280px;
  max-width: 280px;

}
.view-style-rail .view-style-map-item .context-tag {
  align-self: end;
}

/* View Styles */
.view-style-box {
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 10;
  padding: 15px;
  margin-bottom: 8px;
  margin-top: 8px;

  flex-direction: column;
  justify-content: center;
  display: flex;
  overflow: auto;
}


.view-style-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .view-style-box {
    flex-direction: column; 
    align-items: flex-start;
  }
}

/* CONTAINER */

/* DEFAULT → MOBILE (2 per row) */
/*
.view-style-card-item {
  flex: 0 0 calc(50% - 6px);
}

@media (min-width: 768px) {
  .view-style-card-item {
    flex: 0 0 calc(33.333% - 8px);
  }
}

@media (min-width: 1200px) {
  .view-style-card-item {
    flex: 0 0 calc(16.666% - 10px);
  }
}

*/
/* card for CTA */


/* 4x4 mode (optional toggle class) */
/*
.view-style-badge.grid-4 .view-style-card-item {
  flex: 0 0 calc(25% - 9px);
}

/* CARD BODY */


/* HOVER */
/*
.view-style-card-item:hover .card_basic {
  transform: translateY(-2px);
  background: #2a2a2a;
}
*/
/* ICON */


.view-style-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

}
.view-style-badge.horizontal {
  display: grid;
  grid-auto-flow: column;  
  grid-auto-rows: 1fr;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 10px;
  row-gap: 0;
  column-gap: 12px; 
  margin: 0;
}
.three-row {
  grid-template-rows: repeat(3, auto);
}
.two-row {
  grid-template-rows: repeat(2, auto);
}
.one-row {
  grid-template-rows: repeat(1, auto);
}

.view-style-badge.horizontal .view-style-card-item {
  width: 240px;
  padding: 0;
  margin: auto;
}

/* end of badges */ 

/* category filter container */
.view-style-category-filter {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 8px;
  background-color: #fff;
  max-height: 100vh;
  overflow-y: auto;
  margin: 0;
  max-width: 300px;
}

/* each category box */
.categoryFrame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0.4px solid var(--text-color);
  /* border-bottom: 0.4px solid var(--text-color);*/
  border-radius: 4px;
  overflow: hidden; 
  padding: 6px 10px;
  transition: all 0.3s ease;
  min-height: 40px;
}

.view-style-category-filter::-webkit-scrollbar {
  width: 6px;
}

.view-style-category-filter::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}



/* Inner content style */
.view-style-category-filter {
  width: 100%;
  border-radius: 0;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;

}


.view-style-story {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  scroll-snap-type: x mandatory;
  padding: 8px 8px;
  scrollbar-width: none;
  justify-content: flex-start; /* stay left-aligned like Instagram */
  align-items: center;
}

.view-style-story::-webkit-scrollbar {
  display: none;
}

/* fix child spacing and override Bootstrap defaults */
.view-style-story > .col-12,
.view-style-story > .frame {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  scroll-snap-align: start;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  margin: 0 !important;          /* overrides auto margins */
}

.view-style-story > .selected {
  background-color: var(--engagement-bg) !important;
}

.view-style-story > .col-12:hover,
.view-style-story > .frame:hover {
  transform: scale(1.05);
}


.view-style-story-auto {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  scroll-snap-type: x mandatory;
  padding: 8px 8px;
  scrollbar-width: none;
  justify-content: flex-start;
  /*align-items: center;*/
}

.view-style-story-auto::-webkit-scrollbar {
  display: none;
}

/* fix child spacing and override Bootstrap defaults */
.view-style-story-auto > .col-12,
.view-style-story-auto > .frame {
  flex: 0 0 auto;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
  }


.view-style-story-auto > .col-12:hover,
.view-style-story-auto > .frame:hover {
  transform: scale(1.05);
}
/*

.view-style-map-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  padding:8px;
  position: fixed;
  top:20%;
}

.view-style-map-meta .context-map{
 
  padding:6px 10px;
  font-size:.78rem;
  font-weight:600;
  white-space:nowrap;

}
*/

.view-style-chips{

  display:grid;

  grid-template-columns:repeat(2,minmax(110px,1fr));

  gap:12px;
  padding:18px;

  border-radius:22px;

  background:
      linear-gradient(
          rgba(255,255,255,.92),
          rgba(255,255,255,.82)
      );

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.65);

  box-shadow:
      0 18px 40px rgba(0,0,0,.12);

}

.view-style-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: 28px 26px;
  border-radius: 16px;

  max-width: 720px;
  margin: 20px auto;

  position: relative;
  overflow: hidden;
}

.view-style-cta::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
}

.view-style-cta .context-default {
  margin: 0;
  line-height: 1.5;
}
.view-style-context-card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  /*flex: 0 0 auto; */
  width: max-content;
  max-width: none;
  gap: 6px;
  margin: 0;
}
.view-style-context-card::-webkit-scrollbar {
  display: none;
}


.view-style-context-card p:not(.bold) {
  padding: 8px 14px;
  border-radius: 12px;

  background: color-mix(in srgb, var(--main-color) 2%, white);
  border: 1px solid color-mix(in srgb, var(--main-color) 12%, white);

  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  margin: 0 0 0 4px;
}

.view-style-context-card p:not(.bold):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  margin: 0 0 0 4px;

}
.view-style-context-card .context_row {
  min-width: 140px  !important;    /* important */

}
@media (max-width: 768px) {

  .view-style-context-card {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 16px;
    width: 100%;
    padding-bottom: 6px;
  }

  .view-style-context-card .context_row {

    display: flex;
    flex-direction: column;

  }

  .view-style-context-card p:not(.bold) {
    white-space: normal; /* allow wrapping inside card */
  }

}

.view-style-carousel {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 20px;
  scroll-behavior: smooth;
  border-radius: 12px;
  width: 100%;
}

.view-style-carousel::-webkit-scrollbar {
  display: none;
}

/* Frames */
.view-style-carousel > .frame {
  flex: 0 0 calc((100% - 40px) / 3); /* max 3 frames */
  height: 400px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Image covers the frame */
.view-style-carousel > .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures full cover without stretching */
  object-position: center; /* center the image */
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.view-style-carousel > .frame:hover {
  transform: scale(1.05);
}

/* Tablet: show 2 frames max */
@media (max-width: 1024px) {
  .view-style-carousel > .frame {
    flex: 0 0 calc((100% - 20px) / 2);
    height: 300px;
  }
}

/* Mobile: single frame per slide */
@media (max-width: 768px) {
  .view-style-carousel {
    gap: 10px;
    padding: 10px;
  }

  .view-style-carousel > .frame {
    flex: 0 0 90vw; /* almost full viewport width */
    height: auto;   /* let image height scale */
  }

  .view-style-carousel > .frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensures image covers frame */
  }
}



.view-style-menu-grid {
  justify-content: center;
  flex-direction: column;
  max-width: 140px;
  align-items: center;
  overflow-y: auto;
  gap: 18px;
  align-content: center;
}
/* Container */

.view-style-menu-grid-tiny {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
}

/* Each action */
.view-style-menu-grid-tiny .icon_menu {
  flex: 0 0 auto;
  cursor: pointer;
}

/* Button shape */

.view-style-menu-grid-tiny .icon-wrapper {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px;
  background: #f6f6f6;

  transition: all 0.2s ease;
}

/* Icon */
.view-style-menu-grid-tiny .icon {
  align-items: center;
  justify-content: center;
}

.view-style-menu-grid-tiny .icon i {
  font-size: 16px !important;
  opacity: 0.75;
  transition: all 0.2s ease;
}

/* Hover */
.view-style-menu-grid-tiny .icon-wrapper:hover {
  background: #ececec;
  transform: translateY(-2px);
}

.view-style-menu-grid-tiny .icon-wrapper:hover i {
  opacity: 1;
}

/* Active / Selected (uses your generic .selected safely now) */
.view-style-menu-grid-tiny .selected .icon-container {
  background: var(--engagement-bg);
  border: 1px solid var(--engagement-option-checked);
}

.view-style-menu-grid-tiny .selected i {
  color: var(--engagement-option-checked);
  opacity: 1;
}

/* Container */

/* ROW */

/* ==========================================================
   HEADER MENU
   ========================================================== */

   .view-style-menu-row{

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 14px;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;
    -ms-overflow-style:none;

    scroll-behavior:smooth;
}

.view-style-menu-row::-webkit-scrollbar{
    display:none;
}

/* ==========================================================
   CHIP
   ========================================================== */

.view-style-menu-row .icon_menu{

    flex:none;

    display:flex;
    align-items:center;

    border-radius:999px;

    padding:9px 14px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);

    transition:
        background .2s,
        border-color .2s,
        transform .15s;

    cursor:pointer;

    user-select:none;
}

.view-style-menu-row .icon_menu:hover{

    background:rgba(255,255,255,.09);
    border-color:rgba(255,255,255,.14);
}

.view-style-menu-row .icon_menu:active{

    transform:scale(.97);
}

/* ==========================================================
   CONTENT
   ========================================================== */

.view-style-menu-row .icon-container{

    display:flex;
    align-items:center;
    gap:8px;
}

.view-style-menu-row .icon-wrapper{

    width:18px;
    height:18px;

    display:flex;
    justify-content:center;
    align-items:center;

    flex:none;
    margin-right: -12px;
}

.view-style-menu-row .icon{

    width:100% !important;
    height:100% !important;

    display:flex;
    justify-content:center;
    align-items:center;
}

/*
.view-style-menu-row .icon img{

    display:block;

    width:18px;
    height:18px;

    object-fit:contain;

    opacity:.82;

    filter:
        brightness(.85)
        saturate(.7);

    transition:.2s;
}
*/
/* ==========================================================
   TEXT
   ========================================================== */

.view-style-menu-row .icon-text{

    margin:0;

    display:block;

    white-space:nowrap;

    font-size:13px;
    font-weight:600;
    line-height:1;

    letter-spacing:.15px;

    color:inherit;
}

/* ==========================================================
   ACTIVE
   ========================================================== */

.view-style-menu-row .icon_menu.selected img{

    opacity:1;

    filter:none;
}

/* ==========================================================
   EMPTY ICON (📦 All)
   ========================================================== */

.view-style-menu-row .icon:empty{

    display:none;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:768px){

    .view-style-menu-row{

        gap:8px;
        padding:8px 10px;
    }

    .view-style-menu-row .icon_menu{

        padding:8px 12px;
    }

    .view-style-menu-row .icon img{

        width:17px;
        height:17px;
    }

    .view-style-menu-row .icon-text{

        font-size:12px;
    }
}


.view-style-product-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 15px;
  max-width: 100%;
  box-sizing: border-box;
}
.view-style-product-view .contentGrid {
  max-height: 480px;
  overflow: auto; 
}

/* Remove any fixed max-widths or widths from images/containers */
.view-style-product-view img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.view-style-product-view img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Ensure grid adjusts on smaller screens */
@media (max-width: 992px) {
  .view-style-product-view {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .view-style-product-view {
    grid-template-columns: 1fr;
  }
}

.view-style-photo-grid-line-full {
  display: flex;
  overflow-x: auto; /* Enables horizontal scrolling */
  gap: 12px;
  padding: 10px;
  text-align: center;
  scroll-behavior: smooth; /* Smooth scrolling */
}

.view-style-photo-grid-line-full::-webkit-scrollbar {
  display: none; /* Hides the scrollbar */
}

.view-style-photo-grid-line-full div {
  flex: 0 0 auto; /* Prevents the image from growing or shrinking */
  height: auto; /* Let height adjust accordingly */
  margin:10px;
}

.view-style-photo-grid-line-full img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  max-width: 300px !important;
  max-height: 200px ! important;
}

.view-style-photo-grid-line-full img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.view-style-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  max-width: 100%;
  padding-left: 10px;
}

.view-style-icon-grid .icon-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: center;
}

.view-style-icon-grid .icon-wrapper {
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease-in-out;
}

.view-style-icon-grid .icon-wrapper:hover {
  transform: scale(1.1);
}
.view-style-icon-grid .icon-text {
  display: none;
}


.view-style-icon-grid .icon i {
  font-size: 20px;
}

.view-style-icon-grid p {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
}

/* For very narrow screens */
@media (max-width: 480px) {

  .view-style-icon-grid p {
    font-size: 11px;
  }
}


/* ===========================================================
   LIST VIEW
   =========================================================== */

   .view-style-icon-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:8px;
    background:rgba(255,255,255,.045);

}

.view-style-icon-list > .frame:hover{
    background:rgba(255,255,255,.08);
}

/* -----------------------------------------------------------
   LABEL
   ----------------------------------------------------------- */
   .view-style-icon-list > .frame > p:first-of-type{
    flex:1;
    margin:0;

    display:flex;
    align-items:center;
    gap:10px;

    font-size:13px;
    font-weight:500;
    line-height:1.35;

}
.view-style-icon-list .context-image{
  width:16px;
  height:16px;
  opacity:.55;
}

/* -----------------------------------------------------------
   VALUE ROWS
   ----------------------------------------------------------- */

.view-style-icon-list .context_row > p:last-of-type{
    margin-left:auto;
    flex:none;

    font-size:14px;
    font-weight:600;
    white-space:nowrap;
}

/* -----------------------------------------------------------
   CSAT
   ----------------------------------------------------------- */

.view-style-icon-list .view-style-csat{

    display:flex;
    align-items:center;
    gap:0;
    margin: 0;
    padding: 0;
}

/* Push rating to right */

.view-style-icon-list .view-style-csat > .col-auto:first-of-type{
    margin-left:auto;
}

/* Each rating icon */

.view-style-icon-list .view-style-csat .col-auto{
    flex:none;
}



/* Slight emphasis on selected icons */

.view-style-icon-list .rated .icon-wrapper img{
    transform:scale(1.05);
}

/* Hide empty text generated by renderer */

.view-style-icon-list .icon-text{
    display:none;
}



.view-style-icon-grid-mobile {
  display: grid;
  grid-template-columns: repeat(auto-fit, 68px);
  justify-content: center;

  gap: 12px;
  padding: 8px;
  max-width: 420px;
}

.view-style-icon-grid-mobile.wide {
  grid-template-columns: repeat(auto-fit, 128px);
  max-width: 720px;

}
.view-style-icon-grid-mobile .frame {
  width: 100%;
  align-items: center;
  /*
  justify-content: center;
  */
  gap: 12px;
}
.view-style-icon-grid-mobile .icon-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.view-style-icon-grid-mobile .icon-wrapper{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-shrink:0;
  transition:.2s;
}

.view-style-icon-grid-mobile .icon-wrapper:hover{
  transform:scale(1.08);
}


.view-style-icon-grid-mobile .icon-text{
  margin-top:6px;
  /*width:68px;*/
  width:100%;

  font-size:11px;
  line-height:1.25;
  font-weight:500;

  hyphens:none;

  /* Always reserve two lines */
  min-height:2.5em;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  overflow: hidden;
  /*
  text-overflow: ellipsis;
  white-space: nowrap;
  */
}
.view-style-icon-grid-mobile.three-row {
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: row;
  grid-auto-columns: 68px;

  overflow-x: auto;
  overflow-y: hidden;

  justify-content: start;
  max-width: 100%;
}

@media (max-width: 480px) {
  .view-style-icon-grid-mobile.three-row {
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: 68px;

    overflow-x: auto;
    overflow-y: hidden;
  }
}
.view-style-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 12px;
  padding: 8px;
  max-width: 420px;
}



.view-style-img-grid .icon-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  position:relative;
  overflow:hidden;
  border-radius:14px;
}

.view-style-img-grid .icon,
.view-style-img-grid .icon-wrapper{
  height: 100% !important;
  width: 100% !important;

}

.view-style-img-grid .icon{
  height: 100% !important;
  width: 100% !important;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.45) 40%,
    transparent 70%
  );
}



.view-style-img-grid .col-auto:hover img{
  transform:scale(1.05);

  filter:
    saturate(1)
    brightness(1)
    contrast(1);
}


.view-style-img-grid img {
  max-height: 160px;
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  transition:.35s;
  padding: unset;
  margin: 0;
  border-radius: unset;
  filter:
    brightness(.82)
    saturate(.60)
    contrast(1.12);

}
.view-style-img-grid .icon-text{
  position: absolute;
  bottom: 5px;
  width:68px;

  font-size:13px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.2px;
  color:white;

  left:10px;
  right:10px;
  bottom:10px;
  
  text-align:left;
  width:auto;

  /* Only wrap between words */
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;

  /* Always reserve two lines */
  min-height:2.5em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 2px 8px rgba(0,0,0,.6);

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* For very narrow screens */
@media (max-width: 480px) {
  .view-style-img-grid {
    padding: 12px;
  }

  .view-style-img-grid p {
    font-size: 11px;
  }
}
.view-style-icon-interaction {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  max-width: 400px;
}

.view-style-icon-interaction .icon-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: center;
}

.view-style-icon-interaction .icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease-in-out;
}

.view-style-icon-interaction .icon-wrapper:hover {
  transform: scale(1.1);
}

.view-style-icon-interaction .icon i {
  font-size: 20px;
}

.view-style-icon-interaction p {
  font-size: 10px;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
}

/* For very narrow screens */
@media (max-width: 480px) {
  .view-style-icon-interaction {
    padding: 12px;
  }

  .view-style-icon-interaction p {
    font-size: 11px;
  }
}




/* menu */

.view-style-menu-list {
  display: flex;
  flex-direction: column;
}
.theme-style-menu .menu-item{

  background: var(--color-white);

  border:1px solid rgba(3,187,187,.08);

  border-radius:18px;

  padding:14px;

  box-shadow:
      0 2px 10px rgba(0,0,0,.04);

  transition:.2s ease;
}

.theme-style-menu .menu-item:hover{

  border-color:var(--engagement-border);

  box-shadow:
      0 8px 22px rgba(0,0,0,.08);
}

.theme-style-menu .cardSecondary{
  width: 80%;
  margin-left: 0;

}
/* ==========================================================
   PRICE TAG
   ========================================================== */

   .cardPrice {

    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: auto;
    width: auto;
    padding: .45rem .8rem;

    border-radius: 999px;

    white-space: nowrap;


    background: linear-gradient(
        135deg,
        var(--color-white),
        var(--color-light)
    );

    box-shadow:
        0 2px 8px var(--engagement-shadow);

    transition: .2s ease;
}

.cardPrice:hover {

    border-color: var(--side-color);

    box-shadow:
        0 4px 14px var(--engagement-shadow);
}


/* value */

.price-value {

    margin: 0;

    font-size: 1.15rem;
    line-height: 1;

    font-weight: 800;
    letter-spacing: -.03em;

    color: var(--support-color);
    overflow: visible !important;
}


/* currency */

.price-currency {

    display: flex;
    align-items: center;
}

.price-currency .icon-text {
    display: none;
}

.price-currency .icon-container,
.price-currency .icon-wrapper {

    display: flex;
    align-items: center;
    justify-content: center;

}

.price-currency .icon-wrapper {

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: var(--main-color);
    margin: 0;
}

.price-currency img {



    filter: brightness(0) invert(1);
}

/* base style */





/* CARDS */



/* Base styling for all cards container */

/* ===================================================================
   Product Title Frame
   =================================================================== */

/* end of category */  


/* Base Button Style */
/*
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border-radius: 3px;
}
*/

.typing-dots {
  display: inline-flex;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: gray;
  border-radius: 50%;
  display: inline-block;
  animation: typingAnimation 1.5s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
/* end of templates */


/* rewards */


/*
/* rewards Container */
/* Reward Container Styling */
/* Slider Value Display */

/* social media */


/*  CONTEXT
    ******************
*/


/* MAP */


.mapOverlay {
  z-index: 9999 !important;
}
.mapOverlayControl {
  z-index: 9999 !important;
  position: absolute;
  bottom: 40px;
  right: 18px;
  width: auto;
  margin-bottom: 40px;
}


.leaflet-control-container {
    top:0;
    position: static;
  }
.mapPinDot {
  width:6px; 
  height:6px; 
  border-radius:50%; 
  background:gray;
}

.map-marker-focus {
  animation: pulseMarker 1.2s ease;
}
.leaflet-marker-icon:hover {
  z-index: 10000 !important;
}
.mapIcon {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  width: max-content;
  height: 28px;

  padding: 3px;

  border-radius: 999px;

  position: relative;

  background-color: rgba(220, 220, 220, 0.9);
  border: 1px solid var(--color-light);

  box-shadow: 0 1px 4px rgba(0,0,0,0.15);

  transform-origin: center bottom;
  will-change: transform;

  white-space: nowrap;

  pointer-events: auto;
}


.mapIcon img {
  width: 20px;
  height: 20px;

  border-radius: 50%;

  padding: 2px;

  object-fit: contain;
  display: block;
}

/* Healthy (green) */
.mapIcon.healthy  {
  background-color: green;
}
.mapIcon.born  {
  background-color: yellow;

}
.mapIcon.malformed  {
  background-color: red;

}
.mapIcon.cured  {
  background-color: darkmagenta;

}
  

.mapIcon-wrapper {
  display: inline-block;
}
.mapIcon-label {
  position: relative;
  top: auto;
  left: auto;
  transform: none;

  font-size: 11px;
  font-weight: 500;

  max-width: 140px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #222;
  padding-right: 4px;
}
.mapIcon-meta {
  position: absolute;

  top: -6px;
  right: -6px;

  min-width: 16px;
  height: 16px;

  padding: 0 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 9px;
  font-weight: 600;

  border-radius: 999px;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);

  pointer-events: none;
}
.mapCluster-count {
  position: absolute;
  bottom: -6px;
  right: -8px;

  min-width: 18px;
  height: 18px;

  padding: 0 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  font-weight: 600;

  border-radius: 999px;

  background: #ddd;
  border: 1px solid rgba(0,0,0,0.1);

  pointer-events: none;
}
.mapIcon:hover {
  transform: scale(1.12);
  z-index: 10000;
}
/*

.mapIcon {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  will-change: transform;
  background-color: lightgray;
  opacity: 0.85;
  border-radius: 50%;
  border: solid 1px;
  border-color: var(--color-light);
  }
  
  .mapIcon .icon-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  
  background: rgba(0, 0, 0, 0.2);
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  padding: 2px;
  }
  

  .mapCluster img ,
  .mapIcon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  }
  
  .mapIcon .icon-text {
  display: none; 
  }

  
  .mapIcon:hover {
  transform: scale(1.15);
  z-index: 10;
  }
  */

/*
.mapCluster-wrapper {
  background: transparent;
  border: none;
  width: 24px;
  width: 24px;
}

.mapCluster {
  position: relative;

  border-radius: 50%;
  background: white;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 0 0 4px rgba(0,0,0,0.35);
}

.mapCluster-icon {
  background-color: lightgray;
  opacity: 0.85;
  border-radius: 50%;
  border: solid 1px;
  border-color: var(--color-light);
  pointer-events: none;
}

.mapCluster-count {
  position: absolute;
  bottom: -8px;
  right: -10px;

  background:lightgrey;

  font-size: var(--cluster-font);
  padding: 1px 5px;
  border-radius: 10px;
  border-color: var(--color-light);

  line-height: 1;
  white-space: nowrap;
}

.mapCluster--restaurants {
  background: #fff7f7;
}

.mapCluster--hotels {
  background: #f2f8ff;
}

.mapCluster--default {
  background: #ffffff;
}

*/

.mapNavigation {
  gap:4px;
  padding: 4px;
  justify-content: center;
  margin-top: 10px;
  max-width: min-content !important;

}
/* container */
/*
.sub-container-map .view-style-badge {

  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}
*/
/*
.sub-container-map .view-style-badge {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  max-width: 100%;


}

.sub-container-map .view-style-badge.horizontal {
  display: flex !important;    
  flex-wrap: nowrap;

  gap: 8px;
  overflow-x: auto;
  padding: 8px;

  grid-template-rows: none !important;
  grid-auto-flow: unset !important;
  grid-auto-rows: unset !important;
}

*/
.sub-container-map .view-style-badge {

  display: flex;
}
.sub-container-map .view-style-badge.horizontal .view-style-card-item {
  flex: 0 0 auto !important;  
  width: auto !important;     
  max-width: none !important;
}
/* each item */
.sub-container-map .view-style-card-item {
  flex: 0 0 auto;
  width: auto;
}

.sub-container-map .view-style-card-item:hover .card_basic {
  transform: scale(1.05); /* smaller scale */
}
/* kill big card layout */
.sub-container-map .card_basic {
  flex: 0 0 44px;  
  width: 44px;
  height: 44px;
  min-width: 44px; 
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  padding: 0;

  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transform: scale(1.1);

}

/* ICON becomes main actor */


.sub-container-map .icon {
  font-size: 18px;
}

/* hide text + count */
.sub-container-map .cardContext,
.sub-container-map .cardCount {
  display: none;
}

/* hover / active feedback */
.sub-container-map .view-style-card-item:hover .card_basic {
  transform: scale(1.1);
}

.sub-container-map .view-style-card-item.active .card_basic {
  background: #000;
  color: #fff;
}

.pin-selection-mode {
  cursor: crosshair;
  
}

.pin-helper {
  position: absolute;
  top: 10%;
  left: 50%;

  transform: translateX(-50%);

  padding: 10px 16px;

  border-radius: 999px;

  background: rgba(15,23,42,.92);

  color: white;

  font-size: 13px;
  font-weight: 600;

  z-index: 9999;

  pointer-events: none;
}

.pin-action {
  position: absolute;
  bottom: 10%;
  left: 50%;

  transform: translateX(-50%);

  padding: 10px 16px;

  border-radius: 999px;

  background: rgba(15,23,42,.92);

  color: white;

  font-size: 13px;
  font-weight: 600;

  z-index: 9999;

  pointer-events: none;
  width: max-content;
}
.pin-action i,
.pin-action a 
{
  color: white;

}

/*
.pin-selection-mode::after {

  position: absolute;
  top: 20px;
  left: 50%;

  transform: translateX(-50%);

  padding: 10px 16px;

  border-radius: 999px;

  background: rgba(15,23,42,.92);

  color: white;

  font-size: 13px;
  font-weight: 600;

  z-index: 9999;

  pointer-events: none;
}


/* end of map */



.engage-wrapper .action-option-item {
  justify-content: center;
}

.action-container {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

.action-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 480px;
}
.action-wrapper {
  padding: 1.5rem 0.9rem 2rem; 
  width: 100%;
}

.action-form-navigation:empty {
  display: none !important;
}
      
.action-options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  align-items: center;
}

.action-options-list {
  display: block;
  width: 100%;
}

.action-option-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
  text-align: center !important;
  margin-left: 4px;
  margin-bottom: 4px;

}
.action-option-item:hover {
  overflow: visible;
  z-index: 10; 
}
/*
.action-option-item > * {
  /*min-width: 0;           */
  /*min-width: max-content;*/
  /*
   
}

*/
.action-option-item label {
  margin-bottom: 0;
}



.action-input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: var(--text-dark);
  font-size: 16px;
  box-sizing: border-box;
  background: #fff;
  min-height: 40px;
}

/* INPUT (single line) */
.action-input.input {
  height: 40px;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
}


/* TEXTAREA (multi line) */
.action-input.textarea {
  padding: 0.6rem 0.75rem;
  display: block;
  min-height: auto;
}

.action-input.textarea textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: vertical;

  background: transparent;

  font-size: 16px;
  line-height: 1.5;
  color: #222;

  min-height: 80px;
  max-height: 200px;
}

.action-input textarea::placeholder,
.action-input input::placeholder {
color: #aaa;
font-style: italic; 
}
.action-button{  
  flex-grow: 1;
  min-width: 0; 
  max-width: 100%;
  width: auto;
  padding: 0.25rem 0.75rem;
  line-height: normal;
  box-sizing: border-box;
}


.action-button {
  display: inline-flex; 
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  color: #333;
  white-space: nowrap;      
  line-height: 1;     
}

.action-button i {
  font-size: 1.1rem;
}

.action-button:hover {
  background-color: #e0f0ff;
  border-color: #3399ff;
  color: #000;
}

.action-preview {
  font-size: 0.85rem;
  color: #555;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.action-close-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: transparent;
  border: none;
  color: #ea3000;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.action-close-icon:hover {
  background-color: #ea3000;
  color: var(--color-white);
}


.action-apply-btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  background-color:var(--main-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.action-apply-btn,
.action-apply-btn p,
.action-apply-btn a,
.action-apply-btn i {
  color: var(--side-color) !important;
}

.action-discard-btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  background-color: transparent;
  /*border: 1px solid #ea3000;*/
  border:0;
  border-radius: 8px;
  color: #ea3000;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.action-discard-btn:hover {
  background-color: #ea3000;
  color: white;
}

.action-apply-btn:hover {
  background-color: #0b3a44 !important;
}

.action-discard-btn:hover {
  background-color: #8b1d1d !important;
  color: white !important;
}


button.action-selected.action-apply-btn {
  background-color: #03bbbb;
  border: 2px solid #025f5f;
  color: white;
  box-shadow: 0 0 0 2px rgba(3, 187, 187, 0.3);
}

button.action-selected.action-discard-btn {
  background-color: #ea3000;
  border: 2px solid #a01e00;
  color: white;
  box-shadow: 0 0 0 2px rgba(234, 48, 0, 0.3);
}

.action-checkbox {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: #333;
  user-select: none;
  flex-grow: 1;
}

.action-checkbox input {
  display: none;
}
.checkmark {
  width: 16px;
  height: 16px;
  border: 1px solid #cfcfcf;
  background-color: #fff;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* ✔ checked state */
input:checked + .checkmark {
  background-color: #03bbbb;
  border-color: #03bbbb;
}

/* ✔ check icon */
checkmark::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

/* show check */
input:checked + .checkmark::after {
  transform: rotate(45deg) scale(1);
}

/*
.action-toggle-switch {
  display: inline-flex;
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
  color: #333;
}

.action-toggle-switch input {
  display: none;
}

.action-toggle-switch .slider {
  width: 40px;
  height: 20px;
  background-color: #ccc;
  border-radius: 20px;
  position: relative;
  transition: background-color 0.3s;
}

.action-toggle-switch .slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.action-toggle-switch input:checked + .slider {
  background-color: var(--engagement-bg);
}

.action-toggle-switch input:checked + .slider::before {
  transform: translateX(20px);
}


*/
/* label layout */
.action-toggle-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  font-size: 14px;
  color: rgba(0,0,0,0.85);
}
.action-toggle-switch input {
  display: none;
}

.action-toggle-switch .slider {
  width: 36px;
  height: 20px;
  background: #ddd;
  border-radius: 999px;
  position: relative;
  transition: all 0.25s ease;
}

.action-toggle-switch .slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;

  left: 2px;
  top: 2px;

  background: #fff;
  border-radius: 50%;

  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* checked */
.action-toggle-switch input:checked + .slider {
  background: #000;
}

.action-toggle-switch input:checked + .slider::before {
  transform: translateX(16px);
}
@media (max-width: 479px) {
  .action-wrapper {
    padding: 0.9rem 0.75rem 1.5rem;
  }

  .action-options-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .action-option-item {
    gap: 0.25rem;
  }
  .action-input {
    box-sizing: border-box;
  }

  .action-button,
  .action-apply-btn,
  .action-discard-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .action-close-icon {
    top: 0.3rem;
    right: 0.3rem;
    font-size: 0.9rem;
  }

  textarea.action-input {
    line-height: 1.4;
    min-height: 5rem;
  }
}

@media (max-width: 479px) {
  .action-options-list {
    margin-bottom: 0.9rem;

  }

  .action-option-item label {
    font-size: 0.9rem;
  }

  .action-preview {
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
  }
}
.action-horizontal-group {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-direction: row;
}
@media (max-width: 210px) {
  .action-horizontal-group {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.option-wrapper {
  flex-shrink: 1;   
  min-width: 0;     
}

/* NPS options buttons (0-10 scale) */
.action-select-option {
  background-color: var(--background-gradient-middle);
  color: var(--color-white);
  border: none;
  border-radius: 5px;
  padding: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: 40px;
  text-align: center;
  line-height: 30px;
  box-sizing: border-box;
  flex: 1 0 40px;
  min-width: 40px;
  max-width: 48px;
}

/* Hover effect for NPS option buttons */
.action-select-option:hover {
  background-color: var(--hover-color);
  transform: translateY(-3px);
}

/* Add spacing around the container for the edit bar */
.action-select-option:last-child {
  margin-right: 0;
}

/* Mobile Responsiveness: Adjust buttons and layout for smaller screens */
@media (max-width: 768px) {
  .action-select-option {
    width: 32px;
    font-size: 14px;
    padding: 6px 8px;
  }
}

/* Mobile Responsive (Small screens) */
@media (max-width: 480px) {
  .action-select-option {
    width: 30px; /* Smaller width for mobile devices */
    padding: 6px 10px; /* Adjust padding for smaller screens */
    font-size: 12px; /* Make text smaller */
  }
}

/*
[data-engage-type="csat"] .action-button:hover i {
  color: gold;
}


*/




.hidden {
  display: none !important;
}
.responsive { /* only in mobile */
  display: none !important;
}
.active { 
  display: block !important;
}
.page {
  max-width: 768px;
}
.page .browse {
  border-radius: 0 !important;
  margin: 0;

}
@media (max-width: 768px) {
  .page {
      height: 100dvh;
      max-height: 100dvh;
      
  }
}
.overlayActive {  /** only in overlay **/
  display: none !important;

}
.overlay .overlayActive {
  display: flex !important;

}

.overlay.pin-background-mode {
  z-index: -1 !important;
  pointer-events: none;
  opacity: 0.15;
  transform: scale(.98);
  transition: all .25s ease;
}



/* ========== MOBILE RESPONSIVE: OVERLAY FILTER PANEL ========== */
@media (max-width: 768px) {
  /* Remove automatic hiding on mobile */
  .responsive {
    display: block !important;
  }
  .bigScreen {  /* only in desktop*/
    display: none !important;
  }
  .bigScreen.active {
    display: block !important;
  }


  /* The sidebar becomes a full overlay */
  .position-sticky-scroll {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-white);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    margin-top: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 20px;
    flex-shrink: 0; /* prevents weird collapsing */

  }

  .context-list {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #333;
  }

  .view-style-category-filter {
    max-width: 100%;
    padding: 60px 20px 30px;
  }
}
/*
@media (max-width: 479px) {

  .transparent,
  .transparent .icon-wrapper,
  .transparent i {
    opacity: 0.70;
  
  }

}
*/
/* Only hide non-interactive empty elements */

[data-engage-type]:empty
:not([data-engage-type="resizeSideBar"])
:not([data-engage-type="pin"])
:not(input)
:not(textarea)
:not(select),
.wrapper:empty:not(.resizer):not(input):not(textarea):not(select) {
  display: none !important;
}


.engage-wrapper,
[data-engage-type]:not([data-target-obj-type="Frame"]) {
  cursor: pointer;
  user-select: none;
}


/* Live status pulse */
.anim-live-pulse {
  animation: livePulse 1.8s ease-out infinite;
}


/* Monitor icon floating */
.anim-monitor-icon {
  animation: monitorIcon 1.8s ease-in-out infinite;
}


/* Jelly / organic floating shape */
.anim-jelly-float {
  animation: jellyFloat 2.4s ease-in-out infinite;
}


/* Scanner line */
.anim-scan-down {
  animation: scanDown 1.8s linear infinite;
}


/* OTP validation error */
.anim-otp-shake {
  animation: otp-shake 0.3s ease;
}


/* Overlay entrance */
.anim-fade-overlay {
  animation: fadeOverlay 0.3s ease-out both;
}


/* Scale entrance */
.anim-scale-in {
  animation: scaleIn 0.3s ease-out both;
}


/* Amber status pulse */
.anim-pulse-amber {
  animation: pulseAmber 1.5s ease-in-out infinite;
}


/* Monitor pulse */
.anim-monitor-pulse {
  animation: monitorPulse 1.6s ease-in-out infinite;
}


/* Pulsing ring around dot */
.anim-pulse-dot {
  animation: pulseDot 1.8s ease-out infinite;
}


/* Generic slide-up entrance */
.anim-slide-up {
  animation: slideUp 0.35s ease-out both;
}
.anim-success-pop {
  animation: successPop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}


.anim-error-shake {
  animation: errorShake 0.45s ease-in-out both;
}

@media (prefers-reduced-motion: reduce) {

  .anim-bubble-up,
  .anim-pulse-marker,
  .anim-progress-slide,
  .anim-fade-in,
  .anim-pulse-bg-move,
  .anim-spin,
  .anim-load-width,
  .anim-move-gradient,
  .anim-pulse,
  .anim-ripple,
  .anim-pulse-in,
  .anim-flip-reward,
  .anim-like-pulse,
  .anim-blink,
  .anim-pixel-drift,
  .anim-typing,
  .anim-pixel-glitch,
  .anim-idle-bounce,
  .anim-pew-bounce,
  .anim-shimmer,
  .anim-pulse-soft,
  .anim-pulse-focus,
  .anim-theme-post-slide-up,
  .anim-success-pop,
  .anim-error-shake,
  .anim-live-pulse,
  .anim-monitor-icon,
  .anim-jelly-float,
  .anim-scan-down,
  .anim-otp-shake,
  .anim-fade-overlay,
  .anim-scale-in,
  .anim-pulse-blue,
  .anim-pulse-amber,
  .anim-monitor-pulse,
  .anim-pulse-dot,
  .anim-slide-up {
    animation: none !important;
  }
}

@keyframes successPop {
  0% {
    scale: 0.65;
    opacity: 0;
  }

  45% {
    scale: 1.12;
    opacity: 1;
  }

  70% {
    scale: 0.97;
  }

  100% {
    scale: 1;
    opacity: 1;
  }
}


@keyframes errorShake {
  0% {
    translate: 0;
  }

  20% {
    translate: -8px 0;
  }

  40% {
    translate: 7px 0;
  }

  60% {
    translate: -5px 0;
  }

  80% {
    translate: 3px 0;
  }

  100% {
    translate: 0;
  }
}
@keyframes livePulse {
  0% {
      transform: translate(-50%, -50%) scale(0.6);
      opacity: 0.9;
  }
  70% {
      transform: translate(-50%, -50%) scale(1.6);
      opacity: 0.2;
  }
  100% {
      transform: translate(-50%, -50%) scale(2);
      opacity: 0;
  }
}

@keyframes monitorIcon {

  0% {
      transform:
          translateY(0px);
  }

  50% {
      transform:
          translateY(-4px);
  }

  100% {
      transform:
          translateY(0px);
  }
}

@keyframes jellyFloat{

  0%,100%{
      border-radius:18px 22px 20px 24px;
  }

  20%{
      border-radius:22px 19px 24px 20px;
      transform:scaleX(.98) scaleY(1.02);

  }

  40%{
      border-radius:20px 25px 18px 23px;
  }

  60%{
      border-radius:24px 20px 23px 19px;
  }

  80%{
      border-radius:19px 23px 21px 25px;
  }


}

@keyframes scanDown {
  0% {
      transform: translateY(-100%);
  }
  100% {
      transform: translateY(200%);
  }
}
@keyframes otp-shake {
  0%, 100% {
      transform: translateX(0);
  }

  25% {
      transform: translateX(-4px);
  }

  75% {
      transform: translateX(4px);
  }
}
@keyframes fadeOverlay {

  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}

@keyframes scaleIn {

  from {
      opacity: 0;
      transform: scale(.94) translateY(8px);
  }

  to {
      opacity: 1;
      transform: scale(1) translateY(0);
  }
}

@keyframes pulseAmber {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes monitorPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}


@keyframes themePostSlideUp {
  from {
      transform: translateY(40px);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

/* subtle entrance */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}



@keyframes bubbleUp {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
}


@keyframes pulseMarker {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}


@keyframes progressSlide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(300%);
  }
}

@keyframes progressComplete {
  0% {
    width: 35%;
    box-shadow: none;
  }

  55% {
    width: 100%;
    box-shadow:
      0 0 6px var(--engagement-border),
      0 0 14px rgba(3, 187, 187, 0.35);
  }

  75% {
    width: 100%;
    box-shadow:
      0 0 10px var(--engagement-border),
      0 0 22px rgba(3, 187, 187, 0.45);
  }

  100% {
    width: 100%;
    box-shadow: none;
  }
}
/* Modal Fade-in Animation */
@keyframes fadeIn {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse-bg-move {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  } 
  100% {
    background-position: 0% 0%;
  }
}

/* Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loadWidth {
  0% { width: 0%; }
  50% { width: 100%; }
  100% { width: 0%; }
}

/* Gradient moves slower for smoother effect */
@keyframes moveGradient {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}


@keyframes pulse-animation {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}


@keyframes ripple-animation {
  to {
    transform: scale(4); /* More visible effect */
    opacity: 0;
  }
}
@keyframes spin-wait {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



@keyframes pulse-in-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


/* Keyframes for flipping effect */
@keyframes flipReward {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes likePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
    color: #e74c3c;
  }
  100% {
    transform: scale(1);
  }
}


@keyframes blink {
  50% {
      opacity: 0;
  }
}

@keyframes pixelDrift {
  from {
      background-position: 0 0;
  }
  to {
      background-position: 10px 10px;
  }
}


@keyframes typingAnimation {
  0% { opacity: 0.3; transform: translateY(0px); }
  50% { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 0.3; transform: translateY(0px); }
}



@keyframes pixelGlitch {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(2px, -2px) scale(1.1); }
  50% { transform: translate(-2px, 2px) scale(0.9); }
  75% { transform: translate(1px, -1px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes idleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes pewBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1); }
}


@keyframes shimmer {
  100% { transform: translateX(100%); }
}


@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes pulse-focus {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  25% {
    transform: scale(1.08);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18), 0 0 8px rgba(255, 255, 255, 0.05);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25), 0 0 12px rgba(255, 255, 255, 0.08);
  }
  75% {
    transform: scale(1.08);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18), 0 0 8px rgba(255, 255, 255, 0.05);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}