/* ── Commission Product shared styles ─────────────────────── */
.custom-form{background:var(--gray-100);border-radius:var(--radius-lg);padding:32px;margin-bottom:20px}
.form-field{margin-bottom:20px}
.form-label{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#595959;display:block;margin-bottom:8px}
.form-input,.form-textarea{width:100%;padding:12px 16px;border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;background:#fff;outline:none;transition:border-color .15s;color:#111}
.form-input:focus,.form-textarea:focus{border-color:var(--black)}
.form-textarea{height:100px;resize:vertical}
.upload-area{border:2px dashed var(--gray-200);border-radius:var(--radius-sm);padding:32px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:#fff}
.upload-area:hover,.upload-area.drag{border-color:var(--black);background:var(--gray-100)}
.upload-preview{max-width:160px;max-height:160px;border-radius:10px;margin:12px auto 0;display:none}
.mode-toggle{display:flex;gap:0;border:2px solid var(--black);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:20px}
.mode-btn{flex:1;padding:12px 16px;border:none;background:none;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;color:#595959}
.mode-btn.active{background:var(--black);color:#fff}
.mode-toggle{overflow:visible!important}
.try-me-badge{
  display:inline-block;
  margin-left:8px;
  font-size:10px;font-weight:900;letter-spacing:.4px;
  padding:2px 7px;border-radius:20px;
  vertical-align:middle;
  animation:tryMeAnim 3s ease-in-out infinite;
}
#btn-custom.active .try-me-badge{display:none}
@keyframes tryMeAnim{
  0%,100%{background:#f5c842;color:#111}   /* yellow — 11:1 on yellow ✓ */
  40%    {background:#c0392b;color:#fff}   /* red    — 5.1:1 ✓ */
  70%    {background:#1a6b1a;color:#fff}   /* green  — 5.1:1 ✓ */
}
.format-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.format-opt{border:2px solid var(--gray-200);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,transform .15s;text-align:center;padding:16px 8px}
.format-opt:hover{border-color:var(--black);transform:translateY(-2px)}
.format-opt.selected{border-color:var(--black);outline:3px solid var(--black);outline-offset:1px}
.format-opt input{display:none}
.format-opt-name{font-family:'Bebas Neue',sans-serif;font-size:20px;display:block;margin-bottom:4px;color:#111}
.format-opt-price{font-size:12px;font-weight:700;color:#595959;display:block}
.price-display{font-size:28px;font-weight:800;margin:4px 0 16px;display:block;color:#111}

/* ── Mobile responsive ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Format cards: horizontal scroll on narrow screens */
  .format-row {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    margin: 0 -4px;
    padding: 0 4px 4px;
  }
  .format-row::-webkit-scrollbar { display: none; }
  .format-opt {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 12px 8px;
  }
  .format-opt-name { font-size: 18px; }

  /* Mode toggle: smaller text on very narrow screens */
  .mode-btn { font-size: 13px; padding: 11px 10px; }

  /* Commission form: tighter padding */
  .custom-form { padding: 20px 16px; }

  /* Product actions: stack if needed */
  .product-actions {
    flex-wrap: wrap;
    gap: 10px;
  }
  .product-actions .btn-add-cart,
  .product-actions .btn-buy-now {
    flex: 1;
    min-width: 140px;
    justify-content: center;
  }

  /* Price display: slightly smaller */
  .price-display { font-size: 24px; }
}