/* Compatibility skin: existing forms, dialogs and tables use the new shared theme. */
.storefront-page .bg-white,.storefront-page .bg-black,.bg-glass,.bg-custom,.bg-darks { background: var(--surface) !important; }
.text-main,.text-main-gra,.text_web_main { color: var(--main) !important; -webkit-text-fill-color: currentColor; background: none; }
.text-font,.text-dark { color: var(--font) !important; }
.text-muted,.text-secondary { color: var(--muted) !important; }
.bg-main,.bg-main80 { background: var(--main) !important; color: var(--font); }
.bg-main-gra { background: linear-gradient(120deg,var(--main),var(--sub)) !important; }
.border-main,.border-main-gra,.border-ys { border: 1px solid var(--border) !important; }
.font-bold,.font-semibold { font-weight: 600; }
.btn { border-radius: 9px; font-size: 14px; transition: transform .2s,background .2s,border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 12.55%, transparent); }
.btn-primary,.btn-success { background: var(--main); border-color: var(--main); }
.btn-primary:hover,.btn-success:hover { background: var(--sub); border-color: var(--sub); }
.form-control,.form-select,.input-group-text { background-color: var(--surface); border: 1px solid color-mix(in srgb, var(--font) 9.02%, transparent); border-radius: 9px; color: var(--font); padding: 11px 14px; }
.form-control:focus,.form-select:focus { color: var(--font); background: var(--surface); border-color: color-mix(in srgb, var(--main) 60.00%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 7.06%, transparent); }
.form-control::placeholder { color: var(--muted); }
.form-control:disabled,.form-control[readonly] { background: var(--surface-raised); color: var(--muted); }
.form-select option { background: var(--surface); }
.form-check-input { background-color: var(--surface); border-color: var(--muted); }
.form-check-input:checked { background-color: var(--main); border-color: var(--main); }
.modal-content,.dropdown-menu,.offcanvas { background: var(--surface); color: var(--font); border: 1px solid color-mix(in srgb, var(--font) 8.24%, transparent); border-radius: 15px; }
.modal-header,.modal-footer { border-color: var(--border); }
.modal-title { font-size: 20px; }
.btn-close { filter: invert(1) grayscale(1); }
.table { color: var(--font); --bs-table-bg: transparent; --bs-table-striped-bg: color-mix(in srgb, var(--font) 1.18%, transparent); --bs-table-striped-color: var(--font); --bs-table-hover-bg: color-mix(in srgb, var(--font) 1.96%, transparent); --bs-table-hover-color: var(--font); border-color: var(--border); }
.table th { font-weight: 500; color: var(--muted); font-size: 12px; padding: 15px 12px; background: color-mix(in srgb, var(--font) 1.18%, transparent); }
.table td { padding: 14px 12px; vertical-align: middle; }
.table-light { --bs-table-bg: var(--surface-raised); --bs-table-color: var(--font); color: var(--font); }
.table-responsive { border-radius: 12px; border: 1px solid var(--border); }
.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate { color: var(--muted); font-size: 12px; padding-block: 12px; }
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select { color: var(--font); background: var(--surface); border: 1px solid color-mix(in srgb, var(--font) 9.41%, transparent); padding: 6px 10px; border-radius: 7px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--font) !important; border-radius: 7px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: color-mix(in srgb, var(--main) 9.41%, transparent); color: var(--main) !important; border-color: color-mix(in srgb, var(--main) 26.67%, transparent); }
.swal2-popup { background: var(--surface); color: var(--font); border: 1px solid color-mix(in srgb, var(--font) 7.06%, transparent); border-radius: 18px; }
.swal2-title,.swal2-html-container { color: var(--font); }
.swal2-styled.swal2-confirm { background-color: var(--main); }
.swal2-input { color: var(--font); }
.breadcrumb { font-size: 12px; }
.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link { color: var(--muted); border-radius: 9px 9px 0 0; }
.nav-tabs .nav-link.active { color: var(--main); background: var(--surface); border-color: var(--border); }
.img-anim { position: relative; border-radius: 14px; overflow: hidden; }
.img-anim img { width: 100%; transition: transform .4s; }
.img-anim:hover img { transform: scale(1.03); }
.img-anim .text { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px; color: var(--font); background: linear-gradient(transparent,color-mix(in srgb, var(--background) 73.33%, transparent)); }
/* The previous paid icon font is replaced by a public, compatible solid font. */
.fa-duotone,.fa-light,.fa-thin,.fa-regular { font-family: 'Font Awesome 6 Free'; font-weight: 900; }
@media (max-width: 600px) { .site-main .container-sm.p-4 { padding: 16px !important; } .table { font-size: 12px; } .modal-dialog { margin: 12px; } }
body[data-theme="light"] .btn-close { filter: none; }
body[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }