/* =========================
ADMIN STATUS
========================= */

.adminStatusPill{
  background: rgba(29,185,84,.14);
  border-color: rgba(29,185,84,.35);
}

/* =========================
HERO
========================= */

.adminHero{
  cursor:pointer;
  width:100%;
  overflow:hidden;
}

.adminHero__content{
  justify-content:flex-start;
  padding:18px;
}

.adminHero__box{
  position:relative;
  z-index:2;
  max-width:320px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,10,12,.32);
  backdrop-filter:blur(6px);
}

.adminHero__kicker{
  font-weight:1000;
  letter-spacing:.7px;
  font-size:12px;
  color:rgba(255,255,255,.82);
}

.adminHero__title{
  margin-top:6px;
  font-weight:1000;
  font-size:22px;
  line-height:1.08;
}

/* =========================
INTRO
========================= */

.adminIntro{
  margin-top:14px;
}

/* =========================
CARDS
========================= */

.adminFavCard{
  position:relative;
}

.adminFavCard .adminEditMini{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:3;
  padding:8px 12px;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg,var(--green),var(--green2));
  color:#08110a;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(29,185,84,.22);
}

.adminItem{
  position:relative;
  cursor:default;
}

.adminItem__body{
  padding-right:10px;
}

.adminItemActions{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  padding-top:8px;
}

.adminEditBtn{
  min-width:110px;
  padding:10px 16px;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg,var(--green),var(--green2));
  color:#08110a;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(29,185,84,.22);
}

.adminBadgeOff{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  width:100%;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

/* =========================
MODAL
========================= */

.adminModal .modal__panel{
  max-width:420px;
}

.adminModal__panel{
  background:rgba(20,20,26,.98);
}

.adminModal.open{
  display:block !important;
}

.adminModal .modal__panel{
  width:min(420px, calc(100% - 20px));
  max-height:90vh;
  overflow:auto;
}

.adminModal .modal__body{
  overflow-y:auto;
}

/* =========================
FORM
========================= */

.adminForm{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* =========================
IMAGE PREVIEW
========================= */

.adminPreview{
  height:400px !important;
}

.adminPreview img{
  max-width:100%;
  max-height:90%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* banner preview */

.adminPreview--banner{
  height:220px;
}

/* =========================
FIELDS
========================= */

.adminField{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.adminField input,
.adminField textarea,
.adminField select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
}

.adminField textarea{
  resize:vertical;
  min-height:96px;
}

/* =========================
SELECT FIX
========================= */

.adminField select{
  appearance:none;
}

.adminField select option{
  background:#111;
  color:#fff;
}

/* =========================
CHECKBOXES
========================= */

.adminChecks{
  display:grid;
  gap:10px;
}

.adminCheck{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-weight:800;
}

.adminCheck input{
  accent-color:var(--green);
}

/* =========================
BUTTONS
========================= */

.adminActions{
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-top:4px;
}

.adminActions .btn{
  flex:1;
}

/* =========================
IMAGE ACTIONS
========================= */

.adminImageActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.adminFileBtn{
  cursor:pointer;
}

/* =========================
CROP
========================= */

.cropBox{
  width:100%;
  display:flex;
  justify-content:center;
}

.cropFrame{
  position:relative;
  width:100%;
  max-width:320px;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.cropFrame img{
  position:absolute;
  top:0;
  left:0;
  user-select:none;
  cursor:grab;
  transform-origin:top left;
}

.cropFrame img.dragging{
  cursor:grabbing;
}

.cropHint{
  font-size:12px;
  color:rgba(255,255,255,.72);
  text-align:center;
}

/* =========================
UTILS
========================= */

.hidden{
  display:none !important;
}

html,body{
  overflow-x:hidden;
  max-width:100%;
}

*{
  box-sizing:border-box;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width:520px){

  .adminHero__title{
    font-size:20px;
  }

  .adminEditBtn{
    min-width:100px;
  }
}

.adminStatusWrap{
  position:relative;
}

.adminStatusPill{
  cursor:pointer;
}

.adminStatusPill.is-open{
  background: rgba(29,185,84,.12);
  border: 1px solid rgba(29,185,84,.30);
}

.adminStatusPill.is-open .status__dot{
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(29,185,84,.12);
}

.adminStatusPill.is-closed{
  background: rgba(255,59,48,.12);
  border: 1px solid rgba(255,59,48,.30);
}

.adminStatusPill.is-closed .status__dot{
  background: #ff3b30;
  box-shadow: 0 0 0 5px rgba(255,59,48,.12);
}

.adminStatusMenu{
  position:absolute;
  top: calc(100% + 8px);
  right:0;
  min-width:150px;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(20,20,26,.98);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:50;
}

.adminStatusOption{
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  text-align:left;
  font-weight:800;
  cursor:pointer;
}

.adminStatusOption:hover{
  background: rgba(255,255,255,.10);
}
/* =========================
   MICRO ANIMAÇÕES — ADMIN
========================= */

.brand,
.iconBtn,
.status__pill,
.adminStatusOption,
.adminEditBtn,
.adminEditMini,
.btn,
.adminHero,
.adminFavCard,
.adminItem,
.chip{
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    opacity .18s ease;
  will-change: transform;
}

/* header clicável */
.brand{
  cursor:pointer;
}

@media (hover:hover){
  .brand:hover{
    transform: translateY(-1px);
    filter: brightness(1.04);
  }

  .iconBtn:hover,
  .status__pill:hover,
  .adminStatusOption:hover,
  .chip:hover{
    transform: translateY(-1px);
    filter: brightness(1.06);
  }

  .btn:hover,
  .adminEditBtn:hover,
  .adminEditMini:hover{
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 16px 28px rgba(0,0,0,.20);
  }

  .adminFavCard:hover,
  .adminItem:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 16px 34px rgba(0,0,0,.22);
  }

  .adminHero:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
  }

  .adminHero:hover .promo__bg{
    transform: scale(1.045);
    transition: transform .35s ease;
  }
}

.iconBtn:active,
.status__pill:active,
.adminStatusOption:active,
.adminEditBtn:active,
.adminEditMini:active,
.btn:active,
.chip:active{
  transform: translateY(0);
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .brand,
  .iconBtn,
  .status__pill,
  .adminStatusOption,
  .adminEditBtn,
  .adminEditMini,
  .btn,
  .adminHero,
  .adminFavCard,
  .adminItem,
  .chip,
  .promo__bg{
    transition: none !important;
    transform: none !important;
  }
}
/* Remove highlight azul ao tocar no mobile */
* {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}

/* =========================
   ADD PRODUCT
========================= */

.sectionTitleBtn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-weight:1100;
  text-align:left;
  cursor:pointer;
}

.keywordList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.keywordTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  font-size:13px;
  font-weight:800;
}

.keywordTag button{
  border:none;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:0;
}
.sectionTitleBtn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);

  font: inherit;
  font-weight: 1100;
  font-size: 22px;
  text-align: left;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;

  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.sectionTitleBtn .section__icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,176,46,.10);
  border: 1px solid rgba(255,176,46,.18);
  font-size: 16px;
}

@media (hover:hover){
  .sectionTitleBtn:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
  }
}

/* =========================
   EXTRAS — LAYOUT PROFISSIONAL
========================= */

.extras-container {
  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 100%;
  padding: 14px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

/* título */
.extras-container label {
  font-weight: 900;
  font-size: 14px;
}

/* inputs alinhados */
.extras-inputs {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: 8px;
  width: 100%;
}

/* inputs padrão do sistema */
.extras-inputs input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: var(--text);

  outline: none;
}

/* botão adicionar */
.extras-inputs button {
  padding: 0 14px;
  border-radius: 12px;
  border: none;

  background: linear-gradient(180deg,var(--green),var(--green2));
  color: #08110a;

  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

/* lista */
.extras-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* item */
.extra-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 12px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

/* texto */
.extra-item span {
  font-size: 14px;
  font-weight: 600;
}

/* botão remover */
.extra-item button {
  padding: 4px 8px;
  border-radius: 8px;

  border: none;
  background: rgba(255,255,255,.08);
  color: #fff;

  cursor: pointer;
}

.extra-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.extra-remove {
  background: transparent;
  border: none;
  color: #888;
  font-size: 16px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.extra-remove:hover {
  background: rgba(255, 0, 0, 0.1);
  color: #ff3b3b;
  transform: scale(1.15);
}

.product-card {
  transition: 0.2s;
}

.product-card:active {
  transform: scale(0.97);
}

.floating {
  display: flex;
  animation: floatCard 3s ease-in-out infinite;
}

@keyframes floatCard {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}