/* ══════════════════════════════════════════════════════════════
   PROMPTGENERATORN — LJUS TEMA (overrides)
   ------------------------------------------------------------
   Denna fil laddas ENDAST på /promptgeneratorn-light, som en andra
   <link> EFTER promptgenerator.css. Den ska bara innehålla visuella
   overrides för det ljusa temat (färger, bakgrunder, borders,
   skuggor) — aldrig layout/spacing/animation, det delas med
   mörka versionen via promptgenerator.css.

   Rör ALDRIG promptgenerator.css för ljus-tema-ändringar — då
   påverkas även /promptgeneratorn (mörk, live). Allt ljus-specifikt
   hör hemma här.

   TVÅ sätt att träffa ljus-sidan säkert, använd båda:
   1) Designer-element som bara ska styla EN specifik plats
      (t.ex. steg-kortets yta): combo-klasserna du satt i Designer
      (.light-theme, .is-light, .color-theme-light).
   2) Allt som gäller HELA ljus-sidan likadant — pills, textareas,
      JS-genererade widgets (sök-dropdown, Senaste prompter) —
      scopas mot html.pg-light-page. Den klassen sätts av en liten
      rad i LJUS-sidans EGEN head-kod (inte i den delade JS-filen),
      så den kan aldrig dyka upp på /promptgeneratorn. Detta slipper
      du behöva tagga varje enskild pill-instans manuellt i Designer.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   BAS — formulärets yta
══════════════════════════════════════════ */
.light-theme {
  background: #ffffff;
  color     : #1a1f29;
}

/* ══════════════════════════════════════════
   STEG-KORT (.step-inner.is-light)
   OBS: ingen background här längre — den styrs i Webflow Designer
   (satt till ett transparent-vitt, t.ex. rgba(255,255,255, x)).
   Denna fil satte tidigare en solid #ffffff som körde över det
   Designer-värdet; borttaget på begäran så färgen bara kontrolleras
   på ett ställe (Designer), inte två. Border/skugga är fortsatt
   CSS-styrda eftersom de inte var det som rapporterades fel.
══════════════════════════════════════════ */
.step-inner.is-light {
  border    : 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 4px 20px rgba(17, 24, 39, 0.06);
}
.prev-button.is-light {
  background: transparent;
  border    : 1px solid rgba(17, 24, 39, 0.14);
  color     : #1a1f29;
}

/* ══════════════════════════════════════════
   ÖVRIGT (.selection-content.color-theme-light)
══════════════════════════════════════════ */
.selection-content.color-theme-light {
  color: #1a1f29;
}

/* ══════════════════════════════════════════════════════════════
   PILLS — alla radio-knappar (Typ av uppgift, Roll, Ton,
   Output-format, Stil, Format, Ljus, Komposition osv).
   Gäller HELA ljus-sidan, oavsett om just den pillen har någon
   combo-klass satt i Designer — annars hade du behövt tagga
   varenda pill-instans (80+ stycken) för hand.

   Default (ovald): vit yta med en solid stroke i caribbean green
   (#00c9a7).
   Vald (.w--redirected-checked): solid caribbean green-bakgrund,
   samma färg som stroken.

   Bytt bort från den tidigare gradient-tekniken (linear-gradient
   #00c9a7 → #c9e265 via ett ::before-pseudoelement, som fanns för
   att undvika en sömn-artefakt i de rundade ändarna på piller med
   en äkta CSS border). En solid färg har inte det problemet —
   en vanlig border räcker, inget pseudoelement behövs längre.

   !important behövs eftersom Webflows egna komponentstilar för
   .checkbox2_button/.w--redirected-checked annars vinner —
   samma knep som redan används på .pg-search-input nedan.
   ══════════════════════════════════════════════════════════════ */
html.pg-light-page .checkbox2_button {
  background: #ffffff !important;
  border    : 1.5px solid #00c9a7 !important;
}
html.pg-light-page .checkbox2_button.w--redirected-checked,
html.pg-light-page .checkbox2_field:has(input[type="radio"]:checked) .checkbox2_button {
  background: #00c9a7 !important;
  border    : 1.5px solid #00c9a7 !important;
}

/* Wrappern runt varje pill (.button-gradient, Designer-klass) har en
   egen linear-gradient(135deg, #ffd240, #01a085) + 2px padding — det
   var den som syntes som gradient-ram runt pillsen. Neutraliseras här
   (bara wrappers som innehåller en pill, inte andra .button-gradient-
   knappar). Paddingen lämnas orörd så pill-storleken inte ändras.
   Andra :has-selektorn ovan behövs för att slå sidans inbäddade
   style-overrides-embed, som sätter vald pill till
   background-color: transparent !important med högre specificitet. */
html.pg-light-page .button-gradient:has(> .checkbox2_field) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Webflows standard-fokusstil (.w--redirected-focus → blå box-shadow
   #3898ec) sätts på pillen vid VARJE klick och syntes som en blå glöd
   runt vald pill. Bort med den. Ersätts av en diskret grön ring som
   bara visas vid tangentbordsnavigering (:focus-visible), så Tab-
   navigering fortfarande syns. */
html.pg-light-page .checkbox2_button.w--redirected-focus {
  box-shadow: none !important;
}
html.pg-light-page .checkbox2_field:has(input[type="radio"]:focus-visible) .checkbox2_button {
  box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.30) !important;
}
html.pg-light-page .radio2_label {
  color: #1a1f29 !important;
}
html.pg-light-page .checkbox2_button.w--redirected-checked ~ .radio2_label {
  color      : #0d2b24 !important;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   TEXTAREAS — brief/bild/video/kod-fälten (.form_input.is-text-area)
   ska se ut som sökrutan (.pg-search-input): vit yta, tydlig
   border, samma radie. Höjd/padding rörs INTE — bara utseendet.
   ══════════════════════════════════════════════════════════════ */
html.pg-light-page .form_input.is-text-area {
  background   : #ffffff !important;
  border       : 1.5px solid rgba(17, 24, 39, 0.14) !important;
  border-radius: 10px !important;
  color        : #1a1f29 !important;
}
html.pg-light-page .form_input.is-text-area:focus {
  border-color: rgba(0, 201, 167, 0.65) !important;
  background  : #ffffff !important;
  box-shadow  : 0 0 0 3px rgba(0, 201, 167, 0.12) !important;
}
html.pg-light-page .form_input.is-text-area::placeholder {
  color: rgba(26, 31, 41, 0.35);
}

/* ══════════════════════════════════════════════════════════════
   GENERISK TEXT-INPUT/TEXTAREA-BAS (.form-step textarea /
   .form-step input[type="text"]) — detta är samma bas-regel som
   promptgenerator.css redan har för mörka temat (vit text på
   nästan-transparent mörk bakgrund). Den träffar ALLT textinnehåll
   i formuläret som inte redan har en egen, snävare klass — bl.a.
   Snabbfält-raderna (.pg-row-label/.pg-row-value), "Mottagare/
   målgrupp" och "Klistra in material". Utan den här overriden
   ärver de mörkbakgrundens färger (nästan osynlig ljusgrå border,
   nästan osynlig placeholder) rakt av på vit botten — därför var
   Snabbfält-fälten "helt vita". Samma vit/border/fokus-behandling
   som sökrutan och de större textareas ovan, för enhetlighet.
   ══════════════════════════════════════════════════════════════ */
html.pg-light-page .form-step textarea,
html.pg-light-page .form-step input[type="text"] {
  background: #ffffff !important;
  border: 1.5px solid rgba(17, 24, 39, 0.14) !important;
  color: #1a1f29 !important;
}
html.pg-light-page .form-step textarea:hover,
html.pg-light-page .form-step input[type="text"]:hover {
  border-color: rgba(17, 24, 39, 0.22) !important;
  background: #ffffff !important;
}
html.pg-light-page .form-step textarea:focus,
html.pg-light-page .form-step input[type="text"]:focus {
  border-color: rgba(0, 201, 167, 0.65) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.12) !important;
}
html.pg-light-page .form-step textarea::placeholder,
html.pg-light-page .form-step input[type="text"]::placeholder {
  color: rgba(26, 31, 41, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   EXPANDERA-LIGHTBOXEN (.pg-brief-modal) — samma JS-byggda modal
   som används för brief/bild/video/kod-fälten. Mörk bakgrundsfärg
   (rgb(8,24,47)) hårdkodad i promptgenerator.css, går bara att
   träffa via klassnamn. Själva scrimmet (halvtransparent svart
   bakom modalen) lämnas orört — fungerar fint i båda teman.
   ══════════════════════════════════════════════════════════════ */
html.pg-light-page .pg-brief-modal-inner {
  background: #ffffff;
  border    : 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 32px 100px rgba(17, 24, 39, 0.25);
}
html.pg-light-page .pg-brief-modal-header {
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}
html.pg-light-page .pg-brief-modal-title {
  color: #1a1f29;
}
html.pg-light-page .pg-brief-modal-close {
  color: rgba(26, 31, 41, 0.45);
}
html.pg-light-page .pg-brief-modal-close:hover {
  background: rgba(17, 24, 39, 0.06);
  color     : #1a1f29;
}
html.pg-light-page .pg-brief-modal-ta {
  color     : #1a1f29;
  background: rgba(0, 201, 167, 0.03);
}
html.pg-light-page .pg-brief-modal-ta:focus {
  background: rgba(0, 201, 167, 0.05);
}
html.pg-light-page .pg-brief-modal-ta::placeholder {
  color: rgba(26, 31, 41, 0.3);
}
html.pg-light-page .pg-brief-modal-footer {
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}
html.pg-light-page .pg-brief-modal-hint {
  color: rgba(26, 31, 41, 0.4);
}

/* ══════════════════════════════════════════════════════════════
   JS-GENERERADE WIDGETS — scopat mot html.pg-light-page
   (sök-dropdown, Senaste prompter). Byggs av promptgenerator.js
   med hårdkodade mörka färger (#111827-bakgrund, vit text) —
   dessa går inte att träffa via Designer-combo-klasser, bara via
   CSS riktad mot deras klassnamn.
   ══════════════════════════════════════════════════════════════ */

/* -- Sökfält (Kort B, "Utgå från en mall") -- */
html.pg-light-page .pg-search-label {
  color: rgba(26, 31, 41, 0.6);
}
html.pg-light-page .pg-search-input {
  background: #ffffff !important;
  border    : 1.5px solid rgba(17, 24, 39, 0.14) !important;
  color     : #1a1f29 !important;
}
html.pg-light-page .pg-search-input:focus {
  background  : #ffffff !important;
  border-color: rgba(0, 201, 167, 0.65) !important;
}
html.pg-light-page .pg-search-input::placeholder {
  color: rgba(26, 31, 41, 0.35);
}
html.pg-light-page .pg-search-icon {
  color: rgba(26, 31, 41, 0.4);
}
html.pg-light-page .pg-search-clear {
  color: rgba(26, 31, 41, 0.4);
}
html.pg-light-page .pg-search-clear:hover {
  color     : rgba(26, 31, 41, 0.8);
  background: rgba(17, 24, 39, 0.06);
}

/* -- Sök-dropdown -- */
html.pg-light-page .pg-search-dropdown {
  background: #ffffff;
  border    : 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.12);
}
html.pg-light-page .pg-search-item-name {
  color: #1a1f29;
}
html.pg-light-page .pg-search-item-desc {
  color: rgba(26, 31, 41, 0.55);
}
/* .pg-search-item-cat och hover-färgen (teal) funkar redan fint mot vitt,
   lämnade orörda avsiktligt. */

/* -- Banner ("Mall vald") -- */
html.pg-light-page .pg-search-banner {
  color: #1a1f29;
}
html.pg-light-page .pg-search-banner strong {
  color: #1a1f29;
}

/* -- Senaste prompter -- */
html.pg-light-page #pg-recent-wrap {
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}
html.pg-light-page .pg-recent-title {
  color: rgba(26, 31, 41, 0.5);
}
html.pg-light-page .pg-recent-clear {
  color: rgba(26, 31, 41, 0.35);
}
html.pg-light-page .pg-recent-clear:hover {
  color: rgba(26, 31, 41, 0.75);
}
html.pg-light-page .pg-recent-item {
  background: #f5f6fa;
  border    : 1px solid rgba(17, 24, 39, 0.08);
}
html.pg-light-page .pg-recent-item:hover {
  background  : #eef0f5;
  border-color: rgba(17, 24, 39, 0.12);
}
html.pg-light-page .pg-recent-preview {
  color: rgba(26, 31, 41, 0.75);
}
html.pg-light-page .pg-recent-time {
  color: rgba(26, 31, 41, 0.4);
}
html.pg-light-page .pg-recent-copy {
  background: #ffffff;
  border    : 1px solid rgba(17, 24, 39, 0.10);
  color     : rgba(26, 31, 41, 0.65);
}
html.pg-light-page .pg-recent-copy:hover {
  background  : rgba(0, 201, 167, 0.10);
  border-color: rgba(0, 201, 167, 0.3);
  color       : #00a98c;
}

/* ══════════════════════════════════════════════════════════════
   PREVIEW-KNAPPARNA (Kopiera prompt / Skapa ny)
   "Kopiera prompt" radbröts på två rader när preview-kolumnen är smal
   (≈ 992–1440 px). Ingen radbrytning i etiketten, och knapparna ligger
   bredvid varandra när var och en får ≥ 150 px — annars under varandra
   i full bredd.
   ══════════════════════════════════════════════════════════════ */
html.pg-light-page .pg-preview-actions {
  flex-direction: row !important;
  flex-wrap     : wrap !important;
}
html.pg-light-page .pg-preview-actions > * {
  flex     : 1 1 150px !important;
  min-width: 0;
}
html.pg-light-page #copy-prompt-preview #copy-text {
  white-space: nowrap;
}