/* DropHour Sunset Brand Theme
   Load this AFTER /styles.css so it overrides the older Midnight Luxe colors.
*/

:root {
  --bg: #F8F6F2;
  --surface: #FFFFFF;
  --surface-2: #FFF5EA;
  --surface-3: #FCE8D7;

  --ink: #111111;
  --muted: #70675F;
  --cream: #F8F6F2;

  --accent: #FD6716;
  --accent-mid: #FB8D4C;
  --gold: #FDB049;
  --accent-dark: #D94D00;
  --accent-soft: rgba(253, 103, 22, 0.10);

  --line: rgba(17, 17, 17, 0.11);
  --shadow: 0 22px 70px rgba(54, 31, 16, 0.12);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(253, 103, 22, 0.12), transparent 26%),
    radial-gradient(circle at 92% 8%, rgba(253, 176, 73, 0.16), transparent 25%),
    linear-gradient(180deg, #FFFDF9 0%, var(--bg) 44%, #F6F1EB 100%);
}

body::before {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(253, 103, 22, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(253, 103, 22, 0.06) 1px, transparent 1px);
}

.site-header {
  background: rgba(255, 253, 249, 0.88);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 8px 30px rgba(45, 28, 16, 0.05);
}

.brand-logo-image {
  display: block;
  width: clamp(142px, 16vw, 205px);
  height: auto;
}

.logo-mark {
  background: linear-gradient(180deg, #FD6716 0%, #FB8D4C 52%, #FDB049 100%);
  color: white;
  box-shadow: 0 10px 28px rgba(253, 103, 22, 0.22);
}

.site-header nav {
  color: #5F5750;
}

.primary-button,
.deal-card button {
  color: white;
  background: linear-gradient(100deg, #FD6716 0%, #FB8D4C 52%, #FDB049 100%);
  box-shadow: 0 14px 34px rgba(253, 103, 22, 0.22);
}

.primary-button:hover {
  box-shadow: 0 18px 44px rgba(253, 103, 22, 0.30);
}

.secondary-button,
.nav-button {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(17, 17, 17, 0.14);
}

.secondary-button:hover,
.nav-button:hover {
  border-color: rgba(253, 103, 22, 0.48);
  box-shadow: 0 10px 30px rgba(253, 103, 22, 0.10);
}

.eyebrow,
.number,
.form-message,
.form-message.success {
  color: var(--accent);
}

/* Keep live-deal preview dark so the brand still feels like nightlife */
.phone-card {
  background:
    radial-gradient(circle at top right, rgba(253, 103, 22, 0.22), transparent 34%),
    linear-gradient(180deg, #1A1715, #090909);
  color: #FFF8F1;
  border: 1px solid rgba(253, 141, 76, 0.28);
  box-shadow:
    0 28px 70px rgba(34, 18, 9, 0.24),
    0 0 48px rgba(253, 103, 22, 0.10);
}

.phone-card .deal-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 176, 73, 0.20);
}

.phone-card .deal-card.featured {
  background:
    radial-gradient(circle at top right, rgba(253, 176, 73, 0.20), transparent 36%),
    linear-gradient(145deg, #2B160C, #111111);
  border-color: rgba(253, 103, 22, 0.38);
}

.phone-card .deal-card p,
.phone-card .phone-topline {
  color: rgba(255, 248, 241, 0.70);
}

.proof-grid > div,
.form-card,
.latest-deals article,
.claim-card,
.admin-page {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(17, 17, 17, 0.09);
  box-shadow: var(--shadow);
}

.form-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,250,244,0.98));
}

label {
  color: var(--ink);
}

label span {
  color: var(--accent);
}

input,
select,
textarea {
  background: #FCFAF7;
  color: var(--ink);
  border: 1px solid rgba(17, 17, 17, 0.14);
}

select option {
  background: #FFFFFF;
  color: var(--ink);
}

input::placeholder,
textarea::placeholder {
  color: #9A9189;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(253, 103, 22, 0.11);
}

.checkbox-row {
  color: var(--muted);
}

.checkbox-row input {
  accent-color: var(--accent);
}

.badge,
.mini-stats span,
.admin-metrics div {
  background: rgba(253, 103, 22, 0.09);
  color: var(--accent-dark);
  border-color: rgba(253, 103, 22, 0.18);
}

.code-pill {
  color: #111;
  background: linear-gradient(90deg, #FB8D4C, #FDB049);
}

.empty-state {
  background: rgba(255,255,255,0.58);
  border-color: rgba(253, 103, 22, 0.28);
}

.site-footer {
  border-top-color: rgba(17,17,17,0.10);
}

/* Admin + utility surfaces */
.table-wrap {
  background: rgba(255,255,255,0.86);
}

th {
  background: rgba(253, 103, 22, 0.08);
  color: var(--accent-dark);
}

.redemption-code-box {
  background: #111111;
  color: #FFF8F1;
  border-color: rgba(253, 103, 22, 0.34);
}

/* Map: orange = participating, hot red-orange = live */
.legend-dot.standby,
.map-marker span {
  background: #FDB049;
}

.legend-dot.standby {
  box-shadow: 0 0 18px rgba(253, 176, 73, 0.65);
}

.legend-dot.live,
.map-marker.is-live span {
  background: #FF3B1F;
}

.legend-dot.live {
  box-shadow: 0 0 20px rgba(255, 59, 31, 0.90);
}

.drop-map {
  border-color: rgba(253, 103, 22, 0.24);
  box-shadow: var(--shadow), 0 0 50px rgba(253, 103, 22, 0.06);
}

.map-list {
  background:
    radial-gradient(circle at top right, rgba(253, 103, 22, 0.16), transparent 35%),
    linear-gradient(180deg, #1B1714, #0D0D0D);
  border-color: rgba(253, 141, 76, 0.30);
  color: #FFF8F1;
}

.map-list .muted-small,
.map-list-card span,
.map-list-card small {
  color: rgba(255, 248, 241, 0.62);
}

.map-list-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(253,176,73,0.20);
}

.map-list-card strong,
.map-list-card p {
  color: #FFF8F1;
}

.map-marker {
  background: rgba(253, 176, 73, 0.18);
  border-color: rgba(253, 176, 73, 0.95);
  box-shadow: 0 0 22px rgba(253, 176, 73, 0.62);
}

.map-marker.is-live {
  background: rgba(255, 59, 31, 0.22);
  border-color: #FF3B1F;
  box-shadow:
    0 0 18px rgba(255, 59, 31, 0.95),
    0 0 42px rgba(255, 59, 31, 0.45);
}

.live-badge {
  background: #FF3B1F !important;
  border-color: #FF3B1F !important;
}

.live-deal-card,
.map-list-card.is-live {
  border-color: rgba(255, 59, 31, 0.56) !important;
}

/* Make large headlines feel slightly more editorial */
h1 {
  max-width: 920px;
}

@media (max-width: 680px) {
  .brand-logo-image {
    width: 142px;
  }
}

/* Compact horizontal header brand */

.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-header-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-header-wordmark {
  color: #111111;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.5px;
}

@media (max-width: 760px) {
  .brand-header-icon {
    width: 44px;
    height: 44px;
  }

  .brand-header-wordmark {
    font-size: 24px;
  }
}

/* ===== HEADER HARD RESET ===== */

.site-header {
  position: static !important;
  top: auto !important;
  width: 100%;
  min-height: 72px !important;
  padding: 12px 32px !important;
  background: rgba(255, 253, 249, 0.96);
}

.site-header .brand-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: auto !important;
  height: auto !important;
  max-width: none !important;

  flex: 0 0 auto !important;
  text-decoration: none;
}

.site-header .brand-header-icon {
  display: block !important;

  width: 46px !important;
  height: 46px !important;

  min-width: 46px !important;
  min-height: 46px !important;

  max-width: 46px !important;
  max-height: 46px !important;

  object-fit: contain !important;
  flex: 0 0 46px !important;
}

.site-header .brand-header-wordmark {
  display: inline-block !important;

  color: #111111 !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -1.4px !important;

  white-space: nowrap !important;
}

.site-header nav {
  margin-left: auto !important;
}

@media (max-width: 760px) {
  .site-header {
    padding: 10px 16px !important;
  }

  .site-header .brand-header-icon {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    max-width: 38px !important;
    max-height: 38px !important;

    flex-basis: 38px !important;
  }

  .site-header .brand-header-wordmark {
    font-size: 22px !important;
    letter-spacing: -1px !important;
  }
}