/* =========================================================
   GLOBAL COLOR OVERRIDE (Metronic + Bootstrap)
   Primary = GREEN
   Success = BLUE
========================================================= */

:root {
    /* PRIMARY = YOUR BRAND GREEN */
    --bs-primary: #32b548;
    --bs-primary-active: #00a26b;
    --bs-primary-light: #daf9d8;
    --bs-primary-rgb: 47,163,106;

    /* SUCCESS = CLEAN BLUE */
    --bs-success: #007ac8;
    --bs-success-active: #0063bd;
    --bs-success-light: #dcf2ff;
    --bs-success-rgb: 13,110,253;

    /* ===== INFO ===== */
    --bs-info: #0dcaf0;
    --bs-info-active: #0094b8;
    --bs-info-light: #c1faff;
    --bs-info-rgb: 13,202,240;

    /* ===== WARNING ===== */
    --bs-warning: #ffc107;
    --bs-warning-active: #ac9160;
    --bs-warning-light: #ffeecb;
    --bs-warning-rgb: 255,193,7;

    /* ===== DANGER ===== */
    --bs-danger: #dc3545;
    --bs-danger-active: #d83180;
    --bs-danger-light: #ffe4e0;
    --bs-danger-rgb: 220,53,69;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
}

.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--bs-success-active) !important;
    border-color: var(--bs-success-active) !important;
}

/* Light buttons */
.btn-light-primary {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
}
.btn-light-success {
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
}

/* =========================================================
   TEXT COLORS
========================================================= */

.text-primary {
    color: var(--bs-primary) !important;
}
.text-success {
    color: var(--bs-success) !important;
}

.text-info {
    color: var(--bs-info) !important;
}
/* =========================================================
   BACKGROUND COLORS
========================================================= */

.bg-primary {
    background-color: var(--bs-primary) !important;
}
.bg-success {
    background-color: var(--bs-success) !important;
}

/* =========================================================
   BADGES
========================================================= */

.badge-primary {
    background-color: var(--bs-primary) !important;
}
.badge-success {
    background-color: var(--bs-success) !important;
}

.badge-light-primary {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
}
.badge-light-success {
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
}

/* =========================================================
   LINKS
========================================================= */

a {
    color: var(--bs-primary);
}
a:hover {
    color: var(--bs-primary-active);
}

/* =========================================================
   FORMS (INPUT / SELECT / TEXTAREA)
========================================================= */

.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.1rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* =========================================================
   CHECKBOX / RADIO
========================================================= */

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* =========================================================
   PAGINATION
========================================================= */

.page-link {
    color: var(--bs-primary);
}
.page-link:hover {
    color: var(--bs-primary-active);
}
.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* =========================================================
   TABLE (DATATABLES LOOK FIX)
========================================================= */

.table-hover tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* =========================================================
   ALERTS
========================================================= */

.alert-primary {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary);
}
.alert-success {
    background-color: var(--bs-success-light);
    color: var(--bs-success);
}

/* =========================================================
   PROGRESS BAR
========================================================= */

.progress-bar {
    background-color: var(--bs-primary);
}

/* =========================================================
   NAV TABS
========================================================= */

.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    border-color: var(--bs-primary) var(--bs-primary) #fff;
}

/* =========================================================
   DROPDOWN
========================================================= */

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-primary);
}

/* =========================================================
   METRONIC SPECIFIC FIXES
========================================================= */

/* Sidebar active menu */
.menu-item .menu-link.active {
    background-color: white !important;
    color: var(--bs-primary) !important;
}

/* Hover menu */
.menu-item .menu-link:hover {
    color: var(--bs-primary) !important;
}

/* Toolbar buttons */
.btn-active-primary:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* =========================================================
   SWEETALERT (important for your project)
========================================================= */

.swal2-confirm {
    background-color: var(--bs-primary) !important;
}
.swal2-cancel {
    background-color: #6c757d !important;
}

/* =========================================================
   END
========================================================= */



/* =========================
   Highlight + Table
   ========================= */

.highlight {
    background-color: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}

.cargo-row-overdue td {
    background-color: #ffe2e5 !important;
}

.cargo-row-warning td {
    background-color: #fff8dd !important;
}

.table.gy-5 th,
.table.gy-5 td {
    padding-right: 5px !important;
    padding-left: 5px !important;
}


/* =========================
   Shared Receipt Base (78mm)
   ========================= */

.cargo-receipt,
.cargo-multi-receipt {
    width: 70mm;
    max-width: 70mm;
    margin: 0 auto;
    padding: 4mm 3mm;
    background: #fff;
    color: #000;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    line-height: 1.4;
}

.text-center {
    text-align: center;
}

.divider {
    border-top: 1px dashed #000;
    margin: 6px 0;
}


/* =========================
   Single Receipt
   ========================= */

.cargo-receipt .receipt-company-name {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.cargo-receipt .receipt-company-phone {
    font-size: 11px;
    margin-top: 2px;
}

.cargo-receipt .receipt-title {
    font-size: 14px;
    font-weight: 700;
    margin: 6px 0 4px;
}

.cargo-receipt .receipt-tracking {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.cargo-receipt .receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
    font-weight: 700;
}

.cargo-receipt .receipt-total {
    font-size: 14px;
    font-weight: 700;
}

.cargo-receipt .receipt-footer {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
}

.cargo-receipt .receipt-cut {
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
}


/* =========================
   Multi Receipt (Summary)
   ========================= */

.cargo-multi-receipt .title {
    font-size: 15px;
    font-weight: 700;
}

.cargo-multi-receipt .sub {
    font-size: 14px;
}

.cargo-multi-receipt .barcode {
    text-align: center;
    margin: 6px 0 8px;
}

.cargo-multi-receipt .barcode img {
    max-width: 100%;
    height: 42px;
}

.cargo-multi-receipt table {
    width: 100%;
    border-collapse: collapse;
}

.cargo-multi-receipt th,
.cargo-multi-receipt td {
    padding: 3px 0;
}

.cargo-multi-receipt th {
    font-weight: 700;
    border-bottom: 1px dashed #000;
}

.cargo-multi-receipt td:first-child {
    text-align: left;
    padding-right: 8px;
    word-break: break-word;
    font-weight: 500;
}

.cargo-multi-receipt td:last-child {
    text-align: right;
    white-space: nowrap;
    font-weight: 500;
}

.cargo-multi-receipt .total-row td {
    border-top: 1px dashed #000;
    padding-top: 6px;
    font-weight: 700;
    font-size: 16px;
}

.cargo-multi-receipt .footer {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
}

.cargo-multi-receipt .cut {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
}


/* =========================
   PRINT (GLOBAL)
   ========================= */

@page {
    size: 78mm auto;
    margin: 0;
}

@media print {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body * {
        visibility: hidden !important;
    }

    #cargoReceipt80mm,
    #cargoMultiReceipt,
    #cargoReceipt80mm *,
    #cargoMultiReceipt * {
        visibility: visible !important;
    }

    #cargoReceipt80mm,
    #cargoMultiReceipt {
        position: absolute;
        left: 0;
        top: 0;
        width: 78mm;
        max-width: 78mm;
        margin: 0;
        padding: 0;
        background: #fff;
    }

    .print-actions,
    .btn,
    .header,
    .aside,
    .footer,
    .card-toolbar {
        display: none !important;
    }
}

.swal2-popup .swal2-select {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;

    color: #3f4254;
    background-color: #f5f8fa;
padding:10px;
    border: 1px solid #e4e6ef;
    border-radius: 0.475rem;
}
/* Desktop search input */
@media (min-width: 992px) {
    #kt_header input[name="q"] {
        border-radius: 0.475rem;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }
}



 .shop-product-main-image-link {
     background: #f8f9fa;
 }

.shop-product-main-image {
    transition: transform 0.35s ease;
    will-change: transform;
}

.shop-product-main-image-link:hover .shop-product-main-image {
    transform: scale(1.08);
}

.shop-product-thumb {
    transition: all 0.2s ease;
    border: 2px solid transparent !important;
    cursor: pointer;
}

.shop-product-thumb:hover {
    transform: translateY(-2px);
    border-color: #d1d5db !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

.shop-product-thumb.active {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}
#kt_header .header-search-mobile {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#kt_header .header-search-mobile::placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}

#kt_header .header-search-mobile::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
}

#kt_header .header-search-mobile::-moz-placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}

#kt_header .header-search-mobile:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
}

#kt_header .header-search-mobile::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
}