/* DiceHeart Loyalty: the /card/ page ([dh_loyalty_card]).
   Phone first, dark tavern look. Every rule is scoped to .dhl-card-app. The page colours come
   from the child theme's custom properties, with the site's palette as fallback (so the page also
   works without the theme). The card itself is painted with the colours from the plugin settings:
   card.js sets --dhl-bg, --dhl-fg and --dhl-label (plus -rgb versions) on the .dhl-card element. */

.dhl-card-app {
  /* page */
  --dhl-gold: var(--gold, #c9913a);
  --dhl-gold-lt: var(--gold-lt, #e8b96a);
  --dhl-parchment: var(--parchment, #f2e8d5);
  --dhl-page: var(--bg, #0e0b06);
  --dhl-panel: var(--bg-card, #1f1609);
  --dhl-text: var(--text, #f0e8d8);
  --dhl-muted: var(--text-muted, #a89070);
  --dhl-border: var(--border, rgba(201, 145, 58, .25));
  --dhl-head: 'Cinzel Decorative', 'Cinzel', 'Caudex', Georgia, serif;
  --dhl-sub: 'Cinzel', 'Caudex', Georgia, serif;
  --dhl-body: 'IM Fell English', 'Caudex', Georgia, serif;
  /* card defaults (the plugin's default colours); overridden inline on .dhl-card */
  --dhl-bg: #1f1609;
  --dhl-fg: #f2e8d5;
  --dhl-label: #c9913a;
  --dhl-fg-rgb: 242, 232, 213;
  --dhl-label-rgb: 201, 145, 58;

  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  color: var(--dhl-parchment);
  font-family: var(--dhl-body);
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

.dhl-card-app *,
.dhl-card-app *::before,
.dhl-card-app *::after {
  box-sizing: border-box;
}

.dhl-card-app [hidden] {
  display: none !important;
}

.dhl-card-app :focus-visible {
  outline: 2px solid var(--dhl-gold-lt);
  outline-offset: 2px;
}

.dhl-card-app [tabindex="-1"]:focus {
  outline: none;
}

.dhl-card-app a {
  color: var(--dhl-gold-lt);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dhl-card-app p,
.dhl-card-app h2,
.dhl-card-app ul,
.dhl-card-app li {
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------- screens */

.dhl-card-app .dhl-screen {
  scroll-margin-top: 5rem;
  animation: dhl-rise .45s ease both;
}

.dhl-card-app .dhl-skeleton {
  height: 440px;
  border: 1px solid var(--dhl-border);
  border-radius: 18px;
  background: linear-gradient(100deg, rgba(201, 145, 58, .05) 30%, rgba(201, 145, 58, .14) 50%, rgba(201, 145, 58, .05) 70%) var(--dhl-panel);
  background-size: 220% 100%;
  animation: dhl-shimmer 1.5s linear infinite;
}

.dhl-card-app .dhl-panel {
  position: relative;
  padding: 1.6rem 1.25rem 1.35rem;
  border: 1px solid var(--dhl-border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(201, 145, 58, .08), transparent 40%) var(--dhl-panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

.dhl-card-app .dhl-panel--centered {
  text-align: center;
}

.dhl-card-app .dhl-title {
  margin: 0 0 .6rem;
  font: 700 1.4rem/1.2 var(--dhl-head);
  letter-spacing: .02em;
  text-align: center;
  text-wrap: balance;
  color: var(--dhl-gold-lt) !important; /* the theme sets heading colours with !important */
}

.dhl-card-app .dhl-lead {
  margin: 0 0 1.3rem;
  text-align: center;
  text-wrap: balance;
  color: var(--dhl-parchment);
}

.dhl-card-app .dhl-envelope {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto .9rem;
  fill: none;
  stroke: var(--dhl-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dhl-card-app .dhl-notice {
  margin: 0 0 1.2rem;
  padding: .75rem .9rem;
  border: 1px solid var(--dhl-gold);
  border-radius: 10px;
  background: rgba(201, 145, 58, .1);
  color: var(--dhl-parchment);
  font-size: .98rem;
}

/* the small teaser above the form: the card with the welcome stamps already on it */
.dhl-card-app .dhl-preview {
  margin: 0 0 1.15rem;
  padding: .65rem .6rem;
  border: 1px dashed rgba(201, 145, 58, .4);
  border-radius: 12px;
  background: var(--dhl-page);
}

/* ---------------------------------------------------------------- form */

.dhl-card-app .dhl-form {
  margin: 0;
}

.dhl-card-app .dhl-field {
  min-width: 0;
  margin: 0 0 1rem;
}

.dhl-card-app .dhl-field > label,
.dhl-card-app .dhl-label {
  display: block;
  margin: 0 0 .35rem;
  color: var(--dhl-parchment);
  font-size: 1rem;
  line-height: 1.3;
}

.dhl-card-app .dhl-field input:not([type="checkbox"]),
.dhl-card-app .dhl-field select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: .6rem .85rem;
  border: 1px solid var(--dhl-border);
  border-radius: 10px;
  background-color: var(--dhl-page);
  color: var(--dhl-text);
  font: inherit;
  font-size: 16px; /* no zoom on iOS */
  line-height: 1.3;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.dhl-card-app .dhl-field select {
  padding-right: 2.2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--dhl-gold) 50%),
    linear-gradient(135deg, var(--dhl-gold) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}

.dhl-card-app .dhl-field select option {
  background: var(--dhl-panel);
  color: var(--dhl-text);
}

.dhl-card-app .dhl-field input:not([type="checkbox"]):focus,
.dhl-card-app .dhl-field select:focus {
  border-color: var(--dhl-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 145, 58, .35);
}

.dhl-card-app .dhl-field.has-error input:not([type="checkbox"]),
.dhl-card-app .dhl-field.has-error select {
  border-color: #d04a4a;
}

.dhl-card-app .dhl-row {
  display: flex;
  gap: .5rem;
}

.dhl-card-app .dhl-row--phone .dhl-cc {
  flex: 0 0 6.1rem;
  width: 6.1rem;
}

.dhl-card-app .dhl-row--phone input {
  flex: 1 1 0;
  width: auto;
}

.dhl-card-app .dhl-row--birthday select {
  flex: 1 1 0;
  width: auto;
}

.dhl-card-app .dhl-row--birthday .dhl-day {
  flex-grow: .7;
}

.dhl-card-app .dhl-error {
  margin: .4rem 0 0;
  color: #f08a8a;
  font-size: .95rem;
  line-height: 1.35;
}

.dhl-card-app .dhl-error:empty {
  display: none;
}

.dhl-card-app .dhl-form-error {
  margin: 0 0 .9rem;
  text-align: center;
}

.dhl-card-app .dhl-field--check {
  margin-bottom: .4rem;
}

.dhl-card-app .dhl-field > label.dhl-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 44px;
  padding: .3rem 0;
  color: var(--dhl-text);
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
}

.dhl-card-app .dhl-check input {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin: .05rem 0 0;
  border: 1.5px solid var(--dhl-gold);
  border-radius: 6px;
  background: var(--dhl-page);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.dhl-card-app .dhl-check input::after {
  content: '';
  width: .38rem;
  height: .72rem;
  margin-top: -2px;
  border: solid var(--dhl-page);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  opacity: 0;
}

.dhl-card-app .dhl-check input:checked {
  background: var(--dhl-gold);
}

.dhl-card-app .dhl-check input:checked::after {
  opacity: 1;
}

.dhl-card-app .dhl-privacy {
  margin: .3rem 0 1.3rem;
  color: var(--dhl-muted);
  font-size: .92rem;
  line-height: 1.45;
}

.dhl-card-app .dhl-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- buttons */

.dhl-card-app .dhl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: .65rem 1.4rem;
  border: 1px solid var(--dhl-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--dhl-gold-lt);
  font: 700 1rem/1.2 var(--dhl-sub);
  letter-spacing: .03em;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}

.dhl-card-app .dhl-btn:hover:not(:disabled) {
  background: rgba(201, 145, 58, .16);
}

.dhl-card-app .dhl-btn--primary {
  background: var(--dhl-gold);
  color: var(--dhl-page);
}

.dhl-card-app .dhl-btn--primary:hover:not(:disabled) {
  background: var(--dhl-gold-lt);
}

.dhl-card-app .dhl-btn--danger {
  border-color: rgba(208, 74, 74, .5);
  color: #f0a0a0;
  font-weight: 600;
}

.dhl-card-app .dhl-btn--danger:hover:not(:disabled) {
  background: rgba(208, 74, 74, .14);
}

.dhl-card-app .dhl-btn:disabled {
  opacity: .6;
  cursor: progress;
}

.dhl-card-app .dhl-btn.is-busy::after {
  content: '';
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dhl-spin .8s linear infinite;
}

.dhl-card-app .dhl-linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: .4rem 1rem;
  border: 0;
  background: transparent;
  color: var(--dhl-gold-lt);
  font: inherit;
  font-size: 1.05rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(232, 185, 106, .5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dhl-card-app .dhl-linkbtn:hover {
  background: transparent;
  text-decoration-color: var(--dhl-gold-lt);
}

/* ---------------------------------------------------------------- "already have a card?" */

.dhl-card-app .dhl-recover {
  margin-top: 1rem;
  text-align: center;
}

.dhl-card-app .dhl-recover-box {
  margin-top: .4rem;
  padding: 1.15rem 1.25rem .35rem;
  border: 1px dashed var(--dhl-border);
  border-radius: 14px;
  text-align: left;
}

.dhl-card-app .dhl-recover-box .dhl-btn {
  margin-bottom: .9rem;
}

.dhl-card-app .dhl-done {
  margin: 0 0 .9rem;
  color: var(--dhl-parchment);
  text-align: center;
}

/* ---------------------------------------------------------------- the card */

.dhl-card-app .dhl-card {
  position: relative;
  padding: 1.7rem 1.25rem 1.45rem;
  border: 1px solid rgba(var(--dhl-label-rgb), .6);
  border-radius: 20px;
  background:
    radial-gradient(130% 75% at 50% 0%, rgba(var(--dhl-label-rgb), .18), transparent 62%),
    var(--dhl-bg);
  color: var(--dhl-fg);
  text-align: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}

/* the inner hairline border */
.dhl-card-app .dhl-card::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  left: 6px;
  border: 1px solid rgba(var(--dhl-label-rgb), .28);
  border-radius: 15px;
  pointer-events: none;
}

/* a free drink is ready: the card glows */
.dhl-card-app .dhl-card.is-ready {
  border-color: var(--dhl-label);
}

.dhl-card-app .dhl-card.is-ready::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  box-shadow: 0 0 30px 3px rgba(var(--dhl-label-rgb), .42);
  opacity: .55;
  pointer-events: none;
  animation: dhl-pulse 3s ease-in-out infinite;
}

.dhl-card-app .dhl-card-name {
  margin: 0;
  font: 700 1.5rem/1.2 var(--dhl-head);
  letter-spacing: .03em;
  color: var(--dhl-label) !important;
}

.dhl-card-app .dhl-card-member {
  margin: .4rem 0 0;
  color: rgba(var(--dhl-fg-rgb), .88);
  font-size: 1.2rem;
  font-style: italic;
  overflow-wrap: anywhere;
}

.dhl-card-app .dhl-rule {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 230px;
  margin: 1rem auto 1.15rem;
}

.dhl-card-app .dhl-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--dhl-label-rgb), .7));
}

.dhl-card-app .dhl-rule span:last-child {
  transform: scaleX(-1);
}

.dhl-card-app .dhl-rule i {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--dhl-label);
  transform: rotate(45deg);
}

.dhl-card-app .dhl-stamps-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 .2rem .7rem;
  color: var(--dhl-label);
  font-family: var(--dhl-sub);
  font-size: .9rem;
  letter-spacing: .08em;
}

.dhl-card-app .dhl-stamps-count {
  color: rgba(var(--dhl-fg-rgb), .85);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.dhl-card-app .dhl-line {
  margin: 1.2rem 0 0;
  color: var(--dhl-fg);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.35;
  text-wrap: balance; /* no lone cup emoji on the second line */
}

.dhl-card-app .dhl-card.is-ready .dhl-line {
  color: var(--dhl-label);
  font: 700 1.2rem/1.4 var(--dhl-sub);
  font-style: normal;
}

/* a banner of the card view (the birthday line): under the cups, above the line */
.dhl-card-app .dhl-banner {
  margin: 1.2rem 0 .8rem;
  padding: 12px;
  border: 1px solid var(--dhl-label);
  border-radius: 12px;
  background: rgba(var(--dhl-label-rgb), .1);
  color: var(--dhl-fg);
  font-size: 1.05rem;
  line-height: 1.4;
  text-wrap: balance;
}

.dhl-card-app .dhl-banner + .dhl-banner {
  margin-top: 0;
}

.dhl-card-app .dhl-qr {
  width: min(100%, 260px);
  min-width: 220px;
  margin: 1.45rem auto .85rem;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--dhl-label-rgb), .55), 0 10px 28px rgba(0, 0, 0, .45);
}

.dhl-card-app .dhl-qr-svg {
  display: block;
  width: 100%;
  height: auto;
}

.dhl-card-app .dhl-hint {
  max-width: 300px;
  margin: 0 auto;
  text-wrap: balance;
  color: rgba(var(--dhl-fg-rgb), .75);
  font-size: .98rem;
  line-height: 1.4;
}

.dhl-card-app .dhl-save {
  margin: 1.3rem .5rem 1rem;
  color: var(--dhl-muted);
  font-size: .98rem;
  line-height: 1.45;
  text-align: center;
}

/* The news button under the save hint (a .dhl-btn, like "Delete my card" without the red), with what just changed,
   or that it failed, in muted text above it. */
.dhl-card-app .dhl-consent {
  margin: 0 0 1rem;
  color: var(--dhl-muted);
  font-size: .98rem;
  line-height: 1.45;
  text-align: center;
}

.dhl-card-app .dhl-consent-text {
  display: block;
  margin: 0 .5rem .6rem;
}

.dhl-card-app .dhl-consent-text:empty {
  display: none;
}

/* ---------------------------------------------------------------- add to wallet */

/* The hint and the Apple / Google buttons under the card. The badges are the brands' own artwork, used unmodified,
   48px tall with 8px of clear space around them (the link's padding), as both guidelines ask; side by side when
   they fit, stacked when they do not. On a screen narrower than a badge it is scaled down whole, never cropped. */
.dhl-card-app .dhl-wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 1.3rem 0 0;
  text-align: center;
}

.dhl-card-app .dhl-wallet-hint {
  max-width: 320px;
  color: var(--dhl-text);
  font-size: .98rem;
  line-height: 1.45;
  text-wrap: balance;
}

.dhl-card-app .dhl-wallet-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
}

.dhl-card-app .dhl-wallet a {
  display: block;
  max-width: 100%;
  padding: 8px;
  text-decoration: none;
}

.dhl-card-app .dhl-wallet a img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 48px;
  object-fit: contain;
}

/* ---------------------------------------------------------------- stamp slots (cups) */

.dhl-card-app .dhl-cups {
  display: grid;
  grid-template-columns: repeat(var(--dhl-cols, 4), minmax(0, 1fr));
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dhl-card-app .dhl-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1.5px dashed rgba(var(--dhl-label-rgb), .45);
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
}

.dhl-card-app .dhl-slot.is-filled {
  border-style: solid;
  border-color: var(--dhl-label);
  background: rgba(var(--dhl-label-rgb), .15);
  box-shadow: 0 0 14px rgba(var(--dhl-label-rgb), .24);
  animation: dhl-pop .5s cubic-bezier(.2, .9, .3, 1.25) both;
  animation-delay: calc(var(--i, 0) * 80ms + 150ms);
}

.dhl-card-app .dhl-cup {
  display: block;
  width: 64%;
  height: 64%;
  overflow: visible;
  fill: none;
  stroke: rgba(var(--dhl-label-rgb), .55);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dhl-card-app .is-filled .dhl-cup {
  stroke: var(--dhl-label);
}

.dhl-card-app .is-filled .dhl-cup-body {
  fill: var(--dhl-label);
}

/* the small row of cups above the join form */
.dhl-card-app .dhl-cups--mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.dhl-card-app .dhl-cups--mini .dhl-slot {
  flex: none;
  width: 28px;
  height: 28px;
  border-width: 1px;
}

.dhl-card-app .dhl-cups--mini .dhl-slot.is-filled {
  box-shadow: 0 0 8px rgba(var(--dhl-label-rgb), .3);
}

/* ---------------------------------------------------------------- motion */

@keyframes dhl-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes dhl-pop {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: none; }
}

@keyframes dhl-pulse {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

@keyframes dhl-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@keyframes dhl-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dhl-card-app *,
  .dhl-card-app *::before,
  .dhl-card-app *::after {
    animation: none !important;
    transition: none !important;
  }
}