:root {
    --primary: #ff6b6b;
    --secondary: #4ecdc4;
    --accent: #ffbe0b;
    --dark: #1a1a2e;
    --light: #f7f7f7;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body
{	
	min-height: 100vh;
	font-size: 16px;
	font-weight: 300;
	display: flex;
	flex-direction: column;
	font-family: "nunito";
    background: rgb(247, 248, 250);
  background: rgb(240, 241, 243);
}

main{flex-grow: 1;}

footer
{
	border-top: 1px solid cornflowerblue;
	margin-top: 80px;
	background:  #151f28; /*		#1b2535; 		*/
	margin-top: 80px;
	color: #c8ccd0
}

footer a {color: #c8ccd0}

footer > div
{
	margin-top: 40px;
}

footer div > div h2
{
	font-size: 1.5rem;
	font-weight: 300;
	font-family: "oswald", sans-serif;;
}


footer ul, footer p, footer address{list-style: none; padding: 0; margin: 0px; line-height: 1.5rem; font-size: 0.9rem;}

.copy-R{font-size: 0.75rem}
.copy-R{font-size: smaller;}

h1, h2{
	margin-block-start: 0px;
    margin-block-end: 0px;
	font-family: "nunito", sans-serif;
	font-weight: 100;
}

a{
	color:black; text-decoration: none; 
}
a.nav-link{
	color:black; text-decoration: none; 
    font-weight: 300; 
	font-size: 1.1em;
	letter-spacing: 1.0px;
}

a.hilte{color: cornflowerblue; text-decoration: underline;}
a.hilte:hover{color: blue;}
a, a.nav-link{color:black; text-decoration: none;}

a.rglr{color: rgb(0, 106, 255);}
a.rglr:hover{text-decoration: underline;}

.std-blue-link{ color: cornflowerblue; text-decoration: underline;}
.std-blue-link:hover{ text-decoration: none;}

.no-ln-blue-link{ color: cornflowerblue; text-decoration: none;}
.no-ln-blue-link:hover{ text-decoration: underline;}

.no-ln-white-link{ color: #fff; text-decoration: none;}

.no-ln-link{text-decoration: none;}


.fs-7{font-size: .9rem;}
.fs-8{font-size: .8rem;}
.w-5{width: 5px;} .w-10{width: 10px;} .w-15{width: 15px;} .w-20{width: 20px;} .w-30{width: 30px;}.w-40{width: 40px} .w-50px{width: 50px} .w-60{width: 60px} 
.w-70{width: 70px} .w-80{width: 80px} .w-90{width: 90px}.w-100px{width: 100px}.w-110{width: 110px}.w-120{width: 120px}.w-130{width: 130px}


.ltr-spc-1px{letter-spacing: 1px;}
.ltr-spc-2px{letter-spacing: 2px;}

.txt-warn{color: rgb(212, 128, 2)}

button{
	
	outline: none;
	border: none;

   	outline: 0px;
	border: 0px;
	margin: 0px;
	padding: 0px;
    border-radius: 0px;

    vertical-align: middle;
	text-decoration: none;
	display: inline-block;
    background-color: transparent;
}

.form-control::placeholder
{
	color: cornflowerblue;
  
	opacity: .3;
}

.form-control{
    border-color: #55b8fa;
    color: rgb(83, 24, 159);
}


input.hp::-webkit-outer-spin-button,
input.hp::-webkit-inner-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

.invalid-input {
    border-color: red;
}

#sign-in-nav-id{
	background: rgb(29, 41, 58)
}

.logo-nav-bar{
    border-bottom: rgb(240, 104, 25);
    
    
  /*box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px; 72*/
 /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; 32*/
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px; /*92*/
    
}

.beauj-logo{
	font-family: "Cherry Bomb One", system-ui;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 3px;
	font-size: 2.3rem;
}

.beauj-logo-xtra
{
	color: 	cornflowerblue;
	font-weight: 300;
	font-style: normal;
	
	letter-spacing: 1px;
	font-family: "nunito", system-ui;
	font-size: 1.2rem;
}



/***************************************************************************************************************
										Utils
****************************************************************************************************************/


.product-thumb {
  /* Set the display size */
  width: 300px;
  height: 300px;
  
  /* Ensures the image fills the square without distortion */
  object-fit: cover; 
  
  /* Modern browsers: ensure the browser knows the shape before it loads */
  aspect-ratio: 1 / 1;

  /* The "Sharpness" Trick: */
  /* This prevents the browser from over-smoothing the image when downscaling */
  image-rendering: -webkit-optimize-contrast; /* Safari/Chrome */
  image-rendering: high-quality;             /* General */
}

/* The container or the img itself before it loads */
.img-skeleton {
  background-color: #eee;
  background-image: linear-gradient(
    90deg, 
    #eee 0px, 
    #f5f5f5 40px, 
    #eee 80px
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  
  /* Matches your square design */
  aspect-ratio: 1 / 1;
  display: block;
  width: 100%;
  max-width: 300px; /* or 600px for product page */
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Once the image loads, we remove the shimmer */
.img-loaded {
  background-image: none !important;
  animation: none !important;
  background-color: transparent !important;
}


/* Spinner container */
.spinner-old {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1); /* Light background ring */
  border-top: 4px solid #3498db;        /* Colored spinning part */
  border-radius: 50%;                     /* Makes it a circle */
  animation: spin 0.8s linear infinite;   /* Smooth rotation */
  display: none;                          /* Hidden by default */
                
  margin: 20px auto;
}

/* Rotation animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Full-screen darkening overlay */
.overlay {
    position: fixed;
    inset: 0;                   /* Covers top, left, bottom, and right */
    background: rgba(0,0,0,0.5); /* Semi-transparent */
    display: none;              /* Hidden by default */
    justify-content: center;    /* Center horizontally */
    align-items: center;        /* Center vertically */
    z-index: 9999;              /* Sit on top of everything */
}

/* The Spinner Ring */
.spinner, .beauj-spinner, .beauj-si-spinner{
	display: block;
    width: 50px !important;
    height: 50px !important;
    /*border: 5px solid #f3f3f3; */
	  border: 5px solid rgba(255, 255, 255, 1.0);
    border-bottom:  6px dotted #fc0303;  
  /*  border-top: 5px double rgb(83, 24, 159); */
    border-top: 5px double #04a216; 
    border-radius: 50%;
    animation: spin .7s linear infinite;
	z-index: 99999; 
}
.beauj-si-spinner{
    width: 40px !important;
    height: 40px !important;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.form-control {
  caret-color: #f90101;;
  animation: beauj-blink 2s infinite;
}

@keyframes beauj-blink {

  0%,50% {
    caret-color: #f90101;;
  }
  
  75%, 100% {
    caret-color: rgb(25, 247, 5);
  }
}
/***************************************************************************************************************
                           Start Seller User Acct, company Acct, etc
****************************************************************************************************************/

.displ-box, .displ-box-t{
  border: 1px solid #fefefe;
  border-radius: 6px;
  box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px; /* 95 */
  position: relative;

}
.displ-box{
  background-color: white; 
  /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;  8 */
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px; /*92*/

}

  .chk-mark{color: #55b8fa; font-size: 1.2rem}
  .un-chk-mark{color: #fe3f3f; font-size: 1.2rem}
  .eye-pwd{color: #55b8fa; font-size: 1.5rem}
/***************************************************************************************************************
                           End Seller User Acct, company Acct, etc
****************************************************************************************************************/
.spinner-with-text {
  position: relative;
  width: 60px; /* Size of your spinner */
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner-prog {
  position: absolute;
  width: 100%;
  height: 100%;
  border-top: 6px double #08801c;  /*The spinning color */
  border-bottom: 6px double #08801c; /* The spinning color */

  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

.progress-text {
  position: relative;
  font-size: 12px;
  color: #333;
  font-weight: bold;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/****************************************************************************************************
                      Sign In
 ****************************************************************************************************/

 #sign-in-btn-id:disabled
 {
	 color: #bbb;
	 background: #efeeee;
	 cursor: not-allowed;
 }
 
 
 .wrpr {
  /* border: 1px solid #ccc; */
   font-size: smaller;
 }
 
 .tgl-btn {
   /*border: 1px solid #1a1a1a; */
   display: inline-block;
   position: relative;
   text-align: center;
   transition: background-color 600ms ease, color 600ms ease;
 }
 
 #sign-in-instr-id{font-size: .8rem;}
 
 .sign-in-code input, .verify-code input
 {
	 width: 2.3rem;
	 height: 3.6rem;
	 text-align: center;
	 margin-right: 7px;
	 font-size: 1.3rem;
	 border: 1px solid cornflowerblue;
	 border-radius: 3px;
	 box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; 
 }
 .sign-in-code #gt3-id, .verify-code #gt3-id{margin-right: 18px;}

 .sign-in-code input:hover, .verify-code input:hover
 {
	 outline: orangered solid 1px;
 }
 
 .sign-in-code input:focus, .sign-in-code input:active, .verify-code input:focus, .verify-code input:active 
 {
	 outline: rgb(8, 212, 42) solid 1px;
 }
 #sign-in-code-status-id, #verify-code-status-id{color: #0a0; vertical-align: middle; }
 #sign-in-code-status-id i, #verify-code-status-id i{font-size: 2rem; margin-bottom: 5px; display: inline-block;}
 #sign-in-code-status-id span, #verify-code-status-id span{font-size: 1rem; margin-bottom: 10px; display: inline-block;}
 
 

 #SCA-lnk-id{ text-decoration: none; display: none; color: #253f6e}
 #SCA-lnk-id:hover{ text-decoration: underline;}

 #send-code-btn-id, #send-verify-code-btn-id
 {
	 color: white;
	 background-color: cornflowerblue;
	 border: 1px solid cornflowerblue; 
	 border-radius: 10px; 
	 padding: 5px 10px;
	 width: fit-to-content;
	 text-align: center;
	 margin: 10px 0px;
 }
 
 #send-code-btn-id:disabled, #send-verify-code-btn-id:disabled{
	 color: #444;
	 background-color: #dfdfdf;
	 border: 1px solid #ccc;
	 cursor: not-allowed;
 }
 #send-code-btn-id:disabled:hover, #send-verify-code-btn-id:disabled:hover{
	 border: 1px solid #ccc;
 }
 #send-code-btn-id:hover, #send-verify-code-btn-id{
	 border: 1px solid #47649b;
 }