.elementor-3424 .elementor-element.elementor-element-c901116{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-0f50fe3 */:root{
    --bg:#313131;
    --surface:#313131;
    --text:#fff;
    --muted:#9fb3c8;
    --primary:#AEFF00;
    --radius:10px;
    --sp:16px;
    --sp2:24px;
    --shadow:0 6px 20px rgba(0,0,0,.15)
    
}

*{ box-sizing:border-box }

html, body {
    margin: 0;
    background: #313131;
    color: #fff;
    font: 14px/1.45 'Montserrat';
    height: 100%;
}

body { display: flex; flex-direction: column; }
.container { flex: 1; }
.container{ max-width:1200px; margin:0 auto; }


.number{ display: flex; column-gap: 10px; align-items: center; }
.banner__img{ width:100%; display:block; border-radius:0 0 10px 10px; margin-bottom: 20px; border:1px solid rgba(255,255,255,.08); border-top: none; box-shadow:var(--shadow) }

.grid{ display:grid; grid-template-columns:1fr 420px; gap:24px }
@media(max-width:1024px){ .grid{grid-template-columns:1fr} .preview{position:static} }

.form,.preview,.download,.final{
  background:var(--surface); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:var(--sp2); box-shadow:var(--shadow); margin-bottom: 25px;
}
.preview{ position:sticky; top:20px; height:fit-content; padding: 20px; }

h3{ margin:0 0 var(--sp) }
.form-label{ display:block;  color:#fff; margin-top: 15px; margin-bottom: 10px; }
.form-control{
  width:100%; padding:12px 14px; border:1px solid rgba(255,255,255,.16);
  border-radius:8px; background:#313131; color:#fff; margin-top: 10px;
  font-family: 'Montserrat'; outline: none;
}

.row{ display:flex; gap:8px; align-items:center; }

.brand-options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-top:12px; margin-bottom:30px;}

.brand-option{
  display:flex; gap:8px; align-items:center; justify-content:center; padding:12px;
  border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#313131; color:#fff;
  cursor:pointer; transition:.2s; font-family:'Montserrat';
}

.brand-option input[type="checkbox"],
.brand-option input[type="radio"]{
  margin-right: 8px;
}

.brand-option:hover{ transform:translateY(-1px) scale(0.95); border-color:var(--primary); }
.brand-option.selected{ outline:2px solid var(--primary) }

.step-badge{ width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; background:var(--primary); color:#313131; font-weight:700; margin-bottom:6px }
.step-title{ margin-bottom:5px; }
.form-step{ margin-bottom:var(--sp2); animation:fade .4s ease both }
@keyframes fade{from{opacity:.6;transform:translateY(8px)}to{opacity:1;transform:none}}

.btn{ border:0; border-radius:10px; padding:10px 16px; cursor:pointer }
.btn--primary{ background:#313131; color:#fff }
.btn--secondary{ background:#313131; color:#fff }
.btn--primary:hover,.btn--secondary:hover{ transform:translateY(-1px) scale(0.95); border-color:var(--primary) }
.btn--lg{ padding:12px 18px; font-size:16px }
.generate,.download{ text-align:center; background-color: #AEFF00; padding: 20px; border-radius: 10px; }
#downloadSection{ margin: 20px 0; }
#clearBgBtn{ background-color:#AEFF00; color:#313131; font-size:10px; margin-top:10px; font-weight:600; }

.preview__title{ text-align:center; background:var(--primary); color:#313131; padding:10px; border-radius:6px; margin-bottom:12px }

/* Card */
.job-card{ position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; color:#fff; padding-top: 15px; object-fit:cover; }

.card-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.card-dim-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,0); transition: background .15s ease; }
.card-skin{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; pointer-events:none; }

/* texto no topo */
.job-card > *:not(.card-bg):not(.card-dim-overlay):not(.card-skin){ position:relative; z-index:3 }

.job-card__header,.job-card__content,.job-card__footer{ max-width:60%; margin-left:24px; margin-right:auto; text-align:left }
.job-card__opportunity{ display:block; font-size:12px; opacity:.9; margin-bottom:4px }
.job-card__brand{ display:block; font-size:14px; font-weight:800; text-transform:uppercase; }
.job-card__title{ font-size:26px; font-weight:800; line-height:1; margin-top:8px; margin-bottom:8px; }
.job-card__location{ margin-top:6px; font-size:14px }

/* CTA dentro do card */
.cta-btn{
  display:inline-block;
  padding:10px 16px;
  background:var(--primary);
  color:#313131;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  margin-top:14px;
  border:0;
}

/* Rodapé do card herda alinhamento */
.job-card.align-center .job-card__footer{ max-width:80%; margin:0 auto; text-align:center }
.job-card.align-right  .job-card__footer{ max-width:60%; margin-left:auto; margin-right:24px; text-align:right }
.job-card.align-left   .job-card__footer{ max-width:60%; margin-left:24px; margin-right:auto; text-align:left }

/* Slider */
#overlayRange{ -webkit-appearance:none; width:100%; height:6px; background:#555; border-radius:5px; outline:none; padding:20px; }
#overlayRange::-webkit-slider-runnable-track{ height:6px; background:var(--primary); border-radius:5px; }
#overlayRange::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; background:var(--primary); border-radius:50%; cursor:pointer; margin-top:-6px; }
#overlayRange::-moz-range-track{ height:6px; background:var(--primary); border-radius:5px; }
#overlayRange::-moz-range-thumb{ width:18px; height:18px; background:var(--primary); border-radius:50%; cursor:pointer; }

/* Auth */
.auth{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.6); backdrop-filter:saturate(1.2) blur(2px); z-index:9999; padding:24px; }
.auth__card{ width:min(420px, 92vw); background:#313131; color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:24px; }
.auth__card h2{ margin:0 0 8px }
.auth__hint{ opacity:.8; margin:0 0 16px }
.auth__error{ color:#ff6b6b; margin-top:10px; font-size:13px }
.logout-fab{ position:fixed; right:16px; top:16px; z-index:9998; padding:10px 14px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.15); cursor:pointer; }

/* WYSIWYG */
.wysiwyg { margin-top: 8px; }
.wysiwyg__toolbar { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.wys-btn { padding:6px 10px; border-radius:8px; background:#3a3a3a; color:#fff; border:1px solid rgba(255,255,255,.16); cursor:pointer; }
.wys-btn:hover { transform: translateY(-1px) scale(0.98); border-color: var(--primary); }
.wysiwyg__editor { min-height: 96px; background: #313131; overflow: auto; outline: none; white-space: pre-wrap; }
.wysiwyg__editor:empty:before { content: attr(data-placeholder); color: #9fb3c8; }

/* Preservar quebras no preview */
#previewCity { white-space: pre-wrap; display:block; font-weight:400; }
#previewCity p, #previewCity div, #previewCity li { margin: 0; }

/* ===== Estilo de links (editor + preview) ===== */
.wysiwyg__editor a,
#previewCity a{
  text-decoration: none !important;
  outline: none;
  border-bottom: none;
}
.wysiwyg__editor a { color: #AEFF00; }

/* ===== Alinhamentos do card ===== */
.job-card.align-left .job-card__header,
.job-card.align-left .job-card__content,
.job-card.align-left .job-card__footer{
  max-width:60%;
  margin-left:24px; margin-right:auto;
  text-align:left;
}
.job-card.align-left .job-card__content{ display:flex; flex-direction:column; align-items:flex-start; }

.job-card.align-center .job-card__header,
.job-card.align-center .job-card__content,
.job-card.align-center .job-card__footer{
  max-width:80%;
  margin-left:auto; margin-right:auto;
  text-align:center;
}
.job-card.align-center .job-card__content{ display:flex; flex-direction:column; align-items:center; }

.job-card.align-right .job-card__header,
.job-card.align-right .job-card__content,
.job-card.align-right .job-card__footer{
  max-width:60%;
  margin-left:auto; margin-right:24px;
  text-align:right;
}
.job-card.align-right .job-card__content{ display:flex; flex-direction:column; align-items:flex-end; }

/* padrão */
.job-card:not(.align-left):not(.align-center):not(.align-right) .job-card__header,
.job-card:not(.align-left):not(.align-center):not(.align-right) .job-card__content,
.job-card:not(.align-left):not(.align-center):not(.align-right) .job-card__footer{
  max-width:60%;
  margin-left:24px; margin-right:auto;
  text-align:left;
}

/* alinhamento “centro no meio” */
.job-card.align-middle {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical */
  align-items: center;     /* horizontal */
  text-align: center;
}
.job-card.align-middle .job-card__header,
.job-card.align-middle .job-card__content,
.job-card.align-middle .job-card__footer {
  max-width: 80%;
  margin: 0 auto;
}

/* centralização vertical persistente */
.job-card.vcenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Button style toggle pills */
.btn-style-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.btn-style { display: block; width: 100%; padding: 14px 18px; border-radius: 16px; border: 2px solid rgba(174,255,0,0.6); background: transparent; color: #fff; font-weight: 600; }
.btn-style.active { box-shadow: 0 0 0 2px rgba(174,255,0,0.6) inset; border-color: rgba(174,255,0,0.9); }

/* Unified range style */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  border-radius:5px;
  background: rgba(255,255,255,.16);
  outline:none;
  padding: 20px;
}
input[type="range"]::-webkit-slider-runnable-track{ height:8px; border-radius:10px; background: rgba(255,255,255,.16); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background: var(--primary);
  margin-top:-5px; cursor:pointer; border:none; box-shadow: 0 0 0 3px rgba(174,255,0,0.2);
}
/* Firefox */
input[type="range"]::-moz-range-track{ height:8px; border-radius:10px; background: rgba(255,255,255,.16); }
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background: var(--primary);
  border:none; cursor:pointer; box-shadow: 0 0 0 3px rgba(174,255,0,0.2);
}

/* Range/Slider — unified (same for overlay + font ranges) */
input[type="range"], #overlayRange, .font-range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #555;
  border-radius: 5px;
  outline: none;
  padding: 20px;
}
input[type="range"]::-webkit-slider-runnable-track, #overlayRange::-webkit-slider-runnable-track, .font-range::-webkit-slider-runnable-track{
  height: 6px; background: var(--primary); border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb, #overlayRange::-webkit-slider-thumb, .font-range::-webkit-slider-thumb{
  -webkit-appearance: none; width: 18px; height: 18px; background: var(--primary); border-radius: 50%; cursor: pointer; margin-top: -6px; border: none; box-shadow: none;
}
/* Firefox track & thumb */
input[type="range"]::-moz-range-track, #overlayRange::-moz-range-track, .font-range::-moz-range-track{ height: 6px; background: var(--primary); border-radius: 5px; }
input[type="range"]::-moz-range-thumb, #overlayRange::-moz-range-thumb, .font-range::-moz-range-thumb{
  width: 18px; height: 18px; background: var(--primary); border-radius: 50%; cursor: pointer; border: none; box-shadow: none;
}

/* === Grid helpers Step 4 === */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; margin-top: 10px; }
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }
.colors-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 700px){ .colors-grid{ grid-template-columns: 1fr; } }
#btnSizeRange.form-control{ padding: 10px 14px; }

/* Step 4 ajustes */
#step4 .two-col{ align-items: center; }
#btnSizeRange.form-control{ padding: 20px; }
#step4 .two-col{ align-items: center; }
#step4 .range-field{ padding: 17px; display: flex; align-items: center; background-color: #555; border-radius: 5px;}
#step4 .range-field .font-range{ width: 100%; padding: 0 !important; margin: 0; background: transparent; border: 0; outline: none; }

/* Footer */
.footer{ background:#AEFF00; margin-top:0; padding:20px; text-align:center; border-top:1px solid rgba(255,255,255,.06); }
#text-footer{ color: #313131; font-weight: 600; }

/* ========================= */
/*        GALERIA (NOVO)     */
/* ========================= */
.gallery-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000; /* acima do accessGate (9999) */
}
.gallery-content{
  background:#313131;
  padding:20px;
  border-radius:12px;
  width:min(92vw,800px);
  max-height:90vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
  margin-top:16px;
}
.gallery-item{
  width:100%;
  border-radius:8px;
  cursor:pointer;
  transition:.2s;
  border:1px solid rgba(255,255,255,.08);
  object-fit:cover;
}
.gallery-item:hover{
  transform:scale(1.05);
  outline:2px solid var(--primary);
}

/* ===== Gallery Modal & Grid (idêntico ao Identidade) ===== */
.modal { position: fixed; inset: 0; z-index: 10000; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.modal__card {
  position: relative; z-index: 1; width: min(940px, 94vw); max-height: 86vh;
  margin: 6vh auto; background: #313131; color:#fff; border:1px solid rgba(255,255,255,.12);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.45); display:flex; flex-direction:column;
}
.modal__header { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.modal__content { padding: 14px 16px; overflow:auto; position: relative; }
.modal__footer { padding: 12px 16px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:flex-end; gap:8px; }
.modal__close { background:#3a3a3a; color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:6px 10px; cursor:pointer; }
.modal__close:hover { transform: translateY(-1px) scale(0.98); border-color: var(--primary); }

/* Grid de miniaturas */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.gallery-item {
  position: relative;
  border:1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  overflow: hidden;
  background: #262626;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.gallery-item:hover { transform: translateY(-1px) scale(.99); border-color: var(--primary); }
.gallery-thumb { display:block; width:100%; aspect-ratio: 4/5; object-fit: cover; }
.gallery-caption {
  position:absolute; left:8px; bottom:8px; right:8px;
  background: rgba(0,0,0,.35); padding: 6px 8px; border-radius: 8px; font-size: 12px;
}
.gallery-selected::after {
  content: "✓"; position: absolute; right: 8px; top: 8px;
  background: var(--primary); color:#313131; border-radius: 999px; width: 22px; height: 22px;
  display:grid; place-items:center; font-weight: 800;
}

/* Filtros por formato */
.gallery-filters{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.filter-btn{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:#3a3a3a; color:#fff; cursor:pointer; font: 12px/1.2 'Montserrat', sans-serif;
}
.filter-btn:hover{ transform: translateY(-1px) scale(0.99); border-color: var(--primary); }
.filter-btn.active{ outline:2px solid var(--primary); background:#313131; color:#fff; }

/* Hover preview grande */
.hover-preview{
  position: fixed; z-index: 10001; pointer-events: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; overflow: hidden; background:#1f1f1f;
  width: min(40vw, 420px);
  aspect-ratio: 4/5;
}
.hover-preview img{ width:100%; height:100%; object-fit: cover; display:block; }

/* Etiqueta com o formato (ex: 1080×1350) */
.gallery-chip{
  position: absolute;
  top: 8px; left: 8px;
  padding: 4px 8px;
  font: 11px/1 'Montserrat', sans-serif;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: #fff;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

/* Destaque “Adaptável” igual ao identidade */
.filter-btn[data-fmt="adaptavel"] {
  background-color: var(--primary);
  color: var(--surface);
  font-weight: bold;
}
.filter-btn[data-fmt="adaptavel"].active {
  outline: 2px solid var(--primary);
  background-color: var(--primary);
  color: var(--surface);
}

/* ===== Padronização dos color pickers (passos 3 e 4) ===== */
input[type="color"].form-control {
  appearance: none;
  -webkit-appearance: none;
  width: 64px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: none;
}
input[type="color"].form-control::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"].form-control::-webkit-color-swatch { border: none; border-radius: 6px; }
input[type="color"].form-control::-moz-color-swatch { border: none; border-radius: 6px; }

/* (fallback) inputs de cor genéricos */
input[type="color"] {
  appearance: auto;
  -webkit-appearance: color-swatch;
  padding: 0;
  border: none;
  background: none;
  width: 48px;
  height: 32px;
  cursor: pointer;
}

/* ===== Sliders: overlay e tamanhos (iguais ao identidade) ===== */
#overlayRange,
.font-range{
  -webkit-appearance:none;
  width:100%;
  height:6px;
  background:#555;
  border-radius:5px;
  outline:none;
  padding:20px;
}
#overlayRange::-webkit-slider-runnable-track,
.font-range::-webkit-slider-runnable-track{
  height:6px; background:var(--primary); border-radius:5px;
}
#overlayRange::-webkit-slider-thumb,
.font-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; background:var(--primary); border-radius:50%;
  cursor:pointer; margin-top:-6px;
}
#overlayRange::-moz-range-track,
.font-range::-moz-range-track{ height:6px; background:var(--primary); border-radius:5px; }
#overlayRange::-moz-range-thumb,
.font-range::-moz-range-thumb{ width:18px; height:18px; background:var(--primary); border-radius:50%; cursor:pointer; }

/* ===== CTA no preview (mesma estética) ===== */
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; font-weight:800; text-decoration:none !important;
  margin-top:16px; transition: transform .12s ease, opacity .12s ease; border:2px solid transparent;
}
#jobCard .cta-btn { padding: 8px 12px; font-size: 12px; }
.cta-btn:hover{ transform: translateY(-1px) scale(0.99); }
.cta--outline{ background:transparent !important; }

#previewJobTitle{
  font-size:27px;
  font-family: "Montserrat";
}

/* iOS/Safari: padronizar o color picker como retângulo */
input[type="color"].color-picker{
  -webkit-appearance: none;
  appearance: none;
  width: 48px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 0px; /* use var(--radius) se preferir */
  cursor: pointer;
}
input[type="color"].color-picker::-webkit-color-swatch-wrapper{ padding: 0px; }
input[type="color"].color-picker::-webkit-color-swatch{ border: 0; border-radius: 0px; }
input[type="color"].color-picker::-moz-color-swatch{ border: 0; border-radius: 0px; }


@media(max-width:768px){
  
  .form{margin-left: 17px; margin-right: 17px;}
  .preview{margin-left: 17px; margin-right: 17px;}
  .banner__img{border-radius: 0; border-left: 0; border-right: 0;}

}

@media (max-width: 768px){
  #downloadSection{
    margin-left: 17px;
    margin-right: 17px;
    margin-top: 0;
  }

  .final{
    margin-left: 17px;
    margin-right: 17px;
    margin-top: 0;
  }

  #downloadSection .row{
    flex-direction: column;   /* antes é flex em linha */
    align-items: stretch;     /* ocupar toda a largura */
    gap: 12px;
  }
  #downloadSection .btn{
    width: 100%;
  }
}

/* No mobile, preview fica por cima do formulário */
@media (max-width: 768px) {
  .grid {
    display: flex;
    flex-direction: column;
  }
  .preview {
    order: -1;   /* Faz o preview aparecer primeiro */
    position: static !important; /* Remove o stick */
    margin-bottom: 0px;
  }
  .form {
    order: 0;
  }
}

/* === Ritmo vertical com gap (elimina espaço extra no fim) === */
#cardForm {
  display: flex;
  flex-direction: column;
  gap: 16px;               /* controla todo o espaçamento vertical */
}

/* Zera margins que criavam "peso" no rodapé do box */
#cardForm .form-step,
#cardForm .brand-options,
#cardForm .row,
#cardForm .generate {
  margin: 0 !important;
}

/* Espaço extra abaixo do bloco "Gerar Card" */
#cardForm .generate{
  margin-top: 16px !important;   /* ou 30px se quiser mais respiro */
}

/* Mantém apenas um respiro em cima das grades de opções */
#cardForm .brand-options { margin-top: 12px !important; }

/* (opcional) garante simetria de padding no box do formulário */
.form { padding-block: 24px; }

#cardForm {
  display: flex;
  flex-direction: column;
  gap: 0; /* sem gap global */
}

/* 30px só entre steps, o primeiro sem margem */
#cardForm .form-step { margin: 0; }
#cardForm .form-step:not(:first-of-type) { margin-top: 30px !important; }

/* dê respiro pontual nos outros blocos, se precisar */
#cardForm .brand-options,
#cardForm .row,
#cardForm .generate { margin-top: 12px; }

/* Radios customizados */
input[type="radio"] {
  accent-color: #AEFF00; /* funciona em Chrome, Edge, Firefox, Safari modernos */
}

/* fallback para browsers antigos */
input[type="radio"] {
  width: 10px;
  height: 10px;
  border: 2px solid #AEFF00;
  border-radius: 50%;
  appearance: none;       /* remove o estilo padrão */
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  margin-bottom: 4px;
}
input[type="radio"]:checked {
  background-color: #AEFF00;
}

/* Checkbox customizados */
input[type="checkbox"] {
  accent-color: #AEFF00; /* funciona em Chrome, Edge, Firefox, Safari modernos */
}

/* fallback para browsers antigos */
input[type="checkbox"] {
  width: 10px;
  height: 10px;
  border: 2px solid #AEFF00;
  border-radius: 50%;
  appearance: none;       /* remove o estilo padrão */
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  margin-bottom: 4px;
}
input[type="checkbox"]:checked {
  background-color: #AEFF00;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.swatch {
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0px solid rgba(255,255,255,.3);
  cursor: pointer;
  position: relative;
  background: transparent;
}

.swatch::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 0px;
  background: var(--c);
}

.swatch.is-active {
  outline: 1px solid var(--primary);
  outline-offset: 1px;
}/* End custom CSS */
/* Start custom CSS */#cardBackgroundImage{
    object-fit: cover;
}/* End custom CSS */