html, body {
	height: 100%;
}
* html #container {
	height: 100%; /* hack para IE6 que trata height como min-height */
}
.container{
	position: relative;
	min-height: 100%;
}
.row{
	text-align: center;
	padding:15px;
}

body > div.container > div > div.center-block{
	margin-bottom:20px
}

body{
	background-color: #fafafa;
}

/*FONTE*/
.pequena{
	font-size:0.688em;
}
.media{
	font-size:0.750em;
	padding:4px;
	margin: 5px;
}

.mediumLbl{
	font-size:1.2em;
	padding:4px;
	margin: 5px;
}

.mediumLblTerm{
	font-size:1.2em;
	padding:4px;	
}

.mensagem{
	padding: 5px;
	font-size: 0.875em;
}

.footer	{
	margin-top:10px;	
	background:#0B0B0B;
	width:100%;
	height:30px;
	color:#FFFFFF;
	position: absolute;
	bottom: 0px;
	line-height: 30px;
}


.creditos{
	color:#FFFFFF;
	font-weight:bold;
	color: white;
	font-size:80%;
}

.imagens img{
	display: block;
	margin: 20;
	height: auto;
	margin-left: auto;
	margin-right: auto;  
    border-radius: 8px !important;
  	border: none;
	box-shadow:  0 0 10px 5px rgba(0,0,0,0.1) !important;
	-moz-box-shadow: 0 0 10px  2px rgba(0,0,0,0.1) !important;
	-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.1) !important;
	-o-box-shadow: 0 0 10px 2px rgba(0,0,0,0.1)!important;  
}

.patrocinio{
	max-width:300px;
	padding: 4px
}

/*
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-align: center;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #333;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

p {
  color: #726F6F;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.css_btn_class_secundary {
	font-size:16px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;

	border-radius:5px;
	padding:12px 0;
	text-decoration:none;

	background-color: transparent;
	color:#3f6fb6;
	/* display:block + width:100% forces the <a> to fill its 300px parent
	   regardless of label length (i18n strings vary by language). */
	display:block;
	width:100%;
	text-align:center;

	border:2px solid #3f6fb6;
	box-sizing:border-box;

	box-shadow: 0 0 10px 5px rgba(0,0,0,0.1) !important;

}

.css_btn_class_third {
	font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #3f6fb6;
    text-decoration: underline;

}


.css_btn_class_secundary:active {
	position:relative;
	top:1px;
}

/* estilo do botao */
.css_btn_class {
	font-size:18px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:normal;
	-moz-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	/* Was `12px 75px` — forced an intrinsic width based on padding which
	   made the primary CTA visually wider than the secondary button below
	   it. Reset to 0 horizontal padding and rely on display:block +
	   width:100% to match the secondary's full-row layout. */
	padding:12px 0;
	text-decoration:none;
	background-color:#3f6fb6;
	color:#ffffff;
	display:block;
	width: 100%;
	text-align:center;
	box-sizing:border-box;
	border: none;
    box-shadow:  0 0 10px 5px rgba(0,0,0,0.1) !important;
    -moz-box-shadow: 0 0 10px  2px rgba(0,0,0,0.1) !important;
    -webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.1) !important;
    -o-box-shadow: 0 0 10px 2px rgba(0,0,0,0.1)!important;

	}.css_btn_class:active {
		position:relative;
		top:1px;
	}	
		h2     { 
			text-align:center; 
			margin-bottom:50px; 
		}
		h2 small { 
			font-weight:normal; 
			color:#888; 
			display:block; 
		}
		.footer   { text-align:center; }
		.footer a  { color:#53B2C8; }

		/* form starting stylings ------------------------------- */
		.group        { 
     	    margin: 0;
			position:relative; 
            margin-bottom: 20px;
            width: 100%;
		}
		input         {
            position: relative;
			font-size:18px;
			padding:10px 10px 10px 5px;
			display:block;
			width:100%;
		    border: none;
		    box-shadow:  0 0 10px 5px rgba(0,0,0,0.1) !important;
		    -moz-box-shadow: 0 0 10px  2px rgba(0,0,0,0.1) !important;
            -webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.1) !important;
    	    -o-box-shadow: 0 0 10px 2px rgba(0,0,0,0.1)!important;
		    border-radius: 5px !important;
		    background-color: #ffffff !important;      
			font-family: Arial;
		}


		/* LABEL ======================================= */
		label          {
			color:#999; 
			font-size:15px;
			font-weight:normal;
			position:absolute;
			pointer-events:none;
			left:10px;
			top:12px;
			transition:0.2s ease all; 
			-moz-transition:0.2s ease all; 
			-webkit-transition:0.2s ease all;
		}

		/* active state */
		input:focus ~ label, input:valid ~ label    {
			top:-20px;
			font-size:14px;
			color:#999;
		}

		/* HIGHLIGHTER ================================== */
		.highlight {
			position:absolute;
			height:60%; 
			width:100px; 
			top:25%; 
			left:0;
			pointer-events:none;
			opacity:0.5;
		}

		/* active state */
		input:focus ~ .highlight {
			-webkit-animation:inputHighlighter 0.3s ease;
			-moz-animation:inputHighlighter 0.3s ease;
			animation:inputHighlighter 0.3s ease;
		}

		.

		/* ANIMATIONS ================ */
		@-webkit-keyframes inputHighlighter {
			from { background:#5264AE; }
			to  { width:0; background:transparent; }
		}
		@-moz-keyframes inputHighlighter {
			from { background:#5264AE; }
			to  { width:0; background:transparent; }
		}
		@keyframes inputHighlighter {
			from { background:#5264AE; }
			to  { width:0; background:transparent; }
		}

		.birthdateLabel{
			top:-15px;position:relative;text-align: left;padding-left: 0px;margin-left: 0px;left: -80px;width:210px;font-size:14px; color: #999;;
		}

		.socialNetworkDiv{
			width: 211px;height: 60px;margin-left:auto;margin-right:auto;
		}

		.socialNetworkInput{
			width: 211px;height: 50px;border-bottom:0px;
		}

    .select-style {
      width: 100%;
      height: 42px;
      font-family: Arial;
      -webkit-appearance: none;
      -moz-appearance: button;
      -webkit-user-select: none;
      -moz-user-select: none;
      -webkit-padding-end: 20px;
      -moz-padding-end: 20px;
      -webkit-padding-start: 2px;
      border-radius: 5px !important;
      background-color: #ffffff !important;
      background-position: right 50%;
      background-repeat: no-repeat;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
	  border: none;
	  box-shadow:  0 0 10px 5px rgba(0,0,0,0.1) !important;
	  -moz-box-shadow: 0 0 10px  2px rgba(0,0,0,0.1) !important;
	  -webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.1) !important;
	  -o-box-shadow: 0 0 10px 2px rgba(0,0,0,0.1)!important;
      font-size: inherit;
      margin: 0;
      color: #999;
      overflow: hidden;
      padding-top: 2px;
      padding-bottom: 2px;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: inherit;
      padding:10px 10px 10px 10px;
    }

    .select-style select {
        padding: 5px 8px;
        width: 100%;
        border: none;
        box-shadow: none;
        background-image: none;
        -webkit-appearance: none;
        height: 100% !important;
    }

    .select-style select:focus {
        outline: none;   
    }


			/* Terms and privacy policy */


	#termsOfUse {
		width: 100%;
		text-align: left;
		padding-top: 5%;

	}

	input[type='checkbox']{
		-ms-transform: scale(1.5); /* IE */
	  	-moz-transform: scale(1.5); /* FF */
	  	-webkit-transform: scale(1.5); /* Safari and Chrome */
	  	-o-transform: scale(1.5); /* Opera */
	  	padding: 5px;
		float: left;
		width: auto;
	}


	/*------------ ALERT BOX -------------*/

	.alert {  
	  box-shadow: #C5C5C5 3px 3px;
	  border-radius: 25px 0;
	  text-align: center;
	  width: 200px;
	  padding: 20px;
	  position:absolute;
	  top: 40%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  z-index:100; 
	}

	#alertBox {
	  font-weight: bold;
	  padding: 9%;
	}

	.alert.warning {
	  background-color: #E9E7E7;
	}

	.closebtn {
	  background-color: #b8b8b8;
	  border-radius: 8px 0;
	  color: #4D4848;
	  font-weight: bold;
	  font-size: 22px;
	  line-height: 20px;
	  cursor: pointer;
	}

	.closebtn:hover {
	  color: black;
	}

/*
VOUCHER LOGIC
*/
.voucherGroupOfInputValidation {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
}

.voucherInputValidation {
    width: 40px;
    height: 60px;
    text-align: center;
    font-size: x-large;
    border: none;
    background-color: #A7D2FF;
    text-transform:uppercase;
}
.voucherInputValidation:focus{
    outline: none;
    box-shadow: none;
}

.auth-container{
    width:300px;
    background:white;
    border-radius:18px;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    margin-left: calc(50% - 175px);
}

.auth-h2{
    text-align:center;
    margin-bottom:25px;
    color:#333;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}


.auth-option{
    border:1px solid #e3e6ea;
    border-radius:12px;
    padding:16px;
    margin-bottom:12px;
    cursor:pointer;
    transition:all .2s;
    /* The legacy .row class higher in the cascade applies text-align:center
       to everything inside. Card contents always read left-aligned (title
       + description lines), so override locally. The price on line 1 still
       lands on the right because that uses flexbox justification. */
    text-align:left;
}

.auth-option:hover{
    transform:scale(1.02);
}

.auth-option-active{
    border:2px solid #3f6fb6;
    background:#edf3ff;
}

.auth-option-title{
    font-weight:600;
    font-size:16px;
}

.auth-option-desc{
    font-size:13px;
    color:#666;
    margin-top:4px;
}

/* EMV "Pix Copia e Cola" payload — long opaque string that we display
   without scrollbars. Clamps to 3 lines and appends "..." on overflow so
   the buyer can see the head of the code; the Copy button is the real
   way to take the full value. */
.auth-pix-code{
    font-family: 'Courier New', Courier, monospace;
    font-size:13px;
    color:#222;
    background:#f5f7fa;
    border:1px solid #e3e6ea;
    border-radius:6px;
    padding:10px 12px;
    margin:8px 0;
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    /* line-clamp is webkit-only; this min-height keeps the box stable
       in older engines so the buyer at least sees the first chars. */
    line-height:1.4;
    max-height:calc(1.4em * 3);
    text-align:left;
}


.auth-whatsapp-root{
display:flex;
align-items:center;
justify-content:center;
padding:16px;
}

.auth-whatsapp-container{
width: 300px;
    background: white;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.auth-whatsapp-title{
font-size:22px;
font-weight:600;
text-align:center;
margin-bottom:16px;
color:#2b3b64;
}

.auth-whatsapp-subtext{
text-align:center;
font-size:15px;
line-height:1.6;
color:#5a6787;
margin-bottom:22px;
}

.auth-whatsapp-highlight{
color:#2d57e6;
font-weight:600;
}

.auth-whatsapp-card{
background:#f7f8fb;
border-radius:16px;
padding:18px;
border:1px solid #e9ecf5;
margin-bottom:18px;
}

.auth-whatsapp-message-title{
font-weight:600;
font-size:14px;
color:#364368;
margin-bottom:10px;
}

.auth-whatsapp-row{
display:flex;
align-items:center;
gap:10px;
background:white;
border-radius:12px;
border:1px solid #e2e6f0;
padding:10px;
}

.auth-whatsapp-number{
flex:1;
font-size:17px;
font-weight:500;
color:#2c3c60;
}

.auth-whatsapp-copy-btn{
background:linear-gradient(180deg,#6fa2ff,#3766ff);
border:none;
color:white;
padding:10px 14px;
border-radius:10px;
font-size:14px;
font-weight:500;
cursor:pointer;
}

.auth-whatsapp-copied{
margin-top:10px;
color:#2a9d66;
font-size:13px;
display:none;
}

.auth-whatsapp-connect-btn{
width:100%;
margin-top:14px;
background:linear-gradient(180deg,#6fa2ff,#2d57e6);
border:none;
color:white;
padding:16px;
font-size:17px;
border-radius:12px;
cursor:pointer;
opacity:.5;
pointer-events:none;
}

.auth-whatsapp-connect-btn.auth-whatsapp-active{
opacity:1;
pointer-events:auto;
}

.auth-whatsapp-info{
padding:16px;
border-radius:14px;
background:#f7f8fb;
font-size:14px;
line-height:1.5;
margin-bottom:14px;
color:#59678b;
}

.auth-whatsapp-warning{
background:#fff5e4;
}

.auth-whatsapp-footer-btn{
margin-top:10px;
background:#e7ebf5;
border:none;
width:100%;
padding:15px;
border-radius:12px;
font-size:16px;
color:#7a86a6;
}

.auth-whatsapp-footer-text{
text-align:center;
font-size:13px;
margin-top:6px;
color:#7a86a6;
}

/* SMALL MOBILE */

@media (max-width:380px){

.auth-whatsapp-title{
font-size:20px;
}

.auth-whatsapp-number{
font-size:15px;
}

.auth-whatsapp-copy-btn{
padding:8px 12px;
font-size:13px;
}

}


/* ── Simulator phone-frame ────────────────────────────────────────
 * Activated by captive.js when the URL carries ?simulator=1 and the
 * viewport is desktop-wide. captive.js also wraps every direct child
 * of <body> in a #phoneScreen div so the layout is:
 *
 *      html.simulator-frame-html  (soft gray-blue page bg)
 *        └── body.simulator-frame  (the iPhone "bezel" — dark, rounded)
 *              └── #phoneScreen    (the white "screen" surface)
 *                    └── original  .container divs (untouched)
 *
 * Dimensions: 390 × 720 — matches the iPhone 14 logical width (390pt)
 * and gives a ~19:10 aspect ratio that reads as a real modern phone
 * (the earlier 480 × 720 looked too "tablet-ish"). Body padding 12px
 * leaves 366 × 696 of screen surface inside the bezel.
 *
 * No notch / pill / dynamic-island — those tie the frame to a
 * specific iPhone generation and look stale fast. Plain rounded
 * bezel ages better.
 */
html.simulator-frame-html{
    background:#e2e6ec;
    min-height:100vh;
    margin:0;
    padding:0;
}
body.simulator-frame{
    margin:40px auto !important;
    padding:12px !important;
    width:390px !important;
    height:720px !important;
    background:#1a1a1a !important;
    /* Border radius scales down a touch vs. the previous 480-wide
       layout so the corner curve still reads as iPhone-ish (~9% of
       width) without looking like a rounded blob. */
    border-radius:42px !important;
    box-sizing:border-box;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(20,30,50,0.35),
               0 2px 6px rgba(20,30,50,0.2);
    /* Body's own children (the .container divs) flow inside
       #phoneScreen — no flex/grid here, just plain block flow.
       !important wins over status.html's inline `body { display:flex }`
       which would otherwise center the bezel content vertically and
       collapse it. */
    display:block !important;
    align-items:initial !important;
    justify-content:initial !important;
}
body.simulator-frame #phoneScreen{
    width:100%;
    height:100%;
    background:#fff;
    /* Inner radius = outer radius (42) - padding (12) - hairline (2)
       so the white screen tracks the bezel's curve cleanly. */
    border-radius:30px;
    overflow-y:auto;
    overflow-x:hidden;
    /* Give the form some breathing room from the rounded corners. */
    padding:24px 0;
    box-sizing:border-box;
    /* iOS-style soft scrollbar hiding for the demo. Operators
       previewing on laptops see a clean white interior. */
    scrollbar-width:thin;
    scrollbar-color:#d0d5dd transparent;
}
body.simulator-frame #phoneScreen::-webkit-scrollbar{ width:6px; }
body.simulator-frame #phoneScreen::-webkit-scrollbar-thumb{
    background:#d0d5dd; border-radius:3px;
}
/* Strip the captive's own outer "container" backgrounds so the white
   #phoneScreen is the only surface visible — avoids a stripe-on-stripe
   look when the captive's default white card sits inside #phoneScreen. */
body.simulator-frame #phoneScreen .container{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
    margin:0 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-height:auto !important;
    padding:0 16px !important;
    box-sizing:border-box;
}