/** =========================
 *  My Checkbox / Radio
 *  ========================= */
.my_check {
    /* 🔧 KÖZPONTI BEÁLLÍTÁSOK */
    --size: 30px;                /* checkbox / radio mérete */
    --color: #69bf4a;            /* aktív szín */
    --border-color: #000;        /* alap keret */
    --check-color: #fff;         /* pipa / pont színe */
    --focus-color: rgba(105,191,74,.4);

    appearance: none;
    -webkit-appearance: none;
    width: var(--size)!important;
    height: var(--size)!important;
    padding: 0px!important;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-right: .5em;
    background: #fff;
    transition: all .2s;
}

/* =========================
   COMMON STATES
   ========================= */
.my_check:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-color);
}

.my_check:disabled {
    cursor: not-allowed;
    opacity: .5;
}

/* =========================
   CHECKBOX
   ========================= */
.my_check[type="checkbox"] {
    border: 3px solid var(--border-color);
    border-radius: 5px;
}

.my_check[type="checkbox"]:checked {
    background-color: var(--color);
    border-color: var(--color);
}

.my_check[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 30%;
    top: 5%;
    width: 40%;
    height: 80%;
    border: solid var(--check-color);
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
}

/* =========================
   RADIO
   ========================= */
.my_check[type="radio"] {
    border: 3px solid var(--border-color);
    border-radius: 50%;
}

.my_check[type="radio"]:checked {
    background-color: var(--color);
    border-color: var(--color);
}

.my_check[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background: var(--check-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* =========================
   LABEL UX
   ========================= */
label {
    cursor: pointer;
    user-select: none;
}
/** ===== END My Checkbox ===== */