@charset "UTF-8";
/* ===========================================================
   TableCart - Premium UI layer
   Loaded AFTER framework7 + maxframes.css.
   Pure CSS overlay - no markup / JS flow is changed.
   =========================================================== */

:root{
	--tc-grad: linear-gradient(135deg,#c70044 0%,#ff1201 100%);
	--tc-brand:#e00a3c;
	--tc-ink:#111827;
	--tc-body:#5b6472;
	--tc-muted:#95a0b3;
	--tc-line:#e8eaf0;
	--tc-field:#f7f8fb;
	--tc-radius:22px;
	--tc-font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* -----------------------------------------------------------
   1. Overlay - deeper, softer, blurred
   ----------------------------------------------------------- */
.modal-overlay,
.popup-overlay{
	background:rgba(10,15,28,.58) !important;
	-webkit-backdrop-filter:saturate(140%) blur(6px);
	backdrop-filter:saturate(140%) blur(6px);
}

/* -----------------------------------------------------------
   2. The dialog card
   ----------------------------------------------------------- */
.modal{
	width:auto !important;
	max-width:430px;
	left:16px !important;
	right:16px !important;
	margin-left:auto !important;
	margin-right:auto !important;
	border-radius:26px !important;
	background:#fff !important;
	font-family:var(--tc-font);
	color:var(--tc-ink) !important;
	box-shadow:
		0 2px 6px rgba(16,24,40,.06),
		0 24px 48px -12px rgba(16,24,40,.28),
		0 48px 90px -30px rgba(199,0,68,.22) !important;
}

.modal.modal-in{
	-webkit-transition-duration:280ms !important;
	transition-duration:280ms !important;
	-webkit-transition-timing-function:cubic-bezier(.22,1,.36,1) !important;
	transition-timing-function:cubic-bezier(.22,1,.36,1) !important;
}

.modal-inner{
	padding:26px 22px 20px !important;
}

/* framework7's default title -> quiet brand eyebrow */
.modal-title{
	font-size:11px !important;
	font-weight:700 !important;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--tc-muted) !important;
	line-height:1.2 !important;
	margin-bottom:2px;
}
.modal-title:empty{display:none !important;}
.modal-title + .modal-text{margin-top:10px !important;}

/* -----------------------------------------------------------
   3. Dialog headline  (<p class="digit">)
   ----------------------------------------------------------- */
.modal .digit{
	font-size:19px !important;
	font-weight:700 !important;
	letter-spacing:-.01em;
	line-height:1.35 !important;
	color:var(--tc-ink) !important;
	margin:2px 0 16px !important;
	padding-bottom:12px;
	position:relative;
}
.modal .digit:after{
	content:"";
	position:absolute;
	left:50%; bottom:0;
	width:42px; height:3px;
	margin-left:-21px;
	border-radius:3px;
	background:var(--tc-grad);
}

/* -----------------------------------------------------------
   4. Body copy + the scrolling notice / T&C area
   ----------------------------------------------------------- */
.modal .modal-text,
.modal center p{
	font-size:14.5px;
	line-height:1.7;
	color:var(--tc-body);
	margin:0;
}
.modal center[style]{
	height:auto !important;          /* kills the tall empty box */
	max-height:320px;
	max-height:min(46vh,320px);
	overflow-y:auto !important;
	-webkit-overflow-scrolling:touch;
	display:block;
	padding:2px 4px 2px 0;
	scrollbar-width:thin;
	scrollbar-color:#d7dbe4 transparent;
}
.modal center[style]::-webkit-scrollbar{width:5px;}
.modal center[style]::-webkit-scrollbar-track{background:transparent;}
.modal center[style]::-webkit-scrollbar-thumb{
	background:#d7dbe4;
	border-radius:99px;
}
.modal center[style]::-webkit-scrollbar-thumb:hover{background:#bcc3d0;}

/* -----------------------------------------------------------
   5. Form area inside dialogs
   ----------------------------------------------------------- */
/* the hand-written <br> spacers are replaced by real spacing */
.modal .content-block > br{display:none;}
.modal .content-block{
	margin:16px 0 0 !important;
	padding:0 !important;
}
.modal .list-block{
	margin:0 !important;
}
.modal .list-block ul{
	background:none !important;
}
.modal .list-block ul:before,
.modal .list-block ul:after,
.modal .list-block .item-inner:after,
.modal .list-block li:last-child .item-inner:after,
.modal .item-content:after,
.modal .item-inner:after{
	display:none !important;
	height:0 !important;
}
.modal .item-content{
	padding-left:0 !important;
	min-height:0 !important;
}
.modal .item-inner{
	padding:0 !important;
	min-height:0 !important;
}
.modal .item-input,
.modal .item-input-field{
	margin:0 !important;
	padding:0 !important;
}

/* the actual field */
.modal .item-input-field input,
.modal .item-input input,
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="email"],
.modal input[type="tel"]{
	width:100%;
	height:54px !important;
	box-sizing:border-box;
	padding:0 16px !important;
	border:1.5px solid var(--tc-line) !important;
	border-radius:14px !important;
	background:var(--tc-field) !important;
	color:var(--tc-ink) !important;
	font-family:var(--tc-font);
	font-size:17px !important;
	font-weight:600;
	letter-spacing:.06em;
	text-align:center;
	-webkit-appearance:none;
	appearance:none;
	transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.modal .item-input-field input::-webkit-input-placeholder,
.modal input::-webkit-input-placeholder{
	color:#aab3c2; font-weight:500; letter-spacing:.02em;
}
.modal .item-input-field input::placeholder,
.modal input::placeholder{
	color:#aab3c2; font-weight:500; letter-spacing:.02em;
}
.modal .item-input-field input:focus,
.modal input:focus{
	outline:none;
	background:#fff !important;
	border-color:var(--tc-brand) !important;
	box-shadow:0 0 0 4px rgba(224,10,60,.13) !important;
}

/* no ugly number spinners on the OTP / mobile field */
.modal input[type="number"]{-moz-appearance:textfield;}
.modal input[type="number"]::-webkit-outer-spin-button,
.modal input[type="number"]::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}

/* framework7's animated underline is not needed any more */
.modal .item-input-field:after,
.modal .item-input:after,
.modal .input-focused .item-input-field:after{display:none !important;}

/* -----------------------------------------------------------
   6. Primary call-to-action  (PROCEED / NEXT / I Agree)
   ----------------------------------------------------------- */
.modal .modal-button.button-fill,
.modal .button.button-fill.color-orange{
	display:block;
	width:100%;
	height:54px !important;
	line-height:54px !important;
	margin:24px 0 2px !important;
	padding:0 18px !important;
	border:none !important;
	border-radius:999px !important;
	background:var(--tc-grad) !important;
	color:#fff !important;
	font-family:var(--tc-font);
	font-size:14.5px !important;
	font-weight:700 !important;
	letter-spacing:.1em;
	text-transform:uppercase;
	text-align:center;
	box-shadow:0 12px 26px -10px rgba(199,0,68,.75), 0 2px 4px rgba(199,0,68,.2) !important;
	transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease, filter .16s ease;
	position:relative;
	overflow:hidden;
}
.modal .modal-button.button-fill:after,
.modal .button.button-fill.color-orange:after{
	content:"→";
	position:absolute;
	top:0; right:24px;
	font-size:20px;
	font-weight:400;
	letter-spacing:0;
	opacity:.95;
}
.modal .modal-button.button-fill:hover,
.modal .button.button-fill.color-orange:hover{
	filter:brightness(1.06);
	box-shadow:0 16px 30px -10px rgba(199,0,68,.8) !important;
	transform:translateY(-1px);
}
.modal .modal-button.button-fill:active,
.modal .button.button-fill.color-orange:active,
.modal .modal-button.button-fill.active-state,
.modal .button.button-fill.color-orange.active-state{
	background:var(--tc-grad) !important;
	transform:translateY(1px);
	box-shadow:0 6px 14px -8px rgba(199,0,68,.75) !important;
}

/* helper line under the CTA - "OTP will be sent to ..." */
.modal form > div[style],
.modal .content-block > div[style]{
	margin-top:14px !important;
	margin-bottom:2px !important;
	font-size:12.5px !important;
	font-weight:500 !important;
	line-height:1.6 !important;
	color:var(--tc-muted) !important;
}
.modal form > div[style] a{
	color:var(--tc-brand) !important;
	font-weight:600;
	text-decoration:none;
	border-bottom:1px solid rgba(224,10,60,.35);
}

/* -----------------------------------------------------------
   6b. Outlet logo badge riding on top of the dialog
   ----------------------------------------------------------- */
body.tc-has-logo .modal:before{
	content:"";
	position:absolute;
	top:-44px; left:50%;
	width:88px; height:88px;
	margin-left:-44px;
	border-radius:50%;
	background-color:#fff;
	background-image:var(--tc-logo);
	background-repeat:no-repeat;
	background-position:center;
	background-size:66% auto;
	box-shadow:
		0 0 0 7px rgba(255,255,255,.3),
		0 16px 30px -14px rgba(0,0,0,.6);
	z-index:3;
}
body.tc-has-logo .modal .modal-inner{padding-top:64px !important;}
@media (min-width:768px){
	body.tc-has-logo .modal .modal-inner{padding-top:68px !important;}
}

/* -----------------------------------------------------------
   6c. Short outlet notice -> headline card
   ----------------------------------------------------------- */
.modal .tc-notice{display:block; padding:2px 0;}
.modal .tc-notice-icon{
	display:block;
	width:92px; height:92px;
	line-height:92px;
	margin:2px auto 22px;
	border-radius:50%;
	background:rgba(224,10,60,.085);
	color:#5b6472;
	font-size:34px;
	text-align:center;
}
.modal .tc-notice-title{
	display:block;
	margin:0 0 10px;
	font-size:29px;
	font-weight:800;
	line-height:1.15;
	letter-spacing:-.01em;
	text-transform:uppercase;
	color:#0f172a;
}
.modal .tc-notice-sub{
	display:block;
	font-size:15px;
	line-height:1.6;
	color:#8291a5;
}
@media (max-width:359px){
	.modal .tc-notice-icon{width:78px; height:78px; line-height:78px; font-size:28px; margin-bottom:18px;}
	.modal .tc-notice-title{font-size:25px;}
}

/* -----------------------------------------------------------
   7. Framework7's own OK / Cancel row
   ----------------------------------------------------------- */
.modal-buttons{
	height:auto !important;
	padding:4px 14px 12px !important;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:end;
	-ms-flex-pack:end;
	justify-content:flex-end;
}
.modal-buttons .modal-button:not(.button-fill){
	display:inline-block;
	width:auto;
	height:36px !important;
	line-height:36px !important;
	padding:0 14px !important;
	margin-left:6px;
	border-radius:10px !important;
	background:none !important;
	color:var(--tc-muted) !important;
	font-size:13px !important;
	font-weight:600 !important;
	letter-spacing:.04em;
	box-shadow:none !important;
}
.modal-buttons .modal-button:not(.button-fill):hover{
	background:#f3f4f8 !important;
	color:var(--tc-ink) !important;
}

/* -----------------------------------------------------------
   8. Landing screen legal bar
   ----------------------------------------------------------- */
.tc-legalbar{
	left:20px !important;
	right:20px !important;
	bottom:18px !important;
	width:auto !important;
	box-sizing:border-box;
	padding:0 !important;
	font-family:var(--tc-font);
	font-size:11.5px;
	font-weight:400;
	line-height:1.75;
	letter-spacing:.015em;
	color:rgba(255,255,255,.6) !important;
	text-shadow:0 1px 6px rgba(0,0,0,.45);
}

/* the consent line */
.tc-legalbar a{
	color:rgba(255,255,255,.95) !important;
	font-weight:600;
	text-decoration:none !important;
	border-bottom:1px solid rgba(255,255,255,.3);
	padding-bottom:1px;
	transition:border-color .15s ease, color .15s ease;
}
.tc-legalbar a:hover{border-bottom-color:rgba(255,255,255,.9);}

/* the CMS links below become quiet pills */
.tc-legalbar a[href*="cms-in-index.php"]{
	display:inline-block;
	margin:9px 3px 0;
	padding:8px 15px;
	border:1px solid rgba(255,255,255,.2);
	border-radius:999px;
	background:rgba(255,255,255,.1);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	font-size:11px;
	font-weight:600;
	letter-spacing:.03em;
	line-height:1.2;
	color:#fff !important;
	text-shadow:none;
}
.tc-legalbar a[href*="cms-in-index.php"]:hover{
	background:rgba(255,255,255,.2);
	border-color:rgba(255,255,255,.34);
}
.tc-legalbar a i{
	margin-right:7px;
	font-size:12px;
	opacity:.85;
	vertical-align:baseline;
}
.tc-legalbar a span{vertical-align:baseline;}

/* readable scrim over the outlet logo background */
.page-content.landingpage{
	position:relative;
	background-size:contain !important;
}
.page-content.landingpage:after{
	content:"";
	position:absolute;
	left:0; right:0; bottom:0;
	height:52%;
	pointer-events:none;
	background:linear-gradient(to top,rgba(4,9,20,.72),rgba(4,9,20,.28) 45%,rgba(4,9,20,0));
}

/* -----------------------------------------------------------
   9. Screen-size polish
   ----------------------------------------------------------- */
@media (min-width:768px){
	.modal{max-width:420px;}
	.modal-inner{padding:30px 30px 22px !important;}
	.modal .digit{font-size:20px !important;}
}
@media (max-width:359px){
	.modal-inner{padding:22px 18px 18px !important;}
	.modal .item-input-field input{height:50px !important; font-size:16px !important;}
	.modal .modal-button.button-fill,
	.modal .button.button-fill.color-orange{height:50px !important; line-height:50px !important;}
}

/* ===========================================================
   10. Landing screen - brand stage
   =========================================================== */
.page-content.landingpage{
	/* the outlet colour stays (inline), the tiled logo is replaced
	   by a soft light-field that works over any brand colour */
	background-image:
		radial-gradient(105% 70% at 50% -8%, rgba(255,255,255,.34), rgba(255,255,255,0) 62%),
		radial-gradient(95% 65% at 50% 118%, rgba(0,0,0,.5), rgba(0,0,0,0) 68%) !important;
	background-repeat:no-repeat !important;
	background-position:center !important;
	background-size:cover !important;
	padding-top:0 !important;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-ms-flex-direction:column;
	flex-direction:column;
	text-align:center;
	box-sizing:border-box;
}

.tc-hero{
	position:relative;
	z-index:2;
	width:100%;
	max-width:420px;
	padding:0 26px 120px;
	box-sizing:border-box;
	font-family:var(--tc-font);
	-webkit-animation:tcRise .7s cubic-bezier(.22,1,.36,1) both;
	animation:tcRise .7s cubic-bezier(.22,1,.36,1) both;
}

/* logo in a soft white card */
.tc-hero-card{
	display:inline-block;
	padding:18px 22px;
	margin-bottom:22px;
	border-radius:26px;
	background:rgba(255,255,255,.96);
	box-shadow:
		0 18px 40px -18px rgba(0,0,0,.55),
		0 2px 0 rgba(255,255,255,.5) inset;
}
.tc-hero-card img{
	display:block;
	max-width:190px;
	max-height:104px;
	width:auto;
	height:auto;
}

.tc-hero-name{
	margin:0;
	font-size:25px;
	font-weight:700;
	line-height:1.25;
	letter-spacing:-.015em;
	color:#fff;
	text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.tc-hero-rule{
	width:44px; height:3px;
	margin:14px auto 12px;
	border-radius:3px;
	background:var(--tc-grad);
	opacity:.95;
}
.tc-hero-sub{
	margin:0;
	font-size:12.5px;
	font-weight:500;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:rgba(255,255,255,.72);
}

@-webkit-keyframes tcRise{
	from{opacity:0; -webkit-transform:translate3d(0,14px,0);}
	to{opacity:1; -webkit-transform:none;}
}
@keyframes tcRise{
	from{opacity:0; transform:translate3d(0,14px,0);}
	to{opacity:1; transform:none;}
}

@media (max-height:560px){
	.tc-hero{padding-bottom:96px;}
	.tc-hero-card{padding:14px 18px; margin-bottom:16px;}
	.tc-hero-card img{max-height:78px; max-width:150px;}
	.tc-hero-name{font-size:21px;}
}

/* ===========================================================
   11. Side menu
   =========================================================== */
.panel-left .page.sidemenu{
	background:#12182a !important;
	background-image:
		radial-gradient(120% 60% at 0% 0%, rgba(199,0,68,.35), rgba(199,0,68,0) 60%),
		linear-gradient(180deg,#151c31 0%,#0d1220 100%) !important;
	filter:none !important;
	font-family:var(--tc-font);
}

/* profile header */
.panel-left .userprofile{
	background:none !important;
	height:auto !important;
	padding:22px 18px 16px !important;
	border-bottom:1px solid rgba(255,255,255,.09);
	display:block !important;
}
.panel-left .userprofile + .page-content{padding-top:104px;}
.panel-left .userprofile .item-content{padding-left:0 !important;}
.panel-left .userprofile .item-media{
	width:auto !important;
	max-width:none !important;
	float:none !important;
	padding-right:12px !important;
}
.panel-left .userprofile .item-media img{
	width:46px !important;
	height:46px !important;
	border-radius:14px !important;
	background:#fff;
	padding:3px;
	box-sizing:border-box;
	object-fit:contain;
	box-shadow:0 6px 16px -6px rgba(0,0,0,.7);
}
.panel-left .userprofile .item-inner{
	width:auto !important;
	float:none !important;
}
.panel-left .userprofile .item-title{
	margin-top:0 !important;
	font-size:14.5px;
	font-weight:600;
	color:#fff;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* menu rows */
.panel-left ul.menu{
	padding:12px 10px 26px !important;
	box-sizing:border-box;
}
.panel-left ul.menu li{margin-bottom:2px;}
.panel-left ul.menu li a{
	height:46px !important;
	line-height:46px !important;
	padding:0 10px !important;
	border-radius:12px;
	color:rgba(255,255,255,.86) !important;
	font-size:14px;
	font-weight:500;
	letter-spacing:.01em;
	transition:background .15s ease, color .15s ease;
}
.panel-left ul.menu li a i{
	opacity:1 !important;
	width:30px !important;
	height:30px;
	line-height:30px !important;
	margin:8px 12px 0 0 !important;
	float:left;
	font-size:14px !important;
	text-align:center;
	border-radius:9px;
	background:rgba(255,255,255,.09);
	color:rgba(255,255,255,.85);
	transition:background .15s ease, color .15s ease;
}
.panel-left ul.menu li a span{
	width:auto !important;
	line-height:46px !important;
	font-size:14px;
	letter-spacing:.01em;
	text-transform:none !important;
}
.panel-left ul.menu li:hover a,
.panel-left ul.menu li a.active-state{
	background:rgba(255,255,255,.1) !important;
	color:#fff !important;
}
.panel-left ul.menu li:hover a i{
	background:var(--tc-grad);
	color:#fff;
}

/* logout sits apart */
.panel-left ul.menu li:last-child{
	margin-top:14px;
	padding-top:14px;
	border-top:1px solid rgba(255,255,255,.09);
}
.panel-left ul.menu li:last-child a{color:#ff8fa6 !important;}
.panel-left ul.menu li:last-child a i{
	background:rgba(255,77,109,.16);
	color:#ff8fa6;
}
.panel-left ul.menu li:last-child:hover a i{
	background:var(--tc-grad);
	color:#fff;
}