/*** SUPPLIER LIST BUTTONS ***/
html {
  --supp-tabs-bord-col : #b1b2bd;	
}
#supp-list-picker{
display: block;
height: 45px;
right: 0;
width: 99%;
margin: 0px 0px 0px 10px;
/*max-width: 830px;*/
}

div.popup #supp-list-picker{
	max-width: 624px !important;
	margin: 10px 10px 0px 10px;
}	
ul.supplierSelectMenu {
margin: 8px 0 0 80px;
display: flex;
flex-direction: row;
/*
justify-content: center;
*/
}

#supplier-tabs-line{
border-top: 2px solid var(--supp-tabs-bord-col);
margin-top: -1px;
position: relative;
  z-index: 80;
}

ul.supplierSelectMenu.clicker li {
border: 1px solid #aaa;
float: left;
list-style: outside none none;
margin-left: 3px;
padding: 2px 4px;
background-color: #DDD;
  -moz-border-radius: 0px;
  -webkit-border-radius: 3px 3px 0px 0px;
  border-radius: 3px 3px 0px 0px;
min-height:36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
overflow-y: hidden;
  overflow-x: hidden;  
/*  border-bottom:none !important;*/
}

ul.supplierSelectMenu.clicker li.primary {
	border-top: 4px solid #0faa02;	
}
th.primary {
	border-left: 4px solid #0faa02 !important;	
	color: #008a00;
	background-color: #cae4fb;
	font-size: 11pt;
}

ul.supplierSelectMenu.clicker li.blind {
	border-top: 4px solid #0049bb;
}
th.blind {
	border-left: 4px solid #0049bb !important;	
}

ul.supplierSelectMenu.clicker li.fab-nl {
	border-top: 4px solid #bb6000;	
}
th.fab-nl {
	border-left: 4px solid #bb6000 !important;	
}

ul.supplierSelectMenu.clicker li.fab-own {
	border-top: 4px solid #861900;
}
th.fab-own {
	border-left: 4px solid #861900 !important;	
}

ul.supplierSelectMenu.clicker li.extra {
	border-top: 4px solid #dfdf00;
}
th.extra {
	border-left: 4px solid #dfdf00 !important;	
}

th.sewing {
	border-left: 4px solid #74d5fb  !important;	
}
th.service {
	border-left: 4px solid #058e7b  !important;	
}
th.fitting {
	border-left: 4px solid #01a4b5  !important;	
}


ul.supplierSelectMenu.clicker li.current.primary {
	border-top: 6px solid #0faa02;
}	
ul.supplierSelectMenu.clicker li.current.blind {
	border-top: 6px solid #0049bb;
}	
ul.supplierSelectMenu.clicker li.current.fab-nl {
	border-top: 6px solid #bb6000;
}	
ul.supplierSelectMenu.clicker li.current.fab-own {
	border-top: 6px solid #861900;
}	
ul.supplierSelectMenu.clicker li.current.extra {
	border-top: 6px solid #dfdf00;
}	
	

div.popup a.t2-fab-deactivate,
div.popup table.colours-deact,
div.popup div.colours-deact,
div.popup img.col-editor{
/* Studio	*/
  display:none;
}

ul.supplierSelectMenu.clicker li.current {
background-color: #FFF;
color: #000;

font-size: 120%;
font-weight: bold;
margin-top: -2px;
height: 38px;
padding: 1px 12px 3px;
border-bottom: 2px solid white;
  border-bottom: 1px solid #FFF;
  border-left: 2px solid var(--supp-tabs-bord-col);
  border-right: 2px solid var(--supp-tabs-bord-col);
  border-top: 2px solid var(--supp-tabs-bord-col);
  z-index: 81;
}

div.popupXX ul.supplierSelectMenu.clicker li.current {
padding: 5px 6px 1px;
}
 
ul.supplierSelectMenu.clicker span {
  display: inline-block;
  vertical-align: middle;
  line-height: 0.9;
/*  
	height: 32px;
  line-height: 32px;
  text-align: center;
  display: inline-block;
  outline: 1px solid green;
*/  
}

ul.supplierSelectMenu.clicker li:hover {
	cursor: pointer;
	background-color: #FFF;	
}
ul.supplierSelectMenu.clicker li.current:hover {	
	cursor: default;
}

ul.supplierSelectPic {
	list-style: none;
}
ul.supplierSelectPic.clicker {
	padding: 50px;
}
ul.supplierSelectPic.clicker li:hover {
	cursor: pointer;
	box-shadow: 3px 3px 4px #BBBBBB;
}
ul.supplierSelectPic li {
	height: 45px;
    text-indent: -999px;
	margin-bottom:15px;
/*	
	outline: 1px solid Red;
*/	
}
ul.supplierSelectPic li.CPC {
    background: #fff url("/images/css_images/layout/logos.png") no-repeat scroll -458px 0px;
    width: 216px;
}
ul.supplierSelectPic li.MCP {
background: #fff url("/images/css_images/layout/logos.png") no-repeat scroll 4px 0;
    width: 175px;
}
ul.supplierSelectPic li.JDT {
background: #fff url("/images/css_images/layout/logos.png") no-repeat scroll -182px 0px;
    width: 264px;
}
ul.supplierSelectPic li.BIM {
background: #fff url("/images/css_images/layout/logos.png") no-repeat scroll -684px 0;
    width: 170px;
}
ul.supplierSelectPic li.TEX {
background: #fff url("/images/css_images/layout/logos.png") no-repeat scroll -856px 0;
    width: 85px;
}
ul.supplierSelectPic li.NZW,
ul.supplierSelectPic li.MOL{
font-size: 18px;
    line-height: 40px;
    padding-left: 11px;
    text-indent: 0;
    width: 265px;
}

.search-highlight {
  background-color: #fffb05;
  padding: 2px;
}

/* Producta Wrap */
#prod-wrap {max-width:850px}
#prod-wrap .prod-main-imgs {float: left;text-align: center;padding: 5px 15px;}
#prod-wrap img.product-main {float: none;margin:0;}
#prod-wrap p.img-caption {float: none;padding:0;}
#prod-wrap .prod-cust-fields {clear:both}
#prod-wrap .prod-colours {clear:both}
#prod-wrap .blurb {padding-top:0;line-height: 1.4;font-size: 11pt;}
#prod-wrap .prod-title, .crumbs {font-weight:bold;font-size: 17px;padding: 15px 0px 0px 7px}
.crumbs {font-weight: bold;
  font-size: 16px;
  margin: 15px 7px 12px 7px;
  border-bottom: 2px solid #c1c1c1;
  max-width: 850px;
  padding: 0px 0px 5px 5px;}

#bottom-links {
	display: inline-block;
}

table.table-list td{
	vertical-align:middle;
}

div.prod-colours table.std {
	min-width : 600px;
}

table.colours-deact tr {
	height: 35px;
	padding: 2px 5px;
}
button#show-deact-cols{
  margin-left : 15px;	
}

div.pf-wrap{
	/*border: 1px solid #9f9f9f;*/
	/*margin: -1px 0px 0px 10px;*/
	margin: -1px 10px 25px 10px;
	
	/*
	min-width: 830px;
	width: fit-content;
	*/
	min-width: 99%;	
	border-radius: 3px;
	z-index: 80;
	position: relative;	 
	border: 2px solid var(--supp-tabs-bord-col);
	min-height: 360px;
}

div.emailer{
  width: 567px;
  margin: 5px auto 10px auto;
  padding: 15px;
  border: 1px solid #dfdfdf;
  border-radius: 3px;
}  
div.emailer input[type="text"]{
  width : 350px;	
}
div.emailer input.dis {
  background-color: #ececec;
  border: 1px solid #979797;
  border-radius: 2px;
}
div.emailer td {
	padding: 2px;
	vertical-align:inherit;
}

.anchor{
	position:fixed !important;
	top:0px;
  bottom: 0px;
}





.sticky-top{
  position: sticky !important;
  top: 38px;
  z-index: 100;
  background-color: white;
  padding-top: 1px;
}
.sticky-side-panel{
  position: sticky;
  top: 86px;
  outline: 1px solid #d0d0d0;
  padding: 5px;
  margin: 0px 3px;
  z-index: 100;
}

.foot-spacer {
	height: 50px;
}

/*
 * Product tree
 */ 

#product-cats {
  margin-left: 1em;
  margin-top: 1em;
}

#product-cats li {
  padding-left: 1px;
  margin-left: 1em;
}

#product-cats ul {
  list-style: none;
  margin-left: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#product-cats a {
  padding: 2px;
  margin: 2px;
  text-decoration: none;
  color: black;
}

#product-cats a:hover {
  text-decoration: underline;
}

li.trunk {
  list-style-image: url("/images/css_images/layout/bullet.png");
}

li.branch {
  list-style-image: url("/images/css_images/layout/bullet_toggle_plus.png");
}

li.branch.minus {
  list-style-image: url("/images/css_images/layout/bullet_toggle_minus.png");
}

li.leaf {
  list-style-image: url("/images/css_images/layout/pane.png");
}

li.trunk span {
  font-weight: bold;
  letter-spacing: 0.1em;
}

#other-fabrics td{border: 1px solid #CCC;}#other-fabrics th{border-right: 1px solid #999;padding:5px 0.35em;}
/*
a.act-btn {position:fixed;margin-top : -53px;}
a.act-btn.second {margin-top : 2px;}
a.act-btn.third {margin-top : 52px;}
a.act-btn.fourth {margin-top : 102px;}
*/

/*
#fileUploader {display:none;margin-left: 45px;padding:10px; 0px;}
*/
a.act-btn span {padding: 10px;display: inline-block;border: 1px solid #b0b0b0;background-color: #ddd;margin: 5px 0px 5px 2px;}

td.with-inp{padding:0px;}
table#other-fabrics input[type="text"],
table#prepacks input[type="text"] {
  width:50px;min-width:50px;border: 1px solid #b0b0b0;
}
table#other-fabrics input[name="desc"]{
  width:225px  !important;min-width:225px !important;  
}
table#prepacks input[name="desc"] {
  width:375px  !important;min-width:375px !important;
}
table#prepacks input[name="code"] {
  width:110px  !important;min-width:110px !important;
}

select[name="webcat"].standard {width:80px  !important;min-width:80px !important;}
select[name="webcat"].extended {width:100px  !important;min-width:100px !important;}

input.val-changed, textarea.val-changed, select.val-changed {
/*	outline: 2px solid #b9b9b9;
	outline-offset: 1px; */
	border: 2px solid #f00 !important;
	border-radius: 3px;}
	
select.val-changedXX {
	outline: 2px solid #FF0000;
	outline-offset: 0px;
}
table.ofab th.t2, table.ofab td.t2 {display:none;}
table.t2 th.ofab, table.t2 td.ofab {display:none;}

table.std th{
 background: #ced4dd;
 border: 1px solid #999;
 padding: 5px 0.35em;
 text-align: center;
}

table.generic-blinds tr.inactive td {
  color: Gray;
  background-color: #e6e6e6;
}



table.std tr.sub-header th{
  background: #e8eaec;
}
table.std tr.big-header th{
  background-color:#62809d;
  font-size:16pt;
  color:#FFFFFF;
}
table.std td{
  border: 1px solid #CCC;	
  vertical-align: middle;
}

td.supp-cell-hightlight {
  background-color:#fbf9a4;
}

th.header-col div {
/*
  background-color: rgb(206,198,193);
*/
/* Version 2 */  
  background-color: #ced4dd;
  padding: 2px;
  width: 100%;
}

table.fab-list td.lfeat, table.fab-list th.lfeat,
table.fab-list td.luom, table.fab-list th.luom,
table.fab-list td.lphoto, table.fab-list th.lphoto
{
	display:none;
}

tr.even{
background-color: #ecece6;
}

tr.highlight-col {
  background-color: #ffff9e !important;	
  font-weight: bold !important;
  outline: 1px solid #ff6565;
}

form.prod-searcher {
	margin: 5px 0px;
}

input.col-name {
  min-width: 9em;
  margin: 0px 8px 0px 0px;
  font-family: Arial;
  background-color: transparent;
  border: 1px solid #888;
  padding: 3px 2px;
  border-radius: 3px;
}

select[name="webcat"]{
  background-color: transparent;
  border: 1px solid #b0b0b0;
  padding: 1px 2px;
  border-radius: 3px;
}
#other-fabrics input {
  background-color: transparent;	
  border: 1px solid #b0b0b0;
}

img.col-save,
img.generic-save,
img.col-deact,
img.col-editor,
img.fabric-add {
  cursor:pointer;
}
img.col-save,
img.col-deact,
img.fabric-add
{
  vertical-align: middle;
}
span.col-ed{
  height:100%;	
}

#t2CatMsg {
padding: 5px 0px 5px 15px;
  font-size: 12pt;
  border-bottom: 1px solid #cecece;
  margin: 0px 25px;
  font-style: italic;
  color: #0046ec;
  border-top: 1px solid #cecece;
}

div.tbl-fixed-both table {margin:0;}
div.tbl-fixed-both thead  {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0px;
}

div.tbl-fixed-both tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0px;
}
div.tbl-fixed-both thead th:first-child {
  left: 0px;
  z-index: 1;
}
div.tbl-fixed-both {
  overflow: scroll;
  padding: 0;
  margin: 5px;
  max-height: 430px;
  max-width: 98%;
}

div.tbl-fixed-row1 table {margin:0;}
div.tbl-fixed-row1 thead  {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0px;
}

div.tbl-fixed-row1XX tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0px;
}
div.tbl-fixed-row1 {
/*  overflow: scroll;*/
  padding: 0;
  margin: 5px;
  max-height: 270px;
  width: max-content;
  
  overflow-y: auto;
  box-sizing: content-box; /* critical */
  padding-right: 16px; /* reserve space for scrollbar */  
}


table.striped tr:nth-child(even) {
  background: #ecece6;
}

h2 span.sub{
  font-size: 80%;
  color: gray;  
}


/* Product List - cost cols */
th.toggle-switch{
  background: #bbd6ff !important;
  font-size: 7pt;
  color: #606060;
  padding: 0;
  cursor: pointer;	
}
th.cost-tog, tr.fabric_colours th.toggle-switch{
	background:#bbd6ff !important;	
}
tr.fabric_colours td.cost-tog{
	border: 2px solid #bbd6ff;
}
th.toggled-off, td.toggled-off {display:none}



button.img-cap {
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 5px;
  width: fit-content;
  padding: 4px 4px 4px 27px;
  height: fit-content;
  border: 1px solid #7d7d7d;
  border-radius: 5px;
  background-color: #fff4e9e5;  
  margin: 3px 0px;  
}
button.img-cap:hover {
  background-color: #f9e1ca;
  box-shadow: 1px 1px #8c8c8c85;
}

span.check-measure-span {
  display: inline-block;
  height: 25px;
  padding: 0px 3px;
}  
td.measure-req {
  background-color: yellow !important;
  font-weight: bold;	
}
td.measure-comp {
  color: red !important;
  font-weight: bold;
}

.unicodeChar {
	outline: 2px solid Red;
	border: 2px solid Red;
}


table.rrp-price-adj input, table.rrp-price-adj select {
  min-width: 0;
}

#wc-search tr.selected td {
	color: Blue;
	background-color : #afffaf;
}
#wc-search button.ibtn.collapsed {
	/*background-image: url("/images/css_images/icons/plus-small-white.png");	*/
	background-image: url("/images/css_images/icons/arrow-000-medium.png");	
	padding-left: 20px;
	width: fit-content !important;
	background-repeat: no-repeat;	
}
#wc-search button.ibtn.open {
	/*background-image: url("/images/css_images/icons/minus-small-white.png");	*/
	background-image: url("/images/css_images/icons/arrow-270-medium.png");	
	
	padding-left: 20px;
	width: fit-content !important;
	background-repeat: no-repeat;	
}

#wc-search button.ibtn.selected{
	background-image: url("/images/css_images/icons/minus-circle.png");
}
#wc-search button.ibtn.select{
	background-image: url("/images/css_images/icons/plus-circle.png");	
	filter: grayscale(100%);
}
#wc-search button.ibtn.select:hover{
	filter: grayscale(0%);
}



/* --- Loading banner --- */
#netBusy{
  position: fixed;
  left: 50%;
  top: 16px;                    /* “hang” from top */
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;         /* clicks pass through */
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
}

#netBusy .nb-card{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;         /* pill */
  box-shadow: 0 6px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);  /* light glassy */
  backdrop-filter: saturate(1.2) blur(6px);
  border: 1px solid rgba(0,0,0,.06);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
}

#netBusy img{
  width: 22px; height: 22px;
  display: block;
}

#netBusy .nb-text{
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .2px;
}

/* Visible state */
.is-loading #netBusy{ 
  opacity: 1; visibility: visible; 
  transition: opacity .15s ease;
}

/* Respect reduced motion for any animated GIF/SVG */
@media (prefers-reduced-motion: reduce){
  #netBusy img{ animation: none; }
}

/* Optional: dark mode */
@media (prefers-color-scheme: dark){
  #netBusy .nb-card{
    background: rgba(32,32,36,.9);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 6px 24px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.45);
  }
  #netBusy .nb-text{ color: #f3f3f3; }
}


/*
SESSION EXPIRED RELOAD TO LOGIN
*/
/* Fullscreen overlay */
.session-expired-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999; /* above your AJAX popups */
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* White centered card */
.session-expired-box {
  max-width: 380px;
  width: 90%;
  background: #fff;
  padding: 24px 28px;
  border-radius: 14px;
  box-shadow:
    0 18px 45px rgba(0,0,0,0.25),
    0 0 1px rgba(0,0,0,0.35);
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Title */
.session-expired-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #0f172a;
}

/* Body text */
.session-expired-text {
  font-size: 0.95rem;
  color: #4b5563;
  margin-bottom: 20px;
  line-height: 1.45;
}

/* Button */
.session-expired-btn {
  padding: 8px 22px;
  border-radius: 999px;
  border: none;
  font-size: 0.95rem;
  font-weight: 500;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: 0.15s ease;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.session-expired-btn:hover {
  background: #1d4ed8;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}

.session-expired-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}


/*
NEW LOGIN PAGE
*/
/* Full-page background image */
html,
body {
  height: 100%;
  margin: 0;
}

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: url("/images/css_images/layout/login_back.jpg") center center / cover no-repeat;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Centered panel */
.login-page__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 190px 16px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  padding: 24px 28px 20px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.35),
    0 0 1px rgba(15, 23, 42, 0.4);
}

.login-card__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Inputs */
.login-card__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px  !important;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  font-size: 0.95rem;
  outline: none;
  background: #f9fafb;
  transition:
    border-color 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background-color 0.12s ease-out;
}

.login-card__input::placeholder {
  color: #9ca3af;
}

.login-card__input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}

/* Button */
.login-card__button {
  margin-top: 4px;
  padding: 9px 14px;
  border-radius: 999px;
  border: none;
/*  background: #2563eb;*/
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.12s ease-out,
    box-shadow 0.12s ease-out,
    transform 0.08s ease-out;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  background: linear-gradient( rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08) ), linear-gradient(135deg, #2b68ff, #1a4dd8);
}

.login-card__button:hover {
/*  background: #1d4ed8;*/
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}

.login-card__button:active {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  transform: translateY(0);
}

/* Small message at bottom of panel */
.login-card__message {
  margin-top: 8px;
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
}

/* Footer image at bottom of window */
.login-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* so clicks go through, if needed */
}

/* OPTION A: full-width white bar */
.login-footer__bar {
  background: #ffffff;
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.login-footer__bar_rounded{
  border-radius: 999px;
  background: #fff;
  width: 1081px;
  margin: 0 auto;
}

.login-footer__image {
  width: 990px;
  height: 99px;
  max-width: 100%;
  display: block;
}

/* OPTION B: centered image without full-width bar */
.login-footer__image--floating {
  margin: 0 auto 4px;
  background: #ffffff; /* keeps its white background visible */
}

/* Center stack (title, button, then panel) */
.login-page__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 470px); /* leave space for title + footer */
  padding: 60px 16px;
}







.login-launch-btn {
  padding: 12px 36px;
  border: none;
  border-radius: 999px;

  background: linear-gradient(
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.08)
    ),
    linear-gradient(135deg, #2b68ff, #1a4dd8);

  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;

  cursor: pointer;
  backdrop-filter: blur(4px);

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(37, 99, 235, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25);

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

.login-launch-btn:hover {
  background:
    linear-gradient( rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08) ),  /* keep same glass layer */
    linear-gradient(135deg, #316eff, #2050dd);                                 /* just a touch deeper */

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.50),        /* a bit stronger drop shadow */
    0 0 14px rgba(37, 99, 235, 0.45),      /* slightly tighter outer glow */
    inset 0 1px 2px rgba(255, 255, 255, 0.40),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25);

  transform: translateY(-1px);
}




.login-launch-btn:active {
  transform: translateY(0px);

  background: linear-gradient(
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.05)
    ),
    linear-gradient(135deg, #1d4ed8, #163ea8);

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.4),
    0 0 14px rgba(35, 80, 200, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}





/* LOGIN PAGE – clean 2-layer title system with drop-in + shimmer */

body.login-page #ww2 {
  position: relative;
  display: inline-block;
  text-align: center;

  opacity: 0;
  transform: translateY(24px);
  animation: ww2Entrance 850ms ease-out forwards;
  margin-top: 75px;
}

/* front text – CRISP WHITE, no gradient */
body.login-page #ww2 .title-main {
  position: relative;
  font-size: 56px;
  font-weight: 700;
  display: block;

  color: #ffffff;

  /* base micro-shadow for edge */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 0 1px rgba(0, 0, 0, 0.32);

  /* shimmer on page load by pulsing the shadow, not the color */
  animation: ww2Shimmer 1400ms ease-out forwards;
  animation-delay: 150ms;

  z-index: 2;
}

/* bigger version behind it */
body.login-page #ww2 .title-version,
body.login-page #ww2 .title-tagline {
  position: absolute;
  top: 57%;
  left: 49.1%;
  transform: translate(-50%, -54%);
  font-weight: 800;
  letter-spacing: 0.05em;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

body.login-page #ww2 .title-version {
  font-size: 88px;
  color: rgba(255, 255, 255, 0.09);
}

body.login-page #ww2 .title-tagline {
  top: 101%;
  font-size: 32px;
  color: rgba(255, 0, 0, 0.75);
}

body.login-page #ww2:hover .title-main {
  text-shadow:
    0 3px 6px rgba(0,0,0,0.55),   /* deeper, more dramatic */
    0 0 2px rgba(255,255,255,0.40);
  transform: translateY(-3px);
  transition:
    text-shadow 150ms ease-out,
    transform 150ms ease-out;
}



/* Entrance animation */
@keyframes ww2Entrance {
  0% {
    opacity: 0;
    transform: translateY(48px);
  }
  70% {
    opacity: 1;
    transform: translateY(-7px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shimmer = pulse the edge contrast, not the colour */
@keyframes ww2Shimmer {
  0% {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.30),
      0 0 1px rgba(0, 0, 0, 0.35);
  }
  40% {
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.55),
      0 0 6px rgba(0, 0, 0, 0.65);
  }
  100% {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.30),
      0 0 1px rgba(0, 0, 0, 0.35);
  }
}