.profile {
  text-align: center;
  margin: 2rem auto;
  max-width: 350px; /* hela rutan får max denna bredd */
}

.profile img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.profile h3 {
  margin-top: 0.8rem;
  font-weight: 700;
  color: #a12da5;
  text-align: center;
}

.profile p {
  margin: 0.25rem 0 0 0;
  color: #444;
  font-size: 1.05rem;
  text-align: center;
}


/* Base layout helpers */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111; }
.header-image { width: 100%; height: auto; display: block; }

/* Top language bar already inline-styled in HTML */

/* Nav bar */
nav {
  background: #4c0073;
  color: #fff;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
nav a {
  color: #fff;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
}
nav a:hover { background: rgba(255,255,255,0.12); }

/* Main content area */
.section { max-width: 980px; margin: 0 auto; padding: 16px; }

/* Headings spacing */
h1, h2, h3 { margin: 1rem 0 .5rem; }
p { line-height: 1.6; }

/* Slideshow (works with the JS injected) */
.slideshow { max-width: 100%; position: relative; margin: 1rem auto; }
.slide { display: none; }
.fade { animation: fadeEffect 1.2s; }
@keyframes fadeEffect { from { opacity: .4 } to { opacity: 1 } }
.ss-controls { position: absolute; bottom: 8px; left: 8px; display: flex; gap: 6px; z-index: 5; }
.ss-btn {
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0; border-radius: 8px;
  padding: 6px 10px; font-size: 14px; cursor: pointer; user-select: none;
}
.ss-btn:hover { background: rgba(0,0,0,0.75); }
.ss-arrows {
  position: absolute; top: 50%; left: 0; right: 0;
  display: flex; justify-content: space-between;
  transform: translateY(-50%); z-index: 5; pointer-events: none;
}
.ss-arrow {
  pointer-events: all;
  background: rgba(0,0,0,0.4); color: #fff;
  border: 0; border-radius: 50%;
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; margin: 0 6px;
}
.ss-arrow:hover { background: rgba(0,0,0,0.65); }

/* Forms */
input, select, textarea, button { font: inherit; }
button { cursor: pointer; }
label { display: inline-block; margin: .5rem 0 .25rem; }

/* Footer */
footer { text-align: center; padding: 24px 12px; color: #666; font-size: 14px; }

/* === MissL.BBW – Global mörkt formulärtema === */
:root{
  --form-bg: #121214;      /* fält-bakgrund */
  --form-border: #7a3cff;  /* lila kant */
  --form-text: #ffffff;    /* vit text i inputs */
  --form-label: #e5d4ff;   /* ljus-lila rubriker/labels */
  --form-muted: #bda8ff;   /* svagare lila (placeholder/hjälptext) */
  --form-focus: #a78bfa;   /* ljusare fokuslila */
}

/* All text i formulär */
form, form *:where(label, legend, p, span, small){
  color: var(--form-label) !important;
}

/* Inputs, textareas och selects */
form input,
form textarea,
form select{
  background: var(--form-bg);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  border-radius: 8px;
}

/* Placeholderfärg */
form input::placeholder,
form textarea::placeholder{
  color: var(--form-muted);
}

/* Select-menyer och optionrader */
form select,
form select option{
  background: var(--form-bg);
  color: var(--form-text);
}

/* Fokus-stil (tangentbordsvänlig) */
form input:focus,
form textarea:focus,
form select:focus{
  outline: 2px solid var(--form-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 3px rgba(167,139,250,.15);
}

/* Radio/checkbox får lila ton */
form input[type="radio"],
form input[type="checkbox"]{
  accent-color: var(--form-border);
}

/* Datum-pickerns ikon på mörk bakgrund (Chromium/WebKit) */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2);
}

/* Små hjälprader under fält (om du använder .help eller small) */
form .help, form small{
  color: var(--form-muted) !important;
}

/* Orderrutor / sammanfattning om de skulle ärva svart text */
.order-summary, .order-box, .order-card{
  color: var(--form-text);
}
.order-summary small,
.order-box small{
  color: var(--form-muted);
}