/* =====================================================
   BASE – TOKENS & GLOBALA REGLER
   ===================================================== */

:root {
  --sj-font: "Poppins", sans-serif;

  --sj-text: #1f2937;
  --sj-heading: #0f172a;

  --sj-blue: #2c5aa0;
  --sj-blue-hover: #152235;

  --sj-orange: #f97316;
  --sj-orange-hover: #6F3106;

  --sj-border: #cbd5e1;

  --sj-radius-sm: 4px;
  --sj-radius-md: 10px;
  --sj-radius-lg: 14px;

  --sj-space-1: 4px;
  --sj-space-2: 8px;
  --sj-space-3: 12px;
  --sj-space-4: 16px;
  --sj-space-5: 20px;
  --sj-space-6: 28px;

  --sj-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --sj-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sj-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.25);
}

body {
  font-family: var(--sj-font);
  color: var(--sj-text);
}

/* =====================================================
   WOOCOMMERCE – LOGIN / REGISTER / LOST PASSWORD
   (Blocksy/Woo-safe, utan konflikter)
   ===================================================== */

/* --- Layout container (samma bredd för login & reset) --- */
body.woocommerce-account #customer_login,
body.woocommerce-lost-password form.woocommerce-ResetPassword {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;

  /* om parent råkar vara grid */
  justify-self: center;
}

/* --- VIKTIGT: ta bort Woo/Blocksy “2-kolumn divider” på login --- */
/* Detta är roten till din tomma högersida + streckad linje */
body.woocommerce-account .ct-woo-unauthorized #customer_login.col2-set> :first-child {
  padding-inline-end: 0 !important;
  border-inline-end: 0 !important;
  margin-inline-end: 0 !important;
}

/* Säkerställ att vi inte försöker göra två kolumner */
body.woocommerce-account #customer_login .u-columns {
  display: block;
}

body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
  width: 100%;
  max-width: 100%;
  float: none;
}

/* --- Cards (login/register/reset) --- */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-lost-password form.woocommerce-ResetPassword {
  background: #fff;
  padding: 32px;
  box-shadow: var(--sj-shadow-md);
  border-radius: var(--sj-radius-lg);
}

/* Login: döljer extra rubrik (du har redan H1-banner) */
body.woocommerce-account .woocommerce-form-login h2 {
  display: none;
}

/* Om register-formen också visas på samma sida, ge luft ovanför */
body.woocommerce-account #customer_login .u-column2 {
  margin-top: 24px;
}

/* --- Knappar: border-radius 0, fullbredd, konsekvent höjd --- */
body.woocommerce-account .woocommerce-form-login button.button,
body.woocommerce-account .woocommerce-form-register button.button,
body.woocommerce-lost-password form.woocommerce-ResetPassword button.button {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 0;
  font-size: 16px;
}

/* --- Länkar (login + reset) --- */
body.woocommerce-account .woocommerce-form-login a,
body.woocommerce-lost-password .back-to-login a {
  color: var(--sj-orange);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}

body.woocommerce-account .woocommerce-form-login a:hover,
body.woocommerce-lost-password .back-to-login a:hover {
  color: var(--sj-orange-hover);
  text-decoration: underline;
}

/* “Glömt lösenord” + “Registrera konto” ska se likadana ut */
body.woocommerce-account .woocommerce-form-login .lost_password {
  margin: 12px 0 4px;
}

body.woocommerce-account .woocommerce-form-login .lost_password a,
body.woocommerce-account .woocommerce-form-login .register-toggle {
  display: inline-block;
  margin-top: 10px;
  padding: 0;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;

  color: var(--sj-orange);
  background: none;
  border: 0;
  box-shadow: none;
  text-decoration: none;
}

body.woocommerce-account .woocommerce-form-login .lost_password a:hover,
body.woocommerce-account .woocommerce-form-login .register-toggle:hover {
  color: var(--sj-orange-hover);
  text-decoration: underline;
}

/* Blocksy kan lägga ikoner/pilar på register-toggle */
body.woocommerce-account .woocommerce-form-login .register-toggle::before,
body.woocommerce-account .woocommerce-form-login .register-toggle::after {
  content: none;
}

/* Register: lugnare GDPR-text */
body.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text {
  font-size: 13px;
  line-height: 1.5;
  margin: 16px 0 24px;
  color: #555;
}

/* Reset: spacing för “Tillbaka till logga in” */
body.woocommerce-lost-password .back-to-login {
  margin-top: 15px;
}

/* Show password icon – stabilt i Blocksy/Woo */
.woocommerce .show-password-input {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  background: none;
  border: none;
  box-shadow: none;
}

body.woocommerce-account .show-password-input,
body.woocommerce-account .show-password-input::before {
  color: var(--sj-orange);
}

body.woocommerce-account .show-password-input:hover,
body.woocommerce-account .show-password-input:hover::before {
  color: var(--sj-orange-hover);
}

/* =====================================================
   FIX – Login-kortet ska få samma bredd som Reset (720px)
   Blocksy/Woo låser ofta u-column1 till max-width: 420px
   ===================================================== */

body.woocommerce-account .ct-woo-unauthorized #customer_login {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Viktigaste raden: ta bort 420px-clampen */
body.woocommerce-account .ct-woo-unauthorized #customer_login .u-column1 {
  max-width: none !important;
  width: 100% !important;
  float: none !important;
}

/* Om kolumn 2 är dold men ändå påverkar layouten */
body.woocommerce-account .ct-woo-unauthorized #customer_login .u-column2 {
  max-width: none !important;
  width: 100% !important;
  float: none !important;
}

/* Ta bort dashed divider + padding från Woo tvåkolumn-layout */
body.woocommerce-account .ct-woo-unauthorized #customer_login.col2-set> :first-child {
  padding-inline-end: 0 !important;
  border-inline-end: 0 !important;
  margin-inline-end: 0 !important;
}

/* Gör så att själva “kortet” fyller hela containern */
body.woocommerce-account .ct-woo-unauthorized .woocommerce-form-login {
  width: 100% !important;
  max-width: 720px;
  margin: 0 auto;
}

/* Gör “Registrera konto” under kortet till länk-stil (om den är h2/p-tag) */
body.woocommerce-account .ct-woo-unauthorized #customer_login .u-column2 h2,
body.woocommerce-account .ct-woo-unauthorized #customer_login .u-column2 {
  font-size: 14px;
  font-weight: 500;
  color: var(--sj-orange);
}

body.woocommerce-account .ct-woo-unauthorized #customer_login .u-column2 a {
  color: var(--sj-orange);
  text-decoration: none;
}

body.woocommerce-account .ct-woo-unauthorized #customer_login .u-column2 a:hover {
  color: var(--sj-orange-hover);
  text-decoration: underline;
}

/* =====================================================
   FIX – Blocksy/Woo: col2-set begränsar kolumnbredd
   Gör login till ett single-column block (720px) på riktigt
   ===================================================== */

/* Själva wrappern som Woo använder för 2-kolumn */
body.woocommerce-account .ct-woo-unauthorized #customer_login.u-columns.col2-set {
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 16px;
}

/* Tar bort all “2-kolumn divider/padding” */
body.woocommerce-account .ct-woo-unauthorized #customer_login.u-columns.col2-set> :first-child {
  border-inline-end: 0 !important;
  padding-inline-end: 0 !important;
  margin-inline-end: 0 !important;
}

/* Se till att kolumnen INTE får en egen smal bredd */
body.woocommerce-account .ct-woo-unauthorized #customer_login.u-columns.col2-set>.u-column1 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

/* Och att kortet fyller kolumnen */
body.woocommerce-account .ct-woo-unauthorized #customer_login .woocommerce-form-login {
  width: 100% !important;
  max-width: 100% !important;
}



/* Ny länk inne i kortet */
body.woocommerce-account .ct-woo-unauthorized .woocommerce-form-login .sj-register-link{
  margin: 10px 0 0;
}

body.woocommerce-account .ct-woo-unauthorized .woocommerce-form-login .sj-register-link a{
  font-size: 14px;
  font-weight: 500;
  color: var(--sj-orange);
  text-decoration: none;
}

body.woocommerce-account .ct-woo-unauthorized .woocommerce-form-login .sj-register-link a:hover{
  color: var(--sj-orange-hover);
  text-decoration: underline;
}


/* Ny toggle inne i login-kortet: se ut som länken "Glömt ditt lösenord?" */
body.woocommerce-account .ct-woo-unauthorized .sj-register-inside-login{
  margin: 10px 0 0;
}

body.woocommerce-account .ct-woo-unauthorized .sj-register-inside-login .register-toggle{
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;

  font-size: 14px;
  font-weight: 500;
  color: var(--sj-orange);
  cursor: pointer;
  text-decoration: none;
}

body.woocommerce-account .ct-woo-unauthorized .sj-register-inside-login .register-toggle:hover{
  color: var(--sj-orange-hover);
  text-decoration: underline;
}


/* Göm original (gröna) toggle-blocket visuellt men låt det finnas kvar för JS */
body.woocommerce-account .ct-woo-unauthorized #customer_login .u-column2{
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Ny länk inne i kortet: samma stil som "Glömt ditt lösenord?" */
body.woocommerce-account .ct-woo-unauthorized .sj-register-inside-login{
  margin: 10px 0 0;
}

body.woocommerce-account .ct-woo-unauthorized .sj-register-inside-login .sj-register-trigger{
  font-size: 14px;
  font-weight: 500;
  color: var(--sj-orange);
  text-decoration: none;
}

body.woocommerce-account .ct-woo-unauthorized .sj-register-inside-login .sj-register-trigger:hover{
  color: var(--sj-orange-hover);
  text-decoration: underline;
}
/* My Account: gör layouten som "Alternativ B" */
body.woocommerce-account .ct-woo-unauthorized #customer_login{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Stacka kolumnerna */
body.woocommerce-account .ct-woo-unauthorized #customer_login .u-columns{
  display: block;
}

/* Liten luft mellan login och register */
body.woocommerce-account .ct-woo-unauthorized #customer_login .u-column2{
  margin-top: 24px;
}

/* Länken inne i login-kortet */
body.woocommerce-account .ct-woo-unauthorized .sj-register-inside-login{
  margin-top: 10px;
}

body.woocommerce-account .ct-woo-unauthorized .sj-register-trigger{
  font-size: 14px;
  font-weight: 500;
  color: var(--sj-orange);
  text-decoration: none;
}

body.woocommerce-account .ct-woo-unauthorized .sj-register-trigger:hover{
  color: var(--sj-orange-hover);
  text-decoration: underline;
}

/* Registrera-länk inne i login-kortet */
.woocommerce-form-login .sj-register-trigger {
  display: inline-block;
  margin-top: 6px;

  font-size: 14px;
  font-weight: 500;
  color: var(--sj-orange);
  text-decoration: none;
}

.woocommerce-form-login .sj-register-trigger:hover {
  color: var(--sj-orange-hover);
  text-decoration: underline;
}

/* När vi togglar på en klass → visa */
body.woocommerce-account .ct-woo-unauthorized #customer_login.is-register-open .u-column2 {
  display: block;
}

/* Default: visa login, dölj register */
body.woocommerce-account #customer_login .u-column2 {
  display: none;
}

/* När register är öppet */
body.woocommerce-account #customer_login.is-register-open .u-column1 { display: none; }
body.woocommerce-account #customer_login.is-register-open .u-column2 { display: block; }

/* Knapparna ska se ut som länkar */
body.woocommerce-account .sj-register-trigger{
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 10px;

  font-size: 14px;
  font-weight: 500;
  color: var(--sj-orange);
  cursor: pointer;
}

body.woocommerce-account .sj-register-trigger:hover {
  color: var(--sj-orange-hover);
  text-decoration: underline;
}

/* Döljer custom-knappen "Logga in istället" */
body.woocommerce-account #customer_login .sj-login-trigger {
  display: none !important;
}

/* döljer H2" */
body.woocommerce-account #customer_login .sj-login-trigger h2 {
  display: none !important;
}

body.woocommerce-account #customer_login .sj-login-trigger::after {
  content: "inga byssor";
}

/* =====================================================
   PATCH – Toggle register (vinner över gamla regler)
   Lägg denna LÄNGST NER i base.css
   ===================================================== */

/* Default: visa login, dölj register */
body.woocommerce-account #customer_login .u-column2 {
  display: none !important;
}

/* Öppet läge: dölj login, visa register */
body.woocommerce-account #customer_login.is-register-open .u-column1 {
  display: none !important;
}

body.woocommerce-account #customer_login.is-register-open .u-column2 {
  display: block !important;

  /* Om du tidigare gömt den offscreen */
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Ibland är själva register-formen gömd */
body.woocommerce-account #customer_login.is-register-open form.woocommerce-form-register {
  display: block !important;
}

/*döljer captcha-badge*/
.grecaptcha-badge {
  visibility: hidden;
}