/* egstore sitewide stylesheet - the single shared design system.
 *
 * Started 2026-08-10 from the palette/component patterns of delclose's
 * css/myprofile.css (its newest, most-deliberately-designed UI at the
 * time) - a one-time starting point, not an ongoing dependency. This
 * codebase owns its look from here on and is free to diverge from
 * delclose's however it needs to; nothing here re-syncs against that repo.
 *
 * One file, loaded on every page - reuse a token or class below before
 * inventing a new one. If a page genuinely needs something this file
 * doesn't cover, add it locally (a scoped <style> block in that page, or
 * a small dedicated assets/css/<page>.css linked only there) rather than
 * growing a second sitewide stylesheet.
 */

:root {
  --color-bg: #f7f7f7;
  --color-surface: #ffffff;
  --color-text: #222222;
  --color-text-muted: #666666;
  --color-label: #686868;
  --color-empty: #999999;
  --color-primary: #7c0000;      /* maroon - buttons, links, focus */
  --color-primary-hover: #5c0000;
  --color-border: #eeeeee;       /* section/row dividers */
  --color-border-input: #cccccc; /* input/select/textarea borders */
  --color-input-bg: #ffffff;

  /* Status colors - shared by .badge-* and .flash-success. */
  --color-success-bg: #e4f0e4;
  --color-success-text: #2e7d32;
  --color-warning-bg: #fbf0da;
  --color-warning-text: #8a6300;
  --color-warning-border: #ebd9a8;
  --color-danger-bg: #f5e4e4;
  --color-danger-text: #7c0000;
  --color-info-bg: #e4eef5;
  --color-info-text: #1a5490;
  --color-neutral-bg: #eeeeee;
  --color-neutral-text: #555555;

  --radius-sm: 4px;
  --radius: 6px;
  --shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
  --max-width: 72rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #16131a;
    --color-surface: #221d28;
    --color-text: #f2eef7;
    --color-text-muted: #b8adc4;
    --color-label: #a89cb5;
    --color-empty: #8c8296;
    --color-primary: #e0736f;
    --color-primary-hover: #ec9a97;
    --color-border: #362f40;
    --color-border-input: #4a4155;
    --color-input-bg: #2a2432;

    --color-success-bg: #1e3324;
    --color-success-text: #7fd88f;
    --color-warning-bg: #3a2f14;
    --color-warning-text: #e0c069;
    --color-warning-border: #5c4b21;
    --color-danger-bg: #3a2020;
    --color-danger-text: #e0736f;
    --color-info-bg: #1c2e3d;
    --color-info-text: #7cb3e0;
    --color-neutral-bg: #362f40;
    --color-neutral-text: #cdc4d6;

    --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

/* --- Header --------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}

.site-header .brand {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--color-text);
}

/* --- Hero ------------------------------------------------------------ */

.hero {
  padding-block: var(--space-4);
  text-align: center;
}

.hero h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  margin: 0 0 var(--space-2);
}

.hero p {
  color: var(--color-text-muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 40rem;
  margin-inline: auto;
}

/* --- Footer ------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.site-footer .container {
  padding-block: var(--space-3);
}

/* --- Content page layout -------------------------------------------------
   For account/dashboard-style pages (profile, order history, media
   library, etc.) - single column below 1000px, splits into two once
   there's room. Use directly; a page that's just a single column can
   skip .page-columns entirely and put cards straight inside .page. */

.page {
  max-width: 45rem;
  margin: 0 auto;
  padding: var(--space-2);
}

@media (min-width: 62.5rem) {
  .page {
    max-width: 90rem;
  }

  .page-columns {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .page-col-left,
  .page-col-right {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* --- Cards / sections --------------------------------------------------- */

.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.card h2 {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  font-size: 1.125rem;
  border-bottom: 1px solid var(--color-border);
}

.section {
  padding-block: var(--space-4);
}

.help-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.empty {
  color: var(--color-empty);
  font-style: italic;
}

.toggle-link {
  float: right;
  font-size: 0.8125rem;
  font-weight: normal;
}

.toggle-link:hover {
  text-decoration: underline;
}

/* --- Badges --------------------------------------------------------------
   Status pill - pick the semantic color for what it means, not for how
   it looks (e.g. "verified" is .badge-info, not "the blue one"). */

.badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger  { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-info    { background: var(--color-info-bg); color: var(--color-info-text); }
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-neutral-text); }

/* --- Buttons -------------------------------------------------------------
   .btn is the default (filled, maroon). Add .btn-outline for a lower-
   emphasis action next to a primary one (e.g. "copy" beside "save"), and
   .btn-sm for a compact/inline placement (e.g. inside a filter bar). */

.btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: white;
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}

/* --- Forms -------------------------------------------------------------- */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: 28rem;
  margin-inline: auto;
}

input[type="email"],
input[type="text"],
input[type="url"],
input[type="tel"],
select,
textarea,
.input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
}

.form-row input[type="email"],
.form-row input[type="text"] {
  width: auto;
  flex: 1 1 12rem;
}

input[type="email"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus,
.input:focus {
  outline: none;
  border-color: var(--color-primary);
}

textarea {
  min-height: 8.75rem;
  resize: vertical;
}

.field-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.field {
  flex: 1 1 100%;
}

@media (min-width: 37.5rem) {
  .field {
    flex: 1 1 calc(50% - var(--space-2));
  }
  .field-wide {
    flex: 1 1 100%;
  }
}

.field-label {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-label);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}

.field-value {
  font-size: 0.9375rem;
  word-wrap: break-word;
}

.avatar {
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--radius-sm);
}

.url-row {
  display: flex;
  gap: var(--space-1);
}

.url-row .input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
}

/* --- Filters -------------------------------------------------------------
   A bar of grouped controls above a list (type/role/date-range/sort,
   etc.) - pair with .list-row below for the results. */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.filter-group {
  flex: 1 1 12.5rem;
}

.filter-group-label {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-label);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.375rem;
  display: block;
}

.checkbox-list label {
  display: block;
  font-size: 0.875rem;
  padding: 3px 0;
  font-weight: normal;
}

/* --- List rows -------------------------------------------------------------
   One reusable row pattern for any "list of things" (registrations,
   orders, emails, file versions, etc.) - top-bordered, no border on the
   first row, so a run of them reads as one connected list inside a card. */

.list-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.list-row:first-child {
  border-top: none;
}

.list-row-title {
  font-size: 0.9375rem;
  font-weight: bold;
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
}

.list-row-meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  flex-basis: 100%;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
}

.pagination a {
  font-weight: bold;
  text-decoration: none;
}

.pagination a:hover {
  text-decoration: underline;
}

.pagination-disabled {
  color: var(--color-empty);
}

/* --- Media grid ----------------------------------------------------------
   A grid of image tiles (product/show photos, uploaded media, etc.). */

.media-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.media-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  text-decoration: none;
  color: inherit;
}

.media-thumb-box {
  width: 220px;
  height: 220px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-thumb-box-sm {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
}

.media-tile:hover .media-thumb-box {
  border-color: var(--color-primary);
}

.media-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.media-name {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-label);
  text-align: center;
  word-break: break-word;
  max-width: 220px;
}

/* Shown in place of a broken/missing <img> - see any page that renders
   user-uploaded images for the JS that swaps this in on error. */
.media-broken {
  padding: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-empty);
  font-style: italic;
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* --- Flash / toast messages ----------------------------------------------- */

.flash-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-bg);
  border-radius: var(--radius);
  padding: var(--space-2);
  max-width: 28rem;
  margin: var(--space-2) auto 0;
  text-align: center;
}

/* --- Layout breakpoint -------------------------------------------------- */

@media (min-width: 48rem) {
  .form-row {
    flex-wrap: nowrap;
  }
}