:root{
    --overlay: rgba(0,0,0,0.55);
    --bg: #ffffff;
    --muted: #666;
    --accent: #005fee;
    --card-radius: 12px;
    --max-width: 520px;
    --soft: #f6f6f4; /* not pure white */
  }


  /* Modal overlay */
  .sale-modal-overlay{
    position:fixed;
    inset:0;
    background:var(--overlay);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100000;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    color:#222;
  }
  .sale-modal-overlay.active{
    opacity:1;
    pointer-events:auto;
  }

  /* Card */
  .sale-modal-overlay .modal-card{
    background:var(--bg);
    width:calc(100% - 48px);
    max-width:var(--max-width);
    border-radius:var(--card-radius);
    box-shadow:0 12px 40px rgba(2,6,23,0.25);
    transform:translateY(14px) scale(.995);
    transition:transform .18s cubic-bezier(.2,.9,.25,1),opacity .18s;
    opacity:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .sale-modal-overlay.active .modal-card{
    transform:translateY(0) scale(1);
    opacity:1;
  }

 .sale-modal-overlay .modal-header{
    padding:18px 20px;
    border-bottom:1px solid #eee;
    display:flex;
    align-items:center;
    gap:12px;
    position: relative;
  }
  .sale-modal-overlay .modal-title{
    font-size:18px;
    font-weight:700;
    color:#111;
    margin:0;
  }
  .sale-modal-overlay .modal-sub{
    font-size:13px;
    color:var(--muted);
    margin:0;
  }

  .sale-modal-overlay .modal-body{
    padding:18px 20px;
    font-size:15px;
    color:#222;
    line-height:1.45;
  }

  .sale-modal-overlay .modal-actions{
    padding:16px 20px 22px;
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:flex-end;
    border-top:1px solid #f0f0f0;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:0;
    cursor:pointer;
    border-radius:10px;
    padding:10px 14px;
    font-weight:600;
    font-size:15px;
  }

  .btn-ghost{
    background:transparent;
    color:var(--muted);
    padding:10px 12px;
  }

  .btn-whatsapp{
    background: linear-gradient(90deg, #25D366 0%, #18b444 100%);
    color:white;
    box-shadow: 0 6px 18px rgba(37,211,102,0.18);
  }

  .small-note{
    font-size:12px;
    color:#666;
    margin-top:10px;
  }

  .fine-print{
    font-size:12px;
    color:#8a8a8a;
    text-align:center;
    padding:12px 18px;
  }

  .close-x{
    margin-left:auto;
    background:transparent;
    border:0;
    cursor:pointer;
    color:var(--muted);
    font-size:18px;
  }

  /* responsive */
  @media (max-width:420px){
    .modal-title{ font-size:16px; }
    .modal-body{ font-size:14px; }
    .btn{ font-size:14px; padding:10px 12px; }
  }