/* ================================================================
   DEMO SITE — Generic Business One-Page
   Styles for the fake website rendered inside the 3D monitor
   ================================================================ */

/* ======================== THEME VARIABLES ======================== */
.demo-screen[data-theme="warm"] {
  --ds-bg: #1a1510;
  --ds-bg-alt: #201a12;
  --ds-accent: #C4A265;
  --ds-accent-rgb: 196,162,101;
  --ds-text: #f5f0eb;
  --ds-muted: #b8a99a;
  --ds-dim: #7a6e62;
  --ds-card: #271f14;
  --ds-card-tint: rgba(196,162,101,0.06);
  --ds-border: rgba(196,162,101,0.18);
  --ds-hero-grad: linear-gradient(160deg, #2e200e 0%, #1a1209 40%, #0d0a06 100%);
  --ds-nav-bg: rgba(26,21,16,0.92);
}
.demo-screen[data-theme="cool"] {
  --ds-bg: #0c1620;
  --ds-bg-alt: #101e2e;
  --ds-accent: #5BA0D4;
  --ds-accent-rgb: 91,160,212;
  --ds-text: #e8edf4;
  --ds-muted: #8aaac0;
  --ds-dim: #5a7088;
  --ds-card: #112540;
  --ds-card-tint: rgba(91,160,212,0.06);
  --ds-border: rgba(91,160,212,0.18);
  --ds-hero-grad: linear-gradient(200deg, #0a2040 0%, #0d1520 40%, #060d14 100%);
  --ds-nav-bg: rgba(12,22,32,0.92);
}
.demo-screen[data-theme="forest"] {
  --ds-bg: #0c1810;
  --ds-bg-alt: #112016;
  --ds-accent: #5EAE48;
  --ds-accent-rgb: 94,174,72;
  --ds-text: #eaf2e8;
  --ds-muted: #82b878;
  --ds-dim: #4e8042;
  --ds-card: #132a16;
  --ds-card-tint: rgba(94,174,72,0.06);
  --ds-border: rgba(94,174,72,0.18);
  --ds-hero-grad: linear-gradient(170deg, #0e2a12 0%, #0a1808 40%, #050c03 100%);
  --ds-nav-bg: rgba(12,24,16,0.92);
}
.demo-screen[data-theme="rose"] {
  --ds-bg: #1c0e16;
  --ds-bg-alt: #24121c;
  --ds-accent: #D4708A;
  --ds-accent-rgb: 212,112,138;
  --ds-text: #f5ecf0;
  --ds-muted: #c08a9a;
  --ds-dim: #885060;
  --ds-card: #2c1422;
  --ds-card-tint: rgba(212,112,138,0.06);
  --ds-border: rgba(212,112,138,0.18);
  --ds-hero-grad: linear-gradient(140deg, #3a0818 0%, #1c0810 40%, #0c0408 100%);
  --ds-nav-bg: rgba(28,14,22,0.92);
}
.demo-screen[data-theme="slate"] {
  --ds-bg: #111218;
  --ds-bg-alt: #16181f;
  --ds-accent: #9498B4;
  --ds-accent-rgb: 148,152,180;
  --ds-text: #eaebed;
  --ds-muted: #a0a2b0;
  --ds-dim: #606272;
  --ds-card: #1c1e28;
  --ds-card-tint: rgba(148,152,180,0.05);
  --ds-border: rgba(148,152,180,0.18);
  --ds-hero-grad: linear-gradient(180deg, #0e1020 0%, #0c0e18 40%, #060810 100%);
  --ds-nav-bg: rgba(17,18,24,0.92);
}
.demo-screen[data-theme="sunset"] {
  --ds-bg: #1c1410;
  --ds-bg-alt: #241812;
  --ds-accent: #E8844A;
  --ds-accent-rgb: 232,132,74;
  --ds-text: #f5efe8;
  --ds-muted: #c4a088;
  --ds-dim: #886650;
  --ds-card: #2a1c12;
  --ds-card-tint: rgba(232,132,74,0.06);
  --ds-border: rgba(232,132,74,0.18);
  --ds-hero-grad: linear-gradient(150deg, #381e08 0%, #1e1206 40%, #0e0804 100%);
  --ds-nav-bg: rgba(28,20,16,0.92);
}

/* --- NEW THEMES --- */
.demo-screen[data-theme="light"] {
  --ds-bg: #faf9f7;
  --ds-bg-alt: #f0eeeb;
  --ds-accent: #B8943F;
  --ds-accent-rgb: 184,148,63;
  --ds-text: #1a1a1a;
  --ds-muted: #5a5a5a;
  --ds-dim: #8a8a8a;
  --ds-card: #ffffff;
  --ds-card-tint: rgba(184,148,63,0.05);
  --ds-border: rgba(0,0,0,0.08);
  --ds-hero-grad: linear-gradient(160deg, #f5f0e8 0%, #faf9f7 40%, #ffffff 100%);
  --ds-nav-bg: rgba(250,249,247,0.95);
}
.demo-screen[data-theme="midnight"] {
  --ds-bg: #050505;
  --ds-bg-alt: #0a0a0a;
  --ds-accent: #e0e0e0;
  --ds-accent-rgb: 224,224,224;
  --ds-text: #f0f0f0;
  --ds-muted: #909090;
  --ds-dim: #505050;
  --ds-card: #111111;
  --ds-card-tint: rgba(255,255,255,0.03);
  --ds-border: rgba(255,255,255,0.08);
  --ds-hero-grad: linear-gradient(180deg, #0c0c0c 0%, #050505 40%, #000000 100%);
  --ds-nav-bg: rgba(5,5,5,0.95);
}
.demo-screen[data-theme="ocean"] {
  --ds-bg: #0a1a20;
  --ds-bg-alt: #0e2228;
  --ds-accent: #3ECFB2;
  --ds-accent-rgb: 62,207,178;
  --ds-text: #e8f4f0;
  --ds-muted: #80c0b0;
  --ds-dim: #4a8878;
  --ds-card: #0f2830;
  --ds-card-tint: rgba(62,207,178,0.06);
  --ds-border: rgba(62,207,178,0.16);
  --ds-hero-grad: linear-gradient(165deg, #0a2a28 0%, #081a1c 40%, #040e10 100%);
  --ds-nav-bg: rgba(10,26,32,0.92);
}

/* ======================== FONT VARIABLES ======================== */
.demo-screen[data-font="modern"]  { --ds-heading: 'DM Sans', sans-serif;          --ds-body: 'DM Sans', sans-serif; }
.demo-screen[data-font="classic"] { --ds-heading: 'Playfair Display', serif;       --ds-body: 'EB Garamond', 'Georgia', serif; }
.demo-screen[data-font="clean"]   { --ds-heading: 'Inter', sans-serif;             --ds-body: 'Inter', sans-serif; }
.demo-screen[data-font="bold"]    { --ds-heading: 'Sora', sans-serif;              --ds-body: 'Sora', sans-serif; }

/* ======================== BASE ======================== */
.demo-screen-content {
  font-family: var(--ds-body, 'DM Sans', sans-serif);
  color: var(--ds-text);
  line-height: 1.6;
  width: 100%;
}

.demo-screen-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: color 0.4s, background-color 0.4s, border-color 0.4s, background 0.5s;
}

.ds-container {
  max-width: 92%;
  margin: 0 auto;
  padding: 0 16px;
}

/* ======================== NAV BAR ======================== */
.ds-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ds-nav-bg, rgba(26,21,16,0.92));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ds-border);
  padding: 0 16px;
  transition: background 0.4s;
}

.ds-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 92%;
  margin: 0 auto;
  height: 36px;
}

.ds-nav__logo {
  font-family: var(--ds-heading);
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-text);
  letter-spacing: -0.02em;
}

.ds-nav__links {
  display: flex;
  gap: 16px;
}

.ds-nav__link {
  font-size: 9px;
  color: var(--ds-muted);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ds-nav__cta {
  padding: 4px 12px;
  font-size: 9px;
  border-radius: 4px;
}

/* ======================== HERO ======================== */
.ds-hero {
  position: relative;
  padding: 44px 0 36px;
  background: var(--ds-hero-grad);
  overflow: hidden;
  text-align: center;
}

.ds-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(var(--ds-accent-rgb), 0.1) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(var(--ds-accent-rgb), 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.ds-hero__label {
  display: inline-block;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ds-accent);
  margin-bottom: 14px;
  font-weight: 600;
}

.ds-hero__title {
  font-family: var(--ds-heading);
  font-size: 28px;
  line-height: 1.08;
  color: var(--ds-text);
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ds-hero__subtitle {
  font-size: 10px;
  color: var(--ds-muted);
  max-width: 300px;
  margin: 0 auto 16px;
  line-height: 1.6;
}

.ds-hero__ctas {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--ds-body, 'DM Sans', sans-serif);
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.ds-btn--primary {
  background: var(--ds-accent);
  color: var(--ds-bg);
}

.ds-btn--ghost {
  background: transparent;
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
}

.ds-hero__phone {
  display: block;
  margin-top: 16px;
  font-size: 9px;
  color: var(--ds-dim);
  text-decoration: none;
  letter-spacing: 0.05em;
}

/* ======================== ABOUT ======================== */
.ds-about {
  padding: 30px 0;
  background: var(--ds-bg);
}

.ds-about__inner {
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}

.ds-about__label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ds-accent);
  font-weight: 600;
  margin-bottom: 10px;
}

.ds-about__title {
  font-family: var(--ds-heading);
  font-size: 22px;
  color: var(--ds-text);
  margin-bottom: 12px;
  line-height: 1.2;
  font-weight: 700;
}

.ds-about__text {
  font-size: 10px;
  color: var(--ds-muted);
  line-height: 1.7;
}

.ds-about__divider {
  width: 36px;
  height: 2px;
  background: var(--ds-accent);
  margin: 16px auto 0;
  border-radius: 1px;
}

/* ======================== SERVICES ======================== */
.ds-services {
  padding: 30px 0;
  background: var(--ds-bg-alt);
}

.ds-services__header {
  text-align: center;
  margin-bottom: 24px;
}

.ds-services__label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ds-accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.ds-services__title {
  font-family: var(--ds-heading);
  font-size: 20px;
  color: var(--ds-text);
  font-weight: 700;
  line-height: 1.2;
}

.ds-services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 92%;
  margin: 0 auto;
}

.ds-service-card {
  background: linear-gradient(135deg, var(--ds-card) 0%, var(--ds-card) 60%, var(--ds-card-tint, transparent) 100%);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
}

.ds-service-card__icon {
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  color: var(--ds-accent);
}

.ds-service-card__name {
  font-family: var(--ds-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text);
  margin-bottom: 4px;
}

.ds-service-card__desc {
  font-size: 9px;
  color: var(--ds-dim);
  line-height: 1.5;
}

/* ======================== MENU ======================== */
.ds-menu {
  padding: 30px 0;
  background: var(--ds-bg);
}

.ds-menu__header {
  text-align: center;
  margin-bottom: 24px;
}

.ds-menu__label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ds-accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.ds-menu__title {
  font-family: var(--ds-heading);
  font-size: 20px;
  color: var(--ds-text);
  font-weight: 700;
  line-height: 1.2;
}

.ds-menu__list {
  max-width: 92%;
  margin: 0 auto;
  list-style: none;
}

.ds-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--ds-border);
}

.ds-menu-item:last-child {
  border-bottom: none;
}

.ds-menu-item__info {
  flex: 1;
  margin-right: 10px;
}

.ds-menu-item__name {
  font-family: var(--ds-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-menu-item__desc {
  font-size: 9px;
  color: var(--ds-dim);
  margin-top: 2px;
  line-height: 1.4;
}

.ds-menu-item__price {
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-accent);
  white-space: nowrap;
}

.ds-menu-item__dots {
  flex: 1;
  border-bottom: 1px dotted var(--ds-border);
  margin: 0 6px;
  min-width: 16px;
  align-self: center;
  margin-bottom: 4px;
}

/* ======================== GALLERY ======================== */
.ds-gallery {
  padding: 30px 0;
  background: var(--ds-bg-alt);
}

.ds-gallery__header {
  text-align: center;
  margin-bottom: 20px;
}

.ds-gallery__label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ds-accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.ds-gallery__title {
  font-family: var(--ds-heading);
  font-size: 20px;
  color: var(--ds-text);
  font-weight: 700;
  line-height: 1.2;
}

.ds-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 92%;
  margin: 0 auto;
}

.ds-gallery__item {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.ds-gallery__placeholder {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(135deg,
    rgba(var(--ds-accent-rgb), 0.12),
    rgba(var(--ds-accent-rgb), 0.04),
    rgba(var(--ds-accent-rgb), 0.08)
  );
}

/* Vary the gradient angles per item for visual interest */
.ds-gallery__item:nth-child(2) .ds-gallery__placeholder { background: linear-gradient(160deg, rgba(var(--ds-accent-rgb),0.08), rgba(var(--ds-accent-rgb),0.02), rgba(var(--ds-accent-rgb),0.1)); }
.ds-gallery__item:nth-child(3) .ds-gallery__placeholder { background: linear-gradient(190deg, rgba(var(--ds-accent-rgb),0.14), rgba(var(--ds-accent-rgb),0.04), rgba(var(--ds-accent-rgb),0.06)); }
.ds-gallery__item:nth-child(4) .ds-gallery__placeholder { background: linear-gradient(120deg, rgba(var(--ds-accent-rgb),0.06), rgba(var(--ds-accent-rgb),0.12), rgba(var(--ds-accent-rgb),0.04)); }
.ds-gallery__item:nth-child(5) .ds-gallery__placeholder { background: linear-gradient(200deg, rgba(var(--ds-accent-rgb),0.10), rgba(var(--ds-accent-rgb),0.03), rgba(var(--ds-accent-rgb),0.12)); }
.ds-gallery__item:nth-child(6) .ds-gallery__placeholder { background: linear-gradient(145deg, rgba(var(--ds-accent-rgb),0.04), rgba(var(--ds-accent-rgb),0.10), rgba(var(--ds-accent-rgb),0.08)); }

.ds-gallery__item-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 7px;
  color: rgba(var(--ds-accent-rgb), 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ======================== REVIEWS ======================== */
.ds-reviews {
  padding: 30px 0;
  background: var(--ds-bg);
}

.ds-reviews__header {
  text-align: center;
  margin-bottom: 20px;
}

.ds-reviews__label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ds-accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.ds-reviews__title {
  font-family: var(--ds-heading);
  font-size: 20px;
  color: var(--ds-text);
  font-weight: 700;
  line-height: 1.2;
}

.ds-reviews__grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 92%;
  margin: 0 auto;
}

.ds-review-card {
  background: linear-gradient(160deg, var(--ds-card) 0%, var(--ds-card) 50%, var(--ds-card-tint, transparent) 100%);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  padding: 14px 12px;
}

.ds-review-card__stars {
  color: var(--ds-accent);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.ds-review-card__text {
  font-size: 9px;
  color: var(--ds-muted);
  line-height: 1.6;
  margin-bottom: 8px;
  font-style: italic;
}

.ds-review-card__author {
  font-size: 9px;
  font-weight: 600;
  color: var(--ds-text);
}

/* ======================== HOURS & CONTACT ======================== */
.ds-contact {
  padding: 30px 0;
  background: var(--ds-bg);
}

.ds-contact__header {
  text-align: center;
  margin-bottom: 20px;
}

.ds-contact__label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ds-accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.ds-contact__title {
  font-family: var(--ds-heading);
  font-size: 20px;
  color: var(--ds-text);
  font-weight: 700;
  line-height: 1.2;
}

.ds-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 92%;
  margin: 0 auto;
}

.ds-hours-table {
  width: 100%;
  border-collapse: collapse;
}

.ds-hours-table tr {
  border-bottom: 1px solid var(--ds-border);
}

.ds-hours-table td {
  padding: 5px 0;
  font-size: 9px;
}

.ds-hours-table td:first-child {
  color: var(--ds-text);
  font-weight: 500;
}

.ds-hours-table td:last-child {
  text-align: right;
  color: var(--ds-dim);
}

.ds-contact__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ds-contact__item {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.ds-contact__icon {
  width: 14px;
  height: 14px;
  color: var(--ds-accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.ds-contact__text {
  font-size: 9px;
  color: var(--ds-muted);
  line-height: 1.5;
}

.ds-contact__map {
  margin-top: 14px;
  grid-column: 1 / -1;
  height: 80px;
  background: linear-gradient(135deg, var(--ds-card), var(--ds-bg-alt));
  border-radius: 6px;
  border: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-dim);
  font-size: 9px;
  gap: 4px;
}

.ds-contact__map svg {
  width: 12px;
  height: 12px;
}

/* ======================== FOOTER ======================== */
.ds-footer {
  padding: 20px 0;
  background: var(--ds-bg-alt);
  border-top: 1px solid var(--ds-border);
  text-align: center;
}

.ds-footer__name {
  font-family: var(--ds-heading);
  font-size: 12px;
  color: var(--ds-text);
  font-weight: 700;
  margin-bottom: 4px;
}

.ds-footer__credit {
  font-size: 8px;
  color: var(--ds-dim);
}

.ds-footer__credit a {
  color: var(--ds-accent);
  text-decoration: none;
}