/* ==========================================================================
   Sticky support bar
   Markup : views/general/view_included_pages/support_bar.php
   Φαινεται σε καθε σελιδα που η κατηγορια της εχει page_kind = 'support'
   ========================================================================== */

/* Το πρωτευον CTA πρεπει να ειναι διαθεσιμο πανω ΚΑΙ κατω. Αντι για δευτερο
   κολλημενο κουμπι που κρυβει περιεχομενο απο την αρχη, η μπαρα εμφανιζεται
   μολις φυγει η πρωτη οθονη και κρυβεται παλι οταν φτασεις στη φορμα ticket -
   εκει το εχεις ηδη μπροστα σου. */

.supportBar{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	/* ΠΡΟΣΟΧΗ: το #wrapper του site ειναι position:relative με z-index:100 ΚΑΙ
	   λευκο background. Οτιδηποτε κατω απο το 100 ζωγραφιζεται απο πισω του και
	   ειναι τελειως αορατο - εδω ακριβως "χανοταν" η μπαρα. Το 1600 ειναι πανω
	   απο wrapper/header (100/999/1550) και κατω απο τα modal (9999/100000). */
	z-index:1600;
	background:#fff;
	border-top:1px solid #E7E6EC;
	box-shadow:0 -6px 24px rgba(28,27,34,.12);
	padding:12px 0;
	transform:translateY(110%);
	transition:transform .25s ease;
}

.supportBar.isOn{
	transform:translateY(0);
}

.supportBar .container{
	display:flex;
	align-items:center;
	gap:16px;
}

.supportBar .supportBarTxt b{
	display:block;
	font-size:14px;
	font-weight:800;
	color:#242833;
}

.supportBar .supportBarTxt span{
	font-size:12.5px;
	color:#55535F;
}

/* --------------------------------------------------------------------------
   Κουμπια
   -------------------------------------------------------------------------- */

.supportBar .supportBarBtns{
	margin-left:auto;
	display:flex;
	gap:10px;
	flex-shrink:0;
}

.supportBar .supportBarBtn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:1px solid transparent;
	border-radius:999px;
	padding:10px 20px;
	font-size:14px;
	font-weight:700;
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
	cursor:pointer;
	transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.supportBar .supportBarBtnGhost{
	color:#8C3CFA;
	background:#fff;
	border-color:#E2D3FF;
}

.supportBar .supportBarBtnGhost:hover,
.supportBar .supportBarBtnGhost:focus{
	background:#F7F2FF;
	color:#6E23D6;
	text-decoration:none;
}

/* Στο κλικ σκουραίνει ένα σκαλί παραπάνω από το hover */
.supportBar .supportBarBtnGhost:active{
	background:#EFE4FF;
	color:#5B1BB8;
	border-color:#C9A9FF;
}

.supportBar .supportBarBtnMain{
	color:#fff;
	background:#8C3CFA;
}

.supportBar .supportBarBtnMain:hover,
.supportBar .supportBarBtnMain:focus{
	background:#6E23D6;
	color:#fff;
	text-decoration:none;
}

.supportBar .supportBarBtnMain:active{
	background:#5B1BB8;
	color:#fff;
}

/* --------------------------------------------------------------------------
   Responsive
   Σε κινητο κραταμε ΜΟΝΟ το πρωτευον CTA - δυο κουμπια διπλα-διπλα σε 360px
   γινονται και τα δυο δυσκολα να πατηθουν.
   -------------------------------------------------------------------------- */

@media (max-width:767px){
	.supportBar .supportBarTxt{
		display:none;
	}

	.supportBar .supportBarSecondary{
		display:none;
	}

	.supportBar .supportBarBtns{
		margin-left:0;
		width:100%;
	}

	.supportBar .supportBarBtns .supportBarBtn{
		flex:1;
	}
}