/*
 * MegaSham - coloured sections (2026-10-04). Keep this file IDENTICAL in site, seller, admin and naql (assets/css/sections.css).
 * A box gets   class="… sv-c sv-<colour>"   (green, blue, amber, teal, violet, rose, slate): a light tint + a border of its colour.
 * Its title gets   class="sv-h"   (or is the box's first <h4>): a gradient band across the top, white text.
 * A Bootstrap card: put sv-c on the .card; its .card-header becomes the band.
 * Inside: .btn-sv (a button in the box's colour), .sv-row (a list row with a coloured separator), .sv-inner (a white inner panel),
 * .sv-sub (a dashed coloured separator). Fields turn white with a coloured border.
 */
.sv-c { --sv-pad: 16px; background: var(--t) !important; border: 1px solid var(--b) !important; border-radius: 12px; box-shadow: 0 2px 10px rgba(15, 23, 42, .05); }
.sv-c.p-0 { --sv-pad: 0px; } .sv-c.p-3 { --sv-pad: 1rem; } .sv-c.p-4 { --sv-pad: 1.5rem; } .sv-c.p-5 { --sv-pad: 3rem; }
.sv-c > .sv-h, .sv-c > h4:first-child {
    margin: calc(-1 * var(--sv-pad)) calc(-1 * var(--sv-pad)) 14px; padding: 11px var(--sv-pad); border-radius: 11px 11px 0 0;
    background: linear-gradient(135deg, var(--c), var(--c2)); color: #fff !important; font-weight: 800; border: 0 !important;
}
.sv-c > .card-header { background: linear-gradient(135deg, var(--c), var(--c2)) !important; color: #fff !important; border: 0 !important; border-radius: 11px 11px 0 0 !important; }
.sv-c > .sv-h i, .sv-c > h4:first-child i, .sv-c > .card-header i,
.sv-c > .sv-h [class*="text-"], .sv-c > .card-header h1, .sv-c > .card-header h2, .sv-c > .card-header h3, .sv-c > .card-header h4,
.sv-c > .card-header h5, .sv-c > .card-header h6, .sv-c > .card-header [class*="text-"]:not(.badge) { color: #fff !important; }
.sv-c > .card-body, .sv-c > .card-footer { background: transparent; }
.sv-c .form-control, .sv-c .form-select { background-color: #fff; border-color: var(--b); }
.sv-c .form-control:focus, .sv-c .form-select:focus { border-color: var(--c2); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--c2) 25%, transparent); }
.sv-c .input-group-text { background-color: color-mix(in srgb, var(--b) 45%, #fff); border-color: var(--b); }
.sv-c .btn-sv { background: var(--c); border-color: var(--c); color: #fff; font-weight: 700; }
.sv-c .btn-sv:hover, .sv-c .btn-sv:focus { background: var(--c2); border-color: var(--c2); color: #fff; }
.sv-c .sv-row { border-bottom: 1px solid var(--b) !important; }
.sv-c .sv-inner { background: #fff !important; border: 1px solid var(--b) !important; border-radius: .5rem; }
.sv-c .sv-sub { border-top: 1px dashed var(--b) !important; }
.sv-c .table { --bs-table-bg: transparent; }
.sv-c .table > thead th { background: color-mix(in srgb, var(--b) 55%, #fff); border-color: var(--b); }

.sv-green  { --c: #15803d; --c2: #22c55e; --t: #f0fdf4; --b: #bbf7d0; }
.sv-blue   { --c: #1d4ed8; --c2: #3b82f6; --t: #eff6ff; --b: #bfdbfe; }
.sv-amber  { --c: #b45309; --c2: #f59e0b; --t: #fffbeb; --b: #fde68a; }
.sv-teal   { --c: #0f766e; --c2: #14b8a6; --t: #f0fdfa; --b: #99f6e4; }
.sv-violet { --c: #6d28d9; --c2: #8b5cf6; --t: #f5f3ff; --b: #ddd6fe; }
.sv-rose   { --c: #be123c; --c2: #f43f5e; --t: #fff1f2; --b: #fecdd3; }
.sv-slate  { --c: #334155; --c2: #64748b; --t: #f8fafc; --b: #cbd5e1; }