/* ════════════════════════════════════════════════════════════
   custom-check.css — the project's one checkbox design, for every non-admin layout.
   An exact copy of the "Custom Checkbox" block in admin.css (the dashboard already
   has it there). Markup:
     <label class="custom-check">
         <input type="checkbox" />
         <span class="custom-check-box"></span>
         <span class="custom-check-label">...</span>
     </label>
   ════════════════════════════════════════════════════════════ */
.custom-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    min-width: 90px;
    direction: inherit;
}

    .custom-check input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

.custom-check-box {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1.5px solid rgba(200,162,122,.4);
    background: #F9F6F2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .18s ease;
}

[data-theme="dark"] .custom-check-box {
    background: #2a2a2a;
    border-color: rgba(200,162,122,.25);
}

.custom-check:hover .custom-check-box {
    border-color: var(--gold, #C8A27A);
    background: rgba(200,162,122,.08);
}

.custom-check input:checked + .custom-check-box {
    background: linear-gradient(231.82deg, #69452B 27.99%, #CF8855 102.97%);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(200,162,122,.3);
}

.custom-check input:focus-visible + .custom-check-box {
    outline: 2px solid var(--gold, #C8A27A);
    outline-offset: 2px;
}

.custom-check-box::after {
    content: '';
    width: 6px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0;
    transition: opacity .15s ease;
    display: block;
}

.custom-check input:checked + .custom-check-box::after {
    opacity: 1;
}

.custom-check-label {
    font-family: 'Tajawal', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    line-height: 1.2;
    transition: color .18s;
}

[data-theme="dark"] .custom-check-label {
    color: #999;
}

.custom-check:has(input:checked) .custom-check-label {
    color: #7a5c1e;
}

[data-theme="dark"] .custom-check:has(input:checked) .custom-check-label {
    color: #C8A27A;
}