/* Front styles: buttons + cards; multiple shortcodes align as inline "menu" on desktop */
.pdr3d-btn-wrap,
.pdr3d-card-wrap{
  display: inline-block;
  vertical-align: top;
  margin: 8px 10px 8px 0;
  max-width: 100%;
}

/* Button */
.pdr3d-btn{
  --pdr-bg1:#ff2d2d;
  --pdr-bg2:#ff8a00;
  --pdr-text:#fff;
  --pdr-border:rgba(255,255,255,.18);
  --pdr-w:220px;
  --pdr-h:54px;
  --pdr-radius:16px;
  --pdr-fs:16px;
  --pdr-depth:10px;
  --pdr-lift:3px;
  --pdr-glow:18px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: var(--pdr-w) !important;
  width: max-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  height: var(--pdr-h);

  padding: 0 18px;
  border-radius: var(--pdr-radius);
  color: var(--pdr-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--pdr-fs);
  letter-spacing: .2px;

  border: 1px solid var(--pdr-border);
  background: linear-gradient(135deg, var(--pdr-bg1), var(--pdr-bg2));
  box-shadow:
    0 calc(var(--pdr-depth) + 10px) calc(var(--pdr-depth) * 2 + 18px) rgba(0,0,0,.35),
    0 0 var(--pdr-glow) rgba(255, 255, 255, .12) inset;

  transform: translateY(calc(var(--pdr-depth) * -1));
  transition: transform .15s ease, filter .15s ease;
  user-select: none;
  min-width: 0;
}

.pdr3d-btn-label{
  display: inline-block;
  white-space: nowrap;
  line-height: 1.1;
  text-align: center;
}


.pdr3d-btn::after{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: calc(var(--pdr-depth) * -1);
  height: var(--pdr-depth);
  border-radius: calc(var(--pdr-radius) - 6px);
  background: linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  filter: blur(.1px);
  transform: skewX(-14deg);
  opacity: .9;
  pointer-events: none;
}

.pdr3d-btn::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: calc(var(--pdr-radius) - 2px);
  background: radial-gradient(70% 120% at 20% 10%, rgba(255,255,255,.34), rgba(255,255,255,0) 55%);
  opacity: .45;
  pointer-events:none;
}


.pdr3d-btn,
.pdr3d-btn:visited{
  color: var(--pdr-text) !important;
}

.pdr3d-btn:hover,
.pdr3d-btn:focus{
  color: var(--pdr-text-hover, var(--pdr-text)) !important;
}

.pdr3d-btn:hover{
  transform: translateY(calc((var(--pdr-depth) * -1) - var(--pdr-lift)));
  filter: saturate(1.08);
}
.pdr3d-btn:active{
  transform: translateY(calc((var(--pdr-depth) * -1) + 1px));
}

/* Card */
.pdr3d-card{
  --pdr-bg1:#1b1b22;
  --pdr-bg2:#2b2b35;
  --pdr-text:#fff;
  --pdr-border:rgba(255,255,255,.14);
  --pdr-w:280px;
  --pdr-h:180px;
  --pdr-radius:18px;
  --pdr-fs:16px;
  --pdr-depth:12px;
  --pdr-lift:4px;
  --pdr-glow:22px;
  --pdr-img:none;
  --pdr-fit:cover;

  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: var(--pdr-w);
  max-width: 100%;
  min-height: var(--pdr-h);

  border-radius: var(--pdr-radius);
  border: 1px solid var(--pdr-border);
  background: linear-gradient(180deg, var(--pdr-bg1), var(--pdr-bg2));
  text-decoration: none;
  overflow: hidden;

  box-shadow:
    0 calc(var(--pdr-depth) + 12px) calc(var(--pdr-depth) * 2 + 22px) rgba(0,0,0,.40),
    0 0 var(--pdr-glow) rgba(255,255,255,.10) inset;

  transform: translateY(calc(var(--pdr-depth) * -1));
  transition: transform .18s ease, filter .18s ease;
}

.pdr3d-card::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: calc(var(--pdr-depth) * -1);
  height: var(--pdr-depth);
  border-radius: calc(var(--pdr-radius) - 8px);
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
  transform: skewX(-12deg);
  opacity: .95;
  pointer-events:none;
}


.pdr3d-card,
.pdr3d-card:visited{
  color: var(--pdr-text) !important;
}

.pdr3d-card:hover,
.pdr3d-card:focus{
  color: var(--pdr-text-hover, var(--pdr-text)) !important;
}

.pdr3d-card:hover .pdr3d-card-title,
.pdr3d-card:focus .pdr3d-card-title{
  color: var(--pdr-text-hover, var(--pdr-text)) !important;
}

.pdr3d-card:hover{
  transform: translateY(calc((var(--pdr-depth) * -1) - var(--pdr-lift)));
  filter: saturate(1.06);
}

.pdr3d-card-media{
  display:block;
  width: 100%;
  height: calc(var(--pdr-h) - 44px);
  min-height: 120px;
  background-image: var(--pdr-img);
  background-size: var(--pdr-fit);
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.pdr3d-card-media::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(80% 120% at 20% 10%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
              linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25));
  pointer-events:none;
}

.pdr3d-card-title{
  display:block;
  padding: 12px 14px 14px;
  color: var(--pdr-text) !important;
  font-weight: 800;
  font-size: var(--pdr-fs);
  letter-spacing: .2px;
  text-align: center;

  /* "3D text" effect */
  text-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 2px 0 rgba(0,0,0,.35),
    0 10px 18px rgba(0,0,0,.35);
}

/* Responsive: on mobile stack and stretch */
@media (max-width: 640px){
  .pdr3d-btn-wrap,
  .pdr3d-card-wrap{
    display:block;
    width: 100%;
    margin: 10px 0;
  }
  .pdr3d-btn{
    width: 100% !important;
  }
  .pdr3d-card{
    width: 100% !important;
  }
}