/* ==========================================================================
   Φορμα Ticket - banner kind 36
   Markup : views/general/view_included_pages/banners.php
   Υποβολη: ajax/ticket_send.php -> πινακας tickets
   ========================================================================== */

/* Τα padding του section και το κενο κατω απο τον τιτλο ερχονται απο το
   .cardsBanner (01-general-style.css) - οπως σε ολα τα banner. Εδω στυλιζουμε
   μονο τη φορμα. */

.ticketBanner .ticketForm{
	max-width:760px;
	margin:0 auto;
}

.ticketBanner .ticketCard{
	background:#ffffff;
	border:1px solid #ECEDF2;
	border-radius:20px;
	padding:38px 40px 34px;
	box-shadow:0 18px 40px -28px rgba(36,40,51,.35);
}

/* --------------------------------------------------------------------------
   Πλεγμα πεδιων: δυο στηλες, με ολοκληρη γραμμη οπου χρειαζεται
   -------------------------------------------------------------------------- */

.ticketBanner .ticketGrid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:22px 30px;
}

.ticketBanner .ticketFieldFull{
	grid-column:1 / -1;
}

.ticketBanner .ticketField{
	min-width:0;
}

.ticketBanner .ticketField label{
	display:block;
	margin:0 0 8px;
	font-size:14px;
	font-weight:600;
	color:#242833;
}

.ticketBanner .ticketField input,
.ticketBanner .ticketField select,
.ticketBanner .ticketField textarea{
	width:100%;
	background:#ffffff;
	border:1px solid #E2E4ED;
	border-radius:12px;
	padding:13px 15px;
	font-size:15px;
	color:#242833;
	line-height:1.4;
	outline:none;
	transition:border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance:none;
	appearance:none;
}

.ticketBanner .ticketField textarea{
	min-height:130px;
	resize:vertical;
}

/* Το βελακι του select το ζωγραφιζουμε εμεις, ωστε να ειναι ιδιο σε ολα τα browser */
.ticketBanner .ticketField select{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236C7183' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 16px center;
	padding-right:40px;
	cursor:pointer;
}

.ticketBanner .ticketField input::placeholder,
.ticketBanner .ticketField textarea::placeholder{
	color:#9499A8;
}

.ticketBanner .ticketField input:focus,
.ticketBanner .ticketField select:focus,
.ticketBanner .ticketField textarea:focus{
	border-color:#8C3CFA;
	box-shadow:0 0 0 3px rgba(140,60,250,.12);
}

.ticketBanner .ticketHint{
	margin:8px 0 0;
	font-size:13px;
	color:#8A8FA0;
	line-height:1.45;
}

/* --------------------------------------------------------------------------
   Λαθη
   -------------------------------------------------------------------------- */

.ticketBanner .ticketError{
	margin-top:6px;
	font-size:13px;
	color:#D93446;
	line-height:1.4;
}

.ticketBanner .ticketField.hasError input,
.ticketBanner .ticketField.hasError select,
.ticketBanner .ticketField.hasError textarea{
	border-color:#D93446;
	box-shadow:0 0 0 3px rgba(217,52,70,.10);
}

.ticketBanner .ticketAlert{
	display:none;
	margin-top:24px;
	padding:12px 16px;
	border-radius:12px;
	background:#FDECEE;
	color:#B32333;
	font-size:14px;
	line-height:1.45;
}

.ticketBanner .ticketAlert.isShown{
	display:block;
}

/* --------------------------------------------------------------------------
   Κουμπι υποβολης
   -------------------------------------------------------------------------- */

.ticketBanner .ticketSubmit{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	margin-top:26px;
	padding:16px 24px;
	border:0;
	border-radius:999px;
	background:#8C3CFA;
	color:#ffffff;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	transition:background .18s ease, transform .18s ease, opacity .18s ease;
}

.ticketBanner .ticketSubmit:hover{
	background:#7A2CE8;
}

.ticketBanner .ticketSubmit:active{
	transform:translateY(1px);
}

.ticketBanner .ticketSubmit[disabled]{
	opacity:.75;
	cursor:default;
}

/* Το spinner δειχνει οτι η υποβολη τρεχει - χωρις αυτο ο χρηστης ξαναπαταει το κουμπι */
.ticketBanner .isSending .ticketSubmit .ticketSubmitTxt:after{
	content:'';
	display:inline-block;
	width:15px;
	height:15px;
	margin-left:10px;
	vertical-align:-2px;
	border:2px solid rgba(255,255,255,.45);
	border-top-color:#ffffff;
	border-radius:50%;
	animation:ticketSpin .7s linear infinite;
}

@keyframes ticketSpin{
	to{ transform:rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Honeypots: αορατα για τον χρηστη, ορατα για τα bots
   -------------------------------------------------------------------------- */

.ticketBanner .ticketHp{
	position:absolute !important;
	left:-9999px !important;
	width:1px;
	height:1px;
	opacity:0;
}

/* --------------------------------------------------------------------------
   Οθονη επιτυχιας
   -------------------------------------------------------------------------- */

.ticketBanner .ticketSuccess{
	display:none;
	background:#ffffff;
	border:1px solid #ECEDF2;
	border-radius:20px;
	padding:52px 40px;
	text-align:center;
	box-shadow:0 18px 40px -28px rgba(36,40,51,.35);
}

.ticketBanner .ticketSuccess.isShown{
	display:block;
}

.ticketBanner .ticketSuccessIcon{
	width:62px;
	height:62px;
	margin:0 auto 20px;
	border-radius:50%;
	background:#EDFBF3;
	position:relative;
}

.ticketBanner .ticketSuccessIcon:after{
	content:'';
	position:absolute;
	left:22px;
	top:18px;
	width:15px;
	height:24px;
	border:solid #1BA45F;
	border-width:0 3px 3px 0;
	transform:rotate(45deg);
}

.ticketBanner .ticketSuccess h3{
	margin:0 0 10px;
	font-size:22px;
	font-weight:700;
	color:#242833;
}

.ticketBanner .ticketSuccess p{
	margin:0;
	font-size:15px;
	color:#6C7183;
	line-height:1.55;
}

/* --------------------------------------------------------------------------
   Κινητο
   -------------------------------------------------------------------------- */

@media (max-width: 767px){

	.ticketBanner .ticketCard,
	.ticketBanner .ticketSuccess{
		padding:26px 20px 24px;
		border-radius:16px;
	}

	.ticketBanner .ticketGrid{
		grid-template-columns:1fr;
		gap:18px;
	}

	.ticketBanner .ticketSubmit{
		font-size:15px;
		padding:15px 20px;
	}
}