@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-RegularOblique.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-ThinOblique.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-ExtraLightOblique.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-LightOblique.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-MediumOblique.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-SemiBoldOblique.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-BoldOblique.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-ExtraBoldOblique.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Altone';
  src: url('fonts/altone/Altone-HeavyOblique.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --color-text: #333;
  --color-text-secondary: #666;
  --color-primary: #4CAF50;
  --color-primary-hover: #45a049;
  --color-primary-focus-ring: rgba(76, 175, 80, 0.25);
  --color-surface: #ffffff;
  --color-background: #E1F7D9;
  --color-border: #E0E0E0;
  --color-placeholder: #C8C8C8;

  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-lg: 16px;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Altone', sans-serif;
}

/* Accessibility utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.rajd-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  position: relative;
  padding-bottom: 40px;
}

.rajd-background-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
}

.rajd-cloud, .rajd-tree-icon, .rajd-bike-icon, .rajd-line-icon {
  position: absolute;
}

.rajd-cloud-1 { top: 25%; left: 10%; }
.rajd-cloud-2 { top: 35%; left: 4%; }
.rajd-tree-1 { bottom: 0; left: 0; }
.rajd-tree-2 { bottom: 40%; right: 4%; }
.rajd-tree-3 { top:32%; left: 13%; }
.rajd-tree-4 { bottom: 15%; right: 15%; }
.rajd-bike-1 { top: 15%; left: 0; }
.uwaga { top: 12%; left: 10%; }
.rajd-bike-2 { bottom: 12%; left: 8%; }
.rajd-line-1 { bottom:10%; right: 0}
.rajd-line-2 { bottom:10%; right: 0%}
.rajd-line-3 { top:-5%; right: 50%; transform: translateX(50%);}

.rajd-thank-you-page{
  margin-top:50px;
}

@keyframes rajd-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}
@keyframes rajd-bounce {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(10px, -10px) rotate(5deg); }
}
@keyframes rajd-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rajd-cloud, .rajd-tree-icon, .rajd-bike-icon {
    animation: none;
  }
}

.rajd-view {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  transition: opacity 0.3s ease-in-out;
  max-width: 1386px;
  margin:auto;
  width:100%;
}
.rajd-view.hidden {
  display: none;
}

.rajd-thank-you-view{
  background: #488523;
  max-width: 100%;
  position: fixed;
  z-index: 999;
  bottom: 0;
  top: 0;
  overflow-y:auto;
}

.rajd-header {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: start;
  padding: 64px var(--space-32) 0 var(--space-32);
  gap: var(--space-24);
}

.rajd-logo-left {
  --rajd-logo-height: 57px;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 15px;
}
.rajd-logo-right { 
  justify-self: end;
  position: relative;
  width:100%;
 }
.rajd-logo-right img{ 
    position: absolute;
    width: 100%;
    top: 0;
 }

.rajd-before-logo {
  height: calc(var(--rajd-logo-height) * 1.2);
  width: auto;
  flex: 0 0 auto;
}

.rajd-piaseczno-logo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: 250px;
}

.rajd-piaseczno-herb {
  width: 40px;
  height: auto;
}

.rajd-piaseczno-text {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-lg);
}

.rajd-main-title, .rajd-main-thank-you-title { text-align: center; }

.rajd-checkbox-text{
  font-size:14px;
  font-weight: 300;
  line-height: 18px;
}

.rajd-checkbox-text a{
  color:#95B607;
}

.rajd-checkbox-text a:hover{
  color:#488523;
}

.rajd-main-title h1 {
  font-size: 38px;
  font-weight: 800;
  color: #488523;
  margin: 0;
  text-transform: uppercase;
  line-height:48px;
}

.rajd-main-thank-you-title h1{
  font-size: 80px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1;
  max-width: 611px;
  text-transform: uppercase;
}

.rajd-main-title h2 {
  font-size: 22px;
  color: #95B607;
  margin: 0 0 var(--space-8) 0;
  font-weight: 500;
}

.wpcf7 form p {
  text-align: center;
}

.rajd-main-title h3 {
  font-size: 17px;
  color: #488523;
  font-weight: 800; 
  margin: 0 0 var(--space-8) 0;
  font-weight: 500;
}

.rajd-checkbox-hint {
  display: none; /* domyślnie ukryty */
  margin-top: 6px;
  font-size: 0.875rem;
  color:#c0152f;
  line-height: 1.3;
  margin-left:35px;
}

/* .wpcf7-list-item label.has-error,
.wpcf7-list-item label.has-error .rajd-checkbox-text {
  color: red;
} */

.rajd-climate-badge {
    position: absolute;
    top:84px;
    right: 1%;
    filter: drop-shadow(var(--shadow-md));
    z-index: -1;
}
.rajd-climate-badge .rajd-badge-text {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  fill: white;
  letter-spacing: 2px;
}
.rajd-climate-badge .rajd-badge-content {
  fill: white;
}
.rajd-climate-badge .rajd-bike-symbol {
  font-size: 2rem;
}
.rajd-climate-badge .rajd-event-date {
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
}
.rajd-climate-badge .rajd-event-time {
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
}


/* Main content & Form */
.rajd-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-16) var(--space-32) var(--space-32);
  width: 100%;
}

.rajd-registration-form {
  width: 100%;
  max-width: 630px;
  z-index: 10;
}

.rajd-form-fields, .rajd-checkboxes {
  border: none;
  padding: 0;
}

.rajd-field-group, .rajd-checkbox-group {
  margin-bottom: var(--space-12);
}

.rajd-field-group{
  margin-top:30px;
}

.rajd-field-group p{
  text-align: left !important;
  margin:unset;
}

.rajd-field-label {
  display: block;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  font-size: var(--font-size-base); 
}

.rajd-form-label{
  margin-left:25px;
  font-size:16px;
  font-weight:400;
  color:#6F6F6F;
}

.rajd-form-input {
  width: 100%;
  padding:16px 24px 16px 24px;
  border: 1px solid #8D8D8D;
  border-radius: 58px;
  font-size: var(--font-size-base);
  background: #fff;
  color:#6F6F6F;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.rajd-form-input:focus, .rajd-form-input:focus-visible {
  outline: none;
  border-color: #488523;
  box-shadow: 0 6px 14.5px rgba(141, 199, 63, 0.3);
}
.rajd-form-input::placeholder {
  color: #C8C8C8;
  font-size:16px;
}

/* Custom Checkboxes */
.rajd-checkbox-group:last-child {
  margin-bottom: 0;
}
.rajd-checkbox-label {
  display: flex;
  align-items: flex-start;   /* lub center, jeśli wolisz */
  gap: 12px;
  line-height: 1.5;
}

.rajd-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid #95B607;
  background: #fff;
  display: inline-block;   
  position: relative;        
  flex-shrink: 0;
  position:relative;
  flex: 0 0 18px;
  vertical-align: top; 
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.wpcf7-list-item label{
  display:flex;
  text-align: left;;
  gap:10px;
  align-items: flex-start;
}

.rajd-checkbox:checked {
  background: #95B607;
  border-color: #95B607;
}

/* “ptaszek” – absolutny, nie wpływa na layout */
.rajd-checkbox::after {
  content: "";
  position: absolute;
  left: 60%;
  top: 50%;
  width: 9px;
  height: 5px;
  margin-left: -6px;  /* wyśrodkowanie */
  margin-top: -3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;         /* ukryty gdy niechecked */
}

.rajd-checkbox:checked::after { opacity: 1; }



.rajd-checkbox-label a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: var(--font-weight-medium);
}
.rajd-checkbox-label a:hover {
  color: var(--color-primary-hover);
}


/* Submit button */
.rajd-submit-button {
  background:#95B607;
  color: white;
  border: none;
  padding: var(--space-16) var(--space-24);
  border-radius: 50em;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  box-shadow: var(--shadow-md);
}
.rajd-submit-button:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.rajd-submit-button:active:not(:disabled) {
  transform: translateY(0);
}
.rajd-submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bottom section (parent consent) */
.rajd-bottom-section {
  margin-top: var(--space-16);
  width: 100%;
  max-width: 600px;
  text-align: center;
}
.rajd-dashed-line {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-primary) 0, var(--color-primary) 10px, transparent 10px, transparent 20px);
  margin: var(--space-24) auto;
  position: relative;
  width: 80%;
}
.rajd-dashed-line{
  position: relative;
  width: 100%;
  height: 5px;               /* grubość linii */
  margin: 0 auto 40px;
  /* przerywana kreska */
  background: repeating-linear-gradient(
      90deg,
      #189647 0 28px,         /* długość „kreski” */
      transparent 28px 48px   /* przerwa między kreskami */
  );
  border-radius: 9999px;
  overflow: visible;
}

.rajd-dashed-line::before,
.rajd-dashed-line::after{
  content:"";
  position:absolute;
  top:50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 5px solid #189647;    /* zielona obręcz */
  border-radius: 50%;
  background: var(--color-background, #FFF9F3); /* „puste” wnętrze */
}

.rajd-dashed-line::before{ left: -14px; }
.rajd-dashed-line::after{  right: -14px; }

.rajd-consent-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 23px;
  /* border: 1px solid #7fc043; */
  border:0px;
  background:#fff;
  border-radius: 10px;
  color: #000;
  font-weight: 600;
  font-size: 16px;
  /* box-shadow: 0 1px 2px rgba(0,0,0,.06); */
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  margin-top:var(--space-16);
  text-align: left;
}

/* ikonka przed tekstem (SVG w tle) */
/* .rajd-consent-button::before {
  content:"";
  width:18px; height:18px;
  display:inline-block;
  background-repeat:no-repeat;
  background-size:18px 18px;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b9444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <path d='M20 16.5a4.5 4.5 0 0 0-1-8.86 5.5 5.5 0 0 0-10.9 1.36A3.5 3.5 0 1 0 6.5 16H10'/>\
    <path d='M12 12v8'/>\
    <path d='M8 16l4 4 4-4'/>\
  </svg>");
} */

/* hover i active */
.rajd-consent-button:hover {
  color:#95B607;
  /* background:#f6fbf2; */
  /* box-shadow: 0 4px 10px rgba(0,0,0,.08); */
  /* transform: translateY(-1px); */
}
.rajd-consent-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,.06);
}

/* środkowe kółko na linii */
.rajd-dashed-line .rajd-dash-mid{
  position:absolute;
  left:50.4%;
  top:50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 5px solid #189647;
  border-radius: 50%;
  background: var(--color-background, #FFF9F3);
}

.rajd-parent-consent p {
  color:#fff;
  font-size: 16px;
  margin-bottom: var(--space-16);
}
.rajd-parent-consent .rajd-checkbox-label{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 22px;
  border: 1px solid #7fc043;
  border-radius: 9999px;
  background:#fff;
  color:#488523;
  font-weight: 600;
  text-transform: lowercase;      
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.rajd-parent-consent .rajd-checkbox-label:hover{
  background:#f6fbf2;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Thank You View */
.rajd-thank-you-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-32);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  margin: var(--space-32) 0;
  width: 100%;
  max-width: 600px;
}
.rajd-success-icon {
  font-size: 64px;
  color: var(--color-primary);
}
.rajd-see-you-message {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  position: relative;
  padding: 0 0 45px;
  border-bottom: 2px solid #fff;
  margin-bottom: 45px;
  flex-direction: column;
  max-width: 680px;
}

.rajd-see-you-message svg{
    position: absolute;
    right: -88px;
    top:-75px;
}

.rajd-main-content.rajd-thank-you-page {
  flex: 1;              
  display: flex;
  flex-direction: column;
  justify-content: center;     
  align-items: center;       
}

.rajd-flag-icon { font-size: 32px; }
.rajd-message-text {
  text-transform: uppercase;
  color:#488523;
  letter-spacing: 1px;
  font-weight:600;
  font-size:38px;
}
.rajd-message-text-thank-you {
  text-transform: uppercase;
  color:#9dbf40;
  letter-spacing: 1px;
  font-weight:600;
  font-size:18px;
  text-align: center;
}

.rajd-message-text-thank-you--small {
  color: #fff;
  width: 100%;
  font-size: 16px;
  text-align: center;
  font-weight: 400;
}

/* Footer */
.rajd-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16) var(--space-16);
  margin-top: auto; /* Pushes footer to the bottom */
  width: 100%;
  z-index: 1;
  max-width:1383px;
  margin:auto;
}
.rajd-logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.rajd-eu-logos {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  flex-wrap: wrap;
}
.rajd-logo-item {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.rajd-heart-logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.rajd-funding-text {
  text-align: center;
  font-size: var(--font-size-sm);
  color: #488523;
  margin: 0;
  max-width:1383px;
}


/* Responsive Design */
@media (max-width: 900px) {
  .rajd-line-2 {
    display: none;
  }
  .rajd-header {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-24);
  }
  .rajd-logo-left, .rajd-logo-right {
    justify-self: center;
  }
  /* .rajd-main-title h1 {
    font-size: var(--font-size-xl);
  }
  .rajd-main-title h2 {
    font-size: 22px;
  } */

  .rajd-see-you-message svg{
    position: absolute;
    right: -120px;
    top:-75px;
}
}

@media (max-width: 1280px) {
  .rajd-form-view {
    padding-bottom: 400px;
  }
}
@media (max-width: 900px) {
  .uwaga { display: none; }
  .uwaga img { width: 100px; }

  .rajd-piaseczno-logo {
    max-width: 177px;
  }
  .rajd-footer {
    margin: auto !important;
  }
  .rajd-see-you-message svg{
    position: absolute;
    right: -30px;
    bottom:-50px;
}

.rajd-main-thank-you-title h1 {
  font-size: 40px;
}

.rajd-logo-right {
  display: none;
}

.rajd-thank-you-page {
  margin-top: 0;
}

.rajd-eu-logos {
  max-width: 100%;
  margin: auto !important;
}

  .rajd-background-elements {
    display: none;
  }
  .rajd-logos-row {
    flex-direction: column;
    justify-content: center;
  }

  .rajd-funding-text{
    width:100%;
  }

  .rajd-header{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "left right"
      "title title";
    align-items: start;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-20);
  }

  .rajd-logo-left  { grid-area: left;  justify-self: center; --rajd-logo-height: 100px; }
  .rajd-logo-right { display: none; }
  .rajd-main-title, .rajd-main-thank-you-title { grid-area: title; text-align: center; padding-top: var(--space-16); }

  /* badge po prawej nie może być fixed na mobile */
  .rajd-climate-badge{
    position: static !important;   /* nadpisuje fixed */
    margin-left: auto;             /* trzyma po prawej w swojej kolumnie */
    animation: none;
    filter: none;
  }

  /* rozsądne wymiary na małych ekranach */
  .rajd-piaseczno-logo svg { height: 100px; width: auto; }
  .rajd-climate-badge svg  { height: 200px; width: auto; }

}
.hidden-fields-container{
    display: none;
}

.wpcf7-not-valid-tip {
  color: #c0152f;              /* czerwony tekst */
  font-size: 13px;
  margin-top: 4px;
  display: block;
}

.wpcf7 form .wpcf7-response-output {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 84, 89, 0.4);
  border-radius: 6px;
  background: rgba(255, 84, 89, 0.1);
  color: #c0152f;
  font-size: 14px;
  text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(20, 150, 60, 0.4);
  background: rgba(20, 150, 60, 0.1);
  color: #167d3c;
}

.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: rgba(200, 21, 47, 0.4);
  background: rgba(200, 21, 47, 0.1);
  color: #c0152f;
}

/* 🔎 screen reader response – ukryj wizualnie, zostaw dla czytników */
.screen-reader-response {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.rajd-checkbox.has-error {
  border-color: red;
}
.ui-datepicker-year option{
  color:black;
}

/* ====== DROPDOWNY (Data, Wiek, Specjalne potrzeby) ====== */

.eko-dropdown-group {
  position: relative;
}

.eko-dropdown-toggle{
  width:100%;
  min-height:56px;
  border:1px solid #8D8D8D;
  border-radius:40px;
  background:#fff;
  padding:18px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:16px;
  font-weight:400;
  color:#1e1e1e;
  text-align:left;
  line-height:1.3;
  box-shadow:0 10px 20px rgba(0,0,0,0.05);
  cursor:pointer;
}
.eko-dropdown-toggle:focus{
  outline:none;
  border-color:#000;
  box-shadow:0 12px 24px rgba(0,0,0,0.12);
}

.eko-dropdown-label{
  color:#1e1e1e;
}
.eko-dropdown-arrow{
  position:relative;
  width:20px;
  height:20px;
}
.eko-dropdown-arrow:after{
  content:'';
  display:block;
  width:10px;
  height:10px;
  border-right:2px solid #000;
  border-bottom:2px solid #000;
  transform:rotate(45deg) translate(-2px,-2px);
  transform-origin:center;
  margin-left:auto;
  margin-top:4px;
}

/* panel opcji pod kapsułą */
.eko-dropdown-panel{
  display:none; /* JS: pokaż/ukryj */
  background:#fff;
  border:1px solid #8D8D8D;
  border-top:0;
  border-radius:20px;
  border-top-left-radius:0;
  border-top-right-radius:0;
  margin-top:-8px;
  padding:16px 20px;
  box-shadow:0 18px 30px rgba(0,0,0,0.15);
}

.eko-dropdown-option{
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,0.1);
}
.eko-dropdown-option:last-child{
  border-bottom:0;
  padding-bottom:0;
}

/* radio w dropdownie */
.eko-radio-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:16px;
  line-height:1.4;
  color:#1e1e1e;
  font-weight:500;
  cursor:pointer;
}
.eko-radio-input input[type="radio"]{
  /* wcf7 generuje <input type="radio"> bez klasy; ale dzięki class:eko-radio-input
     owiniemy je i możemy targetować parenta label .eko-radio-row > span.itd
     ten blok zostaje pusty - browser default round radio jest już bliski temu ze screena */
}
.eko-radio-text{
  flex:1;
}

/* ====== CHECKBOXY RODO ====== */

.eko-legal{
  max-width:630px;
  margin:40px auto 0;
  font-size:16px;
  line-height:1.5;
  color:#1f2f00;
}
.eko-legal-item{
  margin-bottom:24px;
}
.eko-legal-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:16px;
  line-height:1.5;
  color:#1f2f00;
  font-weight:400;
}
.eko-legal-check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:2px solid #3a4e0e;
  border-radius:4px;
  background:#fff;
  flex-shrink:0;
  position:relative;
  cursor:pointer;
}
.eko-legal-check input[type="checkbox"]:checked{
  background:#fff;
}
.eko-legal-check input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:50%;
  top:45%;
  width:9px;
  height:5px;
  margin-left:-6px;
  margin-top:-3px;
  border-left:2px solid #3a4e0e;
  border-bottom:2px solid #3a4e0e;
  transform:rotate(-45deg);
}
.eko-legal-text{
  font-size:16px;
  line-height:1.5;
  color:#1f2f00;
}
.eko-legal-text strong{
  font-weight:600;
}
.eko-legal-text u{
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight:600;
}

/* ====== SUBMIT ====== */

.rajd-submit-button,
input[type="submit"].rajd-submit-button {
  border:0;
  border-radius:9999px;
  background:#4b5e1f;
  color:#fff;
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  padding:16px 24px;
  text-align:center;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 16px 30px rgba(0,0,0,.25);
  transition:all .15s ease;
}
.rajd-submit-button:hover{
  filter:brightness(1.07);
  transform:translateY(-1px);
  box-shadow:0 20px 36px rgba(0,0,0,.28);
}

/* === CONSENT SECTION (zgody) === */

.consent-section {
  border: none;
  padding: 0;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(105, 105, 105, 0.15)
}

.consent-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 50px;
}

/* pojedynczy bloczek zgody */
.consent-item {
  background: transparent; /* makieta wygląda raczej na brak boxa albo bardzo delikatny */
  border-radius: 12px;
  padding: 0;
  line-height: 1.5;
}

.consent-item p {
  margin: 0;
}

/* CF7 wyrenderuje <label class="consent-ctrl"> <input type="checkbox"> ...nasz html ze spanami... </label> */
.consent-ctrl {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2f00;
  flex-wrap: nowrap;
}

/* schowaj natywny checkbox wizualnie ale zostaw dostępność? */
/* NIE - w projekcie checkbox jest widoczny, tylko kwadratowy z obramowaniem,
   więc my stylujemy natywny input[type=checkbox] */

/* targetujemy input, który CF7 wstawi NA POCZĄTKU <label> */
.consent-ctrl > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #3a4e0e;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  margin-top: 2px; /* ładne wyrównanie do pierwszej linii tekstu */
}

/* stan zaznaczony */
.consent-ctrl > input[type="checkbox"]:checked {
  background-color: #fff; /* jasne tło jak w makiecie */
}

.consent-ctrl > input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 9px;
  height: 5px;
  margin-left: -6px;
  margin-top: -3px;
  border-left: 2px solid #3a4e0e;
  border-bottom: 2px solid #3a4e0e;
  transform: rotate(-45deg);
}

/* nasz wrapper tekstu (reszta labela) */
.consent-text {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  color: #696969;
  font-weight: 400;
  white-space: normal;     /* ← zezwól na łamanie wierszy */
  word-break: break-word;  /* ← bezpieczeństwo przy długich linkach */
}

.consent-text strong {
  font-weight: 600;
  color: #696969;
}

.consent-link {
  color: #696969;
  text-decoration: underline;
  font-weight: 600;
  text-underline-offset: 2px;
}
.consent-link:hover {
  text-decoration: none;
}

/* odstępy / bloki w dłuższych zgodach */
.consent-text br + br {
  line-height: 2;
}

/* BŁĄD WALIDACJI DLA ACCEPTANCE* (CF7 daje .wpcf7-not-valid na <span class="wpcf7-acceptance">) */
.wpcf7-form-control.wpcf7-acceptance.wpcf7-not-valid .consent-ctrl > input[type="checkbox"] {
  border-color: #c0152f;
  box-shadow: 0 0 0 3px rgba(192,21,47,0.15);
}


.consent-text .br {
  display: block;          /* ← spraw, by <br> faktycznie przenosiło */
  content: '';
  margin-bottom: 0.6em;    /* trochę oddechu między punktami */
}

/* Domyślnie ukryj komunikat CF7, jeśli pusty */
.wpcf7-response-output:empty {
  display: none !important;
}

/* Tylko gdy ma treść – pokaż */
.wpcf7-response-output:not(:empty) {
  display: block !important;
}

select.rajd-form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23696969' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center; /* ← tu ustawiasz odległość od prawej */
  background-size: 12px;
}

/* Ukryj natywny select, ale zostaw w DOM do wysyłki */
.eko-select {
  position: absolute !important;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* Wrapper generowany przez JS */
.eko-dd { position: relative; width: 100%; max-width: 630px; }

.eko-dd__toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  width: 100%;
  padding:17px 24px 17px 24px;
  border: 1px solid #8D8D8D;
  border-radius: 58px;
  font-size: var(--font-size-base);
  background: #fff;
  color:#6F6F6F;
}
.eko-dd__label {
  font-size: 16px; line-height: 1; font-weight: 400; color: #6e6e6e;
}
.eko-dd__chev {
  width: 14px; height: 14px; flex: 0 0 14px; opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 8L7 2l6 6' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; transition: transform .15s ease; transform: rotate(180deg);
}
.eko-dd.is-open .eko-dd__chev { transform: rotate(0deg); }

/* Panel */
.eko-dd__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid #8D8D8D; border-radius: 24px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.18);
  padding: 12px 0; z-index: 50; display: none;
}
.eko-dd.is-open .eko-dd__panel { display: block; }

/* Wiersz opcji */
.eko-dd__opt {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 24px;
  cursor: pointer;
}
.eko-dd__opt + .eko-dd__opt { border-top: 1px solid #E8E8E8; }

.eko-dd__radio {
  width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid #8D8D8D; position: relative; flex-shrink: 0;
}
.eko-dd__radio::after {
  content: ''; position: absolute; inset: 5px;
  border-radius: 50%; background: #488523; transform: scale(0); transition: transform .12s ease;
}
.eko-dd__opt.is-selected .eko-dd__radio { border-color: #488523; }
.eko-dd__opt.is-selected .eko-dd__radio::after { transform: scale(1); }

.eko-dd__text { font-size: var(--font-size-base); color: #696969; font-weight: 400; }

/* Fokus/hover */
.eko-dd__opt:hover { background: #fafafa; border-radius: 10px; }
.eko-dd__toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(72,133,35,.2); }

/* ramka+tło dla nie-zaznaczonej zgody po submit */
label.consent-ctrl.consent-error,
.wpcf7-list-item.consent-error {
  border: 1px solid #c0152f;
  border-radius: 8px;
  background: rgba(192, 21, 47, 0.06);
  padding: 12px;
}

/* sam checkbox z czerwonym obrysem */
label.consent-ctrl.consent-error input[type="checkbox"],
.wpcf7-list-item.consent-error input[type="checkbox"]{
  outline: 2px solid #c0152f;
  border-color: #c0152f;
}

/* 🔹 tylko w przypadku nieudanego wysłania formularza (CF7 dodaje .invalid) */
.wpcf7-form.unaccepted .wpcf7-list-item label.consent-ctrl:has(input[type="checkbox"]:not(:checked)) {
  border: 1px solid #c0152f;
  border-radius: 8px;
  background-color: rgba(192, 21, 47, 0.06);
  padding: 12px;
  transition: all 0.25s ease;
}

/* 🔹 dla samego checkboxa – czerwony obrys */
.wpcf7-form.unaccepted .wpcf7-list-item input[type="checkbox"]:not(:checked) {
  outline: 2px solid #c0152f;
  border-color: #c0152f;
}

/* 🔹 po zaznaczeniu wraca do normalnego wyglądu */
.wpcf7-list-item input[type="checkbox"]:checked {
  outline: none;
  border-color: #488523;
}

/* 🔹 lekka animacja tła i obrysu (ładne wejście) */
.wpcf7-list-item label.consent-ctrl {
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.eko-status-info {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 15px;
  font-size: 15px;
  color: #333;
}

.eko-status-row {
  margin-bottom: 6px;
}

.eko-dd__opt.is-disabled { 
  opacity: .55;
  pointer-events: none;
}

.eko-dd__note {
  font-size: .9em;
  color: #6b7280; /* szarawy */
  margin-left: .5rem;
  white-space: normal;
}

.eko-closed-banner {
  background: #c0152f;
  color: #fff;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 6px;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 0.2px;
}

.eko-status-info {
  display: none;
}


.mobile-header {
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: top 0.3s ease;
  background: #E1F7D9;
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.25);
  padding: 12px 23px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.mobile-header-text--first {
  display: block;
  color: #95B607;
  text-align: center;
  font-family: Altone;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.mobile-header-text--second {
  color: #488523;
  text-align: center;
  font-family: Altone;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.mobile-header-logo {
  width: 121px;
}

.mobile-header-logo svg{
  width: 100%;
}

.mobile-header.is-visible {
  top: 0;
}

.mobile-header-text {
  text-align: right;
}

.mobile-bg-left {
  position: fixed;
  left: 0;
  bottom: 0;
  transition: transform 0.3s ease;
  z-index: 2;
}

.mobile-bg-right {
  position: fixed;
  right: 0;
  bottom: 0;
  transition: transform 0.3s ease;
  z-index: 2;
}

/* chowa obrazek pod ekran, żeby nie zasłaniał formularza */
.mobile-bg.is-hidden {
  transform: translateY(100%);
}

@media (min-width: 901px) {
  .mobile-header, .mobile-bg {
    display: none;
  }
}