:root{
  --bg-start:#f4e7ff; --bg-end:#ffe6f3; --text:#2a2533; --muted:#5a4d6f;
  --primary:#b07cff; --primary-2:#ffb3d1; --border:#eadff5; --accent:#cdb8ff;
  --shadow: 0 12px 28px rgba(139, 92, 246, .16);
}
html, body{ min-height:100%; background:linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
  background-attachment:fixed; background-repeat:no-repeat; color:var(--text); }
.brand-icons{ display:flex; align-items:center; gap:.6rem; }
.brand-icons img{ width:50px; height:50px; border-radius:12px; object-fit:cover; box-shadow:0 6px 14px rgba(0,0,0,.08); }
.brand-title{ font-weight:800; letter-spacing:.2px; color:#3a2f4f; }
.header-level{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  min-width:0;
}
.header-level .level-left,
.header-level .level-right{
  display:flex;
  align-items:center;
  flex:0 1 auto !important;
  width:auto !important;
}
.header-level .level-item{ flex:0 0 auto; }
.header-level .brand-icons{ flex-wrap:nowrap; }
.header-level .brand-title{
  white-space:nowrap;
}
.header-level .marketplace-logo{ flex:0 0 auto; }
.header-level .level-left{
  justify-content:flex-start;
  margin-right:auto;
}
.header-level .level-right{
  justify-content:flex-end;
  margin-left:auto;
}

@media (max-width: 768px) {
  .header-level{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    flex-direction:row !important;
  }
  .header-level .level-left{
    flex:1 1 auto;
    min-width:0;
    justify-content:flex-start !important;
    margin-right:auto !important;
  }
  .header-level .brand-icons{ min-width:0; }
  .header-level .level-right{
    flex:0 0 auto;
    justify-content:flex-end !important;
    margin-left:auto !important;
  }
}
.marketplace-logo{
  width:50px;
  height:50px;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.marketplace-logo.is-visible{
  opacity:1;
  visibility:visible;
}
.marketplace-logo.fade-in{
  animation: marketplaceFadeIn 1s ease;
}
.marketplace-logo.fade-out{
  animation: marketplaceFadeOut 1s ease;
}
@keyframes marketplaceFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes marketplaceFadeOut{
  from{ opacity:1; }
  to{ opacity:0; }
}
.box.pastel-card{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); }
.pastel-label{ color:#3a2f4f; font-weight:700; font-size:.95rem; letter-spacing:.2px; }
.pastel-hint{ color:var(--muted); font-size:.85rem; }
.pastel-input, .pastel-textarea, .pastel-select select{ background:#fff; border:1px solid var(--border); color:var(--text); border-radius:12px; }
.pastel-input:focus, .pastel-textarea:focus, .pastel-select select:focus{ border-color:var(--primary); box-shadow:0 0 0 .25rem rgba(176,124,255,.15); }
.pastel-select select:disabled{
  background:#f2f2f2;
  color:#888;
  border-color: var(--border);
  opacity:1;
}
.pastel-select select option:disabled {
  color: #ccc;
  font-style: italic;
}
.button.is-primary{ background:linear-gradient(180deg, var(--primary), #a46bff); border:1px solid #bfa3ff; }
.button.is-primary:hover{ filter:saturate(1.05) brightness(1.02); }
.button.is-light-rose{ background:linear-gradient(180deg, #ffd0e4, var(--primary-2)); border:1px solid #ffd6e8; color:#6b3250; }
.button.is-light-rose:hover{ filter:saturate(1.05) brightness(1.03); }
.button.is-light-gray{ background:linear-gradient(180deg, #f5f5f5, #e8e8e8); border:1px solid #dedede; color:#4a4a4a; }
.button.is-light-gray:hover{ filter:saturate(1.05) brightness(1.03); }
.image-box{ border:1px dashed var(--accent); border-radius:12px; display:grid; place-items:center; background:#fff; position:relative; overflow:hidden; }
.image-actions{ position:absolute; top:10px; right:10px; display:flex; gap:.5rem; }
.image-actions .button{ font-size:.95rem; padding:.5rem .7rem; }
.image-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #d7c6f2;
  background:linear-gradient(180deg, #ffffff, #f2ecff);
  color:#4a2f73;
  font-size:1.6rem;
  line-height:1;
  padding-bottom:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(139, 92, 246, .18);
}
.image-nav.prev{ left:10px; }
.image-nav.next{ right:10px; }
.image-nav:disabled{ opacity:.4; cursor:not-allowed; }
.image-thumbs-wrap{
  margin-top:.6rem;
  width:100%;
  max-width: calc(8 * 50px + 7 * .5rem);
  margin-inline:auto;
  position:relative;
  overflow:hidden;
}
.image-thumbs{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding-bottom:.25rem;
  padding-inline:24px;
  scroll-behavior:smooth;
  scroll-padding-inline:24px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  box-sizing:border-box;
}
.image-thumbs.is-centered{
  justify-content:center;
}
.image-thumbs::-webkit-scrollbar{ display:none; }
.image-thumbs-wrap::before,
.image-thumbs-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:24px;
  pointer-events:none;
  z-index:2;
}
.image-thumbs-wrap::before{
  left:0;
  background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}
.image-thumbs-wrap::after{
  right:0;
  background:linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
}
.image-thumb{
  width:50px;
  height:50px;
  border-radius:50%;
  border:2px solid transparent;
  background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  flex:0 0 auto;
  overflow:hidden;
  cursor:pointer;
}
.image-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.image-thumb.selected{
  border-color: var(--primary);
  box-shadow:0 4px 12px rgba(176,124,255,.35);
}
.rest{ overflow:hidden; max-height:0; opacity:0; transform:translateY(8px); transition: opacity 220ms ease, max-height 320ms ease, transform 220ms ease; }
.rest.visible{ max-height: 3000px; opacity:1; transform: translateY(0); overflow: visible; }
.overlay{ position:fixed; inset:0; display:none; place-items:center; z-index:50; background:rgba(0,0,0,.15); backdrop-filter:blur(2px); }
.overlay.show{ display:grid; }
.loader{ background:#fff; border:1px solid var(--border, #eadff5); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:20px; display:flex; justify-content:center; align-items:center; min-width:100px; min-height:100px; transform:none !important; animation:none !important; }
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid #e8defc; border-top-color:#b07cff; animation:spin 900ms linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.toasts{ position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:60; display:grid; gap:10px; width:min(92vw,520px); }
.toast{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); color:var(--text); font-weight:600; text-align: center; }
.toast.success{ border-color:#c7f2d8; background-color: #c9ffd8; }
.toast.error{ border-color:#ffd3d8; background-color: #ffc9c9; }
.disabled-area{ opacity:.55; pointer-events:none; filter:grayscale(.05); }
.chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; color:#6d5b8b; border:1px solid var(--border); background:#fff; padding:.25rem .6rem; border-radius:999px; }
.switch-wrap{ display:flex; align-items:center; gap:.75rem; }
.switch-toggle{ --h:28px; position:relative; width:56px; height:var(--h); background:#efe7ff; border:1px solid var(--accent); border-radius:var(--h); cursor:pointer; transition:all .18s ease; }
.switch-toggle .knob{ position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.08); transition:left .18s ease; }
.switch-toggle.on{ background:#e7fff1; border-color:#c7f2d8; }
.switch-toggle.on .knob{ left: calc(100% - 26px); }
.coupon-panel{ border:1px solid var(--border); background:#fff7fb; border-radius:12px; padding:.85rem; }
.actions-spaced{ margin-top:1.75rem; }

.range-panel{ border:1px solid var(--border, #eadff5); background:#fff7fb; padding:.5rem .7rem; border-radius:12px; display:flex; gap:16px; align-items:center; flex-wrap:nowrap; color: #555555 !important; }

.range-info{ margin-top:0.6rem !important; }

.level.actions-spaced{
  display: block !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  height: 60px;
}
.level.actions-spaced .level-left,
.level.actions-spaced .level-right{
  flex: 1 1 0 !important;
  display: flex !important;
}
/* Força alinhamentos nas pontas */
.level.actions-spaced .level-left{ justify-content: flex-start !important; float: left !important; }
.level.actions-spaced .level-right{ justify-content: flex-end !important; float: right !important; }

/* Evita que os botões se estiquem ou quebrem linha */
.level.actions-spaced .button{
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
input::placeholder {
  color: gray !important;
  opacity: 1; /* For consistent appearance in Firefox */
}

.link-with-paste {
  position: relative;
}

/* Botão flutuante dentro do input */
.paste-button {
  position: absolute;
  top: 50%;
  right: 0.30rem;
  transform: translateY(-50%);
  padding-inline: 0.6rem;
  height: 1.9rem;
  font-size: 1rem;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;

  /* Integra com seu visual "glass" */
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, #f3f3f3, #e1e1e1);
  border: 1px solid #d8d8d8;
  color: #4f4f4f;
}

/* Evitar que o texto do input fique escondido atrás do botão */
.link-with-paste .input {
  padding-right: 3rem; /* espaço pro botão 📋 */
}

@media (max-width: 768px) {
  .column {
    margin-top: -10px !important;
  }
  /* --- CORREÇÃO DE ESPAÇAMENTO MOBILE --- */
  /* Remove a margem negativa das colunas internas (inputs divididos) para não colarem no label */
  .field .columns .column {
    margin-top: 0 !important;
  }

  .variation-panel {
	margin-top: -35px !important;
  }
  .level.actions-spaced{
	  display: block !important;
	  justify-content: space-between !important;
	  align-items: center !important;
	  flex-wrap: nowrap !important;
	  width: 100% !important;
	}
	.level.actions-spaced .level-left,
	.level.actions-spaced .level-right{
	  flex: 1 1 0 !important;
	  display: flex !important;
	}
	/* Força alinhamentos nas pontas */
	.level.actions-spaced .level-left{ justify-content: flex-start !important; float: left !important; }
	.level.actions-spaced .level-right{ justify-content: flex-end !important; float: right !important; }

	/* Evita que os botões se estiquem ou quebrem linha */
	.level.actions-spaced .button{
	  white-space: nowrap !important;
	  flex: 0 0 auto !important;
	}
}
/* Barra fixa na base do viewport, mas parando antes do footer */
#buttons-bar{
  position: sticky;
  bottom: 0;
  background: #fff;                 /* não deixar o conteúdo "vazar" por baixo */
  border-top: 1px solid var(--border, #eadff5);
  box-shadow: 0 -6px 18px rgba(0,0,0,.06);
  z-index: 40;                      /* abaixo de toasts (60) e overlay (50) */
  padding: .5rem .75rem;            /* conforto de clique */
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Garante largura total quando estiver "colado" */
#buttons-bar .level-left,
#buttons-bar .level-right{
  align-items: center;
}

/* Opcional: no mobile dá um respiro extra para não parecer "apertado" */
@media (max-width: 1408px){
  #buttons-bar{ padding: .65rem .75rem; bottom: 20px !important; }
}

/* --- CLASSES PARA PREVIEW DE PARCELA --- */
.coupon-preview-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%; 
  min-height: 40px; 
  background: #fdfbff;
  border: 1px dashed var(--accent);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.1;
  padding: 0 4px;
  transition: all 0.2s ease;
}

/* Quando estiver desabilitado (pai disabled-area) */
.disabled-area .coupon-preview-box {
  background: #f2f2f2;
  border-color: #ddd;
  opacity: 0.6;
}

.preview-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #888;
}

.preview-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary);
}

.disabled-area .preview-value {
  color: #888;
}

/* --- ESTILOS PARA ÁREA DE CUPONS COM PANEL --- */
.coupon-radio-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  transition: background 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
}

.coupon-radio-item.no-coupon-option {
  background: #f9f9f9;
  border-bottom: 2px solid #e0e0e0;
  font-weight: 600;
}

.coupon-radio-item:last-of-type {
  border-bottom: none;
}

.coupon-radio-item:hover:not(.disabled) {
  background: #faf8ff;
}

.coupon-radio-item.no-coupon-option:hover {
  background: #f5f5f5;
}

.coupon-radio-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.coupon-radio-item.disabled:hover {
  background: #f5f5f5;
}

.coupon-radio-item input[type="radio"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.coupon-radio-item.disabled input[type="radio"] {
  cursor: not-allowed;
}

.coupon-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  flex-wrap: wrap;
  row-gap: 0.15rem;
}

.coupon-content > .coupon-limit {
  flex-basis: 100%;
}

.tag.is-currency {
  background: #b07cff;
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.tag.is-percentage {
  background: #ff6b9d;
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.coupon-discount {
  font-size: 1.1rem;
  font-weight: 800;
  color: #3a2f4f;
}

.coupon-description {
  font-weight: 600;
  color: #5a4d6f;
  font-size: 0.9rem;
}

.coupon-limit {
  font-size: 0.8rem;
  color: #888;
  margin-left: auto;
  white-space: nowrap;
  margin-top: -5px;
}

.panel-block.is-preview {
  background: linear-gradient(180deg, #fdfbff, #f9f5ff);
  border-top: 2px solid var(--border);
  font-weight: 700;
  padding: 1rem 1.25rem;
  position: sticky;
  bottom: 0;
  display: block;
}

.preview-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-end;
}

.preview-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.preview-final-label {
  color: #5a4d6f;
  font-size: 0.95rem;
  font-weight: 600;
}

.preview-final-value {
  font-size: 1.3rem;
  color: #b07cff;
  font-weight: 800;
}

.preview-installment-row {
  display: flex;
  justify-content: flex-end;
  font-size: 0.8rem;
  color: #888;
  font-weight: 500;
  font-style: italic;
}

.preview-installment-row strong {
  color: #5a4d6f;
  font-weight: 700;
}

.panel-block.is-empty {
  justify-content: center;
  color: #888;
  font-style: italic;
  padding: 2rem 1rem;
  text-align: center;
}

/* Estilo do panel do Bulma customizado */
#couponPanel {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background: white;
}

#couponPanel .panel-block {
  border: none;
}

/* Mobile adjustments para cupons */
@media (max-width: 768px) {
  .coupon-content {
    flex-wrap: wrap;
  }
  
  .coupon-content > *:not(.coupon-limit) {
    flex-shrink: 0;
  }
  
  .coupon-limit {
    flex-basis: 100%;
    margin-left: 0;
    font-size: 0.75rem;
    margin-top: -5px;
  }
  
  .coupon-discount {
    font-size: 1rem;
  }
  
  .preview-final-value {
    font-size: 1.1rem;
  }
  
  .preview-installment-row {
    font-size: 0.75rem;
  }
}

#linkInput{
  transition: background-color 1s ease;
}
#linkInput.link-marketplace-shopee{
  background-color: #ffe2cf;
}
#linkInput.link-marketplace-ml{
  background-color: #fff2b8;
}