﻿.store-content {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
    padding-block: 32px 48px;
    font-family: var(--store-font);
    color: var(--home-text);
}

    .store-content *,
    .store-content *::before,
    .store-content *::after {
        box-sizing: border-box;
    }

    .store-content h1,
    .store-content h2,
    .store-content h3,
    .store-content h4 {
        color: var(--home-text);
    }

    .store-content a {
        color: var(--home-accent);
    }

        .store-content a:hover {
            color: var(--home-accent-hover);
        }

    .store-content .text-muted,
    .store-content .text-secondary,
    .store-content .form-text {
        color: var(--home-muted) !important;
    }

    .store-content .text-danger,
    .store-content .field-validation-error,
    .store-content .validation-summary-errors {
        color: var(--store-danger) !important;
    }

    .store-content .text-success {
        color: var(--store-success) !important;
    }

    /* البطاقات */
    .store-content .card {
        border: 1px solid var(--home-border);
        border-radius: var(--store-card-radius);
        background: var(--home-surface);
        color: var(--home-text);
        box-shadow: var(--home-shadow);
    }

    .store-content .card-body {
        padding: 24px;
    }

    .store-content .card-header,
    .store-content .card-footer {
        padding: 16px 24px;
        border-color: var(--home-border);
        background: var(--home-soft);
        color: var(--home-text);
    }

    .store-content .card-img-top {
        border-start-start-radius: var(--store-card-radius);
        border-start-end-radius: var(--store-card-radius);
    }

    .store-content .border-danger {
        border-color: var(--store-danger) !important;
    }

    /* الأزرار */
    .store-content .btn {
        padding: 10px 18px;
        border-radius: var(--store-radius);
        font-weight: 600;
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    }

    .store-content .btn-sm {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* الزر الأساسي */
    .store-content .btn-primary,
    .store-content .btn-primary:focus,
    .store-content .btn-primary:disabled,
    .store-content .btn-primary.disabled {
        border-color: var(--home-accent);
        background-color: var(--home-accent);
        color: var(--home-on-accent);
        box-shadow: none;
    }

        .store-content .btn-primary:hover,
        .store-content .btn-primary:active,
        .store-content .btn-primary.active {
            border-color: var(--home-accent-hover);
            background-color: var(--home-accent-hover);
            color: var(--home-on-accent);
            box-shadow: none;
        }

    /* الزر ذو الإطار الملون */
    .store-content .btn-outline-primary,
    .store-content .btn-outline-primary:focus,
    .store-content .btn-outline-primary:disabled,
    .store-content .btn-outline-primary.disabled {
        border-color: var(--home-accent);
        background-color: transparent;
        color: var(--home-accent);
        box-shadow: none;
    }

        .store-content .btn-outline-primary:hover,
        .store-content .btn-outline-primary:active,
        .store-content .btn-outline-primary.active {
            border-color: var(--home-accent);
            background-color: var(--home-accent);
            color: var(--home-on-accent);
            box-shadow: none;
        }

    /* الزر الثانوي */
    .store-content .btn-outline-secondary,
    .store-content .btn-outline-secondary:focus,
    .store-content .btn-outline-secondary:disabled,
    .store-content .btn-outline-secondary.disabled {
        border-color: var(--home-border);
        background-color: transparent;
        color: var(--home-muted);
        box-shadow: none;
    }

        .store-content .btn-outline-secondary:hover,
        .store-content .btn-outline-secondary:active,
        .store-content .btn-outline-secondary.active {
            border-color: var(--home-muted);
            background-color: var(--home-soft);
            color: var(--home-text);
            box-shadow: none;
        }

    /* الأزرار التي تعبّر عن إجراء ناجح أو خطر أو تحذير */
    .store-content .btn-success,
    .store-content .btn-danger,
    .store-content .btn-warning {
        border-color: transparent;
        background-color: var(--home-soft);
        box-shadow: none;
    }

    .store-content .btn-success,
    .store-content .btn-outline-success {
        border-color: var(--store-success);
        color: var(--store-success);
    }

    .store-content .btn-danger,
    .store-content .btn-outline-danger {
        border-color: var(--store-danger);
        color: var(--store-danger);
    }

    .store-content .btn-warning,
    .store-content .btn-outline-warning {
        border-color: var(--store-warning);
        color: var(--store-warning);
    }

    .store-content .btn-outline-success,
    .store-content .btn-outline-danger,
    .store-content .btn-outline-warning {
        background-color: transparent;
        box-shadow: none;
    }

        .store-content .btn-success:hover,
        .store-content .btn-success:focus,
        .store-content .btn-success:active,
        .store-content .btn-outline-success:hover,
        .store-content .btn-outline-success:focus,
        .store-content .btn-outline-success:active {
            border-color: var(--store-success);
            background-color: var(--home-soft);
            color: var(--store-success);
            box-shadow: none;
        }

        .store-content .btn-danger:hover,
        .store-content .btn-danger:focus,
        .store-content .btn-danger:active,
        .store-content .btn-outline-danger:hover,
        .store-content .btn-outline-danger:focus,
        .store-content .btn-outline-danger:active {
            border-color: var(--store-danger);
            background-color: var(--home-soft);
            color: var(--store-danger);
            box-shadow: none;
        }

        .store-content .btn-warning:hover,
        .store-content .btn-warning:focus,
        .store-content .btn-warning:active,
        .store-content .btn-outline-warning:hover,
        .store-content .btn-outline-warning:focus,
        .store-content .btn-outline-warning:active {
            border-color: var(--store-warning);
            background-color: var(--home-soft);
            color: var(--store-warning);
            box-shadow: none;
        }

    /* وضوح التنقل بلوحة المفاتيح */
    .store-content .btn:focus-visible,
    .store-content a:focus-visible,
    .store-content input:focus-visible,
    .store-content select:focus-visible,
    .store-content textarea:focus-visible {
        outline: 3px solid var(--home-accent);
        outline-offset: 3px;
        box-shadow: none;
    }

    .store-content .btn:disabled,
    .store-content .btn.disabled {
        opacity: 0.55;
    }

    /* الحقول */
    .store-content .form-label {
        margin-bottom: 8px;
        font-weight: 600;
    }

    .store-content .form-control,
    .store-content .form-select {
        min-height: 44px;
        border: 1px solid var(--home-border);
        border-radius: var(--store-radius);
        background-color: var(--home-surface);
        color: var(--home-text);
    }

        .store-content .form-control::placeholder {
            color: var(--home-muted);
            opacity: 1;
        }

        .store-content .form-control:focus,
        .store-content .form-select:focus {
            border-color: var(--home-accent);
            background-color: var(--home-surface);
            color: var(--home-text);
            box-shadow: none;
        }

        .store-content .form-control:disabled,
        .store-content .form-control[readonly],
        .store-content .form-select:disabled {
            background-color: var(--home-soft);
            color: var(--home-muted);
        }

    .store-content .input-group-text {
        border-color: var(--home-border);
        background: var(--home-soft);
        color: var(--home-text);
    }

    .store-content .form-check-input {
        border-color: var(--home-border);
        background-color: var(--home-surface);
    }

        .store-content .form-check-input:checked {
            border-color: var(--home-accent);
            background-color: var(--home-accent);
        }

        .store-content .form-check-input:focus {
            border-color: var(--home-accent);
            box-shadow: none;
        }

    /* الجداول */
    .store-content .table {
        --bs-table-bg: var(--home-surface);
        --bs-table-accent-bg: transparent;
        --bs-table-striped-color: var(--home-text);
        --bs-table-striped-bg: var(--home-soft);
        --bs-table-hover-color: var(--home-text);
        --bs-table-hover-bg: var(--home-soft);
        --bs-table-active-color: var(--home-text);
        --bs-table-active-bg: var(--home-soft);
        color: var(--home-text);
        border-color: var(--home-border);
    }

        .store-content .table > :not(caption) > * > * {
            color: var(--home-text);
            border-color: var(--home-border);
        }

        .store-content .table > thead > tr > th {
            padding: 14px 16px;
            background-color: var(--home-soft);
            color: var(--home-text);
            font-weight: 700;
        }

        .store-content .table > tbody > tr > td,
        .store-content .table > tbody > tr > th {
            padding: 14px 16px;
        }

        .store-content .table caption {
            color: var(--home-muted);
        }

    .store-content .table-responsive {
        border-radius: var(--store-radius);
    }

    /* الرسائل */
    .store-content .alert {
        border: 1px solid var(--home-border);
        border-radius: var(--store-radius);
        background: var(--home-soft);
        color: var(--home-text);
    }

    .store-content .alert-success {
        border-color: var(--store-success);
        color: var(--store-success);
    }

    .store-content .alert-danger {
        border-color: var(--store-danger);
        color: var(--store-danger);
    }

    .store-content .alert-warning {
        border-color: var(--store-warning);
        color: var(--store-warning);
    }

    .store-content .alert-info {
        border-color: var(--home-accent);
        color: var(--home-text);
    }

    /* عناصر مشتركة */
    .store-content hr {
        border-color: var(--home-border);
        opacity: 1;
    }

    .store-content .list-group-item {
        border-color: var(--home-border);
        background: var(--home-surface);
        color: var(--home-text);
    }

    .store-content .page-link {
        border-color: var(--home-border);
        background: var(--home-surface);
        color: var(--home-accent);
    }

        .store-content .page-link:hover {
            background: var(--home-soft);
            color: var(--home-accent-hover);
        }

    .store-content .page-item.active .page-link {
        border-color: var(--home-accent);
        background: var(--home-accent);
        color: var(--home-on-accent);
    }

    .store-content .page-item.disabled .page-link {
        border-color: var(--home-border);
        background: var(--home-soft);
        color: var(--home-muted);
    }

@media (max-width: 575px) {
    .store-content {
        width: calc(100% - 32px);
        padding-block: 24px 32px;
    }

        .store-content .card-body {
            padding: 18px;
        }

        .store-content .card-header,
        .store-content .card-footer {
            padding: 14px 18px;
        }

        .store-content .table > thead > tr > th,
        .store-content .table > tbody > tr > td {
            padding: 10px 12px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .store-content .btn {
        transition: none;
    }
}
