body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #222;
}

.container {
    text-align: center;
}

.viewport {
    width: 100%;
    height: 400px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

input {
    padding: 10px;
    font-size: 16px;
    margin-top: 10px;
    width: 250px;
}

button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

#result {
    margin-top: 20px;
    font-weight: bold;
}

/* ---------- Tickets cards styles (from provided design) ---------- */
/* Font / color variables approximate */
:root{
    --sq-font: 'Sofia', sans-serif;
    --sq-blue: #0a4870;
    --sq-blue2: #e3ebf1;
    --sq-grey: #7d7d7d;
    --sq-grey2: #f0f0f0;
    --sq-orange: #ec992c;
}

/* Reset within tickets area to avoid global overrides */
.tickets-wrapper *{box-sizing:border-box}

.tickets-wrapper h1{font-family:var(--sq-font); margin:10px 20px; color:var(--sq-blue)}

.tickets-list{
    display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:0 auto; justify-content:center;
}
.booking-card{
    position:relative;
    width:300px; flex:0 0 300px; display:flex; flex-direction:column;
    margin:20px; margin-bottom:30px; border-radius:10px; overflow:hidden;
    background-position:center center; background-size:cover; text-align:center; color:var(--sq-blue);
    transition:all .3s ease; box-shadow:0 6px 18px rgba(15,40,60,0.06);
}
.booking-card::before{
    content:''; position:absolute; inset:0; background:rgba(10,72,112,0); transition:all .28s ease; z-index:0;
}
.booking-card .book-container{ height:200px; }
.booking-card .book-container .content{ position:relative; opacity:0; display:flex; align-items:center; justify-content:center; height:100%; width:100%; transform:translateY(-200px); transition:all .32s ease; }
.booking-card .book-container .content .btn{ border:3px solid #fff; padding:10px 15px; background:none; text-transform:uppercase; font-weight:700; font-size:1.05em; color:#fff; cursor:pointer; transition:all .2s ease; }
.booking-card .book-container .content .btn:hover{ background:#fff; color:var(--sq-blue); border-color:#fff }

.booking-card .informations-container{ flex:1 0 auto; padding:20px; background:var(--sq-grey2); transform:translateY(206px); transition:all .32s ease; z-index:2; }
.booking-card .title{ position:relative; padding-bottom:10px; margin-bottom:10px; font-weight:700; font-size:1.15em; color:var(--sq-blue); }
.booking-card .title::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:3px; width:50px; margin:auto; background:var(--sq-blue); }
.booking-card .sub-title{ color:var(--sq-bluegrey, #49606e); margin-bottom:6px }
.booking-card .price{ display:flex; align-items:center; justify-content:center; margin-top:10px; color:var(--sq-bluegrey, #49606e); }
.booking-card .price .icon{ margin-right:10px }

.booking-card .more-information{ opacity:0; transition:opacity .28s ease .06s }
.booking-card .info-and-date-container{ display:flex; gap:10px }
.booking-card .box{ flex:1 0; padding:15px; margin-top:20px; border-radius:10px; background:#fff; font-weight:700; font-size:.95em; }
.booking-card .box.info{ color:var(--sq-orange); margin-right:0 }
.booking-card .disclaimer{ margin-top:16px; font-size:.85em; color:var(--sq-grey) }

/* Hover/open state */
.booking-card:hover::before{ background:rgba(10,72,112,0.6) }
.booking-card:hover .book-container .content{ opacity:1; transform:translateY(0) }
.booking-card:hover .informations-container{ transform:translateY(0) }
.booking-card:hover .more-information{ opacity:1 }

@media (max-width:768px){
    .booking-card{ width:calc(100% - 40px); flex-basis:calc(100% - 40px); margin:10px 20px }
    .booking-card .informations-container{ transform:translateY(0); }
    .booking-card .book-container .content{ opacity:1; transform:translateY(0) }
    .booking-card .more-information{ opacity:1 }
}

.credits{ display:table; background:var(--sq-blue); color:#fff; line-height:25px; margin:10px auto; padding:20px; border-radius:10px; text-align:center }

/* small helpers */
.booking-card .icon{ width:20px; height:20px; vertical-align:middle; fill:currentColor }

/* End Tickets cards styles */

/* Justify text inside cards for better readability */
.booking-card .informations-container,
.booking-card .informations-container p,
.booking-card .box,
.booking-card .box p,
main .sq-benefits .sq-benefit-body,
main .sq-benefits .sq-benefit-body p,
.sq-benefit-card .sq-benefit-body,
.sq-benefit-card .sq-benefit-body p {
    text-align: justify;
    text-justify: inter-word;
}

/* ===== Seção Benefícios do Simple Quality ===== */
.sq-benefits { padding: 36px 18px 56px; background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); }
.sq-benefits .sq-section-title { margin-bottom: 6px; }
.sq-benefits .sq-section-desc { color: #556; }

.sq-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width:1100px; margin: 0 auto; }
.sq-benefit-card { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 8px 28px rgba(6,107,250,0.08); display:flex; gap:12px; align-items:flex-start; transition:transform .18s ease, box-shadow .18s ease; }
.sq-benefit-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(6,107,250,0.12); }
.sq-benefit-media { width:72px; height:72px; flex:0 0 72px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:#066BFA10; color:#066BFA; font-size:28px; }
.sq-benefit-media img { display:none; }
.sq-benefit-body h3 { margin:0 0 6px; color:#066BFA; font-size:1.05rem; }
.sq-benefit-body p { margin:0; color:#233; font-size:0.98rem; line-height:1.5; }

@media (max-width:1100px) {
    .sq-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width:700px) {
    .sq-benefits-grid { grid-template-columns: 1fr; }
    .sq-benefit-card { align-items:center; text-align:center; flex-direction:column; }
    .sq-benefit-media { margin-bottom:6px; }
    .sq-benefit-body h3 { font-size:1.02rem; }
}

/* ===== Overrides to neutralize menu.css conflicts ===== */
/* menu.css sets .sq-benefit-card { width:100% !important } and other rules; here we restore grid behavior inside the benefits section */
main .sq-benefits .sq-benefits-grid { max-width:1200px; grid-template-columns: repeat(3, 1fr); gap:22px; }

main .sq-benefits .sq-benefit-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 20px !important;
    border-radius: 14px !important;
    /* layout interno: coluna de ícone + conteúdo */
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    gap: 18px !important;
    align-items: center !important;
    text-align: left !important;
    box-shadow: 0 10px 30px rgba(6,107,250,0.06) !important;
    border: 1px solid rgba(6,107,250,0.035) !important;
    min-height: 150px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

/* equal-height rows: ensure cards stretch to same height within a row */
.sq-benefits-grid { align-items: stretch; grid-auto-rows: 1fr; }
.sq-benefits-grid > .sq-benefit-card { display: grid !important; grid-template-columns: 72px 1fr; gap:18px; }

main .sq-benefits .sq-benefit-media { flex: 0 0 72px !important; width:72px !important; height:72px !important; }
main .sq-benefits .sq-benefit-media svg { max-width:64px !important; max-height:64px !important; display:block; }

main .sq-benefits .sq-benefit-media { border-radius:10px; background: #f0f6ff; display:flex; align-items:center; justify-content:center; padding:6px; }

/* Ícones maiores e centrados */
main .sq-benefits .sq-benefit-media i { color:#066BFA; font-size:28px; display:block; }
main .sq-benefits .sq-benefit-media svg { width:44px !important; height:44px !important; max-width:44px !important; max-height:44px !important; display:block; }

main .sq-benefits .sq-benefit-body { padding-left:0; display:flex; flex-direction:column; justify-content:center; }
main .sq-benefits .sq-benefit-body h3 { color:#066BFA !important; font-size:1.04rem; margin:0 0 8px; font-weight:700; }
main .sq-benefits .sq-benefit-body p { color:#33404a; margin:0; line-height:1.6; max-width:48ch; }

main .sq-benefits .sq-benefit-card:hover { transform: translateY(-6px) !important; box-shadow: 0 18px 48px rgba(6,107,250,0.09) !important; }

/* Focus visible for keyboard users */
.sq-benefit-card:focus {
    outline: 3px solid rgba(6,107,250,0.12);
    outline-offset: 4px;
}

/* Make card content clickable visually (cursor) */
.sq-benefit-card[role="button"] { cursor: pointer; }

/* Thumbnail variant: if media contains an img that is not an icon make it slightly offset */
/* remove image-specific thumbnail rule (we use inline svg icons now) */
main .sq-benefits .sq-benefit-card .sq-benefit-media img { display:none; }

@media (max-width:900px) {
    main .sq-benefits .sq-benefit-card { min-height:unset !important; grid-template-columns: 64px 1fr !important; }
}

@media (max-width:700px) {
    /* mobile: ícone em cima */
    main .sq-benefits .sq-benefit-card { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; text-align:center !important; align-items:start !important; padding:18px !important; }
    main .sq-benefits .sq-benefit-media { margin:0 auto 10px auto !important; }
    main .sq-benefits .sq-benefit-body p { max-width:60ch; margin:0 auto; }
}

@media (max-width:700px) {
    main .sq-benefits .sq-benefit-card { flex-direction:column !important; align-items:center !important; text-align:center !important; }
    main .sq-benefits .sq-benefit-media { margin-bottom:10px !important; }
}

/* ===== Navbar active link styles ===== */
.sq-navbar-menu { list-style:none; display:flex; gap:28px; align-items:center; margin:0; padding:0; }
.sq-navbar-menu a { color: #066BFA; text-decoration:none; font-weight:700; padding:8px 0; position:relative; }
.sq-navbar-menu a:hover, .sq-navbar-menu a:focus { color:#064bb0; }
.sq-navbar-menu a.active {
    color:#064bb0;
}
/* underline/bottom bar for active link */
.sq-navbar-menu a.active::after { content:''; position:absolute; left:0; right:0; bottom:-8px; height:3px; width:48px; margin:0 auto; background:linear-gradient(90deg,#066BFA,#4aa3ff); border-radius:2px; }

/* mobile menu links active */
.sq-mobile-nav a { display:block; padding:12px 0; color:#0a4870; text-decoration:none; font-weight:700; }
.qg-mobile-active { color:#064bb0; }
.sq-mobile-nav a.active { color:#064bb0; }

/* Ensure active state is visible on small screens */
@media (max-width:700px) {
    .sq-navbar-menu { display:none; }
    .sq-mobile-menu.open .sq-mobile-nav a.active { background:#eff7ff; border-radius:6px; padding-left:10px; }
}

/* Footer accordion animation helpers */
.sq-footer-col ul {
    transition: max-height 260ms ease, opacity 200ms ease;
    overflow: hidden;
}
@media (min-width:701px) {
    .sq-footer-col ul { overflow: visible; max-height: none; }
}

/* ===== Light Footer styles (full-width, blue accents) ===== */
.sq-footer { background: #f6fbff; }
.sq-footer-cta { background: linear-gradient(90deg,#f0f7ff,#eef7ff); padding: 28px 0; margin-bottom: 0; }
.sq-footer-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; max-width:1200px; margin:0 auto; padding:0 12px; }
.sq-footer-cta h3 { margin:0; color:#066BFA; font-size:1.45rem; font-weight:700; }
.sq-footer-cta p { margin:0; color:#064bb0; }
.sq-cta-action .btn { background:#066BFA; border-color:#066BFA; color:#fff; padding:10px 18px; border-radius:6px; }

.sq-footer-main.sq-footer-dark { background: transparent; color:#064bb0; padding:48px 0; display:grid; grid-template-columns: repeat(4,1fr); gap:28px; align-items:start; max-width:1200px; margin:0 auto; padding-left:12px; padding-right:12px; }
.sq-footer-col { min-width:0; }
.sq-footer-logo { width:180px; margin-bottom:12px; filter:none; }
.sq-footer-address { color:#0a4f9e; font-style:normal; margin-bottom:8px; }
.sq-footer-socials .social-icon { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; background:transparent; color:#066BFA; border:1px solid rgba(6,107,250,0.12); margin-right:8px; text-decoration:none; }
.sq-footer-socials .social-icon:hover { background: #066BFA10; box-shadow: 0 4px 12px rgba(6,107,250,0.08); }
.sq-footer-title { color:#066BFA; font-weight:700; margin-bottom:12px; }
.sq-footer-col .sq-footer-title { cursor:pointer; position:relative; }
.sq-footer-col .sq-footer-title::after { content: '\25BE'; position:absolute; right:0; top:0; font-size:0.9rem; color:#066BFA; transform-origin:center; transition:transform .18s ease; }
.sq-footer-col.open .sq-footer-title::after { transform: rotate(180deg); }
.sq-footer-links ul, .sq-footer-about ul { list-style:none; padding:0; margin:0; }
.sq-footer-links li, .sq-footer-about li { margin-bottom:8px; }
.sq-footer-links a, .sq-footer-about a { color:#066BFA; text-decoration:none; }
.sq-footer-links a:hover, .sq-footer-about a:hover { color:#064bb0; }

.sq-footer-newsletter .sq-footer-form { display:flex; gap:8px; margin-top:10px; }
.sq-footer-newsletter input[type="email"]{ padding:10px 12px; border-radius:6px; border:1px solid rgba(6,107,250,0.12); background:transparent; color:#064bb0; min-width:0; }
.sq-footer-newsletter .btn-outline-light { border:1px solid rgba(6,107,250,0.12); background:transparent; color:#066BFA; padding:8px 12px; border-radius:6px; }

/* Highlighted newsletter card */
.sq-footer-newsletter-highlight { background: linear-gradient(180deg, #066BFA10, rgba(6,107,250,0.04)); padding:18px; border-radius:10px; }
.sq-footer-newsletter-highlight .sq-footer-text { color:#064bb0; }
.sq-newsletter-cta { background:#fff; color:#066BFA; border:1px solid rgba(6,107,250,0.12); padding:10px 14px; border-radius:6px; }
.sq-newsletter-cta:hover { background:#f6fbff; }

/* ===== Legal / Terms pages styles ===== */
.legal-content {
    text-align: justify;
    -moz-text-align-last: left; /* keep last line left-aligned in Firefox */
    text-align-last: left; /* keep last line left-aligned */
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto 48px auto;
    color: #1b314a;
    font-size: 15.5px;
}
.legal-content h1,
.legal-content h2 {
    color: #066BFA;
}
.legal-content h1 { font-size: 28px; margin-top: 6px; margin-bottom: 14px; }
.legal-content h2 { font-size: 18px; margin-top: 22px; margin-bottom: 10px; }
.legal-content p { margin-bottom: 12px; }
.legal-content ul,
.legal-content ol {
    margin-left: 22px;
    margin-bottom: 12px;
}
.legal-content a { color: #066BFA; text-decoration: underline; }

/* Subtle top border for footer area to separate content */
.sq-footer { border-top: 6px solid rgba(6,107,250,0.06); }

.sq-footer-copy { text-align:center; padding:18px 0; background:#eef7ff; color:#066BFA; }

@media (max-width:900px){
    .sq-footer-cta-inner { flex-direction:column; align-items:flex-start; }
    .sq-footer-main.sq-footer-dark { grid-template-columns: 1fr 1fr; }
}
@media (max-width:600px){
    .sq-footer-cta-inner { padding:0 12px; }
    .sq-footer-main.sq-footer-dark { grid-template-columns: 1fr; padding:28px 12px; }
    .sq-footer-cta h3 { font-size:1.2rem; }
    .sq-footer-newsletter .sq-footer-form { flex-direction:column; }
}

/* ===== Login page styles ===== */
.sq-login-page { min-height: calc(100vh - 160px); display:flex; flex-direction:column; align-items:stretch; background: #fff; }
.sq-login-hero { padding:48px 12px; flex: 1 1 auto; display:flex; align-items:center; }
.sq-login-hero-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.sq-login-card { width:820px; display:flex; border-radius:12px; overflow:hidden; box-shadow:0 22px 60px rgba(6,107,250,0.09); }
.sq-login-card-media { width:320px; background: #ffffff; display:flex; align-items:center; justify-content:center; padding:28px; }
.sq-login-card-media img { max-width:300px; width:250px; filter: none; }
.sq-login-card-form { background: #ffffff; padding:36px 48px; flex:1; border-left:6px solid #066BFA; border-radius:0 12px 12px 0; }
.sq-login-card-form h3 { margin:0 0 18px; color:#066BFA; font-size:1.35rem; text-align:center; }

/* stacked inputs like reference */
.sq-form-row { padding:8px 0; }
.sq-form-row:first-of-type { padding-top:0; }
.sq-input { width:100%; border:1px solid rgba(6,107,250,0.08); padding:10px 14px; font-size:15px; color:#223; background:#ffffff; border-radius:8px; box-sizing:border-box; }
.sq-input::placeholder { color:#cfdff9; }
.sq-input { background-clip: padding-box; }
/* Stronger neutralize browser autofill color globally */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill,
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    box-shadow: 0 0 0px 1000px #ffffff inset !important;
    -webkit-text-fill-color: #111 !important;
    background-color: #ffffff !important;
}
input:-webkit-autofill::first-line { background-color:#ffffff !important; }
.sq-login-submit { background: #066BFA; color:#fff; border: none; padding:12px 22px; border-radius:12px; font-weight:700; cursor:pointer; box-shadow: 0 6px 18px rgba(6,107,250,0.12); }
.sq-login-submit:hover { background:#055bd6; }
.sq-login-links { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:18px; justify-content:center; }
.sq-login-links a { color:#066BFA; text-decoration:underline; font-weight:600; }
.sq-login-keep { color:#33404a; display:flex; align-items:center; gap:8px; font-weight:600; }
.sq-login-keep input { transform:translateY(1px); }
.sq-login-error { color:#d9534f; font-weight:700; text-align:center; margin-top:12px; }

.sq-login-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.sq-login-actions .sq-login-submit { min-width:120px; }

@media (max-width:900px){
    .sq-login-card { width:100%; flex-direction:column; max-width:420px; margin:0 auto; }
    .sq-login-card-media { width:100%; padding:14px 12px; }
    .sq-login-card-media img { width:220px !important; display:block !important; visibility:visible !important; opacity:1 !important; }
    .sq-login-card-form { padding:10px 12px; border-left: none; border-top:2px solid rgba(6,107,250,0.85); border-radius:0 0 12px 12px; }
    .sq-input { padding:10px 12px; font-size:15px; background:#fff !important; }
    .sq-login-card-form h3 { font-size:20px; margin-bottom:10px; }
    .sq-login-inline { flex-direction:column; gap:8px; }
    .sq-login-inline input { width:100%; padding:10px 12px; }
    .sq-login-actions { justify-content:center; margin-top:8px; }
    .sq-login-submit { width:100%; min-width:0; max-width:none; padding:10px 14px; }
    .sq-login-links { margin-top:10px; display:flex; flex-direction:column; align-items:center; }
    .sq-login-links-row { display:flex; gap:10px; justify-content:center; margin-bottom:6px; }
    .sq-login-keep-row { display:flex; justify-content:flex-start; width:100%; padding-left:12px; }
    .sq-login-keep { display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:14px; }

    /* reduce CTA width on mobile so it doesn't look huge */
    .sq-login-actions .sq-login-submit { max-width:240px; width:88%; margin:0 auto; display:block; padding:10px 16px; border-radius:8px; }
}

@media (max-width:480px){
    .sq-login-hero { padding:18px 10px; }
    .sq-login-card { border-radius:10px; max-width:360px; margin:0 auto; }
    .sq-login-card-form { padding:14px; }
    .sq-login-inline input { font-size:14px; padding:10px 10px; }
    .sq-input { font-size:14px; padding:10px 10px; }
    .sq-login-links { gap:8px; font-size:14px; }
    .sq-login-actions { margin-top:8px; }
}