* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
   --primary-color: #111827;         /* Deep Midnight Charcoal */
   --primary-hover: #1e293b;
   --secondary-color: #131927;       /* Dark Slate Sidebar */
   --sidebar-bg: #131927;
   --sidebar-hover: #1e293b;
   --sidebar-active: #252e42;
   --sidebar-text: #94a3b8;
   --sidebar-active-text: #ffffff;
   --accent-color: #e53935;          /* Delhivery signature Red / Coral */
   --accent-hover: #dc2626;
   --bg-body: #f4f6fa;               /* Delhivery soft light slate grey background */
   --card-bg: #ffffff;
   --border-color: #e2e8f0;
   --border-light: #eaedf3;
   --text-main: #0f172a;             /* Deep slate text */
   --text-muted: #64748b;            /* Cool slate grey text */
   --text-light: #94a3b8;
   --success-color: #10b981;
   --warning-color: #f59e0b;
   --danger-color: #ef4444;
   --info-color: #3b82f6;
}
body {
    background: var(--bg-body, #f4f6fa);
    color: var(--text-main, #0f172a);
    font-size: 14px;
    font-family: "Inter", sans-serif;
}
img{
    max-width: 100%;
    height: auto;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
}
p{
    color: var(--text-muted, #64748b);
}
*{
    box-sizing: border-box;
}
.btn {
    padding: 12px 24px;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    text-align: center;
    transition: all 0.2s ease;
}
.danger{
    color: #fff;
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}
.btn:hover{
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}
.btn.outline {
    background: #ffffff;
    color: var(--text-main, #0f172a);
    border: 1px solid #cbd5e1;
}
.btn.outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}
@keyframes float {
  0% {
    transform: translateY(5px); 
  }
  50% {
    transform: translateY(-30px); 
  }
  100% {
    transform: translateY(0px); 
  }
}
.container{
    width: 96%;
    display: table;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.logo-wrap {
    width: 8%;
}
header {
    padding: 20px 0;
}
/*nav*/
nav .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.menu-wrap ul {
    display: flex;
    gap: 28px;
}
.menu-wrap ul li a{
    font-weight:600;
    color:#555;
    cursor:pointer;
}
.nav-right {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: center;
}
.btn_wrap {
    display: flex;
    justify-content: start;
    gap: 15px;
    align-items: center;
}
section {
    padding: 40px 0;
}
.hero .container {
    /* width: 90%; */
    /* margin: 60px auto 0; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 44px;
}
.tag{
    background:#eaf0ff;
    display:inline-block;
    padding:12px 25px;
    border-radius:30px;
    color:#003db7;
    margin-bottom:14px;
}
h1{
    font-size:40px;
    line-height:1.15;
    font-weight:800;
}
h1 span{
    color:#073dbd;
}
/*login*/
h2{
    font-size:36px;
    line-height:1.15;
    font-weight:800;
    margin: 20px 0;
}

h2 span{
    color:var(--primary-color);
}
.login_page_wrap .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 2px 73px 4px #e1e1e1;
}
.desc {
    margin: 0px 0 23px;
    font-size: 16px;
    line-height: 1.8;
    color: #5d6574;
    /* max-width: 636px; */
}
.login_page_wrap .left {
    width: 56%;
    background: url(../images/login-left-image.png) no-repeat right center;
    height: 100%;
    background-size: cover;
    padding: 00px 00px;
}
.left_container {
    background: linear-gradient(90deg, #dfebfe, #ffffff3b);
    padding: 40px 40px;
    background: #dfebfee3;
}
.left_container .logo-wrap {
    width: 16%;
}
.left_container .features {
    display: grid;
    gap: 28px;
    margin-bottom: 30px;
}
.left_container .feature{
    display:flex;
    align-items:flex-start;
    gap:22px;
}
.left_container .icon{
    width:42px;
    height:42px;
    background:#edf4ff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    color:#1f64ff;
    flex-shrink:0;
}
.left_container .feature h3{
    font-size:20px;
    margin-bottom:8px;
}

.left_container .feature p{
    font-size:16px;
    color:#6b7280;
}
.login_page_wrap .right {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 44%;
    padding: 0 50px;
}
.auth-form-side {
    flex: 1.2;
    /* padding: 40px 50px; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
}
.auth-form-side h1, .reg-form-content h1 {
    font-size: 35px;
    text-align: center;
    margin-bottom: 9px;
}
p.auth-subtitle {
    text-align: center;
    width: 100%;
    margin-bottom: 33px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    position: relative;
}
.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.form-group input, .form-group select {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #111827;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
    background: #ffffff;
    position: relative;
}
.toggle-password-btn {
    position: absolute;
    right: 12px;
    top: 46px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

.login-eye-btn .toggle-password-btn{
    top: 42px;
}

.toggle-password-btn:hover {
    color: #6b7280;
}
.form-options {
    margin-bottom: 24px;
    text-align: left;
}
.remember-me-checkbox {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
}
.remember-me-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkbox-box {
    height: 18px;
    width: 18px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    margin-right: 8px;
    position: relative;
    transition: all 0.2s ease;
}
.checkbox-box:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.remember-me-checkbox input:checked~.checkbox-box:after {
    display: block;
}
.remember-me-checkbox input:checked~.checkbox-box {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.auth-form-side .btn.primary_btn, .reg-form-content .btn.primary_btn{
    width: 100%;
    font-size: 18px;
}
.auth-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9ca3af;
    font-size: 15px;
    margin-bottom: 26px;
    margin-top: 30px;
}
.auth-separator:not(:empty)::before {
    margin-right: .5em;
}
.auth-separator:not(:empty)::after {
    margin-left: .5em;
}
.auth-separator::before, .auth-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e5e7eb;
}
.social-login-btns {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 15px;
}
.social-login-btns .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #f8f7f7;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.auth-footer-text {
    font-size: 14px;
    color: #4b5563;
    margin: 15px 0 0 0;
    text-align: center;
}
.auth-footer-text a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}
.auth-footer-text a:hover {
    text-decoration: underline;
}

/*dashboard*/
.dashboard{
    display:flex;
    background: var(--bg-body, #f4f6fa);
    min-height: 100vh;
}
.sidebar{
    width:260px;
    flex-shrink:0;
    background:var(--sidebar-bg, #131927);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    border-right: 1px solid #1e293b;
    transition: width 0.45s cubic-bezier(.4, 0, .2, 1);
}
.sidebar .logo {
    padding: 20px;
    border-bottom: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sidebar .logo-right h2{
    color: #fff;
    font-size: 20px;
    margin-bottom: 0;
}

.logo-left {
    width: 50%;
}

.sidebar .menu {
    padding: 20px 10px;
    list-style: none;
}
.sidebar .menu li{
    width: 100%;
}
.sidebar .menu li a {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    color: var(--sidebar-text, #94a3b8);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px;
    font-weight: 500;
}
.sidebar .menu li.active a, .sidebar .menu li:hover a{
    background: var(--sidebar-hover, #1e293b);
    color: #f8fafc;
}
.sidebar .menu li.active a {
    background: var(--sidebar-active, #252e42);
    color: var(--sidebar-active-text, #ffffff);
    font-weight: 600;
    border-left: 3px solid var(--accent-color, #e53935);
}
.menu i{
    width:20px;
    text-align:center;
}
.refer-card {
    margin-top: 0;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid #334155;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px;
}
.refer-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #f8fafc;
}
.refer-card img{
    width:100px;
    margin-bottom:10px;
}
.refer-card button{
    margin-top:15px;
    width:100%;
    height:42px;
    border:none;
    background:#fff;
    border-radius:8px;
    font-weight:600;
    color:#0f172a;
    cursor:pointer;
    transition: background .2s;
}
.refer-card button:hover{
    background: #f1f5f9;
}
.refer-card p {
    color: #94a3b8;
    font-size: 13px;
}
.refer-card .btn.white_btn {
    display: block;
    width: 100%;
    background: #fff;
    color: var(--primary-color, #111827);
    margin-top: 10px;
    border-radius: 8px;
}
.content {
    flex: 1;
    min-width: 0;
    background: var(--bg-body, #f4f6fa);
}
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding: 14px 24px;
    gap: 10px;
}
.topbar .left{
    display:flex;
    align-items:center;
    gap:25px;
    width: 40%;
}
.topbar .search {
    display: flex;
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid var(--border-color, #e2e8f0);
}
.topbar .search select {
    border: none;
    padding: 0 5px;
    outline: none;
    font-size: 14px;
    background: transparent;
    border-right: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-muted, #64748b);
}
.topbar .search input{
    width:340px;
    border:none;
    padding:12px 16px;
    outline:none;
    font-size:14px;
    background: transparent;
    color: var(--text-main, #0f172a);
}

.topbar .search button{
    width:50px;
    border:none;
    background: #19284b;
    color:#fff;
    cursor:pointer;
    transition: background .2s ease;
}
.topbar .search button:hover {
    background: var(--primary-hover, #1e293b);
}
.topbar .right{
    display:flex;
    align-items:center;
    gap:15px;

}
.topbar .right button {
    height: 42px;
    padding: 0 18px;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 8px;
    font-weight: 500;
    color: var(--text-main, #0f172a);
    cursor: pointer;
    transition: all .2s ease;
}
.topbar .right button:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}
.topbar .profile-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    padding: 5px 0;
}
.topbar .avatar {
    width: 40px;
    height: 40px;
    background: #334155;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: 700;
    overflow: hidden;
}
.topbar .avatar img.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.topbar .profile-menu .dropdown-arrow {
    font-size: 11px;
    color: #64748b;
    transition: transform 0.2s ease;
}
.topbar .profile-menu:hover .dropdown-arrow {
    transform: rotate(180deg);
}
.topbar .profile-menu .dropdown {
    position: absolute;
    background: #fff;
    top: 48px;
    right: 0;
    padding: 8px;
    width: 190px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    display: none;
    z-index: 1000;
}
/* Transparent bridge to prevent menu from disappearing on gap hover */
.topbar .profile-menu .dropdown::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}
.topbar .profile-menu .dropdown ul li {
    width: 100%;
    border-bottom: 1px solid #f1f5f9;
    padding: 8px 10px;
    border-radius: 6px;
}
.topbar .profile-menu .dropdown ul li:last-child {
    border-bottom: 0;
}
.topbar .profile-menu .dropdown ul li:hover {
    background: #f8fafc;
}
.topbar .profile-menu .dropdown ul li a {
    color: var(--text-main, #0f172a);
    font-weight: 500;
    width: 100%;
    display: block;
    font-size: 13px;
}
.topbar .profile-menu .dropdown ul li a:hover{
    color: var(--primary-color, #111827);
}
.topbar .profile-menu:hover .dropdown{
    display: block;
}
@media (hover: none), (pointer: coarse) {
    .topbar .profile-menu:hover .dropdown {
        display: none;
    }
    .topbar .profile-menu.open .dropdown {
        display: block;
    }
    .topbar .profile-menu:hover .dropdown-arrow {
        transform: none;
    }
    .topbar .profile-menu.open .dropdown-arrow {
        transform: rotate(180deg);
    }
}
.content_wrap {
    padding: 0 24px;
    display: grid;
    grid-template-columns: 2fr 330px;
    gap: 20px;
    margin-top: 10px;
    align-items: start;
    min-width: 0;
}
.content_left_section {
    width: 100%;
    min-width: 0;
}
.content_wrap .hero {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.hero_content h1  {
    font-size: 26px;
    margin-bottom: 6px;
    color: var(--text-main, #0f172a);
    font-weight: 700;
}
.content_wrap .hero span{
    color: var(--text-main, #0f172a);
}
.content_wrap .hero p{
    font-size:14px;
    color: var(--text-muted, #64748b);
}
.content_wrap .alert {
    background: #fffbeb;
    padding: 14px 20px;
    border-radius: 10px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    width: 100%;
    border: 1px solid #fef3c7;
    color: #92400e;
    font-size: 12px;
    line-height: 18px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.content_wrap .alert i{
    color: #f59e0b;
    font-size: 20px;
}
.content_wrap .alert a{
    color: #b45309;
    font-weight: 600;
    text-decoration: none;
    margin-left: 5px;
}
.content_wrap .stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 10px 0 24px;
}
.content_wrap .card {
    background: #fff;
    padding: 18px 10px;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    border: 1px solid var(--border-color, #e2e8f0);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.support-main .card{
    padding: 18px 24px;
}

.content_wrap .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
.content_wrap .card h5 {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    min-height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content_wrap .card h2 {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}
.content_wrap .card a {
    text-decoration: none;
    color: var(--text-main, #0f172a);
    font-weight: 600;
    text-align: right;
    width: 100%;
    display: flex;
    font-size: 13px;
    margin-top: 6px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.content_wrap .card .icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 15px;
}
.content_wrap .card .blue{
    background:#f1f5f9;
    color:#334155;
}
.content_wrap .card .green{
    background:#ecfdf5;
    color:#10b981;
}
.content_wrap .card .orange{
    background:#fffbeb;
    color:#f59e0b;
}
.content_wrap .card .purple{
    background:#f5f3ff;
    color:#8b5cf6;
}
.content_wrap .card .red{
    background:#fef2f2;
    color:#ef4444;
}
.content_wrap .card a.red_color {
    color: #ef4444;
}
.content_wrap .card a.green_color {
    color: #10b981;
}
.content_wrap .card a.orange_color {
    color: #f59e0b;
}
.content_wrap .card a.purple_color {
    color: #8b5cf6;
}
.section_white {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    border: 1px solid var(--border-color, #e2e8f0);
    margin-bottom: 20px;
}
.section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
}
.section-header .title{
    display:flex;
    align-items:center;
    gap:12px;
}
.section-header .title i{
    font-size:20px;
    color:#475569;
}
.section-header h3 {
    font-size: 17px;
    color: var(--text-main, #0f172a);
    font-weight: 600;
}
.section-header a{
    text-decoration:none;
    color:#475569;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
    transition:.2s;
    font-size: 13px;
}
.section-header a:hover{
    gap:10px;
    color: var(--text-main, #0f172a);
}
.pickup-wrapper {
    display: grid;
    grid-template-columns: 2fr 150px;
    gap: 20px;
    align-items: center;
}
.pickup-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.pickup-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 18px;
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.pickup-card:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.pickup-card h2 {
    font-size: 15px;
    color: var(--text-main, #0f172a);
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 600;
}
.pickup-info{
    display:flex;
    gap:20px;
    margin-bottom:0;
}

.pickup-info span{
    display:flex;
    align-items:center;
    gap:6px;
    color: var(--text-muted, #64748b);
    font-size: 14px;
}

.pickup-info i{
    color: #64748b;
}
.pickup-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.success-btn {
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #ecfdf5;
    color: #059669;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: .2s;
    border: 1px solid #a7f3d0;
    font-size: 13px;
}
.success-btn:hover{
    background:#059669;
    color:#fff;
}
.pickup-buttons .btn.outline {
    padding: 0 14px;
    height: 38px;
    font-size: 13px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.pickup-footer {
    background: #f8fafc;
    box-shadow: none;
    width: 100%;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-muted, #64748b);
    font-size: 12px;
    line-height: 18px;
    border-radius: 8px;
    padding: 12px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.pickup-footer a{
    color: #64748b;
}

.pickup-image{
    display:flex;
    justify-content:center;
    align-items:center;
}
.pickup-image img {
    width: 100%;
    max-width: 185px;
    animation: floatTruck 4s ease-in-out infinite;
}
@keyframes floatTruck{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0);
    }

}
aside.dashboard-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.dashboard-right .side-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    border: 1px solid var(--border-color, #e2e8f0);
    transition: transform .2s ease, box-shadow .2s ease;
}
.dashboard-right .side-card:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0, 0, 0, .06);
}
.dashboard-right .cargo-banner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #fff;
    border: 1px solid #334155;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.badge{
    display:inline-block;
    padding:4px 12px;
    background:rgba(255,255,255,.15);
    border-radius:50px;
    font-size:11px;
    font-weight:600;
    margin-bottom:14px;
}
.cargo-banner h3 {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 4px;
    color: #f8fafc;
}
.cargo-banner p{
    font-size:14px;
    line-height:1.6;
    color:#94a3b8;
    margin-bottom:20px;
}

.cargo-banner .btn{
    width: 100%;
    display: flex;
    justify-content: center;
}

.cargo-image{
    margin-top:20px;
    text-align:center;
}

.cargo-image img{
    width:100%;
    max-width:200px;
    animation: floatTruck 4s ease-in-out infinite;
}
.dashboard-right .wallet-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
.dashboard-right .wallet-card i.fa-solid.fa-wallet {
    background: #f1f5f9;
    padding: 12px;
    font-size: 16px;
    color: #334155;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}
.wallet-top{
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}
.wallet-top h4 {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}
.wallet-top i{
    font-size:22px;
    color:#475569;
}
.wallet-card h2 {
    font-size: 22px;
    color: var(--text-main, #0f172a);
    margin: 4px 0 0px;
    font-weight: 700;
}
.wallet-card p {
    color: var(--text-muted, #64748b);
    margin-bottom: 20px;
}
.add-money {
    width: auto;
    padding: 8px 16px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: var(--primary-color, #111827);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
}
.add-money:hover{
    background: var(--primary-hover, #1e293b);
}
.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding: 0 0 12px;
}
.news-header h4 {
    font-size: 16px;
    color: var(--text-main, #0f172a);
    font-weight: 600;
}
.news-header a{
    color: #475569;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}
.news-header a:hover {
    color: var(--text-main, #0f172a);
}
.news-list{
    list-style:none;
}
.news-list li{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:14px 0;
    border-bottom:1px solid #f1f5f9;
}
.news-list li:last-child{
    border-bottom:none;
    padding-bottom:0;
}
.news-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.news-icon.blue{
    background:#f1f5f9;
    color:#334155;
}
.news-icon.green{
    background:#ecfdf5;
    color:#10b981;
}
.news-icon.orange{
    background:#fffbeb;
    color:#f59e0b;
}
.news-icon.purple{
    background:#f5f3ff;
    color:#8b5cf6;
}
.news-list h5 {
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--text-main, #0f172a);
    font-weight: 600;
}
.news-list p{
    font-size:13px;
    line-height:1.5;
    color: var(--text-muted, #64748b);
}
.filter select {
    min-width: 106px;
    padding: 8px 30px 8px 12px;
    border: 1px solid #d9dce5;
    border-radius: 7px;
    background: #fff;
    color: #252a3d;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.filter select:hover {
    border-color: #111827;
    background: #faf9ff;
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.12);
}

.filter select:focus {
    border-color: #111827;
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.12);
}
.performance-body {
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.performance_wrap {
    flex: 1 1 58%;
    min-width: 0;
    display: flex;
    gap: 0;
}

.performance-box {
    flex: 1 1 50%;
    min-width: 0;
    padding: 0 10px;
    border-right: 1px solid #f0e8e8;
    box-sizing: border-box;
}

.performance-box:last-child {
    border-right: 1px solid #f0e8e8;
}

.performance-box h4 {
    margin: 0 0 15px;
    font-size: 14px;
    line-height: 1.15;
    color: #172554;
}

.gauge {
    width: 170px;
    margin: 25px auto;
}

.gauge-body {
    width: 170px;
    max-width: 100%;
    height: 85px;
    position: relative;
    overflow: hidden;
}

.gauge-fill {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: conic-gradient(
        #3b82f6 calc(var(--value) * 1.8deg),
        #e7edf6 0deg
    );
    transform: rotate(180deg);
    animation: progressAnimation 1.8s ease forwards;
}

.gauge-cover {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 130px;
    height: 65px;
    background: #fff;
    border-radius: 130px 130px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gauge-cover span {
    font-size: 20px;
    font-weight: 700;
    color: #172554;
    margin-top: 20px;
}

.performance-box p {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
}

.performance-box h3 {
    margin: 5px 0 0;
    font-size: 16px;
    color: #172554;
    text-align: center;
}

.delivery-info {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.delivery-info p {
    margin-top: 0;
}

.graph-box {
    flex: 0 1 300px;
    min-width: 0;
    width: 300px;
    box-sizing: border-box;
    padding-left: 20px;
}

.graph-box h4 {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.2;
    color: #172554;
}

.graph-legend {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

#performanceChart {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 150px !important;
    box-sizing: border-box;
}

.performance-card {
    overflow: hidden;
}

.performance-card .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.performance-card .title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.performance-card .title i {
    color: #3b5f91;
    font-size: 20px;
}

.performance-card .title h3 {
    margin: 0;
    color: #172554;
    font-size: 16px;
}

.performance-card .filter select {
    min-width: 136px;
    padding: 8px 30px 8px 12px;
    border: 1px solid #d9dce5;
    border-radius: 7px;
    background: #fff;
    color: #252a3d;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.performance-card .filter select:hover {
    border-color: #111827;
    background: #111827;
    color: #fff;
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.12);
}

.performance-card .filter select:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.graph-legend {
    position: relative;
}

.graph-legend canvas {
    max-width: 100%;
}

@keyframes progressAnimation {
    from {
        transform: rotate(180deg) scale(.85);
        opacity: 0;
    }

    to {
        transform: rotate(180deg) scale(1);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .performance-body {
        flex-direction: column;
    }

    .performance_wrap {
        width: 100%;
    }

    .graph-box {
        width: 100%;
        max-width: 100%;
        padding: 20px 0 0;
        border-top: 1px solid #f0e8e8;
    }

    #performanceChart {
        width: 100% !important;
    }
}

@media (max-width: 600px) {
    .performance_wrap {
        flex-direction: column;
    }

    .performance-box {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f0e8e8;
        padding: 20px 0;
    }

    .performance-box:last-child {
        border-bottom: none;
    }

    .performance-card .section-header {
        gap: 15px;
        flex-wrap: wrap;
    }
}
.quick-access {
    margin-top: 30px;
    background: #fff;
    border: 1px solid #edf1f7;
    /* border-radius: 22px; */
    padding: 22px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, .05);
}
.quick-card{
    flex:1;
    display:flex;
    align-items:center;
    gap:16px;
    transition:.35s ease;
    cursor:pointer;
}
.quick-card:hover{
    transform:translateY(-4px);
}
.quick-content{
    flex:1;
}
.quick-content h4{
    font-size:15px;
    font-weight:600;
    color:#16213E;
    margin-bottom:6px;
}
.quick-content p{
    font-size:14px;
    line-height:1.5;
    color:#70798B;
}
.divider{
    width:1px;
    height:60px;
    background:#edf1f7;
}
.quick-icon {
    width: 42px;
    height: 42px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: .35s;
}
.quick-card:hover .quick-icon{
    transform:rotate(-8deg) scale(1.08);
}
.quick-icon.purple{
    background:#f2edff;
    color:#7C3AED;
}
.quick-icon.green{
    background:#eafaf0;
    color:#16A34A;
}
.quick-icon.blue{
    background:#edf3ff;
    color:#2563EB;
}
.quick-icon.orange{
    background:#fff2e8;
    color:#EA7A00;
}

/* Seller Onboard */
.content_wrap .hero .status {
    padding: 10px 18px;
    border-radius: 30px;
    border: 1px solid #cdcde1;
    color: #6d6d74;
    font-size: 14px;
}
.progress_bar {
    padding: 30px 20px;
}
.dashboard.onboarding .content_wrap {
    display: block;
}
.progress{
    position:absolute;
    top:0;
    left:0;
    height:4px;
    width:90px;
    background:#6d5dfc;
    border-radius:10px;
}
.progress_bar .step {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 32px;
    position: relative;
}
.progress_bar .step.last:after{
    display:none;
}
.progress_bar .step::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 45px;
    width: 2px;
    height: 30px;
    background: #aeb0be;
}
.progress_bar .icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #d0d1d9;
    border: 3px solid #2453ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #707176;
}
.progress_bar .active .icon {
    background: #2453ff;
    border: 3px solid #dbdbdb;
    color: #ffffff;
}
.step_content h4 {
    font-size: 15px;
    margin-bottom: 4px;
    color: #97989c;
    font-weight: 500;
}
.step_content span {
    color: #97989c;
    font-size: 12px;
}
.step.active .step_content h4 {
    color: #ffffff;
}
.step.active .step_content p {
    color: #ffffff;
}
.progress_bar .security{
    margin-top:45px;
    color:#8b8d98;
    font-size:14px;
}
.progress_bar .security i{
    margin-right:8px;
}
.personal-info-card .card-header {
    display: flex;
    gap: 18px;
    padding: 21px;
    border-bottom: 1px solid #e2e2e5;
}
.personal-info-card .card {
    padding: 0;
}
.card-header .head-icon {
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content_wrap .card-header h2 {
    font-size: 24px;
    margin-bottom: 4px;
    margin-top: 0;
}
.card-header p{
    color:#8b8d97;
}
.card-body {
    padding: 30px 21px;
    border-bottom: 1px solid #e2e2e5;
}
.input_field_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.input_field_wrap input {
    width: 80%;
    padding: 14px;
}
.input_field_wrap .btn.primary_btn {
    width: 20%;
}
small{

    display:block;
    margin-top:15px;
    color:#75798b;
}
.card-footer{
    padding:30px 21px;
    display:flex;
    justify-content:space-between;
}
.btn.disable_btn{
    background: #e3e3e3;
    border: 1px solid #d6d6d6;
    color: #9a9dae;
}
.btn.secondary_btn {
    background: var(--secondary-color);
}
.warning-box{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(173,118,0,.15);
    border:1px solid rgba(255,179,0,.35);
    color:#e9aa22;
    padding:16px 18px;
    border-radius:12px;
    margin-bottom:30px;
    font-weight:600;
}
.warning-box i{
    font-size:20px;
}
.form-grid.two-column {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 15px;
}
.form-grid.three-column{
    grid-template-columns:repeat(3,1fr);
    display: grid;
    gap: 15px;
}
.info-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    margin-bottom: 26px;
    border-radius: 18px;
    background: #18233d;
    border: 1px solid #294574;
    color: #bfc8d8;
}
.info-icon{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#21437d;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#5ca5ff;
    flex-shrink:0;
}
.agreement-box {
    height: 255px;
    overflow-y: auto;
    background: #f9f9f9;
    border: 1px solid #d3d3d3;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 35px;
}
.agreement-box::-webkit-scrollbar{
    width:8px;
}
.agreement-box::-webkit-scrollbar-thumb{
    background:#4b4d60;
    border-radius:10px;
}
.agreement-box h3 {
    margin-bottom: 20px;
    font-size: 19px;
    font-weight: 600;
}
.agreement-box h4{
    margin:25px 0 12px;
    font-size:16px;
    font-weight: 600;
}
.agreement-box p {
    color: #86878e;
    line-height: 1.8;
    margin-bottom: 15px;
}
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    margin-bottom: 28px;
    color: #696b74;
    line-height: 1.7;
}
.checkbox input{
    display:none;
}
.checkmark {
    width: 22px;
    height: 22px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--primary-color);
    position: relative;
    flex-shrink: 0;
}
.checkmark::after{
    content:"✓";
    position:absolute;
    color:#fff;
    font-size:13px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.content_wrap .checkbox a {
    color: #3d3d3d;
    font-weight: 500;
    width: auto;
    display: contents;
    text-align: left;
}

/* Style for completed steps in sidebar */
.progress_bar .step.completed .icon {
    background: #16a34a;
    border: 3px solid #dbdbdb;
    color: #ffffff;
}
.progress_bar .step.completed .step_content h4 {
    color: #8bb89b;
}

/* Style for agreement checkboxes correctly hiding checkmark when unchecked */
.checkbox input:not(:checked) ~ .checkmark {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
}
.checkbox input:not(:checked) ~ .checkmark::after {
    display: none;
}
.checkbox input:checked ~ .checkmark {
    background: var(--primary-color);
    border: none;
}
.checkbox input:checked ~ .checkmark::after {
    display: block;
}

/* Add Order */
section.hero.new_order {
    padding: 0 20px;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    align-items: center;
}

.stepper{
    background:#fff;
    border-radius:16px;
    border:1px solid var(--border);
    padding:30px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    align-self: stretch;
}
.stepper .step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
.stepper .step span{
    font-size:14px;
    font-weight:600;
    color:#666;
}
.stepper .circle{
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid #ddd;
    display:flex;
    justify-content:center;
   align-items:center;
    color:#b3b3b3;
    background:#fff;
}
.stepper .step.active .circle {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.stepper .step.completed .circle {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.stepper .step.completed span {
    color: var(--primary-color);
}
.stepper .step.completed + .line {
    background: var(--primary-color);
}
.stepper .circle, .stepper .line, .stepper .step span {
    transition: all 0.3s ease;
}
.stepper .line{
    width: 2px;
    height: 60px;
    flex-grow: 1;
    background: #e8e8e8;
}
.content_wrap.order_page {
    grid-template-columns: 90px 1fr;
}
.content_wrap.order_page_full {
    display: block;
}
.content_wrap.order_page h3 {
    margin-bottom: 12px;
}
.btn.small {
    padding: 10px 10px;
    font-size: 12px;
}
section.add_wrap {
    padding: 0 0 0px;
}
section.add_wrap .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section.add_wrap .card {
    margin-bottom: 20px;
}
.return-switch{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}
.return-switch .switch{
    position:relative;
    width:42px;
    height:24px;
}
.return-switch .switch input{
    display:none;
}
.switch .slider{
    position:absolute;
    inset:0;
    border-radius:30px;
    background:#d6d6d6;
    cursor:pointer;
    transition:.3s;
}
.switch .slider:before{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    transition:.3s;
}
.switch input:checked + .slider{
    background:var(--primary-color);
}
.switch input:checked + .slider:before{
    transform:translateX(18px);

}
/* ==============================
   WAREHOUSE GRID
================================= */

.warehouse-grid {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    box-sizing: border-box;
}

/* ==============================
   WAREHOUSE CARD
================================= */

.warehouse-card {
    width: 100%;
    margin: 0;
    padding: 18px 20px;
    box-sizing: border-box;

    background: #fff;
    border: 1px solid #e5e8ed;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ==============================
   ICON AREA
================================= */

.warehouse-card .warehouse-icon {
    margin: 0 0 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 7px;

    background: transparent;
    border: 0;
    box-shadow: none;
}

.warehouse-card .warehouse-icon i {
    margin: 0;
    padding: 0;

    background: transparent;
    color: #0b61dd;

    font-size: 16px;
}

.warehouse-card .warehouse-icon small {
    margin: 0;
    padding: 0;

    background: transparent;
    color: #6b7280;

    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ==============================
   HEADING
================================= */

.warehouse-card h4 {
    margin: 0 0 5px;
    padding: 0;

    background: transparent;
    border: 0;
    box-shadow: none;

    color: #252b35;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* ==============================
   DESCRIPTION
================================= */

.warehouse-card p {
    margin: 0;
    padding: 0;
    text-align: left;
    color: #9aa1ac;
    font-size: 12px;
    line-height: 1.4;
}


.product-card {
    padding: 24px;
    background: #f3f3f3;
    border-radius: 12px;
    margin-bottom: 12px;
}
.package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-direction: column;
    font-size: 21px;
}
.mps-box{
    display:flex;
    align-items:center;
    gap:12px;
}
.mps-box label{
    font-size:14px;
    font-weight:500;
}
.mps-box select{
    width:120px;
    height:36px;
    border:1px solid #e5e5e5;
    border-radius:10px;
    padding:0 15px;
    font-size:15px;
    outline:none;
    background:#fff;
}
.weight-options{
    display:flex;
    align-items:center;
    gap:60px;
    margin-bottom:35px;
    flex-wrap:wrap;
}

.weight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}
.weight-item input{
    display:none;
}

.weight-item span{
    width:18px;
    height:18px;
    border:2px solid #d4d4d4;
    border-radius:50%;
    position:relative;
}
.weight-item input:checked + span {
    border-color: var(--primary-color);
}
.weight-item input:checked + span::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dimension-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}
.courier-sidebar{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:22px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.courier-sidebar h3{
    font-size:20px;
    font-weight:600;
    color:#1b1b1b;
    margin-bottom:22px;
}
.courier-filter{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-bottom:20px;

}
.filter-group select{
    width:100%;
    height:48px;
    border:1px solid #dedede;
    border-radius:10px;
    padding:0 18px;
    font-size:15px;
    background:#fff;
    outline:none;
    cursor:pointer;
}
.courier-selection {
    background: #f6f6f6;
    border-radius: 8px;
    min-height: 55px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    margin-bottom: 70px;
}
.selection-title{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    font-weight:500;
}
.radio-active{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid var(--primary-color);
    position:relative;
}
.radio-active::after{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background: var(--primary-color);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.courier-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.courier-total span {
    font-size: 16px;
    font-weight: 700;
}
.courier-total strong{
    font-size:24px;
    font-weight:800;
    color:#111;
}
.courier-sidebar .btn.primary_btn {
    width: 100%;
}

/* Shipments */
.content_wrap.shipments_wrap {
    display: block;
    width: 100%;
}
.orders-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:28px;

}
.orders-header .header-left{
    display:flex;
    align-items:center;
    gap:30px;
}
.orders-header .header-right{
    display:flex;
    gap:14px;
}
.order-tabs{
    display:flex;
    background:#f2f2f2;
    border-radius:12px;
    padding:5px;
}
.tab-btn{
    border:none;
    background:none;
    padding:12px 18px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}
.tab-btn.active{
    background:var(--primary-color);
    color:#fff;
}
.shipment-type{
    display:flex;
    align-items:center;
    gap:22px;
}
.shipment-actions{
    display:flex;
    flex-direction: column;
    align-items:center;
    gap:10px;
}
.radio-btn{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-size:16px;
    font-weight:500;
}
.radio-btn input{
    display:none;
}
.radio-btn span{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid var(--primary-color);
    position:relative;
}
.radio-btn input:checked + span::after{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--primary-color);
    position:absolute;
    left:50%;
    top:50%;
  transform:translate(-50%,-50%);
}
section.filter-card {
    /* padding: 0; */
}
.filter-grid{
    display:grid;
    grid-template-columns:140px 290px 160px 1fr auto auto;
    gap:14px;
    align-items:center;
}
.date-field{
    display:flex;
}

.date-field input{
    border-radius:8px 0 0 8px;
    border-right:none;
}
.date-field button{
    width:48px;
    border:1px solid #dcdcdc;
    border-left:none;
    border-radius:0 8px 8px 0;
    background:#fff;
    cursor:pointer;
    transition:.25s;
}
.date-field button:hover{
    background:#f8f8f8;
}
.action-btn {
    margin-top: 14px;
}
.status-tabs {
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 22px;
    margin-top: 12px;
}
.status-tab{
    height:48px;
    padding:0 24px;
    border:none;
    border-right:1px solid #e8e8e8;
    background:#fff;
    color:#4a5568;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:.25s;
    white-space:nowrap;
}
.status-tab:last-child{
    border-right:none;
}
.status-tab:hover{
    background:#f7f7f7;
}
.status-tab.active{
    background:var(--primary-color);
    color:#fff;
    font-weight:600;
}
.orders-card {
    background: #fff;
    padding: 15px;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
    border: 1px solid #ddd;
}
.orders-top, .table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 18px;
}
.orders-actions{
    display:flex;
    gap:12px;
}
.page-size select{
  width:90px;
    height:40px;
    border:1px solid #dcdcdc;
    border-radius:8px;
    padding:0 12px;
}
.table-pagination{
    display:flex;
    align-items:center;
    gap:16px;
}
.table-pagination button{
    width:36px;
    height:36px;
    border:1px solid #dcdcdc;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
}
.table-responsive{
    overflow-x:auto;
    width:100%;
    position:relative;
    max-width:100%;
}
.orders-table{
    width:100%;
    min-width:1700px;
    border-collapse:separate;
    border-spacing:0;
}
.orders-table thead{
    background:#fafafa;
}
.orders-table th {
    padding: 16px 9px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #f2f2f2;
    background: #fafafa;
}
.orders-table th:last-child{
    border-right:none;
}
.orders-table td{
    padding:24px 18px;
    border-bottom:1px solid #ececec;
    background:#fff;
}
.orders-table th.action-col,
.orders-table td.action-col {
    position: sticky;
    right: 0;
    z-index: 2;
    text-align: center;
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.05);
}
.orders-table thead th.action-col {
    z-index: 3;
    background: #fafafa;
}
.orders-table td.action-col {
    background: #fff;
}
.orders-table input[type="checkbox"]{
    width:18px;
    height:18px;
}
.table-pagination.table-footer {
    margin-top: 14px;
}

/* Form Grids */
.form-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}
.form-grid.two-column {
    grid-template-columns: repeat(2, 1fr);
}
.form-grid.three-column {
    grid-template-columns: repeat(3, 1fr);
}
.form-grid.four-column {
    grid-template-columns: repeat(4, 1fr);
}
.form-grid.five-column {
    grid-template-columns: repeat(5, 1fr);
}

/* Wallet */

.amount-group{
    display:grid;
    grid-template-columns:1fr 1fr;
}
.amount-group input:first-child{
    border-radius:8px 0 0 8px;
}
.amount-group input:last-child{
    border-left:none;
    border-radius:0 8px 8px 0;
}
.wallet-table .sub-head {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    font-size: 13px;
}
.wallet-table .sub-head span{
    border:1px solid #ccc;
    border-radius:8px;
    padding:6px 12px;
    font-size:13px;
    background:#fff;
}
th.text-center {
    text-align: center;
}
.quick-amount {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin:28px 0 35px;
}
.quick-amount button {
    width: 85px;
    height: 42px;
    border: none;
    border-radius: 50px;
    background: #f5f5f5;
    font-size: 14px;
    cursor: pointer;
    transition: .25s;
}
.quick-amount button:hover{
    background:var(--primary-color);
    color:#fff;
}
.wallet-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.promo-box{
    display:flex;
}
.promo-box input{
    border-radius:12px 0 0 12px;
}
.promo-box button{
    width:120px;
    border:none;
    background:#f5f5f5;
    border:1px solid #e5e5e5;
    border-left:none;
    border-radius:0 12px 12px 0;
    cursor:pointer;
    font-size:16px;
}
.payment-method{
    margin-bottom:30px;

}
.wallet-card hr{
    border:none;
    border-top:1px dashed #e5e5e5;
    margin-bottom:25px;
}
.form_left .gateway{
    display:flex;
    align-items:center;
    gap:18px;
    cursor:pointer;
}
.form_left .gateway input{
    display:none;

}
.form_left .gateway span{
    width:20px;
    height:20px;
    border:2px solid var(--primary-color);
    border-radius:50%;
    position:relative;
}
.form_left .gateway span::after{
    content:"";
    width:8px;
    height:8px;
    background:var(--primary-color);
    border-radius:50%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.form_left .gateway img{
     height:38px;
}
.wallet-summary{
    margin-bottom:28px;
}
.wallet-summary div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 15px;
}
.wallet-summary strong{
    font-size:15px;
}
button.btn.payment-btn {
    width: 100%;
}
section.card.recharge-wallet-card {
    display: flex;
    align-items: center;
}
section.card.recharge-wallet-card .form_left {
    width: 68%;
}
section.card.recharge-wallet-card .wallet-banner {
    width: 32%;
    height: -webkit-fill-available;
}

/* NDR */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 18px;
    margin: 12px 0;
}
.summary-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    padding:18px 22px;
    transition:.3s;
}
.summary-card h2{
    font-size:28px;
    font-weight:700;
    color:#000;
    margin-bottom:8px;
}
.summary-card p{
    font-size:14px;
    color:#5b5b5b;
    line-height:1.3;
}

/* Order form actions styling */
.order-form-actions {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}
.order-form-actions .btn.primary_btn {
    min-width: 280px;
    padding: 8px 40px;
    font-size: 18px;
    font-weight: 600;
    height: auto;
    border-radius: 12px;
    line-height: normal;
    text-align: center;
    transition: all 0.25s ease;
}

.order-form-actions .btn.primary_btn:hover{
    transform: translateY(-3px);
}

/* Tab buttons styling for anchors */
a.tab-btn {
    text-decoration: none;
    color: #444 !important;
}
a.tab-btn:hover {
    color: var(--primary-color) !important;
}
a.tab-btn.active {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* Status tabs styling for anchors */
a.status-tab {
    text-decoration: none;
    color: #4a5568 !important;
}
a.status-tab:hover {
    background: #f7f7f7 !important;
    color: #4a5568 !important;
}
a.status-tab.active {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* Filter Card UI Styling */
.filter-card {
    background: #fdfdfd;
    border: 1px solid #e5e7eb;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filter-main-row {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr 2.5fr 1.8fr;
    gap: 16px;
    align-items: end;
}

.filter-extra-row {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr 2.5fr 1.8fr;
    gap: 16px;
    align-items: end;
    margin-top: 16px;
}

.filter-main-row .form-group,
.filter-extra-row .form-group {
    margin-bottom: 0;
}

.filter-main-row .form-group label,
.filter-extra-row .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 6px;
    display: block;
}

.filter-main-row .form-group input, 
.filter-main-row .form-group select,
.filter-extra-row .form-group input,
.filter-extra-row .form-group select {
    height: 46px;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    background-color: #fff;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

.filter-main-row .form-group input::placeholder,
.filter-extra-row .form-group input::placeholder {
    color: #9ca3af;
}

/* Date range input with calendar icon */
.input-with-icon {
    position: relative;
    width: 100%;
}
.input-with-icon input {
    padding-right: 40px !important;
}
.input-with-icon i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    font-size: 16px;
}

/* Search group with select and input joined */
.search-input-group {
    display: flex;
    width: 100%;
}
.search-input-group select {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    width: 38% !important;
    min-width: 110px;
}
.search-input-group input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    width: 62% !important;
}

/* Range input group for min/max order value */
.range-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    height: 46px;
    padding: 0 10px;
    box-sizing: border-box;
}
.range-input-group input {
    border: none !important;
    width: 45% !important;
    padding: 0 !important;
    text-align: center !important;
    height: 100% !important;
    background: transparent !important;
    outline: none !important;
    font-size: 14px;
    color: #1f2937;
}
.range-input-group .divider {
    color: #d1d5db;
    margin: 0 6px;
    font-weight: 300;
}

/* Filter Actions buttons */
.filter-actions {
    display: flex;
    gap: 12px;
    height: 46px;
    align-items: center;
}
.filter-actions .btn {
    height: 46px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-sizing: border-box;
}
.filter-actions .search-btn {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: #fff !important;
}
.filter-actions .search-btn:hover {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}
.filter-actions .reset-btn {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #4b5563 !important;
}
.filter-actions .reset-btn:hover {
    background: #f9fafb !important;
    color: #1f2937 !important;
}

/* ==========================================================================
   SUPPORT TICKETS STYLING
   ========================================================================== */

/* Main Tabs Override */
.tickets-nav-container {
    margin-bottom: 25px;
    display: flex;
}
.tickets-nav-container .tab-btn {
    text-decoration: none;
    color: #555;
    background: #f2f2f2;
    margin-right: 5px;
    display: inline-block;
}

/* Split Columns Layout */
.ticket-form-split {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-top: 25px;
}
.ticket-col-left {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.ticket-col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: sticky;
    top: 20px;
}

/* Ticket Cards */
.ticket-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ticket-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

/* Details Grid */
.ticket-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
}
.ticket-detail-item {
    display: flex;
    flex-direction: column;
}
.ticket-detail-item.full-width {
    grid-column: span 2;
}
.ticket-detail-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.ticket-detail-value {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Product Info Block */
.ticket-product-block, .ticket-address-block {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid #f1f5f9;
    font-weight: 600;
    font-size: 14px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ticket-product-block i, .ticket-address-block i {
    color: var(--primary-color);
}

/* Copy Action */
.copy-btn {
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.2s;
    font-size: 13px;
}
.copy-btn:hover {
    color: var(--primary-color);
}
.copy-success-tooltip {
    font-size: 11px;
    color: #15803d;
    font-weight: 500;
    margin-left: 5px;
    animation: fadeInOut 1.5s forwards;
}

/* Drag and Drop Upload Area */
.ticket-upload-box {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ticket-upload-box:hover, .ticket-upload-box.dragover {
    border-color: var(--primary-color);
    background: #fafafa;
}
.ticket-upload-icon {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 12px;
}
.ticket-upload-text {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}
.ticket-upload-subtext {
    font-size: 11px;
    color: #64748b;
}
.ticket-upload-preview {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #15803d;
    display: none;
}

/* Status Badges */
.badge-status {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}
.status-open {
    background: #dcfce7;
    color: #15803d;
}
.status-closed {
    background: #f1f5f9;
    color: #475569;
}

/* Priority Badges */
.badge-priority {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}
.priority-low {
    background: #f1f5f9;
    color: #475569;
}
.priority-medium {
    background: #eff6ff;
    color: #1d4ed8;
}
.priority-high {
    background: #fff7ed;
    color: #c2410c;
}
.priority-urgent {
    background: #fef2f2;
    color: #b91c1c;
}

/* Ticket Form Button overrides to avoid inline styles */
.ticket-search-btn {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    height: 46px;
    padding: 0 24px;
    color: #fff !important;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}
.ticket-search-btn:hover {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}
.ticket-search-clear-btn {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #4b5563 !important;
    height: 46px;
    padding: 0 24px;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.ticket-search-clear-btn:hover {
    background: #f9fafb !important;
    color: #1f2937 !important;
}
.ticket-create-submit-btn {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    flex: 1;
    height: 44px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--primary-color);
}
.ticket-create-submit-btn:hover {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}
.ticket-create-clear-btn {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #4b5563 !important;
    flex: 1;
    height: 44px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ticket-create-clear-btn:hover {
    background: #f9fafb !important;
    color: #1f2937 !important;
}
.ticket-detail-value.courier-value {
    font-weight: 700;
    color: var(--primary-color);
}
.confirm_btn_wrap.ticket-form-actions {
    display: flex;
    gap: 15px;
}
.filter-form.ticket-search-form {
    margin-bottom: 25px;
}
.filter-main-row.ticket-search-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}
.form-group.ticket-search-type-group {
    width: 200px;
}
.ticket-search-input {
    height: 46px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 0 15px;
    width: 100%;
}
.filter-actions.ticket-search-actions {
    margin: 0;
}
.ticket-form-label {
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
    font-size: 13px;
    color: #475569;
}
.ticket-form-select {
    width: 100%;
    height: 44px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 0 10px;
    font-weight: 600;
}
.ticket-form-textarea {
    width: 100%;
    height: 120px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}
.form-group.ticket-group-20 {
    margin-bottom: 20px;
}
.form-group.ticket-group-25 {
    margin-bottom: 25px;
}
.form-group.search-group.grow-group {
    flex: 1;
}

/* Clipboard Fade Animation */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(2px); }
    15% { opacity: 1; transform: translateY(0); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-2px); }
}

/* Billing */
.orders-header .form-group {
    margin-bottom: 0;
}
.cod-top-section{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:24px;
    margin-bottom:24px;
}
.cod-summary-card,
.cod-chart-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    min-height:430px;
    overflow:hidden;
}
.cod-summary-card{
    display:flex;
    justify-content:center;
    align-items:center;
}
.empty-state{
    text-align:center;
}
.empty-icon{
    width:110px;
    height:110px;
    margin:auto;
    border-radius:50%;
    background:#f5f7fb;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
}
.empty-icon i{
    font-size:48px;
    color:#c6ccd8;
}
.empty-state h4{
    color:#8a8f9b;
    font-size:18px;
    font-weight:500;
}
.chart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 24px;

}
.chart-tabs{
    display:flex;
     gap:12px;
}
.chart-tabs button {
    border-radius: 5px;
    padding: 12px 28px;
    font-size: 13px;
    border: 2px solid;
    background: #fff;
    cursor: pointer;
    transition: .3s;
}
.chart-tabs .success{
    background:#61c36d;
    border-color:#61c36d;
   color:#fff;
}
.chart-tabs .warning{
   border-color:#d9b049;
    color:#d9a01f;
}
.chart-tabs .primary{
    border-color:#4d6bff;
    color:#4d6bff;
}
section.card.top_section {
    margin-bottom: 20px;
}

/* ==========================================================================
   Manifest System & Create Manifest Page Styles
   ========================================================================== */
.orders-header-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.courier-group-card {
    margin-bottom: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.courier-group-header {
    background: #f8fafc;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.courier-group-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.courier-group-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-color, #3b82f6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.courier-group-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    text-transform: capitalize;
}

.courier-group-subtitle {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.courier-group-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.courier-group-footer {
    background: #f1f5f9;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.courier-group-summary {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.group-selected-count {
    color: #2563eb;
    font-weight: 700;
}

.group-selected-weight {
    color: #059669;
    font-weight: 700;
}

.manifest-status-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.manifest-status-badge.status-pending {
    background: #dbeafe;
    color: #1e40af;
}

.manifest-status-badge.status-generated,
.manifest-status-badge.status-completed {
    background: #dcfce7;
    color: #166534;
}

.manifest-status-badge.status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.manifest-empty-card {
    text-align: center;
    padding: 50px 20px;
}

.manifest-empty-icon {
    font-size: 48px;
    color: #94a3b8;
    margin-bottom: 16px;
    display: block;
}

.manifest-empty-title {
    margin: 0 0 8px 0;
    color: #334155;
    font-size: 18px;
}

.manifest-empty-desc {
    color: #64748b;
    margin: 0 0 20px 0;
}

.checkbox-md {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.divider-pipe {
    margin: 0 8px;
    color: #cbd5e1;
}

.text-subtle {
    color: #64748b;
}

.text-blue {
    color: #2563eb;
}

.badge-shipment-count {
    background: #e2e8f0;
    color: #1e293b;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.action-btn-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn_print_manifest {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.popup_wrap.aud_popup .popup_col.modal-wide {
    max-width: 900px;
    width: 100%;
}

.popup_wrap.aud_popup{
    z-index: 10003;
}

/* ==========================================================================
   Reports System & KPI Dashboard Styles
   ========================================================================== */
.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.card-blue .kpi-icon { background: #dbeafe; color: #2563eb; }
.card-green .kpi-icon { background: #dcfce7; color: #166534; }
.card-amber .kpi-icon { background: #fef3c7; color: #d97706; }
.card-purple .kpi-icon { background: #f3e8ff; color: #7e22ce; }
.card-emerald .kpi-icon { background: #ccfbf1; color: #0d9488; }
.card-rose .kpi-icon { background: #ffe4e6; color: #e11d48; }

.kpi-details {
    display: flex;
    flex-direction: column;
}

.kpi-title {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}

.kpi-value {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.reports-wrap .reports-export-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.reports-wrap .reports-export-btns .btn-export-csv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 118px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease,
        opacity 0.2s ease;
}

.reports-wrap .reports-export-btns .btn-export-csv i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}

.reports-wrap .reports-export-btns .btn-export-csv:hover {
    filter: brightness(0.96);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.09);
    transform: translateY(-1px);
}

.reports-wrap .reports-export-btns .btn-export-csv:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
}

.reports-wrap .reports-export-btns .btn-export-csv:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* order tracking */
.tracking-link {
    color: var(--info-color);
    text-decoration: underline;
}

.tracking-link:hover {
    color: var(--success-color);
}

/* DASHBOARD LAYOUT  */

.dashboard {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    position: relative;
    width: 75px;
    min-width: 75px;
    height: 100vh;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    scrollbar-width: none;
    transition:
        width 0.3s ease,
        min-width 0.3s ease;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar.expanded {
    width: 250px;
    min-width: 250px;
}

.dashboard .content {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 100vh;
    margin-left: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar .logo {
    cursor: pointer;
}

.sidebar:not(.expanded) .logo-right {
    display: none;
}

.sidebar:not(.expanded) .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    min-width: 100px;
    margin-bottom: 12px;
    padding-bottom: 28px;
    box-sizing: border-box;
    position: relative;
    right: 13px;
}

.sidebar:not(.expanded) .logo-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sidebar:not(.expanded) .menu {
    width: 75px;
    margin: 0;
    padding: 0;
}

.sidebar:not(.expanded) .menu li {
    width: 75px;
}

.sidebar:not(.expanded) .menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 46px;
    padding: 0;
    font-size: 0;
    white-space: nowrap;
    box-sizing: border-box;
    gap: 0;
}

.sidebar:not(.expanded) .menu li a i {
    width: 20px;
    min-width: 20px;
    margin: 0;
    font-size: 19px;
    text-align: center;
}

.sidebar:not(.expanded) .refer-card {
    display: none;
}

.sidebar.expanded .logo-right {
    display: block;
}

.sidebar.expanded .menu li a {
    white-space: nowrap;

}

.sidebar-expand-arrow {
    position: fixed;
    top: 80px;
    left: 63px;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid #d9dee7;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.14);
    transition:
        left 0.3s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sidebar-expand-arrow:hover {
    background: #f5f7fa;
    color: #172033;
    border-color: #cbd3df;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.18);
}

.sidebar-expand-arrow i {
    font-size: 10px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.sidebar-expand-arrow.is-inside {
    left: 236px;
}

.sidebar-expand-arrow.is-inside i {
    transform: rotate(180deg);
}

.sidebar.pinned .sidebar-expand-arrow {
    opacity: 1;
}

.sidebar .menu li a {
    transition:
        padding 0.3s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.sidebar.expanded .menu li a {
    justify-content: flex-start;
    gap: 10px;
}

.sidebar.expanded .menu li a i {
    flex-shrink: 0;
}

.search {
    display: grid !important;
    grid-template-columns: 65px minmax(0, 1fr) 50px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.search select {
    width: 100% !important;
    min-width: 0 !important;
    height: 45px;
    border-radius: 0;
}

.search input {
    width: 100% !important;
    min-width: 0 !important;
    height: 45px;
    box-sizing: border-box;
    border-radius: 0;
}

.search button {
    width: 50px !important;
    min-width: 50px !important;
    height: 45px;
    padding: 0;
    border-radius: 0;
}

/* Add Order Page  */
  
/* SHIPPING TYPE TOGGLE  */

.shipping-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    background: #f3f6fa;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
}

.shipping-type .radio {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 110px;
    padding: 11px 18px;

    border-radius: 10px;
    cursor: pointer;

    font-size: 14px;
    font-weight: 600;
    color: #64748b;

    transition: all 0.3s ease;
}

/* Hide original radio */
.shipping-type .radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Custom radio icon */
.shipping-type .radio span {
    width: 10px;
    height: 10px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: none;
}

/* Active option */
.shipping-type .radio.active,
.shipping-type .radio:has(input:checked) {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.12);
}

/* Hover */
.shipping-type .radio:hover {
    color: #a3abb6;
}

.page-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.page-right .order-type {
    display: flex;
    align-items: center;
    padding: 4px;
    gap: 3px;

    background: #f1f4f8;
    border: 1px solid #dce3eb;
    border-radius: 12px;

    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.04),
        0 2px 6px rgba(15, 23, 42, 0.04);
}

.page-right .order-type .btn {
    min-height: 46px;
    padding: 0 22px;

    border: none;
    border-radius: 9px;
    background: transparent;

    color: #64748b;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}



/* Active Tab */

.page-right .order-type .btn.active {
    background: #1e293b;
    color: #ffffff;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.22);
}

.page-right .order-type .btn:hover {
    color: #1e293b;
}

.page-right .order-type .btn.active:hover {
    background: #111827;
    color: #ffffff;
}

.page-right .primary_btn-btn {
    min-height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #1e293b;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.18);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.page-right .primary_btn-btn i {
    font-size: 15px;
}

.page-right .primary_btn-btn:hover {
    background: #0f172a;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.25);
}

.page-right .secondary_btn {
    min-height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #1e293b;
    border-radius: 10px;
    background: #ffffff;
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.page-right .secondary_btn i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1e293b;
    color: #ffffff;
    font-size: 11px;
    transition:
        transform 0.3s ease;
}

.page-right .secondary_btn:hover {
    background: #1e293b;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.18);
}

.page-right .secondary_btn:hover i {
    background: #ffffff;
    color: #1e293b;
    transform: rotate(90deg);
}

.page-right .btn:active {
    transform: translateY(0) scale(0.98);
}

/* Stepper  */

.stepper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 22px 18px;
    background: #ffffff;
    border: 1px solid #e8edf3;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}


.stepper .step {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    color: #94a3b8;
    transition: all 0.3s ease;
}


.stepper .circle {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4f6f9;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 17px;
    transition: all 0.3s ease;
}

.stepper .step span {
    position: relative;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.3s ease;
}

.stepper .line {
    width: 2px;
    height: 30px;
    margin-left: 22px;
    background: #e2e8f0;
    position: relative;
    transition: all 0.3s ease;
}

.stepper .step.active {
    color: #1e293b;
}

.stepper .step.active .circle {
    color: #ffffff;
    background: #1e293b;
    border-color: #1e293b;
    box-shadow:
        0 0 0 6px rgba(30, 41, 59, 0.08),
        0 8px 18px rgba(30, 41, 59, 0.25);
}

.stepper .step.active span {
    font-weight: 700;
    color: #1e293b;
}


/* Small active indicator */

.stepper .step.active span::after {
    content: "CURRENT";
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #64748b;
}

.stepper .step:hover .circle {
    transform: scale(1.08);
    border-color: #94a3b8;
}

.stepper .step:hover span {
    color: #1e293b;
}

.stepper .step.completed .circle {
    background: #eaf8f1;
    border-color: #c8ead9;
    color: #22a06b;
}

.stepper .step.completed span {
    color: #22a06b;
}

/* Green completed line */

.stepper .line.completed {
    background: #22a06b;
}

/* WareHouse Address  */

.card:has(.pickup-row) {
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.card:has(.pickup-row) .card-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #edf1f5;
    justify-content: center;
    width: 100%;
}

/* Left accent */
.card:has(.pickup-row) .card-header::before {
    content: "";
    width: 5px;
    height: 28px;
    flex-shrink: 0;
    margin-right: 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, #3d7cff, #1e2b3c);
}

/* Heading */
.card:has(.pickup-row) .card-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.3px;
}

.pickup-row {
    padding: 24px;
    margin: 0 !important;
    align-items: flex-end;
    background: #ffffff;
    width: 100%;
}

.pickup-row .form-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 9px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.pickup-row .form-group label span {
    color: #ef4444;
    font-size: 15px;
}

.pickup-row .select2-container {
    width: 100% !important;
}

.pickup-row .select2-selection--single {
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 10px !important;
    transition: all 0.25s ease;
}

.pickup-row
.select2-selection--single
.select2-selection__rendered {
    padding-left: 16px !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 52px !important;
}

.pickup-row
.select2-selection--single
.select2-selection__placeholder {
    color: #94a3b8 !important;
}


/* Arrow */

.pickup-row
.select2-selection__arrow {
    height: 50px !important;
    width: 45px !important;
}

.pickup-row
.select2-selection__arrow
b {
    border-color: #64748b transparent transparent transparent !important;
}


/* Focus */

.pickup-row
.select2-container--open
.select2-selection--single,
.pickup-row
.select2-selection--single:hover {
    background: #ffffff !important;
    border-color: #1e293b !important;
    box-shadow:
        0 0 0 4px rgba(30, 41, 59, 0.07);
}

/* Normal select - Return location */

.pickup-row select:not(.select2-hidden-accessible) {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    outline: none;
    font-size: 14px;
    transition: all 0.25s ease;
}

.pickup-row select:not(.select2-hidden-accessible):focus {
    background: #ffffff;
    border-color: #1e293b;

    box-shadow:
        0 0 0 4px rgba(30, 41, 59, 0.07);
}

.return-switch {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.25s ease;
    width: 30%;
    justify-content: center;
}

.return-switch:hover {
    background: #ffffff;
    border-color: #cbd5e1;
}


/* Hide original checkbox */

.return-switch .switch {
    position: relative;
    width: 42px;
    height: 23px;
    display: inline-block;
    flex-shrink: 0;
}

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

.return-switch .slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #cbd5e1;
    border-radius: 30px;
    transition: 0.3s ease;
}

.return-switch .slider::before {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    left: 3px;
    top: 3px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: 0.3s ease;
}

.return-switch input:checked + .slider {
    background: #1e293b;
}

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

.warehouse-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 0 24px 24px;
}

.warehouse-card {
    position: relative;
    padding: 22px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* Decorative background circle */

.warehouse-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -45px;
    bottom: -55px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.04);
}


/* Hover */

.warehouse-card:hover {
    transform: translateY(-3px);
    border-color: #cbd5e1;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08);
}

.warehouse-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.warehouse-icon i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef2f6;
    color: #1e293b;
    font-size: 17px;
}


/* Label: Pickup / Return */

.warehouse-icon small {
    padding: 5px 10px;
    background: #f1f5f9;
    border-radius: 20px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.warehouse-card h4 {
    position: relative;
    z-index: 2;
    margin: 0 0 7px;
    color: #334155;
    font-size: 15px;
    font-weight: 650;
}

.warehouse-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
}

.warehouse-card:first-child {
    border-left: 4px solid #1e293b;
}

.warehouse-card:nth-child(2) {
    border-left: 4px solid #64748b;
}



/* Delivery Address  */
.card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e7ebf0;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 8px 30px rgba(20, 32, 50, 0.06);
    overflow: hidden;
}

/* Top accent */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: #1d2a3d;
}


/* Section Title */
.card .section-title {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 25px;
    padding: 16px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #1e2b3c;
    border-bottom: 1px solid #e8edf3;
    justify-content: center;
    width: 100%;
}

/* Attractive vertical accent */
.card .section-title::before {
    content: "";
    width: 5px;
    height: 28px;
    flex-shrink: 0;
    margin-right: 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, #3d7cff, #1e2b3c);
}

.card .form-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
    padding: 0 24px;
}

.card .form-grid.two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card .form-grid.three-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-card .form-grid.three-column{
    padding: 0;
}

.card .form-group {
    position: relative;
}

.card .form-grid .form-group {
    margin-bottom: 0;
}

.card .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #39465a;
    text-align: left;
}

.card .form-group label span {
    color: #e74c3c;
    margin-left: 3px;
}

.card .form-group input,
.card .form-group select,
.card .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dce3ea;
    border-radius: 10px;
    background: #fafbfd;
    color: #1d2a3d;
    font-size: 14px;
    padding: 13px 15px;
    outline: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        transform 0.2s ease;
}


/* Input height */

.card .form-group input,
.card .form-group select {
    height: 48px;
}

/* Textarea */

.card .form-group textarea {
    min-height: 95px;
    resize: vertical;
    line-height: 1.5;
}

/* Placeholder */

.card .form-group input::placeholder,
.card .form-group textarea::placeholder {
    color: #aab3bf;
}


/* Hover */

.card .form-group input:hover,
.card .form-group select:hover,
.card .form-group textarea:hover {
    border-color: #b9c4d0;
    background: #ffffff;
}


/* Focus */

.card .form-group input:focus,
.card .form-group select:focus,
.card .form-group textarea:focus {
    background: #ffffff;
    border-color: #1d2a3d;
    box-shadow:
        0 0 0 4px rgba(29, 42, 61, 0.08);
    transform: translateY(-1px);
}

.card .form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, #667085 50%),
        linear-gradient(135deg, #667085 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 20px,
        calc(100% - 13px) 20px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}


.card .form-group textarea {
    border-radius: 12px;
}


/* Make the address field feel important */

.card .form-group:has(textarea) {
    margin: 5px 0 20px;
    width: 100%;
    padding: 0 24px;
}

.card:hover {
    box-shadow:
        0 12px 35px rgba(20, 32, 50, 0.08);
}


/* Package Details  */

.package-card {
    padding: 0 !important;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7ebf0;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(20, 32, 50, 0.06);
}

.package-card .package-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #edf1f5;
    margin-bottom: 0;
    width: 100%;
}

.package-card .package-header h3 {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 17px;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.3px;
    margin-bottom: 20px;
}

/* Left accent */
.package-card .package-header h3::before {
    content: "";
    position: absolute;
    left: 0;
    width: 5px;
    height: 28px;
    border-radius: 10px;
    background: linear-gradient(180deg, #3d7cff, #1e2b3c);
}

.package-card .mps-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 12px;
    background: #ffffff;
    border: 1px solid #e1e7ee;
    border-radius: 10px;
}

.package-card .mps-box label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.package-card .mps-box select {
    min-width: 70px;
    height: 34px;
    padding: 0 25px 0 10px;
    border: none;
    border-left: 1px solid #e5e9ee;
    outline: none;
    background-color: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
}

.package-card .weight-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 24px;
    border-bottom: 1px solid #edf1f5;
    margin-bottom: 0;
    width: 100%;
    justify-content: center;
}

.package-card .weight-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 100px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        all 0.25s ease;
}

/* Hide original radio */
.package-card .weight-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Custom radio */
.package-card .weight-item span {
    width: 14px;
    height: 14px;
    border: 2px solid #b8c2ce;
    border-radius: 50%;
    transition: all 0.25s ease;
    display: none;
}


/* Hover */
.package-card .weight-item:hover {
    transform: translateY(-2px);
    border-color: #94a3b8;
    box-shadow: 0 5px 14px rgba(30, 41, 59, 0.08);
}


/* Selected weight */
.package-card .weight-item:has(input:checked) {
    background: #1e293b;
    border-color: #1e293b;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(30, 41, 59, 0.2);
}

.package-card .weight-item:has(input:checked) span {
    border-color: #ffffff;
    box-shadow: inset 0 0 0 3px #1e293b;
    background: #ffffff;
}

.package-card .dimension-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 24px;
    width: 100%;
}

.package-card .dimension-grid .form-group {
    position: relative;
    margin: 0;
}

.package-card .dimension-grid label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.package-card .dimension-grid label span {
    color: #e5484d;
}

.package-card .dimension-grid input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #dce3ea;
    border-radius: 10px;
    background: #fafbfd;
    color: #1e293b;
    font-size: 14px;
    outline: none;
    transition: all 0.25s ease;
}

.package-card .dimension-grid input::placeholder {
    color: #aab3bf;
}

/* Input hover */
.package-card .dimension-grid input:hover {
    background: #ffffff;
    border-color: #b8c3cf;
}

/* Input focus */
.package-card .dimension-grid input:focus {
    background: #ffffff;
    border-color: #1e293b;
    box-shadow: 0 0 0 4px rgba(30, 41, 59, 0.08);
    transform: translateY(-1px);
}

.bulk-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid #e3eaf2;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

div#product_cards_wrap{
    width: 100%;
    padding: 0 24px;
}

.bulk-actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 24px;
    background: linear-gradient(
        135deg,
        #f8fafc 0%,
        #ffffff 100%
    );
    border-bottom: 1px solid #edf1f5;
    margin: 0;
}

.support-main .card a{
    margin-top: 0;
}


/* All buttons */

.bulk-card .bulk-actions-row .btn {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

/* Button hover */

.bulk-card .bulk-actions-row .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.12);
}

/* Upload button */

#btn_upload_csv {
    border: 1px dashed #94a3b8 !important;
    background: #f8fafc;
    color: #334155;
}

#btn_upload_csv i {
    color: #2563eb;
    font-size: 16px;
}

#btn_upload_csv:hover {
    background: #eff6ff;
    border-color: #2563eb !important;
}

/* Place button */

#btn_bulk_place {
    background: #1e293b;
    color: #ffffff;
    border: 1px solid #1e293b;
}

#btn_bulk_place i {
    font-size: 15px;
}


/* Draft button */

#btn_bulk_draft {
    background: #f59e0b;
    color: #ffffff;
    border: 1px solid #f59e0b;
}

#btn_bulk_draft:hover {
    background: #d97706;
}


/* Reset button */

#btn_bulk_reset {
    color: #64748b;
    background: #ffffff;
    border: 1px solid #d8e0e8;
}

#btn_bulk_reset i {
    color: #ef4444;
}

#btn_bulk_reset:hover {
    background: #fff5f5;
    border-color: #fecaca;
}

.download-sample-wrap {
    padding: 18px 24px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #edf1f5;
    margin: 0;
}

.download-sample-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    text-decoration: none;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}


.download-sample-link i {
    font-size: 14px;
}

.download-sample-link:hover {
    background: #dbeafe;
    transform: translateY(-1px);
}

.bulk-card .select-courier-partner-group,
.bulk-card .select-express-group {
    margin: 0 !important;
    padding: 18px 24px 0;
}


.bulk-card .select-express-group {
    padding-bottom: 22px;
}

.support-main .bulk-card .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    text-align: center;
}


.bulk-card .form-group select {
    width: 100%;
    height: 46px;
    padding: 0 40px;
    border: 1px solid #dce3eb;
    border-radius: 9px;
    background-color: #ffffff;
    color: #475569;
    outline: none;
    transition: all 0.2s ease;
}

.bulk-card .form-group select:hover {
    border-color: #94a3b8;
}

.bulk-card .form-group select:focus {
    border-color: #64748b;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.1);
}

/* Disabled select */

.bulk-card .form-group select:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.instructions-section {
    margin: 0 24px;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7edf4;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    width: 100%;
}

/* Header */

.instructions-section h3 {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 18px 22px;
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    background: linear-gradient(
        135deg,
        #f8fafc 0%,
        #ffffff 100%
    );
    border-bottom: 1px solid #edf1f5;
}


/* Left accent */

.instructions-section h3::before {
    content: "";
    width: 5px;
    height: 26px;
    margin-right: 12px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #1e293b;
}


/* Instruction rows */

.instructions-section p {
    position: relative;
    margin: 0;
    padding: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
    border-bottom: 1px solid #edf1f5;
    display: flex;
    transition: background 0.2s ease;
    gap: 5px;
}


/* Remove border from last item */

.instructions-section p:last-child {
    border-bottom: none;
}

/* Number inside circle */

.instructions-section p::after {
    position: absolute;
    top: 50%;
    left: 22px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}


/* Step text */

.instructions-section p strong {
    color: #1e293b;
    font-weight: 700;
}


/* Hover */

.instructions-section p:hover {
    background: #f8fafc;
}

.notes-card {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7edf4;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.notes-card h3 {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 18px 24px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 1px solid #edf1f5;
}

/* Left accent line */

.notes-card h3::before {
    content: "";
    width: 5px;
    height: 28px;
    margin-right: 12px;
    border-radius: 10px;
    background: #1e293b;
    flex-shrink: 0;
}

.notes-card ol {
    margin: 0;
    padding: 12px;
    counter-reset: notes-counter;
}

.notes-card ol li {
    position: relative;
    margin: 12px 0;
    padding: 14px 18px 14px 20px;
    list-style: none;
    font-size: 14px;
    line-height: 1.65;
    color: #526071;
    background: #f8fafc;
    border: 1px solid #edf1f5;
    border-radius: 10px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* Hover effect */

.notes-card ol li:hover {
    transform: translateX(5px);
    background: #ffffff;
    border-color: #d7e0ea;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

/* Highlight important text */
.notes-card ol li strong {
    color: #1e293b;
    font-weight: 700;
}

/* Add Warehouse Modal  */

.warehouse_modal {
    position: relative;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px;
    border-radius: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}


/* Scrollbar will only exist when content needs scrolling */

.warehouse_modal::-webkit-scrollbar {
    width: 6px;
}

.warehouse_modal::-webkit-scrollbar-track {
    background: transparent;
}

.warehouse_modal::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 20px;
}

.warehouse_modal::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.warehouse_modal .close-popup {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f5f7;
    color: #1e293b;
    text-decoration: none;
    font-size: 20px;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.4s ease;
}

/* Rotate the cross button on hover */

.warehouse_modal .close-popup:hover {
    background: #1e293b;
    color: #fff !important;
    transform: rotate(90deg);
}


/* Optional: slightly shrink on click */

.warehouse_modal .close-popup:active {
    transform: rotate(90deg) scale(0.9) !important;
}

.order-form-actions button.btn.outline {
    font-size: 18px;
    border-radius: 12px;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
    gap: 6px;
    min-width: 140px;
}

.order-form-actions button.btn.outline:hover{
    transform: translateY(-3px);
}


/* SHIPMENTS  */

.orders-header {
    width: 100%;
    margin-bottom: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.orders-header .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.orders-header .order-tabs,
.orders-header .shipment-type {
    height: 54px;
    margin: 0;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 0;
    background: #f3f5f8;
    border: 1px solid #e0e5eb;
    border-radius: 12px;
    box-sizing: border-box;
}

.orders-header .tab-btn {
    height: 44px;
    margin: 0;
    padding: 0 22px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #526078;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: all .2s ease;
}

.orders-header .tab-btn:hover {
    color: #172033;
}

.orders-header .tab-btn.active {
    background: #fff;
    color: #172033;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .10);
}

.orders-header .shipment-type {
    padding: 4px;
}

.orders-header .radio-btn {
    position: relative;
    height: 44px;
    margin: 0;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #526078;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s ease;
}

.orders-header .radio-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.orders-header .radio-btn span {
    display: none;
}

.orders-header .radio-btn:has(input:checked) {
    background: #fff;
    color: #172033;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .10);
}

.orders-header .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.orders-header .header-right .btn {
    height: 45px;
    margin: 0;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    transition: all .2s ease;
}

.orders-header .header-right .btn.outline {
    min-width: 145px;
    border: 1px solid #d2d8e0;
    background: #fff;
    color: #172033;
    transition: all .2s ease;
}

.orders-header .header-right .btn.outline:hover {
    background: #f8fafc;
    border-color: #b9c1cc;
    transform: translateY(-2px);
}

.orders-header .header-right .btn.outline i {
    color: #172033;
    font-size: 11px;
}

.orders-header .header-right .btn.primary-btn {
    min-width: 190px;
    border: 1px solid #172033;
    background: #172033;
    color: #fff;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .12);
}

.orders-header .header-right .btn.primary-btn:hover {
    background: #202b3f;
    border-color: #202b3f;
    transform: translateY(-1px);
}

.orders-header .header-right .btn.primary-btn i {
    font-size: 11px;
}

/* SECOND SECTION  */

.filter-card {
    width: 100%;
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e4e8ee;
    border-radius: .75rem;
    box-shadow: 0 .125rem .5rem rgba(15, 23, 42, .04);
}

.filter-card .filter-main-row {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 14% 20% 1fr auto;
    align-items: end;
    gap: .75rem;
}

.filter-card .form-group {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.filter-card .form-group > label {
    display: block;
    margin: 0 0 .4rem;
    padding: 0;
    color: #4b5563;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
}

.filter-card .form-group select,
.filter-card .form-group input {
    width: 100%;
    height: 2.75rem;
    margin: 0;
    padding: 0 .75rem;
    box-sizing: border-box;
    border: 1px solid #dce2e9;
    border-radius: .5rem;
    background: #fff;
    color: #273142;
    font-size: .8rem;
    outline: none;
    transition: .2s ease;
}

.filter-card .form-group select:hover,
.filter-card .form-group input:hover {
    border-color: #c5ccd5;
}

.filter-card .form-group select:focus,
.filter-card .form-group input:focus {
    border-color: #0b61dd;
    box-shadow: 0 0 0 .1875rem rgba(11, 97, 221, .08);
}

.filter-card .date-picker-group .input-with-icon {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.filter-card .date-picker-group .input-with-icon input {
    padding-right: 2.5rem;
}

.filter-card .date-picker-group .input-with-icon i {
    position: absolute;
    top: 50%;
    right: .8rem;
    margin: 0;
    padding: 0;
    color: #7b8594;
    font-size: .8rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.filter-card .search-input-group {
    width: 100%;
    height: 2.75rem;
    margin: 0;
    padding: .25rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    box-sizing: border-box;
    border: 1px solid #dce2e9;
    border-radius: .5rem;
    background: #fff;
    transition: .2s ease;
}

.filter-card .search-input-group:focus-within {
    border-color: #0b61dd;
    box-shadow: 0 0 0 .1875rem rgba(11, 97, 221, .08);
}

.filter-card .search-input-group select {
    flex: 0 0 7rem;
    width: 7rem;
    height: 2.125rem;
    margin: 0;
    padding: 0 .6rem;
    border: 1px solid #dce2e9 !important;
    border-radius: .375rem !important;
    background: #f4f6f9;
    color: #3f4958;
    font-size: .72rem;
    font-weight: 600;
    box-shadow: none;
}

.filter-card .search-input-group select:focus {
    border: 0;
    box-shadow: none;
}

.filter-card .search-input-group input {
    flex: 1;
    width: auto;
    height: 2.125rem;
    margin: 0;
    padding: 0 .65rem;
    border: 0;
    border-radius: .375rem;
    box-shadow: none;
}

.filter-card .search-input-group input:focus {
    border: 0;
    box-shadow: none;
}

.filter-card .filter-actions {
    height: 2.75rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.filter-card .filter-actions .btn {
    height: 40px;
    margin: 0;
    padding: 0 .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: .5rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    transition: .2s ease;
}

.filter-card .filter-actions .search-btn {
    border: 1px solid #172033;
    background: #172033;
    color: #fff;
}

.filter-card .filter-actions .search-btn:hover {
    background: #202b3f;
    border-color: #202b3f;
    transform: translateY(-1px);
}

.filter-card .filter-actions .reset-btn {
    border: 1px solid #dce2e9;
    background: #fff;
    color: #566170;
}

.filter-card .filter-actions .reset-btn:hover {
    background: #f6f8fa;
    border-color: #c5ccd5;
    color: #172033;
}

.filter-card .filter-extra-row {
    width: 100%;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: .75rem;
    border-top: 1px solid #edf0f3;
    box-sizing: border-box;
}

.filter-card .range-input-group {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: .25rem .6rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-sizing: border-box;
    border: 1px solid #dce2e9;
    border-radius: .5rem;
    background: #fff;
}

.filter-card .range-input-group input {
    height: 2.125rem;
    padding: 0 .2rem;
    border: 0;
    box-shadow: none;
}

.filter-card .range-input-group input:focus {
    border: 0;
    box-shadow: none;
}

.filter-card .range-input-group .divider {
    margin: 0;
    padding: 0;
    color: #b5bcc6;
    font-size: .75rem;
}


/* Calender  */

.filter-card .date-picker-group .flatpickr-calendar {
    width: 310px;
    margin-top: 6px;
    padding: 0;
    border: 1px solid #e1e5eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    overflow: hidden;
    box-sizing: border-box;
    font-family: inherit;
}

.filter-card .date-picker-group .flatpickr-calendar.static {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
}

.filter-card .date-picker-group .input-with-icon {
    position: relative;
}

.filter-card .date-picker-group .flatpickr-months {
    height: 48px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    background: #fff;
}

.filter-card .date-picker-group .flatpickr-month {
    height: 48px;
    display: flex;
    align-items: center;
}

.filter-card .date-picker-group .flatpickr-current-month {
    position: static;
    width: auto;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #172033;
    font-size: 14px;
    font-weight: 600;
}

.filter-card .date-picker-group .flatpickr-monthDropdown-months {
    width: auto;
    height: 32px;
    margin: 0;
    padding: 0 20px 0 5px;
    border: 0;
    border-radius: 6px;
    outline: 0;
    background: transparent;
    color: #172033;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.filter-card .date-picker-group .flatpickr-monthDropdown-months:hover {
    background: #f5f7fa;
}

.filter-card .date-picker-group .flatpickr-monthDropdown-months:focus {
    border: 0;
    box-shadow: none;
}

.filter-card .date-picker-group .numInputWrapper {
    width: 78px;
    height: 32px;
}

.filter-card .date-picker-group .numInput.cur-year {
    width: 85px;
    height: 32px;
    margin: 0;
    padding: 0 !important;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
}

.filter-card .date-picker-group .numInput.cur-year:focus {
    border: 0;
    box-shadow: none;
}

.filter-card .date-picker-group .flatpickr-prev-month,
.filter-card .date-picker-group .flatpickr-next-month {
    position: static;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #596474;
    fill: #596474;
    transition: background .2s ease, color .2s ease;
}

.filter-card .date-picker-group .flatpickr-prev-month:hover,
.filter-card .date-picker-group .flatpickr-next-month:hover {
    background: #f3f5f8;
    color: #172033;
    fill: #172033;
}

.filter-card .date-picker-group .flatpickr-prev-month svg,
.filter-card .date-picker-group .flatpickr-next-month svg {
    width: 13px;
    height: 13px;
}

.filter-card .date-picker-group .flatpickr-weekdays {
    height: 32px;
    padding: 0 10px;
    background: #fafbfc;
    border-top: 1px solid #f0f2f5;
    border-bottom: 1px solid #f0f2f5;
}

.filter-card .date-picker-group .flatpickr-weekdaycontainer {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.filter-card .date-picker-group span.flatpickr-weekday {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a8492;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.filter-card .date-picker-group .flatpickr-innerContainer,
.filter-card .date-picker-group .flatpickr-rContainer,
.filter-card .date-picker-group .flatpickr-days {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.filter-card .date-picker-group .dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 8px 10px 10px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
    box-sizing: border-box;
}

.filter-card .date-picker-group .flatpickr-day {
    width: 34px;
    max-width: 34px;
    height: 34px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    line-height: 34px;
    transition: background .15s ease, color .15s ease, border .15s ease;
}

.filter-card .date-picker-group .flatpickr-day:hover {
    border-color: transparent;
    background: #f1f4f8;
    color: #172033;
}

.filter-card .date-picker-group .flatpickr-day.today {
    border-color: #b8c2cf;
    background: #fff;
    color: #172033;
    font-weight: 600;
}

.filter-card .date-picker-group .flatpickr-day.today:hover {
    border-color: #0b61dd;
    background: #f1f6ff;
}

.filter-card .date-picker-group .flatpickr-day.selected,
.filter-card .date-picker-group .flatpickr-day.startRange,
.filter-card .date-picker-group .flatpickr-day.endRange {
    border-color: #172033;
    background: #172033;
    color: #fff;
    font-weight: 600;
}

.filter-card .date-picker-group .flatpickr-day.inRange {
    border-color: transparent;
    border-radius: 0;
    background: #edf3ff;
    box-shadow: none;
    color: #172033;
}

.filter-card .date-picker-group .flatpickr-day.startRange {
    border-radius: 50% 0 0 50%;
}

.filter-card .date-picker-group .flatpickr-day.endRange {
    border-radius: 0 50% 50% 0;
}

.filter-card .date-picker-group .flatpickr-day.startRange.endRange {
    border-radius: 50%;
}

.filter-card .date-picker-group .flatpickr-day.prevMonthDay,
.filter-card .date-picker-group .flatpickr-day.nextMonthDay {
    color: #c4c9d0;
}

.filter-card .date-picker-group .flatpickr-day.disabled {
    color: #d5d9df;
}

.filter-card .date-picker-group .flatpickr-calendar:before,
.filter-card .date-picker-group .flatpickr-calendar:after {
    display: none;
}

.filter-card .date-picker-group .input-with-icon {
    position: relative;
    width: 100%;
}

.filter-card .date-picker-group .flatpickr-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.filter-card .date-picker-group .flatpickr-wrapper > input {
    width: 100%;
    padding-right: 2.5rem;
    box-sizing: border-box;
}

.filter-card .date-picker-group .input-with-icon > i.fa-calendar {
    position: absolute;
    top: 50%;
    right: .75rem;
    z-index: 10;
    margin: 0;
    padding: 0;
    color: #64748b;
    font-size: .8rem;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}


/* Status Tabs  */

.status-tabs {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 3px;
    display: flex;
    align-items: stretch;
    background: #f3f5f8;
    border: 1px solid #e1e5eb;
    border-radius: 11px;
    box-sizing: border-box;
    overflow: hidden;
    gap: 2px;
    margin: 20px 0;
}

.status-tabs .status-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #526078;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.status-tabs .status-tab:hover {
    background: #172033 !important;
    color: #fff !important;
}

.status-tabs .status-tab.active {
    background: #172033 !important;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .13);
}

.status-tabs .status-tab.active:hover {
    background: #202b3f;
    color: #fff;
}

.status-tabs .status-tab:not(.active):active {
    transform: scale(.98);
}

/* Shipment Table  */

.orders-card {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .04);
    overflow: hidden;
    box-sizing: border-box;
}

.orders-card .orders-top {
    min-height: 78px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border-bottom: 1px solid #edf0f4;
    box-sizing: border-box;
}

.orders-card .orders-info {
    min-width: 0;
}

.orders-card .orders-info h2 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.2px;
}

.orders-card .orders-info p {
    margin: 0;
    color: #7b8494;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.orders-card .orders-info p strong {
    color: #475467;
    font-weight: 600;
}

.orders-card .orders-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.orders-card .orders-actions .btn {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all .2s ease;
}

.orders-card .orders-actions .btn i {
    font-size: 11px;
}

.orders-card .orders-actions .primary_btn {
    background: #172033;
    border: 1px solid #172033;
    color: #fff;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .12);
}

.orders-card .orders-actions .primary_btn:hover {
    background: #243047;
    border-color: #243047;
    transform: translateY(-1px);
}

.orders-card .orders-actions .outline {
    background: #fff;
    border: 1px solid #dce2e9;
    color: #475467;
}

.orders-card .orders-actions .outline:hover {
    background: #f8fafc;
    border-color: #cbd3df;
    color: #172033;
}

.orders-card .table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: #cbd3df transparent;
}

.orders-card .table-responsive::-webkit-scrollbar {
    height: 6px;
}

.orders-card .table-responsive::-webkit-scrollbar-track {
    background: #f8fafc;
}

.orders-card .table-responsive::-webkit-scrollbar-thumb {
    background: #cbd3df;
    border-radius: 10px;
}

.orders-card .orders-table {
    width: 100%;
    min-width: 1250px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    table-layout: auto;
}

.orders-card .orders-table thead {
    background: #f8fafc;
}

.orders-card .orders-table th {
    height: 46px;
    padding: 0 15px;
    color: #667085;
    background: #f8fafc;
    border-bottom: 1px solid #e8ecf1;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .55px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.orders-card .orders-table th:first-child {
    padding-left: 20px;
}

.orders-card .orders-table th:last-child {
    padding-right: 20px;
}

.orders-card .orders-table tbody tr {
    background: #fff;
    transition: background .18s ease;
}

.orders-card .orders-table tbody tr:hover {
    background: #fafbfd;
}

.orders-card .orders-table td {
    
    padding: 10px;
    color: #475467;
    border-bottom: 1px solid #eef1f5;
    font-size: 12px;
    line-height: 1.55;
    vertical-align: middle;
}

.orders-card .orders-table tbody tr:last-child td {
    border-bottom: 0;
}

.orders-card .orders-table td:first-child {
    width: fit-content;
    padding-left: 20px;
    padding-right: 5px;
}



.orders-card .orders-table td strong {
    color: #273449;
    font-weight: 600;
}

.orders-card .orders-table td small {
    display: inline-block;
    margin-top: 2px;
    color: #7b8494 !important;
    font-size: 11px;
    line-height: 1.45;
}

.orders-card .orders-table td > div {
    margin: 2px 0;
}

.orders-card .orders-table .tracking-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0b61dd;
    text-decoration: none;
    font-size: 12px;
}

.orders-card .orders-table .tracking-link strong {
    color: #0b61dd;
}

.orders-card .orders-table .tracking-link:hover strong {
    text-decoration: underline;
}

.orders-card .orders-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #172033;
    cursor: pointer;
    vertical-align: middle;
}

.orders-card .orders-table .badge {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    margin-top: 5px;
    padding: 0 8px;
    background: #f1f4f7 !important;
    border: 1px solid #e3e8ee;
    border-radius: 5px;
    color: #475467 !important;
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0 !important;
}

.orders-card .orders-table td:nth-child(4) {
    color: #475467;
    font-weight: 500;
    text-align: center;
}

.orders-card .orders-table td:nth-child(5) strong {
    color: #344054;
}

.orders-card .orders-table td:nth-child(6) strong {
    display: inline-block;
    margin-bottom: 2px;
    color: #172033;
    font-size: 13px;
    font-weight: 700;
}

.orders-card .orders-table td:nth-child(6) small {
    color: #dc2626 !important;
    font-weight: 600;
}

.orders-card .orders-table td:nth-child(7) strong,
.orders-card .orders-table td:nth-child(8) strong {
    display: inline-block;
    max-width: 170px;
    color: #344054;
    font-weight: 600;
    white-space: normal;
}

.orders-card .orders-table td:nth-child(7) small,
.orders-card .orders-table td:nth-child(8) small {
    display: block;
    color: #7b8494 !important;
}

.orders-card .orders-table td:nth-child(9) span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid transparent;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.orders-card .orders-table td:nth-child(9) span[style*="fee2e2"] {
    background: #fff1f2 !important;
    border-color: #fecdd3;
    color: #dc2626 !important;
}

.orders-card .orders-table td:nth-child(9) span[style*="dbeafe"] {
    background: #eff6ff !important;
    border-color: #bfdbfe;
    color: #2563eb !important;
}

.orders-card .orders-table .action-col {
    width: 120px;
    min-width: 120px;
}

.orders-card .shipment-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-width: 110px;
}

.orders-card .shipment-actions .btn,
.orders-card .btn_reorder {
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all .18s ease;
}

.orders-card .shipment-actions .btn_print_slip {
    background: #172033;
    border: 1px solid #172033;
    color: #fff;
}

.orders-card .shipment-actions .btn_print_slip:hover {
    background: #273449;
    border-color: #273449;
}

.orders-card .shipment-actions .btn_request_pickup {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
}

.orders-card .shipment-actions .btn_request_pickup:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.orders-card .shipment-actions .btn_cancel_shipment {
    background: #fff;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.orders-card .shipment-actions .btn_cancel_shipment:hover {
    background: #fff1f2;
    border-color: #fca5a5;
}

.orders-card .btn_reorder {
    width: 100%;
    background: #172033;
    border: 1px solid #172033;
    color: #fff;
}

.orders-card .btn_reorder:hover {
    background: #273449;
    border-color: #273449;
}

.orders-card .empty-table {
    height: 180px;
    padding: 40px !important;
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
}

.orders-card .table-footer {
    min-height: 62px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #fff;
    border-top: 1px solid #eef1f5;
    box-sizing: border-box;
}

.orders-card .table-pagination {
    margin: 0;
}

.orders-card .table-pagination > span {
    color: #667085;
    font-size: 12px;
    font-weight: 500;
}

.orders-card .table-pagination .btn {
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #dce2e9;
    border-radius: 7px;
    color: #475467;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    transition: all .18s ease;
}

.orders-card .table-pagination .btn:hover {
    background: #f8fafc;
    border-color: #cbd3df;
    color: #172033;
}

.orders-card .table-pagination .btn i {
    font-size: 9px;
}

.range-input-group .divider{
    height: auto;
}

form.filter-form section.filter-card{
    margin-bottom: 20px;
}

/* Wallet  */

.hero.new_order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.wallet-balance-card {
    position: relative;
    padding: 10px !important;
    display: flex !important;
    align-items: center;
    gap: 13px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
    border: 1px solid rgba(11, 97, 221, 0.1);
    border-radius: 14px !important;
    box-shadow:
        0 6px 20px rgba(20, 40, 80, 0.07),
        0 1px 3px rgba(20, 40, 80, 0.04) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}



.wallet-balance-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 28px rgba(20, 40, 80, 0.1),
        0 2px 5px rgba(20, 40, 80, 0.04) !important;
}

.wallet-balance-card > i {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(
        145deg,
        rgba(11, 97, 221, 0.13),
        rgba(11, 97, 221, 0.06)
    );
    color: var(--primary-color) !important;
    font-size: 18px !important;
    box-shadow: inset 0 0 0 1px rgba(11, 97, 221, 0.05);
}

.wallet-balance-card > div {
    position: relative;
    z-index: 2;
    padding-right: 8px;
}

.wallet-balance-card span {
    display: block;
    margin-bottom: 2px;
    color: #9299a3 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.wallet-balance-card h2 {
    margin: 0 !important;
    color: #20242a !important;
    font-size: 20px !important;
    line-height: 1.25;
    font-weight: 750 !important;
    letter-spacing: -0.5px;
}

h1.wallet-head{
    font-size: 40px;
}

/* section 2 wallet  */

.wallet-tab-content .filter-card {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(25, 35, 50, 0.04);
}

.wallet-tab-content .filter-card .filter-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.35fr 0.95fr 1.15fr 1.2fr auto;
    gap: 10px;
    align-items: end;
}

.wallet-tab-content .filter-card .form-group {
    min-width: 0;
}

.wallet-tab-content .filter-card .form-group > label {
    display: block;
    margin: 0 0 5px;
    color: #4a5059;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.wallet-tab-content .filter-card .form-group > select,
.wallet-tab-content .filter-card .form-group > input {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid #e0e4e9;
    border-radius: 7px;
    outline: none;
    background: #fafbfc;
    color: #292e35;
    font-family: inherit;
    font-size: 11.5px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.wallet-tab-content .filter-card .form-group > select {
    cursor: pointer;
}

.wallet-tab-content .filter-card .form-group > select:hover,
.wallet-tab-content .filter-card .form-group > input:hover {
    border-color: #cbd2da;
    background: #fff;
}

.wallet-tab-content .filter-card .form-group > select:focus,
.wallet-tab-content .filter-card .form-group > input:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(11, 97, 221, 0.07);
}

.wallet-tab-content .filter-card .form-group > input::placeholder {
    color: #a4abb4;
}

.wallet-tab-content .filter-card .date-field {
    position: relative;
    width: 100%;
}

.wallet-tab-content .filter-card .date-field .flatpickr-wrapper {
    width: 100%;
}

.wallet-tab-content .filter-card .date-field .flatpickr-wrapper > input {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0 37px 0 10px;
    border: 1px solid #e0e4e9;
    border-radius: 7px;
    outline: none;
    background: #fafbfc;
    color: #292e35;
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.wallet-tab-content .filter-card .date-field .flatpickr-wrapper > input:hover {
    border-color: #cbd2da;
    background: #fff;
}

.wallet-tab-content .filter-card .date-field .flatpickr-wrapper > input:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(11, 97, 221, 0.07);
}

.wallet-tab-content .filter-card .date-field > button {
    position: absolute;
    right: 3px;
    top: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #7c848e;
    font-size: 12px;
    cursor: pointer;
}

.wallet-tab-content .filter-card .date-field > button:hover {
    background: rgba(11, 97, 221, 0.07);
    color: var(--primary-color);
}

.wallet-tab-content .filter-card .amount-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.wallet-tab-content .filter-card .amount-group input {
    width: 100%;
    min-width: 0;
    height: 38px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid #e0e4e9;
    border-radius: 7px;
    outline: none;
    background: #fafbfc;
    color: #292e35;
    font-family: inherit;
    font-size: 11.5px;
}

.wallet-tab-content .filter-card .amount-group input:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(11, 97, 221, 0.07);
}

.wallet-tab-content .filter-card .amount-group input::placeholder {
    color: #a4abb4;
}

.wallet-tab-content .filter-card .action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.wallet-tab-content .filter-card .action-btn .btn {
    height: 38px;
    padding: 0 11px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.18s ease;
}

.wallet-tab-content .filter-card .action-btn .primary_btn {
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 6px rgba(11, 97, 221, 0.14);
}

.wallet-tab-content .filter-card .action-btn .primary_btn:hover {
    background: #3d3f45;
    border-color: #0957c7;
    transform: translateY(-1px);
}

.wallet-tab-content .filter-card .action-btn .outline {
    border: 1px solid #e0e4e9;
    background: #fff;
    color: #626a74;
    text-decoration: none;
}

.wallet-tab-content .filter-card .action-btn .outline:hover {
    border-color: #cbd2da;
    background: #f7f8fa;
    color: #343a42;
}

.wallet-tab-content .filter-card .action-btn .btn i {
    margin-right: 0 !important;
    font-size: 10px;
}

.wallet-tab-content .filter-card .flatpickr-calendar {
    border: 1px solid #e7ebef !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 25px rgba(20, 30, 50, 0.12) !important;
    overflow: hidden;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-current-month {
    font-size: 12px;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-weekday {
    font-size: 9px;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day {
    border-radius: 5px !important;
    font-size: 11px;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.selected,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.startRange,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.endRange {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Wallet Calender  */

.wallet-tab-content .filter-card .flatpickr-calendar {
    width: 285px !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid #e8ecf1 !important;
    border-radius: 13px !important;
    box-shadow: 0 14px 35px rgba(20, 30, 50, 0.14) !important;
    overflow: hidden;
    font-family: inherit;
}

.wallet-tab-content .filter-card .flatpickr-calendar.arrowBottom::before,
.wallet-tab-content .filter-card .flatpickr-calendar.arrowBottom::after {
    display: none;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-months {
    height: 38px;
    display: flex;
    align-items: center;
    padding: 0 2px;
    margin-bottom: 3px;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-month {
    height: 38px;
    display: flex;
    align-items: center;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-current-month {
    position: relative;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #20252c;
    font-size: 13px;
    font-weight: 700;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-monthDropdown-months {
    height: 30px;
    padding: 0 3px;
    border: 0;
    outline: none;
    background: transparent;
    color: #20252c;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.wallet-tab-content .filter-card .flatpickr-calendar .numInputWrapper {
    width: 84px;
}

.wallet-tab-content .filter-card .flatpickr-calendar .numInput.cur-year {
    height: 30px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #747c87;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-prev-month,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-next-month {
    position: relative;
    top: auto;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    transition: background 0.18s ease;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-prev-month:hover,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-next-month:hover {
    background: #f2f6fc;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-prev-month svg,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-next-month svg {
    width: 12px;
    height: 12px;
    fill: #6d7681;
    transition: fill 0.18s ease;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-prev-month:hover svg,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: var(--primary-color);
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-weekdays {
    height: 27px;
    margin: 2px 0;
    background: #f8f9fb;
    border-radius: 7px;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-weekdaycontainer {
    width: 100%;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-weekday {
    color: #9aa1ab;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-innerContainer {
    width: 100%;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-rContainer {
    width: 100%;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-days {
    width: 100% !important;
}

.wallet-tab-content .filter-card .flatpickr-calendar .dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 4px 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day {
    width: 32px;
    max-width: 32px;
    height: 32px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 8px !important;
    color: #3d444d;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day:hover {
    background: #f0f5fc !important;
    color: var(--primary-color) !important;
    border: 0 !important;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.prevMonthDay,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: #c4c9d0;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.today {
    position: relative;
    background: rgba(11, 97, 221, 0.08) !important;
    color: var(--primary-color) !important;
    font-weight: 700;
    border: 0 !important;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.today::after {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--primary-color);
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.selected,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.startRange,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.endRange {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 3px 7px rgba(11, 97, 221, 0.22);
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.selected::after,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.startRange::after,
.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.endRange::after {
    display: none;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.inRange {
    background: rgba(11, 97, 221, 0.07) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #245da7;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.startRange {
    border-radius: 8px 0 0 8px !important;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.endRange {
    border-radius: 0 8px 8px 0 !important;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.startRange.endRange {
    border-radius: 8px !important;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.disabled {
    color: #d5d9de;
    cursor: not-allowed;
}

.wallet-tab-content .filter-card .flatpickr-calendar .flatpickr-day.disabled:hover {
    background: transparent !important;
    color: #d5d9de !important;
}


.wallet-tab-content .orders-card {
    width: 100%;
    height: calc(100vh - 165px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.wallet-tab-content .orders-card .orders-top {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    gap: 15px;
    box-sizing: border-box;
    margin-left: 5px;
    width: 99%;
    margin-bottom: 10px;
}

.wallet-tab-content .orders-card .orders-info {
    min-width: 0;
}

.wallet-tab-content .orders-card .orders-info h2 {
    margin: 0;
    font-size: 17px;
    line-height: 21px;
    font-weight: 700;
    color: #20252b;
}

.wallet-tab-content .orders-card .orders-info p {
    margin: 3px 0 0;
    font-size: 11px;
    line-height: 15px;
    color: #7b838c;
}

.wallet-tab-content .orders-card .orders-info strong {
    color: #30363d;
    font-weight: 700;
}

.wallet-tab-content .orders-card .orders-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.wallet-tab-content .orders-card .orders-actions .btn {
    height: 32px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 5px;
    font-size: 11px;
    white-space: nowrap;
}

.wallet-tab-content .orders-card .orders-actions .btn i {
    font-size: 10px;
}

.wallet-tab-content .orders-card .table-toolbar {
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 18px;
    background: #fafbfc;
    border-top: 1px solid #edf0f2;
    border-bottom: 1px solid #e1e5e9;
    box-sizing: border-box;
    margin-left: 5px;
    width: 99%;
    margin-bottom: 10px;
    transition: all 0.4s ease-in-out;
}

.wallet-tab-content .orders-card .orders-actions .btn:hover{
    transform: translateY(-2px);
    background: black;
    color: #fff;
}

.wallet-tab-content .orders-card .orders-actions .btn:hover i{
    color: #fff;
}

.wallet-tab-content .orders-card .page-size {
    display: flex;
    align-items: center;
}

.wallet-tab-content .orders-card .page-size select {
    width: 55px;
    height: 29px;
    padding: 0 6px;
    border: 1px solid #d8dde2;
    border-radius: 5px;
    background: #fff;
    color: #343a40;
    font-size: 11px;
    outline: none;
}

.wallet-tab-content .orders-card .table-pagination {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wallet-tab-content .orders-card .table-pagination span {
    min-width: 25px;
    margin: 0 !important;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #444b53;
}

.wallet-tab-content .orders-card .table-pagination a,
.wallet-tab-content .orders-card .table-pagination button,
.wallet-tab-content .orders-card .table-footer a,
.wallet-tab-content .orders-card .table-footer button {
    width: 29px;
    height: 29px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7dce1;
    border-radius: 5px;
    background: #fff;
    color: #555d66;
    text-decoration: none;
    font-size: 10px;
    box-sizing: border-box;
    margin: 0;
}

.wallet-tab-content .orders-card .table-pagination button:disabled,
.wallet-tab-content .orders-card .table-footer button:disabled {
    cursor: pointer;
    background: #f5f6f7;
}

.wallet-tab-content .orders-card .table-responsive {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
}

.wallet-tab-content .orders-card .wallet-table {
    width: max-content !important;
    min-width: 1320px !important;
    margin: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.wallet-tab-content .orders-card .wallet-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 46px;
    padding: 6px 10px;
    background: #f6f8fa;
    border-bottom: 1px solid #dce1e5;
    color: #4b535c;
    font-size: 10px;
    line-height: 13px;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table td {
    height: 44px;
    padding: 6px 10px;
    border-bottom: 1px solid #edf0f2;
    background: #fff;
    color: #454c54;
    font-size: 11px;
    line-height: 15px;
    white-space: nowrap;
    vertical-align: middle;
}

.wallet-tab-content .orders-card .wallet-table tbody tr:hover td {
    background: #fafcff;
}

.wallet-tab-content .orders-card .wallet-table th:first-child,
.wallet-tab-content .orders-card .wallet-table td:first-child {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(2),
.wallet-tab-content .orders-card .wallet-table td:nth-child(2) {
    width: 145px;
    min-width: 145px;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(3),
.wallet-tab-content .orders-card .wallet-table td:nth-child(3) {
    width: 145px;
    min-width: 145px;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(4),
.wallet-tab-content .orders-card .wallet-table td:nth-child(4) {
    width: 155px;
    min-width: 155px;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(5),
.wallet-tab-content .orders-card .wallet-table td:nth-child(5) {
    width: 205px;
    min-width: 205px;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(6),
.wallet-tab-content .orders-card .wallet-table td:nth-child(6) {
    width: 210px;
    min-width: 210px;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(7),
.wallet-tab-content .orders-card .wallet-table td:nth-child(7) {
    width: 110px;
    min-width: 110px;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(8),
.wallet-tab-content .orders-card .wallet-table td:nth-child(8) {
    width: 75px;
    min-width: 75px;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(9),
.wallet-tab-content .orders-card .wallet-table td:nth-child(9) {
    width: 220px;
    min-width: 220px;
    text-align: center;
}

.wallet-tab-content .orders-card .wallet-table th i {
    margin-left: 4px;
    font-size: 8px;
    color: #8b939c;
}

.wallet-tab-content .orders-card .wallet-table .sub-head {
    display: grid;
    align-items: center;
    width: 100%;
    margin-top: 4px;
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(5) .sub-head,
.wallet-tab-content .orders-card .wallet-table td:nth-child(5) .sub-head {
    grid-template-columns: repeat(3, 1fr);
}

.wallet-tab-content .orders-card .wallet-table th:nth-child(9) .sub-head,
.wallet-tab-content .orders-card .wallet-table td:nth-child(9) .sub-head {
    grid-template-columns: repeat(4, 1fr);
}

.wallet-tab-content .orders-card .wallet-table th .sub-head {
    color: #8a929b;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .25px;
}

.wallet-tab-content .orders-card .wallet-table td .sub-head {
    font-size: 10px;
}

.wallet-tab-content .orders-card .wallet-table .sub-head span {
    text-align: center;
    white-space: nowrap;
}

.wallet-tab-content .orders-card .wallet-table td:nth-child(5) .sub-head span:nth-child(3) {
    color: #d32f2f !important;
    font-weight: 700;
}

.wallet-tab-content .orders-card .wallet-table td:nth-child(2) strong {
    color: #30363d;
    font-weight: 700;
}

.wallet-tab-content .orders-card .wallet-table td:nth-child(6) {
    color: #555d66;
    text-align: left;
}

.wallet-tab-content .orders-card .wallet-table input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--primary-color);
}

.wallet-tab-content .orders-card .table-responsive::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.wallet-tab-content .orders-card .table-responsive::-webkit-scrollbar-track {
    background: #f1f3f5;
}

.wallet-tab-content .orders-card .table-responsive::-webkit-scrollbar-thumb {
    background: #b9c0c7;
    border: 2px solid #f1f3f5;
    border-radius: 10px;
}

.wallet-tab-content .orders-card .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #969fa8;
}

.wallet-tab-content .orders-card .table-footer {
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding: 5px 18px;
    background: #fff;
    border-top: 1px solid #edf0f2;
    box-sizing: border-box;
}

.wallet-tab-content .orders-card .table-footer span {
    min-width: 25px;
    margin: 0 !important;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
}

.wallet-tab-content .orders-card .empty-table {
    height: 130px;
    text-align: center;
    vertical-align: middle;
    color: #89919a;
    font-size: 12px;
}


/* Wallet Tab  */
.wallet-tab-content .orders-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 76px;
    box-sizing: border-box;
    gap: 20px;
    padding: 16px 20px;
    margin: 0 0 12px;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    background: #ffffff;
}

.wallet-tab-content .orders-info {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.wallet-tab-content .orders-info h2 {
    position: relative;
    margin: 0;
    padding-left: 12px;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.wallet-tab-content .orders-info h2::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 3px;
    height: calc(100% - 4px);
    border-radius: 3px;
    background: #2563eb;
}

.wallet-tab-content .orders-info p {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding-left: 16px;
    border-left: 1px solid #e5e7eb;
    color: #7a8494;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.wallet-tab-content .orders-info p strong {
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

.wallet-tab-content .orders-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wallet-tab-content .orders-actions .wallet-bulk-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 13px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wallet-tab-content .orders-actions .wallet-bulk-action i {
    color: #64748b;
    font-size: 11px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.wallet-tab-content .orders-actions .wallet-bulk-action:not(:disabled) {
    cursor: pointer;
}

.wallet-tab-content .orders-actions .wallet-bulk-action:not(:disabled):hover {
    border-color: #2563eb;
    background: #f8fbff;
    color: #1d4ed8;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}

.wallet-tab-content .orders-actions .wallet-bulk-action:not(:disabled):hover i {
    color: #2563eb;
    transform: translateY(-1px);
}

.wallet-tab-content .orders-actions .wallet-bulk-action:not(:disabled):active {
    transform: translateY(0);
    box-shadow: none;
}

.wallet-tab-content .table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    box-sizing: border-box;
    gap: 16px;
    padding: 10px 16px;
    margin: 0;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    background: #ffffff;
}

.wallet-tab-content .page-size {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wallet-tab-content .page-size::before {
    content: "Rows per page";
    color: #7a8494;
    font-size: 12px;
    font-weight: 500;
}

.wallet-tab-content .page-size select {
    width: 62px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wallet-tab-content .page-size select:hover {
    border-color: #b9c7db;
    background: #f8fafc;
}

.wallet-tab-content .page-size select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.wallet-tab-content .table-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wallet-tab-content .table-pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-size: 11px;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wallet-tab-content .table-pagination button:not(:disabled) {
    cursor: pointer;
}

.wallet-tab-content .table-pagination button:not(:disabled):hover {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.15);
}

.wallet-tab-content .table-pagination button:disabled {
    border-color: #e5e7eb;
    background: #f8fafc;
    color: #aeb6c2;
    cursor: not-allowed;
}

.wallet-tab-content .table-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

/* Recharge Wallet  */

.wallet-tab-content .recharge-wallet-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #e2e7ef;
    border-radius: 10px;
    background: #ffffff;
}

.wallet-tab-content .recharge-wallet-card .form_left {
    display: flex;
    flex-direction: column;
    width: 60%;
    min-width: 0;
    padding: 24px 28px;
    box-sizing: border-box;
}

.wallet-tab-content .recharge-wallet-card .orders-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: auto;
    margin: 0 0 22px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}

.wallet-tab-content .recharge-wallet-card .orders-info {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.wallet-tab-content .recharge-wallet-card .orders-info h2 {
    position: relative;
    margin: 0;
    padding-left: 12px;
    color: #172033;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.wallet-tab-content .recharge-wallet-card .orders-info h2::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 3px;
    height: calc(100% - 4px);
    border-radius: 3px;
    background: #2563eb;
}

.wallet-tab-content .recharge-wallet-card .wallet-form {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wallet-tab-content .recharge-wallet-card .form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.wallet-tab-content .recharge-wallet-card .form-group label {
    display: flex;
    align-items: center;
    height: 17px;
    margin: 0 0 7px;
    color: #344054;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.wallet-tab-content .recharge-wallet-card .form-group:first-child label::after {
    content: "Required";
    margin-left: 6px;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 500;
}

.wallet-tab-content .recharge-wallet-card .form-group input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    color: #172033;
    font-size: 12px;
    font-weight: 500;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wallet-tab-content .recharge-wallet-card .form-group input::placeholder {
    color: #a0a9b6;
}

.wallet-tab-content .recharge-wallet-card .form-group input:hover {
    border-color: #b8c4d4;
}

.wallet-tab-content .recharge-wallet-card .form-group input:focus {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
}

.wallet-tab-content .recharge-wallet-card .form-group:first-child input {
    font-size: 14px;
    font-weight: 600;
}

.wallet-tab-content .recharge-wallet-card .promo-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wallet-tab-content .recharge-wallet-card .promo-box:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
}

.wallet-tab-content .recharge-wallet-card .promo-box input {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
}

.wallet-tab-content .recharge-wallet-card .promo-box input:focus {
    border: 0;
    box-shadow: none;
}

.wallet-tab-content .recharge-wallet-card .promo-box button {
    flex: 0 0 auto;
    width: 64px;
    height: 30px;
    margin: 0 5px 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #eff6ff;
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.wallet-tab-content .recharge-wallet-card .promo-box button:hover {
    background: #2563eb;
    color: #ffffff;
}

.wallet-tab-content .recharge-wallet-card .quick-amount {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    gap: 7px;
    margin: 18px 0 0;
    padding: 0;
    box-sizing: border-box;
}

.wallet-tab-content .recharge-wallet-card .quick-amount::before {
    content: "Quick amount";
    grid-column: 1 / -1;
    display: block;
    margin: 0 0 1px;
    color: #667085;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
}

.wallet-tab-content .recharge-wallet-card .quick-amount button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 34px;
    min-width: 0;
    padding: 0 5px;
    box-sizing: border-box;
    border: 1px solid #d8dee8;
    border-radius: 7px;
    background: #ffffff;
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.wallet-tab-content .recharge-wallet-card .quick-amount button:hover {
    border-color: #2563eb;
    background: #f5f9ff;
    color: #2563eb;
    transform: translateY(-1px);
}

.wallet-tab-content .recharge-wallet-card .quick-amount button:active {
    transform: translateY(0);
}

.wallet-tab-content .recharge-wallet-card .wallet-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 72px;
    margin: 20px 0 0;
    padding: 13px 0;
    box-sizing: border-box;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
    background: #ffffff;
}

.wallet-tab-content .recharge-wallet-card .wallet-summary > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 0 16px;
    box-sizing: border-box;
}

.wallet-tab-content .recharge-wallet-card .wallet-summary > div + div {
    border-left: 1px solid #e5e9ef;
}

.wallet-tab-content .recharge-wallet-card .wallet-summary span {
    color: #7a8494;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

.wallet-tab-content .recharge-wallet-card .wallet-summary strong {
    color: #172033;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.wallet-tab-content .recharge-wallet-card .wallet-summary > div:last-child strong {
    color: var(--primary-color);
}

.wallet-tab-content .recharge-wallet-card .payment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    min-height: 42px;
    margin: 16px 0 0;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid #2563eb;
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.13);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wallet-tab-content .recharge-wallet-card .payment-btn:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

.wallet-tab-content .recharge-wallet-card .payment-btn:active {
    transform: translateY(0);
}

.wallet-tab-content .recharge-wallet-card .wallet-banner {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 40%;
    min-width: 0;
    min-height: 300px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    border-left: 1px solid #e6ebf2;
    border-radius: 0;
    background: #f7f9fc;
    overflow: hidden;
}


.wallet-tab-content .recharge-wallet-card .wallet-banner::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: #eaf2ff;
}

.wallet-tab-content .recharge-wallet-card .wallet-banner::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -80px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: #eef4ff;
}

.wallet-tab-content .recharge-wallet-card .wallet-banner img {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
}

/* Tracking Page  */

.tracking_dashboard_wrap .tracking-hero {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 68px;
    margin: 0;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    background: #ffffff;
    margin-bottom: 10px;
}

.tracking_dashboard_wrap .tracking-hero .hero_content {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.tracking_dashboard_wrap .tracking-hero h1 {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    margin: 0;
    color: #172033;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.2px;
}

.tracking_dashboard_wrap .tracking-hero h1 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
}

.tracking_dashboard_wrap .tracking-hero p {
    margin: 0 0 0 14px;
    padding-left: 14px;
    border-left: 1px solid #e5e7eb;
    color: #7a8494;
    font-size: 11px;
    font-weight: 500;
    line-height: 30px;
    white-space: nowrap;
}

.tracking_dashboard_wrap .tracking-hero .tracking-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    height: 32px;
    margin-left: auto;
    padding: 0 11px;
    border: 1px solid #d8dee8;
    border-radius: 7px;
    background: #ffffff;
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.tracking_dashboard_wrap .tracking-hero .tracking-back-btn i {
    color: #64748b;
    font-size: 10px;
    transition: color 0.18s ease, transform 0.18s ease;
}

.tracking_dashboard_wrap .tracking-hero .tracking-back-btn:hover {
    border-color: #2563eb;
    background: var(--primary-color);
    color: #ffffff;
    transform: translateY(-1px);
}

.tracking_dashboard_wrap .tracking-hero .tracking-back-btn:hover i {
    color: #ffffff;
    transform: translateX(-2px);
}

.tracking_dashboard_wrap .tracking-search-card {
    width: 100%;
    margin: 10px 0 10px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    background: #ffffff;
}

.tracking_dashboard_wrap .tracking-search-form {
    width: 100%;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
}

.tracking_dashboard_wrap .search-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid #d8dee8;
    border-radius: 10px;
    background: #f9fafb;
    overflow: hidden;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.tracking_dashboard_wrap .search-input-wrapper:focus-within {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
}

.tracking_dashboard_wrap .search-input-wrapper .search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    color: #7a8494;
    font-size: 12px;
    transition: color 0.18s ease;
}

.tracking_dashboard_wrap .search-input-wrapper:focus-within .search-icon {
    color: #2563eb;
}

.tracking_dashboard_wrap .search-input-wrapper input {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 10px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-size: 11px;
    font-weight: 500;
    box-shadow: none;
}

.tracking_dashboard_wrap .search-input-wrapper input::placeholder {
    color: #98a2b3;
    font-weight: 400;
}

.tracking_dashboard_wrap .search-input-wrapper .track-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    width: 108px;
    height: 38px;
    margin-right: 5px;
    padding: 0 10px !important;
    border: 1px solid #2563eb;
    border-radius: 6px;
    background: #2563eb;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tracking_dashboard_wrap .search-input-wrapper .track-submit-btn i {
    color: #ffffff;
    font-size: 9px;
    transition: transform 0.18s ease;
}

.tracking_dashboard_wrap .search-input-wrapper .track-submit-btn:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: 0 4px 9px rgba(37, 99, 235, 0.16);
    transform: translateY(-1px);
}

.tracking_dashboard_wrap .search-input-wrapper .track-submit-btn:hover i {
    transform: translateX(2px);
}

.tracking_dashboard_wrap .search-input-wrapper .track-submit-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.tracking_dashboard_wrap .tracking-welcome-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    margin: 10px 0 0;
    padding: 24px 30px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
}

.tracking_dashboard_wrap .tracking-welcome-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 140px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: #2563eb;
    transform: translateX(-50%);
}

.tracking_dashboard_wrap .tracking-welcome-card::after {
    content: "";
    position: absolute;
    top: -110px;
    left: 50%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: #f5f8ff;
    transform: translateX(-50%);
    pointer-events: none;
}

.tracking_dashboard_wrap .tracking-welcome-card .welcome-image {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin: 0 0 12px;
    border-radius: 50%;
    background: #eff6ff;
    box-shadow: 0 0 0 7px #f7faff;
}

.tracking_dashboard_wrap .tracking-welcome-card .welcome-image i {
    color: #2563eb;
    font-size: 30px;
}

.tracking_dashboard_wrap .tracking-welcome-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 5px;
    color: #172033;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.15px;
}

.tracking_dashboard_wrap .tracking-welcome-card p {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    margin: 0;
    color: #7a8494;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

.tracking-card .card-header .badge{
    margin: 0;
}

.scan-history-card .scan-details{
    gap: 10px;
}

/* Calculate Price  */

.courier-rates-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    max-height: 472px;
    padding-right: 5px;
    padding-top: 10px;
}

.courier-rate-card{
    padding: 15px;
}

.calculator_wrap .calc-hero {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    /* border: 1px solid #e1e6ee;
    border-radius: 10px;
    background: #ffffff; */
    margin-bottom: 0;
}

.calculator_wrap .calc-hero::after {
    content: "";
    position: absolute;
    top: -55px;
    right: 35px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #f4f7ff;
    pointer-events: none;
}

.calculator_wrap .calc-hero .hero_content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.calculator_wrap .calc-hero h1 {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    margin: 0;
    color: #172033;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.2px;
}

.calculator_wrap .calc-hero h1 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #dbe7ff;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 20px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.calculator_wrap .calc-hero:hover h1 i {
    background: #2563eb;
    color: #ffffff;
    transform: translateY(-1px);
}

.calculator_wrap .calc-hero p {
    margin: 0 0 0 14px;
    padding-left: 14px;
    border-left: 1px solid #e5e7eb;
    color: #7a8494;
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    white-space: nowrap;
}

.calculator_wrap .calc-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    background: transparent;
}

.calculator_wrap .calc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

/* Support Page  */

.content_wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

.support-main,
.support-sidebar {
    width: 100%;
    min-width: 0;

}

.faq-card {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.faq-card h2 {
    position: relative;
    margin: 0;
    padding: 0 0 0 13px;
    color: #172033;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.3px;
}

.faq-card h2::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 4px;
    height: 55px;
    border-radius: 4px;
    background: #2563eb;
}

.faq-card .section-desc {
    margin: 5px 0 22px 13px;
    color: #8a94a6;
    font-size: 11px;
    line-height: 1.5;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.faq-item {
    width: 100%;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease;
}

.faq-item:hover {
    border-color: #cbd8ed;
    background: #fbfdff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.05);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    box-sizing: border-box;
    color: #263348;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.2s ease,
                background 0.2s ease;
}

.faq-question span {
    flex: 1;
    min-width: 0;
}

.faq-question i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid #e1e6ee;
    border-radius: 7px;
    background: #f8fafc;
    color: #667085;
    font-size: 9px;
    transition: transform 0.25s ease,
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease;
}

.faq-item:hover .faq-question {
    color: #2563eb;
}

.faq-item:hover .faq-question i {
    border-color: #d4e1fb;
    background: #eff6ff;
    color: #2563eb;
}

.faq-answer {
    display: none;
    padding: 0 16px 16px;
    border-top: 1px solid #edf0f4;
    background: #fcfdff;
}

.faq-answer p {
    max-width: 900px;
    margin: 13px 0 0;
    color: #697586;
    font-size: 11px;
    line-height: 1.75;
}

.faq-item.active {
    border-color: #cbdcff;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(37, 99, 235, 0.07);
}

.faq-item.active .faq-question {
    color: #2563eb;
    background: #fbfdff;
}

.faq-item.active .faq-question i {
    border-color: #d5e2fb;
    background: #eff6ff;
    color: #2563eb;
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    display: block;
}

.support-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.contact-card {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.info-card {
    position: relative;
    padding: 18px;
    overflow: hidden;
    background: #f8fbff;
    border-color: #dbe7fa;
}

.info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #2563eb;
}

.info-card::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -55px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #eef5ff;
}

.info-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 7px;
    color: #172033;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.info-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #6b778c;
    font-size: 11px;
    line-height: 1.65;
}

.detail-card {
    padding: 4px 18px;
}

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 15px 0;
    box-sizing: border-box;
}

.contact-row + .contact-row {
    border-top: 1px solid #edf0f4;
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.contact-row:hover .contact-icon {
    transform: translateY(-1px);
}

.contact-icon.bg-blue {
    background: #eff6ff;
    color: #2563eb;
}

.contact-icon.bg-green {
    background: #ecfdf3;
    color: #16a34a;
}

.contact-icon.bg-orange {
    background: #fff7ed;
    color: #ea580c;
}

.contact-text {
    flex: 1;
    min-width: 0;
}

.contact-text h4 {
    margin: 0 0 3px;
    color: #263348;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.contact-text p {
    margin: 0;
    color: #667085;
    font-size: 10px;
    line-height: 1.5;
}

.contact-text a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-text a:hover {
    color: #1d4ed8;
}

.contact-text .card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: #98a2b3;
    font-size: 9px;
}

.contact-text .card-meta i {
    color: #98a2b3;
    font-size: 9px;
}

.address-text {
    max-width: 190px;
    line-height: 1.6 !important;
}

.content_wrap .faq-card{
    text-align: left;
    align-items: start;
}

.contact-card.info-card p{
    font-size: 13px;
}

.contact-card.detail-card{
    gap: 0;
}

  /* .orders-header{
    margin: 0 !important;
} */

/* Raise Ticket */

.tickets-nav-container {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 14px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #f5f7fa;
}

.tickets-nav-container .order-tabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    min-height: 42px;
    padding: 4px;
    border-radius: 8px;
    background: #eef1f5;
}

.tickets-nav-container .tab-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 7px;
    outline: none;
    background: transparent;
    color: #7a8494;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.2s ease;
}

.tickets-nav-container .tab-btn.active {
    color: #2563eb;
}

.tickets-nav-container .tab-btn:hover {
    color: #2563eb;
}

.tickets-nav-container .tab-btn:active {
    transform: scale(0.98);
}

.tickets-nav-container .tab-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.tickets-nav-container .tab-btn.active::before {

    transform: scale(1);
}

.tickets-nav-container .tab-btn:hover::before {
    transform: scale(1);
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.06);
}

.tickets-nav-container .tab-btn.active:hover::after {
    transform: scaleX(0.7);
}

.tickets-nav-container .tab-btn:not(.active):hover {
    color: #475569;
}

.tickets-nav-container .tab-btn:not(.active):hover::before {
    background: rgba(255, 255, 255, 0.7);
}

.tickets-nav-container .tab-btn:focus-visible::before {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Second Section  */

form.filter-form .filter-card {
    width: 100%;
    margin: 0 0 14px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}

form.filter-form .filter-card .filter-grid {
    display: grid;
    grid-template-columns:
        150px
        minmax(240px, 1.4fr)
        150px
        150px
        minmax(180px, 1fr)
        auto;
    align-items: end;
    gap: 12px;
    width: 100%;
}

form.filter-form .filter-card .form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
}

form.filter-form .filter-card .form-group.large {
    min-width: 0;
}

form.filter-form .filter-card .form-group label {
    display: block;
    height: 16px;
    margin: 0 0 6px;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.1px;
}

form.filter-form .filter-card .form-group select,
form.filter-form .filter-card .form-group > input,
form.filter-form .filter-card .date-field {
    width: 100%;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
    border: 1px solid #dce2ea;
    border-radius: 7px;
    outline: none;
    background: #ffffff;
    color: #344054;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

form.filter-form .filter-card .form-group select {
    padding: 0 30px 0 11px;
    cursor: pointer;
}

form.filter-form .filter-card .form-group > input {
    padding: 0 11px;
}

form.filter-form .filter-card .form-group select:hover,
form.filter-form .filter-card .form-group > input:hover,
form.filter-form .filter-card .date-field:hover {
    border-color: #b9c7db;
}

form.filter-form .filter-card .form-group select:focus,
form.filter-form .filter-card .form-group > input:focus,
form.filter-form .filter-card .date-field:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
}

form.filter-form .filter-card .date-field {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: visible;
}

form.filter-form .filter-card .date-field .flatpickr-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

form.filter-form .filter-card .date-field input.flatpickr-input {
    width: 100%;
    height: 36px;
    min-width: 0;
    padding: 0 40px 0 11px;
    border: 0;
    outline: none;
    background: transparent;
    color: #344054;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

form.filter-form .filter-card .date-field input::placeholder {
    color: #98a2b3;
}

form.filter-form .filter-card .date-field > button {
    position: absolute;
    top: 50%;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #f1f5f9;
    color: #667085;
    transform: translateY(-50%);
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

form.filter-form .filter-card .date-field > button:hover {
    background: #eff6ff;
    color: #2563eb;
}

form.filter-form .filter-card .date-field > button i {
    font-size: 11px;
}

form.filter-form .filter-card .search-box input {
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
}

form.filter-form .filter-card .action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    white-space: nowrap;
}

form.filter-form .filter-card .action-btn .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 13px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

form.filter-form .filter-card .action-btn .primary_btn {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12);
    font-size: 12px;
}

form.filter-form .filter-card .action-btn .primary_btn:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.17);
    transform: translateY(-1px);
}

form.filter-form .filter-card .action-btn .primary_btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.1);
}

form.filter-form .filter-card .action-btn .outline {
    border: 1px solid #dce2ea;
    background: #ffffff;
    color: #667085;
    font-size: 12px;
}

form.filter-form .filter-card .action-btn .outline:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #344054;
}


/* Calender  */

form.filter-form .filter-card .flatpickr-calendar {
    width: 310px;
    margin-top: 6px;
    padding: 0;
    border: 1px solid #e1e5eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    overflow: hidden;
    box-sizing: border-box;
    font-family: inherit;
}

form.filter-form .filter-card .flatpickr-calendar.static {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
}

form.filter-form .filter-card .date-picker-group .flatpickr-calendar {
    width: 310px;
}

form.filter-form .filter-card .flatpickr-months {
    height: 48px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    background: #fff;
}

form.filter-form .filter-card .flatpickr-month {
    height: 48px;
    display: flex;
    align-items: center;
}

form.filter-form .filter-card .flatpickr-current-month {
    position: static;
    width: auto;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #172033;
    font-size: 14px;
    font-weight: 600;
}

form.filter-form .filter-card .flatpickr-monthDropdown-months {
    width: auto;
    height: 32px;
    margin: 0;
    padding: 0 20px 0 5px;
    border: 0;
    border-radius: 6px;
    outline: 0;
    background: transparent;
    color: #172033;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

form.filter-form .filter-card .flatpickr-monthDropdown-months:hover {
    background: #f5f7fa;
}

form.filter-form .filter-card .flatpickr-monthDropdown-months:focus {
    border: 0;
    box-shadow: none;
}

form.filter-form .filter-card .numInputWrapper {
    width: 78px;
    height: 32px;
}

form.filter-form .filter-card .numInput.cur-year {
    width: 85px;
    height: 32px;
    margin: 0;
    padding: 0 !important;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
}

form.filter-form .filter-card .numInput.cur-year:focus {
    border: 0;
    box-shadow: none;
}

form.filter-form .filter-card .flatpickr-prev-month,
form.filter-form .filter-card .flatpickr-next-month {
    position: static;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #596474;
    fill: #596474;
    transition:
        background .2s ease,
        color .2s ease;
}

form.filter-form .filter-card .flatpickr-prev-month:hover,
form.filter-form .filter-card .flatpickr-next-month:hover {
    background: #f3f5f8;
    color: #172033;
    fill: #172033;
}

form.filter-form .filter-card .flatpickr-prev-month svg,
form.filter-form .filter-card .flatpickr-next-month svg {
    width: 13px;
    height: 13px;
}

form.filter-form .filter-card .flatpickr-weekdays {
    height: 32px;
    padding: 0 10px;
    background: #fafbfc;
    border-top: 1px solid #f0f2f5;
    border-bottom: 1px solid #f0f2f5;
}

form.filter-form .filter-card .flatpickr-weekdaycontainer {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

form.filter-form .filter-card span.flatpickr-weekday {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a8492;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

form.filter-form .filter-card .flatpickr-innerContainer,
form.filter-form .filter-card .flatpickr-rContainer,
form.filter-form .filter-card .flatpickr-days {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

form.filter-form .filter-card .dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 8px 10px 10px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
    box-sizing: border-box;
}

form.filter-form .filter-card .flatpickr-day {
    width: 34px;
    max-width: 34px;
    height: 34px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    line-height: 34px;
    transition:
        background .15s ease,
        color .15s ease,
        border .15s ease;
}

form.filter-form .filter-card .flatpickr-day:hover {
    border-color: transparent;
    background: #f1f4f8;
    color: #172033;
}

form.filter-form .filter-card .flatpickr-day.today {
    border-color: #b8c2cf;
    background: #fff;
    color: #172033;
    font-weight: 600;
}

form.filter-form .filter-card .flatpickr-day.today:hover {
    border-color: #0b61dd;
    background: #f1f6ff;
}

form.filter-form .filter-card .flatpickr-day.selected,
form.filter-form .filter-card .flatpickr-day.startRange,
form.filter-form .filter-card .flatpickr-day.endRange {
    border-color: #172033;
    background: #172033;
    color: #fff;
    font-weight: 600;
}

form.filter-form .filter-card .flatpickr-day.inRange {
    border-color: transparent;
    border-radius: 0;
    background: #edf3ff;
    box-shadow: none;
    color: #172033;
}

form.filter-form .filter-card .flatpickr-day.startRange {
    border-radius: 50% 0 0 50%;
}

form.filter-form .filter-card .flatpickr-day.endRange {
    border-radius: 0 50% 50% 0;
}

form.filter-form .filter-card .flatpickr-day.startRange.endRange {
    border-radius: 50%;
}

form.filter-form .filter-card .flatpickr-day.prevMonthDay,
form.filter-form .filter-card .flatpickr-day.nextMonthDay {
    color: #c4c9d0;
}

form.filter-form .filter-card .flatpickr-day.disabled {
    color: #d5d9df;
}

form.filter-form .filter-card .flatpickr-calendar:before,
form.filter-form .filter-card .flatpickr-calendar:after {
    display: none;
}

form.filter-form .filter-card .form-group select, form.filter-form .filter-card .form-group > input, form.filter-form .filter-card .date-field{
    font-size: 12px;
}

/* Ticket Search Form */
form.filter-form.ticket-search-form {
    width: 100%;
    margin: 0 0 14px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}

form.filter-form.ticket-search-form .filter-main-row {
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 12px;
    width: 100%;
    margin: 0;
}

form.filter-form.ticket-search-form .form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
}

form.filter-form.ticket-search-form .form-group label {
    display: block;
    width: 100%;
    height: 16px;
    margin: 0 0 0;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

form.filter-form.ticket-search-form .form-group select,
form.filter-form.ticket-search-form .form-group input {
    width: 100%;
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0 11px !important;
    box-sizing: border-box;
    border: 1px solid #d8dee8;
    border-radius: 7px;
    outline: none;
    background: #ffffff;
    color: #344054;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 38px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

form.filter-form.ticket-search-form .form-group select {
    padding-right: 30px;
    cursor: pointer;
}

form.filter-form.ticket-search-form .form-group input::placeholder {
    color: #98a2b3;
    font-weight: 400;
}

form.filter-form.ticket-search-form .form-group select:hover,
form.filter-form.ticket-search-form .form-group input:hover {
    border-color: #b9c7db;
}

form.filter-form.ticket-search-form .form-group select:focus,
form.filter-form.ticket-search-form .form-group input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .07);
}

form.filter-form.ticket-search-form .ticket-search-input {
    padding-left: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
}

form.filter-form.ticket-search-form .ticket-search-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 7px;
    height: 60px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

form.filter-form.ticket-search-form .ticket-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 38px;
    min-width: 108px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #2563eb;
    border-radius: 7px;
    background: #2563eb;
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(37, 99, 235, .12);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

form.filter-form.ticket-search-form .ticket-search-btn:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: 0 5px 12px rgba(37, 99, 235, .16);
    transform: translateY(-1px);
}

form.filter-form.ticket-search-form .ticket-search-btn:active {
    transform: translateY(0);
}

form.filter-form.ticket-search-form .ticket-search-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 38px;
    min-width: 58px;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #d8dee8;
    border-radius: 7px;
    background: #ffffff;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

form.filter-form.ticket-search-form .ticket-search-clear-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #344054;
}

/* Main content */

.get-ticket .orders-header{
    margin: 0 !important;
}

.get-ticket .orders-top {
    width: 100%;
    min-height: 58px;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f4;
    background: #ffffff;
}

.get-ticket .orders-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.get-ticket .orders-info h2 {
    position: relative;
    margin: 0;
    padding-left: 11px;
    color: #172033;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}

.get-ticket .orders-info h2::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 3px;
    height: 16px;
    border-radius: 3px;
    background: #2563eb;
}

.get-ticket .orders-info p {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding-left: 14px;
    border-left: 1px solid #e5e7eb;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.get-ticket .orders-info p strong {
    color: #526173;
    font-size: 12px;
    font-weight: 700;
}

.get-ticket .table-responsive {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
}

.get-ticket .orders-table {
    width: 100% !important;
    min-width: 1050px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed !important;
}

.get-ticket .orders-table thead th {
    height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid #e5e9ef;
    background: #f8fafc;
    color: #667085;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .25px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    width: fit-content;
    
}

.get-ticket .orders-table thead th:first-child {
    padding-left: 18px;
}

.get-ticket .orders-table tbody td {
    height: 52px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f2f5;
    color: #475467;
    font-size: 10px;
    vertical-align: middle;
    text-align: left !important;
}

.get-ticket .orders-table tbody tr {
    transition: background .15s ease;
    text-align: left;
}

.get-ticket .orders-table tbody tr:hover {
    background: #fafcff;
}

.get-ticket .orders-table tbody tr:last-child td {
    border-bottom: 0;
    text-align: left !important;
}

.get-ticket .orders-table th:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    text-align: center;
    background: #f8fafc;
    box-shadow: -6px 0 12px rgba(15, 23, 42, .04);
}

.get-ticket .orders-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    text-align: center;
    background: #ffffff;
    box-shadow: -6px 0 12px rgba(15, 23, 42, .04);
}

.get-ticket .orders-table tbody tr:hover td:last-child {
    background: #fafcff;
}

.get-ticket .orders-table .empty-table {
    height: 150px;
    padding: 0 !important;
    border-bottom: 0;
    color: #7a8494 !important;
    font-size: 11px !important;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
}

.get-ticket .orders-table .empty-table::before {
    content: "⌁";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 9px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 17px;
    display: none;
}

.get-ticket .orders-table .empty-table:hover {
    background: #ffffff;
}

.get-ticket .orders-header .tab-btn.active{
    margin: 0;
}

/* NDR Wrap */

.ndr-wrap .filter-card {
    width: 100%;
    margin: 0 0 14px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}

.ndr-wrap .filter-card .filter-grid {
    display: grid;
    grid-template-columns:
        1fr
        1.6fr
        1fr
        1.6fr
        auto;
    align-items: end;
    gap: 12px;
    width: 100%;
}

.ndr-wrap .filter-card .form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.ndr-wrap .filter-card .form-group.large {
    min-width: 0;
}

.ndr-wrap .filter-card .form-group label {
    display: block;
    height: 16px;
    margin: 0 0 6px;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.1px;
}

.ndr-wrap .filter-card .form-group select,
.ndr-wrap .filter-card .form-group > input,
.ndr-wrap .filter-card .date-field {
    width: 100%;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
    border: 1px solid #dce2ea;
    border-radius: 7px;
    outline: none;
    background: #ffffff;
    color: #344054;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.ndr-wrap .filter-card .form-group select {
    padding: 0 30px 0 11px;
    cursor: pointer;
}

.ndr-wrap .filter-card .form-group > input {
    padding: 0 11px;
}

.ndr-wrap .filter-card .form-group select:hover,
.ndr-wrap .filter-card .form-group > input:hover,
.ndr-wrap .filter-card .date-field:hover {
    border-color: #b9c7db;
}

.ndr-wrap .filter-card .form-group select:focus,
.ndr-wrap .filter-card .form-group > input:focus,
.ndr-wrap .filter-card .date-field:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
}

.ndr-wrap .filter-card .date-field {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: visible;
}

.ndr-wrap .filter-card .date-field .flatpickr-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.ndr-wrap .filter-card .date-field input.flatpickr-input {
    width: 100%;
    height: 36px;
    min-width: 0;
    padding: 0 40px 0 11px;
    border: 0;
    outline: none;
    background: transparent;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.ndr-wrap .filter-card .date-field input::placeholder {
    color: #98a2b3;
}

.ndr-wrap .filter-card .date-field > button {
    position: absolute;
    top: 50%;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #f1f5f9;
    color: #667085;
    transform: translateY(-50%);
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.ndr-wrap .filter-card .date-field > button:hover {
    background: #eff6ff;
    color: #2563eb;
}

.ndr-wrap .filter-card .date-field > button i {
    font-size: 11px;
}

.ndr-wrap .filter-card .search-box input {
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
}

.ndr-wrap .filter-card .action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    white-space: nowrap;
}

.ndr-wrap .filter-card .action-btn .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 13px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.ndr-wrap .filter-card .action-btn .primary_btn {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12);
    font-size: 12px;
}

.ndr-wrap .filter-card .action-btn .primary_btn:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.17);
    transform: translateY(-1px);
}

.ndr-wrap .filter-card .action-btn .primary_btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.1);
}

.ndr-wrap .filter-card .action-btn .outline {
    border: 1px solid #dce2ea;
    background: #ffffff;
    color: #667085;
    font-size: 12px;
}

.ndr-wrap .filter-card .action-btn .outline:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #344054;
}

.ndr-wrap .filter-card .flatpickr-calendar {
    width: 310px;
    margin-top: 6px;
    padding: 0;
    border: 1px solid #e1e5eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    box-sizing: border-box;
    font-family: inherit;
}

.ndr-wrap .filter-card .flatpickr-calendar.static {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
}

.ndr-wrap .filter-card .date-picker-group .flatpickr-calendar {
    width: 310px;
}

.ndr-wrap .filter-card .flatpickr-months {
    height: 48px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    background: #fff;
}

.ndr-wrap .filter-card .flatpickr-month {
    height: 48px;
    display: flex;
    align-items: center;
}

.ndr-wrap .filter-card .flatpickr-current-month {
    position: static;
    width: auto;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #172033;
    font-size: 14px;
    font-weight: 600;
}

.ndr-wrap .filter-card .flatpickr-monthDropdown-months {
    width: auto;
    height: 32px;
    margin: 0;
    padding: 0 20px 0 5px;
    border: 0;
    border-radius: 6px;
    outline: 0;
    background: transparent;
    color: #172033;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.ndr-wrap .filter-card .flatpickr-monthDropdown-months:hover {
    background: #f5f7fa;
}

.ndr-wrap .filter-card .flatpickr-monthDropdown-months:focus {
    border: 0;
    box-shadow: none;
}

.ndr-wrap .filter-card .numInputWrapper {
    width: 78px;
    height: 32px;
}

.ndr-wrap .filter-card .numInput.cur-year {
    width: 85px;
    height: 32px;
    margin: 0;
    padding: 0 !important;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
}

.ndr-wrap .filter-card .numInput.cur-year:focus {
    border: 0;
    box-shadow: none;
}

.ndr-wrap .filter-card .flatpickr-prev-month,
.ndr-wrap .filter-card .flatpickr-next-month {
    position: static;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #596474;
    fill: #596474;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.ndr-wrap .filter-card .flatpickr-prev-month:hover,
.ndr-wrap .filter-card .flatpickr-next-month:hover {
    background: #f3f5f8;
    color: #172033;
    fill: #172033;
}

.ndr-wrap .filter-card .flatpickr-prev-month svg,
.ndr-wrap .filter-card .flatpickr-next-month svg {
    width: 13px;
    height: 13px;
}

.ndr-wrap .filter-card .flatpickr-weekdays {
    height: 32px;
    padding: 0 10px;
    background: #fafbfc;
    border-top: 1px solid #f0f2f5;
    border-bottom: 1px solid #f0f2f5;
}

.ndr-wrap .filter-card .flatpickr-weekdaycontainer {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.ndr-wrap .filter-card span.flatpickr-weekday {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a8492;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.ndr-wrap .filter-card .flatpickr-innerContainer,
.ndr-wrap .filter-card .flatpickr-rContainer,
.ndr-wrap .filter-card .flatpickr-days {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.ndr-wrap .filter-card .dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 8px 10px 10px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
    box-sizing: border-box;
}

.ndr-wrap .filter-card .flatpickr-day {
    width: 34px;
    max-width: 34px;
    height: 34px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    line-height: 34px;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border 0.15s ease;
}

.ndr-wrap .filter-card .flatpickr-day:hover {
    border-color: transparent;
    background: #f1f4f8;
    color: #172033;
}

.ndr-wrap .filter-card .flatpickr-day.today {
    border-color: #b8c2cf;
    background: #fff;
    color: #172033;
    font-weight: 600;
}

.ndr-wrap .filter-card .flatpickr-day.today:hover {
    border-color: #0b61dd;
    background: #f1f6ff;
}

.ndr-wrap .filter-card .flatpickr-day.selected,
.ndr-wrap .filter-card .flatpickr-day.startRange,
.ndr-wrap .filter-card .flatpickr-day.endRange {
    border-color: #172033;
    background: #172033;
    color: #fff;
    font-weight: 600;
}

.ndr-wrap .filter-card .flatpickr-day.inRange {
    border-color: transparent;
    border-radius: 0;
    background: #edf3ff;
    box-shadow: none;
    color: #172033;
}

.ndr-wrap .filter-card .flatpickr-day.startRange {
    border-radius: 50% 0 0 50%;
}

.ndr-wrap .filter-card .flatpickr-day.endRange {
    border-radius: 0 50% 50% 0;
}

.ndr-wrap .filter-card .flatpickr-day.startRange.endRange {
    border-radius: 50%;
}

.ndr-wrap .filter-card .flatpickr-day.prevMonthDay,
.ndr-wrap .filter-card .flatpickr-day.nextMonthDay {
    color: #c4c9d0;
}

.ndr-wrap .filter-card .flatpickr-day.disabled {
    color: #d5d9df;
}

.ndr-wrap .filter-card .flatpickr-calendar:before,
.ndr-wrap .filter-card .flatpickr-calendar:after {
    display: none;
}

.ndr-wrap .filter-card .form-group select,
.ndr-wrap .filter-card .form-group > input,
.ndr-wrap .filter-card .date-field {
    font-size: 12px;
}

/* NDR Wrap second section */

.ndr-wrap .summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 0 0 16px;
}

.ndr-wrap .summary-card {
    position: relative;
    min-height: 92px;
    padding: 16px 18px;
    box-sizing: border-box;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.ndr-wrap .summary-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #d9dee7;
    transition: background 0.2s ease;
}

.ndr-wrap .summary-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.08);
}

.ndr-wrap .summary-card:hover::before {
    background: #2563eb;
}

.ndr-wrap .summary-card.active {
    border-color: #bfdbfe;
    background: #f8fbff;
    box-shadow: 0 5px 18px rgba(37, 99, 235, 0.09);
}

.ndr-wrap .summary-card.active::before {
    background: #2563eb;
}

.ndr-wrap .summary-card h2 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.4px;
}

.ndr-wrap .summary-card p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndr-wrap .summary-card.active h2 {
    color: #2563eb;
}

.ndr-wrap .summary-card.active p {
    color: #475467;
}

/* NDR wrap third section */

.ndr-wrap .status-tabs {
    display: inline-flex;
    width: fit-content;
    max-width: max-content;
    align-items: center;
    gap: 4px;
    margin: 0 0 16px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #f6f8fb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.ndr-wrap .status-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 90px;
    height: 41px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 6px;
    outline: none;
    background: transparent;
    color: #667085;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.ndr-wrap .status-tab:hover {
    color: #344054;
    background: #ffffff;
}

.ndr-wrap .status-tab.active {
    border-color: #dbe4f0;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08);
}

.ndr-wrap .status-tab.active::after {
    display: none;
}

.ndr-wrap .status-tab:active {
    transform: scale(0.98);
}

.ndr-wrap .status-tab:focus {
    outline: none;
}

.ndr-wrap .status-tab:focus-visible {
    border-color: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}

/* ndr wrap main content first section */

.ndr-wrap .card{
    padding: 10px !important;
    margin-bottom: 20px;
    border-radius: 15px;
} 

.ndr-wrap .orders-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin: 0 0 18px;
    padding: 2px 10px 10px 10px;
    min-height: 55px;
    
}

.ndr-wrap .orders-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ndr-wrap .orders-info h2 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.ndr-wrap .orders-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.ndr-wrap .orders-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #dce2ea;
    border-radius: 7px;
    background: #ffffff;
    color: #475467;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.ndr-wrap .orders-actions .btn:hover {
    border-color: #c7d0dc;
    background: #f8fafc;
    color: #172033;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.ndr-wrap .orders-actions .btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.ndr-wrap .orders-actions .btn i {
    font-size: 11px;
    line-height: 1;
}

.ndr-wrap .orders-actions .btn i:first-child {
    color: #667085;
}

.ndr-wrap .orders-actions .btn i:last-child {
    margin-left: 2px;
    font-size: 9px;
    color: #98a2b3;
}

.ndr-wrap .orders-actions .btn:hover i:first-child {
    color: #344054;
}

.ndr-wrap .orders-actions .btn:hover i:last-child {
    color: #667085;
}

/* ndr wrap main content second section */

.ndr-wrap .table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
}

.ndr-wrap .page-size {
    display: flex;
    align-items: center;
}

.ndr-wrap .page-size select {
    width: 72px;
    height: 36px;
    padding: 0 16px 0 11px;
    border: 1px solid #dce2ea;
    border-radius: 7px;
    outline: none;
    background: #ffffff;
    color: #344054;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.ndr-wrap .page-size select:hover {
    border-color: #c5cfdb;
    background: #f8fafc;
}

.ndr-wrap .page-size select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
}

.ndr-wrap .table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 10px 0 10px;
}

.ndr-wrap .table-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #2563eb;
    border-radius: 7px;
    background: #2563eb;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    box-sizing: border-box;
}

.ndr-wrap .table-pagination button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #dce2ea;
    border-radius: 7px;
    background: #ffffff;
    color: #667085;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        all 0.3s ease-in-out;
}

.ndr-wrap .table-pagination button i {
    font-size: 10px;
    line-height: 1;
}

/* ndr wrap main content third section */

.ndr-wrap .table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.ndr-wrap .table-responsive::-webkit-scrollbar {
    height: 7px;
}

.ndr-wrap .table-responsive::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 10px;
}

.ndr-wrap .table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.ndr-wrap .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.ndr-wrap .orders-table {
    width: 100%;
    min-width: 1550px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    background: #ffffff;
}

.ndr-wrap .orders-table thead {
    background: #f8fafc;
}

.ndr-wrap .orders-table thead tr {
    background: #f8fafc;
}

.ndr-wrap .orders-table th {
    height: 48px;
    padding: 0 14px;
    border-bottom: 1px solid #e3e8ef;
    background: #f8fafc;
    color: #475467;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    letter-spacing: 0.15px;
    box-sizing: border-box;
}

.ndr-wrap .orders-table th:first-child {
    padding-left: 16px;
    text-align: center;
}

.ndr-wrap .orders-table th:last-child {
    padding-right: 16px;
}

.ndr-wrap .orders-table tbody tr {
    background: #ffffff;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.ndr-wrap .orders-table tbody tr:hover {
    background: #f9fbff;
}

.ndr-wrap .orders-table td {
    min-height: 58px;
    padding: 13px 14px;
    border-bottom: 1px solid #eef1f5;
    color: #344054;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    vertical-align: middle;
    box-sizing: border-box;
}

.ndr-wrap .orders-table tbody tr:last-child td {
    border-bottom: 0;
}

.ndr-wrap .orders-table td:first-child {
    padding-left: 5px;
    text-align: center;
}

.ndr-wrap .orders-table td:last-child {
    padding-right: 16px;
}

.ndr-wrap .orders-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    accent-color: #2563eb;
    cursor: pointer;
    vertical-align: middle;
}

.ndr-wrap .orders-table input[type="checkbox"]:hover {
    border-color: #2563eb;
}

.ndr-wrap .orders-table .action-col {
    position: sticky;
    right: 0;
    z-index: 4;
    min-width: 120px;
    width: 120px;
    padding: 10px 12px;
    text-align: center;
    background: #ffffff;
    box-shadow: -6px 0 12px rgba(15, 23, 42, 0.05);
}

.ndr-wrap .orders-table thead .action-col {
    background: #f8fafc;
    z-index: 5;
}

.ndr-wrap .orders-table tbody .action-col {
    background: #ffffff;
}

.ndr-wrap .orders-table tbody tr:hover .action-col {
    background: #f9fbff;
}

.ndr-wrap .orders-table .action-col .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--primary-color);
    border-radius: 7px;
    background: var(--primary-color);
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 3px 7px rgba(37, 99, 235, 0.14);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.ndr-wrap .orders-table .action-col .btn:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: 0 5px 10px rgba(37, 99, 235, 0.2);
    transform: translateY(-1px);
}

.ndr-wrap .orders-table .action-col .btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.12);
}

.ndr-wrap .orders-table .empty-table {
    height: 180px;
    padding: 40px 20px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
}

.ndr-wrap .orders-table .empty-table::before {
    content: "⌕";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    border: 1px solid #e4e9f0;
    border-radius: 50%;
    background: #f8fafc;
    color: #98a2b3;
    font-size: 20px;
    font-weight: 400;
    display: none;
}

.ndr-wrap .orders-table th:nth-child(2),
.ndr-wrap .orders-table td:nth-child(2) {
    min-width: 150px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(3),
.ndr-wrap .orders-table td:nth-child(3) {
    min-width: 145px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(4),
.ndr-wrap .orders-table td:nth-child(4) {
    min-width: 135px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(5),
.ndr-wrap .orders-table td:nth-child(5) {
    min-width: 145px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(6),
.ndr-wrap .orders-table td:nth-child(6) {
    min-width: 150px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(7),
.ndr-wrap .orders-table td:nth-child(7) {
    min-width: 130px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(8),
.ndr-wrap .orders-table td:nth-child(8) {
    min-width: 190px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(9),
.ndr-wrap .orders-table td:nth-child(9) {
    min-width: 130px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(10),
.ndr-wrap .orders-table td:nth-child(10) {
    min-width: 150px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(11),
.ndr-wrap .orders-table td:nth-child(11) {
    min-width: 170px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(12),
.ndr-wrap .orders-table td:nth-child(12) {
    min-width: 100px;
    text-align: center;
}

.ndr-wrap .orders-table th:nth-child(13),
.ndr-wrap .orders-table td:nth-child(13),
.ndr-wrap .orders-table th:nth-child(14),
.ndr-wrap .orders-table td:nth-child(14),
.ndr-wrap .orders-table th:nth-child(15),
.ndr-wrap .orders-table td:nth-child(15) {
    min-width: 175px;
    text-align: center;
}

/* performance reports */

.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin: 0 0 20px;
}

.reports-kpi-grid .kpi-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 94px;
    padding: 16px;
    border: 1px solid #e7ebf0;
    border-radius: 12px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.045);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.reports-kpi-grid .kpi-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 12px 0 0 12px;
}

.reports-kpi-grid .kpi-card:hover {
    transform: translateY(-3px);
    border-color: #d9e0e8;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.reports-kpi-grid .kpi-icon {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 18px;
    box-sizing: border-box;
}

.reports-kpi-grid .kpi-icon i {
    line-height: 1;
}

.reports-kpi-grid .kpi-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.reports-kpi-grid .kpi-title {
    display: block;
    overflow: hidden;
    color: #667085;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reports-kpi-grid .kpi-value {
    margin: 0;
    color: #172033;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.reports-kpi-grid .card-blue::before {
    background: #2563eb;
}

.reports-kpi-grid .card-blue .kpi-icon {
    background: #eff6ff;
    color: #2563eb;
}

.reports-kpi-grid .card-green::before {
    background: #16a34a;
}

.reports-kpi-grid .card-green .kpi-icon {
    background: #ecfdf3;
    color: #16a34a;
}

.reports-kpi-grid .card-amber::before {
    background: #f59e0b;
}

.reports-kpi-grid .card-amber .kpi-icon {
    background: #fffbeb;
    color: #d97706;
}

.reports-kpi-grid .card-purple::before {
    background: #7c3aed;
}

.reports-kpi-grid .card-purple .kpi-icon {
    background: #f5f3ff;
    color: #7c3aed;
}

.reports-kpi-grid .card-emerald::before {
    background: #059669;
}

.reports-kpi-grid .card-emerald .kpi-icon {
    background: #ecfdf5;
    color: #059669;
}

.reports-kpi-grid .card-rose::before {
    background: #e11d48;
}

.reports-kpi-grid .card-rose .kpi-icon {
    background: #fff1f2;
    color: #e11d48;
}

.reports-kpi-grid .card-blue:hover {
    border-color: #bfdbfe;
}

.reports-kpi-grid .card-green:hover {
    border-color: #bbf7d0;
}

.reports-kpi-grid .card-amber:hover {
    border-color: #fde68a;
}

.reports-kpi-grid .card-purple:hover {
    border-color: #ddd6fe;
}

.reports-kpi-grid .card-emerald:hover {
    border-color: #a7f3d0;
}

.reports-kpi-grid .card-rose:hover {
    border-color: #fecdd3;
}

/* button-section */

.reports-wrap .filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 38px;
    margin: 0;
    white-space: nowrap;
}

.reports-wrap .filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    min-width: 82px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.reports-wrap .filter-actions .search-btn {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.15);
}

.reports-wrap .filter-actions .search-btn:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.2);
    transform: translateY(-1px);
}

.reports-wrap .filter-actions .search-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.12);
}

.reports-wrap .filter-actions .reset-btn {
    border: 1px solid #dce2ea;
    background: #ffffff;
    color: #667085;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.reports-wrap .filter-actions .reset-btn:hover {
    border-color: #c7d0dc;
    background: #f8fafc;
    color: #344054;
    box-shadow: 0 4px 9px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.reports-wrap .filter-actions .reset-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.reports-wrap .filter-actions .btn i {
    font-size: 11px;
    line-height: 1;
}

.reports-wrap .filter-actions .search-btn i {
    color: #ffffff;
}

.reports-wrap .filter-actions .reset-btn i {
    color: #98a2b3;
    transition: transform 0.2s ease, color 0.2s ease;
}

.reports-wrap .filter-actions .reset-btn:hover i {
    color: #475467;
    transform: rotate(-45deg);
}

.reports-wrap .filter-card .form-group select, .reports-wrap .filter-card .form-group > input, .reports-wrap .filter-card .date-field{
    min-height: 44px !important;
}

/* setting page */

.designer_card {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid #e1e6ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.designer_card form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.designer_section {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px 20px;
    border-radius: 10px;
    background: #ffffff;
    margin: 0;
}

.designer_section h3 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf0f4;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.designer_section .form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 16px;
}

.designer_section .form-group:last-child {
    margin-bottom: 0;
}

.designer_section .form-group label {
    display: block;
    margin: 0 0 7px;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.designer_section .form-group input[type="text"],
.designer_section .form-group input[type="file"],
.designer_section .form-group select,
.designer_section .form-group textarea {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid #dce2ea;
    border-radius: 7px;
    outline: none;
    background: #ffffff;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.designer_section .form-group textarea {
    min-height: 80px;
    line-height: 1.5;
    resize: vertical;
}

.designer_section .form-group input[type="file"] {
    padding: 8px 10px;
    cursor: pointer;
}

.designer_section .form-group input:hover,
.designer_section .form-group select:hover,
.designer_section .form-group textarea:hover {
    border-color: #b9c7db;
}

.designer_section .form-group input:focus,
.designer_section .form-group select:focus,
.designer_section .form-group textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .07);
}

.designer_section .form-group input::placeholder,
.designer_section .form-group textarea::placeholder {
    color: #98a2b3;
}

.current_logo_preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e7ebf0;
    border-radius: 8px;
    background: #f8fafc;
}

.current_logo_preview small {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.current_logo_preview img {
    display: block;
    width: auto;
    height: 46px;
    max-width: 150px;
    object-fit: contain;
    border-radius: 5px;
}

.toggle_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 18px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.toggle_item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 24px;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.toggle_item:hover {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.toggle_item input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.toggle_slider {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 22px;
    box-sizing: border-box;
    border-radius: 50px;
    background: #d6dee9;
    transition: background .2s ease;
}

.toggle_slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
    transition: transform .2s ease;
}

.toggle_item input:checked + .toggle_slider {
    background: #172033;
}

.toggle_item input:checked + .toggle_slider::after {
    transform: translateX(16px);
}

.toggle_item input:focus-visible + .toggle_slider {
    box-shadow: 0 0 0 3px rgba(23, 32, 51, .12);
}

.toggle_label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #172033;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: left;
}

.designer_section:nth-of-type(3) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.designer_section:nth-of-type(3) h3 {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.designer_section:nth-of-type(3) .form-group:last-child {
    grid-column: 1 / -1;
}

.designer_save_btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 190px;
    height: 42px;
    box-sizing: border-box;
    padding: 0 17px;
    border: 1px solid #2563eb;
    border-radius: 7px;
    background: #2563eb;
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(37, 99, 235, .12);
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.designer_save_btn:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: 0 5px 12px rgba(37, 99, 235, .17);
    transform: translateY(-1px);
}

.designer_save_btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(37, 99, 235, .1);
}

.designer_save_btn i {
    font-size: 12px;
}

.designer_card .form-group:has(textarea){
    padding: 0 !important;
}

.designer_card .current_logo_preview small{
    margin: 0;
}

/* report button  */
.designer-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.designer-save-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.20);
    transform: translateY(-1px);
}

.designer-save-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.14);
}

.designer-save-btn i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.designer-save-btn:hover i {
    transform: translateY(-1px);
}

.popup_wrap.aud_popup .default_checkbox_group{
    height: unset;
}

/* Create Manifest */

.manifest-empty-card {
    position: relative;
    width: 100%;
    max-width: 620px;
    min-height: 320px;
    margin: 30px auto;
    padding: 45px 30px 35px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

.manifest-empty-card::before {
    content: "";
    position: absolute;
    top: -90px;
    left: 50%;
    width: 220px;
    height: 220px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
}

.manifest-empty-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    font-size: 32px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.manifest-empty-title {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.manifest-empty-desc {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto 26px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.manifest-empty-card .primary-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 20px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.manifest-empty-card .primary-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.3);
}

.manifest-empty-card .primary-btn:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.2);
}

.manifest-empty-card .primary-btn i {
    font-size: 14px;
}

/* Hidden everywhere by default */
.sidebar-expand-arrow {
    display: none !important;
}

/* Show only on pages that contain the dashboard/sidebar */
body:has(.sidebar) .sidebar-expand-arrow {
    display: flex !important;
}

/* Profile Page Tab Switching */

.profile_tabs_bar {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    gap: 5px;
    padding: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    box-sizing: border-box;
}

.profile_tabs_bar::-webkit-scrollbar {
    display: none;
}

.profile_tab_btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 150px;
    padding: 10px 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color .22s ease,
        background-color .22s ease,
        box-shadow .22s ease,
        transform .18s ease;
}

.profile_tab_btn i {
    font-size: 12px;
    transition:
        transform .22s ease;
}

.profile_tab_btn:hover {
    color: #1e293b;
    background: rgba(255, 255, 255, .55);
}

.profile_tab_btn:active {
    transform: scale(.98);
}

.profile_tab_btn.active {
    color: #111827;
    background: #ffffff;
    box-shadow:
        0 2px 7px rgba(15, 23, 42, .07),
        0 1px 2px rgba(15, 23, 42, .04);
}

.profile_tab_btn.active i {
    transform: translateY(-1px);
}

.profile_section_card.tab_pane {
    display: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 14px;
    box-sizing: border-box;
}

.profile_section_card.tab_pane.active {
    display: block;
    animation: profileTabIn .25s ease both;
    padding: 20px 30px;
}

@keyframes profileTabIn {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section_title_wrap h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #172033;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.section_title_wrap h3 i {
    color: var(--primary-color, #111827);
    font-size: 14px;
}

.section_title_wrap p {
    margin: 5px 0 16px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
}

.profile_sidebar_column .profile_summary_card{
    padding: 30px 10px;
}

.kyc_verification_status{
    width: 100%;
    padding: 0 20px;
}

.profile_section_card .form-group:has(textarea){
    padding: 0;
}

.profile_section_card .form_grid{
    gap: 6px;
}

.profile_section_card .section_title_wrap p{
    margin: 0;
}

.profile_main_column{
    width: 100%;
}

form#changePasswordForm {
    width: 100%;
    padding: 0 15px;
}

.tip_content {
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: start;
    text-align: left;
}

.password_card .card_header{
    width: 100%;
}

.password_card .card_header > div{
    display: flex;
    flex-direction: column;
    align-items: start;
}

.icon_bubble{
    align-items: center !important;
}

.manifest-wrap .orders-card {
    margin-bottom: 20px;
}

.ticket-wrap .content_left_section{
    margin-bottom: 20px;
}

.get-ticket .orders-table td:first-child{
    text-align: left !important;
}

section.get-ticket .orders-header .header-left .order-tabs a.tab-btn{
    margin-top: 0;
}

.reports-wrap .filter-card .filter-main-row{
    display: flex;
}

/* ==========================================================================
   DFC Express App - 404 Error Page Styles
   ========================================================================== */

.dfc-app-404-wrapper {
    padding: 28px 24px 60px;
    width: 100%;
}

.dfc-app-404-wrapper.in-dashboard {
    padding: 24px 0 60px;
}

.dfc-app-404-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 404 Hero Card */
.dfc-404-hero-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 44px 48px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
}

.dfc-404-hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-color, #e53935) 0%, #3b82f6 100%);
    border-radius: 20px 0 0 20px;
}

.dfc-404-text-side {
    flex: 1.15;
    max-width: 580px;
}

.dfc-404-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 24px;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    color: var(--accent-color, #e53935);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.dfc-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-color, #e53935);
    border-radius: 50%;
    position: relative;
}

.dfc-pulse-dot::after {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(229, 57, 53, 0.4);
    animation: dfcDotPulse 1.8s infinite ease-out;
}

@keyframes dfcDotPulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.dfc-404-title {
    font-size: 38px;
    line-height: 1.18;
    color: var(--text-main, #0f172a);
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.dfc-404-title span {
    color: var(--accent-color, #e53935);
    background: linear-gradient(135deg, #e53935 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dfc-404-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted, #64748b);
    margin-bottom: 28px;
}

.dfc-404-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.dfc-404-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    padding: 11px 22px;
}

.dfc-404-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted, #64748b);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

.dfc-404-link:hover {
    color: var(--text-main, #0f172a);
    text-decoration: underline;
}

/* 404 Radar Visual Canvas */
.dfc-404-visual-side {
    flex: 0.85;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 280px;
}

.dfc-404-radar-canvas {
    position: relative;
    width: 290px;
    height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-circle {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed rgba(226, 232, 240, 0.9);
    pointer-events: none;
}

.radar-circle.circle-1 {
    width: 170px;
    height: 170px;
    border-color: rgba(229, 57, 53, 0.2);
    animation: dfcRadarRotate 24s linear infinite;
}

.radar-circle.circle-2 {
    width: 230px;
    height: 230px;
    border-color: rgba(100, 116, 139, 0.2);
    animation: dfcRadarRotateRev 32s linear infinite;
}

.radar-circle.circle-3 {
    width: 290px;
    height: 290px;
    border-color: rgba(59, 130, 246, 0.15);
}

@keyframes dfcRadarRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dfcRadarRotateRev {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

.dfc-404-num-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-main, #0f172a);
    position: relative;
    z-index: 2;
    user-select: none;
}

.dfc-box-icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
    animation: dfcFloat 4s ease-in-out infinite;
}

@keyframes dfcFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(-2deg);
    }
}

.floating-chip {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
    font-size: 11px;
}

.floating-chip strong {
    display: block;
    font-size: 12px;
    color: var(--text-main, #0f172a);
}

.floating-chip small {
    display: block;
    color: var(--text-muted, #64748b);
    font-size: 10.5px;
}

.floating-chip.chip-gps {
    top: 15px;
    left: -15px;
    animation: dfcChipFloat 5s ease-in-out infinite;
}

.floating-chip.chip-gps i {
    color: var(--accent-color, #e53935);
    font-size: 16px;
}

.floating-chip.chip-status {
    bottom: 15px;
    right: -15px;
    animation: dfcChipFloat 5s ease-in-out infinite 2.5s;
}

.floating-chip.chip-status i {
    color: #f59e0b;
    font-size: 16px;
}

@keyframes dfcChipFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* Quick Search Bar */
.dfc-404-search-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 30px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
    margin-bottom: 36px;
}

.search-box-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.search-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.search-icon-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--text-main, #0f172a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.search-info h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    margin-bottom: 3px;
}

.search-info p {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    margin: 0;
}

.dfc-404-search-form {
    flex: 1.2;
    max-width: 520px;
}

.dfc-search-input-group {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 4px 4px 4px 14px;
    transition: all 0.2s ease;
}

.dfc-search-input-group:focus-within {
    background: #ffffff;
    border-color: var(--text-main, #0f172a);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.dfc-search-input-group .input-icon {
    color: var(--text-muted, #64748b);
    font-size: 14px;
    margin-right: 10px;
}

.dfc-search-input-group input {
    border: none;
    background: transparent;
    font-size: 13.5px;
    color: var(--text-main, #0f172a);
    outline: none;
    width: 100%;
    padding: 8px 0;
}

.dfc-search-input-group input::placeholder {
    color: #94a3b8;
}

.dfc-search-input-group .btn {
    padding: 8px 18px;
    font-size: 13px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Shortcuts Section */
.dfc-404-shortcuts-section {
    margin-top: 10px;
}

.shortcuts-header {
    margin-bottom: 20px;
}

.shortcuts-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    margin-bottom: 4px;
}

.shortcuts-header p {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    margin: 0;
}

.dfc-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dfc-shortcuts-grid.public-grid {
    grid-template-columns: repeat(4, 1fr);
}

.dfc-shortcut-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.dfc-shortcut-card:hover {
    transform: translateY(-3px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.shortcut-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
    transition: transform 0.25s ease;
}

.dfc-shortcut-card:hover .shortcut-icon {
    transform: scale(1.08);
}

.shortcut-icon.icon-dashboard { background: #e0e7ff; color: #4338ca; }
.shortcut-icon.icon-order { background: #fee2e2; color: #dc2626; }
.shortcut-icon.icon-shipments { background: #dbeafe; color: #1d4ed8; }
.shortcut-icon.icon-calc { background: #fef3c7; color: #b45309; }
.shortcut-icon.icon-ndr { background: #ffedd5; color: #c2410c; }
.shortcut-icon.icon-support { background: #dcfce7; color: #15803d; }

.shortcut-body h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    margin-bottom: 6px;
}

.shortcut-body p {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
    margin: 0 0 14px 0;
    flex-grow: 1;
}

.shortcut-link-text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main, #0f172a);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    transition: gap 0.2s ease;
}

.dfc-shortcut-card:hover .shortcut-link-text {
    gap: 10px;
    color: var(--accent-color, #e53935);
}

/* Public 404 Layout */
.dfc-public-404-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-body, #f4f6fa);
}

.dfc-public-404-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding: 16px 0;
}

.dfc-public-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dfc-brand-logo img {
    height: 40px;
    width: auto;
    display: block;
}

.dfc-public-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sm-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
}

.dfc-public-404-main {
    flex: 1;
    padding: 40px 0 60px;
}

.dfc-public-404-footer {
    background: #ffffff;
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding: 20px 0;
    text-align: center;
}

.dfc-public-404-footer p {
    font-size: 12.5px;
    color: var(--text-muted, #64748b);
    margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .dfc-shortcuts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dfc-shortcuts-grid.public-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dfc-404-hero-card {
        padding: 36px 30px;
    }
    .dfc-404-title {
        font-size: 32px;
    }
}

@media (max-width: 860px) {
    .dfc-404-hero-card {
        flex-direction: column;
        text-align: center;
        padding: 36px 24px;
        gap: 30px;
    }
    .dfc-404-text-side {
        max-width: 100%;
    }
    .dfc-404-actions {
        justify-content: center;
    }
    .search-box-content {
        flex-direction: column;
        align-items: stretch;
    }
    .dfc-404-search-form {
        max-width: 100%;
    }
}

@media (max-width: 580px) {
    .dfc-shortcuts-grid,
    .dfc-shortcuts-grid.public-grid {
        grid-template-columns: 1fr;
    }
    .dfc-404-title {
        font-size: 26px;
    }
    .dfc-404-num-display {
        font-size: 60px;
    }
    .dfc-box-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
    .dfc-404-radar-canvas {
        width: 240px;
        height: 240px;
    }
    .radar-circle.circle-3 {
        width: 240px;
        height: 240px;
    }
    .radar-circle.circle-2 {
        width: 190px;
        height: 190px;
    }
    .radar-circle.circle-1 {
        width: 140px;
        height: 140px;
    }
    .floating-chip.chip-gps {
        left: 0;
        top: 0;
    }
    .floating-chip.chip-status {
        right: 0;
        bottom: 0;
    }
}
/* International courier enquiry modal */
body.international-enquiry-open {
    overflow: hidden;
}

.international-enquiry-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 15, 30, .72);
    backdrop-filter: blur(5px);
}

.international-enquiry-overlay.is-open {
    display: flex;
}

.international-enquiry-modal {
    position: relative;
    width: min(850px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 30px;
    border: 1px solid #dbe3ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(8, 15, 30, .3);
}

.international-enquiry-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #eef2f7;
    color: #344054;
    font-size: 25px;
    line-height: 34px;
    cursor: pointer;
}

.international-enquiry-heading {
    display: flex;
    gap: 16px;
    padding-right: 38px;
    margin-bottom: 26px;
}

.international-enquiry-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    font-size: 22px;
}

.international-enquiry-kicker {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.international-enquiry-heading h2 {
    margin: 3px 0 5px;
    color: #101828;
    font-size: 25px;
}

.international-enquiry-heading p {
    margin: 0;
    color: #667085;
    line-height: 1.5;
}

.international-form-section {
    padding: 20px;
    margin-bottom: 18px;
    border: 1px solid #e4e9f1;
    border-radius: 14px;
    background: #fbfcfe;
}

.international-form-section h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 17px;
    color: #1d2939;
    font-size: 15px;
}

.international-form-section h3 span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8efff;
    color: #2459c4;
    font-size: 12px;
}

.international-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.international-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #344054;
    font-size: 13px;
    font-weight: 650;
}

.international-form-grid input,
.international-form-grid select,
.international-form-grid textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cfd8e6;
    border-radius: 9px;
    background: #fff;
    color: #182230;
    font: inherit;
    font-weight: 400;
    box-sizing: border-box;
}

.international-form-grid textarea {
    resize: vertical;
}

.international-form-grid input:focus,
.international-form-grid select:focus,
.international-form-grid textarea:focus {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.international-form-full {
    grid-column: 1 / -1;
}

.international-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.international-enquiry-submit:disabled {
    cursor: wait;
    opacity: .7;
}

.international-enquiry-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

@media (max-width: 680px) {
    .international-enquiry-overlay {
        padding: 10px;
    }

    .international-enquiry-modal {
        max-height: calc(100vh - 20px);
        padding: 22px 16px;
        border-radius: 14px;
    }

    .international-enquiry-heading {
        gap: 11px;
    }

    .international-enquiry-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .international-enquiry-heading h2 {
        font-size: 20px;
    }

    .international-form-section {
        padding: 15px;
    }

    .international-form-grid {
        grid-template-columns: 1fr;
    }

    .international-form-full {
        grid-column: auto;
    }

    .international-form-actions .btn {
        flex: 1;
    }
}

/* Seller onboarding layout
 * Keep this scoped: the dashboard sidebar is collapsible elsewhere, while the
 * onboarding progress rail must always remain readable. */
.dashboard.onboarding {
    min-height: 100vh;
    height: auto;
    overflow: visible;
    filter: none !important;
    backdrop-filter: none !important;
}

.block-shipment .shipments-per-page {
    min-height: 38px;
    padding: 4px 5px 4px 12px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #f8fafc;
    border: 1px solid #dce2e9;
    border-radius: 8px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

.block-shipment .shipments-per-page select {
    height: 28px;
    min-width: 58px;
    margin: 0;
    padding: 0 26px 0 9px;
    border: 1px solid #cfd7e3;
    border-radius: 6px;
    background-color: #fff;
    color: #172033;
    font: inherit;
    font-weight: 700;
    line-height: 28px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.block-shipment .shipments-per-page select:hover {
    border-color: #98a2b3;
}

.block-shipment .shipments-per-page select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dashboard.onboarding > .sidebar,
.dashboard.onboarding .content,
.dashboard.onboarding .topbar,
.dashboard.onboarding .content_wrap,
.dashboard.onboarding .personal-info-card .card {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.dashboard.onboarding > .sidebar,
.dashboard.onboarding > .sidebar.expanded {
    width: 260px;
    min-width: 260px;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden auto;
    transition: none !important;
}

.dashboard.onboarding > .sidebar .logo {
    width: 100%;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 16px 20px;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    box-sizing: border-box;
    cursor: default;
}

.dashboard.onboarding > .sidebar .logo-left {
    width: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard.onboarding > .sidebar .logo-left img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.dashboard.onboarding > .sidebar .logo-right {
    display: block;
}

.dashboard.onboarding > .sidebar .logo-right h2 {
    margin: 0;
    color: #fff;
    font-size: 19px;
    line-height: 1.2;
    white-space: nowrap;
}

.dashboard.onboarding + .sidebar-expand-arrow,
body:has(.dashboard.onboarding) > .sidebar-expand-arrow {
    display: none !important;
}

.dashboard.onboarding .content {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

.dashboard.onboarding .content_wrap {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 30px 48px;
    box-sizing: border-box;
}

.dashboard.onboarding .content_wrap .hero {
    padding: 26px 0;
}

.dashboard.onboarding .personal-info-card .card {
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.dashboard.onboarding .onboarding-step-form {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.dashboard.onboarding .personal-info-card {
    width: 100%;
    padding: 0;
}

.dashboard.onboarding .personal-info-card .card-header,
.dashboard.onboarding .personal-info-card .card-body,
.dashboard.onboarding .personal-info-card .card-footer {
    width: 100%;
    box-sizing: border-box;
}

.dashboard.onboarding .personal-info-card .card-header {
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.dashboard.onboarding .personal-info-card .card-header > div:last-child {
    min-width: 0;
}

.dashboard.onboarding .personal-info-card .card-header p {
    margin: 0;
}

.dashboard.onboarding .input_field_wrap > input {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard.onboarding .input_field_wrap > .btn {
    width: auto;
    min-width: 140px;
    flex: 0 0 auto;
}

.dashboard.onboarding .onboarding-fields-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 20px;
}

.dashboard.onboarding .onboarding-fields-grid.two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard.onboarding .onboarding-fields-grid.three-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard.onboarding .onboarding-fields-grid .form-group,
.dashboard.onboarding .onboarding-fields-grid .input_field {
    min-width: 0;
    margin: 0;
}

.dashboard.onboarding .onboarding-fields-grid .input_field {
    display: flex;
    flex-direction: column;
}

.dashboard.onboarding .onboarding-fields-grid .input_field label {
    display: block;
    margin-bottom: 8px;
    color: #39465a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

.dashboard.onboarding .onboarding-fields-grid .input_field label span {
    margin-left: 3px;
    color: #e74c3c;
}

.dashboard.onboarding .onboarding-fields-grid input {
    width: 100%;
    height: 48px;
    padding: 13px 15px;
    box-sizing: border-box;
    border: 1px solid #dce3ea;
    border-radius: 10px;
    outline: none;
    background: #fafbfd;
    color: #1d2a3d;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.dashboard.onboarding .onboarding-fields-grid input::placeholder {
    color: #aab3bf;
}

.dashboard.onboarding .onboarding-fields-grid input:hover {
    border-color: #b9c4d0;
    background: #fff;
}

.dashboard.onboarding .onboarding-fields-grid input:focus {
    border-color: #1d2a3d;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(29, 42, 61, .08);
}

.dashboard.onboarding small {
    display: block;
    margin-top: 12px;
    color: #75798b;
}

.dashboard.onboarding .checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    text-align: left;
}

.dashboard.onboarding .checkbox > .checkmark {
    order: 1;
}

.dashboard.onboarding .checkbox > span:not(.checkmark) {
    order: 2;
    min-width: 0;
    flex: 1 1 calc(100% - 38px);
}

.dashboard.onboarding .checkbox > .field-msg.error {
    order: 3;
    width: calc(100% - 36px);
    margin: 6px 0 0 36px;
    flex: 0 0 calc(100% - 36px);
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
}

.dashboard.onboarding .checkbox.error {
    padding: 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff7f7;
}

.dashboard.onboarding .checkbox input.error-input ~ .checkmark {
    border-color: #dc2626;
}

@media (max-width: 900px) {
    .dashboard.onboarding {
        display: block;
    }

    .dashboard.onboarding > .sidebar.onboarding-sidebar,
    .dashboard.onboarding > .sidebar.onboarding-sidebar.expanded {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        border-right: 0;
        border-bottom: 1px solid #263247;
        z-index: 10;
        flex: none !important;
        contain: layout paint;
    }

    .dashboard.onboarding > .sidebar.onboarding-sidebar .logo {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 8px 16px !important;
        right: auto !important;
        flex-direction: row !important;
        justify-content: center !important;
    }

    .dashboard.onboarding > .sidebar.onboarding-sidebar .logo-left,
    .dashboard.onboarding > .sidebar.onboarding-sidebar .logo-left img {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    .dashboard.onboarding .progress_bar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 14px 16px 16px;
        overflow: hidden;
        box-sizing: border-box;
        min-height: 66px;
    }

    .dashboard.onboarding .progress_bar .step {
        display: flex;
        min-width: 0;
        margin: 0;
        gap: 6px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dashboard.onboarding .progress_bar .step::after {
        left: calc(50% + 21px);
        top: 19px;
        width: calc(100% - 42px);
        height: 2px;
    }

    .dashboard.onboarding .progress_bar .icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        z-index: 1;
    }

    .dashboard.onboarding .step_content h4 {
        margin: 0;
        font-size: 12px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .dashboard.onboarding .step_content span,
    .dashboard.onboarding .progress_bar .security {
        display: none;
    }

    .dashboard.onboarding .content {
        min-height: 0;
    }

    .dashboard.onboarding .topbar {
        padding: 12px 16px;
    }

    .dashboard.onboarding .content_wrap {
        padding: 0 18px 36px;
    }

    .dashboard.onboarding .content_wrap .hero {
        padding: 22px 0;
    }
}

@media (max-width: 640px) {
    .dashboard.onboarding > .sidebar.onboarding-sidebar .logo {
        height: 54px !important;
    }

    .dashboard.onboarding > .sidebar.onboarding-sidebar .logo-right h2 {
        font-size: 16px;
    }

    .dashboard.onboarding .progress_bar {
        padding: 12px 10px 14px;
    }

    .dashboard.onboarding .progress_bar .step {
        gap: 0;
    }

    .dashboard.onboarding .progress_bar .icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 13px;
    }

    .dashboard.onboarding .progress_bar .step::after {
        left: calc(50% + 19px);
        top: 17px;
        width: calc(100% - 38px);
    }

    .dashboard.onboarding .step_content {
        display: none;
    }

    .dashboard.onboarding .topbar .left {
        width: calc(100% - 58px);
    }

    .dashboard.onboarding .topbar .search {
        width: 100%;
    }

    .dashboard.onboarding .topbar .search input {
        width: 100%;
        min-width: 0;
    }

    .dashboard.onboarding .content_wrap {
        padding: 0 12px 28px;
    }

    .dashboard.onboarding .content_wrap .hero {
        align-items: flex-start;
        gap: 12px;
    }

    .dashboard.onboarding .content_wrap .hero h1 {
        font-size: 23px;
    }

    .dashboard.onboarding .content_wrap .hero .status {
        padding: 7px 12px;
    }

    .dashboard.onboarding .personal-info-card .card-header,
    .dashboard.onboarding .personal-info-card .card-body,
    .dashboard.onboarding .personal-info-card .card-footer {
        padding: 20px 16px;
    }

    .dashboard.onboarding .content_wrap .card-header h2 {
        font-size: 21px;
    }

    .dashboard.onboarding .input_field_wrap {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .dashboard.onboarding .input_field_wrap > input,
    .dashboard.onboarding .input_field_wrap > .btn {
        width: 100%;
        min-width: 0;
    }

    .dashboard.onboarding .onboarding-fields-grid.two-column,
    .dashboard.onboarding .onboarding-fields-grid.three-column {
        grid-template-columns: 1fr;
    }

    .dashboard.onboarding .warning-box,
    .dashboard.onboarding .info-box {
        align-items: flex-start;
        padding: 14px;
    }

    .dashboard.onboarding .agreement-box {
        height: 220px;
        padding: 18px;
    }

    .dashboard.onboarding .checkbox {
        gap: 10px;
        margin-bottom: 20px;
        font-size: 13px;
    }

    .dashboard.onboarding .card-footer {
        gap: 10px;
    }

    .dashboard.onboarding .card-footer > .btn,
    .dashboard.onboarding .card-footer .submit-area,
    .dashboard.onboarding .card-footer .submit-area .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .dashboard.onboarding .card-footer .submit-area {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
}

/* Simple shell for standard WordPress pages inside the app. */
.verify-email-container {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: #f4f6fa;
}

.email-verification-section {
    width: 100%;
    max-width: 560px;
    padding: 0;
}

.verification-card {
    width: 100%;
    padding: 38px 32px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .08);
    text-align: center;
}

.verification-card h2 {
    margin: 18px 0 8px;
    color: #0f172a;
    font-size: 28px;
}

.verification-card .subtitle,
.verification-card .description {
    overflow-wrap: anywhere;
    line-height: 1.65;
}

.verification-card .description {
    margin-top: 14px;
}

.verification-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef2ff;
    color: #1e3a8a;
    font-size: 28px;
}

.verification-card.success-card .verification-icon-wrap {
    background: #ecfdf5;
    color: #059669;
}

.verification-card .actions-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

.verification-card .actions-wrapper .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 520px) {
    .verify-email-container {
        align-items: start;
        padding: 20px 12px;
    }

    .verification-card {
        padding: 30px 20px;
    }

    .verification-card h2 {
        font-size: 24px;
    }

    .verification-card .actions-wrapper {
        flex-direction: column;
    }

    .verification-card .actions-wrapper .btn {
        width: 100%;
    }
}

.app-simple-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f6f8fb;
}

.app-page-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.app-page-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
    backdrop-filter: blur(10px);
}

.app-page-header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.app-page-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: #111827;
    font-size: 18px;
    font-weight: 800;
}

.app-page-brand img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
}

.app-page-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.app-page-nav a {
    padding: 9px 12px;
    border-radius: 8px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.app-page-nav a:hover,
.app-page-nav a.active {
    background: #f1f5f9;
    color: #0f172a;
}

.app-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-page-actions a {
    display: inline-flex;
    min-height: 40px;
    padding: 9px 15px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
}

.app-page-signup {
    border: 1px solid #cbd5e1;
    color: #334155;
    background: #fff;
}

.app-page-account {
    border: 1px solid #111827;
    color: #fff;
    background: #111827;
}

.app-page-account:hover {
    color: #fff;
    background: #1e293b;
}

.app-page-main {
    width: 100%;
    flex: 1 0 auto;
}

.app-page-content {
    min-height: calc(100vh - 144px);
}

.app-page-content .page_heading {
    margin-bottom: 24px;
    color: #0f172a;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
}

.app-page-footer {
    padding: 22px 0;
    border-top: 1px solid #e2e8f0;
    background: #111827;
}

.app-page-footer-inner,
.app-page-footer-links {
    display: flex;
    align-items: center;
}

.app-page-footer-inner {
    justify-content: space-between;
    gap: 24px;
}

.app-page-footer p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
}

.app-page-footer-links {
    gap: 20px;
}

.app-page-footer-links a {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
}

.app-page-footer-links a:hover {
    color: #fff;
}

@media (max-width: 720px) {
    .app-page-container {
        width: min(100% - 24px, 1120px);
    }

    .app-page-header-inner {
        min-height: 64px;
        gap: 12px;
    }

    .app-page-brand span,
    .app-page-signup {
        display: none;
    }

    .app-page-nav {
        gap: 0;
    }

    .app-page-nav a {
        padding: 8px;
        font-size: 13px;
    }

    .app-page-actions a {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 13px;
    }

    .app-page-footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .app-page-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 16px;
    }
}
.serviceability-panel{margin:0 0 20px;padding:16px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}.serviceability-panel h4{margin:0 0 12px;color:#0f172a}.serviceability-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid #e2e8f0}.serviceability-row:first-of-type{border-top:0}.serviceability-row>div:last-child{text-align:right}.serviceability-status{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700}.serviceability-row.available .serviceability-status{color:#166534;background:#dcfce7}.serviceability-row.unavailable .serviceability-status{color:#991b1b;background:#fee2e2}.serviceability-row.unverified .serviceability-status{color:#92400e;background:#fef3c7}.serviceability-row small,.serviceability-services{display:block;margin-top:4px;color:#64748b;font-size:12px}.serviceability-services{color:#334155;font-weight:600}@media(max-width:600px){.serviceability-row{display:block}.serviceability-row>div:last-child{margin-top:8px;text-align:left}}