/**
 * Stylesheet for app UI elements (not document rendering)
 */

@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
}

html, body, #OdroAppWrapper { height: 100%; }
body { font-family: InterVariable, sans-serif; }

body { background-color: #ececec; background-attachment: fixed; background-size: cover; background-position: center center;}

body,[data-bs-theme=light] body { background-image: url('../img/backgrounds/bg_a.jpg'); }
[data-bs-theme=dark] body { background-image: url('../img/backgrounds/bg_c.jpg'); }

#OdroAppMainContent { padding: 1rem; margin: 0; }


.form-label { font-size: 0.8em; color: #555; position: relative; bottom: -20px; left: 10px; }

/* body { background: linear-gradient(135deg, #ff6ec4, #7873f5, #4adede); } */





/**
 * Responsive styles
 *
 * Variable sizing and positioning of elements based on screen size
**/
.container {margin: 0 auto; }
.container-narrow { max-width: 740px; }
.container-x-narrow { max-width: 424px; }


/* Resizing container-narrow (used on pages like branding) */
@media (min-width: 1400px) { .container-narrow {max-width: 820px; } }
@media (min-width: 1600px) { .container-narrow {max-width: 1020px; } }
@media (min-width: 1800px) { .container-narrow {max-width: 1320px; } }


/**
 * Custom overrides and ported classes
**/


.v-avatar { border-radius: 50%; width: 2.5rem; height: 2.5rem; display: inline-block; text-align: center; }
.v-avatar i { font-size: 1.6rem; }

/** Brand switcher **/
.btn-primary { background: #12204d; }
.bg-primary { color: #fff; }


#modal_switchBrand .btn:hover, #modal_switchBrand .btn:focus, #modal_switchBrand .btn:active {background: #aaa4}




.text-gradient-ai {
	-webkit-font-smoothing: antialiased;
	background-image: linear-gradient(91deg, rgb(57, 105, 239) 0%, rgb(81, 50, 169) 49.04%, rgb(222, 88, 51) 100%);
	background-clip: text;
	background-attachment: scroll;
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-orange {
  background: linear-gradient(to right, #fbad41, #f63);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}





.bg-primary-ai { background-image: linear-gradient(135deg, rgb(191 227 237) 0%, rgb(141 153 204) 10%, #8e6ad7 50%, rgb(244 108 134) 92%); /* AI colours */ }






.product-icon {display: inline-block; height: 80px; }

.profile-actions .glass-btn { width: 100%; display: block; text-align: center; margin-bottom: 5px; }




/** GLASS PANELS + BUTTONS **/

.glass-panel--basic {background: #ffffff6f; backdrop-filter: blur(30px); box-shadow: 0 10px 30px #888a;}


.glass-panel {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

  padding: 24px 36px;
  color: #333;
}


[data-bs-theme=dark] .glass-panel {
  background: rgba(20, 20, 30, 0.45);

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);

  color: #f5f5f5;
}



.glass-btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;

  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;

  cursor: pointer;
  /* color: #fff; */
  color: #333;
  text-decoration: none;

  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);

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



.glass-btn--primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15) );
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.glass-btn--primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.2) );
}

.glass-btn--primary:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.25); }



.glass-btn--secondary { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.glass-btn--secondary:hover { background: rgba(255, 255, 255, 0.28); }

.glass-btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: none; }
.glass-btn--ghost:hover { background: rgba(255, 255, 255, 0.15); }






[data-bs-theme=dark] .glass-panel .glass-btn { color: #f5f5f5; }
[data-bs-theme=dark] .glass-panel .glass-btn--primary { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) ); }

.glass-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.glass-btn--glow:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 18px rgba(255, 110, 196, 0.6); }






.tooltip-inner { background-color: #fffc; color: #333; }

.tooltip .tooltip-arrow {display: none}






.gradient-a {
  background-color: #f9f6f9;
  background-image:
    radial-gradient(at 50% 0%, rgba(245, 230, 235, 0.8) 0px, transparent 60%),
    radial-gradient(at 20% 60%, rgba(230, 215, 240, 0.6) 0px, transparent 50%),
    radial-gradient(at 80% 90%, rgba(220, 210, 245, 0.4) 0px, transparent 50%);
}


.gradient-b {
  background-color: #ffffff;
  background-image:
    radial-gradient(at 0% 0%, rgba(200, 230, 240, 0.6) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(180, 190, 230, 0.5) 0px, transparent 50%),
    radial-gradient(at 50% 10%, rgba(240, 220, 240, 0.4) 0px, transparent 40%);
}


.gradient-c {
  background-color: #0d112b;
  background-image:
    radial-gradient(at 0% 100%, hsla(231, 78%, 46%, 0.8) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(330, 60%, 35%, 0.5) 0px, transparent 50%);
}


.gradient-d {
	background-color: #ffffff;
	background-image: linear-gradient(133.11deg, rgb(255, 255, 255) 18%, rgb(250, 250, 250) 31.45%, rgb(240, 225, 247) 65.55%, rgb(205, 223, 255) 87.34%)
}







#pageLoadSpinner {
  border: 12px solid #f3f3f3;
  border-top: 12px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
  position: fixed;
	z-index: 99999;
  top: 50%;
  left: 50%;
	margin: -60px 0 0 -40px;
  box-shadow: 0 0 60px #000000;
	background: #0005;
}

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