/* ============================================================
   TOGGLE.CSS — iPhone-style toggle switch (matches baseline)
   ============================================================ */

/* Wrapper for the toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;   /* Width of the toggle */
    height: 28px;  /* Height of the toggle */
}

/* Hide the default checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Default gray background */
    transition: 0.4s;
    border-radius: 28px;    /* Rounded edges like iPhone */
}

/* The circle inside the toggle */
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* Checked state */
.switch input:checked + .slider {
    background-color: #4CAF50; /* iOS green when ON */
}

/* Move the circle when checked */
.switch input:checked + .slider:before {
    transform: translateX(22px);
}

/* Optional: hover effect */
.switch:hover .slider {
    background-color: #b3b3b3;
}

/* Optional: focus effect */
.switch input:focus + .slider {
    box-shadow: 0 0 2px #4CAF50;
}

/* ============================================================
   TOGGLE-INLINE — Centered question + inline toggle + labels
   ============================================================ */
.toggle-inline {
    text-align: center;        /* Center everything horizontally */
    display: flex;             /* Flex to align question and toggle inline where needed */
    flex-direction: column;    /* Stack question above toggle row */
    align-items: center;       /* Center items horizontally */
    margin-bottom: 0px;       /* Space below the whole block */
}

.toggle-inline .toggle-row {
    display: inline-flex;      /* Keep No, toggle, Yes on one line */
    align-items: center;
    gap: 12px;                 /* Space between No, toggle, Yes */
}

.toggle-inline .toggle-row .toggle-label {
    font-size: 1.05em;
    user-select: none;         /* Prevent text selection when clicking toggle */
    cursor: default;
}