/**
 * Selection Cards - Universal Styles
 * Used for all radio and checkbox card selections across the site
 * Includes: job posting, job updates, category selection, etc.
 * 
 * MELLOW BLUE THEME
 */

/* ============================================
   RADIO CARD STYLES
   ============================================ */

.radio-card {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    font-weight: 500;
}

.radio-card:hover {
    border-color: #7ab8e8;
    box-shadow: 0 2px 8px rgba(122, 184, 232, 0.2);
}

.radio-card.is-selected {
    border-color: #5a9fd4;
    background-color: #f0f7fc;
}

.radio-card input[type="radio"] {
    margin-right: 1rem;
    cursor: pointer;
}

.radio-card .radio-label {
    font-weight: normal;
    cursor: pointer;
    flex-grow: 1;
    margin: 0;
    padding: 0.25rem 0;
}

.radio-card .radio {
    display: flex;
    align-items: center;
    margin: 0;
}

/* ============================================
   CHECKBOX CARD STYLES
   ============================================ */

.checkbox-card {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    font-weight: 500;
}

.checkbox-card:hover {
    border-color: #7ab8e8;
    box-shadow: 0 2px 8px rgba(122, 184, 232, 0.2);
}

.checkbox-card.is-selected {
    border-color: #5a9fd4;
    background-color: #f0f7fc;
}

.checkbox-card input[type="checkbox"] {
    margin-right: 1rem;
    cursor: pointer;
}

.checkbox-card .checkbox-label {
    font-weight: normal;
    cursor: pointer;
    flex-grow: 1;
    margin: 0;
    padding: 0.25rem 0;
}

.checkbox-card .checkbox {
    display: flex;
    align-items: center;
    margin: 0;
}

/* ============================================
   NESTED CATEGORY/SUBCATEGORY STYLES
   Used for tradesperson category selection
   ============================================ */

/* Main category card - extra light blue for visual distinction */
.checkbox-card.category-card {
    display: flex;
    flex-direction: column;
}

.checkbox-card.category-card.is-selected {
    border-color: #5a9fd4;
    background-color: #f8fbfe;
}

.category-header {
    display: block;
    width: 100%;
    padding: 0.5rem;
}

/* Subcategory container */
.subcategory-container {
    margin-top: 0.5rem;
    margin-left: 1.5rem;
    display: none;
    width: calc(100% - 1.5rem);
}

.subcategory-container.is-visible {
    display: block;
}

/* Subcategory card - slightly darker blue than main category */
.subcategory-card {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-left: 2px solid #e8f4fb;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.subcategory-card:hover {
    background-color: #f8fbfe;
    border-left: 2px solid #7ab8e8;
}

.subcategory-card.is-selected {
    background-color: #f0f7fc;
    border-left: 2px solid #5a9fd4;
}