/* Style SELECT dla safari (macOS + iOS) */

/* Tylko pojedynczy select (bez multiple/size) */
select:not([multiple]):not([size]) {
    /* ukryj natywną strzałkę */
    -webkit-appearance: none;
      appearance: none;
  
    /* wygląd pigułki */
    background-color: #fff;
    border: 1px solid #D1D5DB;   /* jasny szary */
    border-radius: 9999px;
    color: #111827;
   
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/

    /* miejsce na strzałkę */
    /*
    font-size: 14px;
    line-height: 1.2;
    padding: 6px 20px 6px 14px;*/
    padding-right: 18px;
    cursor: pointer;
  
    /* własna strzałka */
    background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'>\
  <path d='M1 1l4 4 4-4' fill='none' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 9px 9px;
  
    /* delikatne stany */
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  
  select:not([multiple]):not([size]):hover{
    border-color: #C7CCD1;
  }
  
  select:not([multiple]):not([size]):focus,
  select:not([multiple]):not([size]):focus-visible{
    outline: none;
    border-color: #93C5FD;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25);
  }
  
  select:disabled{
    color: #9CA3AF;
    background-color: #F9FAFB;
    border-color: #E5E7EB;
    cursor: not-allowed;
  }
 
  
  
  /* Dodatkowa kompatybilność (nie szkodzi Safari, pomaga starym IE/Edge) */
  select::-ms-expand{ display:none; }
  
  /* radio */
  /* Safari (iOS/macOS) */


  :root{
    --radio-size: 18px;     /* średnica kółka */
    --dot-size: 10px;        /* średnica niebieskiej kropki */
    --border-w: 1px;        /* grubość obwódki */
    --radio-gray: #C7CCD1;  /* obwódka OFF */
    --radio-blue: #00559c;  /* obwódka + kropka ON */
    --focus-ring: rgba(10,132,255,.35);
  }

  /* Reset wyglądu i baza */
  input[type="radio"]{
    -webkit-appearance: none;
    appearance: none;
    width: var(--radio-size);
    height: var(--radio-size);
    border-radius: 50%;
    border: var(--border-w) solid var(--radio-gray);  /* SZARA obwódka */
    background: #fff;                                  /* białe tło */
    position: relative;
    display: inline-block;
    vertical-align: -3px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  /* Niebieska kropka – pokazujemy tylko gdy :checked */
  input[type="radio"]::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--dot-size);
    height: var(--dot-size);
    background: var(--radio-blue);     /* NIEBIESKA kropka */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .12s ease;
  }

  /* Hover – subtelnie */
  input[type="radio"]:hover{
    border-color: #B9C0C7;
  }

  /* ZAZNACZONY: niebieska obwódka + kropka */
  input[type="radio"]:checked{
    border-color: var(--radio-blue);
  }
  input[type="radio"]:checked::after{
    transform: translate(-50%, -50%) scale(1);
  }

  /* Focus ring */
  input[type="radio"]:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
  }

  /* Disabled */
  input[type="radio"]:disabled{
    border-color: #E0E4E8;
    background: #F6F7F8;
    cursor: not-allowed;
  }
  input[type="radio"]:disabled::after{
    background: #9CC6FF; /* przygaszona kropka */
  }



  /* typowy układ input + label */
  input[type="radio"] + label{
    margin-left: 8px;
    margin-right: 16px;
    cursor: pointer;
  }


/* Dla starych IE/Edge – nie szkodzi Safari */
input[type="radio"]::-ms-check{ display:none; }