[hidden] { display: none !important; }

/* Designtokens hämtade från tifosi.se (samma variabelnamn som på sajten,
   så att appen kan bäddas in i tifosi.se senare utan att ändra färgerna). */
:root {
  --color_bg-main: #ffffff;
  --color_bg-secondary: #172834;
  --color_bg-lightgray: #f7f7f7;
  --color_bg-gray: #eaeaea;
  --color_bg-blue: #17364d;
  --color_bg-waterdark: #577286;
  --color_bg-waterlight: #95aaba;
  --color_bg-cloudlight: #f0f4f7;
  --color_bg-clouddark: #dae6f2;
  --color_text-main: #232323;
  --color_text-secondary: #ffffff;
  --color_text-nightlight: #17364d;
  --color_text-lightgray: #666666;
  --color_text-darkgray: #595959;
  --color_text-stonedark: #999999;
  --color_text-link: #172834;
  --color_button-bg-primary: #17364d;
  --color_button-bg-primary--hover: #95aaba;
  --color_button-text-primary: #ffffff;
  --color_button-bg-secondary: #dae6f2;
  --color_button-text-secondary: #232323;
  --color_button-bg-tertiary: #ffffff;
  --color_button-bg-tertiary--hover: #f7f7f7;
  --color_button-text-tertiary: #052134;
  --color_button-border-tertiary: #999999;
  --color_input-bg: #f0f4f7;
  --color_error: #c94b4f;
  --color_error--light: #e7b1b2;
  --color_border: #dcdcdc;
  /* Klubbens temafärg sätts från shopen när en förening valts (som i klubbshoppen) */
  --shop-theme-background-color: #17364d;
  --shop-theme-on-bg-text-color: #ffffff;
  --lato-font: 'Lato', 'lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 4px;
  --radius-lg: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--lato-font);
  background: var(--color_bg-main);
  color: var(--color_text-main);
  font-size: 15px;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color_text-link); }

/* Topbar – som tifosi.se */
.topbar {
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--color_bg-secondary); color: var(--color_text-secondary);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { color: var(--color_text-secondary); display: block; }
.brand .logo { width: 100px; height: auto; display: block; }
/* Tjänstemenyn – samma som på tryckskaparen.tifosi.se */
.services { position: relative; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.3); }
.services button { background: none; border: 0; color: var(--color_bg-clouddark); font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.0625em; cursor: pointer; padding: 6px 0; }
.services button:hover, .services button[aria-expanded="true"] { color: #fff; }
.services ul { position: absolute; left: 6px; top: calc(100% + 8px); z-index: 50; list-style: none; margin: 0; padding: 6px 0; min-width: 200px; background: #fff; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); }
.services li a { display: block; padding: 10px 16px; color: var(--color_text-main); font-size: 14.4px; text-decoration: none; }
.services li a:hover { background: var(--color_bg-cloudlight); }
.services li a[aria-current="page"] { font-weight: 700; border-left: 3px solid #22c066; padding-left: 13px; }
.topbar-shop { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.topbar-shop img { height: 30px; width: auto; }

/* Layout */
.layout { display: grid; grid-template-columns: 400px 1fr; min-height: calc(100vh - 56px); }
.panel {
  background: var(--color_bg-main); border-right: 1px solid var(--color_bg-gray);
  height: calc(100vh - 56px); overflow-y: auto; position: sticky; top: 56px;
}
.step { padding: 22px 24px; border-bottom: 1px solid var(--color_bg-gray); }
.step h2 { font-size: 18px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.step h2 small { font-weight: 400; color: var(--color_text-lightgray); font-size: 13px; }
.num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--color_bg-blue); color: var(--color_text-secondary);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}

/* Formulär – fält som tifosi.se (ljusgrå platta, 4 px radie, ingen kantlinje) */
.field { margin-top: 16px; }
.field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--color_text-darkgray); }
.field small { color: var(--color_text-stonedark); font-weight: 400; text-transform: none; letter-spacing: 0; }
input[type=text], input[type=search], input[type=number], input[type=date], select, textarea {
  width: 100%; border: 1px solid transparent; border-radius: var(--radius); padding: 11px 14px; background: var(--color_bg-lightgray);
  outline: none; transition: border-color .15s, background .15s; font-size: 15px;
}
input:hover, select:hover, textarea:hover { background: var(--color_bg-cloudlight); }
input:focus, select:focus, textarea:focus { border-color: var(--color_bg-blue); background: var(--color_bg-main); }
input:disabled { color: var(--color_text-stonedark); }
.row { display: grid; grid-template-columns: 1fr 110px; gap: 8px; }
.hint { color: var(--color_text-lightgray); font-size: 13px; margin: 8px 0 0; }
.link { background: none; border: 0; color: var(--color_text-link); padding: 0; margin-top: 14px; cursor: pointer; font-size: 14px; font-weight: 700; text-decoration: underline; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; user-select: none; margin-top: 4px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { width: 38px; height: 22px; border-radius: 22px; background: var(--color_bg-waterlight); position: relative; transition: background .15s; flex: none; }
.switch span::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .15s; }
.switch input:checked + span { background: var(--color_bg-blue); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--color_bg-waterdark); outline-offset: 2px; }
.step .switch + .switch, .swatches + .switch { margin-top: 16px; }

/* Klubbsök */
.search { position: relative; }
.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; list-style: none; margin: 0; padding: 6px;
  background: var(--color_bg-main); border: 1px solid var(--color_border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(23, 40, 52, .12); max-height: 320px; overflow-y: auto;
}
.results li { padding: 9px 10px; border-radius: var(--radius); cursor: pointer; }
.results li:hover, .results li[aria-selected=true] { background: var(--color_bg-cloudlight); }
.results li small { color: var(--color_text-stonedark); margin-left: 6px; }

/* Klubbkort – som shopens sidhuvud i klubbens färg */
.club-card {
  margin-top: 14px; display: flex; gap: 14px; align-items: center; padding: 14px 16px;
  background: var(--shop-theme-background-color); color: var(--shop-theme-on-bg-text-color);
  border-radius: var(--radius-lg);
}
.club-card img { width: 52px; height: 52px; object-fit: contain; }
.club-card .eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.club-card b { display: block; font-size: 18px; line-height: 1.2; }
.club-card a { font-size: 13px; color: inherit; opacity: .9; }

/* Mallar */
.templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tpl {
  border: 2px solid transparent; border-radius: var(--radius); padding: 0 0 8px; background: var(--color_bg-main); cursor: pointer; text-align: left;
  transition: border-color .15s;
}
.tpl:hover { border-color: var(--color_bg-clouddark); }
.tpl[aria-pressed=true] { border-color: var(--color_bg-blue); }
.tpl canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 2px; background: var(--color_bg-gray); }
.tpl b { display: block; font-size: 15px; font-weight: 700; margin: 8px 6px 0; }
.tpl span { display: block; font-size: 12.5px; color: var(--color_text-lightgray); margin: 0 6px; }

/* Produkter – kategorier som shoppens meny */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  border: 0; background: var(--color_bg-lightgray); border-radius: var(--radius); padding: 7px 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; color: var(--color_text-main);
}
.chip:hover { background: var(--color_bg-cloudlight); }
.chip[aria-pressed=true] { background: var(--shop-theme-background-color); color: var(--shop-theme-on-bg-text-color); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-height: 440px; overflow-y: auto; padding: 2px; }
.prod {
  position: relative; border: 2px solid transparent; border-radius: var(--radius); background: var(--color_bg-main); padding: 4px 4px 8px; cursor: pointer; text-align: left;
}
.prod:hover { border-color: var(--color_bg-gray); }
.prod img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.prod span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.3; margin-top: 4px; min-height: 2.6em; }
.prod em { font-style: normal; font-size: 12px; color: var(--color_text-darkgray); }
.prod[aria-pressed=true] { border-color: var(--shop-theme-background-color); }
.prod[aria-pressed=true]::after {
  content: attr(data-order); position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--shop-theme-background-color); color: var(--shop-theme-on-bg-text-color); display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.prod:disabled { opacity: .4; cursor: not-allowed; }
.selected { margin-top: 16px; display: grid; gap: 8px; }
.sel { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center; }
.sel img { width: 42px; height: 42px; object-fit: contain; background: var(--color_bg-lightgray); border-radius: var(--radius); }
.sel input { padding: 8px 10px; font-size: 14px; }
.sel button { border: 0; background: none; cursor: pointer; color: var(--color_text-lightgray); font-size: 20px; padding: 4px 6px; }
.empty-products { color: var(--color_text-lightgray); font-size: 14px; padding: 16px; background: var(--color_bg-lightgray); border-radius: var(--radius); grid-column: 1 / -1; }

/* Färger */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--color_border); cursor: pointer; }
.sw[aria-pressed=true] { box-shadow: 0 0 0 2px var(--color_bg-blue); }
.sw-custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.sw-custom input { position: absolute; inset: -10px; opacity: 0; cursor: pointer; }

/* Format */
.formats { display: grid; gap: 8px; }
.fmt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color_bg-lightgray); border-radius: var(--radius); cursor: pointer; font-weight: 700; font-size: 14px; }
.fmt input { accent-color: var(--color_bg-blue); width: 16px; height: 16px; }
.fmt i { width: 22px; display: grid; place-items: center; }
.fmt i b { display: block; border: 2px solid var(--color_text-nightlight); border-radius: 2px; }
.fmt small { color: var(--color_text-lightgray); margin-left: auto; font-size: 12px; font-weight: 400; }

/* Förhandsvisning */
.stage { padding: 32px; min-width: 0; background: var(--color_bg-cloudlight); }
.empty { max-width: 540px; margin: 10vh auto; text-align: center; }
.empty h1 { font-size: 30px; line-height: 1.2; margin: 24px 0 12px; color: var(--color_text-nightlight); text-wrap: balance; }
.empty p { color: var(--color_text-darkgray); font-size: 16px; }
.empty-art { display: flex; justify-content: center; gap: 10px; align-items: flex-end; }
.empty-art span { display: block; background: var(--color_bg-main); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(23, 40, 52, .1); }
.empty-art span:nth-child(1) { width: 70px; height: 70px; }
.empty-art span:nth-child(2) { width: 70px; height: 88px; background: var(--color_bg-waterdark); }
.empty-art span:nth-child(3) { width: 56px; height: 100px; }
.loading { text-align: center; margin-top: 18vh; color: var(--color_text-darkgray); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--color_bg-clouddark); border-top-color: var(--color_bg-blue); border-radius: 50%; margin: 0 auto 14px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

.previews { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pv { background: var(--color_bg-main); border-radius: var(--radius); padding: 12px; box-shadow: 0 2px 10px rgba(23, 40, 52, .06); }
.pv canvas { display: block; height: auto; }
.pv.square canvas, .pv.portrait canvas { width: 340px; }
.pv.story canvas { width: 250px; }
.pv.landscape canvas { width: 460px; }
.pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pv-foot b { font-size: 15px; font-weight: 700; display: block; }
.pv-foot small { color: var(--color_text-lightgray); font-size: 12.5px; }

/* Knappar – samma tre nivåer som tifosi.se */
.btn { border: 1px solid transparent; border-radius: var(--radius); padding: 12px 24px; font-weight: 700; cursor: pointer; font-size: 14px; transition: background .15s, border-color .15s; }
.btn.primary { background: var(--color_button-bg-primary); border-color: var(--color_button-bg-primary); color: var(--color_button-text-primary); }
.btn.primary:hover { background: var(--color_button-bg-primary--hover); border-color: var(--color_button-bg-primary--hover); }
.btn.ghost { background: var(--color_button-bg-tertiary); border-color: var(--color_button-border-tertiary); color: var(--color_button-text-tertiary); }
.btn.ghost:hover { background: var(--color_button-bg-tertiary--hover); }
.btn.small { padding: 8px 14px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn:focus-visible, .chip:focus-visible, .tpl:focus-visible, .prod:focus-visible { outline: 2px solid var(--color_bg-waterdark); outline-offset: 2px; }

.export { margin-top: 28px; display: grid; grid-template-columns: 1fr 300px; gap: 24px; background: var(--color_bg-main); border-radius: var(--radius); padding: 20px; max-width: 1100px; }
.caption label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color_text-darkgray); display: block; margin-bottom: 6px; }
.caption textarea { resize: vertical; font-size: 14px; }
.caption .btn { margin-top: 10px; }
.export-actions { display: flex; flex-direction: column; justify-content: center; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--color_bg-secondary); color: var(--color_text-secondary); padding: 12px 18px; border-radius: var(--radius); opacity: 0; transition: all .2s; pointer-events: none; z-index: 50; font-weight: 700; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.error { background: var(--color_error--light); color: var(--color_text-main); border-left: 4px solid var(--color_error); padding: 12px 14px; border-radius: var(--radius); margin-top: 12px; font-size: 14px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .panel { position: static; height: auto; border-right: 0; }
  .stage { padding: 16px; }
  .previews { justify-content: center; }
  .pv.square canvas, .pv.portrait canvas { width: min(340px, 80vw); }
  .pv.landscape canvas { width: min(460px, 84vw); }
  .export { grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; }
  .topbar-shop span { display: none; }
}