/* ==========================================================
   Venue Dekho — brand tokens
   Primary #E82F5D sampled from the official logo.
   Loaded by both the admin panel and the public site.
   ========================================================== */

:root {
  /* Typography — high-contrast serif display over a geometric sans body.
     The pairing is what carries the "luxury wedding" feel. */
  --vd-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --vd-font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Page gutter — the site runs full-bleed with this inset either side. */
  --vd-gutter: 7%;

  /* Brand */
  --vd-brand:        #e82f5d;
  --vd-brand-dark:   #c81f49;
  --vd-brand-darker: #a81639;
  --vd-brand-soft:   #fce9ef;
  --vd-brand-tint:   #fdf4f7;

  /* Neutrals */
  --vd-ink:      #241a1e;
  --vd-body:     #4a4147;
  --vd-muted:    #8b8289;
  --vd-line:     #e9e2e5;
  --vd-surface:  #ffffff;
  --vd-bg:       #faf7f8;

  /* Accents */
  --vd-gold:      #c9a227;
  --vd-gold-soft: #f3e7c8;
  --vd-champagne: #f7f1e8;
  --vd-success:   #1f9d6b;

  --vd-radius:    14px;
  --vd-shadow:    0 2px 14px rgba(36, 26, 30, .07);
  --vd-shadow-lg: 0 14px 44px rgba(36, 26, 30, .14);
  --vd-shadow-xl: 0 26px 70px rgba(36, 26, 30, .18);
}

/* Full-bleed page container with a symmetric gutter.
   Public pages only — the admin panel uses .container-fluid. */
.vd-shell {
  width: 100%;
  max-width: 100%;
  padding-inline: max(1.15rem, var(--vd-gutter));
  margin-inline: auto;
}

/* Bootstrap primary override */
.btn-vd,
.btn-primary {
  background-color: var(--vd-brand);
  border-color: var(--vd-brand);
  color: #fff;
}
.btn-vd:hover, .btn-vd:focus, .btn-vd:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--vd-brand-dark) !important;
  border-color: var(--vd-brand-dark) !important;
  color: #fff !important;
}
.btn-outline-vd {
  color: var(--vd-brand);
  border-color: var(--vd-brand);
}
.btn-outline-vd:hover {
  background-color: var(--vd-brand);
  color: #fff;
}
.text-vd      { color: var(--vd-brand) !important; }
.bg-vd        { background-color: var(--vd-brand) !important; }
.bg-vd-soft   { background-color: var(--vd-brand-soft) !important; }
.border-vd    { border-color: var(--vd-brand) !important; }

.form-control:focus,
.form-select:focus {
  border-color: var(--vd-brand);
  box-shadow: 0 0 0 .2rem rgba(232, 47, 93, .15);
}
.form-check-input:checked {
  background-color: var(--vd-brand);
  border-color: var(--vd-brand);
}
a { color: var(--vd-brand-dark); }
a:hover { color: var(--vd-brand); }
.page-item.active .page-link {
  background-color: var(--vd-brand);
  border-color: var(--vd-brand);
}
.page-link { color: var(--vd-brand-dark); }


/* ======================================================================
   Email verification screen — the way out when the address was mistyped.
   
   In theme.css and not site.css because the vendor pages load admin.css
   instead, and this screen serves both: a vendor registering and a couple
   registering land on the same verify-email.php. Styled in site.css, the whole
   control rendered unstyled on the vendor side — a raw <details> with a browser
   triangle, which is the side most people register from.
   ====================================================================== */
.vd-verify-change{
  border-top:1px solid #ece8ea;
  padding-top:.9rem;
}
/* It sat below another line of small grey centred text and had its disclosure
   triangle removed, so it read as a third sentence of help rather than as
   something to press. The one person on this screen who needs it is the one who
   mistyped their address, and they could not find it. */
.vd-verify-change > summary{
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.88rem;font-weight:600;
  color:var(--vd-brand,#e82f5d);
  padding:.5rem .75rem;
  border:1px solid #f0c2d1;border-radius:999px;
  background:#fffafc;
  list-style:none;
}
/* Both of these, deliberately. -webkit-details-marker only suppresses the
   triangle while the summary is display:list-item; making it a flex row brings
   the marker back in Chrome, and ::marker is what removes it then. */
.vd-verify-change > summary::-webkit-details-marker{display:none}
.vd-verify-change > summary::marker{content:''}
.vd-verify-change > summary:hover{background:var(--vd-brand-tint,#fdf2f5);border-color:var(--vd-brand,#e82f5d)}
/* Keyboard users get the same ring every other control on the site has. */
.vd-verify-change > summary:focus-visible{outline:2px solid var(--vd-brand,#e82f5d);outline-offset:2px}
/* The pointer beside the address at the top. */
.vd-verify-fix{
  font-size:.82rem;font-weight:600;white-space:nowrap;
  color:var(--vd-brand,#e82f5d);text-decoration:underline;
}
.vd-verify-change[open] > summary{
  background:var(--vd-brand-tint,#fdf2f5);
  border-color:var(--vd-brand,#e82f5d);
  margin-bottom:.5rem;
}