:root {
  --yellow: #FFCD00;
  --yellow-dark: #E6B800;
  --yellow-light: #FFF8E1;
  --yellow-glow: rgba(255,199,0,0.15);
  --black: #262626;
  --graphite: #262626;
  --graphite-mid: #2E2E2E;
  --graphite-light: #3A3A3A;
  --gray-bg: #0a0a0a;
  --gray-mid: #E8E8E8;
  --gray-line: #D4D4D4;
  --white: #FFFFFF;
  --text-body: #3D3D3D;
  --text-muted: #7A7A7A;
  --text-hint: #A0A0A0;
  --success: #16A34A;
  --success-bg: #ECFDF5;
  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --info: #2563EB;
  --info-bg: #EFF6FF;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-yellow: 0 4px 20px rgba(255,199,0,0.35);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--gray-bg);color:var(--text-body);min-height:100vh;-webkit-font-smoothing:antialiased;}

/* ── SCREENS ── */
.screen{display:none;}
.screen.active{display:flex;}
#screen-catalog.active,#screen-admin.active{display:block;}

/* ══════════════════════
   LOGIN
══════════════════════ */
/* LOGIN SCREEN — Branco/Amarelo Nayax + Glassmorphism */
#screen-login{min-height:100vh;align-items:center;justify-content:center;background: transparent;position:relative;padding:2rem;overflow:hidden;}
#screen-login::before{content:'';position:absolute;inset:0;background:transparent;pointer-events:none;}
#screen-login::after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#FFCD00,#E6B800,#FFCD00);pointer-events:none;}
.login-split{display:flex;min-height:100vh;width:100%;max-width:460px;margin:0 auto;position:relative;z-index:1;align-items:center;justify-content:center;}
.login-left-panel{display:none;}
.login-right-panel{width:100%;flex-shrink:0;}
.login-card{background:rgba(255,255,255,0.55);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:24px;border:1px solid rgba(255,255,255,0.85);padding:3rem 2.75rem;box-shadow:0 24px 64px rgba(180,140,0,0.18),0 4px 16px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.9);}
.login-card-logo{text-align:center;margin-bottom:2rem;}
.login-card-logo img{width:160px;height:auto;filter:none;}
.login-card-divider{width:100%;height:2px;background:linear-gradient(90deg,transparent,#FFCD00,transparent);margin:0 0 1.75rem;}
.login-brand{display:none;}
.login-brand-icon{display:none;}
.login-brand-name{display:none;}
.login-brand-sub{display:none;}
.login-divider{display:none;}
.form-eyebrow{display:none;}
.form-title{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;color:#262626;margin-bottom:6px;text-align:center;}
.form-desc{font-size:13px;color:#7A7A7A;line-height:1.6;margin-bottom:1.75rem;text-align:center;}
.field-label{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#7A7A7A;margin-bottom:8px;display:block;}
.field-wrap{position:relative;margin-bottom:1.25rem;}
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#A0A0A0;pointer-events:none;}
.field-input{width:100%;height:52px;background:rgba(255,255,255,0.7);border:1.5px solid rgba(255,199,0,0.35);border-radius:var(--radius);padding:0 16px 0 46px;font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;color:#262626;letter-spacing:3px;outline:none;transition:all 0.2s;backdrop-filter:blur(8px);}
.field-input::placeholder{color:#A0A0A0;letter-spacing:1px;font-weight:400;font-size:14px;}
.field-input:focus{border-color:#FFCD00;background:rgba(255,255,255,0.9);box-shadow:0 0 0 4px rgba(255,199,0,0.2);}
.login-error{background:rgba(220,38,38,0.08);border:1px solid rgba(220,38,38,0.3);border-left:3px solid #DC2626;border-radius:var(--radius);padding:12px 14px;font-size:13px;color:#DC2626;margin-bottom:1rem;display:none;align-items:center;gap:8px;}
.btn-primary{width:100%;height:52px;background:#FFCD00;color:#262626;border:none;border-radius:var(--radius);font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 20px rgba(255,199,0,0.45);}
.btn-primary:hover{background:#E6B800;box-shadow:0 6px 28px rgba(255,199,0,0.55);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.login-codes{display:none;}
.admin-link{text-align:center;margin-top:1.25rem;}
.admin-link a{font-size:12px;color:#A0A0A0;cursor:pointer;letter-spacing:0.5px;transition:color 0.15s;text-decoration:none;}
.admin-link a:hover{color:#7A7A7A;}

/* ══════════════════════
   ADMIN LOGIN SCREEN — mesmo estilo branco/amarelo
══════════════════════ */
#screen-admin-login{min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(145deg,#FFFFFF 0%,#FFF9E6 40%,#FFE680 70%,#FFCD00 100%);position:relative;padding:2rem;overflow:hidden;}
#screen-admin-login::before{content:'';position:absolute;inset:0;background:transparent;pointer-events:none;}
#screen-admin-login::after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#FFCD00,#E6B800,#FFCD00);pointer-events:none;}
.admin-login-card{width:100%;max-width:420px;background:rgba(255,255,255,0.55);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:24px;border:1px solid rgba(255,255,255,0.85);padding:2.75rem;position:relative;z-index:1;box-shadow:0 24px 64px rgba(180,140,0,0.18),0 4px 16px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.9);}
.admin-field-input{width:100%;height:48px;background:rgba(255,255,255,0.7);border:1.5px solid rgba(255,199,0,0.35);border-radius:var(--radius);padding:0 16px 0 46px;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;color:#262626;outline:none;transition:all 0.2s;backdrop-filter:blur(8px);}
.admin-field-input::placeholder{color:#A0A0A0;font-size:13px;}
.admin-field-input:focus{border-color:#FFCD00;background:rgba(255,255,255,0.9);box-shadow:0 0 0 4px rgba(255,199,0,0.2);}
.admin-login-back{font-size:12px;color:#A0A0A0;cursor:pointer;text-align:center;margin-top:1.25rem;transition:color 0.15s;}
.admin-login-back:hover{color:#7A7A7A;}
.role-pill{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;}
.role-pill.admin{background:rgba(255,199,0,0.15);color:#92600A;border:1px solid rgba(255,199,0,0.3);}
.role-pill.editor{background:var(--info-bg);color:var(--info);border:1px solid #BFDBFE;}
.role-pill.viewer{background:var(--gray-bg);color:var(--text-muted);border:1px solid var(--gray-line);}
.topbar-user{display:flex;align-items:center;gap:8px;}
.topbar-user-avatar{width:30px;height:30px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--black);flex-shrink:0;}
.topbar-user-name{font-size:13px;color:rgba(255,255,255,0.7);font-weight:500;}
.topbar-user-role{font-size:10px;color:rgba(255,255,255,0.35);letter-spacing:1px;text-transform:uppercase;}

/* ══════════════════════
   CATALOG LAYOUT
══════════════════════ */
.layout{display:flex;min-height:100vh;}
.sidebar{width:240px;background:var(--black);flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar-logo{padding:1.75rem 1.5rem 1.5rem;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;gap:12px;}
.sidebar-icon{width:34px;height:34px;background:var(--yellow);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sidebar-icon svg{width:18px;height:18px;}
.sidebar-wordmark{font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;color:var(--white);letter-spacing:3px;}
.sidebar-sub{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);margin-top:2px;}
.sidebar-client{padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,0.06);}
.sidebar-client-label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:4px;}
.sidebar-client-name{font-size:13px;font-weight:500;color:var(--white);line-height:1.4;}
.sidebar-client-code{display:inline-block;margin-top:6px;background:rgba(255,199,0,0.12);border:1px solid rgba(255,199,0,0.25);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600;color:var(--yellow);letter-spacing:1.5px;font-family:'Poppins',sans-serif;}
.sidebar-nav{flex:1;padding:0.5rem 0;}
.nav-section-label{padding:1rem 1.5rem 0.5rem;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.2);}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 1.5rem;font-size:13px;font-weight:500;color:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.15s;border-left:3px solid transparent;user-select:none;}
.nav-item svg{width:16px;height:16px;flex-shrink:0;}
.nav-item:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
.nav-item.active{color:var(--yellow);background:rgba(255,199,0,0.07);border-left-color:var(--yellow);}
.sidebar-footer{padding:1.25rem 1.5rem;border-top:1px solid rgba(255,255,255,0.06);}
.btn-logout{width:100%;height:38px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius);color:rgba(255,255,255,0.45);font-size:13px;font-weight:500;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s;}
.btn-logout:hover{background:rgba(255,255,255,0.09);color:rgba(255,255,255,0.75);}
.main-content{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{background:var(--white);border-bottom:1px solid var(--gray-mid);height:60px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;}
.topbar-title{font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:var(--black);}
.topbar-sep{width:1px;height:16px;background:var(--gray-line);}
.topbar-sub{font-size:13px;color:var(--text-muted);}

/* HERO */
.hero-banner{background:var(--graphite);padding:2rem;position:relative;overflow:hidden;}
.hero-banner::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,199,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,199,0,0.03) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;}
.hero-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;}
.hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--yellow);margin-bottom:6px;}
.hero-title{font-family:'Poppins',sans-serif;font-size:26px;font-weight:700;color:var(--white);letter-spacing:-0.5px;margin-bottom:4px;}
.hero-sub{font-size:13px;color:rgba(255,255,255,0.4);}
.hero-kpis{display:flex;gap:1px;background:rgba(255,255,255,0.06);border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,0.08);}
.kpi-block{padding:1rem 1.5rem;text-align:center;background:var(--graphite-mid);min-width:120px;}
.kpi-val{font-family:'Poppins',sans-serif;font-size:24px;font-weight:700;color:var(--yellow);line-height:1;margin-bottom:4px;}
.kpi-label{font-size:11px;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:1px;}

/* FILTERS */
.filter-bar{background:var(--white);border-bottom:1px solid var(--gray-mid);padding:0 2rem;display:flex;align-items:center;overflow-x:auto;}
.filter-tab{height:48px;padding:0 1.25rem;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;border:none;background:none;font-family:'Inter',sans-serif;border-bottom:2px solid transparent;white-space:nowrap;transition:all 0.15s;display:flex;align-items:center;gap:6px;}
.filter-tab:hover{color:var(--black);}
.filter-tab.active{color:var(--black);border-bottom-color:var(--yellow);font-weight:600;}
.filter-count{background:var(--gray-bg);border-radius:20px;padding:1px 7px;font-size:11px;font-weight:600;color:var(--text-muted);}
.filter-tab.active .filter-count{background:var(--yellow);color:var(--black);}

/* PRODUCTS */
.content-area{flex:1;padding:2rem;background:var(--gray-bg);}
.content-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;}
.section-label{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-hint);}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;}
.product-card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--gray-mid);box-shadow:var(--shadow-card);transition:all 0.2s;overflow:hidden;display:flex;flex-direction:column;}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--yellow);}
.product-img-area{height:160px;background:var(--gray-bg);display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--gray-mid);overflow:hidden;}
.product-img-area::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(26,26,26,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,26,0.04) 1px,transparent 1px);background-size:20px 20px;}
.product-img-area svg{position:relative;z-index:1;}
.badge-new{position:absolute;top:10px;left:10px;background:var(--black);color:var(--yellow);border-radius:6px;padding:4px 10px;font-size:10px;font-weight:700;font-family:'Poppins',sans-serif;letter-spacing:2px;text-transform:uppercase;z-index:2;}
.product-body{padding:1.25rem;flex:1;display:flex;flex-direction:column;}
.product-cat-tag{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-hint);margin-bottom:6px;}
.product-name{font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;color:var(--black);margin-bottom:6px;}
.product-desc{font-size:12.5px;color:var(--text-muted);line-height:1.55;flex:1;margin-bottom:1rem;}
.product-pricing{padding-top:1rem;border-top:1px solid var(--gray-mid);margin-bottom:0.875rem;}
.price-final{font-family:'Poppins',sans-serif;font-size:22px;font-weight:700;color:var(--black);line-height:1;}
.price-final small{font-size:12px;font-weight:400;color:var(--text-hint);font-family:'Inter',sans-serif;}
.btn-add{width:100%;height:42px;background:var(--black);color:var(--white);border:none;border-radius:var(--radius);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s;}
.btn-add:hover{background:var(--yellow);color:var(--black);}
.qty-stepper{width:100%;height:42px;display:flex;align-items:center;border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--yellow);}
.qty-btn{width:44px;height:100%;background:var(--yellow);color:var(--black);border:none;font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;flex-shrink:0;line-height:1;}
.qty-btn:hover{background:var(--yellow-dark);}
.qty-btn.minus{border-right:1.5px solid rgba(255,199,0,0.4);}
.qty-btn.plus{border-left:1.5px solid rgba(255,199,0,0.4);}
.qty-display{flex:1;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;color:var(--black);background:#FFF7CC;gap:6px;}
.qty-display small{font-size:10px;font-weight:400;color:var(--text-muted);font-family:'Inter',sans-serif;}

/* CART DOCK */
.cart-dock{position:fixed;bottom:0;left:240px;right:0;background:var(--black);border-top:2px solid var(--yellow);padding:1rem 2rem;display:none;align-items:center;justify-content:space-between;gap:1.5rem;z-index:100;transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}
.cart-dock.visible{display:flex;transform:translateY(0);}
.cart-dock-left{display:flex;align-items:center;gap:1rem;}
.cart-icon-wrap{width:42px;height:42px;background:var(--yellow);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;position:relative;}
.cart-icon-wrap svg{width:20px;height:20px;color:var(--black);}
.cart-badge{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:var(--white);border-radius:50%;font-size:10px;font-weight:700;color:var(--black);display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;}
.cart-dock-label{font-size:11px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:2px;}
.cart-dock-total{font-family:'Poppins',sans-serif;font-size:22px;font-weight:700;color:var(--yellow);}
.cart-items-preview{flex:1;display:flex;gap:8px;overflow:hidden;}
.cart-item-pill{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:4px 10px;font-size:12px;color:rgba(255,255,255,0.6);white-space:nowrap;}
.btn-checkout{height:44px;padding:0 2rem;background:var(--yellow);color:var(--black);border:none;border-radius:var(--radius);font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all 0.2s;white-space:nowrap;}
.btn-checkout:hover{background:var(--yellow-dark);box-shadow:var(--shadow-yellow);}

/* ══════════════════════
   MODALS
══════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:2rem;overflow-y:auto;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--white);border-radius:var(--radius-lg);width:100%;max-width:600px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.4);margin:auto;}
.modal-header{background:var(--black);padding:1.5rem 2rem;display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--yellow);}
.modal-header-icon{width:40px;height:40px;background:var(--yellow);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.modal-header-icon svg{width:20px;height:20px;color:var(--black);}
.modal-header-title{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;color:var(--white);}
.modal-body{padding:1.75rem 2rem;}
.modal-section-title{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-hint);margin-bottom:12px;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--gray-mid);}
.modal-section-title:first-child{margin-top:0;padding-top:0;border-top:none;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-grid.cols-1{grid-template-columns:1fr;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
.form-group input,.form-group select{height:42px;border:1.5px solid var(--gray-line);border-radius:var(--radius);padding:0 12px;font-family:'Inter',sans-serif;font-size:14px;color:var(--text-body);background:var(--white);outline:none;transition:all 0.2s;}
.form-group input:focus,.form-group select:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,199,0,0.12);}
.order-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;color:var(--text-body);border-bottom:1px solid var(--gray-mid);}
.order-row:last-child{border-bottom:none;}
.order-row.total{font-weight:700;color:var(--black);font-size:15px;padding-top:10px;margin-top:4px;border-top:2px solid var(--gray-line);border-bottom:none;}
.order-row.total span:last-child{color:var(--yellow-dark);font-family:'Poppins',sans-serif;}
.modal-order-summary{background:var(--gray-bg);border:1px solid var(--gray-mid);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1rem;}
.modal-actions{display:flex;gap:10px;margin-top:1.5rem;}
.btn-ghost{flex:1;height:44px;background:transparent;border:1.5px solid var(--gray-line);border-radius:var(--radius);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all 0.2s;}
.btn-ghost:hover{border-color:var(--black);color:var(--black);}
.btn-confirm{flex:2;height:44px;background:var(--yellow);border:none;border-radius:var(--radius);font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;color:var(--black);cursor:pointer;transition:all 0.2s;}
.btn-confirm:hover{background:var(--yellow-dark);box-shadow:var(--shadow-yellow);}

/* ══════════════════════
   ADMIN PANEL
══════════════════════ */
#screen-admin{min-height:100vh;background:var(--gray-bg);}
.admin-topbar{background:var(--black);height:60px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--yellow);}
.admin-topbar-left{display:flex;align-items:center;gap:14px;}
.admin-logo{font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;color:var(--white);letter-spacing:4px;}
.admin-logo span{color:var(--yellow);}
.admin-badge{background:rgba(255,199,0,0.15);border:1px solid rgba(255,199,0,0.3);border-radius:6px;padding:3px 10px;font-size:11px;font-weight:600;color:var(--yellow);letter-spacing:1px;text-transform:uppercase;}
.admin-layout{display:flex;min-height:calc(100vh - 60px);}
.admin-sidebar{width:220px;background:var(--graphite);flex-shrink:0;padding:1.5rem 0;}
.admin-nav-item{display:flex;align-items:center;gap:10px;padding:10px 1.5rem;font-size:13px;font-weight:500;color:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.15s;border-left:3px solid transparent;}
.admin-nav-item svg{width:16px;height:16px;flex-shrink:0;}
.admin-nav-item:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
.admin-nav-item.active{color:var(--yellow);background:rgba(255,199,0,0.07);border-left-color:var(--yellow);}
.admin-main{flex:1;padding:2rem;min-width:0;}
.admin-section{display:none!important;}
.admin-section.active{display:block!important;}
.admin-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;}
.admin-page-title{font-family:'Poppins',sans-serif;font-size:20px;font-weight:700;color:var(--black);}
.admin-page-sub{font-size:13px;color:var(--text-muted);margin-top:2px;}
.btn-sm{height:36px;padding:0 16px;border:none;border-radius:var(--radius);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s;}
.btn-sm.yellow{background:var(--yellow);color:var(--black);}
.btn-sm.yellow:hover{background:var(--yellow-dark);}
.btn-sm.dark{background:var(--black);color:var(--white);}
.btn-sm.dark:hover{background:var(--graphite);}
.btn-sm.ghost{background:none;border:1.5px solid var(--gray-line);color:var(--text-muted);}
.btn-sm.ghost:hover{border-color:var(--black);color:var(--black);}
.btn-sm.danger{background:var(--danger-bg);color:var(--danger);border:1px solid #FECACA;}
.btn-sm.danger:hover{background:#FEE2E2;}

/* ADMIN STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:2rem;}
.stat-card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--gray-mid);padding:1.25rem;box-shadow:var(--shadow-card);}
.stat-card-label{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-hint);margin-bottom:8px;}
.stat-card-val{font-family:'Poppins',sans-serif;font-size:28px;font-weight:700;color:var(--black);}
.stat-card-val.yellow{color:var(--yellow-dark);}
.stat-card-val.green{color:var(--success);}
.stat-card-sub{font-size:12px;color:var(--text-muted);margin-top:4px;}

/* ADMIN TABLE */
.table-wrap{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--gray-mid);overflow:hidden;box-shadow:var(--shadow-card);}
.table-header{padding:1rem 1.5rem;border-bottom:1px solid var(--gray-mid);display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.table-search{height:36px;border:1.5px solid var(--gray-line);border-radius:var(--radius);padding:0 12px;font-family:'Inter',sans-serif;font-size:13px;color:var(--text-body);outline:none;width:220px;transition:all 0.2s;}
.table-search:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,199,0,0.1);}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--gray-bg);}
th{padding:10px 1.5rem;text-align:left;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-hint);border-bottom:1px solid var(--gray-mid);}
td{padding:12px 1.5rem;font-size:13px;color:var(--text-body);border-bottom:1px solid var(--gray-mid);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,199,0,0.03);}
.td-actions{display:flex;gap:6px;}
.status-pill{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;}
.status-pill.active{background:var(--success-bg);color:var(--success);}
.status-pill.inactive{background:var(--gray-bg);color:var(--text-muted);}
.status-pill.pending{background:#FFF7E0;color:#92600A;}
.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ADMIN FORM */
.admin-form-card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--gray-mid);padding:1.75rem;box-shadow:var(--shadow-card);margin-bottom:1.5rem;}
.admin-form-title{font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:var(--black);margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--gray-mid);}
.admin-field-label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;display:block;}
.admin-input{width:100%;height:42px;border:1.5px solid var(--gray-line);border-radius:var(--radius);padding:0 12px;font-family:'Inter',sans-serif;font-size:14px;color:var(--text-body);background:var(--white);outline:none;transition:all 0.2s;}
.admin-input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,199,0,0.1);}
.admin-textarea{width:100%;min-height:80px;border:1.5px solid var(--gray-line);border-radius:var(--radius);padding:10px 12px;font-family:'Inter',sans-serif;font-size:14px;color:var(--text-body);resize:vertical;outline:none;transition:all 0.2s;}
.admin-textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,199,0,0.1);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.field-row.cols-3{grid-template-columns:1fr 1fr 1fr;}
.field-row.cols-1{grid-template-columns:1fr;}
.field-row.mb-0{margin-bottom:0;}

/* Product visibility toggles */
.prod-toggle-list{display:flex;flex-direction:column;gap:8px;}
.prod-toggle-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid var(--gray-mid);border-radius:var(--radius);background:var(--gray-bg);}
.prod-toggle-name{font-size:13px;font-weight:500;color:var(--text-body);}
.prod-toggle-cat{font-size:11px;color:var(--text-muted);}
.toggle-switch{position:relative;width:40px;height:22px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--gray-line);border-radius:22px;transition:0.2s;}
.toggle-slider:before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:var(--white);border-radius:50%;transition:0.2s;}
.toggle-switch input:checked + .toggle-slider{background:var(--yellow);}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(18px);}

/* UPLOAD DE FOTO */
.img-upload-area{border:2px dashed var(--gray-line);border-radius:var(--radius);padding:1.25rem;text-align:center;cursor:pointer;transition:all 0.2s;background:var(--gray-bg);position:relative;}
.img-upload-area:hover{border-color:var(--yellow);background:#FFFBEB;}
.img-upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.img-upload-preview{width:100%;height:160px;object-fit:contain;border-radius:6px;display:none;background:#fff;padding:4px;}
.img-upload-label{font-size:13px;color:var(--text-muted);}
.img-upload-hint{font-size:11px;color:var(--text-hint);margin-top:4px;}

/* Price override input */
.price-override-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--gray-mid);border-radius:var(--radius);background:var(--gray-bg);margin-bottom:8px;}
.price-override-name{flex:1;font-size:13px;font-weight:500;color:var(--text-body);}
.price-override-input{width:130px;height:34px;border:1.5px solid var(--gray-line);border-radius:6px;padding:0 10px;font-family:'Inter',sans-serif;font-size:13px;color:var(--text-body);outline:none;transition:all 0.2s;}
.price-override-input:focus{border-color:var(--yellow);}

/* Sales table */
.sale-product-list{font-size:12px;color:var(--text-muted);}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp 0.35s ease both;}
.product-card{animation:fadeUp 0.3s ease both;}
.product-card:nth-child(1){animation-delay:0s;}
.product-card:nth-child(2){animation-delay:0.04s;}
.product-card:nth-child(3){animation-delay:0.08s;}
.product-card:nth-child(4){animation-delay:0.12s;}
.product-card:nth-child(5){animation-delay:0.16s;}
.product-card:nth-child(6){animation-delay:0.2s;}
.product-card:nth-child(7){animation-delay:0.24s;}
.product-card:nth-child(8){animation-delay:0.28s;}

/* TOAST */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--black);color:var(--white);padding:12px 20px;border-radius:var(--radius);font-size:13px;font-weight:500;border-left:3px solid var(--yellow);box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:999;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}

@media(max-width:900px){
  .sidebar,.admin-sidebar{display:none;}
  .cart-dock{left:0;}
  
  .admin-badge{display:none!important;}
  #admin-topnav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  #admin-topnav::-webkit-scrollbar{display:none;}
  .admin-nav-item{white-space:nowrap;font-size:12px!important;padding:8px 12px!important;}
  .admin-topbar{padding:8px 12px!important;}
  .admin-section{padding:14px!important;}
  .topbar-user-name{font-size:12px!important;}
  .topbar-user-role{display:none!important;}
  .topbar-user-avatar{width:28px!important;height:28px!important;}
  #profile-dropdown{right:-10px!important;min-width:160px!important;}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:500px;}
  .td-actions{display:flex;gap:4px;flex-wrap:wrap;}
  .admin-page-header{flex-direction:column;align-items:flex-start!important;gap:10px!important;}
  .btn-sm{font-size:11px!important;padding:5px 8px!important;}
  .main-content{padding-bottom:0!important;}
  .catalog-main,.catalog-content{padding:10px!important;}
  .cart-dock{padding:10px 14px!important;}
}
@media(max-width:600px){
  .hero-kpis{flex-direction:column;}
  .content-area{padding:1rem;}
  .form-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  
  .product-card{border-radius:10px!important;}
  .product-body{padding:8px 10px!important;}
  .product-name{font-size:12px!important;}
  .btn-add{font-size:11px!important;padding:8px!important;}
  .kpi-cards,.dash-kpis,.hero-kpis{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .stat-card,.kpi-card,.admin-stat-card{padding:12px!important;}
  .stat-card-val{font-size:18px!important;}
  .checkout-modal-inner,.modal{padding:16px!important;}
  .nayax-steps{gap:4px!important;}
  .nayax-step-label{display:none!important;}
  .lang-selector{display:none!important;}
}


/* ══════════════════════════════ */


#screen-login::before,#screen-login::after,#screen-admin-login::before,#screen-admin-login::after{display:none!important;opacity:0!important;}

#screen-login::before,#screen-login::after,#screen-admin-login::before{display:none!important;}

:root{--gold:#FFCD00;--gold-glow:rgba(255,199,0,.15);--bg:#0a0a0a;--card:#141414;--sidebar:#111111;--border:#252525;--text:#e6edf3;--muted:#8b949e;}
html,body{overflow:hidden!important;}
.screen{height:100vh!important;width:100%!important;box-sizing:border-box!important;}
.screen.active{overflow-y:auto!important;}
#toast{position:fixed!important;bottom:24px!important;left:50%!important;transform:translateX(-50%)!important;z-index:9999!important;pointer-events:none!important;}
/* LOGIN CLIENTE - forca background escuro */
#screen-login.active{background: transparent !important;}
#screen-login .login-card{background: #ffffff !important;backdrop-filter:blur(24px)!important;border:1px solid rgba(255,199,0,.18)!important;border-radius:20px!important;box-shadow:0 0 80px rgba(255,199,0,.05),0 24px 60px rgba(0,0,0,.8)!important;padding:36px!important;width:100%!important;max-width:420px!important;}
#screen-login .login-card h1,#screen-login .login-card h2,#screen-login .login-card .login-title{color:var(--muted)!important;font-size:15px!important;font-weight:500!important;}
#screen-login .login-card p{color:var(--muted)!important;}
#screen-login .login-card label{color:var(--muted)!important;font-size:10px!important;font-weight:700!important;letter-spacing:.8px!important;text-transform:uppercase!important;}
#screen-login .login-card input{background:#0c0c0c!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:10px!important;padding:12px 14px!important;}
#screen-login .login-card input:focus{border-color:var(--gold)!important;outline:none!important;box-shadow:0 0 0 3px var(--gold-glow)!important;}
#screen-login .btn-entrar,#screen-login button[type=submit]{background:var(--gold)!important;color:#000!important;font-weight:800!important;border:none!important;border-radius:10px!important;padding:13px!important;width:100%!important;cursor:pointer!important;}
#screen-login a{color:var(--gold)!important;}
/* LOGIN ADMIN */
#screen-admin-login.active{background: transparent !important;}
#screen-admin-login .login-card{background: #ffffff !important;border:1px solid rgba(255,199,0,.18)!important;border-radius:20px!important;box-shadow:0 0 80px rgba(255,199,0,.05),0 24px 60px rgba(0,0,0,.8)!important;padding:36px!important;max-width:420px!important;width:100%!important;}
#screen-admin-login .login-card h1,#screen-admin-login .login-card h2{color:var(--text)!important;font-size:22px!important;font-weight:700!important;}
#screen-admin-login .login-card p{color:var(--muted)!important;}
#screen-admin-login .login-card label{color:var(--muted)!important;font-size:10px!important;font-weight:700!important;letter-spacing:.8px!important;text-transform:uppercase!important;}
#screen-admin-login .login-card input{background:#0c0c0c!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:10px!important;padding:12px 14px!important;}
#screen-admin-login .login-card input:focus{border-color:var(--gold)!important;outline:none!important;}
#screen-admin-login .login-card button{background:var(--gold)!important;color:#000!important;font-weight:800!important;border:none!important;border-radius:10px!important;padding:13px!important;width:100%!important;cursor:pointer!important;}
#screen-admin-login a{color:var(--gold)!important;}
/* SIDEBAR */
.sidebar,#sidebar,.catalog-sidebar{background:var(--sidebar)!important;border-right:1px solid var(--border)!important;}
.nav-item{color:var(--muted)!important;}.nav-item.active{color:var(--gold)!important;}
.badge-premium{background:var(--gold)!important;color:#000!important;font-weight:700!important;}
/* CATALOGO */
#screen-catalog.active{background:#0c0c0c!important;}
.product-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:14px!important;transition:border-color .2s,box-shadow .2s,transform .15s!important;}
.product-card:hover{border-color:var(--gold)!important;box-shadow:0 0 20px rgba(255,199,0,.1)!important;transform:translateY(-2px)!important;}
.badge-new,.tag-novidade,.badge-novidade{background:var(--gold)!important;color:#000!important;font-weight:700!important;border-radius:5px!important;padding:3px 10px!important;font-size:11px!important;}
.btn-cart,.btn-add-cart{background:var(--gold)!important;color:#000!important;font-weight:700!important;border:none!important;border-radius:10px!important;cursor:pointer!important;}
/* ADMIN */
#screen-admin.active{background:var(--bg)!important;color:var(--text)!important;}
.admin-topbar,#admin-topbar{background:var(--card)!important;border-bottom:1px solid var(--border)!important;}
.admin-topbar *{color:var(--text)!important;}
.badge-admin{background:var(--gold)!important;color:#000!important;font-weight:700!important;border-radius:6px!important;padding:3px 12px!important;}
.admin-nav,.admin-nav-bar{background:var(--card)!important;border-bottom:1px solid var(--border)!important;display:flex!important;gap:4px!important;padding:0 12px!important;}
.admin-nav-item{color:var(--muted)!important;border-radius:8px!important;padding:8px 16px!important;font-size:13px!important;font-weight:500!important;cursor:pointer!important;border:none!important;background:transparent!important;}
.admin-nav-item:hover{background:rgba(255,199,0,.08)!important;color:var(--gold)!important;}
.admin-nav-item.active{background:var(--gold)!important;color:#000!important;font-weight:700!important;}
.admin-section{background:var(--bg)!important;color:var(--text)!important;padding:24px!important;}
.admin-card,.panel,.card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:14px!important;color:var(--text)!important;padding:20px!important;}
.admin-stat-card,.kpi-card,.stat-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:14px!important;color:var(--text)!important;padding:20px!important;}
table{background:var(--card)!important;border-collapse:collapse!important;width:100%!important;}
table th{background:#1a1a1a!important;color:var(--muted)!important;border-bottom:1px solid var(--border)!important;padding:12px 14px!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.5px!important;}
table td{border-bottom:1px solid #1a1a1a!important;color:var(--text)!important;padding:12px 14px!important;}
table tr:hover td{background:rgba(255,199,0,.03)!important;}
.chart-bar{background:var(--gold)!important;border-radius:4px 4px 0 0!important;}
.trend-up{color:#3fb950!important;}
#adm-design{background:var(--bg)!important;color:var(--text)!important;}
.design-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:14px!important;padding:20px!important;margin-bottom:16px!important;}
select[id*="lang"]{background:var(--card)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:6px 10px!important;}
@media(max-width:640px){html,body{overflow:auto!important;}.screen{height:auto!important;min-height:100vh!important;}#screen-login .login-card{padding:24px!important;margin:16px!important;}.product-grid,.catalog-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;padding:10px!important;}.mobile-tab-bar{background:var(--card)!important;border-top:1px solid var(--border)!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;display:flex!important;justify-content:space-around!important;padding:10px 0!important;z-index:100!important;}}

#screen-login.active,#screen-login.screen.active{background: transparent !important;}
#screen-admin-login.active,#screen-admin-login.screen.active{background:transparent!important;}


/* ══════════════════════════════ */

#screen-admin { zoom: 1; }
body:has(#screen-admin.active) { background: #f5f5f3; }
/* ══ NAYAX v54 ══ */

/* ── LOGIN ── */
.login-split{width:100%!important;max-width:100%!important;margin-left:0!important;flex-direction:column!important;justify-content:center!important;align-items:center!important}
.login-left-panel{display:none!important}
.login-right-panel{display:flex!important;justify-content:center!important;align-items:center!important;width:auto!important}
#screen-login .login-card{background:rgba(255,255,255,0.55)!important;border:1px solid rgba(255,255,255,0.85)!important;border-radius:24px!important;width:420px!important;padding:36px!important;box-sizing:border-box!important}
#screen-login .login-card .form-title{color:#262626!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:2px!important;text-align:center!important}
#screen-login .login-card .form-desc{display:none!important}
#screen-login .login-card .field-label{display:none!important}
#screen-login .login-card .field-wrap{margin-top:24px!important}
#screen-login .login-card input,#screen-login .field-input{background:rgba(255,255,255,0.7)!important;border:1px solid rgba(255,199,0,0.35)!important;color:#262626!important;text-align:center!important}
#screen-login .field-input::placeholder{color:rgba(38,38,38,0.4)!important}
#screen-login .login-card .btn-primary,#screen-admin-login .btn-primary{color:#262626!important}
#screen-login .login-card a,#screen-login .admin-link{color:#262626!important}
.login-card-divider{background-image:none!important;background-color:rgb(232,232,232)!important}
.login-card-logo img,.admin-login-card .login-card-logo img{width:180px!important;height:auto!important}
.admin-login-card{width:420px!important;padding:36px!important}
.admin-login-card,.admin-login-card *{color:#262626!important}
.admin-login-back{color:rgba(38,38,38,0.6)!important}
#screen-login::after,#screen-admin-login::after{display:none!important}
#screen-login,#screen-admin-login{overflow:hidden!important}
#toast{display:none!important}

/* ── CATÁLOGO ── */
#screen-catalog{background:#F7F6F2!important}
.main-content{background:#F7F6F2!important}
.content-area{background:#F7F6F2!important;padding:16px!important}
.topbar{background:#fff!important;border-bottom:0.5px solid #E8E6E0!important}
.topbar-title,.topbar *{color:#111!important}
.hero-banner{display:none!important}
.filter-bar{display:none!important}

/* Cards */
.product-card{background:#fff!important;border:0.5px solid #E8E6E0!important;border-radius:10px!important}
.product-card:hover{border-color:#ccc!important}
.product-img-area{background:#F3F1EA!important}
.product-cat-tag{color:#FFCD00!important;font-size:9px!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:700!important}
.product-name{color:#111!important;font-weight:500!important}
.product-desc{color:#888!important}
.product-pricing{border-top:0.5px solid #F0EEE8!important}
.price-final{color:#111!important;font-weight:500!important}
.btn-add{background:#111!important;color:#FFCD00!important;border-radius:6px!important;font-weight:700!important;font-size:11px!important;border:none!important}
.btn-add:hover{background:#222!important}
.product-card .badge-new,.new-badge{background:#111!important;color:#FFCD00!important}

/* Sidebar */
.sidebar{background:#111!important}

/* Logo: texto NAYAX estilizado — sem PNG */
.sidebar-logo{display:flex!important;align-items:center!important;padding:16px!important;border-bottom:0.5px solid rgba(255,255,255,0.07)!important;min-height:auto!important}
.sidebar-logo::after{display:none!important;content:none!important}
.sidebar-icon{display:none!important}
.sidebar-wordmark{display:block!important;font-size:14px!important;font-weight:700!important;color:#FFCD00!important;letter-spacing:3px!important;text-transform:uppercase!important;padding:0!important}
.sidebar-sub{display:none!important}

/* Oculta a div extra dentro da logo */
.sidebar-logo > div:not(.sidebar-wordmark){display:none!important}

/* Nav */
.nav-section-label{color:rgba(255,255,255,0.22)!important;font-size:9px!important;letter-spacing:.1em!important}
.nav-item{color:rgba(255,255,255,0.48)!important;border-radius:0!important;border-left:2px solid transparent!important;font-size:12px!important}
.nav-item.active{background:rgba(255,205,0,0.08)!important;color:#FFCD00!important;border-left-color:#FFCD00!important}
.nav-item:hover{background:rgba(255,255,255,0.04)!important}

/* Oculta seção PEDIDO nativa e item Ver pedido */
.nav-section-label[data-i18n]{color:rgba(255,255,255,0.22)!important}
[data-i18n="cat.order"]{display:none!important}
.nav-item[onclick="showCheckoutModal()"]{display:none!important}

/* Cart dock — visível quando tem itens (classe .visible) */
.cart-dock{display:none}
.cart-dock.visible{display:flex!important;transform:translateY(0)!important}
.nav-item[onclick*="showCheckoutModal"]{display:none!important}

/* Widget pedido sidebar */
.nayax-order-widget{margin:8px 12px!important;background:rgba(255,205,0,0.06)!important;border:0.5px solid rgba(255,205,0,0.2)!important;border-radius:8px!important;padding:10px 12px!important}
.nayax-order-top{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:5px!important}
.nayax-order-lbl{font-size:9px!important;color:rgba(255,255,255,0.35)!important;text-transform:uppercase!important;letter-spacing:.08em!important}
.nayax-order-badge{background:#FFCD00!important;color:#111!important;font-size:9px!important;font-weight:700!important;border-radius:10px!important;padding:1px 7px!important}
.nayax-order-total{font-size:15px!important;font-weight:500!important;color:#fff!important}
.nayax-order-sub{font-size:10px!important;color:rgba(255,255,255,0.3)!important;margin-top:1px!important;margin-bottom:8px!important;min-height:14px!important}
.nayax-order-btn{width:100%!important;background:transparent!important;color:#FFCD00!important;border:0.5px solid rgba(255,205,0,0.45)!important;border-radius:5px!important;font-size:11px!important;font-weight:500!important;padding:7px 10px!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.nayax-order-btn:hover:not(:disabled){background:rgba(255,205,0,0.08)!important;border-color:rgba(255,205,0,0.7)!important}
.nayax-order-btn:disabled{cursor:not-allowed!important;opacity:0.4!important}
.nayax-order-btn-arr{width:20px!important;height:20px!important;background:#FFCD00!important;border-radius:3px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}

/* Mobile */
@media(max-width:900px){
  .sidebar,.admin-sidebar{display:none!important}
  .cart-dock{display:flex!important;left:0!important;bottom:0!important}
  
  .main-content{padding-bottom:80px!important}
  #admin-topnav{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;flex-wrap:nowrap!important;}
  #admin-topnav::-webkit-scrollbar{display:none!important}
  .admin-nav-item{white-space:nowrap!important;flex-shrink:0!important;font-size:12px!important;padding:8px 10px!important;}
  .admin-badge{display:none!important}
  .admin-section{padding:14px!important}
  .admin-page-header{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
  .table-wrap,.admin-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  table{min-width:520px!important}
  #profile-dropdown{right:0!important;min-width:160px!important}
}
@media(max-width:640px){
  html,body{overflow:auto!important}
  .screen{height:auto!important;min-height:100vh!important}
  #screen-login,#screen-admin-login{overflow:auto!important;padding:20px 0}
  #screen-login .login-card,#screen-admin-login .admin-login-card{width:calc(100% - 32px)!important;margin:0 16px!important;padding:24px!important;border-radius:18px!important}
  .modal-overlay.open{align-items:flex-end!important;padding:0!important}
  .modal-box,.modal{border-radius:18px 18px 0 0!important;width:100%!important;max-height:90vh!important;overflow-y:auto!important;margin:0!important}
  .modal-actions,.modal-footer{padding:12px 20px 20px!important;flex-direction:column-reverse!important;gap:8px!important}
  .modal-actions button,.modal-footer button{width:100%!important;padding:12px!important;border-radius:10px!important}
  .nayax-step-label{display:none!important}
  .lang-selector{display:none!important}
  .kpi-cards,.dash-kpis,.hero-kpis,.kpis-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .stat-card,.kpi-card{padding:12px!important}
  .stat-card-val{font-size:18px!important}
  .topbar-user-role{display:none!important}
  .td-actions{flex-wrap:wrap!important;gap:4px!important}
}
#nav-design-injected,#adm-design{display:none!important}

/* ══ ADMIN v58 ══ */

/* Layout geral */
#screen-admin.active{display:flex!important;flex-direction:column!important;height:100vh!important;overflow:hidden!important;background:#f5f5f3!important}

/* Topbar escura horizontal */
#screen-admin .admin-topbar{background:#111!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 24px!important;height:54px!important;flex-shrink:0!important;border-bottom:0.5px solid rgba(255,255,255,0.07)!important}

/* Logo */
#screen-admin .admin-logo{font-size:12px!important;font-weight:700!important;letter-spacing:3px!important;color:#FFCD00!important}
#screen-admin .admin-logo span{color:#FFCD00!important}

/* Badge PAINEL ADMINISTRATIVO */
#screen-admin .admin-badge{background:rgba(255,205,0,0.12)!important;color:#FFCD00!important;font-size:10px!important;font-weight:600!important;letter-spacing:1px!important;padding:4px 10px!important;border-radius:6px!important;margin-left:12px!important;border:1px solid rgba(255,205,0,0.25)!important}

/* Nav horizontal */
#admin-topnav{display:flex!important;align-items:center!important;gap:2px!important;flex:1!important;justify-content:center!important}
#screen-admin .admin-nav-item{padding:6px 16px!important;border-radius:6px!important;font-size:11px!important;cursor:pointer!important;border:1px solid transparent!important;white-space:nowrap!important;color:rgba(255,255,255,0.45)!important;background:transparent!important;display:inline-flex!important;align-items:center!important;transition:all 0.15s!important}
#screen-admin .admin-nav-item:hover{background:rgba(255,255,255,0.07)!important;color:rgba(255,255,255,0.85)!important}
#screen-admin .admin-nav-item.active{background:rgba(255,205,0,0.12)!important;color:#FFCD00!important;border:1px solid rgba(255,205,0,0.25)!important;font-weight:500!important}
#screen-admin .admin-nav-item svg{display:none!important}

/* Topbar direito */
#screen-admin .admin-topbar-right{display:flex!important;align-items:center!important;gap:10px!important}
#screen-admin .topbar-user{display:flex!important;align-items:center!important;gap:8px!important}
#screen-admin .topbar-user-avatar{width:28px!important;height:28px!important;border-radius:50%!important;background:#FFCD00!important;color:#111!important;font-size:10px!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important}
#screen-admin .topbar-user-name{font-size:11px!important;color:rgba(255,255,255,0.85)!important;font-weight:500!important}
#screen-admin .topbar-user-role{font-size:9px!important;color:rgba(255,255,255,0.4)!important}
#screen-admin .lang-selector{background:#262626!important;border:0.5px solid rgba(255,255,255,0.15)!important;color:rgba(255,255,255,0.8)!important;border-radius:6px!important;padding:4px 8px!important;font-size:10px!important;cursor:pointer!important}
#screen-admin .lang-selector option{background:#262626!important;color:#ffffff!important}
#screen-admin .btn-sm.dark{font-size:10px!important;color:rgba(255,255,255,0.5)!important;border:0.5px solid rgba(255,255,255,0.15)!important;border-radius:6px!important;padding:5px 10px!important;background:transparent!important;cursor:pointer!important}
#screen-admin .btn-sm.dark:hover{background:rgba(255,255,255,0.1)!important;color:#fff!important}

/* Sem sidebar */
#screen-admin .admin-layout{display:none!important}

/* Main content */
#screen-admin .admin-main{flex:1!important;overflow-y:auto!important;padding:20px 24px!important;background:#f5f5f3!important;display:block!important}

/* Seções */
#screen-admin.active{
  display:flex!important;
  flex-direction:column!important;
  height:100vh!important;
  overflow:hidden!important;
  background:#f5f5f3!important;
}

/* fix: admin-main layout */
#screen-admin .admin-main{flex:1!important;min-height:0!important;}
#screen-admin .admin-section.active{
  display:block!important;
  padding:20px 24px!important;
  background:#f5f5f3!important;
  width:100%!important;
  box-sizing:border-box!important;
}
#screen-admin.active{
  display:flex!important;
  flex-direction:column!important;
  height:100vh!important;
  overflow:hidden!important;
  background:#f5f5f3!important;
}

/* ══ ADMIN v60 color reset — sobrescreve dark theme do app ══ */

/* KPI cards */
#screen-admin .stat-card{background:#fff!important;border:0.5px solid #e5e5e5!important;box-shadow:none!important;border-radius:10px!important}
#screen-admin .stat-card-label,#screen-admin .stat-label{color:#888!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:0.8px!important}
#screen-admin .stat-card-val,#screen-admin .stat-value{color:#111!important;font-size:24px!important;font-weight:500!important}
#screen-admin .stat-card-val.yellow,#screen-admin .stat-value.yellow{color:#FFCD00!important}
#screen-admin .stat-card-val.green,#screen-admin .stat-value.green{color:#3B6D11!important}
#screen-admin .stat-card-sub,#screen-admin .stat-sub{color:#888!important;font-size:11px!important}
#screen-admin .stats-grid{background:transparent!important}

/* Chart cards */
#screen-admin .chart-card{background:#fff!important;border:0.5px solid #e5e5e5!important;border-radius:10px!important;padding:16px!important}
#screen-admin .chart-title{color:#111!important;font-size:12px!important;font-weight:500!important}

/* Tabelas */
#screen-admin table{background:#fff!important;border-radius:10px!important;overflow:hidden!important;border:0.5px solid #e5e5e5!important}
#screen-admin table th{background:#f9f9f9!important;color:#666!important;font-size:10px!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:0.5px!important;padding:9px 12px!important;border-bottom:0.5px solid #eee!important}
#screen-admin table td{background:#fff!important;color:#111!important;font-size:12px!important;padding:9px 12px!important;border-bottom:0.5px solid #f5f5f5!important}
#screen-admin table tr:last-child td{border-bottom:none!important}
#screen-admin table tr:hover td{background:#fafafa!important}
#screen-admin .table-wrap{background:transparent!important;border:none!important;box-shadow:none!important}

/* Section headers e texto */
#screen-admin .admin-page-header{background:transparent!important}
#screen-admin .admin-page-title{color:#111!important;font-size:18px!important;font-weight:500!important}
#screen-admin .admin-page-sub{color:#888!important;font-size:12px!important}
#screen-admin .admin-section-header,#screen-admin .section-header{background:transparent!important}
#screen-admin .admin-section-title,#screen-admin .section-title{color:#111!important}

/* Botões */
#screen-admin .btn-primary{background:#FFCD00!important;color:#111!important;border:none!important;font-weight:600!important;border-radius:8px!important}
#screen-admin .btn-sm.yellow,#screen-admin .btn-sm.active{background:#FFCD00!important;color:#111!important;border:none!important;font-weight:600!important}
#screen-admin .btn-sm.ghost{background:#fff!important;color:#555!important;border:0.5px solid #ddd!important}
#screen-admin .btn-sm.ghost:hover{background:#111!important;color:#fff!important}

/* Inputs e selects */
#screen-admin .admin-input,#screen-admin input.admin-input,#screen-admin select{background:#fff!important;color:#111!important;border:0.5px solid #ddd!important;border-radius:8px!important}
#screen-admin .admin-input:focus{border-color:#FFCD00!important;outline:none!important}

/* Seletor de idioma — visível na topnav admin */

/* Status badges */
#screen-admin .status-pill.active,#screen-admin .badge-ativo{background:#EAF3DE!important;color:#3B6D11!important;border:none!important}
#screen-admin .status-pill.pending,#screen-admin .badge-pendente{background:#FAEEDA!important;color:#854F0B!important;border:none!important}
#screen-admin .status-pill.confirmed{background:#EAF3DE!important;color:#3B6D11!important;border:none!important}

/* Filtros de período */
#screen-admin .period-filters,#screen-admin .date-filters{background:#fff!important;border:0.5px solid #e5e5e5!important;border-radius:10px!important;padding:10px 16px!important}
#screen-admin .period-label{color:#888!important;font-size:11px!important}

/* Search bar */
#screen-admin .admin-search,#screen-admin input[type="search"],#screen-admin .search-input{background:#fff!important;color:#111!important;border:0.5px solid #ddd!important}

/* Cards de ranking e chart cards do dashboard */
#screen-admin #dash-ranking-card,#screen-admin #dash-volume-card,#screen-admin #dash-feed-card{background:#fff!important;border:0.5px solid #e5e5e5!important;border-radius:10px!important}

/* Garante fundo branco em todos os wrappers */
#screen-admin .admin-table-card,#screen-admin .table-card,#screen-admin .admin-card{background:#fff!important;border:0.5px solid #e5e5e5!important;border-radius:10px!important}

/* Scrollbar do admin-section */
#screen-admin .admin-section.active::-webkit-scrollbar{width:6px}
#screen-admin .admin-section.active::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}

/* body bg cinza quando admin ativo */
body:has(#screen-admin.active){background:#f5f5f3!important}

/* fix: admin-toggle tamanho correto — sobrescreve regra de input do v60 */
#screen-admin button.admin-toggle{
  width:28px!important;
  height:16px!important;
  min-width:28px!important;
  min-height:16px!important;
  padding:0!important;
  border-radius:8px!important;
  background:#ddd!important;
  cursor:pointer!important;
  position:relative!important;
  display:inline-block!important;
  vertical-align:middle!important;
  border:none!important;
  outline:none!important;
  box-sizing:border-box!important;
}
#screen-admin button.admin-toggle.on{background:#FFCD00!important}
#screen-admin button.admin-toggle::after{
  content:''!important;
  position:absolute!important;
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  background:white!important;
  top:3px!important;
  left:3px!important;
  transition:left 0.15s!important;
}
#screen-admin button.admin-toggle.on::after{left:15px!important;background:#111!important}



/* ══════════════════════════════ */




/* ══ MODAL ETAPAS — stepper design aprovado ══ */
#modal-checkout.modal-overlay{display:none;align-items:center;justify-content:center;padding:16px!important;}
#modal-checkout.modal-overlay.open{display:flex!important;}
#modal-checkout .modal-box{border-radius:16px!important;overflow:hidden!important;max-height:92vh!important;width:100%!important;max-width:540px!important;display:flex!important;flex-direction:column!important;background:#fff!important;}

/* Header */
#modal-checkout .modal-header{background:#F7F6F2!important;flex-shrink:0!important;padding:16px 20px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid #ECEAE4!important;}
#modal-checkout .modal-header-left{display:flex!important;align-items:center!important;gap:12px!important;}
#modal-checkout .modal-header-icon{width:36px!important;height:36px!important;background:#FFCD00!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:18px!important;flex-shrink:0!important;}
#modal-checkout .modal-header-title{font-size:14px!important;font-weight:500!important;color:#111!important;}
#modal-checkout .modal-header-sub{font-size:11px!important;color:#AAA!important;margin-top:1px!important;}
#modal-checkout .modal-header-close{width:28px!important;height:28px!important;background:#ECEAE4!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;font-size:13px!important;color:#888!important;border:none!important;flex-shrink:0!important;}

/* Stepper */
.nayax-stepper{display:flex!important;align-items:flex-start!important;padding:16px 24px 12px!important;border-bottom:1px solid #ECEAE4!important;background:#fff!important;flex-shrink:0!important;position:relative!important;}
.nayax-step{flex:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;position:relative!important;}
.nayax-step:not(:last-child)::after{content:""!important;position:absolute!important;top:12px!important;left:56%!important;width:88%!important;height:1.5px!important;background:#E8E6E0!important;z-index:0!important;}
.nayax-step.done:not(:last-child)::after{background:#FFCD00!important;}
.nayax-step-circle{width:26px!important;height:26px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:10px!important;font-weight:700!important;border:1.5px solid #DDDAD4!important;background:#fff!important;color:#BBB!important;position:relative!important;z-index:1!important;}
.nayax-step.active .nayax-step-circle{background:#FFCD00!important;border-color:#FFCD00!important;color:#111!important;box-shadow:0 0 0 4px rgba(255,205,0,.15)!important;}
.nayax-step.done .nayax-step-circle{background:#444!important;border-color:#444!important;color:#FFCD00!important;}
.nayax-step-label{font-size:9px!important;color:#BBB!important;text-align:center!important;}
.nayax-step.active .nayax-step-label{color:#444!important;font-weight:500!important;}
.nayax-step.done .nayax-step-label{color:#999!important;}

/* Body: scroll */
#modal-checkout .modal-body{background:#F7F6F2!important;flex:1!important;overflow-y:auto!important;padding:20px 24px!important;}

/* Seção title com barra amarela */
#modal-checkout .modal-section-title{font-size:13px!important;font-weight:500!important;color:#333!important;margin-bottom:16px!important;display:flex!important;align-items:center!important;gap:8px!important;}
#modal-checkout .modal-section-title::before{content:""!important;width:3px!important;height:15px!important;background:#FFCD00!important;border-radius:2px!important;flex-shrink:0!important;display:inline-block!important;}

/* Grid campos */
#modal-checkout .field-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-bottom:12px!important;}
#modal-checkout .field-row.full{grid-template-columns:1fr!important;}
#modal-checkout .field-wrap{display:flex!important;flex-direction:column!important;gap:4px!important;}
#modal-checkout .field-label{font-size:11px!important;color:#999!important;font-weight:400!important;}

/* Inputs brancos */
#modal-checkout input[type="text"],#modal-checkout input[type="email"],#modal-checkout input[type="tel"],#modal-checkout input[type="date"],#modal-checkout input:not([type]),#modal-checkout .field-input{-webkit-appearance:none!important;appearance:none!important;background:#FFFFFF!important;background-color:#FFFFFF!important;color:#444!important;-webkit-text-fill-color:#444!important;border:1.5px solid #E2DFD9!important;border-radius:10px!important;padding:10px 14px!important;font-size:13px!important;outline:none!important;width:100%!important;box-shadow:none!important;box-sizing:border-box!important;}
#modal-checkout input::placeholder{color:#C5C1BA!important;-webkit-text-fill-color:#C5C1BA!important;opacity:1!important;}
#modal-checkout input:focus{border-color:#FFCD00!important;box-shadow:0 0 0 3px rgba(255,205,0,.13)!important;background:#FFFEF9!important;}
#modal-checkout input:-webkit-autofill,#modal-checkout input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px #FFFFFF inset!important;-webkit-text-fill-color:#444!important;border:1.5px solid #E2DFD9!important;}
#modal-checkout select,#modal-checkout #f-tel-country,#modal-checkout #f-uf{-webkit-appearance:none!important;background:#F0EDE8!important;color:#888!important;border:1.5px solid #E2DFD9!important;border-radius:10px!important;padding:10px 14px!important;font-size:13px!important;outline:none!important;}

/* Footer */
#modal-checkout .modal-actions{background:#F7F6F2!important;flex-shrink:0!important;border-top:1px solid #ECEAE4!important;padding:12px 24px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;}
.nayax-step-info{font-size:11px!important;color:#BBB!important;}
#modal-checkout .btn-confirm,#modal-checkout .btn-next-step{background:#FFCD00!important;color:#111!important;font-weight:700!important;border:none!important;border-radius:8px!important;padding:10px 20px!important;font-size:12px!important;cursor:pointer!important;}
#modal-checkout 

/* Resumo do pedido */
.nayax-order-summary{background:#262626!important;border-radius:12px!important;padding:14px 16px!important;margin-bottom:20px!important;}
.nayax-order-summary *{color:#fff!important;}
.nayax-order-summary-total{color:#FFCD00!important;font-weight:700!important;font-size:14px!important;}

/* Mobile */
@media(max-width:640px){
  #modal-checkout.modal-overlay{padding:0!important;align-items:flex-end!important;}
  #modal-checkout .modal-box{border-radius:20px 20px 0 0!important;max-height:93vh!important;}
}

.nayax-btn-back,.nayax-btn-next{background:#FFCD00!important;color:#111!important;font-weight:700!important;border:none!important;border-radius:8px!important;padding:9px 20px!important;font-size:11px!important;cursor:pointer!important;min-width:90px!important;}
.nayax-btn-back[disabled]{background:#F0EDE8!important;color:#C0BDB8!important;cursor:not-allowed!important;}

#modal-checkout .modal-actions button:disabled,
#modal-checkout .modal-actions button[disabled]{
  background:#F0EDE8!important;color:#C0BDB8!important;
  cursor:not-allowed!important;
}



#c-prod-toggles .prod-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#F5F5F3;border:0.5px solid #E8E6E0;border-radius:8px;}
#c-prod-toggles .prod-toggle-row .prod-name{font-size:13px;font-weight:500;color:#111;margin:0;}
#c-prod-toggles .prod-toggle-row .prod-cat{font-size:11px;color:#888;margin:0;}
#c-price-overrides .price-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#F5F5F3;border:0.5px solid #E8E6E0;border-radius:8px;}
#c-price-overrides .price-row .price-prod-name{flex:1;font-size:13px;font-weight:500;color:#111;margin:0;}
#c-price-overrides .price-row .price-base{font-size:11px;color:#888;margin:0;}
#c-price-overrides .price-row input{width:110px;font-size:13px;text-align:right;}

#modal-client .prod-toggle-item{background:#F5F5F3!important;border:0.5px solid #E8E6E0!important;border-radius:8px!important;padding:10px 14px!important;margin-bottom:6px!important;}
#modal-client .prod-toggle-name{color:#111!important;font-size:13px!important;font-weight:500!important;}
#modal-client .prod-toggle-cat{color:#888!important;font-size:11px!important;}
#modal-client .price-override-row{background:#F5F5F3!important;border:0.5px solid #E8E6E0!important;border-radius:8px!important;padding:10px 14px!important;margin-bottom:6px!important;}
#modal-client .price-override-row .prod-name-label{color:#111!important;font-size:13px!important;font-weight:500!important;}
#modal-client .price-override-row .base-price-label{color:#888!important;font-size:11px!important;}
#modal-client .price-override-row input{background:#fff!important;color:#111!important;border:0.5px solid #ddd!important;border-radius:6px!important;}

#modal-client .prod-toggle-item{background:#F5F5F3!important;border:0.5px solid #E8E6E0!important;border-radius:8px!important;padding:10px 14px!important;margin-bottom:6px!important;}
#modal-client .prod-toggle-name{color:#111!important;font-weight:500!important;}
#modal-client .prod-toggle-cat{color:#888!important;font-size:11px!important;}
#modal-client .price-override-row{background:#F5F5F3!important;border:0.5px solid #E8E6E0!important;border-radius:8px!important;padding:10px 14px!important;margin-bottom:6px!important;}
#modal-client .price-override-row .prod-name-label{color:#111!important;font-weight:500!important;}
#modal-client .price-override-row .base-price-label{color:#888!important;font-size:11px!important;}
#modal-client .price-override-row input{background:#fff!important;color:#111!important;}

#modal-client input, #modal-client select {
  background:#fff!important; color:#111!important;
  border:1px solid #D8D6D0!important; border-radius:8px!important;
  padding:8px 12px!important; font-size:13px!important;
  outline:none!important; box-sizing:border-box!important;
  width:100%!important; appearance:auto!important;
}
#modal-client input:focus, #modal-client select:focus {
  border-color:#FFCD00!important; box-shadow:0 0 0 3px rgba(255,205,0,0.15)!important;
}
#modal-client input::placeholder { color:#bbb!important; }
#modal-client .btn-secondary {
  background:#fff!important; color:#555!important;
  border:1px solid #D8D6D0!important; border-radius:8px!important;
  padding:10px 16px!important; font-size:13px!important; cursor:pointer!important;
}
#modal-client .btn-secondary:hover { background:#f5f5f3!important; }

/* Profile Dropdown */
.topbar-user-clickable:hover { background: rgba(255,255,255,0.06); border-radius:8px; }
.profile-dd-item:hover { background: rgba(255,255,255,0.08) !important; }

/* ══ SCROLL FIX FINAL ══ */
#screen-admin.active{
  display:flex!important;
  flex-direction:column!important;
  height:100vh!important;
  max-height:100vh!important;
  overflow:hidden!important;
}
#screen-admin .admin-topbar{
  flex-shrink:0!important;
}
#screen-admin .admin-main{
  flex:1!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:20px 24px 40px 24px!important;
  box-sizing:border-box!important;
}
/* Responsivo — telas menores */
@media (max-width: 1280px) {
  #screen-admin .admin-main{ padding:16px 16px 40px 16px!important; }
}
@media (max-width: 900px) {
  #screen-admin .admin-main{ padding:12px 12px 40px 12px!important; }
  #screen-admin .admin-topbar{ flex-wrap:wrap; }
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Paginação ───────────────────────────────────────────────── */
[id$="-pagination"] {
  min-height: 20px;
}
[id$="-pagination"] button:hover:not([style*="pointer-events:none"]) {
  background: var(--gray-mid) !important;
  border-color: var(--black) !important;
  color: var(--black) !important;
}

/* ── Sino de notificações ──────────────────────────────────── */
#notif-bell-wrap { display: flex; align-items: center; }
#notif-dropdown-wrap { animation: fadeInDown .15s ease; }
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-item { transition: background .12s; }
.notif-item:hover { background: #fafaf8; }

/* ── Botões internos do dropdown de notificações ─────────── */
.notif-dismiss-btn {
  border: none; background: none; cursor: pointer;
  color: var(--text-hint); font-size: 18px; line-height: 1;
  padding: 2px 4px; border-radius: 4px; transition: color .15s, background .15s;
  flex-shrink: 0;
}
.notif-dismiss-btn:hover { color: var(--success); background: var(--success-bg); }

.notif-clear-btn {
  border: none; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 4px 8px; border-radius: 6px; transition: color .15s, background .15s;
}
.notif-clear-btn:hover { color: var(--black); background: var(--gray-mid); }

/* ══════════════════════════════════════════════════════
   LOGIN — novo visual fundo amarelo Nayax (v2 — override completo)
   ══════════════════════════════════════════════════════ */

/* ── Reset total de conflitos antigos ── */
#screen-login,
#screen-admin-login {
  background: none !important;
  overflow: hidden !important;
}

#screen-login.active {
  display: flex !important;
  min-height: 100vh !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  flex-direction: column !important;
}

#screen-admin-login.active {
  display: flex !important;
  min-height: 100vh !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  overflow: hidden !important;
  flex-direction: column !important;
}

#screen-login::before,  #screen-login::after,
#screen-admin-login::before, #screen-admin-login::after {
  display: none !important;
  opacity: 0 !important;
}

/* ── Fundo amarelo com pontos ── */
.login-screen-bg {
  min-height: 100vh;
  width: 100%;
  background: #FFCD00 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
  flex: 1;
}

.login-dots {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* ── Card branco ── */
.login-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 380px !important;
  padding: 40px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ── Logo ── */
.login-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-logo-img {
  height: 36px;
  width: auto;
  filter: brightness(0);
}

/* ── Divisor ── */
.login-card-divider {
  height: 0.5px !important;
  background: #EBEBEB !important;
  margin: 0 -36px;
  background-image: none !important;
}

/* ── Subtítulo ── */
.login-card-sub {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  color: #AAAAAA !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* ── Campos ── */
.login-field-wrap {
  height: 50px !important;
  border-radius: 10px !important;
  border: 1.5px solid #E8E6DF !important;
  background: #FAFAF8 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  gap: 10px !important;
  transition: border-color 0.15s;
  backdrop-filter: none !important;
}

.login-field-wrap:focus-within {
  border-color: #FFCD00 !important;
}

.login-field-wrap input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 14px !important;
  font-family: inherit;
  color: #262626 !important;
  box-shadow: none !important;
}

.login-field-wrap input::placeholder {
  color: #BBB !important;
}

.login-field-ico {
  opacity: 0.3;
  flex-shrink: 0;
}

/* ── Erro ── */
#login-error, #admin-login-error {
  border-radius: 8px;
  font-size: 12px;
}

/* ── Botão ── */
.login-btn-primary {
  height: 52px !important;
  background: #FFCD00 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #262626 !important;
  letter-spacing: 0.8px !important;
  gap: 8px;
  border: none !important;
  width: 100% !important;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: inherit;
}

.login-btn-primary:hover { opacity: 0.9; }
.login-btn-primary:active { opacity: 0.8; transform: scale(0.99); }

/* ── Rodapé ── */
.login-card-footer {
  text-align: center;
  font-size: 12px;
  color: #CCCCCC !important;
}

.login-card-footer a {
  color: #B89500 !important;
  font-weight: 500;
  text-decoration: none;
}

.login-card-footer a:hover { text-decoration: underline; }

/* ── Mobile ── */
@media (max-width: 480px) {
  .login-card {
    padding: 28px 22px !important;
    border-radius: 18px !important;
    gap: 16px !important;
  }
  .login-card-divider { margin: 0 -22px; }
  .login-screen-bg { padding: 20px 16px; align-items: flex-end; }
  .login-field-wrap { height: 48px !important; }
  .login-btn-primary { height: 50px !important; font-size: 12px !important; }
  .login-logo-img { height: 28px; }
}

/* ── Tela de loading pós-login ── */
.load-step { display: flex; align-items: center; gap: 10px; }
.step-dot-l {
  width: 22px; height: 22px; border-radius: 50%;
  background: #FFF7D6; border: 1.5px solid #FFCD00;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #B89500; flex-shrink: 0;
}
.step-dot-l.done { background: #262626; border-color: #262626; color: #fff; }
.step-text-l { font-size: 12px; color: #555; }

/* ══ FORCE FINAL — garante fundo amarelo sem gradiente escuro ══ */
#screen-login.active,
#screen-login.screen.active,
div#screen-login.screen.active { background: transparent !important; }

#screen-admin-login.active,
#screen-admin-login.screen.active,
div#screen-admin-login.screen.active { background: transparent !important; }

/* Card branco absoluto */
#screen-login .login-card,
#screen-admin-login .login-card,
#screen-login .login-screen-bg .login-card,
#screen-admin-login .login-screen-bg .login-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Fundo amarelo absoluto */
#screen-login .login-screen-bg,
#screen-admin-login .login-screen-bg {
  background: #FFCD00 !important;
  background-image: none !important;
}


/* ══════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS — v2 (max-width: 480px)
   Cobre: Login, Catálogo, Checkout, Painel Admin
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── LOGIN ── */
  .login-screen-bg {
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .login-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 20px !important;
    border-radius: 20px !important;
    margin: 0 !important;
  }
  .login-logo-wrap img {
    width: 140px !important;
  }
  .login-card-sub {
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }
  .login-field-wrap {
    height: 50px !important;
  }
  .login-btn {
    height: 50px !important;
    font-size: 14px !important;
  }

  /* ── CATÁLOGO ── */
  .catalog-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .product-card {
    border-radius: 10px !important;
  }
  .product-img-wrap {
    height: 120px !important;
  }
  .product-body {
    padding: 8px 10px 10px !important;
  }
  .product-name {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .product-price {
    font-size: 13px !important;
  }
  .btn-add {
    height: 34px !important;
    font-size: 12px !important;
  }
  /* Sidebar / carrinho lateral */
  .sidebar, .cart-sidebar {
    display: none !important;
  }
  /* Header do catálogo */
  .catalog-header, .main-header {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .catalog-header .search-wrap,
  .main-header .search-wrap {
    width: 100% !important;
    order: 3 !important;
  }
  /* Cart dock (carrinho flutuante) */
  .cart-dock {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* ── CHECKOUT ── */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  /* Checkout layout — empilhar formulário e resumo */
  .co-layout,
  [class*="co-layout"] {
    flex-direction: column !important;
  }
  .co-form-col {
    width: 100% !important;
    padding: 16px !important;
  }
  .co-summary-col {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding: 16px !important;
  }
  /* Steps do checkout */
  .co-steps {
    padding: 12px 16px !important;
    gap: 4px !important;
  }
  .co-step-label {
    display: none !important;
  }
  /* Footer do checkout */
  .co-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .co-footer .btn-confirm,
  .co-footer .btn-ghost {
    flex: 1 !important;
    height: 48px !important;
    font-size: 14px !important;
  }

  /* ── PAINEL ADMIN ── */
  #screen-admin .admin-topbar {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  #screen-admin .admin-topbar-right {
    gap: 8px !important;
  }
  #admin-topnav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 12px !important;
    gap: 4px !important;
  }
  #admin-topnav::-webkit-scrollbar { display: none !important; }
  .admin-nav-item {
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  #screen-admin .admin-main {
    padding: 10px 10px 80px 10px !important;
  }
  /* Tabelas admin — scroll horizontal */
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .table-wrap table {
    min-width: 500px !important;
  }
  .table-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .table-search {
    width: 100% !important;
  }
  /* Stats grid do dashboard */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Gráficos do dashboard */
  [style*="grid-template-columns:1.6fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Modais admin */
  .modal-box[style*="max-width:480px"],
  .modal-box[style*="max-width:600px"],
  .modal-box[style*="max-width:820px"] {
    width: 96% !important;
    max-width: 96% !important;
    border-radius: 16px !important;
    margin: auto !important;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  /* Botões de ação nas tabelas */
  .btn-sm {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
  /* Modal de integrações */
  #adm-integracoes > div {
    padding: 16px !important;
  }
}

/* ── Ajustes 360px (telas muito pequenas) ── */
@media (max-width: 360px) {
  .catalog-grid,
  .product-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
  .login-card {
    padding: 22px 16px !important;
  }
}


/* ══════════════════════════════════════════════════════
   MOBILE — CORREÇÕES ESPECÍFICAS v3
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── CHECKOUT: layout grid → coluna única ── */
  /* O body do checkout usa grid 1fr 230px */
  #modal-checkout .modal-box > div[style*="grid-template-columns:1fr 230px"],
  #modal-checkout [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }
  /* Resumo lateral — vai para baixo do formulário */
  #modal-checkout [style*="230px"] {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
  }
  /* Steps do checkout — só números, sem texto */
  #modal-checkout [style*="overflow:visible"] span:not([style*="width:24px"]):not([style*="width:26px"]) {
    display: none !important;
  }
  /* Footer checkout */
  #modal-checkout [style*="justify-content:space-between"][style*="padding"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #modal-checkout [style*="justify-content:space-between"][style*="padding"] button {
    flex: 1 !important;
    min-width: 120px !important;
    height: 46px !important;
  }
  /* Modal overlay — bottom sheet */
  #modal-checkout {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #modal-checkout .modal-box {
    border-radius: 20px 20px 0 0 !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── OUTROS MODAIS — centralizar e ajustar ── */
  .modal-overlay:not(#modal-checkout) {
    padding: 12px !important;
    align-items: center !important;
  }
  .modal-overlay:not(#modal-checkout) .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .modal-body {
    padding: 16px !important;
  }
  .modal-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .modal-actions button {
    width: 100% !important;
    height: 46px !important;
  }

  /* ── ADMIN — topbar ── */
  .admin-topbar-right .lang-selector {
    font-size: 11px !important;
    padding: 4px 6px !important;
  }
  #admin-topnav {
    padding: 4px 8px !important;
  }

  /* ── CATÁLOGO — header e filtros ── */
  .filter-bar, .catalog-filters {
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    padding: 8px 12px !important;
  }
  .filter-bar::-webkit-scrollbar { display: none !important; }

  /* ── PAINEL ADMIN — modais com form-grid ── */
  .modal-box .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── INTEGRAÇÕES ── */
  #adm-integracoes [style*="display:flex"][style*="gap:8px"] {
    flex-wrap: wrap !important;
  }
  #adm-integracoes input[type="password"] {
    font-size: 12px !important;
  }

  /* ── RANKING / DASHBOARD ── */
  .admin-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .admin-page-header button,
  .admin-page-header .btn-sm {
    align-self: flex-start !important;
  }

  /* ── TOAST ── */
  .toast {
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
    width: auto !important;
    text-align: center !important;
  }
}

/* ── Touch targets — mínimo 44px em todos os botões ── */
@media (max-width: 480px) {
  button, [role="button"], .btn-sm, .btn-ghost, .btn-confirm,
  .admin-nav-item, .login-btn, .btn-add {
    min-height: 36px !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ── CX: Catálogo de vendas — melhorias visuais ── */

/* SKU no card de produto */
.product-sku {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono, monospace) !important;
  letter-spacing: 0.5px !important;
  margin-top: 2px !important;
  opacity: 0.7;
}

/* Hover no card de produto */
.product-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.product-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}

/* Botão adicionar ao pedido — estado hover */
.btn-add {
  transition: background 0.15s ease, transform 0.1s ease !important;
}
.btn-add:active {
  transform: scale(0.97) !important;
}

/* Badge "Novo" mais visível */
.badge-new {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Cart dock — melhorias */
.cart-dock {
  transition: box-shadow 0.2s ease !important;
}

/* Stepper do qty — feedback visual */
.qty-btn {
  transition: background 0.12s ease !important;
}
.qty-btn:active {
  transform: scale(0.9) !important;
}

/* Filtros do catálogo — feedback visual */
.filter-tab {
  transition: background 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
}

/* Imagem do produto — zoom suave no hover */
.product-img-area img {
  transition: transform 0.3s ease !important;
}
.product-card:hover .product-img-area img {
  transform: scale(1.03) !important;
}

/* Ocultar widget de pedido duplicado no sidebar — cart dock faz esse papel */
#nayax-order-widget { display: none !important; }

/* ── Placeholder de produto sem imagem ─────────────────────── */
.prod-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: var(--text-muted, #888);
}
.prod-placeholder svg {
  opacity: 0.35;
}
.prod-placeholder span {
  font-size: 10px;
  letter-spacing: 0.8px;
  opacity: 0.5;
  font-family: monospace;
}