/* ====================================================================
   NORLI CONTACT FORM — norli-contact-form.css
   Version: 2.0.1
   
   Changelog:
   - Merged v1.5.2 + v1.5.3 into single clean source of truth
   - Removed all duplicated clear-button rules
   - Fixed SVG stroke: explicit color (no more currentColor inherit issue)
   - Safari/Chrome: clear button always visible via :not(:placeholder-shown)
   - Cleaned up redundant !important, dead selectors, unused variables
   - Consolidated responsive blocks
   - v2.0.1: Fixed active text color to #4B5563
   ==================================================================== */

/* ── Font ──────────────────────────────────────────────────────────── */
.norli-form-container,
.norli-form-container *:not(.norli-form-submit):not(.norli-form-submit *):not(.norli-form-gdpr a) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif !important;
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}

/* GDPR-länk — alltid lila, override av * */
.norli-form-container .norli-form-gdpr a {
  color: #7559C0 !important;
  -webkit-text-fill-color: #7559C0 !important;
  font-weight: 400 !important;
  font-size: inherit !important;
  text-decoration: none !important;
}

/* ── Design tokens ─────────────────────────────────────────────────── */
.norli-form-container {
  width: 100%;
  max-width: 100%;

  --norli-radius:       24px;
  --norli-h:            56px;
  --norli-text:         #4B5563;
  --norli-placeholder:  #9CA3AF;

  --norli-shadow:       0 24px 70px rgba(17, 23, 34, .16),
                        0 8px  22px rgba(17, 23, 34, .10);
  --norli-shadow-hover: 0 34px 95px rgba(17, 23, 34, .18),
                        0 10px 26px rgba(17, 23, 34, .12);

  --norli-focus:        rgba(139, 92, 246, 0.50);

  --norli-glass-a:      rgba(255, 255, 255, 1);
  --norli-glass-b:      rgba(252, 252, 253, 1);
  --norli-glass-border: rgba(31,  41,  55,  0.12);
  --norli-inner-glow:   rgba(255, 255, 255, 0.60);

  --norli-error-color:  #B91C1C;
  --norli-error-text:   rgba(185, 28, 28, 0.75);

  --norli-clear-color:  rgba(107, 114, 128, 0.78);
  --norli-clear-hover:  rgba(31,  41,  55,  0.92);
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.norli-contact-form {
  display: grid;
  grid-template-columns: 48% 48%;
  gap: 16px 4%;
  width: 100%;
}

.norli-form-left,
.norli-form-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Stacked variant */
.norli-layout-stacked .norli-contact-form {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.norli-layout-stacked .norli-form-left,
.norli-layout-stacked .norli-form-right {
  display: contents;
}

.norli-layout-stacked .norli-form-textarea {
  height:     150px !important;
  min-height: 150px !important;
}

/* ── Field wrapper ───────────────────────────────────────────────────── */
.norli-form-group {
  position:           relative;
  display:            flex;
  flex-direction:     column;
  border-radius:      var(--norli-radius) !important;
  background:         transparent !important;
  border:             0 !important;
  box-shadow:         none !important;
  transform:          translateZ(0);
  backface-visibility: hidden;
  isolation:          isolate;
  margin-bottom:      0;
  transition:         transform 200ms ease, margin-bottom 200ms ease !important;
}

/* Glass card via pseudo-element (keeps inputs above it via z-index) */
.norli-form-group::before {
  content:        "";
  position:       absolute;
  inset:          0;
  border-radius:  inherit;
  pointer-events: none;
  z-index:        0;
  background:     linear-gradient(180deg, var(--norli-glass-a) 0%, var(--norli-glass-b) 100%) !important;
  border:         1.5px solid var(--norli-glass-border) !important;
  box-shadow:     var(--norli-shadow), inset 0 1px 0 var(--norli-inner-glow) !important;
  transition:     box-shadow 200ms ease, border-color 200ms ease !important;
}

@media (hover: hover) {
  .norli-form-group:hover {
    transform: translateY(-4px);
  }

  .norli-form-group:hover::before {
    box-shadow:   var(--norli-shadow-hover), inset 0 1px 0 var(--norli-inner-glow) !important;
    border-color: rgba(139, 92, 246, .16) !important;
  }
}

.norli-form-group:focus-within::before {
  border-color: var(--norli-focus) !important;
  box-shadow:   0 12px 32px rgba(17, 23, 34, .12),
                0 4px  12px rgba(17, 23, 34, .06),
                inset 0 1px 0 rgba(255, 255, 255, .80),
                0 0 0 3px rgba(139, 92, 246, .10) !important;
}

/* Error state */
.norli-form-group.is-error.has-content {
  margin-bottom: 12px;
}

.norli-form-group.is-error::before {
  border-color: var(--norli-error-color) !important;
  border-width: 2px !important;
  box-shadow:   0 12px 32px rgba(17, 23, 34, .12),
                0 4px  12px rgba(17, 23, 34, .06),
                inset 0 1px 0 rgba(255, 255, 255, .80),
                0 0 0 3px rgba(185, 28, 28, .12) !important;
}

.norli-form-group.is-error .norli-form-input,
.norli-form-group.is-error .norli-form-textarea {
  color: var(--norli-error-color) !important;
  -webkit-text-fill-color: var(--norli-error-color) !important;
}

.norli-form-group.is-error .norli-form-input::placeholder,
.norli-form-group.is-error .norli-form-textarea::placeholder {
  color:   var(--norli-error-text) !important;
  opacity: 1 !important;
}

/* ── Inputs ──────────────────────────────────────────────────────────── */
.norli-form-input,
.norli-form-textarea {
  position:          relative;
  z-index:           1;
  width:             100%;
  border:            0 !important;
  background:        transparent !important;
  outline:           none !important;
  box-shadow:        none !important;
  font-size:         16px;
  color:             #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
  border-radius:     var(--norli-radius) !important;
  transition:        none !important;
  -webkit-appearance: none !important;
  appearance:        none !important;
  background-image:  none !important;
}

/* Force active/typed text color (does NOT affect placeholder) */
.norli-form-container .norli-form-input:focus,
.norli-form-container .norli-form-textarea:focus,
.norli-form-container .norli-form-input:not(:placeholder-shown),
.norli-form-container .norli-form-textarea:not(:placeholder-shown) {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
  caret-color: #4B5563 !important;
}

/* Nuclear override: ensure input value color always wins (still does NOT affect placeholder) */
html body .norli-form-container input.norli-form-input,
html body .norli-form-container textarea.norli-form-textarea {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
  caret-color: #4B5563 !important;
}

.norli-form-input {
  height:      var(--norli-h) !important;
  min-height:  var(--norli-h) !important;
  line-height: var(--norli-h) !important;
  padding:     0 18px !important;
}

/* Extra right-padding when clear button is active */
.norli-form-input.has-clear {
  padding-right: 48px !important;
}

.norli-form-textarea {
  height:      122px !important;
  min-height:  122px !important;
  max-height:  300px !important;
  padding:     14px 18px !important;
  resize:      vertical;
  line-height: 1.5;
  flex:        1;
}

.norli-form-input::placeholder,
.norli-form-textarea::placeholder {
  color:                   var(--norli-placeholder) !important;
  -webkit-text-fill-color: var(--norli-placeholder) !important;
  opacity: 1 !important;
}

/* ── Clear button ────────────────────────────────────────────────────── */
.norli-form-container .norli-clear-btn {
  display:        none !important;
  position:       absolute !important;
  right:          16px !important;
  top:            50% !important;
  transform:      translateY(-50%) !important;

  align-items:    center !important;
  justify-content: center !important;

  width:          20px !important;
  height:         20px !important;
  min-width:      20px !important;
  min-height:     20px !important;
  padding:        0 !important;

  background:     transparent !important;
  border:         none !important;
  border-radius:  0 !important;
  outline:        none !important;
  box-shadow:     none !important;
  cursor:         pointer;

  color:          rgba(107, 114, 128, 0.70) !important;
  -webkit-text-fill-color: initial !important;

  z-index:        9999 !important;
  -webkit-tap-highlight-color: transparent;
}

.norli-form-container .norli-clear-btn svg {
  width:          18px !important;
  height:         18px !important;
  display:        block;
  pointer-events: none;
}

.norli-form-container .norli-clear-btn svg path {
  stroke: rgba(107, 114, 128, 0.78) !important;
}

.norli-form-container .norli-clear-btn.visible {
  display: inline-flex !important;
}

@media (hover: hover) {
  .norli-form-container .norli-clear-btn.visible:hover svg path {
    stroke: rgba(31, 41, 55, 0.92) !important;
  }
}

.norli-form-container .norli-form-group input:not(:placeholder-shown) + .norli-clear-btn,
.norli-form-container .norli-form-group input:-webkit-autofill       + .norli-clear-btn {
  display: inline-flex !important;
}

/* ── Error message ───────────────────────────────────────────────────── */
.norli-error-msg {
  display:        none;
  color:          var(--norli-error-color) !important;
  -webkit-text-fill-color: var(--norli-error-color) !important;
  font-size:      13px;
  font-weight:    500;
  line-height:    1.3;
  position:       absolute;
  top:            100%;
  left:           10px;
  margin-top:     2px;
  z-index:        2;
  pointer-events: none;
}

.norli-form-group.is-error.has-content .norli-error-msg {
  display: block;
}

/* ── Submit button ───────────────────────────────────────────────────── */
.norli-form-submit {
  width:           100% !important;
  height:          56px !important;
  position:        relative;
  overflow:        hidden;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;

  background:      linear-gradient(170deg, #8A6CCE 0%, #7559C0 100%) !important;
  border:          1px solid rgba(255,255,255,.10) !important;
  border-radius:   18px !important;
  box-shadow:      0 2px 8px rgba(107,76,174,.10) !important;

  font-weight:     600 !important;
  font-size:       18px !important;
  color:           #fff !important;
  -webkit-text-fill-color: #fff !important;
  cursor:          pointer;
  text-shadow:     none !important;
  text-decoration: none !important;

  transition:      background 180ms ease,
                   box-shadow 180ms ease !important;
}

/* Satin-highlight — matchar kalkylator-knappen */
.norli-form-submit::before {
  content:        "";
  position:       absolute;
  left: 0; right: 0; top: 0;
  height:         50%;
  pointer-events: none;
  z-index:        1;
  border-radius:  18px 18px 0 0;
  background:     linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 100%);
  opacity:        1;
}

@media (hover: hover) {
  .norli-form-submit:hover {
    background:      linear-gradient(170deg, #9275D4 0%, #7F63C8 100%) !important;
    box-shadow:      0 4px 14px rgba(107,76,174,.18) !important;
    transform:       translateY(-1px) !important;
    border-color:    rgba(255,255,255,.10) !important;
    text-decoration: none !important;
  }
}

.norli-form-submit:active {
  filter:     brightness(0.96) !important;
  box-shadow: 0 1px 6px rgba(107,76,174,.09) !important;
  transform:  translateY(0) !important;
}

.norli-form-submit:disabled {
  opacity:   0.6 !important;
  cursor:    not-allowed !important;
  transform: none !important;
}

/* ── Status messages ─────────────────────────────────────────────────── */
.norli-form-message {
  grid-column: 1 / -1;
  display:     none;
  align-items: center;
  gap:         12px;
  padding:     16px 24px;
  border-radius: 20px;
  font-size:   15px;
  font-weight: 500;
  line-height: 1.5;
  margin-top:  16px;
}

.norli-form-message.success {
  display:    flex;
  background: rgba(220, 252, 231, 0.60);
  border:     1.5px solid rgba(34, 197, 94, 0.35);
  color:      #166534 !important;
  -webkit-text-fill-color: #166534 !important;
}

.norli-form-message.success::before {
  content:         "✓";
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      linear-gradient(135deg, rgba(34, 197, 94, 1), rgba(22, 163, 74, 1));
  color:           #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size:       18px;
  font-weight:     700;
}

.norli-form-message.error {
  display:    flex;
  background: rgba(254, 226, 226, 0.60);
  border:     1.5px solid rgba(239, 68, 68, 0.35);
  color:      #991B1B !important;
  -webkit-text-fill-color: #991B1B !important;
}

.norli-form-message.error::before {
  content:         "!";
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      linear-gradient(135deg, rgba(239, 68, 68, 1), rgba(220, 38, 38, 1));
  color:           #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size:       18px;
  font-weight:     700;
}

/* ── GDPR notice ─────────────────────────────────────────────────────── */
.norli-form-gdpr {
  grid-column:  1 / -1;
  font-size:    14px !important;
  line-height:  1.5 !important;
  margin-top:   4px;
  text-align:   center;
  color:        #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}
/* Länken inuti gdpr — explicit lila */
.norli-form-gdpr a {
  color: #7559C0 !important;
  -webkit-text-fill-color: #7559C0 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.norli-form-gdpr a,
.norli-form-container .norli-form-gdpr a {
  color:                   #7559C0 !important;
  -webkit-text-fill-color: #7559C0 !important;
  text-decoration:         none !important;
  font-size:               inherit !important;
  font-weight:             400 !important;
}

.norli-form-gdpr a:hover {
  text-decoration: underline;
}

/* ── Responsive — Tablet (768–1024px) ───────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .norli-form-container {
    width:     100% !important;
    max-width: none !important;
    --norli-radius: 22px;
    --norli-h:      54px;
  }

  .norli-contact-form { gap: 12px 4%; }

  .norli-form-input {
    font-size:   15px;
    padding:     0 16px !important;
    line-height: 54px !important;
  }

  .norli-form-textarea {
    height:     110px !important;
    min-height: 110px !important;
    font-size:  15px;
    padding:    12px 16px !important;
  }

  .norli-form-submit {
    height:        54px !important;
    border-radius: 18px !important;
    font-size:     16px !important;
  }

  .norli-form-group.is-error.has-content { margin-bottom: 11px; }
}

/* ── Responsive — Mobile (<768px) ───────────────────────────────────── */
@media (max-width: 767px) {
  .norli-form-container {
    --norli-radius: 24px;
    --norli-h:      52px;
  }

  .norli-contact-form {
    grid-template-columns: 1fr;
    gap:         12px;
    padding-top: 0 !important;
  }

  .norli-form-input {
    padding:     0 16px !important;
    line-height: 52px !important;
  }

  .norli-form-textarea {
    height:     150px !important;
    min-height: 150px !important;
    padding:    12px 16px !important;
  }

  .norli-form-submit {
    height:        52px !important;
    border-radius: 18px !important;
    font-size:     16px !important;
  }

  .norli-form-gdpr { text-align: left; }
  .norli-form-group.is-error.has-content { margin-bottom: 10px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .norli-form-submit:hover   { transform: none !important; }
  .norli-form-group:hover    { transform: none !important; }
}

/* ── Autofill styling ────────────────────────────────────────────────── */
.norli-form-container input:-webkit-autofill,
.norli-form-container textarea:-webkit-autofill,
.norli-form-container input:-webkit-autofill:hover,
.norli-form-container textarea:-webkit-autofill:hover,
.norli-form-container input:-webkit-autofill:focus,
.norli-form-container textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #4B5563 !important;
  -webkit-box-shadow:      0 0 0 1000px transparent inset !important;
  box-shadow:              0 0 0 1000px transparent inset !important;
  background-color:        transparent !important;
  background-image:        none !important;
  transition:              background-color 5000s ease-in-out 0s !important;
}

/* ── Kill native browser decorations ────────────────────────────────── */
.norli-form-container input::-ms-clear,
.norli-form-container input::-ms-reveal {
  display: none !important;
  width: 0 !important; height: 0 !important;
}

.norli-form-container input::-webkit-search-cancel-button,
.norli-form-container input::-webkit-search-decoration,
.norli-form-container input::-webkit-search-results-button,
.norli-form-container input::-webkit-search-results-decoration,
.norli-form-container input[type="text"]::-webkit-clear-button,
.norli-form-container input[type="email"]::-webkit-clear-button,
.norli-form-container input[type="tel"]::-webkit-clear-button,
.norli-form-container input[type="number"]::-webkit-inner-spin-button,
.norli-form-container input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance:         none !important;
  display:            none !important;
  width: 0 !important; height: 0 !important; margin: 0 !important;
}

.norli-form-container input::-webkit-contacts-auto-fill-button,
.norli-form-container input::-webkit-credentials-auto-fill-button {
  visibility:     hidden !important;
  display:        none !important;
  pointer-events: none !important;
  width: 0 !important; height: 0 !important;
}