/* ==========================================================================
   DAVIDOFF — 100 YEARS OF EXCELLENCE
   Event Planner theme

   Derived from: 2511_Davidoff_100Yr_Toolkit-01.pdf
   (Anniversary Campaign Toolkit, November 2025)
     - Colour Palette              p.18
     - Typography                  p.19
     - Design Principles           p.17
     - Microsite Design Inspiration pp.57-60

   PALETTE (toolkit p.18)
     Burgundy  #5B2A2B   C38 M85 Y70 K50   Pantone 188C
     Cream     #D9C78B   C10 M10 Y24 K0    Pantone 9162C
     Gold 5%   #948562 -> #847355          (metallic ramp, not a flat tone)

   TYPEFACES (toolkit p.19)
     Apparel      -> Playfair Display  (self-hosted substitute, display serif)
     FF Mark Pro  -> Mont              (bundled geometric sans, near match)

   SHAPE
     Cards and buttons chamfer the top-left and bottom-right corners,
     per the pack and content cards on toolkit pp.59-60.
   ========================================================================== */


/* 1. TYPEFACES ============================================================ */

@font-face { font-family:'Mont'; src:url('Mont/mont-extralight-webfont.woff2') format('woff2'), url('Mont/mont-extralight-webfont.woff') format('woff'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Mont'; src:url('Mont/mont-book-webfont.woff2') format('woff2'), url('Mont/mont-book-webfont.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Mont'; src:url('Mont/mont-regular-webfont.woff2') format('woff2'), url('Mont/mont-regular-webfont.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Mont'; src:url('Mont/mont-bold-webfont.woff2') format('woff2'), url('Mont/mont-bold-webfont.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Mont'; src:url('Mont/mont-heavy-webfont.woff2') format('woff2'), url('Mont/mont-heavy-webfont.woff') format('woff'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Mont'; src:url('Mont/mont-black-webfont.woff2') format('woff2'), url('Mont/mont-black-webfont.woff') format('woff'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Mont'; src:url('Mont/mont-lightitalic-webfont.woff2') format('woff2'), url('Mont/mont-lightitalic-webfont.woff') format('woff'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Mont'; src:url('Mont/mont-semibolditalic-webfont.woff2') format('woff2'), url('Mont/mont-semibolditalic-webfont.woff') format('woff'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Mont'; src:url('Mont/mont-bolditalic-webfont.woff2') format('woff2'), url('Mont/mont-bolditalic-webfont.woff') format('woff'); font-weight:700; font-style:italic; font-display:swap; }

@font-face { font-family:'Playfair Display'; src:url('PlayfairDisplay-webfont/PlayfairDisplay-Roman-var.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('PlayfairDisplay-webfont/PlayfairDisplay-Italic-var.woff2') format('woff2'); font-weight:400 700; font-style:italic; font-display:swap; }


/* 2. TOKENS =============================================================== */

:root {
  /* Toolkit primaries */
  --dv-burgundy:      #5B2A2B;
  --dv-cream:         #D9C78B;
  --dv-gold:          #948562;
  --dv-gold-lo:       #847355;
  --dv-gold-hi:       #EFE0AE;

  /* Ground range, sampled from the microsite mockups (toolkit pp.58-60) */
  --dv-deep:          #351113;
  --dv-lift:          #94353B;

  /* Working tints */
  --dv-ink:           #2B0E10;   /* text on cream surfaces            */
  --dv-cream-pale:    #F5EFE0;   /* cream surface / body text on dark */
  --dv-cream-dim:     #C9B77F;
  --dv-select:        #EDE4C8;   /* selected fill — flat, see below   */
  --dv-line:          rgba(217,199,139,.28);
  --dv-line-solid:    #C7B37A;
  --dv-danger:        #A32B1E;
  --dv-danger-hi:     #C4392A;

  --dv-chamfer:       14px;
  --dv-chamfer-sm:    8px;

  --dv-sans:  'Mont', 'Glacial Indifference', 'Segoe UI', Helvetica, Arial, sans-serif;
  --dv-serif: 'Playfair Display', 'Apparel', Georgia, 'Times New Roman', serif;

  /* FullCalendar */
  --fc-button-text-color:          #2B0E10;
  --fc-button-bg-color:            #D9C78B;
  --fc-button-border-color:        #D9C78B;
  --fc-button-hover-bg-color:      #F5EFE0;
  --fc-button-hover-border-color:  #F5EFE0;
  --fc-button-active-bg-color:     #948562;
  --fc-button-active-border-color: #948562;
  --fc-border-color:               transparent;
  --fc-page-bg-color:              transparent;
  --fc-today-bg-color:             transparent;
}


/* 3. SHAPE ================================================================ */

/* Chamfered top-left + bottom-right, per toolkit pp.59-60 pack cards. */
.dv-chamfer,
.venue-group,
.form-signin,
.admin-content .card,
#charts .card {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--dv-chamfer) 0, 100% 0,
    100% calc(100% - var(--dv-chamfer)), calc(100% - var(--dv-chamfer)) 100%,
    0 100%, 0 var(--dv-chamfer));
}
.dv-chamfer-sm,
.btn,
.fc-v-event {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--dv-chamfer-sm) 0, 100% 0,
    100% calc(100% - var(--dv-chamfer-sm)), calc(100% - var(--dv-chamfer-sm)) 100%,
    0 100%, 0 var(--dv-chamfer-sm));
}
/* Bootstrap radius utilities must not fight the chamfer. */
.rounded, .rounded-lg, .rounded-top, .rounded-sm { border-radius: 0 !important; }

/* --- Chamfer-following outline -------------------------------------------
   A real `border` on a chamfered box is sliced open at the two cut corners,
   leaving the outline hanging in mid-air. So every chamfered element that
   needs a visible edge draws it as an overlay instead: four straight edges
   that stop short of the corners, plus a diagonal for each cut.
   Each host sets --o (colour) and --ch (cut size); hosts keep a transparent
   border of the same width so box metrics are unchanged.               */

.dv-outline,
.venue-group,
.form-signin,
.btn-default,
.fc-v-event { position: relative; }

.dv-outline::after,
.venue-group::after,
.form-signin::after,
.btn-default::after,
.fc-v-event::after {
  --o: var(--dv-line);
  --ch: var(--dv-chamfer);
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(var(--o), var(--o)) var(--ch) 0 / calc(100% - var(--ch)) 1px no-repeat,
    linear-gradient(var(--o), var(--o)) 100% 0 / 1px calc(100% - var(--ch)) no-repeat,
    linear-gradient(var(--o), var(--o)) 0 100% / calc(100% - var(--ch)) 1px no-repeat,
    linear-gradient(var(--o), var(--o)) 0 var(--ch) / 1px calc(100% - var(--ch)) no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1px), var(--o) calc(50% - 1px), var(--o) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / var(--ch) var(--ch) no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1px), var(--o) calc(50% - 1px), var(--o) calc(50% + 1px), transparent calc(50% + 1px)) 100% 100% / var(--ch) var(--ch) no-repeat;
}

/* Per-host tuning. Small-chamfer hosts must match .dv-chamfer-sm. */
.form-signin::after { --o: var(--dv-line); }
.btn-default::after { --o: var(--dv-cream);            --ch: var(--dv-chamfer-sm); }
.btn-default:hover::after { --o: var(--dv-cream-pale); }
.fc-v-event::after  { --o: rgba(217,199,139,.32);      --ch: var(--dv-chamfer-sm); }
/* Controls that host or sit inside overflowing menus must not be clipped,
   and venue tiles sit inside an already-chamfered card. */
.bootstrap-select .btn,
.dropdown-toggle,
.nav-link.btn,
.venue.btn { clip-path: none; }


/* 4. BASE ================================================================= */

html, body { height: 100%; }

body {
  background-color: var(--dv-deep);
  color: var(--dv-cream-pale);
  font-family: var(--dv-sans);
  font-weight: 300;
  letter-spacing: .01em;
  position: relative;
  z-index: 0;
}

/* Burgundy ground: deep at the edges, lifting toward the upper right —
   the gradient direction used across the microsite mockups. */
body.app {
  background-color: var(--dv-deep);
  background-image:
    radial-gradient(120% 90% at 78% -10%, var(--dv-lift) 0%, rgba(148,53,59,0) 62%),
    radial-gradient(90% 70% at 8% 105%, rgba(91,42,43,.85) 0%, rgba(91,42,43,0) 60%),
    linear-gradient(160deg, #43191B 0%, var(--dv-deep) 55%, #260B0D 100%);
  background-attachment: fixed;
}

/* Ribbon + bokeh texture lifted from the Dark Markets key visual (p.13). */
body.app:before {
  content: ' ';
  display: block;
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: -5000;
  opacity: .5;
  background-image: url('../img/davidoff/texture-ribbon.jpg');
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: cover;
  mix-blend-mode: screen;
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dv-sans);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* The display serif carries the campaign voice — reserved for the
   "100 YEARS" register, not for interface chrome. */
.dv-display {
  font-family: var(--dv-serif);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.dv-display em { font-style: italic; text-transform: lowercase; font-weight: 400; }

.dv-eyebrow {
  font-family: var(--dv-sans);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dv-cream);
}

.dv-gold-text {
  background: linear-gradient(180deg, var(--dv-gold-hi) 0%, var(--dv-cream) 30%, var(--dv-gold) 58%, var(--dv-cream) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--dv-cream);
}

a { color: var(--dv-cream); }
a:hover, a:focus { color: var(--dv-cream-pale); }

::selection { background: var(--dv-cream); color: var(--dv-ink); }


/* 5. LOGIN ================================================================ */

/* The scrim rides in the same background stack as the photograph: `body` is
   a stacking context, so a ::before at z-index -1 would fall behind its own
   background and never paint. */
body.login {
  display: -ms-flexbox; display: -webkit-box; display: flex;
  flex-direction: column;
  -ms-flex-align: center; -ms-flex-pack: center;
  -webkit-box-align: center; align-items: center;
  -webkit-box-pack: center; justify-content: center;
  padding-top: 40px; padding-bottom: 40px;
  color: var(--dv-cream-pale);
  background-color: var(--dv-deep);
  background-image:
    radial-gradient(58% 62% at 50% 46%, rgba(28,7,9,.86) 0%, rgba(28,7,9,.55) 45%, rgba(28,7,9,0) 78%),
    linear-gradient(180deg, rgba(28,7,9,.62) 0%, rgba(28,7,9,.10) 32%, rgba(28,7,9,.72) 100%),
    url('../img/davidoff/hero-login.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.login .logo { display: block; margin: 0 auto 35px; }

.dv-login-lockup {
  display: block;
  width: 240px;
  max-width: 62vw;
  margin: 0 auto 10px;
}
.dv-login-tagline {
  font-family: var(--dv-serif);
  font-size: 1.02rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dv-cream);
  margin: 0 0 30px;
  text-indent: .34em;
}
.dv-login-tagline em {
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: .08em;
  opacity: .85;
}

.form-signin {
  width: 100%;
  max-width: 370px;
  padding: 34px 30px 30px;
  margin: 0 auto;
  background: rgba(53,17,19,.72);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid transparent;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.form-signin:before {
  content: '';
  display: block;
  height: 2px;
  margin: -34px -30px 26px;
  background: linear-gradient(90deg, var(--dv-gold-lo), var(--dv-cream) 45%, var(--dv-gold-hi) 60%, var(--dv-gold-lo));
}
.form-signin .checkbox { font-weight: 400; }
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 12px 14px;
  font-size: 1rem;
  background: rgba(245,239,224,.06);
  border: 1px solid var(--dv-line);
  color: var(--dv-cream-pale);
}
.form-signin .form-control::-webkit-input-placeholder { color: rgba(217,199,139,.55); }
.form-signin .form-control::placeholder { color: rgba(217,199,139,.55); }
.form-signin .form-control:focus {
  z-index: 2;
  background: rgba(245,239,224,.10);
  border-color: var(--dv-cream);
  color: #fff;
  box-shadow: 0 0 0 .18rem rgba(217,199,139,.22);
}
.form-signin input[type="text"],
.form-signin input[type="email"] { margin-bottom: 10px; }
.form-signin input[type="password"] { margin-bottom: 20px; }
.form-signin .btn { width: 100%; }


/* 6. TOP BAR ============================================================== */

.top-bar {
  position: relative;
  background: linear-gradient(180deg, rgba(43,14,16,.96), rgba(53,17,19,.92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dv-line) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.top-bar:after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dv-cream) 20%, var(--dv-gold) 50%, var(--dv-cream) 80%, transparent);
  opacity: .55;
}
.dv-brand { display: block; height: 34px; width: auto; }
.top-bar a,
.top-link {
  color: var(--dv-cream);
  margin-left: 18px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.top-bar a:hover,
.top-link:hover {
  color: var(--dv-cream-pale);
  border-bottom-color: var(--dv-cream);
  text-decoration: none;
}
.admin .top-bar { margin-bottom: 0 !important; }


/* 7. VENUE PICKER ========================================================= */

.venue-group {
  position: relative;
  background-color: rgba(78,32,34,.62) !important;
  background-image:
    linear-gradient(rgba(78,32,34,.28), rgba(50,18,20,.42)),
    url('../img/davidoff/monogram-cream.png');
  background-repeat: no-repeat;
  background-position: right 16px bottom 12px;
  background-size: auto 34px;
  border: none;
  overflow: hidden;
}

/* The outline is what holds an idle card away from the ground behind it.
   Geometry comes from the .dv-outline utility in section 3. */
.venue-group::after {
  --o: rgba(217,199,139,.5);
  opacity: .9;
  transition: opacity .2s ease;
}
.venue-group:hover::after { opacity: 1; }

.venue {
  color: rgba(245,239,224,.9) !important;
  text-transform: none;
  transition: background-color .18s ease, color .18s ease;
}
.venue h1 {
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.venue h3 {
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.venue h5 {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.venue:hover,
.venue:hover ~ .venue-sub .venue:not(.active) { background-color: rgba(217,199,139,.12) !important; }

/* Mid-gold, so the divider reads both on the dark panel and on a cream
   selected tile. A cream-tinted divider disappears once a tile is selected,
   and the tiles then blur into one mass. */
.venue-sub a {
  border-top: 1px solid rgba(148,133,98,.55);
  border-right: 1px solid rgba(148,133,98,.55);
}
.venue-sub a:last-child { border-right: none; }
.venue-sub:last-child a:first-child,
.venue-sub:last-child a:last-child { border-radius: 0; }

/* Selected takes the cream, making it the brightest thing on screen. A dark
   selected state would sit at the same value as the page ground behind it and
   read as absent rather than chosen.

   The fill is flat, not a gradient: adjacent tiles each restart their own
   ramp, so a selected row butts one tile's dark end against the next tile's
   light start and reads as patchwork. A flat value tiles a group of any
   shape. No inset ring either — the card's outline already defines the edge,
   and a rectangular ring would be cut open at the two chamfers. */
.venue.active {
  background: var(--dv-select) !important;
  color: var(--dv-ink) !important;
}
.venue.active h1,
.venue.active h3,
.venue.active h5 { color: var(--dv-ink) !important; }

.pax-notice {
  font-size: .5em;
  display: block;
  opacity: .72;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* 8. CALENDAR ============================================================= */

#calendar { color: var(--dv-cream-pale); }

.fc-toolbar-title {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--dv-cream-pale);
}
.fc-toolbar-chunk:last-child { text-align: right; }
.fc .fc-button {
  text-transform: uppercase;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  border-radius: 0;
  padding: .42rem .9rem;
}
.fc .fc-button:focus,
.fc .fc-button-primary:not(:disabled):focus { box-shadow: 0 0 0 .18rem rgba(217,199,139,.28) !important; }

.fc-scroller { overflow: hidden !important; }
.fc-day-today { background-color: transparent !important; opacity: 1 !important; }
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
  color: var(--dv-cream);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.fc-timegrid-slot-minor { border-bottom: 1px solid rgba(217,199,139,.14) !important; }
.fc .fc-timegrid-slot { border-bottom: 1px solid rgba(217,199,139,.10); }

.fc-timegrid-event-harness-inset .fc-timegrid-event { box-shadow: none; overflow: hidden; }
.fc-timegrid-event .fc-event-main { padding: 4px 10px 0; }
.fc-event-main { padding: 4px 10px; }
.fc-time-grid-event .fc-time { text-align: right; }
.fc-direction-ltr .fc-timegrid-col-events { margin: 0 2.5% 0 15px; }
.fc-timegrid-event, .fc-timegrid-more-link { font-size: .92rem; }

.fc-v-event {
  color: var(--dv-cream-pale);
  background-color: var(--dv-burgundy);
  border: 1px solid transparent;
  border-color: transparent !important;  /* FullCalendar sets this inline */
  display: block;
}
.fc-v-event .fc-event-title { font-weight: 700; letter-spacing: .01em; }
.fc-v-event .fc-event-time { font-weight: 400; opacity: .8; letter-spacing: .06em; }


/* 9. FORMS & CONTROLS ===================================================== */

span.label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dv-cream);
  margin-bottom: 5px;
}

.text-muted { color: var(--dv-cream) !important; }

.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  border-radius: 0;
  border-color: transparent;
  background-color: var(--dv-cream-pale);
  color: var(--dv-ink);
}
.form-control { border-radius: 0; }
.form-control:focus {
  border-color: var(--dv-cream);
  box-shadow: 0 0 0 .18rem rgba(217,199,139,.30);
}
.input-group-text {
  background-color: var(--dv-cream);
  border-color: transparent;
  border-radius: 0;
  color: var(--dv-ink);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
form .col-sm-12 .input-group-prepend .input-group-text { width: 145px; }

.input-group-append { max-width: calc(100% - 40px); }
.input-group-append .input-group-text { max-width: calc(100% - 40px); white-space: normal; }

input[type=checkbox], input[type=radio] { scale: 1.5; accent-color: var(--dv-burgundy); }
input.error { box-shadow: 0 0 1px 1px var(--dv-danger-hi); }

.list-group-item:first-child, .list-group-item:last-child { border-radius: 0; }
.list-group-item.active { background-color: var(--dv-burgundy); border-color: var(--dv-burgundy); }
.list-group.sel > a { display: none; }
.list-group.sel > a.active { display: block; }

/* bootstrap-select */
.dropdown { width: 0 !important; padding: 0; }
.dropdown button { padding-top: 5px; padding-bottom: 5px; }
.bootstrap-select button { text-transform: none; letter-spacing: 0; }
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
  background-color: var(--dv-cream-pale);
  color: var(--dv-ink) !important;
  border-color: transparent;
}
.dropdown-menu {
  border-radius: 0;
  border: 1px solid var(--dv-line-solid);
  padding: 0;
}
.dropdown-item { font-size: .92rem; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--dv-burgundy); color: var(--dv-cream) !important; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--dv-cream); color: var(--dv-ink) !important; }
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle { background-color: var(--dv-cream-pale); color: var(--dv-ink) !important; }
.btn-light:hover, .btn-light:focus, .btn-light.focus { background-color: var(--dv-cream-pale); }

/* flatpickr */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: var(--dv-burgundy);
  -webkit-box-shadow: none;
  box-shadow: none;
  color: var(--dv-cream);
  border-color: var(--dv-burgundy);
}


/* 10. BUTTONS ============================================================= */

.btn {
  border-radius: 0;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  padding: .62rem 1.35rem;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* The venue tiles reuse .btn for layout only — keep their own scale. */
.venue.btn { font-size: inherit; letter-spacing: normal; padding: inherit; }

/* Primary = cream on burgundy, matching the microsite "FIND OUT MORE" pill. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--dv-cream);
  border-color: var(--dv-cream);
  color: var(--dv-ink) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--dv-cream-pale);
  border-color: var(--dv-cream-pale);
  color: var(--dv-ink) !important;
}
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(217,199,139,.35) !important; }

.btn-default {
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--dv-cream) !important;
}
.btn-default:hover { background-color: rgba(217,199,139,.14); color: var(--dv-cream-pale) !important; }

.btn-danger { background-color: var(--dv-danger); border-color: var(--dv-danger); color: var(--dv-cream-pale); }
.btn-danger:hover { background-color: var(--dv-danger-hi); border-color: var(--dv-danger-hi); }

.btn-secondary { background-color: var(--dv-gold); border-color: var(--dv-gold); color: var(--dv-ink); }
.btn-secondary:hover { background-color: var(--dv-gold-lo); border-color: var(--dv-gold-lo); }


/* 11. MODALS ============================================================== */

.modal-backdrop { background-color: #1B0709; }
.modal-backdrop.show { opacity: .82; }

.modal-content {
  background: linear-gradient(155deg, #4B2022 0%, var(--dv-deep) 68%, #2A0C0E 100%);
  border: 1px solid var(--dv-line);
  border-radius: 0;
  color: var(--dv-cream-pale);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
/* A gold rule rather than a chamfer: the event modal hosts bootstrap-select
   dropdowns that must stay free to overflow the modal box. */
.modal-content:before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--dv-gold-lo), var(--dv-cream) 45%, var(--dv-gold-hi) 60%, var(--dv-gold-lo));
}

.modal-header {
  font-family: var(--dv-sans);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  display: block;
  color: var(--dv-cream-pale);
  padding-top: 1.4rem;
}
.modal-footer { padding-top: 0; }

#modal-evento-ver-descripcion {
  background-color: rgba(245,239,224,.94);
  color: var(--dv-ink) !important;
  border-radius: 0;
  border-left: 3px solid var(--dv-cream);
  white-space: pre-wrap;
}
#modal-evento-ver-venue {
  font-size: .7em;
  display: block;
  opacity: .78;
  letter-spacing: .18em;
  font-weight: 400;
  color: var(--dv-cream);
}

#modal_politica_privacidad, #modal-ruleta {
  width: 100%; height: 100%;
  margin: 0 !important; padding: 0 !important;
}
#modal_politica_privacidad > .modal-dialog,
#modal-ruleta > .modal-dialog {
  max-width: 100%; height: 100%;
  margin: 0; padding: 0;
}
#modal_politica_privacidad .modal-content,
#modal-ruleta .modal-content {
  height: auto; min-height: 100%;
  border-radius: 0;
}


/* 12. ADMIN =============================================================== */

.layer {
  background-color: rgba(53,17,19,.55);
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -5000;
}

.sidebar {
  bottom: 0; left: 0;
  z-index: 100;
  padding: 0;
  background: rgba(43,14,16,.72) !important;
  border-right: 1px solid var(--dv-line);
  box-shadow: none;
}
.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 18px;
}
.nav-link.btn {
  text-align: left;
  border-radius: 0;
  color: var(--dv-cream);
  border-left: 2px solid transparent;
}
.nav-link.btn:hover { background-color: rgba(217,199,139,.10); color: var(--dv-cream-pale); }
.nav-link.btn.btn-primary { border-left-color: var(--dv-gold); }
/* The selected item keeps its cream fill on hover. Without this, the dark
   wash above wins the background while .btn-primary:hover's !important wins
   the colour, leaving dark ink on a dark tile. */
.nav-link.btn.btn-primary:hover,
.nav-link.btn.btn-primary:focus {
  background-color: var(--dv-cream-pale);
  color: var(--dv-ink) !important;
}

.admin-content { margin-top: 25px; margin-bottom: 50px; }
.admin-content .card,
#charts .card {
  background-color: rgba(245,239,224,.96);
  color: var(--dv-ink);
  border: none;
}
#charts .card { padding: 15px; }
.card-title, .card-subtitle {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dv-burgundy);
}
.admin-content .table { color: var(--dv-cream-pale); }
.admin-content .table thead th {
  border-bottom: 1px solid var(--dv-line);
  border-top: none;
  color: var(--dv-cream);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.admin-content .table td,
.admin-content .table th {
  border-top: 1px solid rgba(217,199,139,.14);
  vertical-align: middle;
}
.admin-content .table-hover tbody tr:hover {
  background-color: rgba(217,199,139,.08);
  color: var(--dv-cream-pale);
}

/* User list (admin.Usuarios.php) — cream rows on the burgundy ground. */
.admin-content .list-group-item {
  background-color: rgba(245,239,224,.96);
  border: 1px solid rgba(91,42,43,.12);
  border-radius: 0;
  color: var(--dv-ink);
  margin-bottom: 2px;
}
.admin-content .list-group-item-action:hover,
.admin-content .list-group-item-action:focus {
  background-color: #FFFCF4;
  color: var(--dv-ink);
}
.admin-content .list-group-item h5 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dv-burgundy);
}
.admin-content .list-group-item small {
  color: rgba(43,14,16,.60);
  letter-spacing: .08em;
}
.admin-content .list-group-item.active {
  background-color: var(--dv-burgundy);
  border-color: var(--dv-burgundy);
  color: var(--dv-cream);
}
.admin-content .list-group-item.active h5 { color: var(--dv-cream); }
.admin-content .list-group-item.active small { color: rgba(217,199,139,.78); }
/* The selected row holds its burgundy on hover. Otherwise the action-hover
   above turns it near-white while the heading stays cream — invisible. */
.admin-content .list-group-item.active:hover,
.admin-content .list-group-item.active:focus {
  background-color: var(--dv-burgundy);
  border-color: var(--dv-burgundy);
  color: var(--dv-cream);
}

.modal-title {
  font-family: var(--dv-sans);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* 13. MISC ================================================================ */

.blink { animation: blinker .25s linear infinite; }
@keyframes blinker { 50% { opacity: .5; } }

#feedback-show { position: fixed; bottom: 25px; right: 25px; z-index: 1000; }
#fecha { font-size: 2em; text-align: center; }
.text-small { font-size: .7em; }

#ruleta {
  display: inline-block;
  position: relative;
  width: 500px; height: 500px;
  top: 0; left: 0;
  vertical-align: middle;
}
#ruleta-premio {
  display: inline-block;
  position: relative;
  width: 400px; height: 500px;
  top: 0;
  vertical-align: middle;
}
#ruleta-premio h1 {
  font-size: 50px;
  font-weight: bold;
  position: absolute;
  padding: 0; margin: 0;
  top: 50%; left: 25px;
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
}

.ms-signin-button {
  background-color: #2F78D6;
  color: #fff !important;
  text-decoration: none !important;
  padding: 10px 15px;
  border-radius: 0;
  display: flex;
  align-items: center;
}
.ms-signin-button:hover { background-color: #2D6CC0; }
.ms-signin-button img { margin-right: 10px; height: 25px; }


/* 14. RESPONSIVE ========================================================== */

@media (max-width: 767.98px) {
  :root { --dv-chamfer: 10px; }
  .venue h1 { font-size: 1.3rem; }
  .dv-login-tagline { font-size: .82rem; letter-spacing: .24em; }
  .top-bar a, .top-link { margin-left: 12px; }
  body.login, body.app { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  * { transition: none !important; }
}