/* Winter theme — loaded after each page's own styles, so it overrides them. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400&display=swap");

:root {
  --bg: transparent;
  --card: rgba(236, 242, 255, .78);
  --ink: #1b2766;
  --muted: #4b5b98;
  --accent: #6a62ea;
  --accent-ink: #fff;
  --open: #5a7be0;
  --open-bg: rgba(255, 255, 255, .62);
  --req: #a77bf2;
  --req-bg: rgba(214, 196, 255, .7);
  --line: rgba(150, 176, 240, .45);
  --radius: 18px;
  --flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24' fill='none' stroke='%237f9bf0' stroke-width='1.3' stroke-linecap='round'%3E%3Cg id='a'%3E%3Cpath d='M0 0V-11M0-7.5l-3-3M0-7.5l3-3M0-4l-2-2M0-4l2-2'/%3E%3C/g%3E%3Cuse href='%23a' transform='rotate(60)'/%3E%3Cuse href='%23a' transform='rotate(120)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(240)'/%3E%3Cuse href='%23a' transform='rotate(300)'/%3E%3Ccircle r='1.6' fill='%23c9d8ff'/%3E%3C/svg%3E");
  --flake-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24' fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round'%3E%3Cg id='a'%3E%3Cpath d='M0 0V-11M0-7.5l-3-3M0-7.5l3-3M0-4l-2-2M0-4l2-2'/%3E%3C/g%3E%3Cuse href='%23a' transform='rotate(60)'/%3E%3Cuse href='%23a' transform='rotate(120)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(240)'/%3E%3Cuse href='%23a' transform='rotate(300)'/%3E%3Ccircle r='1.8' fill='%23bfe3ff'/%3E%3C/svg%3E");
}

html { background: #93abe8; }
body {
  background: transparent;
  color: var(--ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 17px;
  min-height: 100vh;
}

/* Scene + falling snow, fixed behind everything (works on iPhone, unlike background-attachment: fixed) */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: -2; background: url("/winter-bg.svg") center / cover no-repeat; }
body::after {
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(255,255,255,.8) 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,.6) .8px, transparent 1.2px);
  background-size: 180px 180px, 120px 120px, 70px 70px;
  background-position: 0 0, 40px 60px, 20px 30px;
  animation: snow 22s linear infinite;
  opacity: .8;
}
@keyframes snow {
  to { background-position: 60px 720px, 100px 540px, 50px 420px; }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

main { position: relative; }

/* Frosted ice cards */
.card, dialog {
  background: linear-gradient(160deg, rgba(243, 247, 255, .86), rgba(212, 225, 255, .74));
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 1px rgba(160, 190, 255, .35),
    0 0 26px rgba(200, 222, 255, .65),
    0 14px 40px rgba(25, 45, 140, .25),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  position: relative;
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120px 70px at 100% 0%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(140px 60px at 100% 100%, rgba(255,255,255,.6), transparent 70%),
    linear-gradient(135deg, transparent 88%, rgba(255,255,255,.55) 88.4%, transparent 89%),
    linear-gradient(120deg, transparent 93%, rgba(255,255,255,.5) 93.3%, transparent 93.8%);
}
.card > * { position: relative; z-index: 1; }

/* Headings with snowflakes */
h1, h2, h3 { font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif; }
.card h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; color: var(--ink); }
.card h2::before { content: ""; width: 26px; height: 26px; background: var(--flake) center / contain no-repeat; flex: none; }
.cal-head h2::before { display: none; }
.cal-head h2 { font-size: 24px; }

/* Admin title bar */
main > #app > h1, main > div > h1 {
  color: #fff; font-style: italic; font-weight: 500; font-size: 34px;
  text-shadow: 0 0 18px rgba(170, 200, 255, .9), 0 1px 2px rgba(20, 30, 90, .4);
  padding: 4px 0 16px 64px; margin-bottom: 22px; position: relative;
  background: linear-gradient(90deg, transparent 12%, rgba(255,255,255,.85) 40%, rgba(255,255,255,.85) 60%, transparent 92%) bottom / 100% 1.5px no-repeat;
}
main > #app > h1::before {
  content: ""; position: absolute; left: 0; top: -10px; width: 56px; height: 56px;
  background: var(--flake-white) center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(190, 225, 255, .95));
}
main > #app > h1 .btn.link { color: #fff; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 22px; text-shadow: 0 0 10px rgba(170,200,255,.9); }

/* Public header */
header h1 {
  color: #fff; font-style: italic; font-weight: 600; font-size: clamp(32px, 8vw, 44px);
  text-shadow: 0 0 20px rgba(170, 200, 255, .95), 0 1px 3px rgba(20, 30, 90, .45);
}
header .sub { color: #eef3ff; font-style: italic; text-shadow: 0 1px 6px rgba(20, 30, 90, .5); }
.badge { font-size: 0; width: 64px; height: 64px; margin: 0 auto; background: var(--flake-white) center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(190, 225, 255, 1)); }
footer { color: #fff; text-shadow: 0 1px 4px rgba(20, 30, 90, .6); font-style: italic; }
.next h3 { color: #fff; font-style: italic; text-shadow: 0 1px 5px rgba(20, 30, 90, .6); font-size: 20px; }

/* Text bits */
.muted, .empty-msg, .sub, .when { font-style: italic; }
.muted, .empty-msg { color: var(--muted); }
label { color: var(--ink) !important; font-size: 15px !important; }

/* Inputs */
input, select, textarea {
  background: rgba(255, 255, 255, .62) !important;
  border: 1px solid rgba(150, 178, 240, .7) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
  font-family: "EB Garamond", Georgia, serif !important;
  box-shadow: inset 0 1px 3px rgba(60, 90, 180, .12);
}
input::placeholder, textarea::placeholder { color: #6c7bb3; font-style: italic; }
input:focus, select:focus, textarea:focus { outline: 2px solid #8f87ff !important; outline-offset: 1px; }

/* Buttons */
.btn {
  background: linear-gradient(180deg, #8b80ff, #5a58dc);
  color: #fff; font-family: "EB Garamond", Georgia, serif; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 16px rgba(125, 115, 255, .75), 0 4px 10px rgba(40, 40, 140, .3);
}
.btn.ok { background: linear-gradient(180deg, #7fb2ff, #4d76db); }
.btn.no, .btn.ghost { background: rgba(255, 255, 255, .55); color: var(--ink); box-shadow: 0 0 0 1px rgba(150, 178, 240, .7); }
.btn.link { background: none; box-shadow: none; color: #3d4db8; text-decoration: underline; text-underline-offset: 3px; }
.nav { background: rgba(255, 255, 255, .6); color: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,.8); }

/* Admin lists */
.req { background: rgba(255, 255, 255, .45); border-color: rgba(255, 255, 255, .85); }
.req .msg { background: rgba(255, 255, 255, .6); }
td { border-top-color: var(--line); }
.msgline.s { color: #3b9fb8; font-style: italic; }
.tag.pending { background: var(--req-bg); color: #5b3fa8; }
.tag.confirmed { background: rgba(190, 215, 255, .85); color: #2a46a8; }
.tag.declined { background: rgba(255, 255, 255, .55); color: var(--muted); }
code { background: rgba(255, 255, 255, .6); }
a { color: #3d4db8; }

/* Public calendar */
.dow { color: var(--muted); }
.day { color: var(--ink); }
.day.past { color: rgba(27, 39, 102, .32); }
.day.has { background: var(--open-bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 10px rgba(190, 215, 255, .7); }
.day.has.full { background: rgba(255, 255, 255, .35); color: var(--muted); }
.day.today::after { border-color: #8f87ff; }
.day.sel { background: linear-gradient(180deg, #8b80ff, #5a58dc); color: #fff; box-shadow: 0 0 14px rgba(125, 115, 255, .8); }
.day.sel.full { background: linear-gradient(180deg, #a9b3d8, #7f8bbd); }
.dots i { background: var(--open); }
.dots i.r { background: var(--req); }
.legend { color: var(--muted); font-style: italic; }
.slot { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .9); }
.pill.req { background: var(--req-bg); color: #5b3fa8; }
.pill.book { background: rgba(255, 255, 255, .6); color: var(--muted); }
.chip { background: rgba(240, 245, 255, .8); border-color: rgba(255, 255, 255, .9); color: var(--ink); font-family: "EB Garamond", Georgia, serif; box-shadow: 0 0 12px rgba(190, 215, 255, .6); }

/* Request dialog */
dialog { color: var(--ink); }
dialog::backdrop { background: rgba(20, 30, 90, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.err { color: #b3261e; }