/* Scoped styles only for the privacy management page */
.privacy-mgmt {
  /* Bazuj na tych samych zmiennych co formularz multi-step, by działał tryb jasny/ciemny */
  --pm-bg: var(--multi-step-bg);
  --pm-card-bg: var(--multi-step-bg);
  --pm-text: var(--multi-step-form-text);
  --pm-muted: var(--multi-step-form-placeholder);
  --pm-border: var(--multi-step-form-border);
  --pm-primary: var(--btn-background-color);
  --pm-primary-hover: var(--btn-hover-background-color);

  /* Offset od przyklejonego nagłówka (header jest position: fixed) */
  padding-top: 100px; /* desktop */
}

@media (max-width: 991.98px) {
  .privacy-mgmt { padding-top: 92px; }
}
@media (max-width: 575.98px) {
  .privacy-mgmt { padding-top: 84px; }
}

.privacy-mgmt .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px;
}

.privacy-mgmt .privacy-header {
  text-align: center;
  color: var(--pm-text);
  margin-bottom: 18px;
}
.privacy-mgmt .privacy-header .logo-light,
.privacy-mgmt .privacy-header .logo-dark {
  width: 140px;
  height: auto;
  user-select: none;
}
.privacy-mgmt .request-h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--multi-step-h3-h2);
  margin: 16px 0 8px;
}
.privacy-mgmt .lead {
  color: var(--pm-muted);
  margin: 0 auto 16px;
  max-width: 720px;
}

/* Jeden centralny „krok” jak w multi-step */
.privacy-mgmt .grid {
  display: block;
}

.privacy-mgmt .privacy-card {
  background-color: var(--pm-card-bg);
  color: var(--pm-text);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: var(--shadow-default);
  max-width: 720px;
  width: 100%;
  margin: 1.5rem auto 0;
  padding: 32px 40px; /* bardziej kompaktowo */
}
.privacy-mgmt .privacy-card .card-body { padding: 0; }

.privacy-mgmt .request-h3 { font-size: 1.1rem; font-weight: 700; color: var(--multi-step-h3-h2); margin-bottom: 12px; }
.privacy-mgmt .small { font-size: .9rem; color: var(--pm-muted); }

/* Form */
.privacy-mgmt .privacy-form .field { margin-bottom: 12px; }
.privacy-mgmt .privacy-form label { display:block; font-size:.9rem; color: var(--pm-muted); margin-bottom: 6px; }
.privacy-mgmt .privacy-form input[type="email"],
.privacy-mgmt .privacy-form input[type="tel"],
.privacy-mgmt .privacy-form input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  color: var(--pm-text);
  background: var(--multi-step-form-bg);
  border: 1px solid var(--pm-border);
  border-radius: 10px;
}
.privacy-mgmt .privacy-form input:focus {
  outline: none;
  border: 1px solid var(--btn-background-color);
  box-shadow: 0 0 5px var(--btn-background-color);
}

.privacy-mgmt .privacy-form .check { display: inline-flex; align-items: center; gap: 6px; margin-right:16px; font-size:.95rem; }

/* --- Styl pól jak w multi-step (namespacowane) --- */
.privacy-mgmt .pm-input-gap { position: relative; margin-bottom: 14px; }
.privacy-mgmt .pm-input-gap label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #c4c4c4;
  position: absolute;
  background: var(--multi-step-form-bg);
  padding: 0 6px;
  left: 12px;
  top: -10px;
  border-radius: 8px;
}
.privacy-mgmt .pm-input-container { position: relative; }
.privacy-mgmt .pm-input-gap input[type="email"],
.privacy-mgmt .pm-input-gap input[type="tel"] {
  width: 100%;
  padding: 13px 14px;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--pm-text);
  background-color: var(--multi-step-form-bg);
  box-sizing: border-box;
  border: 1px solid var(--pm-border);
  transition: border .3s, box-shadow .3s;
}
.privacy-mgmt .pm-input-gap input:focus {
  outline: none;
  border: 1px solid var(--btn-background-color);
  box-shadow: 0 0 5px var(--btn-background-color);
}
.privacy-mgmt .pm-input-gap input.input-error {
  border: 1px solid #c62828;
  box-shadow: 0 0 5px #c62828;
}
.privacy-mgmt .pm-input-gap input.input-valid {
  border: 1px solid #4caf50;
  box-shadow: 0 0 5px #4caf50;
}

/* Buttons */
/* Przyciski jak w multi-step (zielony primary, zaokrąglone) */
.privacy-mgmt .btn { display:inline-block; border: none; border-radius: 30px; padding: 0.8em; font-weight: 700; cursor:pointer; }
.privacy-mgmt .btn-primary {
  width: 100%;
  background: var(--pm-primary);
  border: 2px solid var(--pm-primary);
  color: #fff;
  margin-top: 10px;
}
.privacy-mgmt .btn-primary:hover,
.privacy-mgmt .btn-primary:focus,
.privacy-mgmt .btn-primary:active { background: var(--pm-primary-hover); border-color: var(--pm-primary-hover); }

/* Messages */
.privacy-mgmt .form-info {
  margin-top: 12px;
  font-size: .95rem;
  border-radius: 12px;
  padding: 10px 12px 10px 42px; /* miejsce na ikonę */
  position: relative;
}
.privacy-mgmt .form-info::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}
.privacy-mgmt .form-info.success {
  color: #2f9e44;
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(46, 204, 113, 0.25);
}
.privacy-mgmt .form-info.success::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z' fill='%2328a745'/%3E%3C/svg%3E");
}
.privacy-mgmt .form-info.error {
  color: #c62828;
  background: rgba(198, 40, 40, 0.08);
  border: 1px solid rgba(198, 40, 40, 0.25);
}
.privacy-mgmt .form-info.error::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z' fill='%23ff0000'/%3E%3C/svg%3E");
}

/* Responsive */
@media (max-width: 700px) {
  .privacy-mgmt .privacy-card { width: 100%; margin-top: 1.25rem; padding: 24px; }
}

/* --- Bridge do stylu multi-step na stronie privacy --- */
.privacy-mgmt .multi-step-form .step.active {
  background-color: var(--multi-step-bg);
  padding: 50px;
  border-radius: 24px;
  display: block !important;
  max-width: 100%;
  width: 600px;
  margin: 0 auto 0;
  box-shadow: var(--shadow-default);
  border: 1px solid rgba(0,0,0,0.1);
}

/* Usuń dodatkowy odstęp z klasy Bootstrap mt-5 na kontenerze formularza na tej stronie */
.privacy-mgmt .multi-step-form.container { margin-top: 0 !important; }

/* Typografia nagłówków w multi-step na stronie privacy */
.privacy-mgmt .multi-step-form .request-h2,
.privacy-mgmt .multi-step-form .request-h3 {
  color: var(--multi-step-h3-h2);
  text-align: left;
}

/* Styl etykiety i kontenera inputu jak w multi-step */
.privacy-mgmt .multi-step-form .multi-step-input-gap { position: relative; font-size: 13px; }
.privacy-mgmt .multi-step-form .multi-step-input-container { position: relative; }
.privacy-mgmt .multi-step-form .multi-step-input-gap label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #c4c4c4;
  position: absolute;
  background: #1B223A;
  padding: 0 5px;
  left: 15px;
  top: -10px;
  border-radius: 0.5rem;
}

/* Inputy */
.privacy-mgmt .multi-step-form .multi-step-input-gap input,
.privacy-mgmt .multi-step-form .multi-step-input-gap textarea {
  width: 100%;
  padding: 13px 35px 13px 15px;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--multi-step-form-text);
  background-color: var(--multi-step-form-bg);
  box-sizing: border-box;
  border: 1px solid var(--multi-step-form-border);
  transition: border 0.3s, box-shadow 0.3s;
}
.privacy-mgmt .multi-step-form .multi-step-input-gap input:focus,
.privacy-mgmt .multi-step-form .multi-step-input-gap textarea:focus {
  outline: none;
  border: 1px solid var(--btn-background-color);
  box-shadow: 0 0 5px var(--btn-background-color);
}

/* Placeholder */
.privacy-mgmt .multi-step-form .multi-step-input-gap input::placeholder,
.privacy-mgmt .multi-step-form .multi-step-input-gap textarea::placeholder {
  color: var(--multi-step-form-placeholder);
  opacity: 1;
}

/* Ikonka tooltipu */
.privacy-mgmt .multi-step-form .multi-step-input-container .tooltip-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23343a40" viewBox="0 0 14 14" role="img" focusable="false" aria-hidden="true"><path d="M6.9198484 1.0005452C3.6064257 1.0448929.95652234 3.7671873 1.0006091 7.0807404c.0443477 3.3121186 2.7663813 5.9628046 6.0796735 5.9187176 3.3127704-.044609 5.9631954-2.766903 5.9191084-6.0801953-.044347-3.3123792-2.766511-5.96293475-6.0795426-5.9187175zm-.017739 9.6516168l-.03313-.000522c-.5102594-.01513-.8699972-.391042-.855519-.8937359.0142173-.494085.3826943-.8527791.8761272-.8527791l.029609.0005218c.5244764.015522.8801707.3876503.8654316.9048223-.014609.4955199-.3773464.8416929-.8825185.8416929zm2.1462964-4.2598539c-.1199995.1704777-.3838681.3821726-.7163452.6412151l-.3661291.2527817c-.2009992.1562603-.3223031.3032597-.3678247.4479114-.0358695.1138691-.0534781.1439994-.0566085.3756508l-.0005217.058826H6.1429817l.00404-.1183039c.0170903-.4862593.0290903-.7723017.2306113-1.0086487.3161727-.371216 1.013605-.8203013 1.0432136-.8393447.0999126-.0752606.1841732-.1609559.2469121-.2525208.1467386-.2023036.2116949-.3615639.2116949-.5180851 0-.2171731-.0644346-.4180419-.1918689-.5968674-.1224778-.1725646-.3551726-.2599555-.6916931-.2599555-.3337814 0-.5623023.1059126-.6989975.3232162-.1406081.2234339-.2116948.4580852-.2116948.6978235v.059608H4.6437698l.00261-.062217c.0371724-.8829095.3523017-1.5186463.9362561-1.8896015.3669117-.2362165.8234318-.3559552 1.3561255-.3559552.6973018 0 1.2859518.1694342 1.7493849.5036069.4695635.3386074.7077365.845736.7077365 1.5072988 0 .3700421-.1168691.7176496-.347477 1.0335614z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  cursor: pointer;
}

/* Ikona walidacji (miejsce) */
.privacy-mgmt .multi-step-form .multi-step-input-container .multi-step-validation-icon {
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

/* Komunikat błędu pod polem */
.privacy-mgmt .multi-step-form .form-error {
  margin-top: 5px;
  color: #c62828;
  font-size: 0.9rem;
}

/* Styl dla błędnych inputów / selectów */
.privacy-mgmt .multi-step-input-gap input.input-error,
.privacy-mgmt .multi-step-input-gap textarea.input-error,
.privacy-mgmt .multi-step-input-gap select.input-error {
    border: 1px solid #c62828;
    -webkit-box-shadow: 0 0 5px #c62828;
            box-shadow: 0 0 5px #c62828;
    background-repeat: no-repeat;
}

/* Kółko z X gdy błąd */
.privacy-mgmt .multi-step-form .multi-step-input-container input.input-error + .tooltip-icon + .multi-step-validation-icon::before,
.privacy-mgmt .multi-step-form .form-check input.input-error + .multi-step-validation-icon::before,
.privacy-mgmt .multi-step-form .multi-step-input-container select.input-error + .tooltip-icon + .multi-step-validation-icon::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM7 9V3H9V9H7ZM7 13V11H9V13H7Z' fill='%23ff0000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Kółko z ✔ gdy poprawne */
.privacy-mgmt .multi-step-form .multi-step-input-container input.input-valid + .tooltip-icon + .multi-step-validation-icon::before,
.privacy-mgmt .multi-step-form .form-check input.input-valid + .multi-step-validation-icon::before,
.privacy-mgmt .multi-step-form .multi-step-input-container select.input-valid + .tooltip-icon + .multi-step-validation-icon::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.7071 5.70711L11.2929 4.29289L6.5 9.08579L4.70711 7.29289L3.29289 8.70711L6.5 11.9142L12.7071 5.70711Z' fill='%2300cc29'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.privacy-mgmt .small {
  color: var(--pm-muted);
}

/* Opcjonalnie: dopasowanie koloru linków jak w multi-step */
.privacy-mgmt .multi-step-form a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}
.privacy-mgmt .multi-step-form a:hover {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}

/* Przycisk .btn-next jak w wniosku (zielony, pełna szerokość) */
.privacy-mgmt .btn-next {
  width: 100%;
  background: var(--btn-background-color);
  border: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.8em;
  border-radius: 30px;
  border: 2px solid var(--btn-background-color);
  transition: background 0.2s, box-shadow 0.2s;
  color: #fff;
  cursor: pointer;
  outline: none;
  margin-top: 10px;
}
.privacy-mgmt .btn-next:hover,
.privacy-mgmt .btn-next:focus,
.privacy-mgmt .btn-next:active {
  background: var(--btn-hover-background-color);
}