:root {
    --green-start: #577abd;
    --green-end: #1a3466;
    --top-rect: #FFDC29;
    --title: #FF0000;
    --label: #3F3F3F;
    --input-bg: #FEFDE0;
    --link: #3F3F3F;
    --muted: #818181;
}

body.page-mais{background:#F3F3F3}

/* green bar under topbar for mais page */
.top-green-bar{position:fixed;left:0;right:0;top:64px;height:48px;background:var(--green-end);display:flex;align-items:center;z-index:115;padding:0 12px}
.top-green-bar .left-btn{background:transparent;border:0;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center}
    .top-green-bar .left-btn img {
        width: 50px;
        height: 50px;
        display: block;
        padding: 10px
    }
/* ensure content is pushed below the fixed topbar + green bar (total ~112px) */
.page-mais .home-main{padding-top:120px}

/* Dezenas sorteadas title box */
.dezenas-title{
  background:#E1FFE6;
  border-radius:20px;
  padding:12px;
  text-align:center;
  color:#000;
  font-weight:700;
  display:inline-block; /* size to text content */
  /* hard shadow directly below */
  box-shadow: 0 6px 0 rgba(0,0,0,0.12);
}

/* wrapper to center the title and provide outer spacing */
.dezenas-wrap{max-width:720px;margin:0 auto 12px;padding:0 8px;text-align:center}

/* account deletion warning */
.warning-text{background:#FFBDBD;border-radius:8px;padding:10px;display:inline-block;color:#000;font-weight:700;text-align:center}
.warning-actions{display:flex;gap:12px;justify-content:center;margin-top:12px}
.btn-muted{background:#fff;color:var(--label);border:1px solid #e6e6e6;padding:10px 14px;border-radius:8px;cursor:pointer}
.btn-muted:active{transform:scale(0.98)}

/* history list styles for historico page */
.history-list{border-radius:10px;display:flex;flex-direction:column;gap:10px}
.history-item {
    background: #E1FFE6;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}
.history-item .hi-icon{width:28px;height:28px;flex:0 0 28px}
.history-item .hi-text{text-align:center;color:var(--label)}

/* cart product list */
.product-list{display:flex;flex-direction:column;gap:10px}
.product-card{background:#E1FFE6;padding:10px;border-radius:8px}
.product-row{display:flex;align-items:center;justify-content:space-between}
.product-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 95%}
.product-title{font-weight:700;color:#000}
.product-price{color:#000}
.product-right{display:flex;align-items:center;justify-content:flex-end}
.icon-close{background:transparent;border:0;padding:6px;border-radius:8px}
.icon-close img{display:block}

/* utility: vertical stack with gap */
.stack-col{display:flex;flex-direction:column;gap:12px}

.section-title-center{text-align:center;color:#000;font-weight:700}

/* utility to hide elements */
.hidden{display:none}

/* center wrapped container used across pages */
.center-wrap{max-width:720px;margin:16px auto;padding:16px;text-align:center}

/* compact info box: background wraps tightly to text and smaller font */
.info-inline{display:inline-block;padding:6px 10px;border-radius:8px;background:#E1FFE6;color:#000;font-size:13px}

/* recuperar page styles */
.recover-list{display:flex;flex-direction:column;gap:10px;align-items:center}
.recover-option{background:#fff;padding:12px;border-radius:8px;width:100%;max-width:520px;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,0.04)}
.recover-option input{margin-right:8px}
.recover-option span{color:var(--label);text-align:left}

.recover-section{margin-bottom:12px}
.recover-section-title{font-weight:700;color:var(--label);margin-bottom:8px}

/* comprovante styles */
.comprovante-container{background:#fff;border-radius:10px;padding:12px}
.comprovante-title{text-align:center;font-weight:700;margin-bottom:12px}
.comprovante-grid {
    display: grid;
    grid-template-columns: 1fr 80px 120px;
    align-items: start;
    align-items: center;
    gap: 8px;
    justify-items: center;
}
.comp-header{font-weight:700;color:var(--label)}
.comp-row{background:transparent;padding:6px 4px}
.comp-price{text-align:right}
.comp-rule{border-top:1px solid #000;height:1px;width:100%}
.comp-total{font-weight:700;text-align:right}
.comp-date{text-align:right;font-size:13px;color:var(--label)}
/* make transaction date span full width of the comprovante and center it */
.comprovante-grid .comp-date{grid-column:1 / -1;text-align:center}
.purchase-item{display:flex;align-items:center;justify-content:space-between;background:#E1FFE6;padding:12px;margin-top:8px;border-radius:8px}
.pi-left{flex:1;text-align:left}
.pi-right{flex:0 0 auto}
.btn-icon-circle{background:var(--green-end);border:0;padding:8px;border-radius:8px;box-shadow:0 6px 0 rgba(0,0,0,0.12);color:#fff}
.delete-btn{background:#d9534f}

/* pay instruction styles */
.pay-copy-box{background:#E8F6FF;border:2px solid #45A845;border-radius:10px;padding:12px}
.pay-copy-link{color:#6b6b6b;font-weight:700;margin-bottom:8px}
.pay-code{color:#6b6b6b;word-break:break-all;font-size:13px}
.pay-qr-box{background:#E8F6FF;border-radius:8px;padding:12px}

/* consent panel fixed above cart footer */
.consent-fixed {
    position: fixed;
    bottom: 165px;
    z-index: 129;
    display: flex;
    justify-content: center;
    width: 100%;
}
.consent-inner{background:#fff;padding:12px;border-radius:10px;margin:8px;box-shadow:0 6px 16px rgba(0,0,0,0.06);max-height:150px;overflow:auto}
.consent-heading{text-align:center;font-weight:700;margin-bottom:8px}
.consent-text{color:#000;margin-bottom:8px}
.consent-bold{font-weight:700;margin-top:6px;margin-bottom:6px}

/* separate fixed green consent bar above footer */
.consent-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 125px;
    z-index: 131;
    display: flex;
    justify-content: center
}
.consent-bar-inner {
    background: var(--green-end);
    padding: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}
.consent-bar-inner label{color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.consent-bar-inner input[type=checkbox]{width:18px;height:18px}

/* payment page styles */
.payment-root{max-width:720px;margin:12px auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.payment-header{text-align:center}
.pay-title{font-weight:700;font-size:18px}
.pay-amount{font-size:20px;color:var(--label);margin-top:6px}
.pay-for-friend{margin-top:8px}

/* payment card rows (list of saved/payment options) */
.payment-cards{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.payment-card-row{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:8px;border-radius:8px;box-shadow:0 6px 0 rgba(0,0,0,0.04)}
.pc-image{width:56px;height:36px;object-fit:cover;border-radius:8px;flex:0 0 56px}
.pc-text{flex:1;text-align:center;color:var(--label);font-weight:700}
.pc-check{flex:0 0 40px;text-align:right}

.payment-form{background:#fff;padding:12px;border-radius:10px;display:flex;flex-direction:column;gap:8px}
.payment-methods{display:flex;gap:8px;justify-content:space-between}
.pay-button {
    flex: 1;
    background: var(--green-end);
    color: #fff;
    border: 0;
    padding: 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 0 rgba(0,0,0,0.12)
}
.pay-button .btn-icon{width:20px;height:20px}

    .pay-button.pressed {
        background-color: var(--green-start) !important;
        box-shadow: 0 0 0 rgba(0,0,0,0.12)
    }



.payment-pix{background:#fff;padding:12px;border-radius:10px}
.pay-centred{text-align:center}

.card-section{background:#fff;padding:12px;border-radius:10px;display:flex;flex-direction:column;gap:8px}
.card-row{display:flex}
/* winners list: single item centers, multiple items form two columns */
.winners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px);
    gap: 12px;
    justify-content: center;
    margin-top: 12px;
    padding-bottom: 20px;
}
.winner-card {
    background: #E1FFE6;
    width:100%;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 6px 0 rgba(0,0,0,0.12);
    max-width: 520px;
    margin: 0 auto
}
.winner-card .winner-name{font-weight:700;color:var(--label);margin-bottom:6px}
.winner-card .winner-city{color:#000;margin-bottom:4px}
.winner-card .winner-title{color:#000}

/* cart page: compact numbers layout to fit two groups per line */
.cart-numbers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cart-numbers .numbers-group{padding:8px}
.cart-numbers .num-grid{grid-template-columns:repeat(5,1fr);gap:6px}
.cart-numbers .num-circle{width:20px;height:20px;font-size:11px}


/* cart footer above bottom-nav */
.cart-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 64px;
    height: 64px;
    background: var(--top-rect);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 130
}
.cart-footer-inner{width:100%;max-width:720px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.cf-left{display:flex;align-items:center;gap:8px}
.cf-icon{width:28px;height:28px}
.cf-pill{background:#45A845;color:#fff;padding:6px 8px;border-radius:12px;font-weight:700}
.app-btn.continue{padding:8px 20px;border-radius:10px}
.cf-right{color:#fff;font-weight:700}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, Roboto, Arial, sans-serif;background:#fff}

.app-shell{margin:24px auto;border-radius:12px;overflow:hidden}
/* cart mode: allow wider shell for cart page */
.container.app-shell.cart-mode{max-width:720px}

.top-rect{background:var(--top-rect);height:140px;display:flex;align-items:center;justify-content:center}
/* make the icon container fill the rect and center the image; padding creates an even border */
.top-rect .icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.top-rect .logo-img{width:100%;height:100%;object-fit:contain;display:block}
            
.content{padding:24px;background:#fff}

.btn,
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(180deg,var(--green-start),var(--green-end));
    font-weight: 600;
    transition: transform .12s ease, box-shadow .12s ease;
    transform-origin: center center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    margin: 5px;
}

/*.app-btn.install{width:100%}*/

/* message shown when PWA already installed (in browser) */
.installed-msg{background:var(--green-start);color:#fff;border-radius:10px;padding:12px;margin:10px;font-weight:700;text-align:center;display:none}

/* small info box used for messages on install pages */
.info-box{background:#E1FFE6;border-radius:10px;padding:10px;color:#000;margin-top:8px}

.title{text-align:center;color:var(--title);margin:6px 0 18px;font-size:20px;letter-spacing:1px}

.field-label{display:block;color:var(--label);font-size:14px;margin:8px 0}
.field{width:100%;padding:12px;border-radius:8px;border:1px solid #eee;background:var(--input-bg);color:#000;font-size:15px}

.password-row{display:flex;align-items:flex-start;gap:12px;margin-top:8px}
.password-col{flex:1}
.password-actions{display:flex;flex-direction:row;align-items:center;gap:12px;margin-top:10px}

/* Base styles for custom app buttons with small animations */
.app-btn:hover,.btn:hover{transform:scale(1.03);color:#fff;box-shadow:0 12px 26px rgba(0,0,0,0.12)}
.app-btn:active,.btn:active{transform:scale(0.98);color:#fff;box-shadow:0 4px 10px rgba(0,0,0,0.06)}
.app-btn:focus,.app-btn:focus-visible,.btn:focus,.btn:focus-visible{
  color:#fff;
  outline:none;
  box-shadow:0 0 0 3px rgba(138,228,138,0.14);
}

/* ensure Enter button follows app-btn styles and is full width under password field */
.enter{width:100%}

.link{color:var(--link);text-decoration:none;font-size:14px;align-self:center}
.link.bold{font-weight:700}

.divider{border:0;height:2px;background:var(--title);margin:18px 24px;border-radius:2px}

.register{text-align:center;color:var(--label);margin:10px 0}

@media (max-width:480px){.app-shell{margin:0;border-radius:0;height:100vh}}

/* ---------- HOME PAGE STYLES ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:64px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.08);z-index:100;display:flex;align-items:center;justify-content:center}
.topbar .topbar-inner{width:100%;max-width:420px;padding:0 12px;display:flex;align-items:center}
.topbar .user{color:var(--label);font-weight:600}
.topbar .cart-btn{background:transparent;border:0}

.topbar-center{flex:1;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}

/* topbar center balance pill */
.topbar-center {
    display: flex;
    color: #000;
    font-weight: 700; /* bold via CSS */
    padding: 4px 8px;
    border-radius: 10px;
}

.home-main{padding-top:60px;padding-bottom:60px;background:#fff;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.cart-main{padding-top:60px;padding-bottom:120px;background:#fff;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.card-green{background:var(--green-end);border-radius:12px;padding:10px;margin:12px 50px;overflow:visible}
.card-inner{padding-bottom: 12px;background:transparent}
.banner-wrap{width:100%;overflow:visible;display:flex;justify-content:center}
.banner {
    width: calc(25px + 100% + 25px);
    max-width: none;
    display: block;
    margin: 0 calc(-10%);
    border-radius: 8px
}

.banner-top{display:flex;justify-content:space-between;align-items:center;padding:0 6px;z-index:6}
.banner-top .tag{color:#fff;font-weight:700}
.banner-top .date{background:var(--title);color:#fff;padding:6px 10px;border-radius:8px;font-weight:700}

/* titulos_validos banner-top variant */
.card-green .banner-top{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 8px}
.card-green .banner-top .tv-title{color:#fff;font-weight:700;font-size:22px;line-height:1.1;text-align:center;margin-bottom:8px}
.card-green .banner-top .tv-sub{color:var(--label);text-align:center;margin-bottom:12px;font-size:15px}
.card-green .banner-top .lucky-grid{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px}
.card-green .banner-top .lucky-item{display:flex;align-items:center;justify-content:center;color:var(--label);font-size:14px}
.card-green .banner-top .lucky-item .li-index{font-weight:700;margin-right:8px}
.card-green .banner-top .lucky-item .li-val{font-weight:600}
.bottom-nav .nav-item:hover, .bottom-nav .nav-item.active{transform:scale(1.1);transition:transform 0.2s;}

.card-bottom{background:transparent;border-radius:8px;text-align:center}
.card-bottom .muted{color:#fff}
.card-bottom .muted b{font-weight:700}
.offers-row{display:flex;gap:8px;justify-content:center;padding:8px 8px 12px;text-align:center}
.offers-row .offer{flex:1;max-width:120px;padding:8px 10px;font-size:13px;border-radius:8px;background:linear-gradient(180deg,var(--green-start),var(--green-end));color:#fff}
.offers-row .offer + .offer{margin-left:6px}

/* green info row used in titulos */
.green-row{display:flex;align-items:center;justify-content:space-between;background:var(--green-end);color:#fff;border-radius:10px;padding:10px}
.green-row{display:flex;align-items:center;justify-content:space-between;background:var(--green-end);color:#fff;border-radius:10px;padding:10px;font-weight:700}
.green-row .g-left,.green-row .g-center,.green-row .g-right{flex:1;text-align:center}
.green-row .g-left{text-align:left}
.green-row .g-right{text-align:right}

/* numbers groups */
.numbers-container{display:flex;flex-wrap:wrap;gap:8px;padding:8px 8px 8px;justify-content:center}
.numbers-group{background:#fff;border-radius:10px;padding:12px;box-shadow:0 6px 16px rgba(0,0,0,0.04)}
.numbers-group .group-title{font-weight:700;color:var(--label);margin-bottom:8px}
.num-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.num-circle.gray{background:#D2D2D2;color:var(--label);width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.num-circle.green{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--green-start);color:#000}
.num-item{display:flex;align-items:center;justify-content:center}
.num-circle{background:var(--green-end);color:#fff;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin:auto;font-size:11px}
.num-grid.result{display:grid;grid-template-columns:repeat(auto-fit,minmax(36px,1fr));gap:6px;justify-content:center}

/* Flex-based row for number items: items flow left-to-right and wrap to next line */
.num-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.num-row .num-item{width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.num-row .num-circle{width:100%;height:100%;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.numbers-container .num-circle{width:24px;height:24px;font-size:11px}
.num-item{display:flex;align-items:center;justify-content:center}

/* action row with icon buttons and centered green title */
.action-row{display:flex;align-items:center;justify-content:space-between;margin:8px 8px}
.icon-btn{background:transparent;border:0;padding:6px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn img{width:25px;height:25px;display:block}
.install-top{padding:4px 8px;font-size:13px;margin-right:0;height:32px;display:inline-flex;align-items:center;justify-content:center;min-width:36px}
.topbar-center .icon-btn{background:transparent;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center}
.topbar-center .icon-btn img{width:30px;height:30px;display:block}
.icon-btn.rotate img{transform:rotate(180deg)}
.title-center-green{flex:1;text-align:center;color:var(--green-end);font-weight:700}

/* add to cart button style */
.add-cart{display:block;width:auto;max-width:320px;padding:12px;border-radius:10px;font-weight:700;margin:12px auto 0}
.app-btn.back{display:block;margin:0 auto 8px;max-width:140px}

.prize-row{display:flex;gap:12px;margin:12px 8px}
.prize-left{background:#E1FFE6;color:var(--label);padding:10px;border-radius:8px;min-width:110px;display:flex;align-items:center;justify-content:center}
.prize-right{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.prize-right .amount{font-weight:700;color:var(--label);font-size:18px}
.prize-right .net{color:var(--label);font-size:13px}

.counter-card {
    background: var(--green-end);
    border-radius: 12px;
    color: #fff;
    padding: 12px;
    margin: 12px 50px;
    text-align: center
}
.counter-card .title{font-weight:700;margin-bottom:8px;color:#fff}
.counter-timer{display:flex;justify-content:center;gap:12px;font-weight:700}
.counter-timer .seg{background:rgba(255,255,255,0.12);padding:8px 10px;border-radius:6px;min-width:54px}
.counter-timer .seg small{display:block;font-size:11px;font-weight:600}

/* bottom nav */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:64px;background:#fff;box-shadow:0 -6px 18px rgba(0,0,0,0.06);display:flex;justify-content:space-around;align-items:center;z-index:120}
.bottom-nav .nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);font-size:12px;cursor:pointer;transition:transform .12s ease}
.bottom-nav .nav-item img{width:24px;height:24px;margin-bottom:4px}
.bottom-nav .nav-item:hover{transform:scale(1.06)}
.bottom-nav .nav-item:active{transform:scale(0.98)}

/* pressed icon variant */
.nav-item.home img{filter:none}

/* responsive tweaks */
@media (max-width:420px){
  .banner{width:width: calc(100% + 50px)}
  .prize-left{min-width:90px}
  .create{width:70%}
  .add-cart{width:100%;max-width:100%}
}

/* titulos page: tabs and result list */
.tabs-row .tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:10px;
  background:#fff;
  color:var(--green-end);
  font-weight:700;
  border:1px solid var(--green-end);
  box-shadow:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tabs-row .tab:hover{transform:scale(1.03);box-shadow:0 6px 16px rgba(0,0,0,0.06)}
.tabs-row .tab:active{transform:scale(0.98)}
.tabs-row .tab.active{background:linear-gradient(180deg,var(--green-start),var(--green-end));color:#fff;border:none;box-shadow:0 8px 20px rgba(0,0,0,0.06)}
.tabs-row.fixed{position:fixed;left:0;right:0;top:64px;display:flex;justify-content:center;z-index:110;padding:8px 12px;background:transparent}
.tabs-row.fixed .tab{margin:0 6px}
.result-list{display:flex;flex-direction:column;gap:10px}
.result-row{display:flex;gap:12px;align-items:center;justify-content:space-evenly;background:#E1FFE6;padding:12px;border-radius:10px}
.result-row .r-date{color:var(--label);font-weight:700}
.result-row .r-info{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.result-row .r-info .label{color:var(--label)}
.result-row .r-info .num{color:var(--label);font-weight:700}

/* loading page styles (carregando.html) */
.loading-root{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--green-end)}
.loading-root .logo{width:240px;height:240px;object-fit:contain;margin-bottom:18px}
.loading-root .text{color:#fff;font-weight:600}

/* titulos expirados styles */
.exp-title{color:var(--green-end);font-weight:700;font-size:18px;margin-bottom:6px}
.exp-sub{color:var(--label);font-weight:700;margin-bottom:12px}
.prize-container{background:#fff;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,0.04);padding:8px;text-align:center}
.prize-strip{background:var(--green-end);color:#fff;font-weight:700;padding:8px;border-radius:6px;margin:-8px -8px 8px -8px}
.prize-value{color:var(--label);font-weight:600}

/* gray number grid */
.numbers-container{display:flex;flex-wrap:wrap;gap:8px;padding:8px 8px 8px;justify-content:center;align-items:stretch}
.num-grid.result{display:grid;grid-template-columns:repeat(auto-fit,minmax(36px,1fr));gap:6px}
.num-circle.gray{background:#D2D2D2;color:var(--label);width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.num-item{position:relative}
.num-item .num-cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ff3b30;font-weight:900;display:block;pointer-events:none}

/* parent grid for expired title number containers (two columns) */
.numbers-grid{display:grid}


/* hidden overlay for pages */
.hidden-overlay{display:none;position:absolute;inset:0;background:#fff;align-items:center;justify-content:center;z-index:200}
.hidden-overlay.show{display:flex}
.hidden-overlay .overlay-text{color:var(--label);font-weight:700}

/* sub topbar used in resultados page */
.sub-topbar{position:fixed;left:0;right:0;top:64px;background:#F3F3F3;display:flex;align-items:center;justify-content:center;z-index:110}
.sub-topbar{flex-direction:column;padding:8px 0}
.sub-topbar-inner{width:100%;text-align:center;color:#3F3F3F;font-weight:700}
.sub-topbar .date-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;max-width:720px;margin-top:8px}
.sub-topbar .date-col{background:#fff;padding:8px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,0.04);margin:2px}
.sub-topbar .date-field{display:flex;align-items:center;gap:8px}
.sub-topbar .date-field input[type=date]{flex:1;padding:8px;border-radius:8px;border:1px solid #eee}
.sub-topbar .date-field .date-icon{width:28px;height:28px}

/* results info rectangle */
.results-info { max-width: 70%
}
.results-info .info-rect {
    background: #E1FFE6;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between
}
.results-info .info-left{display:flex;align-items:center;gap:8px}
.results-info .info-icon{width:28px;height:28px}
.results-info .info-date{color:#000;font-weight:700}
.results-info .info-right{text-align:right}
.results-info .info-right .info-amount{color:var(--label);font-weight:700}
.results-info .info-right .info-net{color:var(--label)}

/* profile page components */
.card-component{background:#fff;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,0.04);overflow:hidden}
.card-component .card-title{background:linear-gradient(180deg,var(--green-start),var(--green-end));color:#fff;font-weight:700;padding:12px;text-align:center}
.card-component .card-body{padding:12px;display:flex;flex-direction:column;gap:10px}
.field-row{display:flex;align-items:center;gap:12px;align-items: center}
.field-row{flex-wrap:wrap}
.field-row label{min-width:110px;color:var(--label);font-weight:700}
.field-row input,.field-row select{flex:1 1 auto;min-width:0;padding:8px;border-radius:8px;border:1px solid #eee}
.inline-controls{display:flex;gap:12px;align-items:center}
.inline-controls.column{flex-direction:column;align-items:flex-start}
.inline-check{display:inline-flex;align-items:center;gap:6px}

.section-title{font-weight:700;color:var(--label);margin-bottom:6px}
.contact-group{display:flex;flex-direction:column;gap:8px}
.contact-item{display:flex;align-items:center;justify-content:space-between}
.contact-left{display:flex;align-items:center;gap:8px}
.contact-icon{width:20px;height:20px}
.contact-text{color:var(--label)}
.contact-add-row{display:flex;align-items:center;justify-content:space-between}
.center-text{text-align:center;color:var(--label);flex:1}
.icon-btn{background:transparent;border:0;padding:6px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn.small{padding:4px}
.icon-btn.lupa{background:var(--green-end);border-radius:8px;padding:6px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn.lupa img{width:18px;height:18px;display:block}
.icon-btn img{max-width:100%;height:auto;display:block}

/* responsive fixes: prevent field rows from overflowing on small screens */
@media (max-width:480px){
  .field-row{flex-direction:column;align-items:flex-start}
  .field-row label{min-width:0;margin-bottom:6px}
  .field-row input,.field-row select{width:100%}
  .contact-add-row .center-text{font-size:14px}
  .card-body{padding-left:12px;padding-right:12px}
  .icon-btn.lupa{padding:8px;border-radius:10px}
    .results-info {
        max-width: 100%
    }
}

/* address styles in profile */
.addr-row{display:flex;align-items:center;gap:12px}
.addr-left{flex:1;color:var(--label)}
.addr-mid{flex:1;color:var(--label)}
.addr-right{display:flex;align-items:center}
.cep-row .field-row input{flex:1}

/* date grid styles */
.date-grid .date-col{background:#fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,0.04)}
.date-label{color:var(--label);font-weight:700;margin-bottom:8px}
.date-field{display:flex;align-items:center;gap:8px}
.date-field input[type=date]{flex:1;padding:8px;border-radius:8px;border:1px solid #eee}
.date-field .date-icon{width:28px;height:28px}

/* mais page */
.nome-bar{background:linear-gradient(180deg,var(--green-start),var(--green-end));padding:12px 0}
.nome-title{text-align:center;color:#fff;font-weight:700}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.more-btn{background:transparent;border-radius:10px;padding:0;border:0;overflow:hidden;display:block;width:100%;aspect-ratio:460/296}
.more-btn img{width:100%;height:100%;object-fit:cover;display:block}


.section-sep {
    border: 0;
    height: 3px;
    background: #ababab;
    margin: 12px 0
}
.links-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.link-btn {
    background: #E1FFE6;
    border-radius: 10px;
    padding: 10px 10px;
    border: 0;
    box-shadow: 6px 6px 1px 1px rgba(0,0,0,0.1);
    color: var(--label);
    font-weight: 700;
    text-align: center
}