/* Backdrop */
  .modal-backdrop.show { opacity: .8; backdrop-filter: blur(5px); background: #0b0614; }
 
  /* Entrance animation */
  #pdModal .modal-dialog { max-width: 440px; }
  #pdModal.fade .modal-dialog { transform: scale(.85) translateY(30px); transition: transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .35s; }
  #pdModal.show .modal-dialog { transform: none; }
 
  /* Card: thin, clean border */
  #pdModal .pd-card {
    position: relative; border: 2px solid #f5b94a; border-radius: 20px;
    background: #12091f; overflow: visible;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
  }
 
  /* Image: full width, no overlay */
  #pdModal .pd-img { display: block; width: 100%; height: auto; border-radius: 18px 18px 0 0; }
 
  /* Close button – pure CSS cross, always visible */
  #pdModal .pd-close {
    position: absolute; top: -16px; right: -16px; z-index: 20;
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    background: #ffffff; border: 0; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
    transition: transform .3s ease, background .3s ease;
  }
  #pdModal .pd-close::before,
  #pdModal .pd-close::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 18px; height: 3px; border-radius: 3px; background: #d62828;
    transition: background .3s ease;
  }
  #pdModal .pd-close::before { transform: translate(-50%,-50%) rotate(45deg); }
  #pdModal .pd-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
  #pdModal .pd-close:hover { transform: rotate(90deg) scale(1.08); background: #d62828; }
  #pdModal .pd-close:hover::before,
  #pdModal .pd-close:hover::after { background: #fff; }
 
  /* Buttons area – sits BELOW the image */
  #pdModal .pd-actions { display: flex; gap: 12px; padding: 16px; }
 
  #pdModal .pd-btn {
    position: relative; overflow: hidden; flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 10px; border-radius: 14px;
    color: #fff; font-weight: 700; font-size: 1.02rem; letter-spacing: .3px;
    text-decoration: none; line-height: 1;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  #pdModal .pd-btn:hover { color: #fff; transform: translateY(-3px); }
  #pdModal .pd-btn svg { width: 22px; height: 22px; flex: none; fill: #fff; }
 
  /* Shine sweep on buttons */
  #pdModal .pd-btn::after {
    content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); animation: pdShine 3.2s ease-in-out infinite;
  }
  #pdModal .pd-call::after { animation-delay: 1.4s; }
  @keyframes pdShine { 0%,55%{left:-75%} 100%{left:130%} }
 
  #pdModal .pd-wa   { background: linear-gradient(135deg,#2ee277,#0b9a43); box-shadow: 0 8px 20px rgba(37,211,102,.35); }
  #pdModal .pd-call { background: linear-gradient(135deg,#ffa23a,#e8590c); box-shadow: 0 8px 20px rgba(255,120,0,.35); }
  #pdModal .pd-wa:hover   { box-shadow: 0 12px 26px rgba(37,211,102,.55); }
  #pdModal .pd-call:hover { box-shadow: 0 12px 26px rgba(255,120,0,.55); }
 
  /* Icon wiggle */
  #pdModal .pd-call svg { animation: pdRing 2.2s ease-in-out infinite; transform-origin: 50% 50%; }
  @keyframes pdRing { 0%,70%,100%{transform:rotate(0)} 75%{transform:rotate(-14deg)} 80%{transform:rotate(14deg)} 85%{transform:rotate(-10deg)} 90%{transform:rotate(8deg)} }
 
  @media (max-width: 480px) {
    #pdModal .modal-dialog { margin: 1.4rem; }
    #pdModal .pd-actions { gap: 10px; padding: 12px; }
    #pdModal .pd-btn { font-size: .95rem; padding: 13px 6px; }
    #pdModal .pd-close { top: -14px; right: -10px; }
  }