/* ============================================
   ENHANCED TOUCH TARGETS
   Meets Apple/Google 44px minimum standard
   ============================================ */

/* Checkboxes and Radio Buttons - Enhanced Touch Targets */
input[type="checkbox"],
input[type="radio"] {
    /* Minimum 44px touch target */
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    accent-color: var(--primary, #1a5490);
    position: relative;
}

/* Ensure labels are also touch-friendly */
label {
    cursor: pointer;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Form check wrapper for proper spacing */
.form-check {
    padding: 8px 0;
    display: flex;
    align-items: center;
    min-height: 44px;
}

.form-check input {
    margin-right: 12px;
    flex-shrink: 0;
}

.form-check label {
    margin: 0;
    padding: 8px 0;
    flex: 1;
}

/* Small buttons - ensure minimum touch target */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Icon-only buttons */
.btn-icon,
button.icon-only {
    width: 44px;
    height: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Links in text - add padding for better touch targets */
a {
    /* Add padding for inline links */
    padding: 4px 0;
    display: inline-block;
    min-height: 24px;
    /* Slightly smaller for inline text links */
}

/* Navigation and menu links - full touch targets */
nav a,
.menu a,
.nav-link {
    min-height: 44px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
    min-height: 48px;
    /* Slightly larger for text input */
    padding: 12px 16px;
    font-size: 16px;
    /* Prevents iOS zoom */
}

/* Select dropdowns */
select {
    min-height: 48px;
    padding: 12px 16px;
    cursor: pointer;
}

/* File upload buttons */
input[type="file"] {
    min-height: 44px;
    padding: 10px;
}

/* Range sliders */
input[type="range"] {
    min-height: 44px;
    cursor: pointer;
}

/* Remember me checkbox - common use case */
.remember-me,
.form-check.remember {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.remember-me input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 44px;
    min-height: 44px;
}

/* Ensure checkbox/radio doesn't get too big visually */
@media (min-width: 769px) {

    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        /* Still maintain 44px touch target via padding */
        padding: 12px;
    }
}

/* Mobile specific - ensure all interactive elements are touch-friendly */
@media (max-width: 768px) {

    /* All buttons */
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 48px;
        /* Slightly larger on mobile */
        font-size: 16px;
        /* Prevents zoom */
    }

    /* Links */
    a:not(.btn) {
        min-height: 32px;
        padding: 8px 4px;
    }

    /* Navigation */
    nav a,
    .menu a,
    .nav-link {
        min-height: 48px;
        padding: 14px 16px;
    }

    /* Form inputs */
    input,
    select,
    textarea {
        min-height: 48px;
        font-size: 16px;
        /* Critical: prevents iOS zoom */
    }

    /* Checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        transform: scale(1.2);
        /* Make them visually larger on mobile */
    }
}

/* Focus states for accessibility */
input:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary, #1a5490);
    outline-offset: 2px;
}

/* Active/pressed states for better feedback */
button:active,
.btn:active,
input[type="checkbox"]:active,
input[type="radio"]:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Disabled states */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}