/** ================================================================================================== **/ 
/** -------------------------------------------------------------------------------------------------- **/ 
/** -------------------------------------------------------------------------------------------------- **/ 
/** ================================================================================================== **/ 
/** ================================================================================================== **/ 
/** generic utilities -------------------------------------------------------------------------------- **/ 
*:focus { box-shadow: unset !important; } 
:root { --navbar_height: 40px; }
.sticky_offset {top: var(--navbar_height);}
.fa-stack {height:2em;width:2em;}
.fa-stack.border {height:2.11em;width:2.15em;}
.fa-stack.border-2 {height:2.27em;width:2.31em;}
.btn_back_to_top {width:50px;height:50px;}
.no_caret::after {display: none !important;}
.rotate_90 { transform: rotate(90deg); }
.shadow_top {
  --bs-box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15);
  box-shadow: var(--bs-box-shadow) !important;
}
.shadow_sm_top {
  --bs-box-shadow-sm: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);  
  box-shadow: var(--bs-box-shadow-sm) !important;
}
/** -------------------------------------------------------------------------------------------------- **/
/** ================================================================================================== **/  

.thumbs_up_down_wrapper > button {width:40px;height:40px}
/** ================================================================================================== **/ 
/** header and footer nav----------------------------------------------------------------------------- **/ 
nav.navbar { height:var(--navbar_height); }
.navbar_bypass { padding-top:var(--navbar_height); } 
.navbar .offcanvas {--bs-offcanvas-width: 280px !important;}


.navbar-brand, .navbar-brand:hover {
  color:var(--bs-primary);
  padding-left:35px;
  background: transparent url("https://styleverse.io/images/styleverse_logo_magenta.png") left center/auto 80% no-repeat;
  
}
.nav-link {
  color: var(--bs-primary);
}
.nav-link.active {

  background-color: var(--bs-primary) !important;
}

.btn_icon {width:30px;height:30px;}
footer .navbar-brand, footer .navbar-brand:hover {padding-left:24px;}
/** -------------------------------------------------------------------------------------------------- **/ 
/** ================================================================================================== **/ 
/* Base state (NO blur) — transition applies here */
.block_ui_blur {
  filter: blur(0);
  transition: filter 0.35s ease-out; /* slow unblur */
}

/* Blur state — NO transition here */
.block_ui_blur.blur {
  filter: blur(4px);
  transition: none; /* instant blur */
}


/** ================================================================================================== **/ 
/** -------------------------------------------------------------------------------------------------- **/ 
/* -- Item fade-in -------------------------------------------------------
Every col div gets the fade-in animation on mount.
The grid is unmounted/remounted via grid_visible v-if on search/sort,
guaranteeing every item is a fresh DOM node that triggers the animation.
On paging (load more), items append without unmounting the grid.    */
@keyframes animate_paging_fadein {
from { opacity: 0; transform: translateY(12px); }
to   { opacity: 1; transform: translateY(0);    }
}
/* Only animate items explicitly marked as new — not all col divs */
.paging_item_new {
animation: animate_paging_fadein 0.4s ease both;
}
/* Smooth fade-out while scrolling to top on search/sort.
The transition runs on the grid wrapper div when opacity-0 is applied.
Duration matches roughly half the scroll time so the fade feels
concurrent with the scroll rather than before or after it.         */
.paging_grid_fadeout {
transition: opacity 0.4s ease;
}
/* -- Paging controls area -- */
.paging_controls {
min-height: 4rem;
}
/** -------------------------------------------------------------------------------------------------- **/ 
/** ================================================================================================== **/  
.fa-flip.fa_flip_vertical {--fa-flip-x: 1; --fa-flip-y: 0;}  

 .border_dashed {
    border-style: dashed !important;
}
[v-cloak] { display: none; }

 
.text_gradient {
  /* Create a horizontal gradient with 4 colors */
  background: linear-gradient(90deg, rgba(254, 218, 117, 1),rgba(250, 126, 30, 1),rgba(214, 41, 118, 1),rgba(150, 47, 191, 1), rgba(79, 91, 213, 1));
  -webkit-background-clip: text; /* Needed for Safari/iOS */
  background-clip: text;
  color: transparent; /* Makes the text itself transparent so the background shows through */
  
  /* Optional: improve rendering on some browsers */
  -webkit-text-fill-color: transparent;




  background-size: 200% 200%; /* Make it larger so movement is visible */
  animation: animate_bg_wander 6s linear infinite;


}






/** ==================================================================================================== **/ 
/** background image or color CSS DEFINITIONS ---------------------------------------------------------- **/  
.bg_img_contact_us { 
  background: linear-gradient(90deg,rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.5), rgba(255,255,255,0)),
  url(https://images.pexels.com/photos/8867431/pexels-photo-8867431.jpeg) center center/cover no-repeat;  
}  


.bg_img_loading {  
  background: linear-gradient(to bottom,rgba(255, 255, 255,0.6), rgba(255, 255, 255,0.6)), url(https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExZzQwbm82bHh0MGplMHVxNGYyZHdjZnIyNjBidWJpdjgzMWdiY3hpMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7VzgMsB6FLCilwS30v/giphy.gif) center center/cover no-repeat; 
}  
.bg_img_bubbles { 
  background: linear-gradient(to bottom,rgba(255, 255, 255,0.4), rgba(255, 255, 255,0.4)), url(../images/bg_4.jpg) center center/cover no-repeat fixed; 
}

.bg_color_ig {
  --bg_opacity: 0.2;
  background-image: linear-gradient(135deg,
   rgba(81, 91, 212, var(--bg_opacity)),
   rgba(129, 52, 175, var(--bg_opacity)),
   rgba(221, 42, 123, var(--bg_opacity)),
   rgba(245, 133, 41, var(--bg_opacity)),
   rgba(254, 218, 119, var(--bg_opacity))
   );

}  
.bg_wander {
  background-size: 300% 300%;
   background-attachment: scroll;
    background-repeat: no-repeat;
  animation: animate_bg_wander var(--bg_move_duration, 30s) ease-in-out infinite;
}
@keyframes animate_bg_wander {
  0%   { background-position: top left; }
  25%   { background-position: top right; }  
  50%   { background-position: bottom right; }  
  75% { background-position: bottom left; }
  100% { background-position: top left; }
}
/** background image or color CSS DEFINITIONS ---------------------------------------------------------- **/  
/** ==================================================================================================== **/ 



 
.carousel_item_height {height:460px;}  
/** Small devices (landscape phones, 576px and up) **/
@media (min-width: 576px) { 
  .carousel_item_height {height:350px;}  
 }
.text_shadow {  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));}







/** *********************************************************************************************** **/ 
/** div_laurel CSS DEFINITIONS ******************************************************************** **/  
.div_laurel {width:265px;text-align:center;display:inline-block;}  

.div_laurel span {
  height:80px;
  width:calc(100% - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  float:left;
}  
.div_laurel::before, .div_laurel::after {
  content:"";
  height:80px;
  width:30px;
  background:transparent url(../images/laurel_left.png) right center/15px auto no-repeat;
  display:block;
  float:left;
}  
.div_laurel::after {
  background:transparent url(../images/laurel_right.png) left center/15px auto no-repeat;
  float:right;
}  
/** div_laurel CSS DEFINITIONS ******************************************************************** **/  
/** *********************************************************************************************** **/ 





/** ================================================================================================== **/  
/** -------------------------------------------------------------------------------------------------- **/ 

:root,
html[data-bs-theme="light"] {
    --bs-primary: #d6008a;
    --bs-primary-rgb: 214, 0, 138;  


    /* subtle background derived from your magenta */
    --bs-primary-bg-subtle: #ffeaf7; 
    --bs-primary-border-subtle: #f7c4e5;



  --bs-body-inverse-bg: #000;
  --bs-body-inverse-text: #fff;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.85);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.85);

  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.75);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 0.75);

  --bs-btn-disabled-bg: rgba(var(--bs-primary-rgb), 0.5);
  --bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), 0.5);
}
.btn-outline-primary {
  --bs-btn-bg: #ffeaf7;
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.85);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 0.85);
  --bs-btn-active-color: #fff;
}
/** -------------------------------------------------------------------------------------------------- **/ 
/** ================================================================================================== **/  



/** ================================================================================================== **/ 
/** ────────────────────────────────────────────────────────────────────────────────────────────────── **/ 

/*
  * menu_x_scroll
  * ─────────────
  * Handles two nav patterns with one set of classes:
  *
  *   Pattern A — items only:
  *     <div class="menu_x_scroll_wrapper">
  *       <div class="menu_x_scroll_inner"> ... </div>
  *     </div>
  *
  *   Pattern B — sticky label + scrollable items:
  *     <div class="menu_x_scroll_wrapper">
  *       <span class="menu_x_scroll_label">Label</span>
  *       <div class="menu_x_scroll_inner"> ... </div>
  *     </div>
  *
  * BOOTSTRAP-FIRST:
  *   All spacing, colour, typography → Bootstrap utilities.
  *   Only the scroll mechanic and scrollbar hiding are custom below.
  *
  * DEPENDENCIES: Bootstrap 5.3
  */

/* Outer row — fills navbar width, centres content when it fits */
.menu_x_scroll_wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* centres when total width fits */
  width: 100%;
  min-width: 0;
}

/* Optional sticky label — never scrolls, never shrinks */
.menu_x_scroll_label {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Scrollable strip */
.menu_x_scroll_inner {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
  min-width: 0;
}

/* Prevent any child (link, button, pill) from wrapping its text */
.menu_x_scroll_inner > * {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hide scrollbar visually on all browsers — still scrollable */
.menu_x_scroll_inner::-webkit-scrollbar { display: none; }
.menu_x_scroll_inner { scrollbar-width: none; -ms-overflow-style: none; }
/** ────────────────────────────────────────────────────────────────────────────────────────────────── **/ 
/** ================================================================================================== **/ 




 
.wander_wrapper .wander_item {
  --wander_item_hex: #7fbfff; 
  --wander_item_size: 80px;
  --wander_duration: 50s;
  --wander_glow_duration: 3s; 
  --wander_direction: normal;
  --wander_delay: 0s;
  
  
  width:var(--wander_item_size);
  height:var(--wander_item_size);
  border-color:var(--wander_item_hex) !important;
  background-color:#eeeeee;
  left: 30%; top: 30%; 
  animation: 
  animate_glow var(--wander_glow_duration) ease-in-out infinite, 
  animate_wander var(--wander_duration) ease-in-out var(--wander_delay) infinite var(--wander_direction);
}  
@keyframes animate_glow {
  0%   { box-shadow: 0 0 0px   0px var(--wander_item_hex); }
  50%  { box-shadow: 0 0 calc(var(--wander_item_size) / 6) calc(var(--wander_item_size) / 10) var(--wander_item_hex); }
  100% { box-shadow: 0 0 0px   0px var(--wander_item_hex); }
}
@keyframes animate_wander {
  0%   { left: 30%; top: 30%; opacity:1; }
  10%  { left: 55%; top: 1%;opacity:0; }
  20%  { left: 18%; top: 35%; opacity:1;}
  30%  { left: 48%; top: 50%; }
  40%  { left: 1%; top: 55%; }
  50%  { left: 50%; top: 28%; }
  60%  { left: 25%; top: 0%; opacity:1;}
  70%  { left: 52%; top: 50%; opacity:0;}
  80%  { left: 1%; top: 22%; opacity:1;}
  90%  { left: 42%; top: 45%;  }
  100% { left: 30%; top: 30%; }
}
 



 
.progress_wrapper {
  --progress_msg_count: 8;            
  --progress_msg_height: 20px;
  --progress_duration: 50s;
  --progress_comet_rgb: 255, 105, 180;  
}  


.progress_wrapper .progress .progress-bar  {
  animation:
  var(--progress_duration) animate_x_to_100 forwards, 
  0.5s linear infinite progress-bar-stripes;
}


.progress_wrapper .progress .progress-bar .progress_comet {
  color: rgb(var(--progress_comet_rgb));
  animation: animate_x_outside calc(var(--progress_duration) * 0.02) linear infinite;
  text-shadow:
  -6px   0 4px  rgba(var(--progress_comet_rgb), 0.95),
  -14px  0 8px  rgba(var(--progress_comet_rgb), 0.75),
  -26px  0 12px rgba(var(--progress_comet_rgb), 0.55),
  -40px  0 16px rgba(var(--progress_comet_rgb), 0.38),
  -58px  0 20px rgba(var(--progress_comet_rgb), 0.22),
  -80px  0 26px rgba(var(--progress_comet_rgb), 0.12),
  -108px 0 32px rgba(var(--progress_comet_rgb), 0.06),
  -140px 0 40px rgba(var(--progress_comet_rgb), 0.02);
}


.progress_wrapper .progress_msg_wrapper, 
.progress_wrapper .progress_msg_wrapper .progress_msg_inner .d-block {
  height:var(--progress_msg_height);
  line-height:var(--progress_msg_height);
}  
.progress_wrapper .progress_msg_wrapper .progress_msg_inner {    
  height: auto; /* let it grow tall */
  animation: animate_y_to_bottom var(--progress_duration) ease-in-out forwards;
}
@keyframes animate_x_to_100 {
  0%   { width: 0%; }
  10%   { width: 5%; }
  30%  { width: 30%; }
  60%  { width: 80%; }
  99%  { width: 99%; }
  100% { width: 100%; }
}
@keyframes animate_y_to_bottom {
  0%      { transform: translateY(0%) }
  10%     { transform: translateY(0%) }
  13.5%   { transform: translateY(calc(-1 * 100% / var(--progress_msg_count))) }
  23.5%   { transform: translateY(calc(-1 * 100% / var(--progress_msg_count))) }
  27%     { transform: translateY(calc(-2 * 100% / var(--progress_msg_count))) }
  37%     { transform: translateY(calc(-2 * 100% / var(--progress_msg_count))) }
  40.5%   { transform: translateY(calc(-3 * 100% / var(--progress_msg_count))) }
  50.5%   { transform: translateY(calc(-3 * 100% / var(--progress_msg_count))) }
  54%     { transform: translateY(calc(-4 * 100% / var(--progress_msg_count))) }
  64%     { transform: translateY(calc(-4 * 100% / var(--progress_msg_count))) }
  67.5%   { transform: translateY(calc(-5 * 100% / var(--progress_msg_count))) }
  77.5%   { transform: translateY(calc(-5 * 100% / var(--progress_msg_count))) }
  81%     { transform: translateY(calc(-6 * 100% / var(--progress_msg_count))) }
  91%     { transform: translateY(calc(-6 * 100% / var(--progress_msg_count))) }
  94.5%   { transform: translateY(calc(-7 * 100% / var(--progress_msg_count))) }
  100%    { transform: translateY(calc(-7 * 100% / var(--progress_msg_count))) }
}

@keyframes animate_x_outside {
  0%   { left: -50%; }
  100% { left: 150%; }
}
 

.ui_credit_current {left:2px;top:3px !important;height:15px;width:15px;  font-size: 0.6em;}