/*
 * Compatibility shim: InstaCarePak's ~75 existing admin pages still reference the
 * old theme's custom class names and CSS custom properties. Rather than
 * rewriting markup on every page, this file re-maps those class names onto
 * the new (eClassify-derived) visual language so every page inherits the new
 * look automatically through the shared layout.
 */

/* Existing pages use h4/h5 heavily inside DataTable cell renderers as an
   "emphasized readable text" utility, not as real headings. The new theme
   sizes h4/h5 for actual page headings (1.25rem+), making table content
   look oversized. */
h4, .h4 {
    font-size: 1.1rem !important;
}
h5, .h5 {
    font-size: 0.95rem !important;
}

/*
 * Bootstrap 4 to 5 utility class compatibility.
 * The new theme's CSS is Bootstrap 5-based; Bootstrap 5 renamed or dropped a
 * number of utility classes still used throughout the existing pages: mr and
 * ml became me and ms, text-right and text-left became text-end and
 * text-start, plus form-row, input-group-prepend/append, custom-select,
 * font-weight utilities, and float-right/left.
 * Without these, two-column form-row layouts collapse and spacing/alignment
 * breaks across the app. Values match Bootstrap 4's own spacer scale.
 */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

.form-row>.col,
.form-row>[class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.text-right { text-align: right !important; }
.text-left { text-align: left !important; }

.float-right { float: right !important; }
.float-left { float: left !important; }

.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }

.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters>.col,
.no-gutters>[class*="col-"] { padding-right: 0; padding-left: 0; }

/* Bootstrap 4 input-group addons (v5 flattened these into direct children) */
.input-group-prepend,
.input-group-append {
    display: flex;
}

.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    border-radius: 8px;
}

.input-group-prepend {
    margin-right: -1px;
}

.input-group-append {
    margin-left: -1px;
}

/* Bootstrap 4 custom-select (v5 renamed to .form-select) */
.custom-select {
    display: block;
    width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") right 0.75rem center/16px 12px no-repeat;
    appearance: none;
}

.custom-select:focus {
    border-color: var(--bs-primary);
    outline: 0;
}

:root {
    --font: "Nunito", sans-serif;
    --white-color: #fff;
    --black-color: #212529;
    --black-50: rgba(0, 0, 0, 0.5);
    --body-color: #eef1f6;
    --primary-color: var(--bs-primary, #00B2CA);
    --assest-color: #eef1f6;
    --partition-color: #141218;
    --green-color: #198754;
    --red-color: #dc3545;
    --yellow-color: #ffc107;
    --blue-color: #0d6efd;
    --purple-color: #6f42c1;
    --dark-color: #343a40;
}

/* Buttons */
.btn-default {
    background: var(--bs-primary);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border: 1px solid transparent;
    transition: all 0.3s;
    padding: 8px 20px;
}

.btn-default:hover {
    color: var(--bs-primary);
    background: transparent;
    border-color: var(--bs-primary);
}

.btn-cancel {
    background: #6c757d;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border: 1px solid transparent;
    transition: all 0.3s;
    padding: 8px 20px;
}

.btn-cancel:hover {
    color: #6c757d;
    background: transparent;
    border-color: #6c757d;
}

.upload-btn {
    background: var(--bs-primary) !important;
    color: #fff !important;
}

.upload-btn:hover {
    background: #fff !important;
    border: 2px dashed var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

/* Primary content card wrapper (used on nearly every list/form page) */
.custom-border-card {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    border: 1px solid #f0f0f3;
    padding: 20px 25px;
    border-radius: 14px;
    margin-bottom: 25px;
}

.custom-border-card .card-header {
    font-size: 18px !important;
    background: transparent !important;
    padding: 0 0 10px !important;
    font-weight: 700;
    border-bottom: 0 !important;
    margin: 0 !important;
    color: #141218;
}

.custom-border-card .card-body {
    padding: 18px 0 10px;
}

/* Counter / stat cards used outside the dashboard (reports, etc.) */
.custom-card {
    background-color: #fff;
    border: 1px solid #f0f0f3;
    border-radius: 14px;
    transition: all 0.3s ease-in-out;
}

.custom-card .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
}

.custom-card .card-body h3 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #141218;
}

.custom-card .card-body span {
    font-size: 1rem;
    color: #8A898C;
    font-weight: 600;
}

.card-icon-primary {
    padding: 15px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent) !important;
    color: var(--bs-primary) !important;
}

.card-color-primary:hover {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .08);
}

/* Search / filter bar on list pages */
.page-search {
    display: flex;
    align-items: center;
    background: #f7f8fa;
    border-radius: 8px;
    padding: 7px;
}

.page-search .input-group-text,
.page-search .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
}

.page-search .sorting {
    display: flex;
    align-items: center;
    width: 290px;
    background: #fff;
    padding: 2px 12px;
    border-radius: 8px;
}

.page-search .sorting label {
    min-width: 60px;
    margin: 0;
    font-weight: 600;
}

/* Status / badge pills */
.status-badge {
    display: inline-block;
    padding: 5px 10px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: 6px;
}

.order-badge,
.product {
    display: inline-block;
    padding: 0.45em 0.6em;
    font-size: 90%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: 6px;
}

.badge-success,
.bg-success {
    color: #fff;
    background: var(--green-color) !important;
}

.badge-danger,
.bg-danger {
    color: #fff;
    background: var(--red-color) !important;
}

.badge-warning,
.bg-warning {
    color: #fff;
    background: var(--yellow-color) !important;
}

.badge-info,
.bg-info {
    color: #fff;
    background: var(--blue-color) !important;
}

.badge-dark,
.bg-dark {
    color: #fff;
    background: var(--dark-color) !important;
}

/* The new theme redefines Bootstrap's --bs-dark to #f2f7ff (an off-white
   surface color for its own dark-mode support) instead of a dark text
   color. .text-dark inherits that var directly, making text throughout
   the existing pages nearly invisible on light backgrounds. */
.text-dark {
    color: var(--dark-color) !important;
}

/* mw utilities */
.mw-120 {
    min-width: 120px;
}

.mw-150 {
    min-width: 150px;
}

/* Avatar upload widget (add/edit forms) */
.avatar-upload {
    position: relative;
    max-width: 205px;
}

.avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
}

.avatar-edit input {
    display: none;
}

.avatar-edit input+label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    margin-right: 30px;
    margin-top: 125px;
    border-radius: 100%;
    background: #fff;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(16, 24, 40, .12);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out;
}

.avatar-edit input+label:hover {
    background: #eef1f6;
}

.avatar-edit input+label:after {
    content: "\f0ee";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #607080;
    position: absolute;
    top: 130px;
    left: 0;
    right: 30px;
    text-align: center;
    margin: auto;
}

.avatar-upload .avatar-preview {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 10%;
}

.avatar-upload .avatar-preview>img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    border-radius: 10px;
}

.avatar-upload .avatar-preview>img:hover {
    transform: scale(1.05);
}

.landscape-preview {
    width: 220px !important;
    height: 120px !important;
}

/* Text colors */
.primary-color {
    color: var(--bs-primary) !important;
}

.text-gray {
    color: #8A898C !important;
}

.light-gray {
    background: #f7f8fa !important;
}

/* Pagination */
.pagination {
    padding: 5px;
    border: 1px solid #eef1f6;
    display: inline-flex;
    border-radius: 10px;
    margin: 35px auto 0;
}

.pagination .page-link {
    border: 0;
    height: 30px;
    width: 30px;
    background: #eef1f6 !important;
    margin: 0 5px;
    border-radius: 50px !important;
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .active .page-link {
    background: var(--bs-primary) !important;
    color: #fff !important;
}

/* Bootstrap 4-style custom form controls (radio/checkbox/switch) --
   the new theme's CSS is Bootstrap 5-based and no longer ships these. */
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.75rem;
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
    cursor: pointer;
}

.custom-control-label::before {
    position: absolute;
    top: 0.125rem;
    left: -1.75rem;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    background-color: #fff;
    border: 1px solid #adb5bd;
}

.custom-control-label::after {
    position: absolute;
    top: 0.125rem;
    left: -1.75rem;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    background: no-repeat 50%/50% 50%;
}

.custom-radio .custom-control-label::before {
    border-radius: 50%;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

/* Legacy pill toggle switch (label.switch > input + span.slider) used on
   several old admin/seller pages (delivery/handling charges, item status, etc.) */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 4px;
    bottom: 3px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50%;
}

.switch input:checked+.slider {
    background-color: var(--bs-primary);
}

.switch input:checked+.slider:before {
    transform: translateX(26px);
}

.switch .slider.round {
    border-radius: 34px;
}

.switch .slider.round:before {
    border-radius: 50%;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0.25rem;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-control-input:disabled~.custom-control-label {
    color: #6c757d;
}

.custom-control-input:disabled~.custom-control-label::before {
    background-color: #e9ecef;
}

/* Dashboard-style report boxes reused on report/earning pages */
.cart-bg,
.category-box,
.video-box {
    background: #fff;
    border: 1px solid #f0f0f3;
    border-radius: 14px;
    padding: 18px;
}

.box-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.box-title .title {
    color: #141218;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.summary-table-card {
    color: #141218;
}

.border-card {
    padding: 10px 0;
    border-bottom: 1px solid #eef1f6;
}

.earning-title {
    color: #8A898C;
    font-size: 14px;
    font-weight: 600;
}

.earning-amount {
    color: #141218;
    font-size: 22px;
    font-weight: 700;
}

/* Mobile-only in-page heading (the topbar already shows the page title on
   desktop via @yield('page_title') -- without this rule it duplicates it) */
.page-title-sm {
    display: none;
}

@media (max-width: 991px) {
    .page-title-sm {
        display: block;
        font-size: 26px;
        font-weight: 600;
        margin: -10px 0 20px;
        border-bottom: 1px solid #eef1f6;
        padding-bottom: 5px;
    }
}

/* Breadcrumb wrapper on ~75 pages adds its own divider line right above the
   tab strip / card, on top of the topbar and card's own edges -- redundant.
   Scoped with :has() so it only strips this specific wrapper, not every
   legitimate use of .border-bottom elsewhere in the app. */
.border-bottom.row:has(.breadcrumb) {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Toastr notifications, restyled to match the new theme */
#toast-container>div {
    position: relative;
    font-family: "Nunito", sans-serif;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    opacity: 1;
    padding: 16px 20px 16px 52px;
    background-position: 16px center;
    background-size: 22px;
}

#toast-container>div:hover {
    box-shadow: 0 10px 28px rgba(16, 24, 40, .2);
}

.toast-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.toast-message {
    font-size: 13px;
    line-height: 1.5;
}

.toast-close-button {
    text-shadow: none;
    opacity: .8;
    font-weight: 400;
}

.toast-success {
    background-color: var(--green-color) !important;
    background-image: none !important;
}

.toast-success:before {
    font-family: "Phosphor" !important;
    content: "\e184";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
}

.toast-error {
    background-color: var(--red-color) !important;
    background-image: none !important;
}

.toast-error:before {
    font-family: "Phosphor" !important;
    content: "\e4f8";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
}

.toast-warning {
    background-color: var(--yellow-color) !important;
    background-image: none !important;
    color: #573a00 !important;
}

.toast-warning:before {
    font-family: "Phosphor" !important;
    content: "\e4e0";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: #573a00;
}

.toast-info {
    background-color: var(--bs-primary) !important;
    background-image: none !important;
}

.toast-info:before {
    font-family: "Phosphor" !important;
    content: "\e2ce";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
}

/*
 * DataTables' own column-sort indicators (every admin list table) are plain
 * Unicode arrow characters ("↑"/"↓") baked into dataTables.bootstrap4.min.css
 * via CSS `content` - not an <i class="..."> tag, so the Font Awesome ->
 * Phosphor icon migration never touched them. Overriding the same
 * before/after pseudo-elements DataTables already defines (same selectors,
 * same opacity/positioning rules untouched) to render Phosphor's dedicated
 * sort-ascending/sort-descending glyphs instead, so every sortable column
 * header matches the rest of the now-Phosphor-only admin panel.
 */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
    font-family: "Phosphor" !important;
    content: "\e444" !important;
    font-size: 0.85em;
}

table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
    font-family: "Phosphor" !important;
    content: "\e446" !important;
    font-size: 0.85em;
}

/*
 * Modern icon-button treatment for every row-level action icon (edit/delete/
 * view/location/etc. across every admin+seller list table, all share this
 * one class). Replaces the old solid-fill + dashed-hover-border + glow-shadow
 * look with a small, consistent, soft-tinted chip - flat by default, filled
 * on hover - and normalizes icon size regardless of whatever inline
 * font-size a given icon happened to get during the Font Awesome -> Phosphor
 * conversion (1.5em/2em/3em etc.), so a row of adjacent action icons always
 * lines up instead of looking mismatched.
 */
.edit-delete-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none !important;
    outline: none;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(62, 72, 144, 0.08);
    color: var(--primary-color, #3e4890);
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.edit-delete-btn i {
    font-size: 1.05em !important;
    line-height: 1;
}

.edit-delete-btn:hover {
    background: var(--primary-color, #3e4890) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.edit-delete-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 72, 144, 0.2) !important;
}

/* Small consistent gap between adjacent action icons in a row, instead of
   relying on justify-content-around to space them out unevenly. */
.d-flex.justify-content-around:has(> .edit-delete-btn) {
    gap: 6px;
}

/*
 * Soft circular badge for the large "type/status" glyphs used in list
 * tables (login-method icons, locked/verification state, etc.) - these were
 * bare 3em icons sitting directly in a table cell, which looked heavy and
 * inconsistent with the rest of the now-lightweight icon treatment. Wrap
 * markup update lives alongside each usage (search `type-icon-badge` in
 * resources/views/admin/**).
 */
.type-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(62, 72, 144, 0.08);
    color: var(--primary-color, #3e4890);
}

.type-icon-badge i {
    font-size: 1.3em !important;
}

/*
 * admin/seller/index.blade.php (the "Sellers" list under Customers & Sellers)
 * uses a card-grid layout (.seller-container/.seller-card/...) that was only
 * ever styled in the old assets/css/style.css stylesheet - which the current
 * admin layout (admin/layout/page-app.blade.php) never actually loads (it
 * loads assets/css/main/app.css instead). So this page has been rendering
 * completely unstyled all along; it just went unnoticed until a seller with
 * no uploaded photo hit the image fallback, which - with zero CSS constraining
 * it - rendered at its native full size instead of a small circular avatar.
 * Re-declaring the same rules here (this file's whole purpose is exactly
 * this: old class names the current layout doesn't otherwise style),
 * swapping the old theme's undefined --white-color/--primary-color variables
 * for real values / this theme's actual --bs-primary.
 */
.seller-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 100%;
}

.seller-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: 100%;
    background: #f9faff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 14px 20px;
    text-align: left;
    transition: box-shadow 0.2s ease;
}

.seller-card:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.seller-card.active {
    box-shadow: 0 0 0 2px var(--bs-primary, #4569e7) inset;
}

.seller-card-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.seller-card img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid rgb(223, 213, 213);
    object-fit: cover;
}

.seller-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.seller-card-name {
    flex: 1 1 200px;
    min-width: 160px;
}

.seller-card h3 {
    margin: 0 0 2px;
    font-size: 16px;
}

.seller-card p {
    color: #777;
    font-size: 14px;
    margin: 0;
}

.seller-card .rating {
    color: #f4b400;
    font-weight: bold;
    white-space: nowrap;
}

.seller-card button {
    background-color: #484875;
    color: #fff;
    padding: 7px 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    outline: none;
    white-space: nowrap;
}

.seller-card .icon-list {
    margin: 0;
}

.icon-list .btn {
    background: #fff;
    padding: 2px 2px;
    margin-right: 6px;
    border-radius: 10px;
}

.seller-card-view button {
    width: 100%;
}

@media (max-width: 768px) {
    .seller-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .seller-card-header {
        align-self: center;
    }

    .seller-card-body {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .seller-card-name {
        min-width: 0;
    }

    .seller-card .icon-list {
        justify-content: center;
    }
}

/*
 * admin/seller/profile.blade.php ("Seller profile", opened via View Profile
 * on the Sellers list) has the same root cause as .seller-card above: it was
 * built against the old assets/css/style.css theme, which the current admin
 * layout never loads. The whole page - header banner, avatar, stat boxes,
 * contacts panel, and product grid - has been rendering completely unstyled.
 * Migrating the missing rules here rather than there for the same reason:
 * this file is exactly the established place for "old class names, current
 * layout doesn't style them." Reuses the --white-color/--primary-color/
 * --assest-color/--body-color/--partition-color aliases already declared in
 * the :root block above, so no literal-value substitution is needed here.
 */
.custom-border-card {
    box-shadow: 0 15px 35px var(--body-color);
    border: 1px solid var(--assest-color);
    padding: 20px 25px;
    border-radius: 15px;
    margin-bottom: 25px;
}

.custom-border-card .card-header {
    font-size: 18px;
    background: transparent;
    padding: 0;
    font-weight: 700;
    border-bottom: 2px solid var(--body-color);
    padding-bottom: 15px;
    color: var(--partition-color);
}

.custom-border-card .card-body {
    padding: 18px 0 10px;
}

.custom-border-card .header {
    position: relative;
    padding: 20px;
}

.profile-header-bg {
    background-color: #acafb0;
    height: 120px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px 15px 0 0;
}

.profile-header-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
}

.profile-store-logo img {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.profile-store-details {
    flex: 1;
    margin-left: 20px;
}

.profile-store-details h1 {
    margin-top: 75px;
    font-size: 24px;
    font-weight: 600;
}

.profile-store-details p {
    color: #6c757d;
}

.profile-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 20px;
}

.profile-stats {
    grid-column: span 2;
    display: flex;
    gap: 20px;
}

.profile-stat-box {
    background-color: var(--white-color);
    padding: 20px;
    border-radius: 10px;
    text-align: left;
    border: 1px solid #e3e3e3;
}

.profile-stat-box p {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 10px;
}

.profile-stat-box strong {
    font-size: 18px;
    color: var(--primary-color);
}

.profile-stat-box h3 {
    font-size: 24px;
    color: var(--primary-color);
    font-weight: bold;
}

.profile-contacts,
.profile-address {
    background-color: var(--white-color);
    padding: 20px;
    border-radius: 10px;
}

.profile-contacts h3,
.profile-address h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.profile-contacts p,
.profile-address p {
    margin-bottom: 8px;
    color: #6c757d;
    font-size: 14px;
}

.profile-products-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.profile-product-card {
    background-color: var(--assest-color);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease;
    position: relative;
}

.profile-product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.profile-product-card:hover {
    transform: scale(1.05);
}

.profile-product-name {
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}

.review-btn {
    background-color: #02997d;
    color: #fff;
    font-weight: bold;
    border: none;
}

.review-btn:hover {
    background-color: #037d66;
    color: #fff;
}

.profile-product-price {
    color: #666;
    font-weight: bold;
}

.profile-rating {
    color: gold;
}

.profile-rating i {
    color: gold;
    margin-left: 2px;
}

.action-buttons {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10;
    gap: 10px;
}

.profile-product-card:hover .action-buttons {
    display: flex;
}

.action-buttons .btn {
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.action-buttons .edit-btn {
    background-color: #4e45b8;
}

.action-buttons .detail-btn {
    background-color: #709b51;
}

.action-buttons .delete-btn {
    background-color: #e74c3c;
}

.action-buttons .edit-btn:hover {
    background-color: #3d3792;
}

.action-buttons .delete-btn:hover {
    background-color: #c0392b;
}

.action-buttons .detail-btn:hover {
    background-color: #56773f;
}

@media (max-width: 992px) {
    .profile-content {
        grid-template-columns: 1fr 1fr;
    }

    .profile-stats {
        grid-column: span 2;
    }

    .profile-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .profile-header-content {
        flex-direction: column;
        text-align: center;
    }

    .profile-store-details {
        margin-left: 0;
    }

    .profile-store-details h1 {
        margin-top: 15px;
    }

    .profile-content {
        grid-template-columns: 1fr;
    }

    .profile-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
 * admin/customer/profile.blade.php ("Customer profile", opened via the new
 * eye icon on the Customers list). Reuses the .profile-* rules above (this
 * page shares the exact same header/stats/contacts layout as the Seller
 * profile), plus these two new rules for its address and recent-orders row
 * lists.
 */
.profile-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--assest-color);
}

.profile-list-row:last-child {
    border-bottom: none;
}

.profile-list-badge {
    flex: 0 0 auto;
    background: var(--assest-color);
    color: var(--partition-color);
    font-weight: 600;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.profile-list-text {
    flex: 1 1 auto;
    color: #6c757d;
    font-size: 14px;
}

/*
 * admin/orders/edit.blade.php ("View Orders", opened from the Orders list
 * eye icon and the Customer Profile's Recent Orders link) has the same root
 * cause as everything else in this file: .order-header/.order-number/
 * .info-card/.order-summary/.order-tracking/.step/.delivery-instructor-* are
 * only defined in the old, unloaded assets/css/style.css. Most visibly, the
 * customer/seller/shopper avatar images in the info cards had no size
 * constraint at all and rendered at full native size. Migrating the full set
 * here. Skips the original .order-details .order-badge rule (it referenced
 * an undefined --iq-white variable even in the old theme, and .order-badge
 * already gets its color from the existing .status-badge classes above).
 */
.order-details {
    border-radius: 8px;
    max-width: 100%;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.order-number p {
    font-size: 24px;
    margin: 0;
}

.invoice-btn {
    background-color: #c32d46;
    color: #fff;
    padding: 5px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.invoice-btn:hover {
    background-color: #b0263d;
}

.info-section {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.info-card {
    background-color: var(--assest-color);
    border: 2px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
    flex: 1 1 300px;
}

.info-card h4 {
    margin-bottom: 10px;
    font-size: 16px;
}

.info-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.info-text {
    flex: 1;
    padding-right: 10px;
}

.info-text p {
    margin: 5px 0;
}

.info-card img {
    border-radius: 4px;
    width: 65px;
    height: 65px;
    object-fit: cover;
    flex: 0 0 auto;
}

.order-summary {
    background-color: #f9fafb;
    padding: 20px;
    border-radius: 8px;
    max-width: 300px;
    border: 1px solid #eaeaea;
    color: #333;
}

.order-summary h4 {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
}

.summary-item.total {
    font-weight: bold;
    font-size: 16px;
}

.delivery-status p {
    margin: 0;
    font-size: 17px;
    font-weight: bold;
    color: #5f5e5e;
}

.delivery-status strong {
    color: #000;
}

.order-tracking {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin: 40px 20px;
    flex-wrap: wrap;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step .icon {
    background-color: #f0f0f0;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s ease;
}

.step .icon i {
    font-size: 35px;
}

.step.active .icon {
    background-color: #00796b;
    color: #fff;
}

.step .label {
    text-align: center;
    margin-top: 10px;
}

.step .label p {
    font-weight: bold;
    margin: 0;
}

.step .label span {
    font-size: 12px;
    color: gray;
}

.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 100%;
    width: 200px;
    height: 3px;
    background-color: #e0e0e0;
}

.step.active:not(:last-child)::after {
    background-color: #00796b;
}

.step + .step {
    margin-left: 180px;
}

.delivery-instructor-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.delivery-instructor-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
}

.line {
    width: 4px;
    height: 40px;
    background-color: var(--primary-color);
    margin-right: 10px;
    border-radius: 2px;
}

.delivery-instructor-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.delivery-instructor-title {
    font-weight: 600;
}

@media (max-width: 768px) {
    .order-tracking {
        flex-direction: column;
        margin: 20px 0;
    }

    .step + .step {
        margin-left: 0;
        margin-top: 30px;
    }

    .step:not(:last-child)::after {
        display: none;
    }
}

/*
 * admin/item/index.blade.php (the main Products list). Was a card grid
 * reusing .profile-products-grid/.profile-product-card (the same classes
 * the Seller Profile page's product grid uses) -- switched this page to its
 * own horizontal row list instead, matching the pattern already applied to
 * the Sellers list, without touching the Seller Profile page's grid.
 */
.product-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.product-list-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
    background: var(--assest-color);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 10px 16px;
    text-align: left;
    transition: box-shadow 0.2s ease;
}

.product-list-row:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.product-list-row.active {
    box-shadow: 0 0 0 2px var(--bs-primary, #4569e7) inset;
}

.product-list-thumb {
    flex: 0 0 auto;
    display: block;
}

.product-list-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
}

.product-list-info {
    flex: 1 1 auto;
    min-width: 160px;
}

.product-list-name {
    font-weight: 500;
    margin: 0 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-list-price {
    color: #666;
    font-weight: bold;
    font-size: 14px;
}

@media (max-width: 768px) {
    .product-list-row {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .product-list-thumb {
        align-self: center;
    }

    .product-list-info {
        min-width: 0;
        text-align: center;
    }
}

/*
 * admin/item/detail.blade.php ("View Product" / Product Details, opened via
 * the eye icon on the Products list) and admin/item_request/detail.blade.php
 * (the equivalent page for pending product-request submissions -- same
 * author, same markup) share the exact same root cause as everything else in
 * this file: .product-container/.image-gallery/.product-image/
 * .product-details/.product-title/.product-price/.product-description/
 * .product-info, the .custom-tabs/.inline-tabs pill tab-switcher
 * (Description/Attributes/FAQ/Reviews), and the FAQ + review-card rules were
 * only ever defined in the old, unloaded assets/css/style.css. With none of
 * it applying, the product's main image (a full-size default placeholder
 * when no image is set) had no flex/max-width constraint at all and
 * rendered at native size. Migrating the whole "Product Details css" block
 * from style.css verbatim (the --primary-color/--white-color/--black-color/
 * --assest-color aliases in the :root block above resolve the old
 * variables), plus:
 *   - a mobile breakpoint stacking the three columns and turning the
 *     thumbnail rail into a horizontal row, since the original had none,
 *     matching the pattern already used for .seller-card/.product-list-row/
 *     .order-tracking above;
 *   - object-fit: cover on .reviewer-img, which had a fixed 60x60 size in
 *     the original but no object-fit, so a non-square customer photo would
 *     distort instead of crop.
 *
 * Note: .attributes-section, .product-reviews, .product-faq, and the bare
 * .faq-item wrapper (only .faq-item-section is actually styled) appear in
 * the markup of one or both pages but were never defined even in the old
 * style.css -- plain unstyled wrapper divs in both themes, not a regression
 * from this layout switch, so intentionally left alone here.
 */
.product-container {
    display: flex;
}

.image-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 20px;
}

.image-gallery img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
}

.product-info .product {
    color: var(--white-color);
}

.product-image {
    flex: 1;
}

.product-image img {
    max-width: 80%;
    border-radius: 10px;
}

.product-details {
    flex: 1;
}

.product-title {
    font-size: 28px;
    font-weight: bold;
    color: var(--black-color);
    margin-bottom: 10px;
}

.product-price {
    font-size: 20px;
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 20px;
}

.product-description {
    font-size: 16px;
    color: var(--black-color);
    line-height: 1.5;
    margin-bottom: 20px;
}

.product-info {
    font-size: 16px;
    color: var(--black-color);
}

.product-info div {
    margin-bottom: 10px;
}

.product-info strong {
    color: var(--black-color);
}

.product-info span {
    margin-left: 10px;
    color: var(--black-color);
    font-size: 16px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .product-container {
        flex-direction: column;
    }

    .image-gallery {
        flex-direction: row;
        flex-wrap: wrap;
        padding-right: 0;
        padding-bottom: 15px;
    }

    .product-image img {
        max-width: 100%;
    }
}

/* Description/Attributes/FAQ/Reviews pill tab-switcher on the same pages */
.custom-tabs {
    margin: 20px 0;
    background: var(--assest-color);
    border-radius: 100px;
}

.custom-tabs li.nav-item {
    flex: 1;
    text-align: center;
}

.custom-tabs .nav-link {
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: var(--black-color);
    padding: 10px;
}

.custom-tabs .nav-link.active {
    background: var(--primary-color);
}

.inline-tabs {
    display: inline-flex;
    position: relative;
    z-index: 2;
}

.inline-tabs li.nav-item {
    flex: none;
}

.inline-tabs .nav-link {
    padding: 10px 35px;
}

@media (max-width: 767px) {
    .inline-tabs {
        flex-wrap: nowrap;
        overflow: auto;
        margin-top: 0;
    }

    .inline-tabs::-webkit-scrollbar {
        display: none;
    }

    .inline-tabs .nav-link {
        padding: 8px 14px;
    }
}

/* FAQ tab content (item/detail.blade.php only) */
.faq-item-section {
    margin-bottom: 15px;
    padding: 15px;
    background-color: #ffffff;
    border: 2px solid #ddd;
    border-radius: 10px;
}

.faq-question h4 {
    font-size: 18px;
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
}

.faq-answer p {
    font-size: 16px;
    color: #666;
    margin-left: 10px;
}

/* Reviews tab content (item/detail.blade.php only) */
.review-card {
    background-color: #edf0f3;
    border-radius: 8px;
    padding-top: 15px;
    padding-left: 20px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.reviewer-info {
    display: flex;
    align-items: center;
}

.reviewer-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.reviewer-name {
    font-size: 16px;
    font-weight: bold;
}

.review-date {
    font-size: 14px;
    color: #888;
}

.review-rating {
    display: flex;
    align-items: center;
}

.stars {
    display: flex;
    margin-right: 10px;
}

.star {
    color: #FFD700;
    font-size: 25px;
    margin-right: 2px;
}

.star.inactive {
    color: #ccc;
}

.review-body {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

/*
 * .order-badge-info / .order-badge-dark-green / .order-badge-gray -- used by
 * admin/item_request/detail.blade.php's yes/no fields and Load More/Less
 * buttons, and by admin/orders/edit.blade.php's "Shipment Details" link.
 * Unlike .badge-success/.badge-info/etc. above, these specific modifier
 * names were never defined in EITHER theme, so they only ever inherited the
 * base .order-badge shape (padding/border-radius from the .order-badge,
 * .product rule near the top of this file) with no color at all. Adding
 * colors here since it's a trivial, obvious gap matching the same palette
 * already established for .badge-info/.badge-success/.badge-dark above --
 * not a style.css migration (there is nothing to migrate), just closing the
 * naming gap with the same convention.
 */
.order-badge-info {
    color: #fff;
    background: var(--blue-color) !important;
}

.order-badge-dark-green {
    color: #fff;
    background: var(--green-color) !important;
}

.order-badge-gray {
    color: #fff;
    background: #6c757d !important;
}

/*
 * admin/dashboard/dashboard.blade.php -- the Top Rated Items grid, the Top
 * Selling Product list, the Most Used Hashtag list, and the Top Seller grid
 * all use .artist-grid-card/.avatar-control/.hashtag-card/.topseller-card/
 * .avatar-wrapper/.topseller-details/.topseller-name/.topseller-fullname/
 * .topseller-total-sold, and the Top Brand widget uses .category-image/
 * .centered -- all old-style.css-only, same root cause as every other page
 * in this file. Most visibly, the Top Seller avatar (.avatar-wrapper img)
 * had a fixed 80x80 size in the original with no object-fit, so a
 * non-square seller photo would distort.
 */
.artist-grid-card {
    padding: 15px;
    border: 1px solid var(--body-color);
    border-radius: 5px;
    margin: 20px 0 0;
    text-align: center;
}

.artist-grid-card .name {
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 5px;
}

.artist-grid-card .post {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 15px;
}

.artist-grid-card .detanils {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.avatar-control {
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hashtag-card {
    padding-top: 10px;
    padding-bottom: 10px;
    border-left: 5px solid var(--primary-color);
    border-radius: 0px;
    font-size: 18px;
    font-weight: 600;
    background-color: var(--white-color);
}

.hashtag-card>.row {
    margin: 0;
}

.hashtag-card>.row .col,
.hashtag-card>.row .col-2 .hashtag-card>.row .col-10 {
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: start;
}

.category-image {
    max-height: 105px;
    height: 105px;
    width: 100%;
    border-radius: 8px;
    filter: blur(1.2px);
    -webkit-filter: blur(1.2px);
}

/* .centered is an absolutely-positioned overlay caption meant to sit on top
   of its sibling .category-image thumbnail (dashboard "Top Brand" widget).
   The column wrapping the pair has no positioning context of its own, so
   without this the caption would position against the nearest ancestor that
   does instead (the whole dash-card), collapsing every brand's name into
   the same spot. Scoped with :has() the same way .border-bottom.row above
   is, so it only affects this specific image+caption column. */
.col-6:has(> .category-image) {
    position: relative;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 100%;
    color: var(--white-color);
    padding-left: 25px;
}

.topseller-card {
    background-color: var(--assest-color);
    border-radius: 16px;
    transition: 0.3s ease;
    min-height: 120px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px;
    width: 100%;
}

.topseller-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.avatar-wrapper {
    flex-shrink: 0;
}

.avatar-wrapper img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.topseller-details {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
}

.topseller-name {
    font-size: 16px;
    font-weight: bold;
    word-break: break-word;
    color: var(--partition-color);
}

.topseller-fullname {
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
    color: var(--partition-color);
}

.topseller-total-sold {
    font-size: 15px;
    font-weight: 500;
    color: #555;
    margin-top: 4px;
}

/*
 * .radio-group -- the pill-style Yes/No or two-way-choice control used on
 * several admin add/edit forms (attributes, compensation, facebook ads,
 * permissions, sections). Reuses the .custom-control/.custom-control-label/
 * .custom-control-input rules already defined above (those still apply as
 * plain Bootstrap-4-style radios); these extra rules are what turn that
 * plain radio pair into the rounded pill-toggle look, and were only ever
 * defined in the old style.css.
 */
.radio-group {
    display: flex;
    margin-bottom: 20px;
}

.radio-group .custom-control {
    padding-left: 0;
    margin-right: 15px;
}

.radio-group .custom-control-label {
    margin-bottom: 0;
    background: var(--assest-color);
    padding: 6px 23px 6px 33px;
    border-radius: 100px;
    font-size: 16px;
}

.radio-group .custom-control-label::before,
.radio-group .custom-control-label:after {
    border-radius: 50%;
    top: 10px;
    left: 10px;
}

.radio-group .custom-control-label:after {
    display: none;
}

.radio-group .custom-control-label::before {
    background: transparent;
    border: 3px solid var(--body-color);
}

.radio-group .custom-control-input:checked~.custom-control-label {
    background: var(--primary-color);
    color: var(--white-color);
}

.radio-group .custom-control-input:checked~.custom-control-label::before {
    background: var(--primary-color);
    border-color: var(--white-color);
}

/*
 * .import-file -- the native file-input control used on the Products
 * add/edit forms (bulk import file) and App Settings (social link icons).
 * Only ever styled in the old style.css; without it the input's
 * browser-default file-selector-button looks visually inconsistent with
 * the rest of the now-restyled form controls.
 */
.import-file {
    color: var(--black-color);
}

.import-file::file-selector-button {
    border-radius: 4px;
    color: var(--partition-color);
    background-color: var(--body-color);
    border: 1px solid var(--assest-color);
    height: 30px;
    cursor: pointer;
}

/*
 * .colorpicker / .colorpicker-component / .hexcolor -- the paired
 * text+native-color-input control used on Pages, Types, and Sections forms
 * (background/title color pickers). Only ever styled in the old style.css.
 */
.colorpicker-component {
    display: flex;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    overflow: hidden;
}

.colorpicker {
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.hexcolor {
    border: none;
    padding: 10px;
    width: 100px;
    outline: none;
}

/*
 * .show-btn / .hide-btn -- the per-row "Show/Hide" (or "Active/Inactive",
 * "Published/Unpublished") status-toggle button rendered by nearly every
 * admin list-page's DataTables status column (categories, brands, hashtags,
 * zipcodes, vehicles, articles, reviews, attributes, and more) and toggled
 * client-side via jQuery removeClass/addClass. Only ever styled in the old
 * style.css, so the button rendered with no color at all -- just plain
 * default button text.
 */
.show-btn,
.hide-btn {
    font-weight: bold;
    font-size: 14px !important;
    padding: 6px 18px;
    border-radius: 5px;
    cursor: pointer;
    border: 2px dashed transparent;
    outline: none;
    color: var(--white-color);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border 0.3s ease,
        box-shadow 0.3s ease;
}

.show-btn {
    background: var(--green-color);
}

.show-btn:hover {
    background: var(--white-color);
    border: 2px dashed var(--green-color);
    color: var(--green-color);
    box-shadow: 0 0 12px var(--green-color);
}

.hide-btn {
    background: var(--red-color);
}

.hide-btn:hover {
    background: var(--white-color);
    border: 2px dashed var(--red-color);
    color: var(--red-color);
    box-shadow: 0 0 12px var(--red-color);
}

.show-btn:focus,
.hide-btn:focus {
    outline: none;
    box-shadow: none;
}

/* .counter-row -- the stat-card row wrapper at the top of Orders, Delivery
   Assignment, and the Earning report. Only these two responsive tweaks ever
   existed for it in the old style.css (the cards inside already get their
   look from .custom-card/.card-color-primary above regardless). */
@media (min-width: 1600px) {
    .counter-row {
        margin-bottom: 20px;
    }
}

@media (max-width: 1280px) {
    .counter-row .col-md {
        padding-right: 5px;
        padding-left: 5px;
    }
}

/* .add-more-pading -- spacing for the "+ Add More Option" button column on
   the Zones add/edit forms. Only ever defined in the old style.css. */
.add-more-pading {
    padding-top: 35px;
}

/* .earning-divider -- the vertical rule between the three earning figures
   (Total/Seller/Shopper) on the Item Sales Report's Today/Month/Year cards.
   Only ever defined in the old style.css; without it the three figures ran
   together with no visual separation. */
.earning-divider {
    width: 2px;
    height: 60px;
    background-color: var(--body-color);
    margin: 0 15px;
}

/*
 * .card-earning / .card-align -- the Today/Month/Year earning-figure card
 * used on admin/item_sales_report/index.blade.php (Product Sales Report) and
 * admin/sales_report/index.blade.php (Sales Report). Only ever defined in
 * the old style.css; without it the cards had no background/padding/
 * border-radius at all and .card-align's figures (meant to sit side by side)
 * stacked in a plain vertical block instead.
 *
 * Both pages reuse the bare .earning-title/.earning-amount class names that
 * a pre-existing rule elsewhere in this file already styles for a different
 * context, so the overrides needed for style.css's actual "Earning-Card"
 * look (centered, larger, different color) are scoped under .card-earning
 * here rather than redeclared bare, to avoid fighting that other rule.
 */
.card-earning {
    background-color: var(--assest-color);
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
    width: 100%;
}

.card-align {
    display: flex;
    justify-content: space-between;
}

.card-earning .earning-title {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    color: var(--partition-color);
}

.card-earning .earning-amount {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    color: var(--primary-color);
}

/*
 * .badge-primary / .badge-secondary -- two order-status badge color variants
 * used by admin/orders/edit.blade.php ("confirmed" and "packed"/
 * "refund_pending" statuses) alongside the already-migrated
 * .badge-success/.badge-danger/.badge-warning/.badge-info/.badge-dark above.
 * .badge-primary was defined in the old style.css (missed in the original
 * migration of this page); .badge-secondary was never defined in either
 * theme (this design system has no "secondary" role), so it's given the
 * same neutral gray already used by .btn-cancel above.
 */
.badge-primary,
.bg-primary {
    color: #fff;
    background: var(--primary-color) !important;
}

.badge-secondary,
.bg-secondary {
    color: #fff;
    background: #6c757d !important;
}

/* .table-bg -- header-row background used by admin/daily_notification's two
   tables, in place of the inline style="background: #F9FAFF" every other
   list page's table header uses directly. Never defined in either theme. */
.table-bg {
    background: #F9FAFF;
}

/*
 * .decision-icon-img -- the large confirmation icon (a 512x512 source PNG)
 * in the Approve/Reject confirmation modals on Cancel Requests, Seller
 * Requests, and Product Requests. Unlike everything else in this file, this
 * class was never defined even in the old style.css -- a genuinely
 * never-styled class, not a migration regression. Called out here anyway
 * because it's the same recurring symptom as the rest of this file (an
 * image with no size constraint rendering at native size) and the fix is
 * the same trivial, obvious kind: constrain it and let it crop/center
 * cleanly instead of overflowing the modal.
 */
.decision-icon-img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 15px;
}