*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:#07111f;color:#fff;font-family:Arial,sans-serif}a{color:inherit}.app-shell{max-width:1280px;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;position:sticky;top:0;background:rgba(7,17,31,.92);backdrop-filter:blur(10px);z-index:40;border-bottom:1px solid rgba(255,255,255,.06)}.topbar-home{border-bottom-color:rgba(255,255,255,.08)}.brand{font-weight:800;font-size:24px;letter-spacing:.2px}.brand span,.footer-brand span{color:#ff4d67}.brand-link{text-decoration:none;color:inherit}.topbar-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.top-link,.btn,.btn-secondary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:14px;padding:10px 14px;text-decoration:none;font-weight:700;cursor:pointer;position:relative;overflow:hidden;transition:transform .16s ease,opacity .2s ease,background .2s ease}.top-link:hover,.btn:hover,.btn-secondary:hover,.btn-ghost:hover{transform:translateY(-1px)}.top-link,.btn-ghost{background:#132238;color:#fff}.top-link-counter{padding-right:10px}.counter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:#ff4d67;color:#fff;font-size:12px;font-weight:800}.btn{background:linear-gradient(135deg,#ff4d67,#ff7a45);color:#fff;box-shadow:0 10px 30px rgba(255,92,122,.22)}.btn-secondary{background:#1f3554;color:#fff}.btn-small{padding:8px 10px;font-size:12px;border-radius:10px}.btn.is-pressing,.btn-secondary.is-pressing{transform:scale(.97)}.click-ripple{position:absolute;width:16px;height:16px;border-radius:999px;background:rgba(255,255,255,.42);transform:translate(-50%,-50%) scale(0);animation:ripple .55s ease-out forwards;pointer-events:none}@keyframes ripple{to{opacity:0;transform:translate(-50%,-50%) scale(11)}}
.hero-streaming{padding:18px 18px 0}.hero-carousel{position:relative;border-radius:28px;overflow:hidden;min-height:440px;background:#091423;border:1px solid rgba(255,255,255,.06);box-shadow:0 20px 60px rgba(0,0,0,.28)}.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;pointer-events:none;transition:opacity .55s ease}.hero-slide.is-active{opacity:1;pointer-events:auto}.hero-content{display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;max-width:620px;padding:42px}.eyebrow{display:inline-block;background:rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:12px}.hero-slide h1{font-size:40px;line-height:1.02;margin:0 0 12px}.hero-slide p{color:#dbe5f3;max-width:520px;font-size:15px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.hero-dots{position:absolute;right:22px;bottom:22px;display:flex;gap:8px;z-index:3}.hero-dot{width:12px;height:12px;border-radius:999px;border:none;background:rgba(255,255,255,.28);cursor:pointer}.hero-dot.is-active{background:#fff}
.section{padding:22px 18px}.section-tight{padding-top:12px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.section-title{font-size:22px;font-weight:800}.section-sub{color:#b9c5d6;font-size:13px}.flash{margin:14px 18px;padding:12px 14px;border-radius:14px;font-weight:700}.flash.success{background:#153a21;color:#c7ffd8}.flash.error{background:#4a1720;color:#ffd3d8}
.search-section{position:relative;z-index:9}.search-panel{background:linear-gradient(180deg,rgba(15,29,49,.98),rgba(9,20,35,.98));border:1px solid rgba(255,255,255,.06);padding:16px;border-radius:22px;box-shadow:0 16px 40px rgba(0,0,0,.16)}.search-stack{display:grid;gap:14px}.search-input-wrap{position:relative}.search-input-wrap input{width:100%;border:1px solid rgba(255,255,255,.12);background:#08111f;color:#fff;border-radius:14px;padding:14px 16px;font-size:15px;outline:none}.search-input-wrap input:focus{border-color:rgba(255,122,69,.65);box-shadow:0 0 0 3px rgba(255,122,69,.12)}.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#091423;border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 18px 48px rgba(0,0,0,.34);max-height:420px;overflow:auto}.search-result-item{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:12px 14px;text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background:rgba(255,255,255,.03)}.search-result-item img{width:100%;height:58px;object-fit:cover;border-radius:10px;background:#16263f}.search-result-item strong{display:block;font-size:14px;margin-bottom:4px}.search-result-item span,.search-empty{font-size:12px;color:#b9c5d6}.search-empty{padding:14px}
.filter-pills{display:flex;gap:10px;flex-wrap:wrap}.pill-btn,.pill-nav a{white-space:nowrap;text-decoration:none;color:#fff;background:#0f1d31;border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:700}.pill-btn.is-active{background:linear-gradient(135deg,#ff4d67,#ff7a45);border-color:transparent}
.scroll-row{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 0 6px;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;cursor:grab;user-select:none}.scroll-row::-webkit-scrollbar{display:none}.scroll-row.is-dragging{cursor:grabbing}.scroll-row a,.scroll-row button{user-select:none}.card-video{min-width:215px;max-width:215px;background:#0f1d31;border:1px solid rgba(255,255,255,.06);border-radius:20px;overflow:hidden;position:relative;box-shadow:0 12px 30px rgba(0,0,0,.2)}.card-video:hover{transform:translateY(-2px);transition:transform .18s ease}.card-video-continue{min-width:250px;max-width:250px}.thumb-wrap{position:relative;display:block;aspect-ratio:16/10;background:#16263f}.thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block}.badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.65);color:#fff;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:700}.card-body{padding:12px}.card-title{font-size:15px;font-weight:700;min-height:40px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-meta{font-size:12px;color:#b8c6da;margin-bottom:12px}.card-actions{display:flex;gap:8px}.card-actions .btn,.card-actions .btn-secondary,.card-actions .btn-ghost{flex:1;padding:10px 10px;font-size:13px}.load-more-row{min-width:150px;align-self:center;height:46px;border:none;border-radius:14px;background:#132238;color:#fff;font-weight:700;cursor:pointer;margin:auto 0}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.mini-card{background:#0f1d31;border-radius:16px;padding:14px;border:1px solid rgba(255,255,255,.06)}.mini-card strong{display:block;margin-bottom:6px}.auth-wrap,.panel-wrap{max-width:500px;margin:24px auto;padding:0 16px}.panel-wide{max-width:1080px}.auth-card,.admin-card,.player-side{background:#0f1d31;border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:18px}.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;border:1px solid rgba(255,255,255,.12);background:#08111f;color:#fff;border-radius:12px;padding:12px 14px;font-size:14px}.field textarea{min-height:110px;resize:vertical}.form-actions{display:flex;gap:10px;flex-wrap:wrap}.muted{color:#b8c6da;font-size:13px}.player-layout{display:grid;grid-template-columns:1.55fr .95fr;gap:18px;padding:18px}.player-box{position:relative;background:#000;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}.player-box iframe{width:100%;aspect-ratio:16/9;border:none;display:block}.block-screen{position:absolute;inset:0;background:rgba(2,6,14,.97);display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;flex-direction:column}.block-screen h3{margin:0 0 10px;font-size:24px}.related-list{display:grid;gap:12px}.related-item{display:grid;grid-template-columns:120px 1fr;gap:10px;background:#091423;border-radius:14px;padding:8px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.06)}.related-item img{width:100%;height:72px;object-fit:cover;border-radius:10px}.table-wrap{overflow:auto}.table-top-scroll{overflow:auto;position:relative}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;font-size:14px;white-space:nowrap}.helper{font-size:12px;color:#95a8c3}.empty{padding:16px;border-radius:14px;background:#0f1d31;border:1px solid rgba(255,255,255,.06);color:#c6d2e4}.action-inline{display:flex;gap:8px;flex-wrap:wrap}.collapsible-card{display:none}.collapsible-card.is-open{display:block}
.site-footer{margin:24px 18px 30px;background:linear-gradient(180deg,#0f1d31,#091423);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:24px}.footer-grid{display:grid;grid-template-columns:1.4fr .9fr .9fr;gap:22px}.footer-brand{font-size:24px;font-weight:800;margin-bottom:10px}.footer-title{font-size:14px;font-weight:800;margin-bottom:10px;color:#fff}.footer-text,.footer-copy{margin:0;color:#b9c5d6;font-size:14px;line-height:1.55}.footer-copy{margin-top:8px}.footer-links{display:grid;gap:8px}.footer-links a{text-decoration:none;color:#fff;opacity:.88}.footer-links a:hover{opacity:1}
[hidden]{display:none !important}
@media (max-width:900px){.hero-carousel,.hero-content{min-height:390px}.hero-slide h1{font-size:32px}.footer-grid{grid-template-columns:1fr}.player-layout{grid-template-columns:1fr}}
@media (max-width:780px){.topbar{padding:12px 14px}.topbar-actions{justify-content:flex-end}.hero-streaming{padding:12px 14px 0}.hero-carousel,.hero-content{min-height:340px}.hero-content{padding:24px}.hero-slide h1{font-size:28px}.section{padding:18px 14px}.card-video{min-width:174px;max-width:174px}.card-video-continue{min-width:212px;max-width:212px}.search-panel{padding:14px}.search-result-item{grid-template-columns:78px 1fr}.site-footer{margin:18px 14px 24px;padding:20px}.mini-grid{grid-template-columns:1fr}.card-actions{flex-direction:column}}
.player-box-pro{position:relative;padding-bottom:58px}.player-box-pro #ytPlayer,.player-box-pro iframe{width:100%;aspect-ratio:16/9;border:none;display:block}.player-controls{display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(180deg,#08111f,#0c1729);border-top:1px solid rgba(255,255,255,.06)}.player-controls.is-disabled{opacity:.45;pointer-events:none}.control-btn{width:44px;height:44px;border:none;border-radius:14px;background:#132238;color:#fff;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.control-btn:hover{transform:translateY(-1px)}.player-progress-wrap{flex:1;display:grid;gap:6px}.player-progress-wrap input[type="range"]{width:100%;accent-color:#ff5b64;cursor:pointer}.player-times{display:flex;justify-content:space-between;color:#b8c6da;font-size:12px}@media (max-width:780px){.player-controls{gap:8px;padding:10px}.control-btn{width:40px;height:40px;font-size:16px}}
.player-start-overlay,.next-video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(4,10,20,.18),rgba(4,10,20,.82));z-index:8;padding:20px}
.player-start-overlay[hidden],.next-video-overlay[hidden]{display:none}
.player-start-btn{display:inline-flex;align-items:center;gap:12px;border:none;border-radius:18px;padding:16px 22px;background:linear-gradient(135deg,#ff4d67,#ff7a45);color:#fff;font-weight:800;font-size:18px;cursor:pointer;box-shadow:0 16px 36px rgba(255,92,122,.28)}
.player-start-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.18);font-size:20px}
.player-start-copy{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);margin:0;color:#d8e3f2;font-size:13px;text-align:center}
.next-video-card{max-width:430px;width:100%;background:rgba(9,20,35,.96);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:22px;box-shadow:0 22px 60px rgba(0,0,0,.35);text-align:center}
.next-video-card strong{display:block;font-size:24px;line-height:1.15;margin-bottom:8px}
.player-box-pro #ytPlayer iframe{display:block}
/* ETAPA 9.1 - player alinhado */
.player-box-pro{padding-bottom:0;aspect-ratio:16/9;min-height:240px;background:#000;overflow:hidden;border-radius:28px}
.player-box-pro #ytPlayer,.player-box-pro iframe{width:100%;height:100%;aspect-ratio:auto}
.player-controls{position:absolute;left:12px;right:12px;bottom:12px;z-index:9;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(8,17,31,.82);backdrop-filter:blur(10px);padding:10px 12px}
.player-progress-wrap input[type="range"]{margin:0}
.player-start-overlay,.next-video-overlay{padding:12px;z-index:10}
.player-start-btn{position:relative;z-index:11}
.player-start-copy{display:none !important}
.block-screen{z-index:12}
@media (max-width:780px){
.player-box-pro{border-radius:22px}
.player-controls{left:8px;right:8px;bottom:8px;padding:8px 10px;border-radius:16px}
}
/* Etapa 14 - player mobile e prompts PWA */
.player-page{overflow-x:hidden;width:100%}
.player-page .app-shell{width:100%;max-width:1280px;overflow-x:hidden}
.player-page .player-layout{grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);align-items:start}
.player-page .player-layout>*{min-width:0}
.player-page .player-box,.player-page .player-box-pro,.player-page .player-side,.player-page .related-list,.player-page .related-item,.player-page .next-video-card,.player-page .player-controls{max-width:100%}
.player-page .player-controls{width:auto}
.player-page .player-progress-wrap{min-width:0}
.player-page .player-progress-wrap input[type="range"]{width:100%}
.player-page #ytPlayer,.player-page #ytPlayer iframe{max-width:100%}
.prompt-card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(15,29,49,.95),rgba(10,20,34,.95));box-shadow:0 18px 40px rgba(0,0,0,.16)}
.prompt-card::after{content:'';position:absolute;inset:auto -20% -55% auto;width:180px;height:180px;background:radial-gradient(circle,rgba(255,77,103,.18),transparent 68%);pointer-events:none}
#pushPromptCard[hidden],#installPromptCard[hidden]{display:none!important}
@media (max-width:900px){.player-page .player-layout{grid-template-columns:minmax(0,1fr);padding:14px}.player-page .player-box,.player-page .player-box-pro{border-radius:18px}.player-page .player-controls{left:8px;right:8px;bottom:8px}.player-page .player-side{padding:16px}}
@media (max-width:640px){.player-page .topbar{padding:12px 14px}.player-page .player-layout{padding:12px;gap:14px}.player-page .section{padding:14px 12px}.player-page .player-controls{padding:8px;gap:8px}.player-page .control-btn{width:40px;height:40px;border-radius:12px}.player-page .player-times{font-size:11px}.pwa-prompts .mini-grid{grid-template-columns:1fr}.prompt-card .form-actions .btn,.prompt-card .form-actions .btn-ghost{width:100%}}
/* BabyKids etapa 18 - prompts e admin premium */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.install-floating {
position: fixed;
top: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
width: min(94vw, 720px);
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 22px;
background: linear-gradient(135deg, rgba(13,22,45,.96), rgba(28,44,82,.94));
box-shadow: 0 20px 60px rgba(0,0,0,.35);
backdrop-filter: blur(14px);
animation: babykidsDrop .36s ease both;
}
.install-floating[hidden] {
display: none !important;
}
.install-floating-icon {
width: 44px;
height: 44px;
border-radius: 16px;
display: grid;
place-items: center;
background: rgba(255,255,255,.12);
font-size: 1.35rem;
}
.install-floating-text {
display: grid;
gap: 2px;
}
.install-floating-text strong {
color: #fff;
font-size: .98rem;
}
.install-floating-text span,
.install-floating-text small {
color: rgba(255,255,255,.72);
font-size: .82rem;
}
.install-btn {
white-space: nowrap;
padding-inline: 18px;
}
.install-close {
width: 34px;
height: 34px;
border: 0;
border-radius: 999px;
cursor: pointer;
color: #fff;
background: rgba(255,255,255,.12);
font-size: 1.35rem;
line-height: 1;
}
.install-close:hover {
background: rgba(255,255,255,.22);
}
@keyframes babykidsDrop {
from { opacity: 0; transform: translate(-50%, -18px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.admin-push-panel .push-custom-form {
margin-top: 14px;
}
.push-test-inline {
margin-top: 10px;
}
.table-thumb-round {
width: 46px !important;
height: 46px !important;
min-width: 46px;
border-radius: 50% !important;
object-fit: cover;
border: 2px solid rgba(255,255,255,.18);
box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
#durationHelper {
display: block;
margin-top: 6px;
}
@media (max-width: 640px) {
.install-floating {
top: 10px;
grid-template-columns: auto 1fr auto;
gap: 9px;
padding: 10px;
border-radius: 18px;
}
.install-close {
position: absolute;
right: -6px;
top: -8px;
background: rgba(7, 12, 28, .96);
}
.install-floating-icon {
width: 38px;
height: 38px;
border-radius: 14px;
}
.install-floating-text span {
display: none;
}
.install-btn {
padding: 10px 13px;
font-size: .82rem;
}
}
/* ETAPA 19 - banner de instalação mobile + push confiável */
.babykids-floating {
position: fixed;
left: 50%;
transform: translateX(-50%);
z-index: 99999;
width: min(94vw, 720px);
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 22px;
background: linear-gradient(135deg, rgba(11, 21, 43, .98), rgba(32, 47, 88, .96));
box-shadow: 0 20px 60px rgba(0,0,0,.38);
backdrop-filter: blur(14px);
animation: babykidsDrop .36s ease both;
}
.install-floating.babykids-floating { top: 12px; }
.push-floating.babykids-floating { top: 92px; }
.push-floating[hidden],
.install-floating[hidden] {
display: none !important;
}
.push-floating .install-floating-icon {
background: linear-gradient(135deg, rgba(255, 91, 100, .28), rgba(104, 211, 145, .18));
}
.push-floating .install-btn,
.install-floating .install-btn {
min-height: 40px;
border-radius: 14px;
}
.push-floating .install-close,
.install-floating .install-close {
flex: 0 0 auto;
}
@media (max-width: 640px) {
.babykids-floating {
width: calc(100vw - 20px);
left: 10px;
right: 10px;
transform: none;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 9px;
padding: 10px;
border-radius: 18px;
}
.install-floating.babykids-floating { top: 10px; }
.push-floating.babykids-floating { top: 88px; }
.babykids-floating .install-floating-text {
min-width: 0;
}
.babykids-floating .install-floating-text strong {
font-size: .9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.babykids-floating .install-floating-text span,
.babykids-floating .install-floating-text small {
display: block;
font-size: .75rem;
line-height: 1.25;
}
.babykids-floating .install-btn {
padding: 9px 11px;
font-size: .78rem;
}
.babykids-floating .install-close {
position: absolute;
right: -5px;
top: -8px;
width: 30px;
height: 30px;
background: rgba(7, 12, 28, .98);
}
}
/* ETAPA 20 - Banner PWA/Push premium centralizado e responsivo */
.babykids-floating {
position: fixed !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
z-index: 999999 !important;
width: min(calc(100vw - 24px), 460px) !important;
max-width: calc(100vw - 24px) !important;
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) auto 32px !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
border-radius: 20px !important;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, .16), transparent 35%),
linear-gradient(135deg, rgba(9, 22, 48, .98), rgba(35, 54, 104, .98)) !important;
border: 1px solid rgba(255,255,255,.18) !important;
box-shadow: 0 18px 42px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.04) inset !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
animation: babykidsBannerIn .34s cubic-bezier(.2,.9,.25,1) both !important;
overflow: visible !important;
}
.install-floating.babykids-floating {
top: max(10px, env(safe-area-inset-top)) !important;
}
.push-floating.babykids-floating {
top: calc(max(10px, env(safe-area-inset-top)) + 76px) !important;
}
.babykids-floating[hidden],
.install-floating[hidden],
.push-floating[hidden] {
display: none !important;
}
.babykids-floating .install-floating-icon {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
border-radius: 16px !important;
display: grid !important;
place-items: center !important;
font-size: 1.25rem !important;
background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
}
.babykids-floating .install-floating-text {
min-width: 0 !important;
display: grid !important;
gap: 2px !important;
}
.babykids-floating .install-floating-text strong {
display: block !important;
color: #fff !important;
font-size: .94rem !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.babykids-floating .install-floating-text span,
.babykids-floating .install-floating-text small {
display: block !important;
color: rgba(255,255,255,.76) !important;
font-size: .76rem !important;
line-height: 1.2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.babykids-floating .install-btn {
min-height: 38px !important;
padding: 8px 12px !important;
border-radius: 14px !important;
font-size: .78rem !important;
font-weight: 800 !important;
white-space: nowrap !important;
box-shadow: 0 10px 24px rgba(255, 91, 100, .22) !important;
}
.babykids-floating .install-close {
position: static !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
border: 0 !important;
border-radius: 999px !important;
display: inline-grid !important;
place-items: center !important;
padding: 0 !important;
background: rgba(255,255,255,.13) !important;
color: #fff !important;
font-size: 1.15rem !important;
line-height: 1 !important;
cursor: pointer !important;
}
.babykids-floating .install-close:active,
.babykids-floating .install-btn:active {
transform: scale(.96) !important;
}
.babykids-floating.is-hiding {
animation: babykidsBannerOut .22s ease forwards !important;
}
@keyframes babykidsBannerIn {
from { opacity: 0; transform: translate(-50%, -18px) scale(.98); }
to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes babykidsBannerOut {
to { opacity: 0; transform: translate(-50%, -12px) scale(.98); }
}
@media (max-width: 430px) {
.babykids-floating {
width: calc(100vw - 18px) !important;
max-width: calc(100vw - 18px) !important;
grid-template-columns: 38px minmax(0, 1fr) auto 30px !important;
gap: 8px !important;
padding: 9px !important;
border-radius: 18px !important;
}
.push-floating.babykids-floating {
top: calc(max(10px, env(safe-area-inset-top)) + 72px) !important;
}
.babykids-floating .install-floating-icon {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
border-radius: 14px !important;
font-size: 1.08rem !important;
}
.babykids-floating .install-floating-text strong {
font-size: .86rem !important;
}
.babykids-floating .install-floating-text span {
display: none !important;
}
.babykids-floating .install-floating-text small {
font-size: .7rem !important;
white-space: nowrap !important;
}
.babykids-floating .install-btn {
min-height: 36px !important;
padding: 8px 10px !important;
font-size: .74rem !important;
}
.babykids-floating .install-close {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
}
}
/* ETAPA 22 - login/cadastro premium + banner flutuante seguro */
.auth-card h2 { letter-spacing: -0.03em; }
.auth-extra-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin: 10px 0 18px;
flex-wrap: wrap;
}
.remember-check {
display:inline-flex;
align-items:center;
gap:8px;
font-size: 13px;
color: rgba(255,255,255,.82);
cursor:pointer;
user-select:none;
}
.remember-check input { width:16px; height:16px; accent-color:#38bdf8; }
.forgot-link {
color:#7dd3fc;
font-size:13px;
font-weight:800;
text-decoration:none;
}
.forgot-link:hover { color:#fff; text-decoration:underline; }
.password-field { position:relative; display:flex; align-items:center; }
.password-field input { width:100%; padding-right:48px !important; }
.password-toggle {
position:absolute;
right:8px;
width:36px;
height:36px;
border:0;
border-radius:12px;
background:rgba(255,255,255,.08);
color:#fff;
cursor:pointer;
display:grid;
place-items:center;
transition:.18s ease;
}
.password-toggle:hover { background:rgba(56,189,248,.24); transform:scale(1.04); }
.auth-actions-clean { gap:10px; }
.auth-actions-clean .btn,
.auth-actions-clean .btn-secondary,
.auth-actions-clean .btn-ghost { justify-content:center; text-align:center; }
.auth-actions-split { align-items:stretch; }
.auth-link-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.profile-photo-picker {
display:grid;
place-items:center;
gap:10px;
margin: 4px 0 18px;
text-align:center;
}
.profile-photo-picker input[type="file"] {
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
.profile-preview {
width:124px;
height:124px;
border-radius:50%;
display:grid;
place-items:center;
overflow:hidden;
cursor:pointer;
background:linear-gradient(135deg, rgba(56,189,248,.25), rgba(236,72,153,.18));
border:2px dashed rgba(255,255,255,.35);
box-shadow:0 18px 40px rgba(0,0,0,.24);
transition:.2s ease;
}
.profile-preview:hover { transform:translateY(-2px); border-color:rgba(125,211,252,.8); }
.profile-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-preview span {
font-size:13px;
font-weight:900;
color:#e0f2fe;
padding:12px;
}
.profile-photo-picker small { color:rgba(255,255,255,.62); font-size:12px; line-height:1.35; }
/* Corrige instruções do banner PWA no mobile para não cortar texto */
.babykids-floating,
.install-floating,
.push-floating {
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
width:min(440px, calc(100vw - 24px)) !important;
max-height: min(72vh, 420px);
overflow-y:auto;
overflow-x:hidden;
align-items:flex-start;
}
.babykids-floating .install-floating-text,
.install-floating .install-floating-text,
.push-floating .install-floating-text { min-width:0; width:100%; }
.babykids-floating .install-floating-text span,
.babykids-floating .install-floating-text small,
.install-floating .install-floating-text span,
.install-floating .install-floating-text small,
.push-floating .install-floating-text span,
.push-floating .install-floating-text small {
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
display:block;
line-height:1.35;
}
@media (max-width: 560px) {
.auth-extra-row { align-items:flex-start; }
.forgot-link { width:100%; }
.auth-link-row { grid-template-columns:1fr; }
.profile-preview { width:112px; height:112px; }
.babykids-floating,
.install-floating,
.push-floating {
top:10px !important;
width:calc(100vw - 18px) !important;
padding:12px !important;
gap:10px !important;
}
.push-floating.babykids-floating { top: 104px !important; }
.babykids-floating .install-btn,
.install-floating .install-btn,
.push-floating .install-btn { min-height:38px; padding:8px 12px; }
}
/* BabyKids etapa 24: recuperação e minha conta */
.auth-card-pro { position: relative; overflow: hidden; }
.auth-icon-bubble {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 20px;
background: linear-gradient(135deg, rgba(89, 123, 255, .18), rgba(255, 113, 195, .18));
box-shadow: 0 14px 30px rgba(20, 30, 70, .08);
font-size: 26px;
margin-bottom: 12px;
}
.account-page { max-width: 1040px; margin-inline: auto; }
.account-card { overflow: hidden; }
.account-hero {
display: flex;
align-items: center;
gap: 16px;
padding: 14px;
margin-bottom: 18px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(90, 124, 255, .10), rgba(255, 115, 205, .10));
}
.account-avatar,
.profile-round-preview {
width: 86px;
height: 86px;
border-radius: 999px;
object-fit: cover;
flex: 0 0 auto;
border: 4px solid rgba(255,255,255,.85);
box-shadow: 0 14px 32px rgba(30, 40, 90, .16);
background: #fff;
}
.account-form {
display: grid;
gap: 14px;
margin-bottom: 22px;
}
.profile-upload-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.profile-upload-row input[type="file"] {
max-width: 100%;
padding: 11px;
border-radius: 16px;
border: 1px dashed rgba(90, 120, 255, .35);
background: rgba(255,255,255,.75);
}
@media (max-width: 560px) {
.account-hero { align-items: flex-start; }
.account-avatar, .profile-round-preview { width: 72px; height: 72px; }
.profile-upload-row { align-items: flex-start; }
}
/* ETAPA 25 - foto de perfil clicável e upload mais elegante */
.account-avatar-picker { position: relative; display: inline-flex; cursor: pointer; border-radius: 999px; flex: 0 0 auto; transition: transform .2s ease, filter .2s ease; }
.account-avatar-picker:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.03); }
.account-avatar-picker:focus-within, .account-avatar-picker:focus-visible { outline: 3px solid rgba(90, 123, 255, .35); outline-offset: 4px; }
.avatar-edit-badge { position: absolute; right: -2px; bottom: 2px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, #597bff, #ff71c3); color: #fff; font-size: 15px; border: 3px solid #fff; box-shadow: 0 8px 20px rgba(25, 35, 90, .22); }
.compact-profile-upload { padding: 12px; border-radius: 22px; background: rgba(255,255,255,.58); border: 1px solid rgba(90, 120, 255, .14); }
.profile-upload-copy { display: grid; gap: 6px; min-width: 210px; flex: 1; }
.mini-btn { width: fit-content; padding: 10px 14px; border-radius: 14px; }
.sr-only-file { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 560px) { .account-hero { gap: 12px; } .avatar-edit-badge { width: 27px; height: 27px; font-size: 13px; } .profile-upload-copy { min-width: 0; } .mini-btn { width: 100%; } }
/* Etapa 29: analytics, push com imagem, perfil infantil e fullscreen mobile */
.analytics-panel { overflow:hidden; }
.analytics-grid {
display:grid;
grid-template-columns:repeat(6, minmax(110px, 1fr));
gap:12px;
margin-top:14px;
}
.analytics-tile {
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
padding:14px;
box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.analytics-tile span { display:block; color:rgba(255,255,255,.68); font-size:.82rem; margin-bottom:7px; }
.analytics-tile strong { display:block; font-size:1.35rem; color:#fff; }
.analytics-top-list { margin-top:18px; display:grid; gap:8px; }
.analytics-top-list > strong { color:#fff; margin-bottom:4px; }
.analytics-top-item {
display:grid;
grid-template-columns:42px 1fr auto;
gap:10px;
align-items:center;
padding:8px 10px;
border-radius:14px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
text-decoration:none;
color:inherit;
}
.analytics-top-item:hover { transform:translateY(-1px); background:rgba(255,255,255,.07); }
.analytics-top-item img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.analytics-top-item span { color:#fff; font-weight:700; }
.analytics-top-item em { font-style:normal; color:rgba(255,255,255,.65); font-size:.84rem; white-space:nowrap; }
.player-controls, .control-btn, #btnFullscreen {
touch-action:manipulation;
}
#btnFullscreen {
position:relative;
z-index:30;
pointer-events:auto;
-webkit-tap-highlight-color:transparent;
}
.player-box-pro iframe { border:0; }
.player-box-pro:fullscreen,
.player-box-pro:-webkit-full-screen {
width:100vw !important;
height:100vh !important;
border-radius:0 !important;
background:#000;
}
.player-box-pro:fullscreen #ytPlayer,
.player-box-pro:-webkit-full-screen #ytPlayer { height:100vh !important; }
.parental-card {
margin-top:18px;
background:linear-gradient(135deg, rgba(255,81,129,.13), rgba(54,142,255,.10));
}
.parental-summary {
display:flex;
justify-content:space-between;
gap:14px;
align-items:center;
flex-wrap:wrap;
margin-top:10px;
}
.category-checks {
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:6px;
}
.category-checks label,
.kids-pin-box {
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
padding:10px 12px;
}
.kids-profile-list { display:grid; gap:12px; margin-top:16px; }
.kids-profile-item {
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
}
.kids-profile-item strong { color:#fff; }
.kids-profile-meta { color:rgba(255,255,255,.65); font-size:.9rem; margin-top:3px; }
@media (max-width: 900px) {
.analytics-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.analytics-top-item { grid-template-columns:38px 1fr; }
.analytics-top-item em { grid-column:2; }
}
/* ETAPA 35 - Admin em cards pequenos */
.admin-quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 18px}.admin-quick-card{display:flex;flex-direction:column;gap:5px;text-decoration:none;padding:14px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(239,248,255,.92));border:1px solid rgba(107,160,255,.22);box-shadow:0 12px 28px rgba(29,78,216,.08);transition:.18s ease}.admin-quick-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(29,78,216,.14)}.admin-quick-card span{font-size:24px}.admin-quick-card strong{color:#172554;font-size:14px}.admin-quick-card em{font-size:12px;color:#64748b;font-style:normal}.category-admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:12px 0}.category-admin-card{padding:14px;border-radius:16px;background:#f8fbff;border:1px solid rgba(99,102,241,.14)}.category-admin-card strong{display:block;color:#1e3a8a}.category-admin-card span{font-size:12px;color:#64748b}
/* ETAPA 35 - Player mobile cinema fallback */
.cinema-mode-active{overflow:hidden!important}.player-box-pro.is-mobile-cinema{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:99999!important;border-radius:0!important;background:#000!important;display:flex!important;align-items:center!important;justify-content:center!important}.player-box-pro.is-mobile-cinema #ytPlayer,.player-box-pro.is-mobile-cinema iframe{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}.player-box-pro.is-mobile-cinema .player-controls{position:absolute!important;left:10px!important;right:10px!important;bottom:12px!important;z-index:100002!important}.player-box-pro.is-mobile-cinema .player-start-overlay,.player-box-pro.is-mobile-cinema .next-video-overlay{z-index:100003!important}
/* ETAPA 35 - PIN nível Netflix */
.pin-modal-open{overflow:hidden}.pin-netflix-pro{background:linear-gradient(180deg,#111827,#020617);color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 28px 90px rgba(0,0,0,.48);max-width:360px}.pin-netflix-pro h3{color:#fff;margin-bottom:4px}.pin-netflix-pro p{color:#cbd5e1}.pin-dots{display:flex;justify-content:center;gap:12px;margin:18px 0 16px}.pin-dots span{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.42);background:transparent;transition:.16s ease}.pin-dots span.is-filled{background:#38bdf8;border-color:#38bdf8;box-shadow:0 0 16px rgba(56,189,248,.55)}.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px auto;max-width:250px}.pin-keypad button{height:48px;border:0;border-radius:16px;background:rgba(255,255,255,.1);color:#fff;font-weight:800;font-size:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.pin-keypad button:active{transform:scale(.96);background:rgba(56,189,248,.28)}.pin-netflix-pro .pin-error{background:rgba(239,68,68,.12);border:1px solid rgba(248,113,113,.35);color:#fecaca;border-radius:12px;padding:9px;margin:10px 0}.pin-netflix-pro .pin-close{color:#fff;background:rgba(255,255,255,.1)}.pin-shake{animation:pinShake .38s ease}@keyframes pinShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@media(max-width:560px){.admin-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-quick-card{padding:12px;border-radius:15px}.pin-keypad button{height:52px}.pin-netflix-pro{width:calc(100% - 26px)}}
/* ETAPA 36 - SweetAlert visual real + flashes sem aparecer no rodape */
.flash{display:none !important;}
.baby-swal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,7,18,.58);backdrop-filter:blur(8px);z-index:99999;opacity:0;pointer-events:none;transition:opacity .18s ease;}
.baby-swal-root.is-open{opacity:1;pointer-events:auto;}
.baby-swal-root[hidden]{display:none !important;}
.baby-swal-card{width:min(92vw,390px);border-radius:26px;background:linear-gradient(180deg,#ffffff,#f3f8ff);color:#10213f;padding:26px 22px 20px;text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.82);transform:translateY(10px) scale(.96);transition:transform .2s ease;}
.baby-swal-root.is-open .baby-swal-card{transform:translateY(0) scale(1);}
.baby-swal-icon{width:58px;height:58px;margin:0 auto 12px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff4d67,#ffb347);color:#fff;font-size:28px;box-shadow:0 12px 30px rgba(255,77,103,.24);}
.baby-swal-card h3{margin:0 0 8px;font-size:22px;font-weight:900;color:#10213f;}
.baby-swal-card p{margin:0;color:#52627a;line-height:1.45;font-size:14px;}
.baby-swal-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap;}
.baby-swal-actions .btn,.baby-swal-actions .btn-secondary{min-width:110px;}
@media(max-width:520px){.baby-swal-card{border-radius:22px;padding:24px 18px 18px}.baby-swal-actions{flex-direction:column}.baby-swal-actions .btn,.baby-swal-actions .btn-secondary{width:100%;}}
/* ETAPA 36 - card modo infantil no topo centralizado e premium */
.parental-card,.parental-status.is-active{width:calc(100% - 28px);max-width:980px;margin:16px auto 12px;background:linear-gradient(135deg,rgba(255,77,103,.98),rgba(255,171,69,.94));color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:0 16px 40px rgba(255,93,103,.22);border-radius:22px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.parental-card strong,.parental-status.is-active strong{font-size:14px;}
.parental-card .btn-secondary,.parental-status.is-active .btn-secondary,.parental-card button,.parental-status.is-active button{background:#fff;color:#f04c65;border:none;border-radius:14px;padding:9px 12px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.10);}
@media(max-width:680px){.parental-card,.parental-status.is-active{width:calc(100% - 20px);align-items:flex-start;flex-direction:column;border-radius:18px}.parental-card button,.parental-status.is-active button{width:100%;}}
/* ETAPA 37 - correção definitiva do modal PIN e card modo infantil */
.pin-modal {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
min-height: 100vh !important;
z-index: 100000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 18px !important;
background: rgba(2, 6, 23, .72) !important;
backdrop-filter: blur(10px) !important;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
.pin-modal[hidden] { display: none !important; }
.pin-modal.is-open { opacity: 1; pointer-events: auto; }
.pin-box,
.pin-netflix-box,
.pin-netflix-pro {
width: min(92vw, 380px) !important;
max-width: 380px !important;
margin: 0 auto !important;
border-radius: 28px !important;
padding: 24px 20px 20px !important;
text-align: center !important;
transform: translateY(12px) scale(.96);
transition: transform .2s ease;
}
.pin-modal.is-open .pin-box,
.pin-modal.is-open .pin-netflix-box { transform: translateY(0) scale(1); }
.pin-icon { font-size: 32px; margin-bottom: 8px; }
.pin-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.pin-actions .btn,
.pin-actions .btn-secondary,
.pin-actions .btn-danger-soft { min-width: 128px; }
.btn-danger-soft { background: linear-gradient(135deg,#ff4d67,#ff7b54) !important; color: #fff !important; border: 0 !important; }
/* Card de modo infantil ativo: pega variações de classe usadas nas etapas anteriores */
.parental-card,
.parental-status.is-active,
.kids-active-card,
.child-mode-card,
.modo-infantil-card,
[data-parental-active-card] {
width: min(940px, calc(100% - 24px)) !important;
margin: 18px auto 14px auto !important;
padding: 14px 16px !important;
border-radius: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
color: #ffffff !important;
background: radial-gradient(circle at 10% 10%, rgba(255,255,255,.28), transparent 26%), linear-gradient(135deg,#ff4d67 0%,#ff914d 55%,#ffc44d 100%) !important;
box-shadow: 0 18px 44px rgba(255, 95, 92, .28) !important;
border: 1px solid rgba(255,255,255,.34) !important;
text-align: left !important;
}
.parental-card strong,
.parental-status.is-active strong,
.kids-active-card strong,
.child-mode-card strong,
.modo-infantil-card strong,
[data-parental-active-card] strong {
color: #fff !important;
font-weight: 900 !important;
letter-spacing: -.02em !important;
}
.parental-card button,
.parental-status.is-active button,
.kids-active-card button,
.child-mode-card button,
.modo-infantil-card button,
[data-parental-active-card] button,
.parental-card .btn-secondary,
.parental-status.is-active .btn-secondary {
background: #fff !important;
color: #ec3857 !important;
border: none !important;
border-radius: 14px !important;
padding: 10px 14px !important;
font-weight: 900 !important;
box-shadow: 0 10px 24px rgba(37, 37, 37, .14) !important;
white-space: nowrap !important;
}
.parental-card::before,
.parental-status.is-active::before,
.kids-active-card::before,
.child-mode-card::before,
.modo-infantil-card::before,
[data-parental-active-card]::before {
content: '👶';
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
border-radius: 16px;
background: rgba(255,255,255,.22);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
font-size: 22px;
}
.parental-card > div,
.parental-status.is-active > div,
.kids-active-card > div,
.child-mode-card > div,
.modo-infantil-card > div,
[data-parental-active-card] > div { flex: 1; min-width: 0; }
@media(max-width:680px){
.parental-card,
.parental-status.is-active,
.kids-active-card,
.child-mode-card,
.modo-infantil-card,
[data-parental-active-card] {
align-items: flex-start !important;
flex-wrap: wrap !important;
border-radius: 20px !important;
}
.parental-card button,
.parental-status.is-active button,
.kids-active-card button,
.child-mode-card button,
.modo-infantil-card button,
[data-parental-active-card] button { width: 100% !important; }
}
/* =========================================================
ETAPA 38 - Topo estilo Netflix / BabyKids Premium
Ajuste visual sem alterar a estrutura PHP existente.
========================================================= */
.topbar.topbar-home,
.topbar {
align-items: center;
gap: 14px;
}
.topbar .brand,
.brand {
letter-spacing: -1px;
white-space: nowrap;
}
.topbar-actions {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.topbar-actions a,
.topbar-actions button {
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.topbar-actions a:hover,
.topbar-actions button:hover {
transform: translateY(-1px);
}
.topbar-actions .user-greeting {
display: inline-flex;
align-items: center;
gap: 9px;
background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.topbar-actions .top-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
background: linear-gradient(135deg, #ff5f6d, #ffc371);
color: #fff;
font-size: 12px;
font-weight: 900;
box-shadow: 0 8px 18px rgba(255, 95, 109, .32);
}
.topbar-actions .top-link-counter {
background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.06));
border: 1px solid rgba(255,255,255,.12);
}
.topbar-actions .top-link-counter::before {
content: '❤';
margin-right: 6px;
color: #ff4f7b;
}
.topbar-actions .top-link[href*="perfil"],
.topbar-actions .top-link[href*="perfis"] {
background: linear-gradient(135deg, rgba(255, 95, 109, .28), rgba(255, 195, 113, .18));
border: 1px solid rgba(255, 195, 113, .22);
}
.topbar-actions .btn-ghost,
.topbar-actions a[href*="sair"] {
background: rgba(255, 79, 123, .10);
border: 1px solid rgba(255, 79, 123, .20);
}
/* Mobile: transforma os botões em uma bandeja compacta de perfil */
@media (max-width: 720px) {
.topbar.topbar-home,
.topbar {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
padding-bottom: 14px;
}
.topbar .brand-link,
.topbar .brand {
justify-self: start;
}
.topbar-actions {
width: 100%;
justify-content: flex-start;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 12px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(14, 29, 52, .86), rgba(7, 17, 31, .72));
border: 1px solid rgba(255,255,255,.09);
box-shadow: 0 18px 46px rgba(0,0,0,.24);
backdrop-filter: blur(12px);
}
.topbar-actions .user-greeting {
grid-column: 1 / -1;
justify-content: flex-start;
min-height: 48px;
padding: 10px 13px;
border-radius: 18px;
font-size: 15px;
font-weight: 900;
}
.topbar-actions .top-avatar {
width: 34px;
height: 34px;
font-size: 13px;
}
.topbar-actions .top-link,
.topbar-actions .btn,
.topbar-actions .btn-ghost,
.topbar-actions a,
.topbar-actions button {
width: 100%;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 12px;
border-radius: 17px;
font-size: 14px;
font-weight: 850;
line-height: 1.15;
white-space: normal;
}
.topbar-actions .top-link-counter {
order: 2;
}
.topbar-actions .top-link[href*="perfil"],
.topbar-actions .top-link[href*="perfis"] {
order: 3;
}
.topbar-actions .top-link[href*="admin"] {
order: 4;
}
.topbar-actions .btn-ghost,
.topbar-actions a[href*="sair"] {
order: 5;
}
.topbar-actions .counter-badge {
min-width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
margin-left: 7px;
border-radius: 999px;
}
}
@media (max-width: 390px) {
.topbar-actions {
grid-template-columns: 1fr;
}
}
/* ETAPA39 - Topo estilo Netflix com menu do usuario */
.topbar .topbar-actions.bk-guest-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 10px !important;
}
.topbar .topbar-actions.bk-user-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 10px !important;
position: relative;
min-width: 0;
}
.bk-user-menu {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
}
.bk-user-trigger {
appearance: none;
border: 1px solid rgba(255,255,255,.12);
background: rgba(16, 31, 54, .92);
color: #fff;
min-height: 48px;
display: inline-flex;
align-items: center;
gap: 10px;
border-radius: 999px;
padding: 7px 10px 7px 7px;
box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
cursor: pointer;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
max-width: min(72vw, 315px);
}
.bk-user-trigger:active { transform: scale(.98); }
.bk-user-trigger[aria-expanded="true"] { background: rgba(22, 42, 73, .98); border-color: rgba(255, 82, 115, .45); }
.bk-user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex: 0 0 auto;
background: linear-gradient(135deg, #ff5574, #ffb06b);
color: #fff;
font-weight: 900;
font-size: 15px;
box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.bk-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bk-user-hello {
font-weight: 900;
font-size: 14px;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bk-user-equals {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.1);
color: #fff;
font-weight: 900;
font-size: 18px;
line-height: 1;
flex: 0 0 auto;
}
.bk-user-dropdown {
position: absolute;
right: 0;
top: calc(100% + 12px);
width: 230px;
padding: 10px;
border-radius: 20px;
background: rgba(9, 19, 34, .98);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 22px 60px rgba(0,0,0,.45);
z-index: 10010;
opacity: 0;
transform: translateY(-8px) scale(.98);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.bk-user-menu.is-open .bk-user-dropdown {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.bk-user-dropdown::before {
content: '';
position: absolute;
top: -7px;
right: 25px;
width: 14px;
height: 14px;
background: rgba(9, 19, 34, .98);
border-left: 1px solid rgba(255,255,255,.12);
border-top: 1px solid rgba(255,255,255,.12);
transform: rotate(45deg);
}
.bk-user-dropdown a {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
text-decoration: none;
padding: 12px 12px;
border-radius: 14px;
font-weight: 800;
font-size: 14px;
transition: background .18s ease, transform .18s ease;
}
.bk-user-dropdown a:hover,
.bk-user-dropdown a:focus {
background: rgba(255,255,255,.08);
transform: translateX(2px);
outline: none;
}
.bk-user-dropdown a.bk-danger-link { color: #ff7b91; }
.bk-user-dropdown a.bk-admin-link { color: #8dd6ff; }
.bk-menu-backdrop {
position: fixed;
inset: 0;
z-index: 10000;
background: transparent;
display: none;
}
.bk-menu-backdrop.is-open { display: block; }
@media (max-width: 680px) {
.topbar.topbar-home {
align-items: center !important;
gap: 14px !important;
}
.topbar .brand, .brand {
font-size: clamp(28px, 8vw, 42px) !important;
}
.topbar .topbar-actions.bk-user-actions,
.topbar .topbar-actions.bk-guest-actions {
margin-left: auto !important;
}
.bk-user-trigger {
max-width: 54vw;
min-height: 44px;
padding: 6px 8px 6px 6px;
}
.bk-user-avatar {
width: 33px;
height: 33px;
font-size: 14px;
}
.bk-user-hello {
max-width: 92px;
font-size: 13px;
}
.bk-user-equals {
width: 25px;
height: 25px;
font-size: 17px;
}
.bk-user-dropdown {
right: 0;
width: min(250px, calc(100vw - 30px));
}
.topbar .topbar-actions.bk-guest-actions .top-link,
.topbar .topbar-actions.bk-guest-actions .btn {
white-space: nowrap;
padding: 10px 13px !important;
border-radius: 16px !important;
}
}
/* =========================================================
BabyKids - Topo dropdown automático seguro
Não depende de partials/topbar.php.
Transforma .topbar-actions em menu premium via JS.
========================================================= */
.bk-auto-userbar {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
max-width: 100%;
position: relative;
z-index: 90;
}
.bk-auto-user-chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 6px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, .64);
border: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 12px 24px rgba(0,0,0,.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.bk-auto-avatar {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 999px;
object-fit: cover;
background: rgba(255,255,255,.08);
border: 2px solid rgba(255,255,255,.22);
}
.bk-auto-hello {
color: #fff;
font-size: 13px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
max-width: 145px;
overflow: hidden;
text-overflow: ellipsis;
}
.bk-auto-menu {
position: relative;
flex: 0 0 auto;
}
.bk-auto-menu-btn {
width: 36px;
height: 36px;
border: 0;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 20px rgba(0,0,0,.14);
transition: transform .18s ease, background .18s ease;
touch-action: manipulation;
}
.bk-auto-menu-btn span {
width: 15px;
height: 2px;
border-radius: 999px;
background: #fff;
display: block;
transition: transform .18s ease, opacity .18s ease;
}
.bk-auto-menu-btn.is-open {
background: linear-gradient(135deg, rgba(125,211,252,.34), rgba(249,168,212,.22));
}
.bk-auto-menu-btn.is-open span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.bk-auto-menu-btn.is-open span:nth-child(2) {
opacity: 0;
}
.bk-auto-menu-btn.is-open span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.bk-auto-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 190px;
padding: 8px;
border-radius: 18px;
background: rgba(9, 14, 26, .98);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 42px rgba(0,0,0,.35);
display: none;
flex-direction: column;
gap: 4px;
transform: translateY(-6px) scale(.98);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 99999;
}
.bk-auto-dropdown.is-open {
display: flex;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.bk-auto-dropdown a {
display: flex !important;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 10px 12px;
border-radius: 12px;
color: #fff !important;
text-decoration: none !important;
font-size: 13px;
font-weight: 850;
line-height: 1;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transition: background .18s ease, transform .18s ease;
}
.bk-auto-dropdown a:hover {
background: rgba(255,255,255,.08) !important;
transform: translateX(2px);
}
.bk-auto-dropdown a.bk-auto-danger {
color: #fecaca !important;
}
.bk-auto-dropdown a.bk-auto-danger:hover {
background: rgba(239,68,68,.16) !important;
}
/* Entrar/Cadastrar mantém em linha e mais bonito */
.topbar-actions.bk-auth-clean {
display: inline-flex !important;
align-items: center;
gap: 8px;
flex-wrap: nowrap !important;
}
.topbar-actions.bk-auth-clean a {
border-radius: 999px;
white-space: nowrap;
}
@media (max-width: 640px) {
.bk-auto-userbar {
max-width: 100%;
}
.bk-auto-user-chip {
padding: 5px 6px;
gap: 7px;
}
.bk-auto-avatar {
width: 31px;
height: 31px;
flex-basis: 31px;
}
.bk-auto-hello {
max-width: calc(100vw - 120px);
font-size: 12.5px;
}
.bk-auto-menu-btn {
width: 34px;
height: 34px;
}
.bk-auto-dropdown {
min-width: 178px;
right: 0;
}
}
/* =========================================================
BabyKids ETAPA41 - Refinamento do topo usuário
Compacto, alinhado e sem card grande no mobile.
========================================================= */
/* Remove o visual de "caixa grande" do container antigo */
.topbar-actions[data-bk-auto-menu="1"] {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
min-height: unset !important;
height: auto !important;
width: auto !important;
max-width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
overflow: visible !important;
}
/* Topo compacto */
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-userbar {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
width: auto !important;
max-width: 100% !important;
}
/* Chip do usuário estilo Netflix */
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-user-chip {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
max-width: min(245px, calc(100vw - 112px)) !important;
padding: 5px 8px 5px 5px !important;
border-radius: 13px !important;
background: rgba(15, 23, 42, .72) !important;
border: 1px solid rgba(255, 255, 255, .13) !important;
box-shadow: 0 8px 20px rgba(0,0,0,.16) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
/* Avatar quadradinho com cantos arredondados, estilo Netflix */
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-avatar {
width: 34px !important;
height: 34px !important;
flex: 0 0 34px !important;
border-radius: 9px !important;
object-fit: cover !important;
background: #111827 !important;
border: 2px solid rgba(255,255,255,.18) !important;
box-shadow: none !important;
}
/* Apenas primeiro nome */
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-hello {
color: #fff !important;
font-size: 13.5px !important;
font-weight: 900 !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 150px !important;
}
/* Botão hamburguer mais compacto e alinhado */
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-menu-btn {
width: 39px !important;
height: 39px !important;
border-radius: 14px !important;
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.15) !important;
box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
/* Dropdown mais próximo do botão */
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-dropdown {
top: calc(100% + 8px) !important;
}
/* Mobile: mantém tudo na direita sem criar bloco alto */
@media (max-width: 640px) {
.topbar-actions[data-bk-auto-menu="1"] {
align-self: flex-end !important;
margin-top: 0 !important;
}
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-userbar {
gap: 7px !important;
}
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-user-chip {
max-width: calc(100vw - 118px) !important;
padding: 4px 7px 4px 4px !important;
border-radius: 12px !important;
}
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-avatar {
width: 31px !important;
height: 31px !important;
flex-basis: 31px !important;
border-radius: 8px !important;
}
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-hello {
font-size: 12.5px !important;
max-width: calc(100vw - 188px) !important;
}
.topbar-actions[data-bk-auto-menu="1"] .bk-auto-menu-btn {
width: 37px !important;
height: 37px !important;
border-radius: 13px !important;
}
}
/* =========================================================
BabyKids - Tema Infantil Oficial
Inspirado na logomarca: azul, rosa, amarelo, panda, estrelas
Aplicado sem alterar PHP/funcionalidades.
========================================================= */
:root {
--bk-blue: #0797ff;
--bk-blue-dark: #006ce9;
--bk-pink: #ff4fa3;
--bk-pink-2: #ff6f91;
--bk-yellow: #ffd32a;
--bk-orange: #ff9f1c;
--bk-sky: #dff6ff;
--bk-ink: #0d2455;
--bk-card: rgba(255, 255, 255, .86);
}
html, body {
background:
radial-gradient(circle at 12% 16%, rgba(255, 79, 163, .18), transparent 18%),
radial-gradient(circle at 82% 12%, rgba(255, 211, 42, .23), transparent 15%),
linear-gradient(180deg, #35b8ff 0%, #e9fbff 48%, #f7fcff 100%) !important;
color: var(--bk-ink) !important;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 10% 85%, rgba(255,255,255,.75) 0 28px, transparent 30px),
radial-gradient(circle at 16% 86%, rgba(255,255,255,.72) 0 40px, transparent 42px),
radial-gradient(circle at 22% 85%, rgba(255,255,255,.68) 0 26px, transparent 28px),
radial-gradient(circle at 82% 20%, rgba(255,255,255,.60) 0 40px, transparent 42px),
radial-gradient(circle at 88% 22%, rgba(255,255,255,.68) 0 55px, transparent 57px);
opacity: .9;
}
.app-shell {
max-width: 1320px !important;
}
.topbar {
margin: 14px auto 18px !important;
width: min(1280px, calc(100% - 24px)) !important;
border-radius: 30px !important;
background: linear-gradient(135deg, rgba(0, 136, 255, .86), rgba(0, 108, 233, .92)) !important;
border: 1px solid rgba(255,255,255,.38) !important;
box-shadow: 0 20px 50px rgba(0, 108, 233, .20), inset 0 1px 0 rgba(255,255,255,.35) !important;
backdrop-filter: blur(18px) !important;
}
.brand {
font-size: clamp(28px, 4vw, 42px) !important;
font-weight: 1000 !important;
letter-spacing: -1.6px !important;
color: #17a8ff !important;
text-shadow:
0 3px 0 #005fc9,
0 7px 12px rgba(0,0,0,.18) !important;
background: #fff !important;
border-radius: 22px !important;
padding: 5px 14px 8px !important;
box-shadow: 0 12px 24px rgba(0,0,0,.14), inset 0 -4px 0 rgba(0,108,233,.10) !important;
}
.brand::before {
content: '🐼';
margin-right: 8px;
filter: drop-shadow(0 3px 4px rgba(0,0,0,.15));
}
.brand span {
color: #ff4fa3 !important;
text-shadow:
0 3px 0 #d51d66,
0 7px 12px rgba(0,0,0,.18) !important;
}
.top-link,
.btn-ghost,
.btn-secondary,
.btn {
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.30) !important;
box-shadow: 0 10px 22px rgba(0, 92, 180, .14) !important;
}
.top-link,
.btn-ghost,
.btn-secondary {
background: rgba(255,255,255,.22) !important;
color: #fff !important;
}
.btn,
.btn-watch,
.install-btn {
background: linear-gradient(135deg, #ff4fa3, #ff7c54) !important;
color: #fff !important;
}
.counter-badge {
background: linear-gradient(135deg, #ffd32a, #ff9f1c) !important;
color: #10346b !important;
}
.bk-top-vip-badge,
.bk-plan-pill.vip {
background: linear-gradient(135deg, #ffd32a, #ff9f1c) !important;
color: #123 !important;
}
.hero-streaming {
padding-top: 0 !important;
}
.hero-carousel {
border-radius: 36px !important;
border: 4px solid rgba(255,255,255,.75) !important;
background: linear-gradient(135deg, #dff6ff, #fff) !important;
box-shadow: 0 28px 70px rgba(0,108,233,.22) !important;
overflow: hidden !important;
}
.hero-carousel::before,
.search-panel::before,
.section h2::before {
content: '⭐';
position: absolute;
animation: bkFloatStar 3.2s ease-in-out infinite;
}
.hero-carousel::before {
right: 22px;
top: 22px;
font-size: 34px;
z-index: 4;
}
.hero-content {
padding: clamp(24px, 5vw, 52px) !important;
}
.eyebrow {
background: rgba(255,255,255,.72) !important;
color: #0d2455 !important;
border: 1px solid rgba(255,255,255,.9) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.08) !important;
font-weight: 950 !important;
}
.hero-slide h1 {
color: #fff !important;
text-shadow: 0 4px 18px rgba(0,0,0,.32) !important;
font-weight: 1000 !important;
}
.hero-slide p {
color: rgba(255,255,255,.92) !important;
font-weight: 800 !important;
}
.search-panel,
.child-mode-banner,
.flash,
.install-floating,
.push-floating {
border-radius: 28px !important;
background: rgba(255,255,255,.72) !important;
color: #113168 !important;
border: 2px solid rgba(255,255,255,.78) !important;
box-shadow: 0 20px 45px rgba(0,108,233,.15) !important;
backdrop-filter: blur(16px) !important;
}
.search-panel {
position: relative;
}
.search-panel::before {
left: 18px;
top: -16px;
font-size: 30px;
}
.search-input-wrap input,
.search-input,
input[type="search"] {
background: #fff !important;
color: #0d2455 !important;
border: 2px solid rgba(7,151,255,.18) !important;
border-radius: 22px !important;
box-shadow: inset 0 2px 0 rgba(7,151,255,.05) !important;
}
.category-filter {
border-radius: 999px !important;
background: rgba(255,255,255,.68) !important;
color: #0d2455 !important;
border: 2px solid rgba(7,151,255,.16) !important;
font-weight: 950 !important;
}
.category-filter.is-active {
background: linear-gradient(135deg, #ff4fa3, #ff7c54) !important;
color: #fff !important;
border-color: transparent !important;
}
.section h2,
.section-title,
.section h3 {
color: #10346b !important;
font-weight: 1000 !important;
letter-spacing: -1px !important;
position: relative;
}
.section h2::before {
left: -38px;
top: -4px;
font-size: 24px;
}
.video-card,
.movie-card,
.card,
.continue-card {
border-radius: 24px !important;
background: rgba(255,255,255,.86) !important;
border: 2px solid rgba(255,255,255,.9) !important;
box-shadow: 0 18px 40px rgba(0,108,233,.16) !important;
color: #0d2455 !important;
overflow: hidden !important;
transition: transform .18s ease, box-shadow .18s ease !important;
}
.video-card:hover,
.movie-card:hover,
.card:hover,
.continue-card:hover {
transform: translateY(-5px) scale(1.015) !important;
box-shadow: 0 25px 55px rgba(255,79,163,.20) !important;
}
.video-card img,
.movie-card img,
.card img {
border-radius: 18px !important;
}
.footer {
background: rgba(255,255,255,.62) !important;
color: #0d2455 !important;
border-top: 1px solid rgba(255,255,255,.7) !important;
}
.bk-auto-user-chip {
background: rgba(255,255,255,.24) !important;
border-color: rgba(255,255,255,.38) !important;
}
.bk-auto-dropdown {
background: rgba(255,255,255,.96) !important;
color: #0d2455 !important;
border: 1px solid rgba(7,151,255,.18) !important;
box-shadow: 0 22px 50px rgba(0,108,233,.20) !important;
}
.bk-auto-dropdown a {
color: #0d2455 !important;
border-radius: 14px !important;
}
.bk-auto-dropdown a:hover {
background: rgba(7,151,255,.10) !important;
}
@keyframes bkFloatStar {
0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); }
50% { transform: translateY(-8px) rotate(9deg) scale(1.08); }
}
@media (max-width: 680px) {
.topbar {
align-items: center !important;
padding: 12px !important;
border-radius: 26px !important;
}
.brand {
font-size: clamp(24px, 7vw, 34px) !important;
padding: 5px 11px 7px !important;
}
.hero-carousel {
border-radius: 28px !important;
min-height: 390px !important;
}
.hero-content {
min-height: 390px !important;
padding: 26px !important;
}
.hero-slide h1 {
font-size: clamp(30px, 9vw, 46px) !important;
}
}
/* =========================================================
BabyKids - FIX legibilidade + logo oficial
========================================================= */
.brand {
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.brand::before { content: none !important; }
.bk-brand-logo-img {
display: block !important;
width: clamp(170px, 34vw, 285px) !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
filter: drop-shadow(0 10px 18px rgba(0, 78, 170, .22)) !important;
}
.brand:not(:has(img)) {
background: rgba(255,255,255,.92) !important;
color: #0b6ee7 !important;
padding: 7px 14px !important;
border-radius: 24px !important;
text-shadow: none !important;
}
.card, .video-card, .movie-card, .continue-card, .auth-card, .login-card, .register-card,
.profile-card, .profile-main, .dashboard-card, .history-card, .panel, .box, .form-card,
.content-card, .admin-card, .bk-card {
background: rgba(255,255,255,.92) !important;
color: #10346b !important;
border: 2px solid rgba(255,255,255,.92) !important;
}
.card *, .video-card *, .movie-card *, .continue-card *, .auth-card *, .login-card *,
.register-card *, .profile-card *, .profile-main *, .dashboard-card *, .history-card *,
.panel *, .box *, .form-card *, .content-card *, .admin-card *, .bk-card * {
color: inherit;
}
h1, h2, h3, h4, label, .section h2, .section-title, .video-title, .card-title,
.movie-title, .profile-title, .auth-card h1, .auth-card h2 {
color: #10346b !important;
text-shadow: none !important;
}
p, small, .helper, .muted, .text-muted, .video-meta, .card-description,
.card p, .video-card p, .movie-card p, .auth-card p, .profile-card p {
color: rgba(16,52,107,.78) !important;
}
.video-card .video-info, .video-card .card-body, .movie-card .video-info,
.movie-card .card-body, .video-card footer, .movie-card footer {
background: #fff !important;
color: #10346b !important;
}
.video-card a, .movie-card a { color: #10346b !important; }
.video-card .btn, .movie-card .btn, .btn, .btn-watch {
color: #fff !important;
}
.btn-secondary, .btn-ghost, .video-card .btn-secondary, .movie-card .btn-secondary {
background: rgba(7,151,255,.13) !important;
color: #10346b !important;
border: 2px solid rgba(7,151,255,.18) !important;
}
.auth-card input, .login-card input, .register-card input, .profile-card input,
.profile-main input, input[type="text"], input[type="password"], input[type="email"],
input[type="search"], textarea, select {
background: #fff !important;
color: #10346b !important;
border: 2px solid rgba(7,151,255,.18) !important;
caret-color: #ff4fa3 !important;
font-size: 16px !important;
}
input::placeholder, textarea::placeholder {
color: rgba(16,52,107,.48) !important;
}
table, .history-table {
background: rgba(255,255,255,.9) !important;
color: #10346b !important;
}
th {
color: #10346b !important;
background: rgba(7,151,255,.10) !important;
}
td {
color: rgba(16,52,107,.82) !important;
}
.profile-kids-card, .kids-card, .child-profile-card {
color: #fff !important;
}
.profile-kids-card *, .kids-card *, .child-profile-card * {
color: inherit !important;
}
@media (max-width: 680px) {
.bk-brand-logo-img {
width: clamp(150px, 46vw, 230px) !important;
}
.auth-card, .login-card, .register-card, .profile-main, .profile-card {
width: min(92vw, 640px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* =========================================================
BabyKids - Cards de vídeo estilo infantil branco/tracejado
Inspirado no modelo enviado: cards claros, fofos e legíveis.
========================================================= */
.video-card,
.movie-card,
.video-item,
.movie-item,
.swiper-slide .card,
.video-grid .card,
.category-row .card,
.content-grid .card {
position: relative !important;
background:
radial-gradient(circle at 18% 18%, rgba(125,211,252,.18), transparent 18%),
radial-gradient(circle at 85% 82%, rgba(255,79,163,.13), transparent 18%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,252,255,.96)) !important;
color: #10346b !important;
border: 2px dashed rgba(7,151,255,.35) !important;
border-radius: 28px !important;
box-shadow: 0 18px 42px rgba(0,108,233,.12) !important;
padding: 12px !important;
overflow: hidden !important;
}
.video-card:nth-child(odd),
.movie-card:nth-child(odd),
.video-grid .card:nth-child(odd),
.category-row .card:nth-child(odd) {
border-color: rgba(255,79,163,.40) !important;
}
.video-card::before,
.movie-card::before,
.video-grid .card::before,
.category-row .card::before {
content: '⭐';
position: absolute;
top: 12px;
left: 12px;
z-index: 4;
width: 30px;
height: 30px;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(255,255,255,.78);
box-shadow: 0 8px 18px rgba(0,108,233,.12);
font-size: 17px;
pointer-events: none;
}
.video-card::after,
.movie-card::after,
.video-grid .card::after,
.category-row .card::after {
content: '';
position: absolute;
right: 16px;
bottom: 16px;
width: 42px;
height: 42px;
opacity: .22;
pointer-events: none;
background:
radial-gradient(circle at 50% 20%, #ff4fa3 0 7px, transparent 8px),
radial-gradient(circle at 20% 58%, #ffd32a 0 6px, transparent 7px),
radial-gradient(circle at 78% 62%, #7dd3fc 0 6px, transparent 7px);
}
.video-card img,
.movie-card img,
.video-item img,
.movie-item img,
.video-grid .card img,
.category-row .card img,
.content-grid .card img {
border-radius: 22px !important;
border: 3px solid #fff !important;
box-shadow: 0 12px 26px rgba(0,108,233,.14) !important;
object-fit: cover !important;
}
.video-thumb,
.movie-thumb,
.card-thumb,
.thumbnail,
.video-card .thumb,
.movie-card .thumb {
border-radius: 22px !important;
overflow: hidden !important;
background: #fff !important;
}
.video-card .card-body,
.movie-card .card-body,
.video-card .video-info,
.movie-card .video-info,
.video-card .content,
.movie-card .content,
.video-grid .card .card-body,
.category-row .card .card-body,
.content-grid .card .card-body {
background: transparent !important;
color: #10346b !important;
padding: 14px 8px 8px !important;
}
.video-card h3,
.movie-card h3,
.video-card h4,
.movie-card h4,
.video-card .title,
.movie-card .title,
.video-card .video-title,
.movie-card .video-title,
.video-grid .card h3,
.category-row .card h3 {
color: #0754bd !important;
font-weight: 1000 !important;
font-size: clamp(16px, 3.8vw, 22px) !important;
line-height: 1.08 !important;
text-shadow: 0 2px 0 rgba(255,255,255,.9) !important;
margin: 6px 0 10px !important;
}
.video-card p,
.movie-card p,
.video-card .meta,
.movie-card .meta,
.video-card .video-meta,
.movie-card .video-meta,
.video-card small,
.movie-card small,
.video-grid .card p,
.category-row .card p {
color: rgba(16,52,107,.68) !important;
font-weight: 750 !important;
}
.video-card .badge,
.movie-card .badge,
.video-card .featured-badge,
.movie-card .featured-badge,
.video-card .tag,
.movie-card .tag {
background: linear-gradient(135deg, #ff4fa3, #ff7c54) !important;
color: #fff !important;
border-radius: 999px !important;
border: 2px solid rgba(255,255,255,.75) !important;
box-shadow: 0 8px 18px rgba(255,79,163,.18) !important;
font-weight: 950 !important;
}
.video-card .btn,
.movie-card .btn,
.video-card .btn-watch,
.movie-card .btn-watch,
.video-card a.btn,
.movie-card a.btn,
.video-grid .card .btn,
.category-row .card .btn {
min-height: 44px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #ff4fa3, #ff7c54) !important;
color: #fff !important;
font-weight: 1000 !important;
border: 2px solid rgba(255,255,255,.65) !important;
box-shadow: 0 12px 26px rgba(255,79,163,.22) !important;
}
.video-card .btn-secondary,
.movie-card .btn-secondary,
.video-card a:not(.btn):not(.video-link),
.movie-card a:not(.btn):not(.video-link) {
border-radius: 999px !important;
background: rgba(7,151,255,.13) !important;
color: #10346b !important;
border: 2px solid rgba(7,151,255,.18) !important;
font-weight: 950 !important;
}
.video-card:hover,
.movie-card:hover,
.video-grid .card:hover,
.category-row .card:hover {
transform: translateY(-6px) scale(1.018) !important;
box-shadow: 0 26px 58px rgba(255,79,163,.18) !important;
border-style: solid !important;
}
/* Se a grade tiver fundo escuro, clareia também o container */
.video-grid,
.movie-grid,
.category-row,
.videos-row,
.content-grid,
.section-row {
background: rgba(255,255,255,.35) !important;
border-radius: 28px !important;
}
/* Ajuste para mobile: cards mais parecidos com blocos infantis */
@media (max-width: 680px) {
.video-card,
.movie-card,
.video-item,
.movie-item,
.video-grid .card,
.category-row .card,
.content-grid .card {
border-radius: 24px !important;
padding: 9px !important;
}
.video-card img,
.movie-card img,
.video-grid .card img,
.category-row .card img {
border-radius: 18px !important;
}
.video-card h3,
.movie-card h3,
.video-card .title,
.movie-card .title,
.video-card .video-title,
.movie-card .video-title {
font-size: 18px !important;
}
}
/* =========================================================
BabyKids - FIX REAL dos cards da HOME
A home.php usa .card-video, .card-item, .thumb-wrap, .card-body.
========================================================= */
/* Logo oficial no topo da home */
.brand-logo-official,
.brand {
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
padding: 0 !important;
}
.brand::before {
content: none !important;
}
.bk-brand-logo-img {
display: block !important;
width: clamp(175px, 34vw, 310px) !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
filter: drop-shadow(0 10px 18px rgba(0, 78, 170, .22)) !important;
}
/* Container horizontal dos cards */
.scroll-row.drag-row {
background: rgba(255,255,255,.35) !important;
border-radius: 30px !important;
padding: 14px !important;
gap: 18px !important;
}
/* Card real do home.php */
.card-video,
.card-item.card-video,
.card-video-continue {
position: relative !important;
flex: 0 0 clamp(190px, 42vw, 260px) !important;
width: clamp(190px, 42vw, 260px) !important;
background:
radial-gradient(circle at 18% 18%, rgba(125,211,252,.18), transparent 18%),
radial-gradient(circle at 85% 82%, rgba(255,79,163,.14), transparent 18%),
linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,252,255,.98)) !important;
color: #10346b !important;
border: 2px dashed rgba(7,151,255,.38) !important;
border-radius: 30px !important;
box-shadow: 0 18px 42px rgba(0,108,233,.13) !important;
padding: 12px !important;
overflow: hidden !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.card-video:nth-child(odd) {
border-color: rgba(255,79,163,.44) !important;
}
.card-video::before {
content: '⭐';
position: absolute;
top: 13px;
left: 13px;
z-index: 5;
width: 31px;
height: 31px;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(255,255,255,.82);
box-shadow: 0 8px 18px rgba(0,108,233,.14);
font-size: 17px;
pointer-events: none;
}
.card-video::after {
content: '';
position: absolute;
right: 14px;
bottom: 14px;
width: 44px;
height: 44px;
opacity: .22;
pointer-events: none;
background:
radial-gradient(circle at 50% 20%, #ff4fa3 0 7px, transparent 8px),
radial-gradient(circle at 20% 58%, #ffd32a 0 6px, transparent 7px),
radial-gradient(circle at 78% 62%, #7dd3fc 0 6px, transparent 7px);
}
/* Imagem */
.card-video .thumb-wrap {
display: block !important;
position: relative !important;
border-radius: 24px !important;
overflow: hidden !important;
background: #fff !important;
border: 3px solid #fff !important;
box-shadow: 0 12px 26px rgba(0,108,233,.14) !important;
}
.card-video .thumb-wrap img {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
min-height: 118px !important;
object-fit: cover !important;
display: block !important;
border-radius: 20px !important;
}
/* Badge destaque */
.card-video .badge {
position: absolute !important;
top: 10px !important;
left: 10px !important;
z-index: 6 !important;
background: linear-gradient(135deg, #ff4fa3, #ff7c54) !important;
color: #fff !important;
border-radius: 999px !important;
padding: 7px 11px !important;
border: 2px solid rgba(255,255,255,.75) !important;
box-shadow: 0 8px 18px rgba(255,79,163,.22) !important;
font-weight: 950 !important;
font-size: 12px !important;
}
/* Corpo do card */
.card-video .card-body {
background: transparent !important;
color: #10346b !important;
padding: 14px 6px 4px !important;
}
.card-video .card-title {
color: #0754bd !important;
font-weight: 1000 !important;
font-size: clamp(17px, 4vw, 22px) !important;
line-height: 1.1 !important;
margin: 0 0 10px !important;
text-shadow: 0 2px 0 rgba(255,255,255,.9) !important;
}
.card-video .card-meta {
color: rgba(16,52,107,.68) !important;
font-weight: 800 !important;
font-size: 14px !important;
margin-bottom: 12px !important;
}
.card-video .card-actions {
display: grid !important;
gap: 9px !important;
}
/* Botões */
.card-video .btn,
.card-video .btn-watch {
width: 100% !important;
min-height: 44px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #ff4fa3, #ff7c54) !important;
color: #fff !important;
font-weight: 1000 !important;
border: 2px solid rgba(255,255,255,.70) !important;
box-shadow: 0 12px 26px rgba(255,79,163,.23) !important;
text-align: center !important;
}
.card-video .btn-ghost {
width: 100% !important;
min-height: 42px !important;
border-radius: 999px !important;
background: rgba(7,151,255,.13) !important;
color: #10346b !important;
border: 2px solid rgba(7,151,255,.18) !important;
font-weight: 950 !important;
text-align: center !important;
}
.card-video:hover {
transform: translateY(-6px) scale(1.018) !important;
border-style: solid !important;
box-shadow: 0 26px 58px rgba(255,79,163,.20) !important;
}
/* Títulos das seções da home */
.section-title {
color: #10346b !important;
font-weight: 1000 !important;
text-shadow: 0 2px 0 rgba(255,255,255,.8) !important;
}
.section-sub {
color: rgba(16,52,107,.62) !important;
font-weight: 700 !important;
}
/* Mobile */
@media (max-width: 680px) {
.bk-brand-logo-img {
width: clamp(155px, 48vw, 240px) !important;
}
.scroll-row.drag-row {
padding: 12px !important;
gap: 14px !important;
}
.card-video,
.card-item.card-video,
.card-video-continue {
flex-basis: min(44vw, 210px) !important;
width: min(44vw, 210px) !important;
min-width: 168px !important;
border-radius: 24px !important;
padding: 9px !important;
}
.card-video .thumb-wrap {
border-radius: 20px !important;
}
.card-video .card-title {
font-size: 17px !important;
}
.card-video .btn,
.card-video .btn-watch,
.card-video .btn-ghost {
min-height: 40px !important;
font-size: 14px !important;
}
}
@media (max-width: 430px) {
.card-video,
.card-item.card-video,
.card-video-continue {
flex-basis: 44vw !important;
width: 44vw !important;
min-width: 155px !important;
}
}
/* =========================================================
BabyKids - Cards infantis da home (modelo com play e coração)
Mantém a estrutura do sistema e substitui apenas o visual dos cards.
========================================================= */
/* BabyKids - cards infantis de vídeos
Mantém a estrutura atual e só personaliza os cards da home. */
.scroll-row .bk-video-card,
.drag-row .bk-video-card {
flex: 0 0 clamp(285px, 34vw, 430px);
}
.bk-video-card {
position: relative;
overflow: hidden;
border-radius: 28px;
padding: 14px 14px 16px;
background: rgba(255, 255, 255, .96);
border: 3px dashed rgba(127, 189, 255, .65);
box-shadow: 0 18px 36px rgba(37, 99, 235, .10);
color: #124aa0;
transition: transform .22s ease, box-shadow .22s ease;
}
.bk-video-card:nth-child(4n + 1) { border-color: rgba(255, 132, 170, .70); }
.bk-video-card:nth-child(4n + 2) { border-color: rgba(125, 198, 255, .75); }
.bk-video-card:nth-child(4n + 3) { border-color: rgba(197, 156, 255, .70); }
.bk-video-card:nth-child(4n + 4) { border-color: rgba(255, 205, 120, .78); }
.bk-video-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 44px rgba(37, 99, 235, .16);
}
.bk-video-thumb {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 22px;
background: #dff4ff;
text-decoration: none;
}
.bk-video-cover {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .28s ease;
}
.bk-video-card:hover .bk-video-cover {
transform: scale(1.035);
}
.bk-play-circle {
position: absolute;
left: 50%;
top: 50%;
width: clamp(58px, 6.4vw, 86px);
height: clamp(58px, 6.4vw, 86px);
transform: translate(-50%, -50%);
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, .95);
box-shadow: 0 12px 28px rgba(255, 105, 135, .24);
transition: transform .22s ease;
pointer-events: none;
}
.bk-play-circle img {
width: 44%;
height: 44%;
object-fit: contain;
margin-left: 0;
transform: translateX(0);
}
.bk-video-card:hover .bk-play-circle {
transform: translate(-50%, -50%) scale(1.08);
}
.bk-card-badge {
position: absolute;
top: 10px;
left: 10px;
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
border-radius: 999px;
background: linear-gradient(135deg, #ff4f91, #ff7aa8);
color: #fff;
font-size: 1rem;
font-weight: 900;
line-height: 1;
box-shadow: 0 8px 18px rgba(255, 79, 145, .28);
border: 2px solid rgba(255, 255, 255, .45);
}
.bk-card-badge-resume {
background: linear-gradient(135deg, #6c63ff, #45caff);
box-shadow: 0 8px 18px rgba(69, 202, 255, .26);
}
.bk-video-info {
padding: 14px 4px 0;
}
.bk-video-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.25em;
color: #0754b8;
font-size: clamp(.88rem, 1.25vw, 1.08rem);
font-weight: 800;
line-height: 1.14;
letter-spacing: -.02em;
text-decoration: none;
}
.bk-video-title:hover {
color: #ff5f8f;
}
.bk-video-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
}
.bk-video-meta {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
color: #71809b;
font-size: clamp(.72rem, .95vw, .84rem);
font-weight: 400;
white-space: nowrap;
}
.bk-meta-dot {
color: #8493ad;
font-weight: 900;
}
.bk-meta-icon {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: inline-block;
background-color: #64748b;
opacity: .92;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.bk-clock {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm1-10.4V7a1 1 0 1 0-2 0v5a1 1 0 0 0 .48.86l3.5 2.1a1 1 0 0 0 1.04-1.72L13 11.6Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm1-10.4V7a1 1 0 1 0-2 0v5a1 1 0 0 0 .48.86l3.5 2.1a1 1 0 0 0 1.04-1.72L13 11.6Z'/%3E%3C/svg%3E");
}
.bk-eye {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.5 5.1 9.9 5.7a2.2 2.2 0 0 1 0 2.6C21.5 13.9 17.5 19 12 19s-9.5-5.1-9.9-5.7a2.2 2.2 0 0 1 0-2.6C2.5 10.1 6.5 5 12 5Zm0 3.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm0 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.5 5.1 9.9 5.7a2.2 2.2 0 0 1 0 2.6C21.5 13.9 17.5 19 12 19s-9.5-5.1-9.9-5.7a2.2 2.2 0 0 1 0-2.6C2.5 10.1 6.5 5 12 5Zm0 3.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm0 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
}
.bk-favorite-btn {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: transform .18s ease, filter .18s ease;
}
.bk-favorite-btn:hover {
transform: scale(1.12);
filter: drop-shadow(0 6px 10px rgba(255, 92, 130, .22));
}
.bk-favorite-btn img {
width: 32px;
height: 32px;
display: block;
object-fit: contain;
}
.bk-swal-confirm {
border-radius: 999px !important;
background: linear-gradient(135deg, #ff5f8f, #ff9ab8) !important;
color: #fff !important;
font-weight: 800 !important;
padding: 12px 22px !important;
}
.bk-swal-cancel {
border-radius: 999px !important;
background: #eaf5ff !important;
color: #0b63c7 !important;
font-weight: 800 !important;
padding: 12px 22px !important;
}
.bk-swal-popup {
border-radius: 28px !important;
}
@media (max-width: 640px) {
.scroll-row .bk-video-card,
.drag-row .bk-video-card {
flex-basis: 88vw;
}
.bk-video-card {
padding: 10px 10px 13px;
border-radius: 24px;
}
.bk-video-thumb {
border-radius: 19px;
}
.bk-card-badge {
min-height: 32px;
padding: 7px 12px;
font-size: .86rem;
}
.bk-video-meta {
gap: 5px;
font-size: .72rem;
font-weight: 400;
}
.bk-meta-icon {
width: 19px;
height: 19px;
flex-basis: 19px;
}
.bk-favorite-btn {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.bk-favorite-btn img {
width: 29px;
height: 29px;
}
}
/* ETAPA BabyKids - play sem círculo + favorito por imagem */
.bk-play-circle {
display: none !important;
}
.bk-play-img {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 58px !important;
height: 58px !important;
object-fit: contain !important;
transform: translate(-50%, -50%) scale(1) !important;
z-index: 3 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.30)) !important;
pointer-events: none !important;
transition: transform .18s ease, filter .18s ease !important;
}
.bk-video-card:hover .bk-play-img {
transform: translate(-50%, -50%) scale(1.06) !important;
filter: drop-shadow(0 10px 22px rgba(0,0,0,.36)) !important;
}
.bk-favorite-btn[data-fav-active="1"] img,
.bk-favorite-btn:hover img {
transform: scale(1.06) !important;
}
@media (max-width: 780px) {
.bk-play-img {
width: 50px !important;
height: 50px !important;
}
}
/* =========================================================
BabyKids ETAPA 49 - Cards e filtros no estilo referência enviada
Ajuste visual seguro: não altera PHP, banco ou regras de favoritos.
========================================================= */
/* Busca + menu de categorias mais infantil/premium */
.search-section {
padding-top: 18px !important;
}
.search-panel {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.search-stack {
gap: 18px !important;
}
.search-input-wrap {
max-width: 980px !important;
margin: 0 auto !important;
}
.search-input-wrap::before {
content: '🔍';
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
font-size: 24px;
line-height: 1;
opacity: .9;
}
.search-input-wrap::after {
content: '🎙️';
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
font-size: 22px;
line-height: 1;
opacity: .88;
pointer-events: none;
}
.search-input-wrap input {
min-height: 70px !important;
padding: 18px 68px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.96) !important;
border: 3px solid rgba(255,255,255,.95) !important;
color: #174177 !important;
font-size: clamp(1rem, 2.5vw, 1.35rem) !important;
font-weight: 500 !important;
box-shadow: 0 16px 32px rgba(80, 150, 230, .14), inset 0 0 0 1px rgba(125, 178, 235, .12) !important;
}
.search-input-wrap input::placeholder {
color: rgba(75, 93, 130, .55) !important;
}
.filter-pills {
justify-content: center !important;
gap: 14px !important;
}
.pill-btn {
min-height: 58px !important;
padding: 13px 21px !important;
border-radius: 26px !important;
border: 3px solid rgba(255,255,255,.9) !important;
background: rgba(255,255,255,.72) !important;
color: #0754b8 !important;
font-size: clamp(.92rem, 2.1vw, 1.08rem) !important;
font-weight: 900 !important;
box-shadow: 0 12px 28px rgba(66, 120, 200, .12), inset 0 0 0 1px rgba(255,255,255,.45) !important;
}
.pill-btn::before {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 1.2em;
line-height: 1;
}
.pill-btn[data-filter=''] {
color: #f14682 !important;
background: linear-gradient(135deg, #fff2f8, #ffe5ef) !important;
box-shadow: 0 14px 28px rgba(241, 70, 130, .18) !important;
}
.pill-btn[data-filter='']::before { content: '⭐'; }
.pill-btn[data-filter='desenho'] {
background: linear-gradient(135deg, #eaf8ff, #e1fbff) !important;
color: #0871bd !important;
}
.pill-btn[data-filter='desenho']::before { content: '📺'; }
.pill-btn[data-filter='educativo'] {
background: linear-gradient(135deg, #eafcf3, #dff9ec) !important;
color: #15905b !important;
}
.pill-btn[data-filter='educativo']::before { content: '🎓'; }
.pill-btn[data-filter='filme'] {
background: linear-gradient(135deg, #f6eeff, #eee9ff) !important;
color: #6b3cc7 !important;
}
.pill-btn[data-filter='filme']::before { content: '🍿'; }
.pill-btn[data-filter='outros']::before { content: '🎈'; }
.pill-btn.is-active {
transform: translateY(-2px) !important;
filter: saturate(1.08) !important;
}
/* Títulos das seções mais próximos da referência */
.section-head {
align-items: center !important;
margin-bottom: 18px !important;
}
.section-title {
font-size: clamp(2rem, 5vw, 2.9rem) !important;
line-height: 1 !important;
color: #0b3b82 !important;
}
.section-sub {
display: none !important;
}
/* Cards: mais respiro, tag/favorito/play alinhados */
.scroll-row.drag-row {
gap: 22px !important;
padding: 8px 2px 18px !important;
}
.scroll-row .bk-video-card,
.drag-row .bk-video-card {
flex: 0 0 clamp(260px, 34vw, 390px) !important;
}
.bk-video-card {
border-radius: 28px !important;
padding: 8px 8px 14px !important;
background: rgba(255,255,255,.97) !important;
border: 3px solid rgba(255,255,255,.98) !important;
box-shadow: 0 16px 34px rgba(61, 116, 190, .12) !important;
overflow: hidden !important;
}
.bk-video-card:nth-child(n) {
border-color: rgba(255,255,255,.98) !important;
}
.bk-video-thumb {
border-radius: 22px !important;
overflow: hidden !important;
aspect-ratio: 16 / 10 !important;
background: #dff4ff !important;
}
.bk-video-cover {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.bk-card-badge {
top: 12px !important;
left: 12px !important;
min-height: 32px !important;
padding: 7px 13px !important;
gap: 6px !important;
border-radius: 999px !important;
font-size: clamp(.76rem, 1.6vw, .92rem) !important;
font-weight: 900 !important;
box-shadow: 0 8px 18px rgba(255, 79, 145, .24) !important;
z-index: 4 !important;
}
.bk-play-circle {
display: none !important;
}
.bk-play-img {
width: clamp(54px, 7vw, 76px) !important;
height: clamp(54px, 7vw, 76px) !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
object-fit: contain !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
filter: drop-shadow(0 10px 18px rgba(20, 40, 80, .20)) !important;
z-index: 3 !important;
}
.bk-video-card:hover .bk-play-img {
transform: translate(-50%, -50%) scale(1.04) !important;
}
.bk-video-info {
padding: 13px 8px 0 !important;
}
.bk-video-title {
min-height: 2.2em !important;
font-size: clamp(.86rem, 2vw, 1.06rem) !important;
font-weight: 800 !important;
line-height: 1.14 !important;
color: #064aa3 !important;
}
.bk-video-meta-row {
margin-top: 11px !important;
gap: 8px !important;
}
.bk-video-meta {
gap: 6px !important;
font-size: clamp(.68rem, 1.45vw, .82rem) !important;
font-weight: 400 !important;
color: #7c8aa3 !important;
line-height: 1 !important;
}
.bk-meta-icon {
width: 19px !important;
height: 19px !important;
flex-basis: 19px !important;
background-color: #74839b !important;
}
.bk-meta-dot {
font-weight: 400 !important;
color: #9aa6bb !important;
}
.bk-favorite-btn {
width: 38px !important;
height: 38px !important;
flex: 0 0 38px !important;
border-radius: 999px !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
.bk-favorite-btn img {
width: 28px !important;
height: 28px !important;
object-fit: contain !important;
}
.bk-favorite-btn:hover img,
.bk-favorite-btn[data-fav-active='1'] img {
transform: scale(1.08) !important;
}
@media (max-width: 780px) {
.section {
padding-left: 16px !important;
padding-right: 16px !important;
}
.search-input-wrap input {
min-height: 62px !important;
padding-left: 56px !important;
padding-right: 56px !important;
font-size: 1rem !important;
}
.search-input-wrap::before {
left: 20px;
font-size: 21px;
}
.search-input-wrap::after {
right: 20px;
font-size: 19px;
}
.filter-pills {
justify-content: flex-start !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
padding: 4px 2px 10px !important;
scrollbar-width: none !important;
}
.filter-pills::-webkit-scrollbar { display: none !important; }
.pill-btn {
flex: 0 0 auto !important;
min-height: 52px !important;
padding: 11px 16px !important;
border-radius: 23px !important;
font-size: .92rem !important;
}
.scroll-row.drag-row {
gap: 14px !important;
padding: 6px 0 16px !important;
}
.scroll-row .bk-video-card,
.drag-row .bk-video-card {
flex: 0 0 calc((100vw - 48px) / 2) !important;
min-width: calc((100vw - 48px) / 2) !important;
max-width: calc((100vw - 48px) / 2) !important;
}
.bk-video-card {
border-radius: 22px !important;
padding: 7px 7px 12px !important;
}
.bk-video-thumb {
border-radius: 17px !important;
aspect-ratio: 16 / 10 !important;
}
.bk-card-badge {
top: 8px !important;
left: 8px !important;
min-height: 26px !important;
padding: 5px 9px !important;
font-size: .68rem !important;
}
.bk-play-img {
width: 48px !important;
height: 48px !important;
}
.bk-video-info {
padding: 10px 5px 0 !important;
}
.bk-video-title {
font-size: .86rem !important;
line-height: 1.12 !important;
font-weight: 800 !important;
}
.bk-video-meta-row {
margin-top: 9px !important;
gap: 4px !important;
}
.bk-video-meta {
gap: 4px !important;
font-size: .68rem !important;
font-weight: 400 !important;
}
.bk-meta-icon {
width: 16px !important;
height: 16px !important;
flex-basis: 16px !important;
}
.bk-favorite-btn {
width: 30px !important;
height: 30px !important;
flex-basis: 30px !important;
}
.bk-favorite-btn img {
width: 24px !important;
height: 24px !important;
}
}
@media (max-width: 390px) {
.scroll-row .bk-video-card,
.drag-row .bk-video-card {
flex-basis: calc((100vw - 42px) / 2) !important;
min-width: calc((100vw - 42px) / 2) !important;
max-width: calc((100vw - 42px) / 2) !important;
}
.bk-video-title {
font-size: .8rem !important;
}
.bk-video-meta {
font-size: .62rem !important;
}
.bk-card-badge {
font-size: .62rem !important;
padding: 4px 8px !important;
}
}
/* =========================================================
BabyKids - Pesquisa por voz no campo de busca
========================================================= */
.bk-search-voice-wrap {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.bk-search-voice-wrap .bk-search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
color: #f24b82;
font-size: 34px;
line-height: 1;
pointer-events: none;
font-weight: 900;
}
.bk-search-voice-wrap #liveSearch {
padding-left: 64px !important;
padding-right: 64px !important;
}
.bk-voice-search-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.78);
color: #ff4d85;
cursor: pointer;
z-index: 4;
box-shadow: 0 8px 22px rgba(244, 82, 130, .16);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bk-voice-search-btn:hover {
transform: translateY(-50%) scale(1.04);
background: #fff;
}
.bk-voice-search-btn.is-listening {
background: linear-gradient(135deg, #ff4d85, #ff9a5f);
color: #fff;
box-shadow: 0 0 0 7px rgba(255,77,133,.14), 0 12px 30px rgba(255,77,133,.25);
animation: bkVoicePulse 1s ease-in-out infinite;
}
.bk-voice-search-btn.is-disabled {
opacity: .55;
cursor: not-allowed;
}
.bk-voice-search-icon {
font-size: 21px;
line-height: 1;
}
@keyframes bkVoicePulse {
0%, 100% { transform: translateY(-50%) scale(1); }
50% { transform: translateY(-50%) scale(1.08); }
}
@media (max-width: 560px) {
.bk-search-voice-wrap .bk-search-icon {
left: 15px;
font-size: 28px;
}
.bk-search-voice-wrap #liveSearch {
padding-left: 54px !important;
padding-right: 58px !important;
}
.bk-voice-search-btn {
right: 9px;
width: 42px;
height: 42px;
}
}
/* =========================================================
BabyKids ETAPA 51 - Correção visual dos resultados da busca
- Resultado claro, estilo infantil
- Dropdown acima dos botões de categoria, sem ser encoberto
- Botões de categoria não ficam por cima da pesquisa
========================================================= */
.search-section {
position: relative !important;
z-index: 60 !important;
overflow: visible !important;
}
.search-panel,
.search-stack {
position: relative !important;
overflow: visible !important;
}
.search-input-wrap,
.bk-search-voice-wrap {
position: relative !important;
z-index: 80 !important;
overflow: visible !important;
}
.filter-pills {
position: relative !important;
z-index: 10 !important;
margin-top: 16px !important;
}
.search-results {
z-index: 999 !important;
top: calc(100% + 12px) !important;
left: 8px !important;
right: 8px !important;
max-height: 360px !important;
overflow-y: auto !important;
background: rgba(255,255,255,.98) !important;
border: 3px solid rgba(255,255,255,.96) !important;
border-radius: 26px !important;
box-shadow: 0 24px 55px rgba(60, 120, 190, .22) !important;
color: #12386f !important;
padding: 8px !important;
}
.search-result-item {
grid-template-columns: 86px minmax(0, 1fr) !important;
gap: 13px !important;
align-items: center !important;
padding: 10px !important;
border-radius: 20px !important;
border-bottom: 0 !important;
color: #12386f !important;
background: transparent !important;
}
.search-result-item + .search-result-item {
margin-top: 6px !important;
}
.search-result-item:hover,
.search-result-item:focus {
background: linear-gradient(135deg, rgba(232, 246, 255, .95), rgba(255, 241, 248, .95)) !important;
outline: none !important;
}
.search-result-item img {
height: 56px !important;
border-radius: 15px !important;
background: #e7f6ff !important;
box-shadow: 0 8px 18px rgba(58, 110, 180, .12) !important;
}
.search-result-item strong {
color: #12386f !important;
font-size: .98rem !important;
line-height: 1.15 !important;
font-weight: 900 !important;
margin-bottom: 5px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.search-result-item span,
.search-empty {
color: #6e7f9d !important;
font-size: .84rem !important;
font-weight: 500 !important;
}
.search-empty {
background: linear-gradient(135deg, rgba(232, 246, 255, .95), rgba(255, 241, 248, .95)) !important;
border-radius: 18px !important;
padding: 14px !important;
text-align: center !important;
}
@media (max-width: 780px) {
.search-section {
z-index: 80 !important;
}
.filter-pills {
margin-top: 14px !important;
}
.search-results {
left: 0 !important;
right: 0 !important;
top: calc(100% + 10px) !important;
border-radius: 24px !important;
max-height: 315px !important;
}
.search-result-item {
grid-template-columns: 78px minmax(0, 1fr) !important;
padding: 9px !important;
border-radius: 18px !important;
}
.search-result-item img {
height: 52px !important;
}
}
/* =========================================================
BabyKids ETAPA 52 - Categorias compactas sem scroll + badge destaque limpa
- Mantém os filtros em uma linha/grade compacta no mobile
- Remove a estrelinha visual da tag Destaque nos cards
========================================================= */
.filter-pills {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
overflow: visible !important;
padding: 2px 0 4px !important;
}
.pill-btn {
min-height: 44px !important;
padding: 9px 13px !important;
border-radius: 20px !important;
font-size: .88rem !important;
line-height: 1 !important;
}
.pill-btn::before {
margin-right: 5px !important;
font-size: 1em !important;
}
.bk-card-badge {
gap: 0 !important;
}
.bk-card-badge::before,
.bk-card-badge::after {
content: none !important;
display: none !important;
}
@media (max-width: 780px) {
.filter-pills {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 7px !important;
overflow: visible !important;
overflow-x: visible !important;
padding: 2px 0 6px !important;
margin-top: 12px !important;
}
.pill-btn {
width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
padding: 8px 6px !important;
border-width: 2px !important;
border-radius: 18px !important;
font-size: .74rem !important;
letter-spacing: -.01em !important;
box-shadow: 0 8px 18px rgba(66, 120, 200, .10), inset 0 0 0 1px rgba(255,255,255,.35) !important;
}
.pill-btn::before {
margin-right: 3px !important;
font-size: .95em !important;
}
}
@media (max-width: 390px) {
.filter-pills {
gap: 6px !important;
}
.pill-btn {
min-height: 39px !important;
padding: 7px 4px !important;
border-radius: 16px !important;
font-size: .68rem !important;
}
.pill-btn::before {
margin-right: 2px !important;
font-size: .9em !important;
}
}
/* BabyKids ETAPA 53 - Banner principal mobile clean */
.hero-streaming{padding:10px 14px 0!important}.hero-carousel{min-height:320px!important;border-radius:28px!important;border:3px solid rgba(255,255,255,.82)!important;box-shadow:0 18px 46px rgba(0,108,233,.18)!important}.hero-carousel::before{font-size:25px!important;right:18px!important;top:18px!important;opacity:.92!important}.hero-content{min-height:320px!important;max-width:78%!important;padding:26px 24px!important}.hero-slide h1{font-size:clamp(31px,6vw,48px)!important;line-height:.98!important;margin-bottom:12px!important}.hero-slide p{font-size:15px!important;line-height:1.35!important;margin:0!important}.hero-actions{margin-top:16px!important;gap:10px!important}.hero-actions .btn,.hero-actions .btn-secondary{min-height:46px!important;padding:11px 16px!important;border-radius:18px!important;font-size:.95rem!important}.hero-dots{right:18px!important;bottom:18px!important}.hero-dot{width:10px!important;height:10px!important}
@media(max-width:780px){.hero-streaming{padding:8px 12px 0!important}.hero-carousel{min-height:255px!important;border-radius:24px!important;border-width:3px!important}.hero-carousel::before{font-size:23px!important;right:16px!important;top:15px!important}.hero-content{min-height:255px!important;max-width:86%!important;padding:22px 18px!important}.hero-slide h1{font-size:clamp(30px,9vw,40px)!important;max-width:310px!important;margin-bottom:10px!important}.hero-slide p{font-size:13px!important;font-weight:750!important}.hero-actions{margin-top:13px!important}.hero-actions .btn,.hero-actions .btn-secondary{min-height:42px!important;padding:10px 13px!important;border-radius:16px!important;font-size:.86rem!important}.hero-dots{right:14px!important;bottom:14px!important;gap:7px!important}}
@media(max-width:430px){.hero-carousel{min-height:230px!important;border-radius:22px!important}.hero-content{min-height:230px!important;max-width:88%!important;padding:18px 15px!important}.hero-slide h1{font-size:clamp(27px,9vw,34px)!important;max-width:270px!important}.hero-slide p{font-size:12px!important}.hero-actions .btn-secondary{display:none!important}.hero-actions .btn{min-height:40px!important;padding:9px 12px!important;font-size:.82rem!important}}
/* =========================================================
BabyKids - Refino visual dos cards de vídeo
Remove estrela, deixa bordas mais finas e aproxima os cards.
========================================================= */
.card-video::before {
content: none !important;
display: none !important;
}
.card-video {
border-width: 1px !important;
border-color: rgba(255, 117, 164, .18) !important;
box-shadow: 0 8px 22px rgba(18, 42, 91, .10) !important;
}
.scroll-row,
.scroll-row.drag-row {
gap: 9px !important;
}
@media (max-width: 780px) {
.scroll-row,
.scroll-row.drag-row {
gap: 8px !important;
}
.card-video {
border-width: 1px !important;
}
}
/* BabyKids - botão divertido Assistir nos cards */
.bk-video-card .bk-watch-fun{
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
width:100%;
min-height:30px;
margin:7px 0 6px;
padding:7px 10px;
border-radius:999px;
text-decoration:none;
color:#fff;
font-size:12px;
font-weight:800;
letter-spacing:.01em;
background:linear-gradient(135deg,#ff4d67 0%,#ff7a45 55%,#ffb347 100%);
box-shadow:0 8px 18px rgba(255,92,122,.24);
transition:transform .16s ease,box-shadow .18s ease,filter .18s ease;
}
.bk-video-card .bk-watch-fun span{
display:inline-grid;
place-items:center;
width:18px;
height:18px;
border-radius:999px;
background:rgba(255,255,255,.18);
font-size:9px;
line-height:1;
}
.bk-video-card .bk-watch-fun:hover{
transform:translateY(-1px);
box-shadow:0 10px 22px rgba(255,92,122,.32);
filter:saturate(1.04);
}
.bk-video-card .bk-watch-fun:active{
transform:scale(.97);
}
@media(max-width:780px){
.bk-video-card .bk-watch-fun{
min-height:28px;
margin:6px 0 5px;
padding:6px 9px;
font-size:11px;
}
.bk-video-card .bk-watch-fun span{
width:16px;
height:16px;
font-size:8px;
}
}
/* =========================================================
BabyKids ETAPA 54 - Menu de categorias em cards infantis
Modelo igual à referência: 4 botões em cards, ícone em cima e texto abaixo.
Remove o ícone textual antigo da busca quando ainda existir em cache.
========================================================= */
.bk-search-icon{display:none!important;content:none!important;}
.search-panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;}
.search-stack{gap:16px!important;}
.filter-pills{width:100%!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;justify-content:center!important;margin-top:18px!important;padding:0!important;overflow:visible!important;}
.pill-btn{position:relative!important;width:100%!important;min-width:0!important;min-height:116px!important;padding:14px 8px 13px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;border-radius:28px!important;border:3px solid rgba(255,255,255,.88)!important;background:linear-gradient(135deg,rgba(255,241,248,.96),rgba(255,251,244,.95))!important;color:#ec407a!important;font-size:1rem!important;line-height:1.05!important;font-weight:900!important;letter-spacing:-.03em!important;text-align:center!important;white-space:normal!important;box-shadow:0 14px 28px rgba(42,112,180,.15), inset 0 0 0 1px rgba(255,255,255,.52)!important;transform:none!important;}
.pill-btn::before{width:46px!important;height:46px!important;margin:0!important;display:grid!important;place-items:center!important;border-radius:17px!important;font-size:2rem!important;line-height:1!important;background:rgba(255,255,255,.62)!important;box-shadow:0 8px 18px rgba(80,130,200,.10)!important;}
.pill-btn[data-filter='']{background:linear-gradient(135deg,#fff1f7 0%,#fff7ed 100%)!important;color:#e83f7d!important;}
.pill-btn[data-filter='']::before{content:'⭐'!important;}
.pill-btn[data-filter='desenho']{background:linear-gradient(135deg,#eef9ff 0%,#eaf6ff 100%)!important;color:#0f67b5!important;}
.pill-btn[data-filter='desenho']::before{content:'📺'!important;}
.pill-btn[data-filter='educativo']{background:linear-gradient(135deg,#effff5 0%,#ecfbef 100%)!important;color:#16965d!important;}
.pill-btn[data-filter='educativo']::before{content:'🎓'!important;}
.pill-btn[data-filter='filme']{background:linear-gradient(135deg,#f9f1ff 0%,#f2efff 100%)!important;color:#7b3ac9!important;}
.pill-btn[data-filter='filme']::before{content:'🍿'!important;}
.pill-btn[data-filter='outros']{background:linear-gradient(135deg,#fff8e8 0%,#fff3f1 100%)!important;color:#ed7b2f!important;}
.pill-btn[data-filter='outros']::before{content:'🎈'!important;}
.pill-btn.is-active{border-color:rgba(255,255,255,.98)!important;box-shadow:0 18px 34px rgba(30,124,220,.22),0 0 0 3px rgba(255,255,255,.36) inset!important;transform:translateY(-2px)!important;}
.pill-btn:active{transform:scale(.97)!important;}
@media(max-width:780px){.section-tight.search-section{padding-left:14px!important;padding-right:14px!important}.filter-pills{gap:10px!important;margin-top:16px!important}.pill-btn{min-height:92px!important;border-radius:22px!important;border-width:2.5px!important;padding:11px 4px 10px!important;font-size:.82rem!important;box-shadow:0 10px 20px rgba(42,112,180,.13), inset 0 0 0 1px rgba(255,255,255,.45)!important}.pill-btn::before{width:38px!important;height:38px!important;border-radius:14px!important;font-size:1.55rem!important}}
@media(max-width:430px){.filter-pills{gap:8px!important}.pill-btn{min-height:78px!important;border-radius:18px!important;padding:8px 2px!important;font-size:.70rem!important}.pill-btn::before{width:30px!important;height:30px!important;border-radius:11px!important;font-size:1.25rem!important}}
/* =========================================================
BabyKids - Categorias dinâmicas pelo painel
Mantém visual infantil premium e funciona com qualquer slug.
========================================================= */
.filter-pills .pill-btn::before{display:none!important;content:none!important;}
.filter-pills .pill-btn{color:var(--bk-cat-color,#0f67b5)!important;}
.filter-pills .pill-btn .bk-pill-icon{width:46px!important;height:46px!important;margin:0!important;display:grid!important;place-items:center!important;border-radius:17px!important;font-size:2rem!important;line-height:1!important;background:rgba(255,255,255,.66)!important;box-shadow:0 8px 18px rgba(80,130,200,.10)!important;}
.filter-pills .pill-btn.is-active{outline:0!important;box-shadow:0 18px 34px rgba(30,124,220,.22),0 0 0 3px rgba(255,255,255,.38) inset!important;}
@media(max-width:780px){.filter-pills .pill-btn .bk-pill-icon{width:38px!important;height:38px!important;border-radius:14px!important;font-size:1.55rem!important;}}
@media(max-width:430px){.filter-pills .pill-btn .bk-pill-icon{width:30px!important;height:30px!important;border-radius:11px!important;font-size:1.25rem!important;}}
.category-admin-form{margin-top:14px;margin-bottom:18px;padding:14px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);}
.category-admin-dynamic{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.category-admin-card{position:relative;overflow:hidden;}
.category-admin-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--bk-cat-color,#0f67b5);opacity:.95;}
.category-admin-card strong span{font-size:22px;margin-right:6px;vertical-align:middle;}
.category-admin-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.category-admin-actions form{margin:0;}
.category-admin-actions .btn-small{min-height:36px;}
input[type="color"]{min-height:44px;padding:5px!important;cursor:pointer;}
/* BabyKids - Menu de categorias com imagens locais em /assets/img/iconsMenu/ */
.filter-pills .pill-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
}
.filter-pills .pill-btn .bk-menu-cat-img {
width: 42px;
height: 42px;
object-fit: contain;
display: block;
pointer-events: none;
filter: drop-shadow(0 7px 12px rgba(0, 84, 170, .16));
}
.filter-pills .pill-btn span {
display: block;
line-height: 1.05;
}
@media (max-width: 780px) {
.filter-pills {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
.filter-pills .pill-btn {
min-width: 0;
width: 100%;
padding: 10px 6px;
border-radius: 18px;
font-size: 12px;
gap: 5px;
}
.filter-pills .pill-btn .bk-menu-cat-img {
width: 34px;
height: 34px;
}
}
@media (max-width: 390px) {
.filter-pills {
gap: 7px;
}
.filter-pills .pill-btn {
padding: 9px 4px;
font-size: 11px;
border-radius: 16px;
}
.filter-pills .pill-btn .bk-menu-cat-img {
width: 30px;
height: 30px;
}
}
/* BabyKids - Força menu de categorias por imagem local, sem ícone/emoji do banco */
.filter-pills .pill-btn .bk-pill-icon {
display: none !important;
}
.filter-pills .pill-btn .bk-menu-cat-img {
display: block !important;
}
/* BabyKids - Footer infantil premium */
.site-footer.bk-footer {
margin: 28px 14px 30px;
padding: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.bk-footer-card {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(240px, .75fr);
gap: 18px;
align-items: stretch;
width: min(1180px, 100%);
margin: 0 auto;
padding: 22px;
border-radius: 30px;
background:
radial-gradient(circle at 12% 18%, rgba(255, 207, 80, .35), transparent 26%),
radial-gradient(circle at 92% 12%, rgba(77, 181, 255, .28), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,248,255,.94));
border: 1px solid rgba(80, 151, 255, .18);
box-shadow: 0 18px 45px rgba(47, 101, 196, .12);
color: #26364f;
}
.bk-footer-card::before,
.bk-footer-card::after {
content: '';
position: absolute;
border-radius: 999px;
pointer-events: none;
}
.bk-footer-card::before {
width: 82px;
height: 82px;
right: -24px;
bottom: -24px;
background: rgba(255, 77, 103, .16);
}
.bk-footer-card::after {
width: 52px;
height: 52px;
left: 24px;
bottom: -18px;
background: rgba(255, 196, 77, .24);
}
.bk-footer-main,
.bk-footer-contact {
position: relative;
z-index: 1;
}
.bk-footer-main {
display: grid;
gap: 12px;
align-content: start;
}
.bk-footer-logo-link {
display: inline-flex;
width: fit-content;
text-decoration: none;
}
.bk-footer-logo {
display: block;
max-width: 185px;
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(45, 91, 180, .12));
}
.bk-footer-description {
max-width: 620px;
margin: 0;
color: #52627a;
font-size: 14px;
line-height: 1.55;
font-weight: 600;
}
.bk-footer-social {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 4px;
}
.bk-footer-social a {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 39px;
padding: 8px 11px;
border-radius: 999px;
text-decoration: none;
color: #26364f;
background: rgba(255,255,255,.78);
border: 1px solid rgba(89, 123, 255, .14);
box-shadow: 0 9px 20px rgba(45, 91, 180, .08);
font-size: 12px;
font-weight: 900;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bk-footer-social a:hover {
transform: translateY(-2px);
background: #fff;
box-shadow: 0 14px 28px rgba(45, 91, 180, .13);
}
.bk-footer-social span {
font-size: 17px;
line-height: 1;
}
.bk-footer-social em {
font-style: normal;
}
.bk-footer-contact {
display: grid;
align-content: center;
gap: 8px;
padding: 18px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(255, 77, 103, .10), rgba(77, 181, 255, .10));
border: 1px solid rgba(255,255,255,.74);
}
.bk-footer-title {
color: #16233a;
font-size: 15px;
font-weight: 950;
letter-spacing: -.02em;
}
.bk-footer-text {
margin: 0;
color: #52627a;
font-size: 14px;
line-height: 1.45;
font-weight: 700;
}
.bk-footer-text a {
color: #ff4d67;
font-weight: 950;
text-decoration: none;
}
.bk-footer-text a:hover {
text-decoration: underline;
}
.bk-footer-credits {
display: grid;
gap: 3px;
margin-top: 8px;
padding-top: 12px;
border-top: 1px dashed rgba(82, 98, 122, .22);
}
.bk-footer-credits p {
margin: 0;
color: #6d7b91;
font-size: 12px;
line-height: 1.35;
}
.bk-footer-credits strong {
color: #253450;
}
@media (max-width: 760px) {
.site-footer.bk-footer {
margin: 24px 12px 24px;
}
.bk-footer-card {
grid-template-columns: 1fr;
gap: 14px;
padding: 18px;
border-radius: 26px;
text-align: center;
}
.bk-footer-logo-link {
margin: 0 auto;
}
.bk-footer-logo {
max-width: 168px;
}
.bk-footer-description {
margin: 0 auto;
font-size: 13px;
}
.bk-footer-social {
justify-content: center;
gap: 8px;
}
.bk-footer-social a {
padding: 8px 10px;
min-height: 38px;
}
.bk-footer-contact {
padding: 16px;
border-radius: 22px;
}
}
@media (max-width: 390px) {
.bk-footer-social a em {
display: none;
}
.bk-footer-social a {
width: 42px;
height: 42px;
justify-content: center;
padding: 0;
}
}
/* BabyKids - Correção menu categorias com imagens */
.filter-pills .pill-btn .bk-pill-icon {
display: none !important;
}
.filter-pills .pill-btn .bk-menu-cat-img {
width: 42px;
height: 42px;
object-fit: contain;
display: block !important;
pointer-events: none;
filter: drop-shadow(0 7px 12px rgba(0, 84, 170, .16));
}
.filter-pills .pill-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (max-width: 780px) {
.filter-pills .pill-btn .bk-menu-cat-img {
width: 34px;
height: 34px;
}
}
@media (max-width: 390px) {
.filter-pills .pill-btn .bk-menu-cat-img {
width: 30px;
height: 30px;
}
}
/* BabyKids - Correção definitiva do footer mobile e redes sociais */
.site-footer.bk-footer {
width: min(1180px, calc(100% - 24px)) !important;
margin: 30px auto 32px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #26364f !important;
}
.site-footer.bk-footer *,
.site-footer.bk-footer *::before,
.site-footer.bk-footer *::after {
box-sizing: border-box !important;
}
.site-footer.bk-footer .bk-footer-card {
width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr) !important;
gap: 18px !important;
align-items: stretch !important;
padding: 22px !important;
border-radius: 30px !important;
overflow: hidden !important;
background:
radial-gradient(circle at 12% 18%, rgba(255, 207, 80, .35), transparent 26%),
radial-gradient(circle at 92% 12%, rgba(77, 181, 255, .28), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,248,255,.96)) !important;
border: 1px solid rgba(80, 151, 255, .18) !important;
box-shadow: 0 18px 45px rgba(47, 101, 196, .12) !important;
color: #26364f !important;
text-align: left !important;
}
.site-footer.bk-footer .bk-footer-main {
display: grid !important;
gap: 14px !important;
align-content: start !important;
min-width: 0 !important;
}
.site-footer.bk-footer .bk-footer-logo-link {
display: inline-flex !important;
width: fit-content !important;
max-width: 100% !important;
text-decoration: none !important;
line-height: 0 !important;
}
.site-footer.bk-footer .bk-footer-logo {
display: block !important;
width: auto !important;
max-width: 210px !important;
max-height: 92px !important;
height: auto !important;
object-fit: contain !important;
filter: drop-shadow(0 10px 18px rgba(45, 91, 180, .12)) !important;
}
.site-footer.bk-footer .bk-footer-description {
max-width: 620px !important;
margin: 0 !important;
color: #52627a !important;
font-size: 14px !important;
line-height: 1.55 !important;
font-weight: 650 !important;
text-decoration: none !important;
}
.site-footer.bk-footer .bk-footer-social {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
margin-top: 2px !important;
}
.site-footer.bk-footer .bk-social-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 42px !important;
padding: 9px 13px !important;
border-radius: 999px !important;
color: #26364f !important;
background: rgba(255,255,255,.86) !important;
border: 1px solid rgba(89, 123, 255, .16) !important;
box-shadow: 0 9px 20px rgba(45, 91, 180, .08) !important;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 900 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.site-footer.bk-footer .bk-social-icon {
display: inline-grid !important;
place-items: center !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, rgba(255,77,103,.14), rgba(77,181,255,.14)) !important;
font-size: 15px !important;
line-height: 1 !important;
text-decoration: none !important;
}
.site-footer.bk-footer .bk-social-name {
display: inline-block !important;
font-style: normal !important;
text-decoration: none !important;
}
.site-footer.bk-footer .bk-footer-contact {
display: grid !important;
align-content: center !important;
gap: 9px !important;
min-width: 0 !important;
padding: 18px !important;
border-radius: 24px !important;
background: linear-gradient(135deg, rgba(255, 77, 103, .10), rgba(77, 181, 255, .10)) !important;
border: 1px solid rgba(255,255,255,.78) !important;
color: #26364f !important;
}
.site-footer.bk-footer .bk-footer-title {
color: #16233a !important;
font-size: 15px !important;
font-weight: 950 !important;
letter-spacing: -.02em !important;
}
.site-footer.bk-footer .bk-footer-text {
margin: 0 !important;
color: #52627a !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 750 !important;
}
.site-footer.bk-footer .bk-footer-text a {
color: #ff4d67 !important;
font-weight: 950 !important;
text-decoration: none !important;
}
.site-footer.bk-footer .bk-footer-text a:hover {
text-decoration: underline !important;
}
.site-footer.bk-footer .bk-footer-credits {
display: grid !important;
gap: 4px !important;
margin-top: 8px !important;
padding-top: 12px !important;
border-top: 1px dashed rgba(82, 98, 122, .22) !important;
}
.site-footer.bk-footer .bk-footer-credits p {
margin: 0 !important;
color: #6d7b91 !important;
font-size: 12px !important;
line-height: 1.38 !important;
}
.site-footer.bk-footer .bk-footer-credits strong {
color: #253450 !important;
font-weight: 950 !important;
}
@media (max-width: 760px) {
.site-footer.bk-footer {
width: min(100% - 22px, 560px) !important;
margin: 24px auto 26px !important;
}
.site-footer.bk-footer .bk-footer-card {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 18px !important;
border-radius: 26px !important;
text-align: center !important;
}
.site-footer.bk-footer .bk-footer-main {
justify-items: center !important;
text-align: center !important;
}
.site-footer.bk-footer .bk-footer-logo-link {
margin: 0 auto !important;
}
.site-footer.bk-footer .bk-footer-logo {
max-width: 190px !important;
max-height: 84px !important;
margin: 0 auto !important;
}
.site-footer.bk-footer .bk-footer-description {
max-width: 100% !important;
margin: 0 auto !important;
font-size: 13.5px !important;
text-align: center !important;
}
.site-footer.bk-footer .bk-footer-social {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 9px !important;
justify-content: stretch !important;
}
.site-footer.bk-footer .bk-social-btn {
width: 100% !important;
min-width: 0 !important;
padding: 10px 8px !important;
border-radius: 17px !important;
white-space: nowrap !important;
}
.site-footer.bk-footer .bk-footer-contact {
padding: 16px !important;
border-radius: 22px !important;
text-align: center !important;
justify-items: center !important;
}
}
@media (max-width: 380px) {
.site-footer.bk-footer .bk-footer-card {
padding: 15px !important;
}
.site-footer.bk-footer .bk-footer-logo {
max-width: 170px !important;
}
.site-footer.bk-footer .bk-footer-social {
grid-template-columns: 1fr !important;
}
}
/* ===== FOOTER SOCIAL - PADRÃO BABYKIDS ===== */
.bk-footer-social {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
/* botão do ícone */
.bk-footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.75);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
overflow: hidden;
}
/* imagem dentro do botão */
.bk-footer-social img {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
}
/* efeito hover */
.bk-footer-social a:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12);
}
/* ===== MOBILE ===== */
@media (max-width: 600px) {
.bk-footer-social {
gap: 10px;
}
.bk-footer-social a {
width: 40px;
height: 40px;
}
.bk-footer-social img {
width: 20px;
height: 20px;
}
}
/* ===== TELAS MUITO PEQUENAS ===== */
@media (max-width: 380px) {
.bk-footer-social {
gap: 8px;
}
.bk-footer-social a {
width: 36px;
height: 36px;
}
.bk-footer-social img {
width: 18px;
height: 18px;
}
}
/* =========================================================
BABYKIDS - FOOTER HARD FIX DEFINITIVO
Estrutura isolada para não sofrer conflito de outros estilos.
========================================================= */
footer.bk-footer-hard,
.site-footer.bk-footer-hard {
width: min(1180px, calc(100% - 24px)) !important;
max-width: 1180px !important;
margin: 30px auto 32px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #26364f !important;
overflow: visible !important;
}
footer.bk-footer-hard *,
footer.bk-footer-hard *::before,
footer.bk-footer-hard *::after {
box-sizing: border-box !important;
}
.bk-footer-hard-card {
width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr) !important;
gap: 18px !important;
align-items: stretch !important;
padding: 22px !important;
border-radius: 30px !important;
overflow: hidden !important;
background:
radial-gradient(circle at 12% 18%, rgba(255, 207, 80, .35), transparent 26%),
radial-gradient(circle at 92% 12%, rgba(77, 181, 255, .28), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,248,255,.96)) !important;
border: 1px solid rgba(80, 151, 255, .18) !important;
box-shadow: 0 18px 45px rgba(47, 101, 196, .12) !important;
color: #26364f !important;
}
.bk-footer-hard-brand {
display: grid !important;
gap: 14px !important;
align-content: start !important;
min-width: 0 !important;
}
.bk-footer-hard-logo-link {
display: inline-flex !important;
width: fit-content !important;
max-width: 100% !important;
line-height: 0 !important;
text-decoration: none !important;
}
.bk-footer-hard-logo {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 210px !important;
max-height: 92px !important;
object-fit: contain !important;
filter: drop-shadow(0 10px 18px rgba(45, 91, 180, .12)) !important;
}
.bk-footer-hard-description {
max-width: 620px !important;
margin: 0 !important;
color: #52627a !important;
font-size: 14px !important;
line-height: 1.55 !important;
font-weight: 650 !important;
text-align: left !important;
}
.bk-footer-hard-social {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
width: auto !important;
max-width: 100% !important;
margin: 2px 0 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.bk-footer-hard-social a {
display: flex !important;
flex: 0 0 46px !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
max-width: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 14px !important;
background: rgba(255,255,255,.90) !important;
border: 1px solid rgba(89, 123, 255, .16) !important;
box-shadow: 0 9px 20px rgba(45, 91, 180, .08) !important;
text-decoration: none !important;
line-height: 0 !important;
overflow: hidden !important;
}
.bk-footer-hard-social a img {
display: block !important;
width: 27px !important;
height: 27px !important;
min-width: 27px !important;
max-width: 27px !important;
min-height: 27px !important;
max-height: 27px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.bk-footer-hard-info {
display: grid !important;
align-content: center !important;
gap: 9px !important;
min-width: 0 !important;
padding: 18px !important;
border-radius: 24px !important;
background: linear-gradient(135deg, rgba(255, 77, 103, .10), rgba(77, 181, 255, .10)) !important;
border: 1px solid rgba(255,255,255,.78) !important;
color: #26364f !important;
}
.bk-footer-hard-info h3 {
margin: 0 !important;
color: #16233a !important;
font-size: 15px !important;
font-weight: 950 !important;
letter-spacing: -.02em !important;
}
.bk-footer-hard-info p {
margin: 0 !important;
color: #52627a !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 750 !important;
}
.bk-footer-hard-info a {
color: #ff4d67 !important;
font-weight: 950 !important;
text-decoration: none !important;
}
.bk-footer-hard-info a:hover {
text-decoration: underline !important;
}
.bk-footer-hard-credits {
display: grid !important;
gap: 4px !important;
margin-top: 8px !important;
padding-top: 12px !important;
border-top: 1px dashed rgba(82, 98, 122, .22) !important;
}
.bk-footer-hard-credits p {
margin: 0 !important;
color: #6d7b91 !important;
font-size: 12px !important;
line-height: 1.38 !important;
}
.bk-footer-hard-credits strong {
color: #253450 !important;
font-weight: 950 !important;
}
@media (max-width: 760px) {
footer.bk-footer-hard,
.site-footer.bk-footer-hard {
width: min(100% - 22px, 560px) !important;
margin: 24px auto 26px !important;
}
.bk-footer-hard-card {
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 18px !important;
border-radius: 26px !important;
text-align: center !important;
}
.bk-footer-hard-brand {
justify-items: center !important;
text-align: center !important;
}
.bk-footer-hard-logo-link {
margin: 0 auto !important;
}
.bk-footer-hard-logo {
max-width: 190px !important;
max-height: 84px !important;
margin: 0 auto !important;
}
.bk-footer-hard-description {
max-width: 100% !important;
text-align: center !important;
font-size: 13.5px !important;
}
.bk-footer-hard-social {
justify-content: center !important;
gap: 10px !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
.bk-footer-hard-social a {
flex-basis: 44px !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
.bk-footer-hard-social a img {
width: 25px !important;
height: 25px !important;
min-width: 25px !important;
max-width: 25px !important;
min-height: 25px !important;
max-height: 25px !important;
}
.bk-footer-hard-info {
text-align: center !important;
justify-items: center !important;
padding: 16px !important;
border-radius: 22px !important;
}
}
@media (max-width: 380px) {
.bk-footer-hard-card {
padding: 15px !important;
}
.bk-footer-hard-logo {
max-width: 170px !important;
}
.bk-footer-hard-social {
gap: 8px !important;
}
.bk-footer-hard-social a {
flex-basis: 40px !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
}
.bk-footer-hard-social a img {
width: 23px !important;
height: 23px !important;
min-width: 23px !important;
max-width: 23px !important;
min-height: 23px !important;
max-height: 23px !important;
}
}
/* =========================================================
BABYKIDS - Aviso INFORMAMOS para categoria sem vídeos
========================================================= */
.bk-empty-category-section {
padding-top: 10px !important;
}
.bk-empty-category-section[hidden] {
display: none !important;
}
.bk-empty-category-card {
width: min(760px, 100%) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 108px minmax(0, 1fr) !important;
gap: 18px !important;
align-items: center !important;
padding: 18px !important;
border-radius: 26px !important;
background:
radial-gradient(circle at 12% 15%, rgba(255, 207, 80, .32), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,248,255,.94)) !important;
border: 1px solid rgba(80, 151, 255, .18) !important;
box-shadow: 0 16px 42px rgba(47, 101, 196, .12) !important;
color: #26364f !important;
}
.bk-empty-category-img {
width: 108px !important;
height: 108px !important;
display: grid !important;
place-items: center !important;
border-radius: 24px !important;
background: rgba(255,255,255,.72) !important;
box-shadow: inset 0 0 0 1px rgba(80,151,255,.12) !important;
overflow: hidden !important;
}
.bk-empty-category-img img {
width: 86px !important;
height: 86px !important;
max-width: 86px !important;
max-height: 86px !important;
object-fit: contain !important;
display: block !important;
}
.bk-empty-category-copy h3 {
margin: 0 0 6px !important;
color: #ff4d67 !important;
font-size: 18px !important;
line-height: 1.1 !important;
font-weight: 950 !important;
letter-spacing: .02em !important;
}
.bk-empty-category-copy p {
margin: 0 !important;
color: #52627a !important;
font-size: 14px !important;
line-height: 1.48 !important;
font-weight: 700 !important;
}
.bk-category-title-with-icon {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
line-height: 1.1 !important;
}
.bk-category-title-icon {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
object-fit: contain !important;
display: inline-block !important;
filter: drop-shadow(0 8px 14px rgba(31, 95, 190, .16)) !important;
}
@media (max-width: 600px) {
.bk-empty-category-card {
grid-template-columns: 78px minmax(0, 1fr) !important;
gap: 12px !important;
padding: 14px !important;
border-radius: 22px !important;
}
.bk-empty-category-img {
width: 78px !important;
height: 78px !important;
border-radius: 20px !important;
}
.bk-empty-category-img img {
width: 62px !important;
height: 62px !important;
max-width: 62px !important;
max-height: 62px !important;
}
.bk-empty-category-copy h3 {
font-size: 15px !important;
}
.bk-empty-category-copy p {
font-size: 12.5px !important;
}
.bk-category-title-icon {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
}
}
/* =========================================================
BABYKIDS - Loader global corrigido e escondido por padrão
========================================================= */
#bkLoader,
#bkLoader[hidden] {
display: none !important;
}
#bkLoader.active {
position: fixed !important;
inset: 0 !important;
z-index: 9999999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(10, 20, 40, 0.55) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
opacity: 1 !important;
pointer-events: all !important;
}
.bk-loader-box {
display: grid !important;
place-items: center !important;
gap: 10px !important;
padding: 18px 20px !important;
border-radius: 22px !important;
background: rgba(255,255,255,.92) !important;
box-shadow: 0 22px 60px rgba(0,0,0,.20) !important;
color: #26364f !important;
font-size: 13px !important;
font-weight: 900 !important;
}
.bk-loader-spinner {
width: 54px !important;
height: 54px !important;
border-radius: 50% !important;
border: 5px solid rgba(255,77,103,0.18) !important;
border-top-color: #ff4d67 !important;
animation: bkSpin 1s linear infinite !important;
}
@keyframes bkSpin {
to { transform: rotate(360deg); }
}
/* =========================================================
BabyKids - Página Meu Perfil Premium
========================================================= */
body.bk-profile-page {
min-height: 100vh;
background:
radial-gradient(circle at 8% 10%, rgba(255,211,74,.30), transparent 28%),
radial-gradient(circle at 90% 6%, rgba(77,181,255,.30), transparent 32%),
linear-gradient(135deg, #edf8ff 0%, #fff5fb 52%, #f7fbff 100%) !important;
color: #10213f !important;
}
.bk-profile-shell {
width: min(1180px, calc(100% - 28px));
margin: 0 auto;
padding: 10px 0 36px;
}
.bk-profile-hero-card {
position: relative;
overflow: hidden;
border-radius: 34px;
background: rgba(255,255,255,.88);
border: 1px solid rgba(80,151,255,.18);
box-shadow: 0 28px 80px rgba(47,101,196,.16);
}
.bk-profile-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 16% 18%, rgba(255,77,103,.18), transparent 25%),
radial-gradient(circle at 82% 18%, rgba(77,181,255,.20), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.74), rgba(239,248,255,.76));
pointer-events: none;
}
.bk-profile-form {
position: relative;
z-index: 1;
padding: clamp(20px, 4vw, 34px);
}
.bk-profile-main {
display: grid;
grid-template-columns: 150px 1fr;
gap: 24px;
align-items: center;
}
.bk-profile-avatar-wrap {
position: relative;
width: 142px;
height: 142px;
border-radius: 42px;
display: grid;
place-items: center;
cursor: pointer;
isolation: isolate;
}
.bk-profile-avatar-ring {
position: absolute;
inset: -6px;
border-radius: 48px;
background: linear-gradient(135deg, #ff4d67, #ffb347, #4db5ff);
z-index: -1;
box-shadow: 0 20px 44px rgba(47,101,196,.16);
}
.bk-profile-avatar {
width: 142px;
height: 142px;
border-radius: 42px;
object-fit: cover;
background: #fff;
border: 5px solid rgba(255,255,255,.92);
display: block;
}
.bk-profile-avatar-action {
position: absolute;
right: -6px;
bottom: -8px;
width: 46px;
height: 46px;
border-radius: 18px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #ff4d67, #ffb347);
color: #fff;
border: 4px solid #fff;
box-shadow: 0 12px 28px rgba(255,77,103,.20);
}
.bk-profile-kicker {
display: inline-flex;
width: max-content;
padding: 8px 12px;
border-radius: 999px;
background: rgba(77,181,255,.14);
color: #1267b5;
font-weight: 950;
font-size: 12px;
margin-bottom: 10px;
}
.bk-profile-title h1 {
margin: 0;
font-size: clamp(32px, 6vw, 58px);
line-height: .98;
letter-spacing: -.055em;
color: #10213f;
}
.bk-profile-title p {
max-width: 620px;
margin: 12px 0 0;
color: #52627a;
font-weight: 700;
line-height: 1.5;
}
.bk-profile-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.bk-profile-badge {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 8px 12px;
border-radius: 999px;
font-weight: 950;
font-size: 12px;
}
.bk-profile-badge.vip {
color: #5b3100;
background: linear-gradient(135deg, #fde68a, #f59e0b);
}
.bk-profile-badge.free {
color: #164e63;
background: linear-gradient(135deg, #bae6fd, #7dd3fc);
}
.bk-profile-badge.light {
color: #334155;
background: rgba(255,255,255,.72);
border: 1px solid rgba(80,151,255,.14);
}
.bk-profile-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 26px;
}
.bk-profile-fields .field {
display: grid;
gap: 8px;
}
.bk-profile-fields label {
font-size: 13px;
font-weight: 950;
color: #26364f;
}
.bk-profile-fields input {
width: 100%;
min-height: 50px;
border: 1px solid rgba(80,151,255,.18);
background: rgba(244,249,255,.96);
color: #10213f;
border-radius: 17px;
padding: 13px 14px;
outline: none;
font-weight: 800;
}
.bk-profile-fields input:disabled {
opacity: .74;
cursor: not-allowed;
}
.sr-only-file {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.bk-profile-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.bk-profile-quick-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 18px;
}
.bk-profile-mini-card {
min-height: 132px;
border-radius: 28px;
background: rgba(255,255,255,.86);
border: 1px solid rgba(80,151,255,.16);
box-shadow: 0 18px 44px rgba(47,101,196,.10);
padding: 20px;
text-decoration: none;
color: #10213f;
display: grid;
gap: 6px;
transition: transform .18s ease, box-shadow .18s ease;
}
.bk-profile-mini-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 54px rgba(47,101,196,.15);
}
.bk-mini-icon {
width: 46px;
height: 46px;
border-radius: 18px;
display: grid;
place-items: center;
background: linear-gradient(135deg, rgba(255,77,103,.16), rgba(77,181,255,.14));
font-size: 23px;
}
.bk-profile-mini-card strong {
font-size: 18px;
font-weight: 950;
}
.bk-profile-mini-card small {
color: #52627a;
font-weight: 750;
line-height: 1.35;
}
.bk-profile-history-card {
margin-top: 18px;
border-radius: 32px;
background: rgba(255,255,255,.90);
border: 1px solid rgba(80,151,255,.16);
box-shadow: 0 24px 64px rgba(47,101,196,.12);
padding: clamp(18px, 4vw, 28px);
}
.bk-profile-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
}
.bk-profile-section-head span {
color: #ff4d67;
font-weight: 950;
font-size: 13px;
}
.bk-profile-section-head h2 {
margin: 4px 0 0;
font-size: clamp(24px, 4vw, 34px);
color: #10213f;
letter-spacing: -.04em;
}
.bk-profile-history-list {
display: grid;
gap: 10px;
}
.bk-profile-history-item {
display: grid;
grid-template-columns: 1fr 120px 150px;
gap: 12px;
align-items: center;
padding: 14px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(244,249,255,.96), rgba(255,255,255,.94));
border: 1px solid rgba(80,151,255,.12);
}
.bk-profile-history-item strong {
display: block;
color: #10213f;
font-weight: 950;
}
.bk-profile-history-item span,
.bk-history-progress small,
.bk-history-date small {
color: #64748b;
font-size: 12px;
font-weight: 800;
}
.bk-history-progress,
.bk-history-date {
display: grid;
gap: 2px;
}
.bk-history-progress b,
.bk-history-date b {
color: #12315c;
font-size: 13px;
}
.bk-profile-empty {
border-radius: 22px;
padding: 22px;
background: rgba(77,181,255,.10);
border: 1px dashed rgba(77,181,255,.30);
color: #12315c;
}
.bk-profile-empty p {
margin: 6px 0 0;
color: #52627a;
font-weight: 700;
}
@media (max-width: 820px) {
.bk-profile-main,
.bk-profile-fields,
.bk-profile-quick-grid {
grid-template-columns: 1fr;
}
.bk-profile-main {
text-align: center;
justify-items: center;
}
.bk-profile-kicker {
margin-left: auto;
margin-right: auto;
}
.bk-profile-badges,
.bk-profile-actions {
justify-content: center;
}
.bk-profile-history-item {
grid-template-columns: 1fr;
}
.bk-profile-section-head {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 520px) {
.bk-profile-shell {
width: min(100% - 18px, 1180px);
padding-bottom: 24px;
}
.bk-profile-hero-card,
.bk-profile-history-card {
border-radius: 26px;
}
.bk-profile-form {
padding: 18px;
}
.bk-profile-avatar-wrap,
.bk-profile-avatar {
width: 124px;
height: 124px;
border-radius: 36px;
}
.bk-profile-avatar-ring {
border-radius: 42px;
}
.bk-profile-actions .btn,
.bk-profile-actions .btn-secondary {
width: 100%;
}
}
/* =========================================================
BabyKids - Login logo centralizada e proporcional
========================================================= */
.auth-card,
.auth-card-pro,
.auth-card-login {
position: relative !important;
}
/* centraliza o bloco da imagem do login acima do título */
.auth-card .auth-login-icon,
.auth-card-pro .auth-login-icon,
.auth-card-login .auth-login-icon,
.auth-icon-bubble.auth-login-icon {
width: 112px !important;
height: 112px !important;
min-width: 112px !important;
min-height: 112px !important;
max-width: 112px !important;
max-height: 112px !important;
margin: 0 auto 12px auto !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
float: none !important;
clear: both !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
border-radius: 28px !important;
overflow: visible !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* trava a imagem sem distorcer */
.auth-card .auth-login-icon img,
.auth-card-pro .auth-login-icon img,
.auth-card-login .auth-login-icon img,
.auth-icon-bubble.auth-login-icon img,
img[src*="IconLogin.webp"],
img[src*="IconLogin.svg"] {
width: 104px !important;
height: 104px !important;
min-width: 104px !important;
min-height: 104px !important;
max-width: 104px !important;
max-height: 104px !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
position: static !important;
float: none !important;
transform: none !important;
border: 0 !important;
border-radius: 0 !important;
}
/* garante que título e textos não fiquem empurrados pela imagem */
.auth-card h2,
.auth-card-pro h2,
.auth-card-login h2 {
clear: both !important;
text-align: left !important;
margin-top: 0 !important;
}
/* se a tela de login tiver classe auth-page/auth-login-page, reforça */
body.auth-login-page .auth-login-icon,
body.auth-page .auth-login-icon {
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 520px) {
.auth-card .auth-login-icon,
.auth-card-pro .auth-login-icon,
.auth-card-login .auth-login-icon,
.auth-icon-bubble.auth-login-icon {
width: 96px !important;
height: 96px !important;
min-width: 96px !important;
min-height: 96px !important;
max-width: 96px !important;
max-height: 96px !important;
margin-bottom: 10px !important;
}
.auth-card .auth-login-icon img,
.auth-card-pro .auth-login-icon img,
.auth-card-login .auth-login-icon img,
.auth-icon-bubble.auth-login-icon img,
img[src*="IconLogin.webp"],
img[src*="IconLogin.svg"] {
width: 92px !important;
height: 92px !important;
min-width: 92px !important;
min-height: 92px !important;
max-width: 92px !important;
max-height: 92px !important;
}
}