/* Gladiator Webmail - login screen, Catppuccin Latte palette */

/* Layout full-bleed (sem cartao flutuante): o usuario comparou com a
   Locaweb de verdade (login-new.locaweb.com.br) e tanto o painel escuro
   quanto o formulario ocupam a tela inteira, lado a lado, sem margem,
   sombra ou cantos arredondados em volta - nao um cartao centralizado
   sobre um fundo solido (que era o design anterior aqui). */
body.task-login {
	background: #ffffff !important;
	min-height: 100vh;
	margin: 0 !important;
}

/* O core do Elastic (styles.min.css) reserva 56px de padding-top em
   #layout pra sobrar espaco pro #taskmenu (a barra Criar email/E-mail/
   Contatos/... do topo) - regra generica, nao limitada a uma tela
   especifica. Na pagina de login nao existe taskmenu nenhum, entao essa
   regra so deixava uma faixa branca em cima do painel escuro, quebrando
   o full-bleed. Zera isso so na tela de login. */
body.task-login #layout {
	padding-top: 0 !important;
}

body.task-login #layout-content {
	background: transparent !important;
	position: relative !important;
	display: block !important;
	min-height: 100vh !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Em monitores bem largos, esticar os dois paineis a tela inteira sobra
   espaco demais no lado do formulario (o painel escuro tem largura
   maxima fixa). Limitamos so a largura MAXIMA da composicao, sem
   centralizar (sem margin:auto) - centralizar criava uma faixa branca
   do lado ESQUERDO do painel escuro (o fundo da pagina ja e branco,
   entao so sobra visivel do lado direito, sem costura de cor nenhuma).
   O painel escuro continua sempre grudado na borda esquerda de verdade. */
#gladiator-card {
	display: flex;
	min-height: 100vh;
	width: 100%;
	max-width: 1400px;
}

body.task-login #logo {
	width: 56px !important;
	height: 56px !important;
	max-width: 56px !important;
	max-height: 150px !important;
	position: static !important;
	top: auto !important;
	opacity: 1 !important;
	display: block !important;
	margin: 0 auto !important;
}

body.task-login #login-form {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	position: static !important;
	top: auto !important;
	margin: 20px auto 0 !important;
	width: 100%;
	max-width: 380px;
}

body.task-login #login-form label {
	color: #6c6f85 !important; /* Subtext0 */
	font-size: 0.8rem;
}

/* Campos Usuario/Senha atualizados junto com o resto da tela: barra unica
   (icone + input) com cantos iguais dos dois lados (em vez do icone
   "destacado" num bloco cinza separado), mais altura/respiro, e o anel de
   foco corrigido pra usar o azul da marca (#0B119C) - antes usava
   rgba(30,102,245,...), um azul do Catppuccin que nao e o da marca. */
body.task-login #login-form td.input {
	position: relative;
}

body.task-login #login-form .input-group-text {
	background: #eff1f5 !important; /* Base - mesmo tom do input, barra unica */
	border: 1px solid #ccd0da !important;
	border-right: none !important;
	border-radius: 10px 0 0 10px !important;
	color: #0B119C !important; /* Blue */
	padding: 0 12px !important;
}

body.task-login #login-form input.form-control {
	background: #eff1f5 !important; /* Base */
	border: 1px solid #ccd0da !important;
	color: #4c4f69 !important; /* Text */
	border-radius: 10px !important;
	padding: 12px 14px !important;
}

body.task-login #login-form .input-group input.form-control {
	border-radius: 0 10px 10px 0 !important;
}

body.task-login #login-form input.form-control::placeholder {
	color: #9ca0b0 !important; /* Overlay0 */
}

body.task-login #login-form input.form-control:focus {
	border-color: #0B119C !important;
	box-shadow: 0 0 0 3px rgba(11, 17, 156, 0.15) !important;
}

/* Botao "mostrar senha" (olho), injetado via JS (login.html) dentro do
   <td class="input"> do campo Senha. */
body.task-login #login-form #rcmloginpwd {
	padding-right: 42px !important;
}

/* O proprio core do Roundcube (UI.js) escaneia os botoes do formulario e
   adiciona classes "btn btn-secondary" automaticamente (nao foi algo que
   pedimos) - sobrescreve o visual que a gente queria (so o icone, sem
   fundo), entao precisa de !important pra garantir. */
.gladiator-pwd-toggle {
	position: absolute !important;
	/* o input de senha tem z-index:3 no proprio CSS do Bootstrap/Roundcube
	   (destaque em foco dentro do input-group) - sem isso aqui, o input
	   ficava por cima do botao (mesmo vindo depois no DOM) e "engolia" o
	   clique, fazendo o botao parecer quebrado. */
	z-index: 5 !important;
	right: 8px !important;
	top: 50% !important;
	bottom: auto !important;
	left: auto !important;
	transform: translateY(-50%) !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 6px !important;
	margin: 0 !important;
	color: #9ca0b0 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 0;
	box-shadow: none !important;
}

.gladiator-pwd-toggle:hover,
.gladiator-pwd-toggle:focus {
	background: none !important;
	color: #0B119C !important;
	box-shadow: none !important;
}

.gladiator-pwd-toggle svg {
	width: 18px;
	height: 18px;
}

body.task-login #rcmloginsubmit {
	background: #0B119C !important; /* Blue */
	color: #eff1f5 !important;
	border: none !important;
	font-weight: 700;
	letter-spacing: 0.5px;
	border-radius: 8px !important;
	width: 100%;
}

body.task-login #rcmloginsubmit:hover {
	background: #080C78 !important;
}

body.task-login #login-footer {
	color: #0B119C !important; /* Blue */
	font-size: 0.75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

body.task-login #login-footer > div {
	background: transparent !important;
}

/* --- Formulario (direita, fundo branco) --- */
#gladiator-login-box {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
	background: #ffffff;
}

/* Botao no canto superior direito, mesma posicao do "Criar Conta" da
   Locaweb - aqui reaproveitado pra divulgar os servicos da A2 (nao tem
   auto-cadastro de conta no Gladiator, entao nao fazia sentido copiar
   literal o "Novo por aqui? Criar Conta"). */
.gladiator-services-popup {
	position: absolute;
	top: 28px;
	right: 28px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(11, 17, 156, 0.2), 0 3px 10px rgba(17, 19, 40, 0.08);
	padding: 16px 18px;
	max-width: 240px;
	box-sizing: border-box;
}

.gladiator-services-close {
	position: absolute;
	top: 6px;
	right: 10px;
	background: none;
	border: none;
	color: #6c6f85;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 6px;
}

.gladiator-services-title {
	font-weight: 700;
	font-size: 0.86rem;
	margin: 0 0 4px;
	padding-right: 18px;
	color: #22243a;
}

.gladiator-services-text {
	color: #6c6f85;
	font-size: 0.78rem;
	line-height: 1.4;
	margin: 0 0 12px;
}

.gladiator-services-cta {
	display: inline-block;
	background: #0B119C;
	color: #ffffff !important;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none !important;
}

.gladiator-services-cta:hover {
	background: #080C78;
}

@media screen and (max-width: 500px) {
	.gladiator-services-popup {
		/* precisa continuar "relative" (nao "static") pra servir de
		   referencia de posicionamento pro botao fechar (position:absolute)
		   - com "static" o X perdia a referencia e ia pro topo da tela
		   inteira em vez do canto do proprio cartao. */
		position: relative;
		top: auto;
		right: auto;
		margin: 0 0 24px;
		max-width: none;
	}
}

/* --- Painel de recursos (esquerda, fundo escuro) ---
   Cores proprias (nao copiadas literalmente da Locaweb): azul-marinho
   escuro como base, ciano claro no destaque do titulo, e o laranja do
   proprio logo do Coliseu (#F26E1D) nos links "Conheca X" - a mesma
   estrutura da Locaweb (titulo de 2 linhas + blocos fixos com link),
   com as cores da nossa propria identidade. */
#gladiator-promo {
	flex: 0 1 460px;
	max-width: 42%;
	background: #0E1430;
	color: #ffffff;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

#gladiator-promo .gladiator-promo-inner {
	position: relative;
	z-index: 1;
	padding: 56px 48px;
	box-sizing: border-box;
}

#gladiator-promo .gladiator-promo-heading {
	color: #ffffff;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 40px;
}

#gladiator-promo .gladiator-promo-heading .accent {
	color: #4FD1FF;
}

#gladiator-promo .gladiator-feature {
	margin-bottom: 26px;
}

#gladiator-promo .gladiator-feature:last-child {
	margin-bottom: 0;
}

#gladiator-promo .gladiator-feature h3 {
	color: #ffffff;
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

#gladiator-promo .gladiator-feature-icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	display: block;
}

#gladiator-promo .gladiator-feature p {
	color: #b8c0d9;
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 0 0 8px;
}

#gladiator-promo .gladiator-feature-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #F26E1D !important;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none !important;
}

#gladiator-promo .gladiator-feature-link:hover {
	text-decoration: underline !important;
}

#gladiator-promo .gladiator-feature-link svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

#gladiator-promo .gladiator-promo-watermark {
	position: absolute;
	right: -60px;
	bottom: -60px;
	width: 260px;
	opacity: 0.06;
	pointer-events: none;
}

@media screen and (max-width: 900px) {
	#gladiator-promo {
		display: none !important;
	}
	#gladiator-login-box {
		width: 100%;
	}
}