/* Default Css */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  background: #c1c1c1;
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background-color: #222;
  outline: none;
}
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active {
  background: #177245;
}

body {
  color: #555555;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  background: #f8fafc;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
a:active, a:hover {
  text-decoration: none;
}

button,
.btn {
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
button:active, button:hover, button:focus,
.btn:active,
.btn:hover,
.btn:focus {
  outline: 0;
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus,
.btn:focus {
  outline: 0;
  box-shadow: none;
}

.form-control:focus {
  color: #0D2B5A;
  background-color: transparent;
  outline: 0;
  box-shadow: none;
}

.btn:hover,
.btn:focus {
  outline: 0;
  box-shadow: none;
  color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  color: #0D2B5A;
  font-weight: 700;
  margin-bottom: 20px;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 48px;
  line-height: 1.3;
}

h2 {
  font-size: 36px;
  line-height: 1.3;
}

h3 {
  font-size: 28px;
  line-height: 1.3;
}

h4 {
  font-size: 24px;
  line-height: 1.2;
}

h5 {
  font-size: 20px;
  line-height: 1.2;
}

h6 {
  font-size: 16px;
  line-height: 1.2;
}

hr {
  margin: 20px 0;
  border-color: #eaecf0;
}

ol {
  list-style: decimal;
}

p:last-child {
  margin-bottom: 0;
}

/* Form */
label {
  color: #ddd;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
}

*::-moz-selection {
  background: #177245;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #177245;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #177245;
  color: #fff;
  text-shadow: none;
}

/* Placeholder */
*::-moz-placeholder {
  color: #555555;
  font-size: 16px;
  opacity: 1;
}

*::placeholder {
  color: #555555;
  font-size: 16px;
  opacity: 1;
}

/* Button */
.btn-theme {
  color: #fff;
  border-color: #177245;
  background: #177245;
}
.btn-theme:hover {
  background: #177245;
  color: #fff;
  border-color: #177245;
}

.btn-rounded {
  border-radius: 100% !important;
}

.btn-square {
  border-radius: 0 !important;
}

/* Bg Color */
.bg-gray {
  background: #ddd;
}

.bg-white {
  background: #fff;
}

.bg-black {
  background: #000;
}

.bg-theme {
  background: #177245;
}

.bg-dark {
  background-color: #101a23 !important;
}

.bg-off-white {
  background-color: #f7f7f7;
}

.bg-off-white-2 {
  background-color: #f1f8ff;
}

.bg-blue {
  background-color: #4c87ff !important;
}

.bg-yellow {
  background-color: #fea116 !important;
}

.bg-pink {
  background-color: #fc4557 !important;
}

.bg-egg-blue {
  background-color: #1cb5a3 !important;
}

.bg-purple {
  background-color: #5851a7 !important;
}

/* Text Color */
.gray-color {
  background: #ddd;
}

.white-color {
  color: #fff;
}

.black-color {
  color: #000;
}

.theme-color {
  color: #177245;
}

/* Others Common Css Here :) */
.table-row {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.fix {
  overflow: hidden;
}

.separator {
  border-top: 1px solid #f2f2f2;
}

@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  --bs-gutter-x: 30px;
}

.row {
  --bs-gutter-x: 30px;
}

.dashboard-layout {
  display: flex;
  min-height: 100vh;
}
.dashboard-layout .dashboard-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.dashboard-layout .dashboard-overlay.active {
  visibility: visible;
  opacity: 1;
}

.dashboard-sidebar {
  width: 250px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .dashboard-sidebar {
    transform: translateX(-100%);
    z-index: 9999;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .dashboard-sidebar {
    transform: translateX(-100%);
    z-index: 9999;
  }
}
@media (max-width: 767px) {
  .dashboard-sidebar {
    transform: translateX(-100%);
    z-index: 9999;
  }
}
.dashboard-sidebar.active {
  transform: translateX(0);
}
.dashboard-sidebar .close-menu {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  z-index: 10;
  background: #dc3545;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-sidebar .sidebar-logo {
  display: flex;
  align-items: center;
  padding: 20px 18px;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}
.dashboard-sidebar .sidebar-logo img {
  max-width: 150px;
}
.dashboard-sidebar .logout {
  border-top: 1px solid #e5e7eb;
  margin-top: auto;
  padding: 10px 18px;
}
.dashboard-sidebar .logout button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 15px;
  font-size: 16px;
  border: 0;
  background: #fff;
  border-radius: 4px;
  font-weight: 600;
}
.dashboard-sidebar .logout button:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
}
.sidebar-menu::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.sidebar-menu::-webkit-scrollbar-track {
  background: #c1c1c1;
}
.sidebar-menu::-webkit-scrollbar-thumb {
  background-color: #222;
  outline: none;
}
.sidebar-menu::-webkit-scrollbar-thumb:active {
  background: #177245;
}
.sidebar-menu .menu-title {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  color: gray;
  margin-bottom: 6px;
}
.sidebar-menu ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.sidebar-menu ul li a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: 16px;
  border: 0;
  color: #000;
  background: #fff;
  border-radius: 4px;
  font-weight: 500;
}
.sidebar-menu ul li a i {
  flex: none;
}
.sidebar-menu ul li a:hover {
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
}
.sidebar-menu ul li.has-submenu a .submenu-arrow {
  margin-left: auto;
}
.sidebar-menu ul li.has-submenu.open ul.submenu {
  display: block;
}
.sidebar-menu ul li ul.submenu {
  display: none;
  border-radius: 10px;
  overflow: hidden;
  background: #F2F4F7;
  padding: 15px;
}
.sidebar-menu ul li ul.submenu li a {
  background: transparent;
  font-size: 14px;
}
.sidebar-menu ul li ul.submenu li a:hover {
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
}

.dashboard-main {
  flex: 1;
  padding: 30px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-left: 250px;
  overflow-x: clip;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .dashboard-main {
    padding: 20px;
    margin-left: auto;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .dashboard-main {
    padding: 20px;
    margin-left: auto;
  }
}
@media (max-width: 767px) {
  .dashboard-main {
    padding: 20px;
    margin-left: auto;
  }
}

.dashboard-topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dashboard-topbar .open-menu {
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  width: 38px;
  height: 38px;
  background: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex: none;
}
.dashboard-topbar .topbar-title {
  font-weight: 600;
  font-size: 22px;
  color: #000;
  margin-bottom: 0;
}
.dashboard-topbar .account-info {
  position: relative;
}
.dashboard-topbar .account-info .current {
  width: 38px;
  height: 38px;
  font-size: 13px;
  font-weight: 700;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dashboard-topbar .account-info.active .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 45px;
}
.dashboard-topbar .account-info .sub-menu {
  position: absolute;
  top: 60px;
  opacity: 0;
  visibility: hidden;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: max-content;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  -webkit-transition: all all 0.3s linear 0s;
  -o-transition: all all 0.3s linear 0s;
  transition: all all 0.3s linear 0s;
}
.dashboard-topbar .account-info .sub-menu .welcome-info {
  padding: 10px 15px;
}
.dashboard-topbar .account-info .sub-menu .welcome-info h6 {
  font-size: 16px;
  color: #000;
  margin-bottom: 4px;
}
.dashboard-topbar .account-info .sub-menu .welcome-info p {
  font-size: 14px;
  font-weight: 400;
}
.dashboard-topbar .account-info .sub-menu .logout-wrap {
  padding: 4px;
  width: 100%;
}
.dashboard-topbar .account-info .sub-menu .separator {
  width: 100%;
  height: 1px;
  background: #e5e7eb;
}
.dashboard-topbar .account-info .sub-menu ul {
  list-style: none;
  margin: 0;
  padding: 4px;
  width: 100%;
}
.dashboard-topbar .account-info .sub-menu ul li {
  display: block;
}
.dashboard-topbar .account-info .sub-menu ul li a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  font-size: 16px;
  border: 0;
  color: #000;
  background: #fff;
  border-radius: 4px;
  font-weight: 500;
}
.dashboard-topbar .account-info .sub-menu ul li a:hover {
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
}
.dashboard-topbar .account-info .sub-menu .logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  font-size: 16px;
  border: 0;
  background: #fff;
  border-radius: 4px;
  font-weight: 500;
}
.dashboard-topbar .account-info .sub-menu .logout:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

/*
|--------------------------------------------------------------------------
| SweetAlert2 - Global
|--------------------------------------------------------------------------
*/
.swal2-popup {
  font-family: "Poppins", sans-serif !important;
  border-radius: 10px !important;
}

/*
|--------------------------------------------------------------------------
| Validation Error List
|--------------------------------------------------------------------------
*/
.sweetalert-error-list {
  text-align: left;
}
.sweetalert-error-list ul {
  margin: 0;
  padding-left: 18px;
}
.sweetalert-error-list li {
  margin: 4px 0;
  color: #555555;
  font-size: 13px;
  line-height: 1.5;
}
.sweetalert-error-list li:last-child {
  margin-bottom: 0;
}

/*
|--------------------------------------------------------------------------
| SweetAlert Toast
|--------------------------------------------------------------------------
*/
.swal2-toast {
  width: auto !important;
  min-width: 320px !important;
  max-width: 420px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  font-family: "Poppins", sans-serif !important;
}

/*
|--------------------------------------------------------------------------
| Toast Title
|--------------------------------------------------------------------------
*/
.swal2-toast .swal2-title {
  margin: 0 !important;
  color: #101a23 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  text-align: left !important;
}

/*
|--------------------------------------------------------------------------
| Toast Content
|--------------------------------------------------------------------------
*/
.swal2-toast .swal2-html-container {
  margin: 3px 0 0 !important;
  padding: 0 !important;
  color: #555555 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/*
|--------------------------------------------------------------------------
| Toast Icon
|--------------------------------------------------------------------------
*/
.swal2-toast .swal2-icon {
  flex-shrink: 0;
  width: 28px !important;
  height: 28px !important;
  margin: 0 10px 0 0 !important;
  border-width: 2px !important;
}

.swal2-toast .swal2-icon .swal2-icon-content {
  font-size: 15px !important;
}

/*
|--------------------------------------------------------------------------
| Toast Close Button
|--------------------------------------------------------------------------
*/
.swal2-toast .swal2-close {
  width: 24px !important;
  height: 24px !important;
  margin-left: 8px !important;
  color: #555555 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  transition: 0.2s ease;
}
.swal2-toast .swal2-close:hover {
  color: #101a23 !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: 5px;
}

/*
|--------------------------------------------------------------------------
| Toast Progress Bar
|--------------------------------------------------------------------------
*/
.swal2-toast .swal2-timer-progress-bar {
  height: 2px !important;
  border-radius: 0 0 10px 10px !important;
}

/*
|--------------------------------------------------------------------------
| Normal SweetAlert Modal
|--------------------------------------------------------------------------
*/
.swal2-popup:not(.swal2-toast) {
  padding: 30px !important;
}

.swal2-popup:not(.swal2-toast) .swal2-title {
  margin-bottom: 8px !important;
  color: #101a23 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-html-container {
  margin: 10px 0 0 !important;
  color: #555555 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/*
|--------------------------------------------------------------------------
| SweetAlert Buttons
|--------------------------------------------------------------------------
*/
.swal2-actions {
  gap: 8px !important;
  margin-top: 20px !important;
}

.swal2-confirm,
.swal2-cancel {
  min-height: 40px !important;
  padding: 8px 18px !important;
  border-radius: 7px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: 0.2s ease !important;
}

/*
|--------------------------------------------------------------------------
| Confirm Button
|--------------------------------------------------------------------------
*/
.swal2-confirm {
  background: #177245 !important;
  color: #fff !important;
}
.swal2-confirm:hover {
  background: rgba(23, 114, 69, 0.7) !important;
}

/*
|--------------------------------------------------------------------------
| Cancel Button
|--------------------------------------------------------------------------
*/
.swal2-cancel {
  background: #f1f3f5 !important;
  color: #101a23 !important;
}
.swal2-cancel:hover {
  background: #e5e7eb !important;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .swal2-toast {
    min-width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin: 10px auto !important;
  }
  .swal2-toast .swal2-title {
    font-size: 13px !important;
  }
  .swal2-toast .swal2-html-container {
    font-size: 12px !important;
  }
  .swal2-popup:not(.swal2-toast) {
    width: calc(100% - 30px) !important;
    padding: 24px 20px !important;
  }
  .swal2-popup:not(.swal2-toast) .swal2-title {
    font-size: 20px !important;
  }
}
/*================================*
* Login Section
*=================================*/
.login-section {
  min-height: 100vh;
  padding: 80px 0;
  background: #F2F4F7;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .login-section {
    padding: 60px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .login-section {
    padding: 50px 0;
  }
}
@media (max-width: 767px) {
  .login-section {
    padding: 30px 0;
  }
}
.login-section {
  /*================================*
  * Login Card
  *=================================*/
}
.login-section .login-card {
  width: 100%;
  padding: 42px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(16, 26, 35, 0.07);
}
@media (min-width: 768px) and (max-width: 991px) {
  .login-section .login-card {
    padding: 32px;
  }
}
@media (max-width: 767px) {
  .login-section .login-card {
    padding: 25px 18px;
    border-radius: 11px;
  }
}
.login-section {
  /*================================*
  * Login Header
  *=================================*/
}
.login-section .login-header {
  margin-bottom: 30px;
  text-align: center;
}
.login-section .login-header .login-logo {
  margin-bottom: 22px;
}
.login-section .login-header .login-logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-section .login-header .login-logo img {
  width: auto;
  max-width: 155px;
  max-height: 55px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .login-section .login-header .login-logo img {
    max-width: 135px;
    max-height: 48px;
  }
}
.login-section .login-header .login-heading h2 {
  margin: 0 0 8px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.login-section .login-header .login-heading p {
  max-width: 390px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .login-section .login-header {
    margin-bottom: 24px;
  }
}
.login-section {
  /*================================*
  * Login Form
  *=================================*/
}
.login-section .login-form {
  width: 100%;
}
.login-section {
  /*================================*
  * Form Group
  *=================================*/
}
.login-section .form-group {
  margin-bottom: 20px;
}
.login-section .form-group > label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
@media (min-width: 768px) and (max-width: 991px) {
  .login-section .form-group {
    margin-bottom: 18px;
  }
}
@media (max-width: 767px) {
  .login-section .form-group {
    margin-bottom: 17px;
  }
}
.login-section {
  /*================================*
  * Input Group
  *=================================*/
}
.login-section .input-group {
  position: relative;
  width: 100%;
}
.login-section .input-group > i {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 2;
  color: #177245;
  font-size: 17px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.login-section .input-group input {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px 0 46px;
  border: 1px solid #ddd;
  border-radius: 8px !important;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.login-section .input-group input::placeholder {
  color: rgba(85, 85, 85, 0.18);
}
.login-section .input-group input:hover {
  border-color: rgba(221, 221, 221, 0.05);
}
.login-section .input-group input:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.1);
}
.login-section .input-group.input-group--password input {
  padding-right: 48px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .login-section .input-group input {
    height: 50px;
  }
}
@media (max-width: 767px) {
  .login-section .input-group > i {
    left: 14px;
    font-size: 16px;
  }
  .login-section .input-group input {
    height: 48px;
    padding-left: 42px;
    font-size: 14px;
  }
  .login-section .input-group.input-group--password input {
    padding-right: 44px;
  }
}
.login-section {
  /*================================*
  * Password Toggle
  *=================================*/
}
.login-section .password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.login-section .password-toggle i {
  position: static;
  font-size: 17px;
  line-height: 1;
  transform: none;
  pointer-events: none;
}
.login-section .password-toggle:hover {
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}
.login-section .password-toggle:focus-visible {
  outline: 2px solid rgba(23, 114, 69, 0.2);
  outline-offset: 1px;
}
@media (max-width: 767px) {
  .login-section .password-toggle {
    right: 7px;
    width: 30px;
    height: 30px;
  }
}
.login-section {
  /*================================*
  * Login Options
  *=================================*/
}
.login-section .login-options {
  margin: 20px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.login-section .login-options .remember {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.login-section .login-options .remember input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #177245;
  cursor: pointer;
}
.login-section .login-options > a {
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.login-section .login-options > a:hover {
  color: #D4AF37;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .login-section .login-options {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}
.login-section {
  /*================================*
  * Form Error
  *=================================*/
}
.login-section .form-error {
  display: block;
  margin-top: 6px;
  color: #dc3545;
  font-size: 14px;
  line-height: 1.4;
}
.login-section {
  /*================================*
  * Login Submit
  *=================================*/
}
.login-section .login-submit {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid #177245;
  border-radius: 8px !important;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.login-section .login-submit i {
  font-size: 17px;
}
.login-section .login-submit:hover {
  border-color: rgba(23, 114, 69, 0.8);
  background: rgba(23, 114, 69, 0.8);
  color: #fff;
}
.login-section .login-submit:active {
  -webkit-transform: translateY(1px);
  -ms-transform: translateY(1px);
  transform: translateY(1px);
}
.login-section .login-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.15);
}
@media (max-width: 767px) {
  .login-section .login-submit {
    min-height: 49px;
    font-size: 14px;
  }
}
.login-section {
  /*================================*
  * Login Footer
  *=================================*/
}
.login-section .login-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  text-align: center;
}
.login-section .login-footer p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.login-section .login-footer a {
  margin-left: 4px;
  color: #177245;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.login-section .login-footer a:hover {
  color: #D4AF37;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .login-section .login-footer {
    margin-top: 20px;
    padding-top: 17px;
  }
  .login-section .login-footer p {
    font-size: 14px;
  }
}

/*================================*
* Register Section
*=================================*/
.register-section {
  min-height: 100vh;
  padding: 70px 0;
  background: #F2F4F7;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .register-section {
    padding: 60px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .register-section {
    padding: 50px 0;
  }
}
@media (max-width: 767px) {
  .register-section {
    padding: 30px 0;
  }
}
.register-section {
  /*================================*
  * Register Card
  *=================================*/
}
.register-section .register-card {
  width: 100%;
  padding: 40px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(16, 26, 35, 0.07);
}
@media (min-width: 768px) and (max-width: 991px) {
  .register-section .register-card {
    padding: 32px;
  }
}
@media (max-width: 767px) {
  .register-section .register-card {
    padding: 25px 18px;
    border-radius: 11px;
  }
}
.register-section {
  /*================================*
  * Card Header
  *=================================*/
}
.register-section .card-header {
  margin-bottom: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}
.register-section .card-header .card-logo {
  margin-bottom: 18px;
}
.register-section .card-header .card-logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.register-section .card-header .card-logo img {
  width: auto;
  max-width: 155px;
  max-height: 55px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .register-section .card-header .card-logo img {
    max-width: 135px;
    max-height: 48px;
  }
}
.register-section .card-header h2 {
  margin: 0 0 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.register-section .card-header p {
  max-width: 500px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .register-section .card-header {
    margin-bottom: 22px;
  }
}
.register-section {
  /*================================*
  * Register Form
  *=================================*/
}
.register-section .register-form {
  width: 100%;
}
.register-section .register-form > .row {
  --bs-gutter-x: 28px;
  --bs-gutter-y: 16px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .register-section .register-form > .row {
    --bs-gutter-x: 24px;
  }
}
@media (max-width: 767px) {
  .register-section .register-form > .row {
    --bs-gutter-y: 15px;
  }
}
.register-section {
  /*================================*
  * Form Group
  *=================================*/
}
.register-section .form-group {
  margin: 0;
}
.register-section .form-group > label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.register-section .form-group > label .optional {
  color: #555555;
  font-weight: 400;
}
.register-section {
  /*================================*
  * Input Group
  *=================================*/
}
.register-section .input-group {
  position: relative;
  width: 100%;
}
.register-section .input-group > i {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 2;
  color: #177245;
  font-size: 17px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.register-section .input-group input {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px 0 46px;
  border: 1px solid #ddd;
  border-radius: 8px !important;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.register-section .input-group input::placeholder {
  color: rgba(85, 85, 85, 0.18);
}
.register-section .input-group input:hover {
  border-color: rgba(221, 221, 221, 0.05);
}
.register-section .input-group input:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.1);
}
.register-section .input-group.input-group--password input {
  padding-right: 48px;
}
.register-section {
  /*================================*
  * Password Toggle
  *=================================*/
}
.register-section .password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.register-section .password-toggle i {
  position: static;
  font-size: 17px;
  line-height: 1;
  transform: none;
  pointer-events: none;
}
.register-section .password-toggle:hover {
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}
.register-section .password-toggle:focus-visible {
  outline: 2px solid rgba(23, 114, 69, 0.2);
  outline-offset: 1px;
}
.register-section {
  /*================================*
  * Upload Box
  *=================================*/
}
.register-section .form-group--upload .upload-box {
  min-height: 126px;
}
.register-section .upload-box {
  position: relative;
  width: 100%;
  min-height: 118px;
  padding: 18px 20px;
  border: 1.5px dashed rgba(23, 114, 69, 0.65);
  border-radius: 9px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.register-section .upload-box input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.register-section .upload-box:hover {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.025);
}
.register-section .upload-box:focus-within {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}
.register-section .upload-box .upload-icon {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
}
.register-section .upload-box .upload-icon i {
  font-size: 22px;
  line-height: 1;
}
.register-section .upload-box .upload-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.register-section .upload-box .upload-content strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.register-section .upload-box .upload-content small {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.register-section {
  /*================================*
  * Account Info
  *=================================*/
}
.register-section .account-info {
  padding: 14px;
  border: 1px solid rgba(23, 114, 69, 0.12);
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.035);
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.register-section .account-info .account-info__icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}
.register-section .account-info .account-info__icon i {
  font-size: 17px;
}
.register-section .account-info .account-info__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.register-section .account-info .account-info__content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.55;
}
.register-section {
  /*================================*
  * Terms Checkbox
  *=================================*/
}
.register-section .terms-check {
  padding-top: 1px;
}
.register-section .terms-check > label {
  position: relative;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.register-section .terms-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.register-section .terms-check .checkmark {
  position: relative;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  flex: 0 0 17px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.register-section .terms-check input:checked + .checkmark {
  border-color: #177245;
  background: #177245;
}
.register-section .terms-check input:checked + .checkmark::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 8px;
  height: 4px;
  border-bottom: 1.5px solid #fff;
  border-left: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.register-section .terms-check input:focus-visible + .checkmark {
  outline: 2px solid rgba(23, 114, 69, 0.2);
  outline-offset: 2px;
}
.register-section .terms-check .terms-text {
  color: #555555;
  font-size: 14px;
  line-height: 1.55;
}
.register-section .terms-check .terms-text a {
  color: #177245;
  font-weight: 600;
  text-decoration: none;
}
.register-section .terms-check .terms-text a:hover {
  color: #D4AF37;
  text-decoration: underline;
}
.register-section {
  /*================================*
  * Register Submit
  *=================================*/
}
.register-section .register-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 2px;
  padding: 0 20px;
  border: 1px solid #177245;
  border-radius: 8px !important;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.register-section .register-submit i {
  font-size: 17px;
}
.register-section .register-submit:hover {
  border-color: rgba(23, 114, 69, 0.8);
  background: rgba(23, 114, 69, 0.8);
  color: #fff;
}
.register-section .register-submit:active {
  transform: translateY(1px);
}
.register-section .register-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.15);
}
.register-section {
  /*================================*
  * Card Footer
  *=================================*/
}
.register-section .card-footer {
  margin-top: 24px;
  padding: 19px 0 0;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  background: transparent;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.register-section .card-footer a {
  margin-left: 4px;
  color: #177245;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.register-section .card-footer a:hover {
  color: #D4AF37;
  text-decoration: underline;
}
.register-section {
  /*================================*
  * Responsive
  *=================================*/
}
@media (min-width: 768px) and (max-width: 991px) {
  .register-section .register-form > .row {
    --bs-gutter-y: 15px;
  }
  .register-section .input-group input {
    height: 50px;
  }
}
@media (max-width: 767px) {
  .register-section .register-form > .row {
    --bs-gutter-y: 16px;
  }
  .register-section .input-group > i {
    left: 14px;
    font-size: 16px;
  }
  .register-section .input-group input {
    height: 48px;
    padding-left: 42px;
  }
  .register-section .input-group.input-group--password input {
    padding-right: 44px;
  }
  .register-section .password-toggle {
    right: 7px;
    width: 30px;
    height: 30px;
  }
  .register-section .upload-box {
    min-height: 108px;
    padding: 15px;
    gap: 11px;
  }
  .register-section .upload-box .upload-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .register-section .upload-box .upload-icon i {
    font-size: 19px;
  }
  .register-section .account-info {
    padding: 12px;
  }
  .register-section .register-submit {
    min-height: 49px;
  }
  .register-section .card-footer {
    margin-top: 20px;
    padding-top: 17px;
  }
}

/*================================*
* Forgot Password Section
*=================================*/
.forgot-password-section {
  min-height: 100vh;
  padding: 70px 0;
  background: #F2F4F7;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .forgot-password-section {
    padding: 60px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .forgot-password-section {
    padding: 50px 0;
  }
}
@media (max-width: 767px) {
  .forgot-password-section {
    padding: 30px 0;
  }
}
.forgot-password-section {
  /*================================*
  * Forgot Password Card
  *=================================*/
}
.forgot-password-section .forgot-password-card {
  width: 100%;
  padding: 40px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(16, 26, 35, 0.07);
}
@media (min-width: 768px) and (max-width: 991px) {
  .forgot-password-section .forgot-password-card {
    padding: 32px;
  }
}
@media (max-width: 767px) {
  .forgot-password-section .forgot-password-card {
    padding: 25px 18px;
    border-radius: 11px;
  }
}
.forgot-password-section {
  /*================================*
  * Card Header
  *=================================*/
}
.forgot-password-section .card-header {
  margin-bottom: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  /*================================*
  * Logo
  *=================================*/
}
.forgot-password-section .card-header .card-logo {
  margin-bottom: 18px;
}
.forgot-password-section .card-header .card-logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.forgot-password-section .card-header .card-logo img {
  width: auto;
  max-width: 155px;
  max-height: 55px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .forgot-password-section .card-header .card-logo img {
    max-width: 135px;
    max-height: 48px;
  }
}
.forgot-password-section .card-header {
  /*================================*
  * Icon
  *=================================*/
}
.forgot-password-section .card-header .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border: 1px solid rgba(23, 114, 69, 0.1);
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.forgot-password-section .card-header .icon i {
  font-size: 23px;
  line-height: 1;
}
@media (max-width: 767px) {
  .forgot-password-section .card-header .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 14px;
  }
  .forgot-password-section .card-header .icon i {
    font-size: 21px;
  }
}
.forgot-password-section .card-header {
  /*================================*
  * Heading
  *=================================*/
}
.forgot-password-section .card-header h2 {
  margin: 0 0 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.forgot-password-section .card-header {
  /*================================*
  * Description
  *=================================*/
}
.forgot-password-section .card-header p {
  max-width: 400px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.forgot-password-section {
  /*================================*
  * Form
  *=================================*/
}
.forgot-password-section .forgot-password-form {
  width: 100%;
}
.forgot-password-section {
  /*================================*
  * Form Group
  *=================================*/
}
.forgot-password-section .form-group {
  margin: 0 0 18px;
}
.forgot-password-section .form-group > label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.forgot-password-section {
  /*================================*
  * Input Group
  * Existing input design unchanged
  *=================================*/
}
.forgot-password-section .input-group {
  position: relative;
  width: 100%;
}
.forgot-password-section .input-group > i {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 2;
  color: #177245;
  font-size: 17px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.forgot-password-section .input-group input {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px 0 46px;
  border: 1px solid #ddd;
  border-radius: 8px !important;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.forgot-password-section .input-group input::placeholder {
  color: rgba(85, 85, 85, 0.18);
}
.forgot-password-section .input-group input:hover {
  border-color: rgba(221, 221, 221, 0.05);
}
.forgot-password-section .input-group input:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.1);
}
.forgot-password-section {
  /*================================*
  * Submit Button
  *=================================*/
}
.forgot-password-section .forgot-submit {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid #177245;
  border-radius: 8px !important;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.forgot-password-section .forgot-submit i {
  font-size: 17px;
}
.forgot-password-section .forgot-submit:hover {
  border-color: rgba(23, 114, 69, 0.8);
  background: rgba(23, 114, 69, 0.8);
  color: #fff;
}
.forgot-password-section .forgot-submit:active {
  transform: translateY(1px);
}
.forgot-password-section .forgot-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.15);
}
@media (max-width: 767px) {
  .forgot-password-section .forgot-submit {
    min-height: 49px;
  }
}
.forgot-password-section {
  /*================================*
  * Card Footer
  *=================================*/
}
.forgot-password-section .card-footer {
  margin-top: 24px;
  padding: 19px 0 0;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  background: transparent;
  text-align: center;
}
.forgot-password-section .card-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.forgot-password-section .card-footer a i {
  font-size: 16px;
  line-height: 1;
}
.forgot-password-section .card-footer a:hover {
  color: #D4AF37;
}
@media (max-width: 767px) {
  .forgot-password-section .card-footer {
    margin-top: 20px;
    padding-top: 17px;
  }
}
.forgot-password-section {
  /*================================*
  * Responsive
  *=================================*/
}
@media (min-width: 768px) and (max-width: 991px) {
  .forgot-password-section .input-group input {
    height: 50px;
  }
}
@media (max-width: 767px) {
  .forgot-password-section .form-group {
    margin-bottom: 17px;
  }
  .forgot-password-section .input-group > i {
    left: 14px;
    font-size: 16px;
  }
  .forgot-password-section .input-group input {
    height: 48px;
    padding-left: 42px;
  }
}

/*================================*
* Reset Password Section
*=================================*/
.reset-password-section {
  min-height: 100vh;
  padding: 70px 0;
  background: #F2F4F7;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .reset-password-section {
    padding: 60px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .reset-password-section {
    padding: 50px 0;
  }
}
@media (max-width: 767px) {
  .reset-password-section {
    padding: 30px 0;
  }
}
.reset-password-section {
  /*================================*
  * Reset Password Card
  *=================================*/
}
.reset-password-section .reset-password-card {
  width: 100%;
  padding: 40px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(16, 26, 35, 0.07);
}
@media (min-width: 768px) and (max-width: 991px) {
  .reset-password-section .reset-password-card {
    padding: 32px;
  }
}
@media (max-width: 767px) {
  .reset-password-section .reset-password-card {
    padding: 25px 18px;
    border-radius: 11px;
  }
}
.reset-password-section {
  /*================================*
  * Card Header
  *=================================*/
}
.reset-password-section .card-header {
  margin-bottom: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  /*================================*
  * Logo
  *=================================*/
}
.reset-password-section .card-header .card-logo {
  margin-bottom: 18px;
}
.reset-password-section .card-header .card-logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reset-password-section .card-header .card-logo img {
  width: auto;
  max-width: 155px;
  max-height: 55px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .reset-password-section .card-header .card-logo img {
    max-width: 135px;
    max-height: 48px;
  }
}
.reset-password-section .card-header {
  /*================================*
  * Icon
  *=================================*/
}
.reset-password-section .card-header .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border: 1px solid rgba(23, 114, 69, 0.1);
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reset-password-section .card-header .icon i {
  font-size: 23px;
  line-height: 1;
}
@media (max-width: 767px) {
  .reset-password-section .card-header .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 14px;
  }
  .reset-password-section .card-header .icon i {
    font-size: 21px;
  }
}
.reset-password-section .card-header {
  /*================================*
  * Heading
  *=================================*/
}
.reset-password-section .card-header h2 {
  margin: 0 0 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.reset-password-section .card-header {
  /*================================*
  * Description
  *=================================*/
}
.reset-password-section .card-header p {
  max-width: 400px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.reset-password-section {
  /*================================*
  * Reset Password Form
  *=================================*/
}
.reset-password-section .reset-password-form {
  width: 100%;
}
.reset-password-section {
  /*================================*
  * Form Group
  *=================================*/
}
.reset-password-section .form-group {
  margin: 0 0 18px;
}
.reset-password-section .form-group > label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.reset-password-section {
  /*================================*
  * Input Group
  * Existing input design unchanged
  *=================================*/
}
.reset-password-section .input-group {
  position: relative;
  width: 100%;
}
.reset-password-section .input-group > i {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 2;
  color: #177245;
  font-size: 17px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.reset-password-section .input-group input {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px 0 46px;
  border: 1px solid #ddd;
  border-radius: 8px !important;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.reset-password-section .input-group input::placeholder {
  color: rgba(85, 85, 85, 0.18);
}
.reset-password-section .input-group input:hover {
  border-color: rgba(221, 221, 221, 0.05);
}
.reset-password-section .input-group input:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.1);
}
.reset-password-section .input-group.input-group--password input {
  padding-right: 48px;
}
.reset-password-section {
  /*================================*
  * Password Toggle
  *=================================*/
}
.reset-password-section .password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.reset-password-section .password-toggle i {
  position: static;
  font-size: 17px;
  line-height: 1;
  transform: none;
  pointer-events: none;
}
.reset-password-section .password-toggle:hover {
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}
.reset-password-section .password-toggle:focus-visible {
  outline: 2px solid rgba(23, 114, 69, 0.2);
  outline-offset: 1px;
}
.reset-password-section {
  /*================================*
  * Password Info
  *=================================*/
}
.reset-password-section .password-info {
  margin: 2px 0 18px;
  padding: 14px;
  border: 1px solid rgba(23, 114, 69, 0.12);
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.035);
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.reset-password-section .password-info .password-info__icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}
.reset-password-section .password-info .password-info__icon i {
  font-size: 17px;
}
.reset-password-section .password-info .password-info__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.reset-password-section .password-info .password-info__content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.55;
}
.reset-password-section {
  /*================================*
  * Submit Button
  *=================================*/
}
.reset-password-section .reset-submit {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid #177245;
  border-radius: 8px !important;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.reset-password-section .reset-submit i {
  font-size: 17px;
}
.reset-password-section .reset-submit:hover {
  border-color: rgba(23, 114, 69, 0.8);
  background: rgba(23, 114, 69, 0.8);
  color: #fff;
}
.reset-password-section .reset-submit:active {
  transform: translateY(1px);
}
.reset-password-section .reset-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.15);
}
@media (max-width: 767px) {
  .reset-password-section .reset-submit {
    min-height: 49px;
  }
}
.reset-password-section {
  /*================================*
  * Card Footer
  *=================================*/
}
.reset-password-section .card-footer {
  margin-top: 24px;
  padding: 19px 0 0;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  background: transparent;
  text-align: center;
}
.reset-password-section .card-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.reset-password-section .card-footer a i {
  font-size: 16px;
  line-height: 1;
}
.reset-password-section .card-footer a:hover {
  color: #D4AF37;
}
@media (max-width: 767px) {
  .reset-password-section .card-footer {
    margin-top: 20px;
    padding-top: 17px;
  }
}
.reset-password-section {
  /*================================*
  * Responsive
  *=================================*/
}
@media (min-width: 768px) and (max-width: 991px) {
  .reset-password-section .input-group input {
    height: 50px;
  }
}
@media (max-width: 767px) {
  .reset-password-section .form-group {
    margin-bottom: 17px;
  }
  .reset-password-section .input-group > i {
    left: 14px;
    font-size: 16px;
  }
  .reset-password-section .input-group input {
    height: 48px;
    padding-left: 42px;
  }
  .reset-password-section .input-group.input-group--password input {
    padding-right: 44px;
  }
  .reset-password-section .password-toggle {
    right: 7px;
    width: 30px;
    height: 30px;
  }
  .reset-password-section .password-info {
    margin-bottom: 17px;
    padding: 12px;
  }
  .reset-password-section .reset-submit {
    min-height: 49px;
  }
  .reset-password-section .card-footer {
    margin-top: 20px;
    padding-top: 17px;
  }
}

/*================================*
* Verify Email Section
*=================================*/
.verify-email-section {
  min-height: 100vh;
  padding: 70px 0;
  background: #F2F4F7;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .verify-email-section {
    padding: 60px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .verify-email-section {
    padding: 50px 0;
  }
}
@media (max-width: 767px) {
  .verify-email-section {
    padding: 30px 0;
  }
}
.verify-email-section {
  /*================================*
  * Verify Email Card
  *=================================*/
}
.verify-email-section .verify-email-card {
  width: 100%;
  padding: 40px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(16, 26, 35, 0.07);
}
@media (min-width: 768px) and (max-width: 991px) {
  .verify-email-section .verify-email-card {
    padding: 32px;
  }
}
@media (max-width: 767px) {
  .verify-email-section .verify-email-card {
    padding: 25px 18px;
    border-radius: 11px;
  }
}
.verify-email-section {
  /*================================*
  * Card Header
  *=================================*/
}
.verify-email-section .card-header {
  margin-bottom: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  /*================================*
  * Logo
  *=================================*/
}
.verify-email-section .card-header .card-logo {
  margin-bottom: 18px;
}
.verify-email-section .card-header .card-logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.verify-email-section .card-header .card-logo img {
  width: auto;
  max-width: 155px;
  max-height: 55px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .verify-email-section .card-header .card-logo img {
    max-width: 135px;
    max-height: 48px;
  }
}
.verify-email-section .card-header {
  /*================================*
  * Header Icon
  *=================================*/
}
.verify-email-section .card-header .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border: 1px solid rgba(23, 114, 69, 0.1);
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.verify-email-section .card-header .icon i {
  font-size: 23px;
  line-height: 1;
}
@media (max-width: 767px) {
  .verify-email-section .card-header .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 14px;
  }
  .verify-email-section .card-header .icon i {
    font-size: 21px;
  }
}
.verify-email-section .card-header {
  /*================================*
  * Heading
  *=================================*/
}
.verify-email-section .card-header h2 {
  margin: 0 0 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.verify-email-section .card-header {
  /*================================*
  * Description
  *=================================*/
}
.verify-email-section .card-header p {
  max-width: 410px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.verify-email-section {
  /*================================*
  * Verification Content
  *=================================*/
}
.verify-email-section .verification-content {
  width: 100%;
}
.verify-email-section {
  /*================================*
  * Verification Message
  *=================================*/
}
.verify-email-section .verification-message {
  padding: 14px;
  border: 1px solid rgba(23, 114, 69, 0.12);
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.035);
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.verify-email-section .verification-message .verification-message__icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}
.verify-email-section .verification-message .verification-message__icon i {
  font-size: 17px;
  line-height: 1;
}
.verify-email-section .verification-message .verification-message__content {
  min-width: 0;
}
.verify-email-section .verification-message .verification-message__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.verify-email-section .verification-message .verification-message__content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.55;
}
.verify-email-section {
  /*================================*
  * Resend Form
  *=================================*/
}
.verify-email-section .resend-form {
  margin: 16px 0 0;
}
.verify-email-section {
  /*================================*
  * Resend Button
  *=================================*/
}
.verify-email-section .resend-btn {
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid #ddd;
  border-radius: 8px !important;
  background: #fff;
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.verify-email-section .resend-btn i {
  color: #177245;
  font-size: 17px;
  transition: transform 0.2s ease;
}
.verify-email-section .resend-btn:hover {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.035);
  color: #177245;
}
.verify-email-section .resend-btn:hover i {
  transform: rotate(45deg);
}
.verify-email-section .resend-btn:active i {
  transform: rotate(180deg);
}
.verify-email-section .resend-btn:focus-visible {
  outline: none;
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.1);
}
@media (max-width: 767px) {
  .verify-email-section .resend-btn {
    min-height: 48px;
  }
}
.verify-email-section {
  /*================================*
  * Card Footer
  *=================================*/
}
.verify-email-section .card-footer {
  margin-top: 24px;
  padding: 19px 0 0;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /*================================*
  * Logout Form
  *=================================*/
}
.verify-email-section .card-footer .logout-form {
  margin: 0;
}
.verify-email-section .card-footer .logout-form button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: color 0.2s ease;
}
.verify-email-section .card-footer .logout-form button i {
  font-size: 16px;
  line-height: 1;
}
.verify-email-section .card-footer .logout-form button:hover {
  color: #dc3545;
}
.verify-email-section .card-footer .logout-form button:focus-visible {
  outline: 2px solid rgba(23, 114, 69, 0.2);
  outline-offset: 3px;
  border-radius: 4px;
}
.verify-email-section .card-footer {
  /*================================*
  * Back To Login
  *=================================*/
}
.verify-email-section .card-footer > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.verify-email-section .card-footer > a i {
  font-size: 16px;
  line-height: 1;
}
.verify-email-section .card-footer > a:hover {
  color: #D4AF37;
}
@media (max-width: 767px) {
  .verify-email-section .card-footer {
    margin-top: 20px;
    padding-top: 17px;
    flex-direction: column;
    gap: 12px;
  }
}

.global-tracking {
  padding: 30px 0 60px;
}
.global-tracking .tracking-hero {
  margin-bottom: 24px;
}
.global-tracking .tracking-hero__content {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
}
.global-tracking .tracking-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 114, 69, 0.1);
  border-radius: 16px;
  color: #177245;
}
.global-tracking .tracking-icon i {
  font-size: 22px;
}
.global-tracking .tracking-hero__text .tracking-eyebrow {
  display: inline-block;
  margin-bottom: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #177245;
  letter-spacing: 0.5px;
}
.global-tracking .tracking-hero__text h1 {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #0D2B5A;
}
.global-tracking .tracking-hero__text p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #555555;
}
.global-tracking {
  /*
  |--------------------------------------------------------------------------
  | Search Section
  |--------------------------------------------------------------------------
  */
}
.global-tracking .tracking-search-section {
  margin-bottom: 24px;
}
.global-tracking .tracking-search-card {
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
}
.global-tracking .tracking-search-header {
  margin-bottom: 22px;
}
.global-tracking .tracking-search-header h2 {
  margin: 0 0 7px;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #0D2B5A;
}
.global-tracking .tracking-search-header p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #555555;
}
.global-tracking .tracking-search-header p strong {
  font-weight: 600;
  color: #0D2B5A;
}
.global-tracking .tracking-search-form {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.global-tracking .tracking-input-wrapper {
  position: relative;
  flex: 1;
}
.global-tracking .tracking-input-wrapper > i {
  position: absolute;
  top: 50%;
  left: 18px;
  font-size: 15px;
  color: #ddd;
  pointer-events: none;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.global-tracking .tracking-input-wrapper input {
  width: 100%;
  height: 54px;
  padding: 0 18px 0 46px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: #0D2B5A;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  outline: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.global-tracking .tracking-input-wrapper input:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}
.global-tracking .tracking-input-wrapper input::-webkit-input-placeholder {
  color: #ddd;
  opacity: 1;
}
.global-tracking .tracking-input-wrapper input:-moz-placeholder {
  color: #ddd;
  opacity: 1;
}
.global-tracking .tracking-input-wrapper input::-moz-placeholder {
  color: #ddd;
  opacity: 1;
}
.global-tracking .tracking-input-wrapper input:-ms-input-placeholder {
  color: #ddd;
  opacity: 1;
}
.global-tracking .tracking-search-btn {
  min-width: 175px;
  height: 54px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 10px;
  background: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.global-tracking .tracking-search-btn:hover {
  background: #0D2B5A;
}
.global-tracking .tracking-search-btn:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}
.global-tracking .tracking-search-btn .button-icon {
  font-size: 14px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.global-tracking .tracking-search-btn:hover .button-icon {
  -webkit-transform: translateX(3px);
  -ms-transform: translateX(3px);
  transform: translateX(3px);
}
.global-tracking .tracking-search-btn .button-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: globalTrackingSpin 0.7s linear infinite;
}
.global-tracking .tracking-search-btn.is-loading .button-text,
.global-tracking .tracking-search-btn.is-loading .button-icon {
  display: none;
}
.global-tracking .tracking-search-btn.is-loading .button-loader {
  display: block;
}
.global-tracking .tracking-validation-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #dc3545;
}
.global-tracking .tracking-validation-error i {
  font-size: 14px;
}
.global-tracking {
  /*
  |--------------------------------------------------------------------------
  | Alerts
  |--------------------------------------------------------------------------
  */
}
.global-tracking .tracking-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.global-tracking .tracking-alert i {
  flex: 0 0 auto;
  font-size: 16px;
}
.global-tracking .tracking-alert--error {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.15);
}
.global-tracking .tracking-alert--success {
  color: #198754;
  background: rgba(25, 135, 84, 0.08);
  border: 1px solid rgba(25, 135, 84, 0.15);
}
.global-tracking {
  /*
  |--------------------------------------------------------------------------
  | Result Section
  |--------------------------------------------------------------------------
  */
}
.global-tracking .tracking-result-section {
  scroll-margin-top: 30px;
}
.global-tracking .tracking-request-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
}
.global-tracking .tracking-request-info,
.global-tracking .tracking-current-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.global-tracking .tracking-request-info > span,
.global-tracking .tracking-current-status > span {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #555555;
}
.global-tracking .tracking-request-info strong,
.global-tracking .tracking-current-status strong {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0D2B5A;
}
.global-tracking .tracking-current-status {
  text-align: right;
}
.global-tracking .tracking-current-status strong {
  color: #177245;
}
.global-tracking .tracking-current-status.is-cancelled strong {
  color: #dc3545;
}
.global-tracking {
  /*
  |--------------------------------------------------------------------------
  | Progress Card
  |--------------------------------------------------------------------------
  */
}
.global-tracking .tracking-progress-card {
  margin-bottom: 24px;
  padding: 28px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
}
.global-tracking .tracking-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.global-tracking .tracking-progress-header h2 {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #0D2B5A;
}
.global-tracking .tracking-progress-header p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #555555;
}
.global-tracking .tracking-progress-percentage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.1);
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #177245;
}
.global-tracking .shipment-progress-wrapper {
  position: relative;
}
.global-tracking .shipment-progress-line {
  position: absolute;
  top: 23px;
  left: 8.33%;
  width: 83.34%;
  height: 2px;
  background: #eaecf0;
  overflow: hidden;
}
.global-tracking .shipment-progress-line__active {
  height: 100%;
  background: #177245;
  -webkit-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s;
}
.global-tracking .shipment-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}
.global-tracking .shipment-step {
  text-align: center;
}
.global-tracking .shipment-step__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F4F7;
  border: 2px solid #eaecf0;
  border-radius: 50%;
  color: #ddd;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.global-tracking .shipment-step__icon i {
  font-size: 16px;
}
.global-tracking .shipment-step h4 {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #0D2B5A;
}
.global-tracking .shipment-step p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}
.global-tracking .shipment-step.is-completed .shipment-step__icon {
  background: #177245;
  border-color: #177245;
  color: #fff;
}
.global-tracking .shipment-step.is-current .shipment-step__icon {
  background: #177245;
  border-color: #177245;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(23, 114, 69, 0.1);
}
.global-tracking .shipment-step.is-current h4 {
  color: #177245;
}
.global-tracking {
  /*
  |--------------------------------------------------------------------------
  | Cancelled Message
  |--------------------------------------------------------------------------
  */
}
.global-tracking .tracking-cancelled-message {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 22px 24px;
  background: rgba(220, 53, 69, 0.06);
  border: 1px solid rgba(220, 53, 69, 0.15);
  border-radius: 16px;
}
.global-tracking .tracking-cancelled-message__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 50%;
  color: #dc3545;
}
.global-tracking .tracking-cancelled-message__icon i {
  font-size: 20px;
}
.global-tracking .tracking-cancelled-message h3 {
  margin: 0 0 5px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #dc3545;
}
.global-tracking .tracking-cancelled-message p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}
.global-tracking {
  /*
  |--------------------------------------------------------------------------
  | Shipment Details
  |--------------------------------------------------------------------------
  */
}
.global-tracking .tracking-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.global-tracking .tracking-details-card {
  padding: 26px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
}
.global-tracking .tracking-details-card h3 {
  margin: 0 0 20px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0D2B5A;
}
.global-tracking .tracking-details-card--action {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.global-tracking .tracking-details-card--action h3 {
  margin-bottom: 8px;
}
.global-tracking .tracking-details-card--action p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #555555;
}
.global-tracking .tracking-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #eaecf0;
}
.global-tracking .tracking-detail-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.global-tracking .tracking-detail-row span {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #555555;
}
.global-tracking .tracking-detail-row strong {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  color: #0D2B5A;
  word-break: break-word;
}
.global-tracking .carrier-tracking-btn {
  width: max-content;
  max-width: 100%;
  margin-top: 25px;
  padding: 13px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 9px;
  background: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.global-tracking .carrier-tracking-btn i {
  font-size: 14px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.global-tracking .carrier-tracking-btn:hover {
  background: #0D2B5A;
  color: #fff;
}
.global-tracking .carrier-tracking-btn:hover i {
  -webkit-transform: translate(2px, -2px);
  -ms-transform: translate(2px, -2px);
  transform: translate(2px, -2px);
}
.global-tracking {
  /*
  |--------------------------------------------------------------------------
  | Shipment Notes
  |--------------------------------------------------------------------------
  */
}
.global-tracking .tracking-notes {
  padding: 24px 26px;
  background: rgba(13, 202, 240, 0.06);
  border: 1px solid rgba(13, 202, 240, 0.15);
  border-radius: 16px;
}
.global-tracking .tracking-notes h3 {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0D2B5A;
}
.global-tracking .tracking-notes h3 i {
  font-size: 18px;
  color: #0dcaf0;
}
.global-tracking .tracking-notes p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #555555;
  white-space: pre-line;
}
.global-tracking {
  /*
  |--------------------------------------------------------------------------
  | Animation
  |--------------------------------------------------------------------------
  */
}
@keyframes globalTrackingSpin {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.global-tracking {
  /*
  |--------------------------------------------------------------------------
  | Responsive
  |--------------------------------------------------------------------------
  */
}
@media (min-width: 992px) and (max-width: 1199px) {
  .global-tracking .shipment-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 32px;
  }
  .global-tracking .shipment-progress-line {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .global-tracking {
    padding: 24px 0 45px;
  }
  .global-tracking .tracking-hero__content {
    padding: 24px;
  }
  .global-tracking .tracking-search-card,
  .global-tracking .tracking-progress-card,
  .global-tracking .tracking-details-card {
    padding: 22px;
  }
  .global-tracking .tracking-request-card {
    padding: 20px 22px;
  }
  .global-tracking .tracking-details-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
@media (max-width: 767px) {
  .global-tracking {
    padding: 20px 0 40px;
  }
  .global-tracking .tracking-hero {
    margin-bottom: 18px;
  }
  .global-tracking .tracking-hero__content {
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }
  .global-tracking .tracking-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
  }
  .global-tracking .tracking-icon i {
    font-size: 18px;
  }
  .global-tracking .tracking-hero__text h1 {
    font-size: 20px;
  }
  .global-tracking .tracking-hero__text p {
    font-size: 14px;
  }
  .global-tracking .tracking-eyebrow {
    font-size: 14px;
  }
  .global-tracking .tracking-search-card {
    padding: 20px;
  }
  .global-tracking .tracking-search-header {
    margin-bottom: 18px;
  }
  .global-tracking .tracking-search-header h2 {
    font-size: 18px;
  }
  .global-tracking .tracking-search-form {
    flex-direction: column;
  }
  .global-tracking .tracking-input-wrapper input {
    height: 52px;
    font-size: 14px;
  }
  .global-tracking .tracking-search-btn {
    width: 100%;
    min-width: 100%;
    height: 52px;
  }
  .global-tracking .tracking-request-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
  }
  .global-tracking .tracking-current-status {
    width: 100%;
    text-align: left;
  }
  .global-tracking .tracking-progress-card {
    padding: 20px;
  }
  .global-tracking .tracking-progress-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
  }
  .global-tracking .tracking-progress-header h2 {
    font-size: 18px;
  }
  .global-tracking .shipment-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 14px;
  }
  .global-tracking .shipment-step__icon {
    width: 42px;
    height: 42px;
  }
  .global-tracking .shipment-step h4 {
    font-size: 14px;
  }
  .global-tracking .shipment-step p {
    font-size: 14px;
  }
  .global-tracking .tracking-details-grid {
    gap: 16px;
    margin-bottom: 18px;
  }
  .global-tracking .tracking-details-card {
    padding: 20px;
  }
  .global-tracking .tracking-details-card h3 {
    font-size: 17px;
  }
  .global-tracking .tracking-detail-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 12px 0;
  }
  .global-tracking .tracking-detail-row strong {
    text-align: left;
  }
  .global-tracking .carrier-tracking-btn {
    width: 100%;
    justify-content: center;
  }
  .global-tracking .tracking-notes {
    padding: 20px;
  }
  .global-tracking .tracking-notes h3 {
    font-size: 17px;
  }
  .global-tracking .tracking-cancelled-message {
    align-items: flex-start;
    padding: 20px;
  }
  .global-tracking .tracking-cancelled-message h3 {
    font-size: 17px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .global-tracking .tracking-hero__content {
    flex-direction: column;
  }
  .global-tracking .tracking-hero__text {
    width: 100%;
  }
}

/*================================*
* Users - All Users
*=================================*/
.users-page {
  width: 100%;
}

/*================================*
* Page Header
*=================================*/
.users-page__header {
  margin-bottom: 28px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .users-page__header {
    margin-bottom: 24px;
  }
}
@media (max-width: 767px) {
  .users-page__header {
    margin-bottom: 20px;
  }
}

.users-page__header-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .users-page__header-content {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

.users-page__heading .users-page__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.users-page__heading h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .users-page__heading h1 {
    font-size: 22px;
  }
}
.users-page__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Header Actions
*=================================*/
.users-page__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .users-page__actions {
    width: 100%;
  }
}

.users-filter-btn,
.users-primary-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.users-filter-btn i,
.users-primary-btn i {
  font-size: 18px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .users-filter-btn,
  .users-primary-btn {
    min-height: 40px;
    padding: 0 14px;
  }
}
@media (max-width: 767px) {
  .users-filter-btn,
  .users-primary-btn {
    flex: 1;
  }
}

.users-filter-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
  cursor: pointer;
}
.users-filter-btn:hover, .users-filter-btn.active {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
}

.users-primary-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.users-primary-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
  box-shadow: 0 5px 15px rgba(23, 114, 69, 0.18);
}

/*================================*
* Statistics
*=================================*/
.users-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .users-stats {
    gap: 16px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .users-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .users-stats {
    gap: 14px;
  }
}
@media (max-width: 767px) {
  .users-stats {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
  }
}

.user-stat-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.user-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(16, 26, 35, 0.06);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .user-stat-card {
    padding: 18px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .user-stat-card {
    padding: 16px;
  }
}
@media (max-width: 767px) {
  .user-stat-card {
    padding: 15px;
  }
}

.user-stat-card__icon {
  width: 47px;
  height: 47px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 47px;
}
.user-stat-card__icon i {
  font-size: 22px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .user-stat-card__icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
  }
  .user-stat-card__icon i {
    font-size: 20px;
  }
}

.user-stat-card__icon--total {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}

.user-stat-card__icon--active {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

.user-stat-card__icon--admins {
  background: rgba(255, 193, 7, 0.12);
  color: rgba(255, 193, 7, 0.15);
}

.user-stat-card__icon--online {
  background: rgba(13, 202, 240, 0.11);
  color: rgba(13, 202, 240, 0.15);
}

.user-stat-card__content {
  min-width: 0;
}
.user-stat-card__content span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.user-stat-card__content strong {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 768px) and (max-width: 991px) {
  .user-stat-card__content strong {
    font-size: 22px;
  }
}
.user-stat-card__content small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.user-stat-card__content small i {
  color: #198754;
  font-size: 14px;
}

/*================================*
* Filter Panel
*=================================*/
.users-filter-panel {
  display: none;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
  animation: usersFilterShow 0.2s ease;
}
.users-filter-panel.is-open {
  display: block;
}
@media (max-width: 767px) {
  .users-filter-panel {
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 10px;
  }
}

@keyframes usersFilterShow {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.users-filter-group label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.users-filter-input {
  position: relative;
}
.users-filter-input i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #555555;
  font-size: 18px;
  pointer-events: none;
}
.users-filter-input input {
  width: 100%;
  height: 42px;
  padding: 0 13px 0 40px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: 0.2s ease;
}
.users-filter-input input:focus {
  outline: none;
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}
.users-filter-input input::placeholder {
  color: rgba(85, 85, 85, 0.65);
}

.users-filter-group select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s ease;
}
.users-filter-group select:focus {
  outline: none;
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

.users-filter-submit {
  width: 100%;
  min-height: 42px;
  border: 1px solid #177245;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}
.users-filter-submit i {
  font-size: 17px;
}
.users-filter-submit:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
}

/*================================*
* Table Card
*=================================*/
.users-table-card {
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
}
@media (max-width: 767px) {
  .users-table-card {
    border-radius: 10px;
  }
}

.users-table-card__header {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .users-table-card__header {
    padding: 18px;
  }
}
@media (max-width: 767px) {
  .users-table-card__header {
    padding: 16px;
    align-items: flex-start;
    flex-direction: column;
  }
}

.users-table-card__heading h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
@media (min-width: 768px) and (max-width: 991px) {
  .users-table-card__heading h2 {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .users-table-card__heading h2 {
    font-size: 17px;
  }
}
.users-table-card__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .users-table-card__heading p {
    font-size: 14px;
  }
}

.users-table-card__tools {
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .users-table-card__tools {
    width: 100%;
  }
}

.users-count {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(23, 114, 69, 0.15);
  border-radius: 6px;
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}

/*================================*
* Table Wrapper
*=================================*/
.users-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ddd rgba(242, 244, 247, 0.7);
}
.users-table-wrapper::-webkit-scrollbar {
  height: 7px;
}
.users-table-wrapper::-webkit-scrollbar-track {
  background: rgba(242, 244, 247, 0.7);
  border-radius: 10px;
}
.users-table-wrapper::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 10px;
}
.users-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(221, 221, 221, 0.12);
}

/*================================*
* Users Table
*=================================*/
.users-table {
  width: 100% !important;
  min-width: 900px;
  margin: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
}
.users-table thead th {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.08);
  background: rgba(242, 244, 247, 0.55);
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}
.users-table thead th:last-child {
  text-align: right;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .users-table thead th {
    padding: 13px 14px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .users-table thead th {
    padding: 12px 13px;
  }
}
.users-table tbody tr {
  transition: background-color 0.2s ease;
}
.users-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.025);
}
.users-table tbody tr:last-child td {
  border-bottom: 0;
}
.users-table tbody td {
  padding: 15px 16px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.065);
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.users-table tbody td:last-child {
  text-align: right;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .users-table tbody td {
    padding: 14px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .users-table tbody td {
    padding: 13px;
    font-size: 14px;
  }
}

/*================================*
* User Profile
*=================================*/
.user-profile {
  min-width: 250px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.user-profile__avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  font-size: 14px;
  font-weight: 700;
}
.user-profile__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.user-profile__info {
  min-width: 0;
}
.user-profile__info strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.user-profile__info span {
  display: block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

/*================================*
* Role
*=================================*/
.user-role {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.user-role--admin {
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
}

.user-role--staff {
  background: rgba(13, 202, 240, 0.1);
  color: rgba(13, 202, 240, 0.15);
}

.user-role--client {
  background: rgba(25, 135, 84, 0.09);
  color: rgba(25, 135, 84, 0.8);
}

.user-role--default {
  background: rgba(16, 26, 35, 0.06);
  color: #555555;
}

/*================================*
* Phone
*=================================*/
.user-phone {
  color: #555555;
  font-size: 14px;
  font-weight: 500;
}

/*================================*
* Status
*=================================*/
.user-status {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.user-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.user-status--active {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}

.user-status--inactive {
  background: rgba(16, 26, 35, 0.06);
  color: #555555;
}

.user-status--pending {
  background: rgba(255, 193, 7, 0.13);
  color: rgba(255, 193, 7, 0.2);
}

.user-status--suspended {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}

.user-status--default {
  background: rgba(16, 26, 35, 0.06);
  color: #555555;
}

/*================================*
* Date
*=================================*/
.user-date {
  color: #555555;
  font-size: 14px;
  font-weight: 500;
}

/*================================*
* User Actions
*=================================*/
.user-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.user-view-btn,
.user-edit-btn,
.user-delete-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.user-view-btn i,
.user-edit-btn i,
.user-delete-btn i {
  font-size: 18px;
}

.user-view-btn:hover {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}

.user-edit-btn:hover {
  border-color: #0dcaf0;
  background: rgba(13, 202, 240, 0.07);
  color: #0dcaf0;
}

.user-delete-btn:hover {
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.07);
  color: #dc3545;
}

.user-delete-form {
  margin: 0;
  padding: 0;
}

/*================================*
* Empty State
*=================================*/
.users-empty {
  height: 300px;
  text-align: center !important;
}

.users-empty__content {
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.users-empty__icon {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  display: flex;
  align-items: center;
  justify-content: center;
}
.users-empty__icon i {
  font-size: 24px;
}

.users-empty__content h3 {
  margin: 0 0 7px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.users-empty__content p {
  margin: 0 0 16px;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.users-empty__content .users-primary-btn {
  min-height: 40px;
}

/*================================*
* Table Footer
*=================================*/
.users-table-card__footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .users-table-card__footer {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
  }
}

.users-pagination-info {
  color: #555555;
  font-size: 14px;
}
.users-pagination-info strong {
  color: #0D2B5A;
  font-weight: 600;
}

/*================================*
* Pagination
*=================================*/
.users-pagination nav {
  display: flex;
  align-items: center;
}
.users-pagination .pagination {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.users-pagination .page-item .page-link {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(16, 26, 35, 0.1) !important;
  border-radius: 6px !important;
  background: #fff;
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none !important;
  transition: 0.2s ease;
}
.users-pagination .page-item .page-link:hover {
  border-color: #177245 !important;
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
}
.users-pagination .page-item.active .page-link {
  border-color: #177245 !important;
  background: #177245;
  color: #fff;
}
.users-pagination .page-item.active .page-link:hover {
  background: #177245;
  color: #fff;
}
.users-pagination .page-item.disabled .page-link {
  opacity: 0.45;
  cursor: not-allowed;
}

/*================================*
* SweetAlert Delete Buttons
*=================================*/
.swal-delete-confirm {
  border-radius: 7px !important;
  background: #dc3545 !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.swal-delete-cancel {
  border-radius: 7px !important;
  background: #fff !important;
  color: #0D2B5A !important;
  border: 1px solid #ddd !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/*================================*
* Responsive - XL
*=================================*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .users-page__header {
    margin-bottom: 24px;
  }
  .users-stats {
    margin-bottom: 20px;
  }
}
/*================================*
* Responsive - LG
*=================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .user-stat-card__content strong {
    font-size: 22px;
  }
}
/*================================*
* Responsive - MD
*=================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .users-page__header-content {
    flex-direction: column;
    align-items: stretch;
  }
  .users-page__actions {
    justify-content: flex-start;
  }
  .users-filter-panel .row {
    row-gap: 14px;
  }
}
/*================================*
* Responsive - XS
*=================================*/
@media (max-width: 767px) {
  .users-page__header {
    margin-bottom: 20px;
  }
  .users-page__actions {
    gap: 8px;
  }
  .users-filter-btn,
  .users-primary-btn {
    padding: 0 12px;
  }
  .users-table-card {
    border-radius: 10px;
  }
  .users-table {
    min-width: 900px;
  }
  .users-table-card__footer {
    overflow: hidden;
  }
  .users-pagination {
    width: 100%;
    overflow-x: auto;
  }
  .users-pagination .pagination {
    width: max-content;
  }
}
/*================================*
* Users - User Details
*=================================*/
.user-details-page {
  width: 100%;
}

/*================================*
* Page Header
*=================================*/
.user-details-page__header {
  margin-bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .user-details-page__header {
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .user-details-page__header {
    align-items: flex-start;
  }
}
@media (max-width: 767px) {
  .user-details-page__header {
    margin-bottom: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
}

/*================================*
* Eyebrow
*=================================*/
.user-details-page__eyebrow {
  display: inline-block;
  margin-bottom: 9px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*================================*
* Profile Header
*=================================*/
.user-details-profile {
  display: flex;
  align-items: center;
  gap: 13px;
}
@media (max-width: 767px) {
  .user-details-profile {
    align-items: flex-start;
  }
}

.user-details-profile__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  font-size: 14px;
  font-weight: 700;
}
.user-details-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .user-details-profile__avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 14px;
  }
}

.user-details-profile__content {
  min-width: 0;
}

.user-details-profile__title {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.user-details-profile__title h1 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .user-details-profile__title h1 {
    font-size: 24px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .user-details-profile__title h1 {
    font-size: 22px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .user-details-profile__title h1 {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .user-details-profile__title h1 {
    font-size: 20px;
  }
}

.user-details-profile__content > p {
  margin: 5px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .user-details-profile__content > p {
    font-size: 14px;
  }
}

/*================================*
* Status
*=================================*/
.user-details-status {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.user-details-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.user-details-status--active {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}

.user-details-status--inactive {
  background: rgba(16, 26, 35, 0.07);
  color: #555555;
}

.user-details-status--suspended {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}

/*================================*
* Header Actions
*=================================*/
.user-details-page__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .user-details-page__actions {
    width: 100%;
  }
}

.user-details-back-btn,
.user-details-edit-btn {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.user-details-back-btn i,
.user-details-edit-btn i {
  font-size: 16px;
}
@media (max-width: 767px) {
  .user-details-back-btn,
  .user-details-edit-btn {
    flex: 1;
  }
}

.user-details-back-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.user-details-back-btn:hover {
  border-color: #177245;
  color: #177245;
}

.user-details-edit-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.user-details-edit-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}

/*================================*
* Summary
*=================================*/
.user-details-summary {
  min-height: 60px;
  margin-bottom: 20px;
  padding: 11px 17px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 9px;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.025);
}
@media (min-width: 768px) and (max-width: 991px) {
  .user-details-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 767px) {
  .user-details-summary {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 11px;
  }
}

.user-details-summary__item {
  padding: 3px 16px;
  border-right: 1px solid rgba(16, 26, 35, 0.07);
}
.user-details-summary__item:last-child {
  border-right: 0;
}
.user-details-summary__item span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.35;
}
.user-details-summary__item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.user-details-summary__item .is-active {
  color: #198754;
}
.user-details-summary__item .is-inactive {
  color: #dc3545;
}
@media (min-width: 768px) and (max-width: 991px) {
  .user-details-summary__item:nth-child(2) {
    border-right: 0;
  }
  .user-details-summary__item:nth-child(-n+2) {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  }
}
@media (max-width: 767px) {
  .user-details-summary__item {
    padding: 0 0 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(16, 26, 35, 0.06) !important;
  }
  .user-details-summary__item:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
}

/*================================*
* Main Layout
*=================================*/
.user-details-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .user-details-layout {
    grid-template-columns: minmax(0, 1fr) 315px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .user-details-layout {
    grid-template-columns: minmax(0, 1fr) 295px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .user-details-layout {
    grid-template-columns: 1fr;
  }
}

.user-details-main,
.user-details-sidebar {
  min-width: 0;
}

.user-details-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.user-details-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*================================*
* Card
*=================================*/
.user-details-card {
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
}
@media (max-width: 767px) {
  .user-details-card {
    border-radius: 9px;
  }
}

.user-details-card__header {
  min-height: 67px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.user-details-card__header h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .user-details-card__header h2 {
    font-size: 18px;
  }
}
.user-details-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}
.user-details-card__header > i {
  color: #177245;
  font-size: 18px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .user-details-card__header {
    padding: 15px 16px;
  }
}

/*================================*
* Contact Information
*=================================*/
.user-details-info-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
@media (max-width: 767px) {
  .user-details-info-grid {
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 11px;
  }
}

.user-details-info-item {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.user-details-info-item:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.015);
}
.user-details-info-item span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.35;
}
.user-details-info-item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}

.user-details-info-item__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.user-details-info-item__icon i {
  font-size: 16px;
}

/*================================*
* Account Information
*=================================*/
.user-details-company-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 20px;
}
.user-details-company-grid > div span {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
  line-height: 1.35;
}
.user-details-company-grid > div strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.user-details-company-grid > div .is-active {
  color: #198754;
}
.user-details-company-grid > div .is-inactive {
  color: #dc3545;
}
.user-details-company-grid > div .is-suspended {
  color: #dc3545;
}
@media (max-width: 767px) {
  .user-details-company-grid {
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/*================================*
* Profile Information
*=================================*/
.user-details-profile-info {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}
@media (max-width: 767px) {
  .user-details-profile-info {
    padding: 16px;
  }
}

.user-details-profile-info__avatar {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.user-details-profile-info__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .user-details-profile-info__avatar {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    font-size: 14px;
  }
}

.user-details-profile-info__content {
  min-width: 0;
}
.user-details-profile-info__content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.user-details-profile-info__content span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}
.user-details-profile-info__content small {
  display: block;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
}

/*================================*
* Account
*=================================*/
.user-details-account {
  padding: 8px 20px 17px;
}
.user-details-account > div {
  padding: 13px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.user-details-account > div:last-child {
  border-bottom: 0;
}
.user-details-account > div span {
  color: #555555;
  font-size: 14px;
}
.user-details-account > div strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.user-details-account > div strong.is-active {
  color: #198754;
}
.user-details-account > div strong.is-inactive {
  color: #dc3545;
}
.user-details-account > div strong.is-suspended {
  color: #dc3545;
}
@media (max-width: 767px) {
  .user-details-account {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/*================================*
* Permissions / Role Access
*=================================*/
.user-details-permissions {
  padding: 8px 20px 17px;
}
@media (max-width: 767px) {
  .user-details-permissions {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.user-details-permissions > div {
  min-height: 46px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-details-permissions > div:last-child {
  border-bottom: 0;
}
.user-details-permissions > div > span:last-child {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}

.user-details-permission-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
}
.user-details-permission-icon i {
  font-size: 14px;
}

.user-details-permission-icon--success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

/*================================*
* Activity Timeline
*=================================*/
.user-details-activity {
  padding: 9px 20px 18px;
}
@media (max-width: 767px) {
  .user-details-activity {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.user-details-activity__item {
  position: relative;
  min-height: 58px;
  padding: 11px 0 11px 21px;
  border-left: 1px solid rgba(23, 114, 69, 0.18);
  display: flex;
  align-items: flex-start;
}
.user-details-activity__item:last-child {
  border-left-color: transparent;
}
.user-details-activity__item strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.user-details-activity__item span:not(.user-details-activity__dot) {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

.user-details-activity__dot {
  position: absolute;
  top: 15px;
  left: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #177245;
  box-shadow: 0 0 0 1px rgba(23, 114, 69, 0.18);
}

/*================================*
* Security Box
*=================================*/
.user-details-security {
  padding: 17px;
  border: 1px solid rgba(25, 135, 84, 0.13);
  border-radius: 9px;
  background: rgba(25, 135, 84, 0.035);
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.user-details-security span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
}
.user-details-security strong {
  display: block;
  margin-bottom: 5px;
  color: #198754;
  font-size: 14px;
  font-weight: 600;
}
.user-details-security p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.user-details-security__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
}
.user-details-security__icon i {
  font-size: 16px;
}

/*================================*
* Responsive - MD
*=================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .user-details-page__header {
    align-items: flex-start;
  }
  .user-details-layout {
    grid-template-columns: 1fr;
  }
  .user-details-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .user-details-security {
    height: 100%;
  }
  .user-details-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}
/*================================*
* Responsive - XS
*=================================*/
@media (max-width: 767px) {
  .user-details-page__header {
    flex-direction: column;
    align-items: stretch;
  }
  .user-details-page__actions {
    width: 100%;
  }
  .user-details-back-btn,
  .user-details-edit-btn {
    flex: 1;
  }
  .user-details-summary {
    grid-template-columns: 1fr;
  }
  .user-details-sidebar {
    display: flex;
    flex-direction: column;
  }
  .user-details-profile-info {
    align-items: flex-start;
  }
}
/*==============================================================
* Users - Add User
*==============================================================*/
.add-user-page {
  width: 100%;
}

/*==============================================================
* Page Header
*==============================================================*/
.add-user-page__header {
  margin-bottom: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .add-user-page__header {
    margin-bottom: 24px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .add-user-page__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
  }
}
@media (max-width: 767px) {
  .add-user-page__header {
    margin-bottom: 20px;
    gap: 15px;
  }
}

.add-user-page__heading .add-user-page__eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.add-user-page__heading h1 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
@media (max-width: 767px) {
  .add-user-page__heading h1 {
    font-size: 22px;
  }
}
.add-user-page__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*==============================================================
* Header Action
*==============================================================*/
.add-user-page__actions {
  flex-shrink: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .add-user-page__actions {
    width: 100%;
  }
}

.add-user-back-btn {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.add-user-back-btn i {
  font-size: 16px;
}
.add-user-back-btn:hover {
  border-color: #177245;
  color: #177245;
  box-shadow: 0 3px 12px rgba(23, 114, 69, 0.08);
}
@media (max-width: 767px) {
  .add-user-back-btn {
    width: 100%;
  }
}

/*==============================================================
* Validation Alert
*==============================================================*/
.add-user-validation-alert {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(220, 53, 69, 0.14);
  border-radius: 9px;
  background: rgba(220, 53, 69, 0.035);
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.add-user-validation-alert__icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
}
.add-user-validation-alert__icon i {
  font-size: 16px;
}
.add-user-validation-alert strong {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.add-user-validation-alert ul {
  margin: 0;
  padding-left: 17px;
}
.add-user-validation-alert li {
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.add-user-validation-alert li:last-child {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .add-user-validation-alert {
    padding: 12px;
  }
}

/*==============================================================
* Form Layout
*==============================================================*/
.add-user-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 20px;
  align-items: start;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .add-user-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .add-user-layout {
    grid-template-columns: minmax(0, 1fr) 285px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .add-user-layout {
    grid-template-columns: 1fr;
  }
}

.add-user-main,
.add-user-sidebar {
  min-width: 0;
}

.add-user-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.add-user-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*==============================================================
* Card
*==============================================================*/
.add-user-card {
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
}
@media (max-width: 767px) {
  .add-user-card {
    border-radius: 9px;
  }
}

.add-user-card__header {
  min-height: 67px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.add-user-card__header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.add-user-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}
.add-user-card__header > i {
  color: #177245;
  font-size: 18px;
}
@media (max-width: 767px) {
  .add-user-card__header {
    padding: 15px 16px;
  }
  .add-user-card__header h2 {
    font-size: 18px;
  }
}

.add-user-card__body {
  padding: 20px;
}
@media (max-width: 767px) {
  .add-user-card__body {
    padding: 16px;
  }
}

/*==============================================================
* Form Grid
*==============================================================*/
.add-user-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 16px;
}
@media (max-width: 767px) {
  .add-user-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/*==============================================================
* Form Fields
*==============================================================*/
.add-user-field {
  min-width: 0;
}
.add-user-field--full {
  grid-column: 1/-1;
}

.add-user-field > label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.add-user-field > label > span {
  margin-left: 2px;
  color: #dc3545;
}

.add-user-field__help {
  display: block;
  margin: 7px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*==============================================================
* Inputs
*==============================================================*/
.add-user-input {
  position: relative;
  width: 100%;
}
.add-user-input > i {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 2;
  color: #555555;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.add-user-input input,
.add-user-input select,
.add-user-input textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.add-user-input input:hover,
.add-user-input select:hover,
.add-user-input textarea:hover {
  border-color: rgba(221, 221, 221, 0.07);
}
.add-user-input input:focus,
.add-user-input select:focus,
.add-user-input textarea:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.add-user-input input::placeholder,
.add-user-input select::placeholder,
.add-user-input textarea::placeholder {
  color: rgba(85, 85, 85, 0.15);
}
.add-user-input input,
.add-user-input select {
  height: 42px;
  padding: 0 38px 0 37px;
  line-height: 1;
}
.add-user-input select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.add-user-input textarea {
  min-height: 115px;
  padding: 12px 13px 12px 37px;
  line-height: 1.55;
  resize: vertical;
}
.add-user-input .add-user-select-icon {
  position: absolute;
  top: 50%;
  right: 11px;
  left: auto;
  z-index: 2;
  color: #555555;
  font-size: 17px;
  transform: translateY(-50%);
  pointer-events: none;
}

/*==============================================================
* Password Toggle
*==============================================================*/
.add-user-password-toggle {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  transition: color 0.2s ease;
}
.add-user-password-toggle i {
  font-size: 15px;
}
.add-user-password-toggle:hover {
  color: #177245;
}
.add-user-password-toggle:focus-visible {
  outline: 2px solid rgba(23, 114, 69, 0.25);
  outline-offset: 2px;
}

/*==============================================================
* Form Error
*==============================================================*/
.form-error {
  display: block;
  margin-top: 5px;
  color: #dc3545;
  font-size: 14px;
  line-height: 1.4;
}

/*==============================================================
* Upload Box
*==============================================================*/
.add-user-upload {
  position: relative;
  min-height: 88px;
  padding: 13px 14px;
  border: 1px dashed rgba(23, 114, 69, 0.3);
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.025);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.add-user-upload input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.add-user-upload:hover {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.05);
}
.add-user-upload__icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}
.add-user-upload__icon i {
  font-size: 20px;
}
.add-user-upload__content {
  min-width: 0;
  flex: 1;
}
.add-user-upload__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.add-user-upload__content small {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.add-user-upload__button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .add-user-upload {
    align-items: flex-start;
  }
  .add-user-upload__button {
    display: none;
  }
}

/*==============================================================
* Password Info
*==============================================================*/
.add-user-password-info {
  margin-top: 18px;
  padding: 12px 13px;
  border: 1px solid rgba(23, 114, 69, 0.1);
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.035);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.add-user-password-info > i {
  color: #177245;
  font-size: 16px;
  flex: 0 0 auto;
}
.add-user-password-info strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.add-user-password-info p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*==============================================================
* Checkbox
*==============================================================*/
.add-user-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.add-user-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.add-user-checkbox__box {
  width: 19px;
  height: 19px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.add-user-checkbox__box i {
  font-size: 13px;
  opacity: 0;
}
input:checked + .add-user-checkbox__box {
  border-color: #177245;
  background: #177245;
}
input:checked + .add-user-checkbox__box i {
  opacity: 1;
}
.add-user-checkbox__content {
  min-width: 0;
}
.add-user-checkbox__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.add-user-checkbox__content small {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*==============================================================
* Custom Single Role Dropdown
*==============================================================*/
.add-user-role-dropdown {
  position: relative;
  width: 100%;
  /*----------------------------------------------------------
  Trigger
  ----------------------------------------------------------*/
}
.add-user-role-dropdown__trigger {
  position: relative;
  width: 100%;
  min-height: 42px;
  padding: 0 42px 0 37px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.add-user-role-dropdown__trigger:hover {
  border-color: rgba(221, 221, 221, 0.07);
}
.add-user-role-dropdown__trigger:focus, .add-user-role-dropdown__trigger[aria-expanded=true] {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.add-user-role-dropdown {
  /*----------------------------------------------------------
  Left Icon
  ----------------------------------------------------------*/
}
.add-user-role-dropdown__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 18px;
  height: 18px;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: none;
}
.add-user-role-dropdown__icon i {
  font-size: 16px;
  line-height: 1;
}
.add-user-role-dropdown {
  /*----------------------------------------------------------
  Selected Text
  ----------------------------------------------------------*/
}
.add-user-role-dropdown__selected {
  display: block;
  width: 100%;
  overflow: hidden;
  color: rgba(85, 85, 85, 0.05);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.add-user-role-dropdown__selected.has-selection {
  color: #0D2B5A;
  font-weight: 500;
}
.add-user-role-dropdown {
  /*----------------------------------------------------------
  Arrow
  ----------------------------------------------------------*/
}
.add-user-role-dropdown__arrow {
  position: absolute;
  top: 50%;
  right: 11px;
  color: #555555;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.add-user-role-dropdown {
  /*----------------------------------------------------------
  Dropdown Menu
  ----------------------------------------------------------*/
}
.add-user-role-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 999;
  width: 100%;
  max-height: 240px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid rgba(16, 26, 35, 0.09);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 26, 35, 0.12);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.add-user-role-dropdown__menu::-webkit-scrollbar {
  width: 5px;
}
.add-user-role-dropdown__menu::-webkit-scrollbar-track {
  background: transparent;
}
.add-user-role-dropdown__menu::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(16, 26, 35, 0.15);
}
.add-user-role-dropdown {
  /*----------------------------------------------------------
  Open
  ----------------------------------------------------------*/
}
.add-user-role-dropdown.is-open .add-user-role-dropdown__menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.add-user-role-dropdown.is-open .add-user-role-dropdown__arrow {
  transform: translateY(-50%) rotate(180deg);
}

/*==============================================================
* Single Role Option
*==============================================================*/
.add-user-role-option {
  position: relative;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.add-user-role-option:hover {
  background: rgba(23, 114, 69, 0.05);
}
.add-user-role-option {
  /*----------------------------------------------------------
  Hidden Radio
  ----------------------------------------------------------*/
}
.add-user-role-option input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  clip: rect(0 0 0 0);
  pointer-events: none;
}
.add-user-role-option {
  /*----------------------------------------------------------
  Radio Circle
  ----------------------------------------------------------*/
}
.add-user-role-option__check {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.add-user-role-option__check::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.add-user-role-option {
  /*----------------------------------------------------------
  Role Name
  ----------------------------------------------------------*/
}
.add-user-role-option__name {
  min-width: 0;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.add-user-role-option {
  /*----------------------------------------------------------
  Selected
  ----------------------------------------------------------*/
}
input[type=radio]:checked + .add-user-role-option__check {
  border-color: #177245;
  background: #177245;
  box-shadow: 0 2px 5px rgba(23, 114, 69, 0.12);
}
input[type=radio]:checked + .add-user-role-option__check::after {
  opacity: 1;
  transform: scale(1);
}
input[type=radio]:checked ~ .add-user-role-option__name {
  color: #177245;
  font-weight: 600;
}
.add-user-role-option {
  /*----------------------------------------------------------
  Focus
  ----------------------------------------------------------*/
}
input[type=radio]:focus-visible + .add-user-role-option__check {
  outline: 2px solid rgba(23, 114, 69, 0.25);
  outline-offset: 2px;
}
.add-user-role-option {
  /*----------------------------------------------------------
  Selected Row
  ----------------------------------------------------------*/
}
.add-user-role-option:has(input[type=radio]:checked) {
  background: rgba(23, 114, 69, 0.035);
}

/*==============================================================
* Empty Role State
*==============================================================*/
.add-user-role-empty {
  min-height: 70px;
  padding: 15px;
  color: #555555;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.add-user-role-empty i {
  font-size: 18px;
}

/*==============================================================
* Account Summary
*==============================================================*/
.add-user-summary {
  padding: 7px 20px 17px;
}

.add-user-summary__item {
  min-height: 45px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.add-user-summary__item:last-child {
  border-bottom: 0;
}
.add-user-summary__item span {
  color: #555555;
  font-size: 14px;
}
.add-user-summary__item strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.add-user-summary__item strong.is-active {
  color: #198754;
}
.add-user-summary__item strong.is-inactive {
  color: #555555;
}
.add-user-summary__item strong.is-suspended {
  color: #dc3545;
}

/*==============================================================
* Permissions
*==============================================================*/
.add-user-permissions {
  padding: 8px 20px 17px;
}

.add-user-permissions > div {
  min-height: 39px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: flex;
  align-items: center;
  gap: 9px;
}
.add-user-permissions > div:last-child {
  border-bottom: 0;
}
.add-user-permissions > div > span:last-child {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}

.add-user-permission-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}
.add-user-permission-icon i {
  font-size: 13px;
}

/*==============================================================
* Information Box
*==============================================================*/
.add-user-info-box {
  padding: 15px;
  border: 1px solid rgba(23, 114, 69, 0.12);
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.035);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.add-user-info-box__icon {
  width: 33px;
  height: 33px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 33px;
}
.add-user-info-box__icon i {
  font-size: 15px;
}
.add-user-info-box strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.add-user-info-box p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*==============================================================
* Form Actions
*==============================================================*/
.add-user-form-actions {
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
@media (max-width: 767px) {
  .add-user-form-actions {
    padding: 14px 16px;
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

.add-user-cancel-btn,
.add-user-submit-btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.add-user-cancel-btn i,
.add-user-submit-btn i {
  font-size: 16px;
}
@media (max-width: 767px) {
  .add-user-cancel-btn,
  .add-user-submit-btn {
    width: 100%;
  }
}

.add-user-cancel-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.add-user-cancel-btn:hover {
  border-color: #177245;
  color: #177245;
}

.add-user-submit-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
  cursor: pointer;
}
.add-user-submit-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
  box-shadow: 0 5px 15px rgba(23, 114, 69, 0.15);
}
.add-user-submit-btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
}
.add-user-submit-btn.is-loading i {
  animation: edit-user-spin 0.8s linear infinite;
}

/*==============================================================
* Edit User
*==============================================================*/
.edit-user-current-image {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.edit-user-current-image__preview {
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 8px;
  background: #F2F4F7;
  flex: 0 0 52px;
}
.edit-user-current-image__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.edit-user-current-image__content {
  min-width: 0;
}
.edit-user-current-image__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.edit-user-current-image__content small {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .edit-user-current-image {
    padding: 10px;
    gap: 10px;
  }
  .edit-user-current-image__preview {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}

/*==============================================================
* Edit User Status
*==============================================================*/
.edit-user-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.edit-user-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.edit-user-status--active {
  color: #198754;
}
.edit-user-status--inactive {
  color: #555555;
}
.edit-user-status--suspended {
  color: #dc3545;
}

/*==============================================================
* Edit User Danger Box
*==============================================================*/
.edit-user-danger-box {
  padding: 15px;
  border: 1px solid rgba(220, 53, 69, 0.12);
  border-radius: 9px;
  background: rgba(220, 53, 69, 0.025);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.edit-user-danger-box__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}
.edit-user-danger-box__icon i {
  font-size: 16px;
}
.edit-user-danger-box > div:not(.edit-user-danger-box__icon) {
  min-width: 0;
}
.edit-user-danger-box > div:not(.edit-user-danger-box__icon) strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.edit-user-danger-box > div:not(.edit-user-danger-box__icon) p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .edit-user-danger-box {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .edit-user-danger-box .edit-user-delete-btn {
    grid-column: 1/-1;
    width: 100%;
  }
}

/*==============================================================
* Delete Button
*==============================================================*/
.edit-user-delete-btn {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 6px;
  background: #fff;
  color: #dc3545;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.edit-user-delete-btn i {
  font-size: 14px;
}
.edit-user-delete-btn:hover {
  border-color: #dc3545;
  background: #dc3545;
  color: #fff;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
}
.edit-user-delete-btn:focus-visible {
  outline: 2px solid rgba(220, 53, 69, 0.25);
  outline-offset: 2px;
}

/*==============================================================
* Edit Save Button
*==============================================================*/
.edit-user-save-btn {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #177245;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.edit-user-save-btn i {
  font-size: 16px;
}
.edit-user-save-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  box-shadow: 0 5px 15px rgba(23, 114, 69, 0.15);
}
.edit-user-save-btn:focus-visible {
  outline: 2px solid rgba(23, 114, 69, 0.25);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .edit-user-save-btn {
    width: 100%;
  }
}

/*==============================================================
* Existing User Badge
*==============================================================*/
.edit-user-existing-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 7px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(25, 135, 84, 0.08);
  color: #198754;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.edit-user-existing-badge i {
  font-size: 11px;
}

/*==============================================================
* User ID
*==============================================================*/
.edit-user-id {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 5px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/*==============================================================
* Readonly Input
*==============================================================*/
.add-user-input input[readonly] {
  background: #F2F4F7;
  color: #555555;
  cursor: not-allowed;
}
.add-user-input input[readonly]:focus {
  border-color: #ddd;
  box-shadow: none;
}

/*==============================================================
* Disabled Input
*==============================================================*/
.add-user-input input:disabled,
.add-user-input select:disabled,
.add-user-input textarea:disabled {
  background: #F2F4F7;
  color: rgba(85, 85, 85, 0.05);
  cursor: not-allowed;
  opacity: 0.75;
}

/*==============================================================
* Profile Preview
*==============================================================*/
.edit-user-profile-preview {
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #F2F4F7;
  box-shadow: 0 3px 12px rgba(16, 26, 35, 0.1);
}
.edit-user-profile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*==============================================================
* Verification
*==============================================================*/
.edit-user-verification {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}
.edit-user-verification__icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.edit-user-verification__text strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
}
.edit-user-verification__text span {
  display: block;
  color: #555555;
  font-size: 14px;
}
.edit-user-verification--verified .edit-user-verification__icon {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.edit-user-verification--verified .edit-user-verification__text strong {
  color: #198754;
}
.edit-user-verification--pending .edit-user-verification__icon {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
.edit-user-verification--pending .edit-user-verification__text strong {
  color: #ffc107;
}

/*==============================================================
* Loading Animation
*==============================================================*/
@keyframes edit-user-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*==============================================================
* Responsive
*==============================================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .add-user-layout {
    grid-template-columns: 1fr;
  }
  .add-user-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .add-user-info-box {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .add-user-page__header {
    margin-bottom: 20px;
  }
  .add-user-form-grid {
    grid-template-columns: 1fr;
  }
  .add-user-field--full {
    grid-column: auto;
  }
  .add-user-sidebar {
    display: flex;
    flex-direction: column;
  }
  .add-user-form-actions {
    margin-top: 16px;
  }
  /*----------------------------------------------------------
  Role Dropdown Mobile
  ----------------------------------------------------------*/
  .add-user-role-dropdown__trigger {
    min-height: 42px;
    padding-left: 37px;
    font-size: 14px;
  }
  .add-user-role-dropdown__menu {
    max-height: 220px;
  }
  .add-user-role-option {
    min-height: 42px;
    padding: 0 9px;
  }
  .add-user-role-option__name {
    font-size: 14px;
  }
  .add-user-role-option__check {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  .add-user-upload {
    min-height: 80px;
  }
  .edit-user-current-image__content strong {
    font-size: 14px;
  }
  .edit-user-current-image__content small {
    font-size: 14px;
  }
  .edit-user-danger-box {
    padding: 12px;
    gap: 8px;
  }
  .edit-user-danger-box__icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .edit-user-danger-box__icon i {
    font-size: 14px;
  }
  .edit-user-delete-btn {
    min-height: 36px;
    font-size: 14px;
  }
  .add-user-card__header h2 {
    font-size: 18px;
  }
  .add-user-card__header p {
    font-size: 14px;
  }
  .add-user-field > label {
    font-size: 14px;
  }
  .add-user-input input,
  .add-user-input select,
  .add-user-input textarea {
    font-size: 14px;
  }
  .add-user-form-actions .add-user-cancel-btn,
  .add-user-form-actions .add-user-submit-btn {
    font-size: 14px;
  }
}
/*================================*
* Profile Settings
*=================================*/
.profile-settings {
  /*================================*
  * Page Header
  *=================================*/
}
.profile-settings__header {
  margin-bottom: 20px;
}
.profile-settings__heading .profile-settings__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.profile-settings__heading h1 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.profile-settings__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.profile-settings {
  /*================================*
  * Form
  *=================================*/
}
.profile-settings__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 767px) {
  .profile-settings__form {
    gap: 15px;
  }
}
.profile-settings {
  /*================================*
  * Profile Card
  *=================================*/
}
.profile-settings .profile-card {
  width: 100%;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(16, 26, 35, 0.035);
  overflow: hidden;
  /* Header */
}
.profile-settings .profile-card__header {
  padding: 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-settings .profile-card__header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}
.profile-settings .profile-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .profile-settings .profile-card__header {
    padding: 16px;
    align-items: flex-start;
  }
}
.profile-settings .profile-card {
  /* Body */
}
.profile-settings .profile-card__body {
  padding: 20px;
}
@media (max-width: 767px) {
  .profile-settings .profile-card__body {
    padding: 16px;
  }
}
.profile-settings {
  /*================================*
  * Section Icon
  *=================================*/
}
.profile-settings .section-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}
.profile-settings .section-icon i {
  font-size: 18px;
  line-height: 1;
}
.profile-settings .section-icon--security {
  background: rgba(212, 175, 55, 0.08);
  color: #D4AF37;
}
.profile-settings {
  /*================================*
  * Profile Summary
  *=================================*/
}
.profile-settings .profile-summary {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.profile-settings .profile-summary__user {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.profile-settings .profile-summary__info {
  min-width: 0;
}
.profile-settings .profile-summary__info h2 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.profile-settings .profile-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.profile-settings .profile-summary__meta span {
  color: #555555;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.profile-settings .profile-summary__meta span i {
  color: #177245;
  font-size: 15px;
  line-height: 1;
}
.profile-settings .profile-summary__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}
.profile-settings .profile-summary__action small {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
@media (min-width: 768px) and (max-width: 991px) {
  .profile-settings .profile-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .profile-settings .profile-summary__action {
    width: 100%;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
  .profile-settings .profile-summary {
    padding: 16px;
    gap: 16px;
  }
  .profile-settings .profile-summary__user {
    align-items: flex-start;
  }
  .profile-settings .profile-summary__info h2 {
    font-size: 18px;
  }
  .profile-settings .profile-summary__meta {
    flex-direction: column;
    gap: 5px;
  }
  .profile-settings .profile-summary__action {
    align-items: stretch;
    flex-direction: column;
  }
  .profile-settings .profile-summary__action .btn {
    width: 100%;
  }
  .profile-settings .profile-summary__action small {
    text-align: center;
    white-space: normal;
  }
}
.profile-settings {
  /*================================*
  * Profile Avatar
  *=================================*/
}
.profile-settings .profile-avatar {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  flex: 0 0 76px;
}
.profile-settings .profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
  object-fit: cover;
}
.profile-settings .profile-avatar__edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(16, 26, 35, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.profile-settings .profile-avatar__edit i {
  font-size: 14px;
  line-height: 1;
}
.profile-settings .profile-avatar__edit:hover {
  background: #D4AF37;
  transform: scale(1.06);
}
.profile-settings .profile-avatar__edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(23, 114, 69, 0.25);
}
@media (max-width: 767px) {
  .profile-settings .profile-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  .profile-settings .profile-avatar__edit {
    width: 28px;
    height: 28px;
  }
}
.profile-settings {
  /*================================*
  * Form Grid
  *=================================*/
}
.profile-settings .profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .profile-settings .profile-form-grid {
    gap: 16px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .profile-settings .profile-form-grid {
    grid-template-columns: 1fr;
  }
}
.profile-settings {
  /*================================*
  * Form Group
  *=================================*/
}
.profile-settings .form-group {
  min-width: 0;
}
.profile-settings .form-group--full {
  grid-column: 1/-1;
}
.profile-settings .form-group label {
  margin-bottom: 7px;
  color: #0D2B5A;
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.profile-settings .form-group label span {
  margin-left: 2px;
  color: #dc3545;
}
.profile-settings {
  /*================================*
  * Input Wrapper
  *=================================*/
}
.profile-settings .input-wrapper {
  position: relative;
  width: 100%;
}
.profile-settings .input-wrapper > i {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 2;
  color: rgba(85, 85, 85, 0.65);
  font-size: 17px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.profile-settings .input-wrapper input {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 15px 0 43px;
  border: 1px solid #ddd;
  border-radius: 8px !important;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.profile-settings .input-wrapper input::placeholder {
  color: rgba(85, 85, 85, 0.55);
}
.profile-settings .input-wrapper input:hover {
  border-color: rgba(13, 43, 90, 0.25);
}
.profile-settings .input-wrapper input:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.1);
}
.profile-settings .input-wrapper--password input {
  padding-right: 48px;
}
.profile-settings {
  /*================================*
  * Password Toggle
  *=================================*/
}
.profile-settings .password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(85, 85, 85, 0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.profile-settings .password-toggle i {
  font-size: 17px;
  line-height: 1;
}
.profile-settings .password-toggle:hover {
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
}
.profile-settings .password-toggle:focus-visible {
  outline: none;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.1);
}
.profile-settings {
  /*================================*
  * Form Help
  *=================================*/
}
.profile-settings .form-help {
  margin-top: 6px;
  color: #555555;
  display: block;
  font-size: 14px;
  line-height: 1.5;
}
.profile-settings {
  /*================================*
  * Buttons
  *=================================*/
}
.profile-settings .btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.profile-settings .btn i {
  font-size: 16px;
  line-height: 1;
}
.profile-settings .btn--primary {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.profile-settings .btn--primary:hover {
  border-color: #D4AF37;
  background: #D4AF37;
  color: #fff;
}
.profile-settings .btn--primary:active {
  transform: translateY(1px);
}
.profile-settings .btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.15);
}
.profile-settings .btn--secondary {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.profile-settings .btn--secondary:hover {
  border-color: rgba(13, 43, 90, 0.3);
  background: #F2F4F7;
  color: #0D2B5A;
}
.profile-settings .btn--secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 26, 35, 0.07);
}
.profile-settings {
  /*================================*
  * Form Actions
  *=================================*/
}
.profile-settings__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-bottom: 5px;
}
@media (max-width: 767px) {
  .profile-settings__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .profile-settings__actions .btn {
    width: 100%;
  }
}

/* =========================================================
   General Settings Page
========================================================= */
.settings-general-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.settings-general-page * {
  box-sizing: border-box;
}
.settings-general-page button,
.settings-general-page input,
.settings-general-page select,
.settings-general-page textarea {
  font-family: inherit;
}

/* =========================================================
   Page Header
========================================================= */
.settings-header {
  margin-bottom: 24px;
}

.settings-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.settings-header-text h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.settings-header-text p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Header Actions
========================================================= */
.settings-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================================================
   Theme Toggle
========================================================= */
.theme-toggle {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: #fff;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-toggle:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.theme-toggle .theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.theme-toggle .dark-icon,
.theme-toggle .dark-text {
  display: none;
}

/* =========================================================
   Dark Mode Toggle State
========================================================= */
body.dark-mode .theme-toggle .light-icon,
body.dark-mode .theme-toggle .light-text {
  display: none;
}
body.dark-mode .theme-toggle .dark-icon,
body.dark-mode .theme-toggle .dark-text {
  display: inline-flex;
}

/* =========================================================
   Language Dropdown
========================================================= */
.language-dropdown {
  position: relative;
}

.language-toggle {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: #fff;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.language-toggle:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.language-toggle i:first-child {
  font-size: 16px;
}
.language-toggle i:last-child {
  font-size: 16px;
}

.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 170px;
  padding: 6px;
  border: 1px solid #e7eaed;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 26, 35, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.language-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #555555;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}
.language-option i {
  display: none;
  color: #177245;
  font-size: 16px;
}
.language-option:hover {
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}
.language-option.active {
  color: #177245;
  background: rgba(23, 114, 69, 0.07);
}
.language-option.active i {
  display: inline-flex;
}

/* =========================================================
   Settings Card
========================================================= */
.settings-card {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #e8ebef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(16, 26, 35, 0.04);
}

.settings-card-header {
  padding: 20px 22px;
  border-bottom: 1px solid #edf0f3;
}

.settings-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.settings-card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 19px;
}

.settings-card-header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.settings-card-header p {
  margin: 0;
  color: #7b838b;
  font-size: 14px;
  line-height: 1.5;
}

.settings-card-body {
  padding: 22px;
}

/* =========================================================
   Form Grid
========================================================= */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form-group {
  min-width: 0;
}
.form-group.full-width {
  grid-column: 1/-1;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.form-control {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #101a23;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control::placeholder {
  color: #a0a7ae;
}
.form-control:hover {
  border-color: #cbd0d6;
}
.form-control:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

select.form-control {
  cursor: pointer;
}

/* =========================================================
   Branding
========================================================= */
.branding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.branding-item > label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.upload-box {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 120px;
  padding: 15px;
  border: 1px dashed #d8dde2;
  border-radius: 10px;
  background: #fafbfc;
}

.upload-preview {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fff;
}
.upload-preview img {
  display: block;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.upload-preview.favicon-preview {
  width: 70px;
  height: 70px;
  flex-basis: 70px;
}

.upload-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.upload-content strong {
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.upload-content span {
  margin-bottom: 8px;
  color: #8a9198;
  font-size: 14px;
}

.upload-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(23, 114, 69, 0.18);
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.upload-button:hover {
  background: rgba(23, 114, 69, 0.11);
  border-color: rgba(23, 114, 69, 0.3);
}

/* =========================================================
   System Preferences
========================================================= */
.preference-list {
  width: 100%;
}

.preference-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}
.preference-item + .preference-item {
  border-top: 1px solid #edf0f3;
}

.preference-content {
  min-width: 0;
}
.preference-content h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.preference-content p {
  margin: 0;
  color: #858c94;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Switch
========================================================= */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 44px;
  display: inline-block;
  cursor: pointer;
}
.switch input {
  width: 0;
  height: 0;
  opacity: 0;
}
.switch input:checked + .slider {
  background: #177245;
}
.switch input:checked + .slider::before {
  transform: translateX(20px);
}
.switch .slider {
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: #cfd4da;
  transition: background 0.2s ease;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease;
}

/* =========================================================
   Action Buttons
========================================================= */
.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.cancel-button,
.save-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-button {
  border: 1px solid #e0e4e8;
  background: #fff;
  color: #646b73;
}
.cancel-button:hover {
  background: #f7f8f9;
  border-color: #d2d7dc;
}

.save-button {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.save-button:hover {
  background: rgba(23, 114, 69, 0.05);
  border-color: rgba(23, 114, 69, 0.05);
}

/* =========================================================
   XXL
========================================================= */
@media (min-width: 1400px) and (max-width: 1700px) {
  .settings-general-page {
    max-width: 1100px;
  }
}
/* =========================================================
   XL
========================================================= */
@media (min-width: 1200px) and (max-width: 1399px) {
  .settings-general-page {
    max-width: 1050px;
  }
}
/* =========================================================
   LG
========================================================= */
@media (min-width: 992px) and (max-width: 1199px) {
  .settings-general-page {
    padding: 20px;
  }
  .settings-header-content {
    align-items: flex-start;
  }
  .settings-grid,
  .branding-grid {
    grid-template-columns: 1fr;
  }
  .form-group.full-width {
    grid-column: auto;
  }
}
/* =========================================================
   MD
========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  .settings-general-page {
    padding: 18px;
  }
  .settings-header-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .settings-header-actions {
    width: 100%;
  }
  .theme-toggle,
  .language-toggle {
    min-height: 38px;
  }
}
/* =========================================================
   XS
========================================================= */
@media (max-width: 767px) {
  .settings-general-page {
    padding: 15px;
  }
  .settings-header {
    margin-bottom: 18px;
  }
  .settings-header-content {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-header-text h1 {
    font-size: 20px;
  }
  .settings-header-text p {
    font-size: 14px;
  }
  .settings-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .theme-toggle,
  .language-toggle {
    min-height: 38px;
    font-size: 14px;
  }
  .settings-card {
    margin-bottom: 15px;
    border-radius: 10px;
  }
  .settings-card-header {
    padding: 16px;
  }
  .settings-card-body {
    padding: 16px;
  }
  .settings-card-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 18px;
  }
  .settings-card-header h2 {
    font-size: 17px;
  }
  .settings-card-header p {
    font-size: 14px;
  }
  .settings-grid,
  .branding-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .form-group.full-width {
    grid-column: auto;
  }
  .upload-box {
    align-items: flex-start;
  }
  .preference-item {
    align-items: flex-start;
  }
  .settings-actions {
    flex-direction: column-reverse;
  }
  .cancel-button,
  .save-button {
    width: 100%;
  }
}
/* =========================================================
   SM
========================================================= */
@media (min-width: 480px) and (max-width: 767px) {
  .settings-general-page {
    padding: 14px;
  }
  .settings-header-actions {
    width: 100%;
  }
  .theme-toggle,
  .language-dropdown {
    flex: 1;
  }
  .language-toggle {
    width: 100%;
    justify-content: center;
  }
}
/* =========================================================
   Ecommerce Settings Page
========================================================= */
.settings-ecommerce-page {
  width: 100%;
  margin: 0 auto;
  padding: 24px;
}
.settings-ecommerce-page * {
  box-sizing: border-box;
}
.settings-ecommerce-page button,
.settings-ecommerce-page input,
.settings-ecommerce-page select,
.settings-ecommerce-page textarea {
  font-family: inherit;
}

/* =========================================================
   Page Header
========================================================= */
.settings-header {
  margin-bottom: 24px;
}

.settings-header-text h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.settings-header-text p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Settings Card
========================================================= */
.settings-card {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #e8ebef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(16, 26, 35, 0.04);
}

.settings-card-header {
  padding: 20px 22px;
  border-bottom: 1px solid #edf0f3;
}

.settings-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.settings-card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 19px;
}

.settings-card-header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.settings-card-header p {
  margin: 0;
  color: #7b838b;
  font-size: 14px;
  line-height: 1.5;
}

.settings-card-body {
  padding: 22px;
}

/* =========================================================
   Form Grid
========================================================= */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form-group {
  min-width: 0;
}
.form-group.full-width {
  grid-column: 1/-1;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.form-control {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #101a23;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control::placeholder {
  color: #a0a7ae;
}
.form-control:hover {
  border-color: #cbd0d6;
}
.form-control:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

/* =========================================================
   Preference List
========================================================= */
.preference-list {
  width: 100%;
}

.preference-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}
.preference-item:first-child {
  padding-top: 0;
}
.preference-item:last-child {
  padding-bottom: 0;
}
.preference-item + .preference-item {
  border-top: 1px solid #edf0f3;
}

.preference-content {
  min-width: 0;
}
.preference-content h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.preference-content p {
  margin: 0;
  color: #858c94;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Inline Setting
========================================================= */
.inline-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.inline-setting h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.inline-setting p {
  margin: 0;
  color: #858c94;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Switch
========================================================= */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 44px;
  display: inline-block;
  cursor: pointer;
}
.switch input {
  width: 0;
  height: 0;
  opacity: 0;
}
.switch input:checked + .slider {
  background: #177245;
}
.switch input:checked + .slider::before {
  transform: translateX(20px);
}
.switch .slider {
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: #cfd4da;
  transition: background 0.2s ease;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease;
}

/* =========================================================
   Payment Methods
========================================================= */
.payment-method-list {
  width: 100%;
}

.payment-method-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}
.payment-method-item:first-child {
  padding-top: 0;
}
.payment-method-item:last-child {
  padding-bottom: 0;
}
.payment-method-item + .payment-method-item {
  border-top: 1px solid #edf0f3;
}

.payment-method-content {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.payment-method-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f4f7f5;
  color: #177245;
  font-size: 18px;
}

.payment-method-content h3 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.payment-method-content p {
  margin: 0;
  color: #858c94;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Action Buttons
========================================================= */
.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.cancel-button,
.save-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-button {
  border: 1px solid #e0e4e8;
  background: #fff;
  color: #646b73;
}
.cancel-button:hover {
  border-color: #d2d7dc;
  background: #f7f8f9;
}

.save-button {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.save-button:hover {
  border-color: rgba(23, 114, 69, 0.05);
  background: rgba(23, 114, 69, 0.05);
}

/* =========================================================
   LG
========================================================= */
@media (min-width: 992px) and (max-width: 1199px) {
  .settings-ecommerce-page {
    padding: 20px;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .form-group.full-width {
    grid-column: auto;
  }
}
/* =========================================================
   MD
========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  .settings-ecommerce-page {
    padding: 18px;
  }
}
/* =========================================================
   XS
========================================================= */
@media (max-width: 767px) {
  .settings-ecommerce-page {
    padding: 15px;
  }
  .settings-header {
    margin-bottom: 18px;
  }
  .settings-header-text h1 {
    font-size: 20px;
  }
  .settings-header-text p {
    font-size: 14px;
  }
  .settings-card {
    margin-bottom: 15px;
    border-radius: 10px;
  }
  .settings-card-header {
    padding: 16px;
  }
  .settings-card-body {
    padding: 16px;
  }
  .settings-card-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 18px;
  }
  .settings-card-header h2 {
    font-size: 17px;
  }
  .settings-card-header p {
    font-size: 14px;
  }
  .preference-item,
  .payment-method-item,
  .inline-setting {
    align-items: flex-start;
  }
  .settings-actions {
    flex-direction: column-reverse;
  }
  .cancel-button,
  .save-button {
    width: 100%;
  }
}
/* =========================================================
   SM
========================================================= */
@media (min-width: 480px) and (max-width: 767px) {
  .settings-ecommerce-page {
    padding: 14px;
  }
}
/* =========================================================
   Smart Buy Settings Page
========================================================= */
.settings-smart-buy-page {
  width: 100%;
  margin: 0 auto;
  padding: 24px;
}
.settings-smart-buy-page * {
  box-sizing: border-box;
}
.settings-smart-buy-page button,
.settings-smart-buy-page input,
.settings-smart-buy-page select,
.settings-smart-buy-page textarea {
  font-family: inherit;
}

/* =========================================================
   Page Header
========================================================= */
.settings-header {
  margin-bottom: 24px;
}

.settings-header-text h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.settings-header-text p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Settings Card
========================================================= */
.settings-card {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #e8ebef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(16, 26, 35, 0.04);
}

.settings-card-header {
  padding: 20px 22px;
  border-bottom: 1px solid #edf0f3;
}

.settings-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.settings-card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 19px;
}

.settings-card-header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.settings-card-header p {
  margin: 0;
  color: #7b838b;
  font-size: 14px;
  line-height: 1.5;
}

.settings-card-body {
  padding: 22px;
}

/* =========================================================
   Form Grid
========================================================= */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form-group {
  min-width: 0;
}
.form-group.full-width {
  grid-column: 1/-1;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.form-control {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #101a23;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control::placeholder {
  color: #a0a7ae;
}
.form-control:hover {
  border-color: #cbd0d6;
}
.form-control:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

/* =========================================================
   Preference List
========================================================= */
.preference-list {
  width: 100%;
}

.preference-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}
.preference-item:first-child {
  padding-top: 0;
}
.preference-item:last-child {
  padding-bottom: 0;
}
.preference-item + .preference-item {
  border-top: 1px solid #edf0f3;
}

.preference-content {
  min-width: 0;
}
.preference-content h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.preference-content p {
  margin: 0;
  color: #858c94;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Inline Setting
========================================================= */
.inline-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.inline-setting h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.inline-setting p {
  margin: 0;
  color: #858c94;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Switch
========================================================= */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 44px;
  display: inline-block;
  cursor: pointer;
}
.switch input {
  width: 0;
  height: 0;
  opacity: 0;
}
.switch input:checked + .slider {
  background: #177245;
}
.switch input:checked + .slider::before {
  transform: translateX(20px);
}
.switch .slider {
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: #cfd4da;
  transition: background 0.2s ease;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease;
}

/* =========================================================
   Actions
========================================================= */
.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.cancel-button,
.save-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-button {
  border: 1px solid #e0e4e8;
  background: #fff;
  color: #646b73;
}
.cancel-button:hover {
  border-color: #d2d7dc;
  background: #f7f8f9;
}

.save-button {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.save-button:hover {
  border-color: rgba(23, 114, 69, 0.05);
  background: rgba(23, 114, 69, 0.05);
}

/* =========================================================
   LG
========================================================= */
@media (min-width: 992px) and (max-width: 1199px) {
  .settings-smart-buy-page {
    padding: 20px;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .form-group.full-width {
    grid-column: auto;
  }
}
/* =========================================================
   MD
========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  .settings-smart-buy-page {
    padding: 18px;
  }
}
/* =========================================================
   XS
========================================================= */
@media (max-width: 767px) {
  .settings-smart-buy-page {
    padding: 15px;
  }
  .settings-header {
    margin-bottom: 18px;
  }
  .settings-header-text h1 {
    font-size: 20px;
  }
  .settings-header-text p {
    font-size: 14px;
  }
  .settings-card {
    margin-bottom: 15px;
    border-radius: 10px;
  }
  .settings-card-header {
    padding: 16px;
  }
  .settings-card-body {
    padding: 16px;
  }
  .settings-card-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 18px;
  }
  .settings-card-header h2 {
    font-size: 17px;
  }
  .settings-card-header p {
    font-size: 14px;
  }
  .preference-item,
  .inline-setting {
    align-items: flex-start;
  }
  .settings-actions {
    flex-direction: column-reverse;
  }
  .cancel-button,
  .save-button {
    width: 100%;
  }
}
/* =========================================================
   SM
========================================================= */
@media (min-width: 480px) and (max-width: 767px) {
  .settings-smart-buy-page {
    padding: 14px;
  }
}
/* =========================================================
   Audit Logs Page
========================================================= */
.audit-logs-page {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}
.audit-logs-page * {
  box-sizing: border-box;
}
.audit-logs-page button,
.audit-logs-page input,
.audit-logs-page select {
  font-family: inherit;
}

/* =========================================================
   Header
========================================================= */
.audit-header {
  margin-bottom: 24px;
}

.audit-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.audit-header-text h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.audit-header-text p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Summary Cards
========================================================= */
.audit-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #e8ebef;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(16, 26, 35, 0.04);
}

.summary-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 19px;
}
.summary-icon.success {
  background: rgba(25, 135, 84, 0.08);
  color: #198754;
}
.summary-icon.warning {
  background: rgba(255, 193, 7, 0.1);
  color: #c58b00;
}
.summary-icon.danger {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}

.summary-content {
  min-width: 0;
}
.summary-content span {
  display: block;
  margin-bottom: 3px;
  color: #7d858d;
  font-size: 14px;
  line-height: 1.4;
}
.summary-content strong {
  display: block;
  color: #0D2B5A;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

/* =========================================================
   Common Card
========================================================= */
.audit-card {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #e8ebef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(16, 26, 35, 0.04);
}

.audit-card-header,
.logs-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid #edf0f3;
}
.audit-card-header h2,
.logs-card-header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.audit-card-header p,
.logs-card-header p {
  margin: 0;
  color: #7b838b;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Filters
========================================================= */
.audit-filter-body {
  padding: 20px 22px;
}

.audit-filter-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.filter-field {
  min-width: 0;
}
.filter-field label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.search-input {
  position: relative;
}
.search-input i {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  color: #9299a0;
  font-size: 16px;
  transform: translateY(-50%);
}
.search-input input {
  width: 100%;
  height: 44px;
  padding: 9px 12px 9px 36px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #101a23;
  font-size: 14px;
  transition: all 0.2s ease;
}
.search-input input::placeholder {
  color: #a0a7ae;
}
.search-input input:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

.filter-control {
  width: 100%;
  height: 44px;
  padding: 9px 11px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #101a23;
  font-size: 14px;
  cursor: pointer;
}
.filter-control:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

.filter-button,
.export-button {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-button {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.filter-button:hover {
  border-color: rgba(23, 114, 69, 0.05);
  background: rgba(23, 114, 69, 0.05);
}

.export-button {
  border: 1px solid #dfe3e8;
  background: #fff;
  color: #0D2B5A;
}
.export-button:hover {
  border-color: #177245;
  color: #177245;
}

/* =========================================================
   Logs Header
========================================================= */
.logs-card-header {
  border-bottom: 0;
}

/* =========================================================
   Table
========================================================= */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.audit-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
}
.audit-table thead th {
  padding: 12px 18px;
  border-top: 1px solid #edf0f3;
  border-bottom: 1px solid #edf0f3;
  background: #fafbfc;
  color: #6e767e;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.audit-table tbody tr {
  transition: background 0.2s ease;
}
.audit-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.025);
}
.audit-table tbody tr + tr {
  border-top: 1px solid #edf0f3;
}
.audit-table tbody td {
  padding: 14px 18px;
  color: #606870;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
}

/* =========================================================
   User
========================================================= */
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  font-size: 12px;
  font-weight: 700;
}
.user-avatar.client {
  background: rgba(13, 202, 240, 0.1);
  color: #0899b8;
}

.user-info strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.user-info span {
  display: block;
  color: #8a9198;
  font-size: 14px;
  line-height: 1.3;
}

/* =========================================================
   Action Badge
========================================================= */
.action-badge,
.module-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}

.action-badge.created {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.action-badge.updated {
  background: rgba(13, 202, 240, 0.09);
  color: #0796b3;
}
.action-badge.login {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.action-badge.payment {
  background: rgba(212, 175, 55, 0.13);
  color: #9a7900;
}

.module-badge {
  background: #f2f4f6;
  color: #68717a;
}

/* =========================================================
   Description / Date
========================================================= */
.description {
  display: block;
  min-width: 170px;
  color: #596169;
}

.audit-table td .date {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  white-space: nowrap;
}
.audit-table td small {
  display: block;
  margin-top: 2px;
  color: #8a9198;
  font-size: 14px;
  line-height: 1.3;
}

/* =========================================================
   View Log
========================================================= */
.view-log {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e5e9;
  border-radius: 7px;
  color: #0D2B5A;
  text-decoration: none;
  transition: all 0.2s ease;
}
.view-log:hover {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}
.view-log i {
  font-size: 16px;
}

/* =========================================================
   Pagination
========================================================= */
.logs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border-top: 1px solid #edf0f3;
}

.pagination-info {
  color: #7d858d;
  font-size: 14px;
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pagination-buttons button {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  background: #fff;
  color: #68717a;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pagination-buttons button:hover:not(:disabled), .pagination-buttons button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.pagination-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination-buttons span {
  padding: 0 3px;
  color: #899198;
  font-size: 14px;
}

/* =========================================================
   XXL
========================================================= */
@media (min-width: 1400px) and (max-width: 1700px) {
  .audit-logs-page {
    max-width: 1300px;
  }
  .audit-filter-grid {
    grid-template-columns: 2fr repeat(3, 1fr) auto;
  }
  .filter-field:nth-child(5) {
    grid-column: span 1;
  }
}
/* =========================================================
   XL
========================================================= */
@media (min-width: 1200px) and (max-width: 1399px) {
  .audit-logs-page {
    max-width: 1200px;
  }
  .audit-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .audit-filter-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .search-field {
    grid-column: span 2;
  }
}
/* =========================================================
   LG
========================================================= */
@media (min-width: 992px) and (max-width: 1199px) {
  .audit-logs-page {
    padding: 20px;
  }
  .audit-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .audit-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-field {
    grid-column: 1/-1;
  }
  .filter-action {
    display: flex;
    justify-content: flex-start;
  }
}
/* =========================================================
   MD
========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  .audit-logs-page {
    padding: 18px;
  }
  .audit-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .audit-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .search-field {
    grid-column: 1/-1;
  }
}
/* =========================================================
   XS
========================================================= */
@media (max-width: 767px) {
  .audit-logs-page {
    padding: 15px;
  }
  .audit-header {
    margin-bottom: 18px;
  }
  .audit-header-text h1 {
    font-size: 20px;
  }
  .audit-header-text p {
    font-size: 14px;
  }
  .audit-summary {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .summary-card {
    padding: 15px;
  }
  .summary-content strong {
    font-size: 18px;
  }
  .audit-card {
    margin-bottom: 15px;
    border-radius: 10px;
  }
  .audit-card-header,
  .logs-card-header {
    padding: 16px;
  }
  .audit-filter-body {
    padding: 16px;
  }
  .audit-filter-grid {
    grid-template-columns: 1fr;
  }
  .search-field {
    grid-column: auto;
  }
  .filter-action {
    width: 100%;
  }
  .filter-button {
    width: 100%;
  }
  .logs-card-header {
    align-items: flex-start;
  }
  .export-button {
    height: 38px;
    padding: 8px 11px;
  }
  .logs-pagination {
    flex-direction: column;
    align-items: flex-start;
  }
  .pagination-buttons {
    width: 100%;
    overflow-x: auto;
  }
}
/* =========================================================
   SM
========================================================= */
@media (min-width: 480px) and (max-width: 767px) {
  .audit-logs-page {
    padding: 14px;
  }
  .summary-card {
    gap: 11px;
  }
}
/* =========================================================
   Audit Details Page
========================================================= */
.audit-details-page {
  width: 100%;
  margin: 0 auto;
  padding: 24px;
}
.audit-details-page * {
  box-sizing: border-box;
}
.audit-details-page a,
.audit-details-page button,
.audit-details-page input,
.audit-details-page select,
.audit-details-page textarea {
  font-family: inherit;
}

/* =========================================================
   Header
========================================================= */
.details-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.details-header-left {
  min-width: 0;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 15px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.back-button i {
  font-size: 16px;
}
.back-button:hover {
  color: #177245;
}

.details-title {
  display: flex;
  align-items: center;
  gap: 13px;
}

.details-title-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 20px;
}

.details-title h1 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.details-title p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   Layout
========================================================= */
.details-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 20px;
}

.details-main,
.details-sidebar {
  min-width: 0;
}

/* =========================================================
   Card
========================================================= */
.details-card {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #e8ebef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(16, 26, 35, 0.04);
}
.details-card:last-child {
  margin-bottom: 0;
}

.details-card-header {
  padding: 20px 22px;
  border-bottom: 1px solid #edf0f3;
}
.details-card-header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.details-card-header p {
  margin: 0;
  color: #7b838b;
  font-size: 14px;
  line-height: 1.5;
}

.details-card-body {
  padding: 22px;
}
.details-card-body.no-padding {
  padding: 0;
}

/* =========================================================
   Badges
========================================================= */
.action-badge,
.module-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}

.action-badge.updated {
  background: rgba(13, 202, 240, 0.09);
  color: #0796b3;
}
.action-badge.created {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.action-badge.deleted {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}

.module-badge {
  background: #f2f4f6;
  color: #68717a;
}

/* =========================================================
   Info Grid
========================================================= */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 30px;
}

.info-item {
  min-width: 0;
}

.info-label {
  display: block;
  margin-bottom: 6px;
  color: #858d95;
  font-size: 14px;
  line-height: 1.4;
}

.info-value {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  word-break: break-word;
}

/* =========================================================
   Description
========================================================= */
.description-box {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(23, 114, 69, 0.12);
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.035);
}

.description-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 18px;
}

.description-box h3 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.description-box p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   Changes Table
========================================================= */
.changes-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.changes-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}
.changes-table thead th {
  padding: 12px 18px;
  border-bottom: 1px solid #edf0f3;
  background: #fafbfc;
  color: #6e767e;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
}
.changes-table tbody tr + tr {
  border-top: 1px solid #edf0f3;
}
.changes-table tbody td {
  padding: 14px 18px;
  color: #626a72;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
}
.changes-table tbody td:first-child {
  color: #0D2B5A;
  font-weight: 600;
}

.old-value {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(220, 53, 69, 0.07);
  color: #dc3545;
}

.new-value {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(25, 135, 84, 0.08);
  color: #198754;
}

/* =========================================================
   Technical Information
========================================================= */
.technical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.technical-item {
  padding: 14px;
  border: 1px solid #edf0f3;
  border-radius: 8px;
  background: #fafbfc;
}
.technical-item span {
  display: block;
  margin-bottom: 5px;
  color: #858d95;
  font-size: 14px;
  line-height: 1.4;
}
.technical-item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  word-break: break-word;
}

/* =========================================================
   Performed User
========================================================= */
.performed-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf0f3;
}

.user-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(13, 202, 240, 0.1);
  color: #0796b3;
  font-size: 13px;
  font-weight: 700;
}

.performed-user strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.performed-user span {
  display: block;
  color: #858d95;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

/* =========================================================
   Sidebar Info
========================================================= */
.sidebar-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 17px;
}
.sidebar-info > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.sidebar-info span {
  color: #858d95;
  font-size: 14px;
}
.sidebar-info strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

/* =========================================================
   Related Resource
========================================================= */
.resource-box {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid #edf0f3;
  border-radius: 9px;
  background: #fafbfc;
}

.resource-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 18px;
}

.resource-box span {
  display: block;
  margin-bottom: 3px;
  color: #858d95;
  font-size: 14px;
}
.resource-box strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.resource-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
}
.resource-link i {
  font-size: 16px;
}
.resource-link:hover {
  color: rgba(23, 114, 69, 0.8);
}

/* =========================================================
   Status
========================================================= */
.status-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border-radius: 9px;
  background: rgba(25, 135, 84, 0.06);
}

.status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: #198754;
}

.status-box strong {
  display: block;
  margin-bottom: 3px;
  color: #198754;
  font-size: 14px;
  font-weight: 600;
}
.status-box span:last-child {
  display: block;
  color: #707980;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   XXL
========================================================= */
@media (min-width: 1400px) and (max-width: 1700px) {
  .details-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
/* =========================================================
   XL
========================================================= */
@media (min-width: 1200px) and (max-width: 1399px) {
  .details-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
/* =========================================================
   LG
========================================================= */
@media (min-width: 992px) and (max-width: 1199px) {
  .audit-details-page {
    padding: 20px;
  }
  .details-layout {
    grid-template-columns: 1fr;
  }
  .details-sidebar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
  }
  .details-sidebar .details-card {
    margin-bottom: 0;
  }
}
/* =========================================================
   MD
========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  .audit-details-page {
    padding: 18px;
  }
  .details-header {
    align-items: flex-start;
  }
  .details-sidebar {
    grid-template-columns: 1fr 1fr;
  }
  .details-sidebar .details-card:last-child {
    grid-column: 1/-1;
  }
}
/* =========================================================
   XS
========================================================= */
@media (max-width: 767px) {
  .audit-details-page {
    padding: 15px;
  }
  .details-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }
  .details-title h1 {
    font-size: 20px;
  }
  .details-title p {
    font-size: 14px;
  }
  .details-title-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 18px;
  }
  .details-card {
    margin-bottom: 15px;
    border-radius: 10px;
  }
  .details-card-header {
    padding: 16px;
  }
  .details-card-header h2 {
    font-size: 17px;
  }
  .details-card-header p {
    font-size: 14px;
  }
  .details-card-body {
    padding: 16px;
  }
  .info-grid,
  .technical-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .details-sidebar {
    grid-template-columns: 1fr;
  }
  .details-sidebar .details-card:last-child {
    grid-column: auto;
  }
  .description-box {
    padding: 13px;
  }
  .changes-table {
    min-width: 560px;
  }
  .sidebar-info > div {
    align-items: flex-start;
  }
}
/* =========================================================
   SM
========================================================= */
@media (min-width: 480px) and (max-width: 767px) {
  .audit-details-page {
    padding: 14px;
  }
}
.reports-page {
  font-family: "Poppins", sans-serif;
  color: #555555;
}
.reports-page .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.reports-page .page-header-content .page-subtitle {
  display: block;
  margin-bottom: 6px;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}
.reports-page .page-header-content h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.reports-page .page-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.reports-page .page-header-actions {
  display: flex;
  align-items: center;
}
.reports-page .report-date-filter {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
}
.reports-page .report-date-filter > i {
  color: #177245;
  font-size: 15px;
}
.reports-page .report-date-filter .form-control {
  min-width: 125px;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.reports-page .report-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.reports-page .report-type-card {
  position: relative;
  min-height: 132px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
}
.reports-page .report-type-card:hover {
  border-color: rgba(23, 114, 69, 0.35);
  box-shadow: 0 8px 24px rgba(16, 26, 35, 0.05);
  transform: translateY(-1px);
}
.reports-page .report-type-card:hover .report-type-arrow {
  background: #177245;
  color: #fff;
}
.reports-page .report-type-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 19px;
}
.reports-page .report-type-icon.smart-buy {
  background: rgba(212, 175, 55, 0.14);
  color: #D4AF37;
}
.reports-page .report-type-content {
  min-width: 0;
  flex: 1;
}
.reports-page .report-type-content > span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
}
.reports-page .report-type-content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.reports-page .report-type-content p {
  margin: 0;
  color: rgba(85, 85, 85, 0.75);
  font-size: 14px;
  line-height: 1.4;
}
.reports-page .report-type-arrow {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #F2F4F7;
  color: #0D2B5A;
  font-size: 14px;
  transition: all 0.2s ease;
}
.reports-page .report-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.reports-page .report-stat-card {
  min-height: 150px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.reports-page .stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.reports-page .stat-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 17px;
}
.reports-page .stat-icon.revenue {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.reports-page .stat-icon.orders {
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
}
.reports-page .stat-icon.smart-buy {
  background: rgba(212, 175, 55, 0.14);
  color: #D4AF37;
}
.reports-page .stat-icon.customers {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.reports-page .stat-change {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.reports-page .stat-change.positive {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.reports-page .stat-change.negative {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.reports-page .stat-content .stat-label {
  display: block;
  margin-bottom: 6px;
  color: #555555;
  font-size: 14px;
}
.reports-page .stat-content h3 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.reports-page .stat-content p {
  margin: 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.4;
}
.reports-page .reports-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.9fr);
  gap: 20px;
  margin-bottom: 24px;
}
.reports-page .dashboard-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.reports-page .dashboard-card-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #ddd;
}
.reports-page .card-header-content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.reports-page .card-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.reports-page .revenue-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #555555;
  font-size: 14px;
}
.reports-page .revenue-legend i {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #177245;
}
.reports-page .revenue-chart {
  height: 310px;
  display: flex;
  padding: 24px 20px 20px;
}
.reports-page .chart-y-axis {
  width: 45px;
  flex: 0 0 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 24px;
}
.reports-page .chart-y-axis span {
  color: rgba(85, 85, 85, 0.65);
  font-size: 14px;
  line-height: 1;
}
.reports-page .chart-area {
  position: relative;
  flex: 1;
  min-width: 0;
}
.reports-page .chart-grid-lines {
  position: absolute;
  inset: 0 0 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.reports-page .chart-grid-lines span {
  width: 100%;
  height: 1px;
  background: rgba(221, 221, 221, 0.7);
}
.reports-page .chart-bars {
  position: absolute;
  inset: 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 10px;
  padding: 0 10px 0;
}
.reports-page .chart-bar-wrap {
  height: 100%;
  flex: 1;
  max-width: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.reports-page .chart-bar-wrap > span {
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
}
.reports-page .chart-bar {
  width: 100%;
  max-width: 32px;
  min-height: 12px;
  border-radius: 5px 5px 2px 2px;
  background: #177245;
  transition: opacity 0.2s ease;
}
.reports-page .chart-bar:hover {
  opacity: 0.75;
}
.reports-page .breakdown-content {
  padding: 22px 20px;
}
.reports-page .breakdown-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 24px;
}
.reports-page .breakdown-total span {
  color: #555555;
  font-size: 14px;
}
.reports-page .breakdown-total strong {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
}
.reports-page .breakdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 9px;
}
.reports-page .breakdown-item strong {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.reports-page .breakdown-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reports-page .breakdown-info span:last-child {
  color: #555555;
  font-size: 14px;
}
.reports-page .breakdown-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #177245;
}
.reports-page .breakdown-dot.ecommerce {
  background: #177245;
}
.reports-page .breakdown-dot.smart-buy {
  background: #D4AF37;
}
.reports-page .breakdown-progress {
  height: 7px;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 10px;
  background: #F2F4F7;
}
.reports-page .breakdown-progress span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #177245;
}
.reports-page .breakdown-progress span.smart-buy {
  background: #D4AF37;
}
.reports-page .quick-reports-card {
  margin-bottom: 20px;
}
.reports-page .quick-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}
.reports-page .quick-report-item {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}
.reports-page .quick-report-item:hover {
  border-color: rgba(23, 114, 69, 0.3);
  background: rgba(23, 114, 69, 0.02);
}
.reports-page .quick-report-item:hover > i {
  color: #177245;
}
.reports-page .quick-report-item > i {
  margin-left: auto;
  color: rgba(85, 85, 85, 0.55);
  font-size: 14px;
  transition: color 0.2s ease;
}
.reports-page .quick-report-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 16px;
}
.reports-page .quick-report-icon.gold {
  background: rgba(212, 175, 55, 0.14);
  color: #D4AF37;
}
.reports-page .quick-report-item > div:nth-child(2) {
  min-width: 0;
}
.reports-page .quick-report-item > div:nth-child(2) strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.reports-page .quick-report-item > div:nth-child(2) span {
  display: block;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.35;
}
@media (max-width: 1200px) {
  .reports-page .report-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reports-page .reports-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991px) {
  .reports-page .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .reports-page .page-header-actions {
    width: 100%;
  }
  .reports-page .report-date-filter {
    width: 100%;
  }
  .reports-page .report-date-filter .form-control {
    flex: 1;
  }
  .reports-page .report-type-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .reports-page .report-stat-grid {
    grid-template-columns: 1fr;
  }
  .reports-page .quick-report-grid {
    grid-template-columns: 1fr;
  }
  .reports-page .dashboard-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .reports-page .revenue-chart {
    height: 270px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .reports-page .chart-y-axis {
    width: 38px;
    flex-basis: 38px;
  }
}
@media (max-width: 480px) {
  .reports-page .report-type-card {
    align-items: flex-start;
    padding: 18px;
  }
  .reports-page .report-type-arrow {
    display: none;
  }
  .reports-page .report-type-content h2 {
    font-size: 18px;
  }
  .reports-page .revenue-chart {
    height: 240px;
  }
  .reports-page .chart-bars {
    gap: 5px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .reports-page .chart-bar {
    max-width: 24px;
  }
}

.ecommerce-reports-page {
  font-family: "Poppins", sans-serif;
  color: #555555;
}
.ecommerce-reports-page .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.ecommerce-reports-page .page-header-content .page-subtitle {
  display: block;
  margin-bottom: 6px;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}
.ecommerce-reports-page .page-header-content h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.ecommerce-reports-page .page-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.ecommerce-reports-page .page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ecommerce-reports-page .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ecommerce-reports-page .btn-outline {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.ecommerce-reports-page .btn-outline:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.ecommerce-reports-page .report-date-filter {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
}
.ecommerce-reports-page .report-date-filter > i {
  color: #177245;
  font-size: 14px;
}
.ecommerce-reports-page .report-date-filter .form-control {
  min-width: 125px;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ecommerce-reports-page .report-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.ecommerce-reports-page .report-stat-card {
  min-height: 150px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: all 0.2s ease;
}
.ecommerce-reports-page .report-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.25);
  box-shadow: 0 6px 20px rgba(16, 26, 35, 0.04);
}
.ecommerce-reports-page .stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.ecommerce-reports-page .stat-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 17px;
}
.ecommerce-reports-page .stat-icon.sales {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.ecommerce-reports-page .stat-icon.orders {
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
}
.ecommerce-reports-page .stat-icon.average {
  background: rgba(212, 175, 55, 0.14);
  color: #D4AF37;
}
.ecommerce-reports-page .stat-icon.customers {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.ecommerce-reports-page .stat-change {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.ecommerce-reports-page .stat-change.positive {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.ecommerce-reports-page .stat-change.negative {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.ecommerce-reports-page .stat-content .stat-label {
  display: block;
  margin-bottom: 6px;
  color: #555555;
  font-size: 14px;
}
.ecommerce-reports-page .stat-content h3 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.ecommerce-reports-page .stat-content p {
  margin: 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.4;
}
.ecommerce-reports-page .reports-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.9fr);
  gap: 20px;
  margin-bottom: 20px;
}
.ecommerce-reports-page .secondary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ecommerce-reports-page .dashboard-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.ecommerce-reports-page .dashboard-card-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #ddd;
}
.ecommerce-reports-page .card-header-content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.ecommerce-reports-page .card-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.ecommerce-reports-page .chart-total {
  flex: 0 0 auto;
  text-align: right;
}
.ecommerce-reports-page .chart-total span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
}
.ecommerce-reports-page .chart-total strong {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.ecommerce-reports-page .sales-chart {
  height: 320px;
  display: flex;
  padding: 24px 20px 20px;
}
.ecommerce-reports-page .chart-y-axis {
  width: 45px;
  flex: 0 0 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 25px;
}
.ecommerce-reports-page .chart-y-axis span {
  color: rgba(85, 85, 85, 0.65);
  font-size: 14px;
  line-height: 1;
}
.ecommerce-reports-page .chart-area {
  position: relative;
  flex: 1;
  min-width: 0;
}
.ecommerce-reports-page .chart-grid-lines {
  position: absolute;
  inset: 0 0 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ecommerce-reports-page .chart-grid-lines span {
  width: 100%;
  height: 1px;
  background: rgba(221, 221, 221, 0.7);
}
.ecommerce-reports-page .chart-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 10px;
  padding: 0 10px;
}
.ecommerce-reports-page .chart-bar-wrap {
  height: 100%;
  flex: 1;
  max-width: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.ecommerce-reports-page .chart-bar-wrap > span {
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
}
.ecommerce-reports-page .chart-bar {
  width: 100%;
  max-width: 32px;
  min-height: 12px;
  border-radius: 5px 5px 2px 2px;
  background: #177245;
  transition: opacity 0.2s ease;
}
.ecommerce-reports-page .chart-bar:hover {
  opacity: 0.75;
}
.ecommerce-reports-page .order-status-card {
  min-width: 0;
  overflow: hidden;
}
.ecommerce-reports-page .order-status-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 24px;
}
.ecommerce-reports-page .status-total {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 24px;
}
.ecommerce-reports-page .status-total strong {
  flex: 0 0 auto;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.ecommerce-reports-page .status-total span {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.ecommerce-reports-page .status-item {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 0 0 7px;
}
.ecommerce-reports-page .status-item strong {
  flex: 0 0 auto;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.ecommerce-reports-page .status-item-info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.ecommerce-reports-page .status-item-info > span:last-child {
  min-width: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.ecommerce-reports-page .status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  display: inline-block;
  border-radius: 50%;
}
.ecommerce-reports-page .status-dot.processing {
  background: #ffc107;
}
.ecommerce-reports-page .status-dot.shipped {
  background: #0dcaf0;
}
.ecommerce-reports-page .status-dot.delivered {
  background: #198754;
}
.ecommerce-reports-page .status-dot.cancelled {
  background: #dc3545;
}
.ecommerce-reports-page .status-progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  margin: 0 0 17px;
  border-radius: 20px;
  background: #F2F4F7;
}
.ecommerce-reports-page .status-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 0.3s ease;
}
.ecommerce-reports-page .status-progress span.processing {
  background: #ffc107;
}
.ecommerce-reports-page .status-progress span.shipped {
  background: #0dcaf0;
}
.ecommerce-reports-page .status-progress span.delivered {
  background: #198754;
}
.ecommerce-reports-page .status-progress span.cancelled {
  background: #dc3545;
}
.ecommerce-reports-page .product-list {
  padding: 8px 20px;
}
.ecommerce-reports-page .product-row {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.75);
}
.ecommerce-reports-page .product-row:last-child {
  border-bottom: 0;
}
.ecommerce-reports-page .product-rank {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #F2F4F7;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.ecommerce-reports-page .product-info {
  min-width: 0;
  flex: 1;
}
.ecommerce-reports-page .product-info strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.ecommerce-reports-page .product-info span {
  display: block;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
}
.ecommerce-reports-page .product-sales {
  flex: 0 0 auto;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.ecommerce-reports-page .customer-report-list {
  padding: 8px 20px;
}
.ecommerce-reports-page .customer-report-row {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.75);
}
.ecommerce-reports-page .customer-report-row:last-child {
  border-bottom: 0;
}
.ecommerce-reports-page .customer-report-row > strong {
  flex: 0 0 auto;
  margin-left: auto;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.ecommerce-reports-page .customer-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.ecommerce-reports-page .customer-report-info {
  min-width: 0;
}
.ecommerce-reports-page .customer-report-info strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.ecommerce-reports-page .customer-report-info span {
  display: block;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
}
.ecommerce-reports-page .payment-summary-card {
  margin-bottom: 20px;
}
.ecommerce-reports-page .view-report-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.ecommerce-reports-page .view-report-link:hover {
  color: rgba(23, 114, 69, 0.8);
}
.ecommerce-reports-page .payment-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}
.ecommerce-reports-page .payment-summary-item {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.ecommerce-reports-page .summary-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 16px;
}
.ecommerce-reports-page .summary-icon.paid {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.ecommerce-reports-page .summary-icon.pending {
  background: rgba(255, 193, 7, 0.13);
  color: rgba(255, 193, 7, 0.18);
}
.ecommerce-reports-page .summary-icon.failed {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.ecommerce-reports-page .summary-icon.revenue {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.ecommerce-reports-page .payment-summary-item > div span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
}
.ecommerce-reports-page .payment-summary-item > div strong {
  display: block;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
}
@media (max-width: 1200px) {
  .ecommerce-reports-page .report-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ecommerce-reports-page .reports-grid {
    grid-template-columns: 1fr;
  }
  .ecommerce-reports-page .secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ecommerce-reports-page .payment-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .ecommerce-reports-page .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .ecommerce-reports-page .page-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .ecommerce-reports-page .report-date-filter {
    flex: 1;
  }
  .ecommerce-reports-page .report-date-filter .form-control {
    width: 100%;
  }
  .ecommerce-reports-page .secondary-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .ecommerce-reports-page .report-stat-grid {
    grid-template-columns: 1fr;
  }
  .ecommerce-reports-page .payment-summary-grid {
    grid-template-columns: 1fr;
  }
  .ecommerce-reports-page .dashboard-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .ecommerce-reports-page .sales-chart {
    height: 270px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .ecommerce-reports-page .chart-y-axis {
    width: 38px;
    flex-basis: 38px;
  }
  .ecommerce-reports-page .order-status-content {
    padding: 20px 18px 22px;
  }
  .ecommerce-reports-page .status-total {
    margin-bottom: 20px;
  }
  .ecommerce-reports-page .status-item {
    gap: 10px;
  }
  .ecommerce-reports-page .status-progress {
    margin-bottom: 16px;
  }
}
@media (max-width: 480px) {
  .ecommerce-reports-page .page-header-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .ecommerce-reports-page .report-date-filter,
  .ecommerce-reports-page .btn {
    width: 100%;
  }
  .ecommerce-reports-page .sales-chart {
    height: 240px;
  }
  .ecommerce-reports-page .chart-bars {
    gap: 5px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .ecommerce-reports-page .chart-bar {
    max-width: 24px;
  }
  .ecommerce-reports-page .chart-total {
    text-align: left;
  }
  .ecommerce-reports-page .status-total strong {
    font-size: 22px;
  }
  .ecommerce-reports-page .status-total span {
    font-size: 14px;
  }
  .ecommerce-reports-page .status-item strong {
    font-size: 14px;
  }
  .ecommerce-reports-page .status-item-info > span:last-child {
    font-size: 14px;
  }
  .ecommerce-reports-page .status-dot {
    width: 8px;
    height: 8px;
    flex-basis: 8px;
  }
}

.smart-buy-reports-page {
  font-family: "Poppins", sans-serif;
  color: #555555;
}
.smart-buy-reports-page .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.smart-buy-reports-page .page-header-content .page-subtitle {
  display: block;
  margin-bottom: 6px;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}
.smart-buy-reports-page .page-header-content h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.smart-buy-reports-page .page-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.smart-buy-reports-page .page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.smart-buy-reports-page .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.smart-buy-reports-page .btn-outline {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.smart-buy-reports-page .btn-outline:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.smart-buy-reports-page .report-date-filter {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
}
.smart-buy-reports-page .report-date-filter > i {
  color: #177245;
  font-size: 14px;
}
.smart-buy-reports-page .report-date-filter .form-control {
  min-width: 125px;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.smart-buy-reports-page .report-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.smart-buy-reports-page .report-stat-card {
  min-height: 150px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: all 0.2s ease;
}
.smart-buy-reports-page .report-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.25);
  box-shadow: 0 6px 20px rgba(16, 26, 35, 0.04);
}
.smart-buy-reports-page .stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.smart-buy-reports-page .stat-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 17px;
}
.smart-buy-reports-page .stat-icon.requests {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.smart-buy-reports-page .stat-icon.quotes {
  background: rgba(212, 175, 55, 0.14);
  color: #D4AF37;
}
.smart-buy-reports-page .stat-icon.purchases {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.smart-buy-reports-page .stat-icon.revenue {
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
}
.smart-buy-reports-page .stat-change {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-reports-page .stat-change.positive {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.smart-buy-reports-page .stat-change.negative {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.smart-buy-reports-page .stat-content .stat-label {
  display: block;
  margin-bottom: 6px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-reports-page .stat-content h3 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.smart-buy-reports-page .stat-content p {
  margin: 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.4;
}
.smart-buy-reports-page .reports-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.9fr);
  gap: 20px;
  margin-bottom: 20px;
}
.smart-buy-reports-page .secondary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.smart-buy-reports-page .dashboard-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.smart-buy-reports-page .dashboard-card-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #ddd;
}
.smart-buy-reports-page .card-header-content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.smart-buy-reports-page .card-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.smart-buy-reports-page .chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
}
.smart-buy-reports-page .chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-reports-page .chart-legend i {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
}
.smart-buy-reports-page .chart-legend .request-dot {
  background: #177245;
}
.smart-buy-reports-page .chart-legend .purchase-dot {
  background: #D4AF37;
}
.smart-buy-reports-page .activity-chart {
  height: 320px;
  display: flex;
  padding: 24px 20px 20px;
}
.smart-buy-reports-page .chart-y-axis {
  width: 40px;
  flex: 0 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 26px;
}
.smart-buy-reports-page .chart-y-axis span {
  color: rgba(85, 85, 85, 0.65);
  font-size: 14px;
  line-height: 1;
}
.smart-buy-reports-page .chart-area {
  position: relative;
  flex: 1;
  min-width: 0;
}
.smart-buy-reports-page .chart-grid-lines {
  position: absolute;
  inset: 0 0 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.smart-buy-reports-page .chart-grid-lines span {
  width: 100%;
  height: 1px;
  background: rgba(221, 221, 221, 0.7);
}
.smart-buy-reports-page .activity-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 10px;
  padding: 0 8px;
}
.smart-buy-reports-page .activity-bar-group {
  height: 100%;
  flex: 1;
  max-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.smart-buy-reports-page .activity-bars-inner {
  width: 100%;
  height: calc(100% - 25px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}
.smart-buy-reports-page .activity-bars-inner > span {
  width: 14px;
  min-height: 8px;
  display: block;
  border-radius: 4px 4px 2px 2px;
}
.smart-buy-reports-page .request-bar {
  background: #177245;
}
.smart-buy-reports-page .purchase-bar {
  background: #D4AF37;
}
.smart-buy-reports-page .chart-label {
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
}
.smart-buy-reports-page .request-status-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 24px;
}
.smart-buy-reports-page .status-total {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 10px;
}
.smart-buy-reports-page .status-total strong {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.smart-buy-reports-page .status-total span {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.smart-buy-reports-page .smart-status-item {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 7px;
}
.smart-buy-reports-page .smart-status-item strong {
  flex: 0 0 auto;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.smart-buy-reports-page .status-item-info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.smart-buy-reports-page .status-item-info > span:last-child {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.smart-buy-reports-page .status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  display: inline-block;
  border-radius: 50%;
}
.smart-buy-reports-page .status-dot.submitted {
  background: #0dcaf0;
}
.smart-buy-reports-page .status-dot.reviewing {
  background: #ffc107;
}
.smart-buy-reports-page .status-dot.quoted {
  background: #D4AF37;
}
.smart-buy-reports-page .status-dot.accepted {
  background: #177245;
}
.smart-buy-reports-page .status-dot.purchased {
  background: #198754;
}
.smart-buy-reports-page .status-progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  margin: 0 0 16px;
  border-radius: 20px;
  background: #F2F4F7;
}
.smart-buy-reports-page .status-progress span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
}
.smart-buy-reports-page .status-progress span.submitted {
  background: #0dcaf0;
}
.smart-buy-reports-page .status-progress span.reviewing {
  background: #ffc107;
}
.smart-buy-reports-page .status-progress span.quoted {
  background: #D4AF37;
}
.smart-buy-reports-page .status-progress span.accepted {
  background: #177245;
}
.smart-buy-reports-page .status-progress span.purchased {
  background: #198754;
}
.smart-buy-reports-page .quote-performance {
  min-height: 230px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 24px 20px;
}
.smart-buy-reports-page .conversion-circle {
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 12px solid rgba(23, 114, 69, 0.1);
  border-top-color: #177245;
  border-right-color: #177245;
  border-radius: 50%;
  text-align: center;
}
.smart-buy-reports-page .conversion-circle .conversion-value {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.smart-buy-reports-page .conversion-circle > span {
  margin-top: 5px;
  color: #555555;
  font-size: 12px;
  line-height: 1.3;
}
.smart-buy-reports-page .quote-metrics {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.smart-buy-reports-page .quote-metric {
  padding: 13px;
  border: 1px solid #ddd;
  border-radius: 7px;
}
.smart-buy-reports-page .quote-metric span {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-reports-page .quote-metric strong {
  display: block;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.smart-buy-reports-page .value-summary {
  display: flex;
  flex-direction: column;
  padding: 8px 20px;
}
.smart-buy-reports-page .value-item {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.75);
}
.smart-buy-reports-page .value-item:last-child {
  border-bottom: 0;
}
.smart-buy-reports-page .value-item > div {
  min-width: 0;
}
.smart-buy-reports-page .value-item > div span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-reports-page .value-item > div strong {
  display: block;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.smart-buy-reports-page .value-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 16px;
}
.smart-buy-reports-page .value-icon.quote {
  background: rgba(212, 175, 55, 0.14);
  color: #D4AF37;
}
.smart-buy-reports-page .value-icon.purchase {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.smart-buy-reports-page .value-icon.revenue {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.smart-buy-reports-page .recent-activity-card {
  margin-bottom: 20px;
}
.smart-buy-reports-page .activity-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.smart-buy-reports-page .activity-table {
  width: 100%;
  border-collapse: collapse;
}
.smart-buy-reports-page .activity-table th,
.smart-buy-reports-page .activity-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.85);
  text-align: left;
  white-space: nowrap;
}
.smart-buy-reports-page .activity-table th {
  background: #F2F4F7;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-reports-page .activity-table td {
  color: #555555;
  font-size: 14px;
}
.smart-buy-reports-page .activity-table tbody tr:last-child td {
  border-bottom: 0;
}
.smart-buy-reports-page .activity-table td > strong {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-reports-page .customer-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}
.smart-buy-reports-page .customer-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-reports-page .customer-cell > div strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-reports-page .customer-cell > div span {
  display: block;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
}
.smart-buy-reports-page .request-badge {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-reports-page .request-badge.purchased {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.smart-buy-reports-page .request-badge.quoted {
  background: rgba(212, 175, 55, 0.14);
  color: rgba(212, 175, 55, 0.18);
}
.smart-buy-reports-page .request-badge.reviewing {
  background: rgba(255, 193, 7, 0.13);
  color: rgba(255, 193, 7, 0.18);
}
.smart-buy-reports-page .request-badge.submitted {
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
}
.smart-buy-reports-page .payment-summary-card {
  margin-bottom: 20px;
}
.smart-buy-reports-page .view-report-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.smart-buy-reports-page .view-report-link:hover {
  color: rgba(23, 114, 69, 0.8);
}
.smart-buy-reports-page .payment-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}
.smart-buy-reports-page .payment-summary-item {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.smart-buy-reports-page .summary-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 16px;
}
.smart-buy-reports-page .summary-icon.paid {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.smart-buy-reports-page .summary-icon.pending {
  background: rgba(255, 193, 7, 0.13);
  color: rgba(255, 193, 7, 0.18);
}
.smart-buy-reports-page .summary-icon.failed {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.smart-buy-reports-page .summary-icon.revenue {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.smart-buy-reports-page .payment-summary-item > div span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-reports-page .payment-summary-item > div strong {
  display: block;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
}
@media (max-width: 1200px) {
  .smart-buy-reports-page .report-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smart-buy-reports-page .reports-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-reports-page .secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smart-buy-reports-page .payment-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .smart-buy-reports-page .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-reports-page .page-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .smart-buy-reports-page .report-date-filter {
    flex: 1;
  }
  .smart-buy-reports-page .report-date-filter .form-control {
    width: 100%;
  }
  .smart-buy-reports-page .secondary-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-reports-page .quote-performance {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-reports-page .conversion-circle {
    width: 130px;
    height: 130px;
    flex-basis: 130px;
  }
  .smart-buy-reports-page .quote-metrics {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .smart-buy-reports-page .report-stat-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-reports-page .payment-summary-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-reports-page .dashboard-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-reports-page .chart-legend {
    flex-wrap: wrap;
  }
  .smart-buy-reports-page .activity-chart {
    height: 270px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .smart-buy-reports-page .chart-y-axis {
    width: 35px;
    flex-basis: 35px;
  }
  .smart-buy-reports-page .activity-bars {
    gap: 5px;
    padding-left: 3px;
    padding-right: 3px;
  }
  .smart-buy-reports-page .activity-bars-inner > span {
    width: 11px;
  }
  .smart-buy-reports-page .quote-performance {
    padding: 20px 18px;
  }
  .smart-buy-reports-page .quote-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smart-buy-reports-page .request-status-content {
    padding: 20px 18px 22px;
  }
}
@media (max-width: 480px) {
  .smart-buy-reports-page .page-header-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .smart-buy-reports-page .report-date-filter,
  .smart-buy-reports-page .btn {
    width: 100%;
  }
  .smart-buy-reports-page .activity-chart {
    height: 240px;
  }
  .smart-buy-reports-page .chart-label {
    font-size: 14px;
  }
  .smart-buy-reports-page .quote-metrics {
    grid-template-columns: 1fr;
  }
  .smart-buy-reports-page .conversion-circle {
    width: 120px;
    height: 120px;
    flex-basis: 120px;
  }
  .smart-buy-reports-page .value-item > div strong {
    font-size: 18px;
  }
  .smart-buy-reports-page .payment-summary-grid {
    padding: 16px;
  }
}

/*
|--------------------------------------------------------------------------
| CUSTOMER NOTIFICATIONS
|--------------------------------------------------------------------------
*/
.customer-notifications-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding-bottom: 30px;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .customer-notifications-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.customer-notifications-page .customer-notifications-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-notifications-page .customer-notifications-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-notifications-page .customer-notifications-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .customer-notifications-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.customer-notifications-page .customer-notifications-header__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-notifications-page .customer-notifications-header h1 {
  margin: 0 0 6px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-notifications-page .customer-notifications-header p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | MARK ALL
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notifications-mark-all {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(15, 61, 46, 0.18);
  border-radius: 6px;
  background: #fff;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.customer-notifications-page .notifications-mark-all:hover {
  background: rgba(15, 61, 46, 0.05);
}
.customer-notifications-page .notifications-mark-all.completed {
  background: rgba(15, 61, 46, 0.06);
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | SUMMARY
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .customer-notifications-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}
.customer-notifications-page .notification-summary-card {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fff;
}
.customer-notifications-page .notification-summary-card__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 19px;
}
.customer-notifications-page .notification-summary-card span {
  display: block;
  margin-bottom: 3px;
  color: #888;
  font-size: 14px;
}
.customer-notifications-page .notification-summary-card strong {
  display: block;
  color: #0D2B5A;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | LAYOUT
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .customer-notifications-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.customer-notifications-page .customer-notifications-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | COMMON CARD
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .customer-notifications-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-notifications-page .customer-notifications-card__header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 16px;
  border-bottom: 1px solid #ddd;
}
.customer-notifications-page .customer-notifications-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-notifications-page .customer-notifications-card__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | FILTER
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notifications-filter {
  position: relative;
}
.customer-notifications-page .notifications-filter select {
  width: 125px;
  height: 36px;
  appearance: none;
  padding: 0 29px 0 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.customer-notifications-page .notifications-filter select:focus {
  border-color: rgba(15, 61, 46, 0.35);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.05);
}
.customer-notifications-page .notifications-filter i {
  position: absolute;
  top: 50%;
  right: 8px;
  color: #888;
  font-size: 15px;
  transform: translateY(-50%);
  pointer-events: none;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | GROUP
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notification-group {
  border-bottom: 1px solid #eee;
}
.customer-notifications-page .notification-group:last-of-type {
  border-bottom: 0;
}
.customer-notifications-page .notification-group__title {
  padding: 12px 16px 8px;
  color: #888;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | NOTIFICATION ITEM
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notification-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.customer-notifications-page .notification-item:hover {
  background: #fafcfb;
}
.customer-notifications-page .notification-item.unread {
  background: rgba(15, 61, 46, 0.025);
}
.customer-notifications-page .notification-item.unread::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #177245;
}
.customer-notifications-page .notification-item.unread .notification-item__content h3 {
  font-weight: 700;
}
.customer-notifications-page .notification-item__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 17px;
}
.customer-notifications-page .notification-item__icon.order {
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
}
.customer-notifications-page .notification-item__icon.shipment {
  background: rgba(55, 110, 155, 0.08);
  color: #4f7395;
}
.customer-notifications-page .notification-item__icon.payment {
  background: rgba(150, 115, 40, 0.09);
  color: #9a7629;
}
.customer-notifications-page .notification-item__icon.account {
  background: rgba(80, 80, 130, 0.08);
  color: #5d6291;
}
.customer-notifications-page .notification-item__content {
  min-width: 0;
  flex: 1;
}
.customer-notifications-page .notification-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 4px;
}
.customer-notifications-page .notification-item__top h3 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}
.customer-notifications-page .notification-item__top > span {
  flex: 0 0 auto;
  color: #999;
  font-size: 14px;
  white-space: nowrap;
}
.customer-notifications-page .notification-item p {
  margin: 0 0 7px !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | ACTION
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notification-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #177245 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-notifications-page .notification-action i {
  font-size: 14px;
  transition: transform 0.2s ease;
}
.customer-notifications-page .notification-action:hover i {
  transform: translateX(2px);
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | MORE BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notification-more {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #999;
  cursor: pointer;
}
.customer-notifications-page .notification-more:hover {
  background: #f2f2f2;
  color: #0D2B5A;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | PAGINATION
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .customer-notifications-pagination {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 16px;
  border-top: 1px solid #ddd;
}
.customer-notifications-page .customer-notifications-pagination > span {
  color: #888;
  font-size: 14px;
}
.customer-notifications-page .customer-notifications-pagination > div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.customer-notifications-page .customer-notifications-pagination > div button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #666;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.customer-notifications-page .customer-notifications-pagination > div button:hover:not(:disabled) {
  border-color: #177245;
  color: #177245;
}
.customer-notifications-page .customer-notifications-pagination > div button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.customer-notifications-page .customer-notifications-pagination > div button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.customer-notifications-page .customer-notifications-pagination > div > span {
  padding: 0 2px;
  color: #999;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | NOTIFICATION SETTINGS
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notification-settings .customer-notifications-card__header > i {
  color: #888;
  font-size: 18px;
}
.customer-notifications-page .notification-setting {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #eee;
}
.customer-notifications-page .notification-setting:last-child {
  border-bottom: 0;
}
.customer-notifications-page .notification-setting strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.customer-notifications-page .notification-setting > div span {
  display: block;
  color: #999;
  font-size: 14px;
  line-height: 1.3;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | SWITCH
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notification-switch {
  position: relative;
  width: 38px;
  height: 21px;
  flex: 0 0 38px;
  display: block;
  cursor: pointer;
}
.customer-notifications-page .notification-switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.customer-notifications-page .notification-switch > span {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: #ddd;
  transition: background 0.2s ease;
}
.customer-notifications-page .notification-switch > span::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}
.customer-notifications-page .notification-switch input:checked + span {
  background: #177245;
}
.customer-notifications-page .notification-switch input:checked + span::before {
  transform: translateX(17px);
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | INFO BOX
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notification-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 9px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-notifications-page .notification-info-box__icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 17px;
}
.customer-notifications-page .notification-info-box strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-notifications-page .notification-info-box p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.customer-notifications-page {
  /*
  |--------------------------------------------------------------------------
  | HELP
  |--------------------------------------------------------------------------
  */
}
.customer-notifications-page .notification-help-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fff;
}
.customer-notifications-page .notification-help-box__icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f5f5f5;
  color: #0D2B5A;
  font-size: 17px;
}
.customer-notifications-page .notification-help-box strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
}
.customer-notifications-page .notification-help-box p {
  margin: 0 0 6px !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.customer-notifications-page .notification-help-box a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1000px) {
  .customer-notifications-page .customer-notifications-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 850px) {
  .customer-notifications-page .customer-notifications-layout {
    grid-template-columns: 1fr;
  }
  .customer-notifications-page .customer-notifications-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .customer-notifications-page .notification-settings {
    grid-column: 1/-1;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-notifications-page .customer-notifications-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-notifications-page .notifications-mark-all {
    width: 100%;
  }
  .customer-notifications-page .customer-notifications-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .customer-notifications-page .customer-notifications-layout {
    grid-template-columns: 1fr;
  }
  .customer-notifications-page .customer-notifications-sidebar {
    display: flex;
    flex-direction: column;
  }
  .customer-notifications-page .notification-item {
    padding: 12px 14px;
  }
  .customer-notifications-page .notification-item__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .customer-notifications-page .notification-item__top > span {
    font-size: 14px;
  }
  .customer-notifications-page .customer-notifications-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-notifications-page .customer-notifications-header h1 {
    font-size: 22px !important;
  }
  .customer-notifications-page .customer-notifications-card__header {
    padding: 13px 14px;
  }
  .customer-notifications-page .customer-notifications-card__header h2 {
    font-size: 19px !important;
  }
  .customer-notifications-page .notifications-filter select {
    width: 115px;
  }
  .customer-notifications-page .notification-summary-card {
    min-height: 70px;
    padding: 12px;
  }
  .customer-notifications-page .notification-summary-card__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .customer-notifications-page .notification-summary-card strong {
    font-size: 19px;
  }
  .customer-notifications-page .notification-item__icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
    font-size: 16px;
  }
  .customer-notifications-page .notification-more {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-notifications-page .customer-notifications-header h1 {
    font-size: 21px !important;
  }
  .customer-notifications-page .notification-item {
    gap: 8px;
    padding: 11px;
  }
  .customer-notifications-page .notification-item__content h3 {
    font-size: 14px !important;
  }
}
/*================================*
* Admin Dashboard
*=================================*/
.admin-dashboard {
  /*================================*
  * Dashboard Header
  *=================================*/
}
.admin-dashboard .dashboard-header {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 767px) {
  .admin-dashboard .dashboard-header {
    margin-bottom: 20px;
    flex-direction: column;
    gap: 15px;
  }
}
.admin-dashboard .dashboard-header__content .dashboard-label {
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-dashboard .dashboard-header__content h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.admin-dashboard .dashboard-header__content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.admin-dashboard {
  /*================================*
  * Date Filter
  *=================================*/
}
.admin-dashboard .dashboard-date {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.admin-dashboard .dashboard-date i {
  color: #177245;
  font-size: 16px;
}
@media (max-width: 767px) {
  .admin-dashboard .dashboard-date {
    width: 100%;
    justify-content: center;
  }
}
.admin-dashboard {
  /*================================*
  * Statistics Grid
  *=================================*/
}
.admin-dashboard .dashboard-stats {
  margin-bottom: 24px;
}
.admin-dashboard .stat-card {
  height: 100%;
  min-height: 145px;
  padding: 16px;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.admin-dashboard .stat-card:hover {
  border-color: rgba(23, 114, 69, 0.2);
  box-shadow: 0 8px 22px rgba(16, 26, 35, 0.05);
  transform: translateY(-2px);
}
.admin-dashboard .stat-card__top {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-dashboard .stat-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.admin-dashboard .stat-card__icon i {
  font-size: 17px;
  line-height: 1;
}
.admin-dashboard .stat-card__icon--yellow {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
.admin-dashboard .stat-card__icon--green {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.admin-dashboard .stat-card__growth {
  color: #198754;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.admin-dashboard .stat-card__growth i {
  margin-right: 3px;
  font-size: 14px;
}
.admin-dashboard .stat-card__label {
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.admin-dashboard .stat-card__value {
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}
.admin-dashboard .stat-card__meta {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.admin-dashboard {
  /*================================*
  * Dashboard Section
  *=================================*/
}
.admin-dashboard .dashboard-section {
  margin-bottom: 24px;
}
.admin-dashboard .dashboard-section__header {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
}
@media (max-width: 767px) {
  .admin-dashboard .dashboard-section__header {
    align-items: flex-start;
    flex-direction: column;
  }
}
.admin-dashboard .dashboard-section__title h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.admin-dashboard .dashboard-section__title p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.admin-dashboard .dashboard-section__link {
  color: #177245;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.admin-dashboard .dashboard-section__link i {
  font-size: 15px;
  transition: transform 0.2s ease;
}
.admin-dashboard .dashboard-section__link:hover {
  color: #D4AF37;
}
.admin-dashboard .dashboard-section__link:hover i {
  transform: translateX(2px);
}
.admin-dashboard {
  /*================================*
  * Dashboard Card
  *=================================*/
}
.admin-dashboard .dashboard-card {
  height: 100%;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.admin-dashboard .dashboard-card__header {
  min-height: 62px;
  padding: 14px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
@media (max-width: 767px) {
  .admin-dashboard .dashboard-card__header {
    align-items: flex-start;
    flex-direction: column;
  }
}
.admin-dashboard .dashboard-card__heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-dashboard .dashboard-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
}
.admin-dashboard .dashboard-card__icon i {
  font-size: 16px;
}
.admin-dashboard .dashboard-card__icon--yellow {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
.admin-dashboard .dashboard-card__title h3 {
  margin: 0 0 2px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.admin-dashboard .dashboard-card__title p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}
.admin-dashboard .dashboard-card__action {
  color: #177245;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.admin-dashboard .dashboard-card__action i {
  font-size: 15px;
}
.admin-dashboard .dashboard-card__action:hover {
  color: #D4AF37;
}
.admin-dashboard {
  /*================================*
  * Operations Overview
  *=================================*/
}
.admin-dashboard .operation-list {
  padding: 0 14px;
}
.admin-dashboard .operation-item {
  min-height: 40px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.admin-dashboard .operation-item:last-child {
  border-bottom: 0;
}
@media (max-width: 767px) {
  .admin-dashboard .operation-item {
    grid-template-columns: 1fr auto;
    padding: 9px 0;
  }
}
.admin-dashboard .operation-item__label {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.admin-dashboard .operation-item__value {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
}
.admin-dashboard .operation-item__value--warning {
  color: #ffc107;
}
.admin-dashboard .operation-item__value--success {
  color: #198754;
}
.admin-dashboard {
  /*================================*
  * Orders Table
  *=================================*/
}
.admin-dashboard .dashboard-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
.admin-dashboard .dashboard-table thead th {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.08);
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-dashboard .dashboard-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.admin-dashboard .dashboard-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-dashboard .dashboard-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.02);
}
.admin-dashboard .order-id {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.admin-dashboard .order-id:hover {
  color: #177245;
}
.admin-dashboard .order-amount {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.admin-dashboard {
  /*================================*
  * Status Badge
  *=================================*/
}
.admin-dashboard .status-badge {
  padding: 4px 9px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.admin-dashboard .status-badge--completed, .admin-dashboard .status-badge--paid, .admin-dashboard .status-badge--purchased {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.admin-dashboard .status-badge--processing, .admin-dashboard .status-badge--review {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
.admin-dashboard .status-badge--shipped, .admin-dashboard .status-badge--quote {
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.admin-dashboard .status-badge--pending {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}
.admin-dashboard {
  /*================================*
  * Request List
  *=================================*/
}
.admin-dashboard .request-list {
  padding: 5px 14px;
}
.admin-dashboard .request-item {
  min-height: 58px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-dashboard .request-item:last-child {
  border-bottom: 0;
}
.admin-dashboard .request-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 193, 7, 0.08);
  color: #ffc107;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
}
.admin-dashboard .request-item__icon i {
  font-size: 16px;
}
.admin-dashboard .request-item__content {
  min-width: 0;
  flex: 1;
}
.admin-dashboard .request-item__content h4 {
  margin: 0 0 2px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.admin-dashboard .request-item__content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-dashboard {
  /*================================*
  * Shipment Card
  *=================================*/
}
.admin-dashboard .shipment-card {
  padding: 14px;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 10px;
  background: #fff;
  height: 100%;
}
.admin-dashboard .shipment-card__header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-dashboard .shipment-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
}
.admin-dashboard .shipment-card__icon i {
  font-size: 16px;
}
.admin-dashboard .shipment-card__icon--yellow {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
.admin-dashboard .shipment-card__heading h3 {
  margin: 0 0 2px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.admin-dashboard .shipment-card__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.admin-dashboard .shipment-stats {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.admin-dashboard .shipment-stat {
  min-width: 0;
  padding: 0 10px;
  border-right: 1px solid rgba(16, 26, 35, 0.08);
}
.admin-dashboard .shipment-stat:first-child {
  padding-left: 0;
}
.admin-dashboard .shipment-stat:last-child {
  padding-right: 0;
  border-right: 0;
}
.admin-dashboard .shipment-stat strong {
  margin-bottom: 4px;
  color: #0D2B5A;
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.admin-dashboard .shipment-stat span {
  color: #555555;
  display: block;
  font-size: 14px;
  line-height: 1.4;
}
.admin-dashboard .shipment-progress {
  margin-top: 4px;
}
.admin-dashboard .shipment-progress__header {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.admin-dashboard .shipment-progress__header span {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.admin-dashboard .shipment-progress__header strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.admin-dashboard .progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 10px;
  background: rgba(16, 26, 35, 0.07);
  overflow: hidden;
}
.admin-dashboard .progress-bar__value {
  height: 100%;
  border-radius: inherit;
  background: #177245;
}
.admin-dashboard {
  /*================================*
  * Recent Payments
  *=================================*/
}
.admin-dashboard .payment-list {
  padding: 5px 14px;
}
.admin-dashboard .payment-item {
  min-height: 58px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-dashboard .payment-item:last-child {
  border-bottom: 0;
}
.admin-dashboard .payment-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
}
.admin-dashboard .payment-item__icon i {
  font-size: 16px;
}
.admin-dashboard .payment-item__content {
  min-width: 0;
  flex: 1;
}
.admin-dashboard .payment-item__content strong {
  margin-bottom: 2px;
  color: #0D2B5A;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.admin-dashboard .payment-item__content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.admin-dashboard .payment-item__amount {
  color: #198754;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.admin-dashboard {
  /*================================*
  * Recent Activity
  *=================================*/
}
.admin-dashboard .activity-list {
  padding: 5px 14px;
}
.admin-dashboard .activity-item {
  position: relative;
  min-height: 70px;
  padding: 10px 0 10px 14px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
}
.admin-dashboard .activity-item:last-child {
  border-bottom: 0;
}
.admin-dashboard .activity-item::before {
  position: absolute;
  top: 17px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #177245;
  content: "";
}
.admin-dashboard .activity-item--success::before {
  background: #198754;
}
.admin-dashboard .activity-item--warning::before {
  background: #ffc107;
}
.admin-dashboard .activity-item h4 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.admin-dashboard .activity-item p {
  margin: 0 0 3px;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}
.admin-dashboard .activity-item time {
  color: #555555;
  display: block;
  font-size: 14px;
  line-height: 1.4;
}
.admin-dashboard {
  /*================================*
  * Responsive Table
  *=================================*/
}
@media (min-width: 768px) and (max-width: 991px) {
  .admin-dashboard .dashboard-table {
    min-width: 650px;
  }
  .admin-dashboard .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767px) {
  .admin-dashboard .stat-card {
    min-height: 135px;
    padding: 14px;
  }
  .admin-dashboard .stat-card__value {
    font-size: 18px;
  }
  .admin-dashboard .dashboard-card__header {
    padding: 13px;
  }
  .admin-dashboard .operation-list,
  .admin-dashboard .request-list,
  .admin-dashboard .payment-list,
  .admin-dashboard .activity-list {
    padding-right: 13px;
    padding-left: 13px;
  }
  .admin-dashboard .shipment-card {
    padding: 13px;
  }
  .admin-dashboard .shipment-stats {
    gap: 0;
  }
  .admin-dashboard .shipment-stat {
    padding-right: 7px;
    padding-left: 7px;
  }
}

/*================================*
* Customer Dashboard
*=================================*/
.customer-dashboard {
  width: 100%;
  /*================================*
  * Dashboard Header
  *=================================*/
}
.customer-dashboard__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .customer-dashboard__header {
    flex-direction: column;
    align-items: flex-start;
  }
}
.customer-dashboard__header-content {
  min-width: 0;
}
.customer-dashboard__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.customer-dashboard h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.customer-dashboard__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.customer-dashboard__date {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.customer-dashboard__date i {
  color: #177245;
  font-size: 16px;
  line-height: 1;
}
.customer-dashboard {
  /*================================*
  * Dashboard Statistics
  *=================================*/
}
.customer-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .customer-dashboard__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.customer-dashboard {
  /*================================*
  * Quick Actions
  *=================================*/
}
.customer-dashboard__quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .customer-dashboard__quick-actions {
    grid-template-columns: 1fr;
  }
}
.customer-dashboard {
  /*================================*
  * Main Grid
  *=================================*/
}
.customer-dashboard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .customer-dashboard__grid {
    grid-template-columns: 1fr;
  }
}
.customer-dashboard {
  /*================================*
  * Section
  *=================================*/
}
.customer-dashboard__section {
  margin-bottom: 24px;
}
.customer-dashboard__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.customer-dashboard__section-header h4 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-dashboard__section-header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.customer-dashboard__section-header > a {
  color: #177245;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.customer-dashboard__section-header > a i {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.customer-dashboard__section-header > a:hover {
  color: #D4AF37;
}
.customer-dashboard__section-header > a:hover i {
  transform: translateX(3px);
}
.customer-dashboard {
  /*================================*
  * Bottom Grid
  *=================================*/
}
.customer-dashboard__bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 767px) {
  .customer-dashboard__bottom-grid {
    grid-template-columns: 1fr;
  }
}

/*================================*
* Statistic Card
*=================================*/
.customer-stat-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.customer-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.35);
  box-shadow: 0 8px 24px rgba(16, 26, 35, 0.05);
  transform: translateY(-2px);
}
.customer-stat-card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.customer-stat-card__icon i {
  font-size: 20px;
  line-height: 1;
}
.customer-stat-card__icon.ecommerce {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.customer-stat-card__icon.smart-buy {
  background: rgba(212, 175, 55, 0.1);
  color: #D4AF37;
}
.customer-stat-card__icon.payment {
  background: rgba(255, 193, 7, 0.1);
  color: #947000;
}
.customer-stat-card__icon.shipment {
  background: rgba(13, 202, 240, 0.09);
  color: #087f99;
}
.customer-stat-card__content {
  min-width: 0;
}
.customer-stat-card__content > span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-stat-card__content h3 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}
.customer-stat-card__content small {
  display: block;
  color: rgba(85, 85, 85, 0.75);
  font-size: 14px;
  line-height: 1.4;
}

/*================================*
* Quick Action Card
*=================================*/
.customer-action-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  color: #555555;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.customer-action-card:hover {
  border-color: rgba(23, 114, 69, 0.4);
  box-shadow: 0 8px 24px rgba(16, 26, 35, 0.05);
  transform: translateY(-2px);
}
.customer-action-card:hover .customer-action-card__arrow {
  color: #177245;
}
.customer-action-card:hover .customer-action-card__arrow i {
  transform: translateX(3px);
}
.customer-action-card__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.customer-action-card__icon i {
  font-size: 18px;
  line-height: 1;
}
.customer-action-card__icon.ecommerce {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.customer-action-card__icon.smart-buy {
  background: rgba(212, 175, 55, 0.1);
  color: #D4AF37;
}
.customer-action-card__icon.shipment {
  background: rgba(13, 202, 240, 0.09);
  color: #087f99;
}
.customer-action-card__content {
  min-width: 0;
  flex: 1;
}
.customer-action-card__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-action-card__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-action-card__arrow {
  color: rgba(85, 85, 85, 0.55);
  flex: 0 0 auto;
}
.customer-action-card__arrow i {
  display: block;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

/*================================*
* Dashboard Card
*=================================*/
.customer-dashboard-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.customer-dashboard-card__header {
  min-height: 72px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.customer-dashboard-card__header h4 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-dashboard-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}
.customer-dashboard-card__header > a {
  color: #177245;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.customer-dashboard-card__header > a i {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.customer-dashboard-card__header > a:hover {
  color: #D4AF37;
}
.customer-dashboard-card__header > a:hover i {
  transform: translateX(3px);
}

/*================================*
* Orders Table
*=================================*/
.customer-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.customer-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
}
.customer-table th,
.customer-table td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
}
.customer-table th {
  background: rgba(242, 244, 247, 0.8);
  color: rgba(85, 85, 85, 0.85);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.customer-table td strong {
  color: #0D2B5A;
  font-weight: 700;
}
.customer-table tbody tr {
  transition: background 0.2s ease;
}
.customer-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.025);
}
.customer-table tbody tr:last-child td {
  border-bottom: 0;
}

/*================================*
* Status
*=================================*/
.customer-status {
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.customer-status i {
  font-size: 14px;
  line-height: 1;
}
.customer-status.success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.customer-status.warning {
  background: rgba(255, 193, 7, 0.11);
  color: #947000;
}
.customer-status.info {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.customer-status.danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/*================================*
* Smart Buy Request List
*=================================*/
.customer-request-list {
  padding: 5px 18px 8px;
}

.customer-request-item {
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  display: flex;
  align-items: center;
  gap: 11px;
}
.customer-request-item:last-child {
  border-bottom: 0;
}
.customer-request-item__icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border-radius: 9px;
  background: rgba(212, 175, 55, 0.1);
  color: #D4AF37;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.customer-request-item__icon i {
  font-size: 18px;
  line-height: 1;
}
.customer-request-item__content {
  min-width: 0;
  flex: 1;
}
.customer-request-item__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-request-item__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*================================*
* Shipment Grid
*=================================*/
.customer-shipment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 767px) {
  .customer-shipment-grid {
    grid-template-columns: 1fr;
  }
}

/*================================*
* Shipment Card
*=================================*/
.customer-shipment-card {
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.customer-shipment-card__header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
}
.customer-shipment-card__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.customer-shipment-card__icon i {
  font-size: 18px;
  line-height: 1;
}
.customer-shipment-card__icon.ecommerce {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.customer-shipment-card__icon.smart-buy {
  background: rgba(212, 175, 55, 0.1);
  color: #D4AF37;
}
.customer-shipment-card__title {
  min-width: 0;
  flex: 1;
}
.customer-shipment-card__title h5 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-shipment-card__title span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.customer-shipment-card__route {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.customer-shipment-card__location {
  min-width: 0;
}
.customer-shipment-card__location span {
  display: block;
  margin-bottom: 3px;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
  line-height: 1.4;
}
.customer-shipment-card__location strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-shipment-card__location.destination {
  text-align: right;
}
.customer-shipment-card__route-line {
  position: relative;
  height: 1px;
  background: rgba(23, 114, 69, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.customer-shipment-card__route-line i {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(23, 114, 69, 0.22);
  border-radius: 50%;
  background: #fff;
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.customer-shipment-card__footer {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(221, 221, 221, 0.65);
  color: #555555;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.customer-shipment-card__footer > span {
  min-width: 0;
}
.customer-shipment-card__footer strong {
  color: #0D2B5A;
  font-weight: 700;
}
.customer-shipment-card__footer a {
  color: #177245;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.customer-shipment-card__footer a i {
  font-size: 14px;
  transition: transform 0.2s ease;
}
.customer-shipment-card__footer a:hover {
  color: #D4AF37;
}
.customer-shipment-card__footer a:hover i {
  transform: translateX(3px);
}

/*================================*
* Shipment Progress
*=================================*/
.customer-progress__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.customer-progress__top span {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.customer-progress__top strong {
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-progress__bar {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 20px;
  background: #F2F4F7;
}
.customer-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #177245;
}

/*================================*
* Payment List
*=================================*/
.customer-payment-list {
  padding: 5px 18px 8px;
}

.customer-payment-item {
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  display: flex;
  align-items: center;
  gap: 11px;
}
.customer-payment-item:last-child {
  border-bottom: 0;
}
.customer-payment-item__icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border-radius: 9px;
  background: rgba(255, 193, 7, 0.1);
  color: #947000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.customer-payment-item__icon i {
  font-size: 18px;
  line-height: 1;
}
.customer-payment-item__content {
  min-width: 0;
  flex: 1;
}
.customer-payment-item__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-payment-item__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.customer-payment-item__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
}
.customer-payment-item__amount strong {
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-payment-item__amount a {
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
}
.customer-payment-item__amount a:hover {
  color: #D4AF37;
  text-decoration: underline;
}

/*================================*
* Account Summary
*=================================*/
.customer-account-summary {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.customer-account-summary__avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}
.customer-account-summary__content {
  min-width: 0;
}
.customer-account-summary__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-account-summary__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*================================*
* Account Links
*=================================*/
.customer-account-links {
  padding: 0 18px 10px;
}
.customer-account-links a {
  min-height: 44px;
  border-top: 1px solid rgba(221, 221, 221, 0.65);
  color: #555555;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.customer-account-links a > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.customer-account-links a > span i {
  color: rgba(85, 85, 85, 0.65);
  font-size: 16px;
  line-height: 1;
  transition: color 0.2s ease;
}
.customer-account-links a > i {
  color: rgba(85, 85, 85, 0.55);
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}
.customer-account-links a:hover {
  color: #177245;
}
.customer-account-links a:hover > span i,
.customer-account-links a:hover > i {
  color: #177245;
}
.customer-account-links a:hover > i {
  transform: translateX(3px);
}

/*================================*
* Responsive
*=================================*/
@media (min-width: 1400px) and (max-width: 1700px) {
  .customer-dashboard__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .customer-dashboard__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-dashboard__grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .customer-dashboard__quick-actions {
    grid-template-columns: 1fr;
  }
  .customer-shipment-grid {
    grid-template-columns: 1fr;
  }
  .customer-dashboard__bottom-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .customer-dashboard__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-dashboard__date {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .customer-dashboard__header {
    gap: 14px;
    margin-bottom: 20px;
  }
  .customer-dashboard h1 {
    font-size: 22px;
  }
  .customer-dashboard__stats {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .customer-dashboard__quick-actions {
    gap: 12px;
    margin-bottom: 20px;
  }
  .customer-dashboard__grid {
    gap: 14px;
    margin-bottom: 20px;
  }
  .customer-dashboard__section {
    margin-bottom: 20px;
  }
  .customer-dashboard__section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .customer-dashboard__bottom-grid {
    gap: 14px;
  }
  .customer-stat-card {
    padding: 16px;
  }
  .customer-dashboard-card__header {
    min-height: auto;
    padding: 15px;
  }
  .customer-request-list,
  .customer-payment-list {
    padding-right: 15px;
    padding-left: 15px;
  }
  .customer-shipment-card {
    padding: 16px;
  }
  .customer-shipment-card__header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .customer-shipment-card__header .customer-status {
    margin-left: 53px;
  }
  .customer-shipment-card__route {
    grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
    gap: 7px;
  }
  .customer-request-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .customer-request-item .customer-status {
    margin-left: 50px;
  }
  .customer-payment-item {
    align-items: flex-start;
  }
  .customer-table th,
  .customer-table td {
    padding: 12px 14px;
  }
  .customer-account-summary {
    padding: 16px;
  }
  .customer-account-links {
    padding-right: 16px;
    padding-left: 16px;
  }
}
.payments-page {
  font-family: "Poppins", sans-serif;
  color: #555555;
}
.payments-page .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.payments-page .page-header-content .page-subtitle {
  display: block;
  margin-bottom: 6px;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}
.payments-page .page-header-content h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.payments-page .page-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.payments-page .page-header-actions {
  display: flex;
  align-items: center;
}
.payments-page .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
}
.payments-page .btn i {
  font-size: 14px;
}
.payments-page .btn-outline-danger {
  border: 1px solid rgba(220, 53, 69, 0.3);
  background: #fff;
  color: #dc3545;
}
.payments-page .btn-outline-danger:hover {
  border-color: #dc3545;
  background: #dc3545;
  color: #fff;
}
.payments-page .payment-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.payments-page .payment-stat-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: all 0.2s ease;
}
.payments-page .payment-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.25);
  box-shadow: 0 5px 20px rgba(16, 26, 35, 0.04);
}
.payments-page .stat-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 18px;
}
.payments-page .stat-icon.success {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.payments-page .stat-icon.danger {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.payments-page .stat-content {
  min-width: 0;
  flex: 1;
}
.payments-page .stat-content .stat-label {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
  line-height: 1.3;
}
.payments-page .stat-content h3 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.payments-page .stat-content p {
  margin: 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}
.payments-page .stat-growth {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.payments-page .stat-growth.positive {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.payments-page .stat-growth.negative {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.payments-page .payment-transactions-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.payments-page .dashboard-card-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 18px 20px;
  border-bottom: 1px solid #ddd;
}
.payments-page .card-header-content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.payments-page .card-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.payments-page .card-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.payments-page .payment-filter .form-control {
  width: 150px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.payments-page .payment-filter .form-control:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.payments-page .table-responsive {
  width: 100%;
  overflow-x: auto;
}
.payments-page .payment-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
}
.payments-page .payment-table th,
.payments-page .payment-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
}
.payments-page .payment-table th {
  height: 48px;
  background: #F2F4F7;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.payments-page .payment-table td {
  height: 66px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.payments-page .payment-table tbody tr {
  transition: background-color 0.15s ease;
}
.payments-page .payment-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.018);
}
.payments-page .payment-table tbody tr:last-child td {
  border-bottom: 0;
}
.payments-page .transaction-id {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.payments-page .customer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}
.payments-page .customer-info .customer-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.payments-page .customer-details strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.payments-page .customer-details span {
  display: block;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
  line-height: 1.3;
}
.payments-page .payment-type {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.payments-page .payment-type.ecommerce {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.payments-page .payment-type.smart-buy {
  background: rgba(212, 175, 55, 0.14);
  color: rgba(212, 175, 55, 0.18);
}
.payments-page .payment-amount {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.payments-page .payment-method {
  display: flex;
  align-items: center;
  gap: 8px;
}
.payments-page .payment-method i {
  color: #0D2B5A;
  font-size: 20px;
}
.payments-page .payment-method span {
  color: #555555;
  font-size: 14px;
}
.payments-page .payment-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.payments-page .payment-status.success {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.payments-page .payment-status.pending {
  background: rgba(255, 193, 7, 0.13);
  color: rgba(255, 193, 7, 0.18);
}
.payments-page .payment-status.failed {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.payments-page .text-end {
  text-align: right !important;
}
.payments-page .table-action {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.payments-page .table-action:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.payments-page .table-footer {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid #ddd;
}
.payments-page .table-results {
  color: #555555;
  font-size: 14px;
}
.payments-page .pagination {
  display: flex;
  align-items: center;
  gap: 5px;
}
.payments-page .pagination button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.payments-page .pagination button i {
  font-size: 14px;
}
.payments-page .pagination button:hover:not(:disabled) {
  border-color: #177245;
  color: #177245;
}
.payments-page .pagination button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.payments-page .pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.payments-page .pagination span {
  color: #555555;
  font-size: 14px;
}
@media (max-width: 1200px) {
  .payments-page .payment-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .payments-page .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .payments-page .page-header-actions {
    width: 100%;
  }
  .payments-page .dashboard-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .payments-page .card-header-actions {
    width: 100%;
  }
  .payments-page .payment-filter {
    flex: 1;
  }
  .payments-page .payment-filter .form-control {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .payments-page .payment-stat-grid {
    grid-template-columns: 1fr;
  }
  .payments-page .card-header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .payments-page .payment-filter {
    width: 100%;
  }
  .payments-page .table-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .payments-page .pagination {
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 480px) {
  .payments-page .page-header-content h1 {
    font-size: 22px;
  }
  .payments-page .payment-stat-card {
    min-height: 115px;
    padding: 16px;
  }
  .payments-page .stat-content h3 {
    font-size: 20px;
  }
  .payments-page .dashboard-card-header {
    padding: 16px;
  }
  .payments-page .table-footer {
    padding: 14px 16px;
  }
}

.ecommerce-payments-page {
  font-family: "Poppins", sans-serif;
  color: #555555;
}
.ecommerce-payments-page .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.ecommerce-payments-page .page-header-content .page-subtitle {
  display: block;
  margin-bottom: 6px;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ecommerce-payments-page .page-header-content h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.ecommerce-payments-page .page-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.ecommerce-payments-page .page-header-actions {
  display: flex;
  align-items: center;
}
.ecommerce-payments-page .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ecommerce-payments-page .btn-outline {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.ecommerce-payments-page .btn-outline:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.ecommerce-payments-page .payment-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.ecommerce-payments-page .payment-stat-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: all 0.2s ease;
}
.ecommerce-payments-page .payment-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.25);
  box-shadow: 0 5px 20px rgba(16, 26, 35, 0.04);
}
.ecommerce-payments-page .stat-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 18px;
}
.ecommerce-payments-page .stat-icon.success {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.ecommerce-payments-page .stat-icon.danger {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.ecommerce-payments-page .stat-content {
  min-width: 0;
  flex: 1;
}
.ecommerce-payments-page .stat-content .stat-label {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
}
.ecommerce-payments-page .stat-content h3 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.ecommerce-payments-page .stat-content p {
  margin: 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}
.ecommerce-payments-page .stat-growth {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
}
.ecommerce-payments-page .stat-growth.positive {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.ecommerce-payments-page .stat-growth.negative {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.ecommerce-payments-page .ecommerce-transactions-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.ecommerce-payments-page .dashboard-card-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 18px 20px;
  border-bottom: 1px solid #ddd;
}
.ecommerce-payments-page .card-header-content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.ecommerce-payments-page .card-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
}
.ecommerce-payments-page .card-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ecommerce-payments-page .payment-filter .form-control {
  width: 150px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.ecommerce-payments-page .payment-filter .form-control:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.ecommerce-payments-page .table-responsive {
  width: 100%;
  overflow-x: auto;
}
.ecommerce-payments-page .payment-table {
  width: 100%;
  min-width: 1150px;
  border-collapse: collapse;
}
.ecommerce-payments-page .payment-table th,
.ecommerce-payments-page .payment-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
}
.ecommerce-payments-page .payment-table th {
  height: 48px;
  background: #F2F4F7;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.ecommerce-payments-page .payment-table td {
  height: 66px;
  color: #555555;
  font-size: 14px;
  white-space: nowrap;
}
.ecommerce-payments-page .payment-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.018);
}
.ecommerce-payments-page .payment-table tbody tr:last-child td {
  border-bottom: 0;
}
.ecommerce-payments-page .transaction-id,
.ecommerce-payments-page .order-id {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.ecommerce-payments-page .customer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
}
.ecommerce-payments-page .customer-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.ecommerce-payments-page .customer-details strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.ecommerce-payments-page .customer-details span {
  display: block;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
}
.ecommerce-payments-page .payment-amount {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.ecommerce-payments-page .payment-method {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ecommerce-payments-page .payment-method i {
  color: #0D2B5A;
  font-size: 20px;
}
.ecommerce-payments-page .payment-method span {
  color: #555555;
  font-size: 14px;
}
.ecommerce-payments-page .payment-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.ecommerce-payments-page .payment-status.success {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.ecommerce-payments-page .payment-status.pending {
  background: rgba(255, 193, 7, 0.13);
  color: rgba(255, 193, 7, 0.18);
}
.ecommerce-payments-page .payment-status.failed {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.ecommerce-payments-page .text-end {
  text-align: right !important;
}
.ecommerce-payments-page .table-action {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ecommerce-payments-page .table-action:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.ecommerce-payments-page .table-footer {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid #ddd;
}
.ecommerce-payments-page .table-results {
  color: #555555;
  font-size: 14px;
}
.ecommerce-payments-page .pagination {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ecommerce-payments-page .pagination button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.ecommerce-payments-page .pagination button:hover:not(:disabled) {
  border-color: #177245;
  color: #177245;
}
.ecommerce-payments-page .pagination button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.ecommerce-payments-page .pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ecommerce-payments-page .pagination span {
  color: #555555;
  font-size: 14px;
}
@media (max-width: 1200px) {
  .ecommerce-payments-page .payment-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .ecommerce-payments-page .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .ecommerce-payments-page .page-header-actions {
    width: 100%;
  }
  .ecommerce-payments-page .dashboard-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .ecommerce-payments-page .card-header-actions {
    width: 100%;
  }
  .ecommerce-payments-page .payment-filter {
    flex: 1;
  }
  .ecommerce-payments-page .payment-filter .form-control {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .ecommerce-payments-page .payment-stat-grid {
    grid-template-columns: 1fr;
  }
  .ecommerce-payments-page .card-header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ecommerce-payments-page .payment-filter {
    width: 100%;
  }
  .ecommerce-payments-page .table-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .ecommerce-payments-page .pagination {
    width: 100%;
    justify-content: flex-end;
  }
}

.smart-buy-payments-page {
  font-family: "Poppins", sans-serif;
  color: #555555;
}
.smart-buy-payments-page .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.smart-buy-payments-page .page-header-content .page-subtitle {
  display: block;
  margin-bottom: 6px;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}
.smart-buy-payments-page .page-header-content h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.smart-buy-payments-page .page-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.smart-buy-payments-page .page-header-actions {
  display: flex;
  align-items: center;
}
.smart-buy-payments-page .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.smart-buy-payments-page .btn-outline {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.smart-buy-payments-page .btn-outline:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.smart-buy-payments-page .payment-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.smart-buy-payments-page .payment-stat-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: all 0.2s ease;
}
.smart-buy-payments-page .payment-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.25);
  box-shadow: 0 5px 20px rgba(16, 26, 35, 0.04);
}
.smart-buy-payments-page .stat-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 18px;
}
.smart-buy-payments-page .stat-icon.gold {
  background: rgba(212, 175, 55, 0.13);
  color: #D4AF37;
}
.smart-buy-payments-page .stat-icon.success {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.smart-buy-payments-page .stat-icon.danger {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.smart-buy-payments-page .stat-content {
  min-width: 0;
  flex: 1;
}
.smart-buy-payments-page .stat-content .stat-label {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
  line-height: 1.3;
}
.smart-buy-payments-page .stat-content h3 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.smart-buy-payments-page .stat-content p {
  margin: 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}
.smart-buy-payments-page .stat-growth {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.smart-buy-payments-page .stat-growth.positive {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.smart-buy-payments-page .stat-growth.negative {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.smart-buy-payments-page .smart-buy-transactions-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.smart-buy-payments-page .dashboard-card-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 18px 20px;
  border-bottom: 1px solid #ddd;
}
.smart-buy-payments-page .card-header-content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.smart-buy-payments-page .card-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.smart-buy-payments-page .card-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.smart-buy-payments-page .payment-filter .form-control {
  width: 150px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.smart-buy-payments-page .payment-filter .form-control:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.smart-buy-payments-page .table-responsive {
  width: 100%;
  overflow-x: auto;
}
.smart-buy-payments-page .payment-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
}
.smart-buy-payments-page .payment-table th,
.smart-buy-payments-page .payment-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
}
.smart-buy-payments-page .payment-table th {
  height: 48px;
  background: #F2F4F7;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.smart-buy-payments-page .payment-table td {
  height: 66px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.smart-buy-payments-page .payment-table tbody tr {
  transition: background-color 0.15s ease;
}
.smart-buy-payments-page .payment-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.018);
}
.smart-buy-payments-page .payment-table tbody tr:last-child td {
  border-bottom: 0;
}
.smart-buy-payments-page .transaction-id,
.smart-buy-payments-page .request-id {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-payments-page .customer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 205px;
}
.smart-buy-payments-page .customer-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-payments-page .customer-details strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.smart-buy-payments-page .customer-details span {
  display: block;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
  line-height: 1.3;
}
.smart-buy-payments-page .payment-amount {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-payments-page .payment-method {
  display: flex;
  align-items: center;
  gap: 8px;
}
.smart-buy-payments-page .payment-method i {
  color: #0D2B5A;
  font-size: 20px;
}
.smart-buy-payments-page .payment-method span {
  color: #555555;
  font-size: 14px;
}
.smart-buy-payments-page .payment-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.smart-buy-payments-page .payment-status.success {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.smart-buy-payments-page .payment-status.pending {
  background: rgba(255, 193, 7, 0.13);
  color: rgba(255, 193, 7, 0.18);
}
.smart-buy-payments-page .payment-status.failed {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.smart-buy-payments-page .text-end {
  text-align: right !important;
}
.smart-buy-payments-page .table-action {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.smart-buy-payments-page .table-action:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.smart-buy-payments-page .table-footer {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid #ddd;
}
.smart-buy-payments-page .table-results {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.smart-buy-payments-page .pagination {
  display: flex;
  align-items: center;
  gap: 5px;
}
.smart-buy-payments-page .pagination button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.smart-buy-payments-page .pagination button i {
  font-size: 14px;
}
.smart-buy-payments-page .pagination button:hover:not(:disabled) {
  border-color: #177245;
  color: #177245;
}
.smart-buy-payments-page .pagination button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.smart-buy-payments-page .pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.smart-buy-payments-page .pagination span {
  color: #555555;
  font-size: 14px;
}
@media (max-width: 1200px) {
  .smart-buy-payments-page .payment-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .smart-buy-payments-page .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-payments-page .page-header-actions {
    width: 100%;
  }
  .smart-buy-payments-page .dashboard-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-payments-page .card-header-actions {
    width: 100%;
  }
  .smart-buy-payments-page .payment-filter {
    flex: 1;
  }
  .smart-buy-payments-page .payment-filter .form-control {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .smart-buy-payments-page .payment-stat-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-payments-page .card-header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .smart-buy-payments-page .payment-filter {
    width: 100%;
  }
  .smart-buy-payments-page .table-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-payments-page .pagination {
    width: 100%;
    justify-content: flex-end;
  }
}

.failed-payments-page {
  font-family: "Poppins", sans-serif;
  color: #555555;
}
.failed-payments-page .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.failed-payments-page .page-header-content .page-subtitle {
  display: block;
  margin-bottom: 6px;
  color: #dc3545;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}
.failed-payments-page .page-header-content h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.failed-payments-page .page-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.failed-payments-page .page-header-actions {
  display: flex;
  align-items: center;
}
.failed-payments-page .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
}
.failed-payments-page .btn-outline {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.failed-payments-page .btn-outline:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.failed-payments-page .payment-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.failed-payments-page .payment-stat-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: all 0.2s ease;
}
.failed-payments-page .payment-stat-card:hover {
  border-color: rgba(220, 53, 69, 0.2);
  box-shadow: 0 5px 20px rgba(16, 26, 35, 0.04);
}
.failed-payments-page .stat-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 18px;
}
.failed-payments-page .stat-icon.danger {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.failed-payments-page .stat-icon.gold {
  background: rgba(212, 175, 55, 0.13);
  color: #D4AF37;
}
.failed-payments-page .stat-content {
  min-width: 0;
  flex: 1;
}
.failed-payments-page .stat-content .stat-label {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
  line-height: 1.3;
}
.failed-payments-page .stat-content h3 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.failed-payments-page .stat-content p {
  margin: 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}
.failed-payments-page .stat-growth {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.failed-payments-page .stat-growth.positive {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.failed-payments-page .stat-growth.negative {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.failed-payments-page .failed-transactions-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.failed-payments-page .dashboard-card-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 18px 20px;
  border-bottom: 1px solid #ddd;
}
.failed-payments-page .card-header-content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.failed-payments-page .card-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.failed-payments-page .card-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.failed-payments-page .payment-filter .form-control {
  width: 160px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.failed-payments-page .payment-filter .form-control:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.failed-payments-page .table-responsive {
  width: 100%;
  overflow-x: auto;
}
.failed-payments-page .payment-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
}
.failed-payments-page .payment-table th,
.failed-payments-page .payment-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
}
.failed-payments-page .payment-table th {
  height: 48px;
  background: #F2F4F7;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.failed-payments-page .payment-table td {
  height: 66px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.failed-payments-page .payment-table tbody tr {
  transition: background-color 0.15s ease;
}
.failed-payments-page .payment-table tbody tr:hover {
  background: rgba(220, 53, 69, 0.018);
}
.failed-payments-page .payment-table tbody tr:last-child td {
  border-bottom: 0;
}
.failed-payments-page .transaction-id {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.failed-payments-page .customer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 205px;
}
.failed-payments-page .customer-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.failed-payments-page .customer-details strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.failed-payments-page .customer-details span {
  display: block;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
  line-height: 1.3;
}
.failed-payments-page .payment-type {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.failed-payments-page .payment-type.ecommerce {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.failed-payments-page .payment-type.smart-buy {
  background: rgba(212, 175, 55, 0.14);
  color: rgba(212, 175, 55, 0.18);
}
.failed-payments-page .payment-amount {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.failed-payments-page .payment-method {
  display: flex;
  align-items: center;
  gap: 8px;
}
.failed-payments-page .payment-method i {
  color: #0D2B5A;
  font-size: 20px;
}
.failed-payments-page .payment-method span {
  color: #555555;
  font-size: 14px;
}
.failed-payments-page .failure-reason {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
  font-size: 14px;
  font-weight: 600;
}
.failed-payments-page .text-end {
  text-align: right !important;
}
.failed-payments-page .table-action {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.failed-payments-page .table-action:hover {
  border-color: #dc3545;
  background: #dc3545;
  color: #fff;
}
.failed-payments-page .table-footer {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid #ddd;
}
.failed-payments-page .table-results {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.failed-payments-page .pagination {
  display: flex;
  align-items: center;
  gap: 5px;
}
.failed-payments-page .pagination button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.failed-payments-page .pagination button i {
  font-size: 14px;
}
.failed-payments-page .pagination button:hover:not(:disabled) {
  border-color: #177245;
  color: #177245;
}
.failed-payments-page .pagination button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.failed-payments-page .pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.failed-payments-page .pagination span {
  color: #555555;
  font-size: 14px;
}
@media (max-width: 1200px) {
  .failed-payments-page .payment-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .failed-payments-page .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .failed-payments-page .page-header-actions {
    width: 100%;
  }
  .failed-payments-page .dashboard-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .failed-payments-page .card-header-actions {
    width: 100%;
  }
  .failed-payments-page .payment-filter {
    flex: 1;
  }
  .failed-payments-page .payment-filter .form-control {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .failed-payments-page .payment-stat-grid {
    grid-template-columns: 1fr;
  }
  .failed-payments-page .card-header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .failed-payments-page .payment-filter {
    width: 100%;
  }
  .failed-payments-page .table-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .failed-payments-page .pagination {
    width: 100%;
    justify-content: flex-end;
  }
}

.payment-details-page {
  font-family: "Poppins", sans-serif;
  color: #555555;
}
.payment-details-page .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.payment-details-page .page-header-content .page-subtitle {
  display: block;
  margin-bottom: 6px;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}
.payment-details-page .page-header-content h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.payment-details-page .page-header-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.payment-details-page .page-header-actions {
  display: flex;
  align-items: center;
}
.payment-details-page .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.payment-details-page .btn-outline {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.payment-details-page .btn-outline:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.payment-details-page .payment-summary-card {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 20px;
  padding: 22px 24px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.payment-details-page .payment-summary-main {
  display: flex;
  align-items: center;
  gap: 16px;
}
.payment-details-page .payment-status-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
}
.payment-details-page .payment-status-icon.success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.payment-details-page .payment-status-icon.danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.payment-details-page .payment-summary-content .summary-label {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
}
.payment-details-page .payment-summary-content h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.payment-details-page .payment-summary-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
}
.payment-details-page .payment-summary-meta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.payment-details-page .payment-date {
  color: #555555;
  font-size: 14px;
}
.payment-details-page .payment-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
}
.payment-details-page .payment-status.success {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.payment-details-page .payment-status.pending {
  background: rgba(255, 193, 7, 0.13);
  color: rgba(255, 193, 7, 0.18);
}
.payment-details-page .payment-status.failed {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.payment-details-page .details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.payment-details-page .details-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.payment-details-page .details-card-header {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.payment-details-page .details-card-header h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.payment-details-page .details-card-header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.payment-details-page .details-list {
  padding: 6px 20px;
}
.payment-details-page .detail-item {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(221, 221, 221, 0.75);
}
.payment-details-page .detail-item:last-child {
  border-bottom: 0;
}
.payment-details-page .detail-label {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.payment-details-page .detail-value {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.payment-details-page .payment-type {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
}
.payment-details-page .payment-type.ecommerce {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}
.payment-details-page .payment-type.smart-buy {
  background: rgba(212, 175, 55, 0.14);
  color: rgba(212, 175, 55, 0.18);
}
.payment-details-page .customer-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
}
.payment-details-page .customer-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.payment-details-page .customer-avatar.large {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}
.payment-details-page .customer-profile-info h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.payment-details-page .customer-profile-info p {
  margin: 0 0 3px;
  color: #555555;
  font-size: 14px;
}
.payment-details-page .customer-profile-info span {
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
}
.payment-details-page .customer-contact-list {
  padding: 0 20px 18px;
}
.payment-details-page .contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  color: #555555;
  font-size: 14px;
}
.payment-details-page .contact-item i {
  width: 18px;
  color: #177245;
  font-size: 16px;
}
.payment-details-page .amount-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.05);
}
.payment-details-page .amount-highlight span {
  color: #555555;
  font-size: 14px;
}
.payment-details-page .amount-highlight strong {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
}
.payment-details-page .payment-method {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.payment-details-page .payment-method i {
  color: #0D2B5A;
  font-size: 20px;
}
.payment-details-page .payment-method span {
  color: #555555;
  font-size: 14px;
}
.payment-details-page .related-order {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #F2F4F7;
}
.payment-details-page .order-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #fff;
  color: #177245;
  font-size: 18px;
}
.payment-details-page .order-content {
  flex: 1;
}
.payment-details-page .order-content span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
}
.payment-details-page .order-content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.payment-details-page .order-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
}
.payment-details-page .view-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.payment-details-page .view-order-btn:hover {
  color: rgba(23, 114, 69, 0.8);
}
.payment-details-page .order-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  background: rgba(255, 193, 7, 0.13);
  color: rgba(255, 193, 7, 0.18);
  font-size: 14px;
  font-weight: 600;
}
.payment-details-page .payment-timeline-card {
  margin-bottom: 20px;
}
.payment-details-page .payment-timeline {
  padding: 20px 24px;
}
.payment-details-page .timeline-item {
  position: relative;
  display: flex;
  gap: 14px;
  min-height: 86px;
}
.payment-details-page .timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 16px;
  width: 1px;
  height: calc(100% - 12px);
  background: #ddd;
}
.payment-details-page .timeline-icon {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(25, 135, 84, 0.2);
  border-radius: 50%;
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
  font-size: 14px;
}
.payment-details-page .timeline-content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.payment-details-page .timeline-content p {
  margin: 0 0 5px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.payment-details-page .timeline-content span {
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
}
@media (max-width: 991px) {
  .payment-details-page .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .payment-details-page .page-header-actions {
    width: 100%;
  }
  .payment-details-page .payment-summary-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .payment-details-page .payment-summary-meta {
    width: 100%;
    justify-content: space-between;
  }
  .payment-details-page .details-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .payment-details-page .payment-summary-main {
    align-items: flex-start;
  }
  .payment-details-page .payment-summary-content h2 {
    font-size: 20px;
  }
  .payment-details-page .payment-summary-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .payment-details-page .details-card-header {
    padding: 18px;
  }
  .payment-details-page .details-list {
    padding: 6px 18px;
  }
  .payment-details-page .customer-profile {
    padding: 18px;
  }
  .payment-details-page .customer-contact-list {
    padding: 0 18px 18px;
  }
  .payment-details-page .related-order {
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 18px;
  }
  .payment-details-page .view-order-btn {
    width: 100%;
    padding-top: 8px;
  }
  .payment-details-page .payment-timeline {
    padding: 20px 18px;
  }
}
@media (max-width: 480px) {
  .payment-details-page .payment-summary-card {
    padding: 18px;
  }
  .payment-details-page .payment-summary-main {
    gap: 12px;
  }
  .payment-details-page .payment-status-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  .payment-details-page .detail-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .payment-details-page .detail-value {
    text-align: left;
  }
  .payment-details-page .amount-highlight strong {
    font-size: 20px;
  }
}

/*================================*
* Roles Page
*=================================*/
.roles-page {
  width: 100%;
}

/*================================*
* Page Header
*=================================*/
.roles-page__header {
  margin-bottom: 24px;
}

.roles-page__header-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .roles-page__header-content {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

.roles-page__heading .roles-page__eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.roles-page__heading h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.roles-page__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Header Action
*=================================*/
.roles-page__actions {
  flex-shrink: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .roles-page__actions {
    width: 100%;
  }
}

.roles-primary-btn {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid #177245;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
}
.roles-primary-btn i {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
.roles-primary-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}
@media (min-width: 768px) and (max-width: 991px) {
  .roles-primary-btn {
    width: 100%;
  }
}

/*================================*
* Alerts
*=================================*/
.roles-alert {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.roles-alert i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 17px;
  line-height: 1;
}

.roles-alert--success {
  border: 1px solid rgba(23, 114, 69, 0.14);
  background: rgba(23, 114, 69, 0.055);
  color: rgba(23, 114, 69, 0.05);
}

.roles-alert--danger {
  border: 1px solid rgba(220, 38, 38, 0.14);
  background: rgba(220, 38, 38, 0.045);
  color: #b91c1c;
}

/*================================*
* Statistics
*=================================*/
.roles-stats {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .roles-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .roles-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/*================================*
* Statistic Card
*=================================*/
.role-stat-card {
  min-height: 96px;
  padding: 16px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
  display: flex;
  align-items: center;
  gap: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.role-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.12);
  box-shadow: 0 5px 18px rgba(16, 26, 35, 0.055);
  transform: translateY(-1px);
}

/*================================*
* Statistic Icon
*=================================*/
.role-stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}
.role-stat-card__icon i {
  font-size: 20px;
  line-height: 1;
}

.role-stat-card__icon--total {
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}

.role-stat-card__icon--users {
  background: rgba(13, 202, 240, 0.09);
  color: #0dcaf0;
}

.role-stat-card__icon--permissions {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}

.role-stat-card__icon--empty {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

/*================================*
* Statistic Content
*=================================*/
.role-stat-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.role-stat-card__content span {
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.role-stat-card__content strong {
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.role-stat-card__content small {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

/*================================*
* Table Card
*=================================*/
.roles-table-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
}
@media (min-width: 768px) and (max-width: 991px) {
  .roles-table-card {
    border-radius: 10px;
  }
}

/*================================*
* Table Card Header
*=================================*/
.roles-table-card__header {
  min-height: 76px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 767px) {
  .roles-table-card__header {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }
}

.roles-table-card__heading h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.roles-table-card__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Role Count
*=================================*/
.roles-count {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 6px;
  background: rgba(16, 26, 35, 0.025);
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/*================================*
* Table Wrapper
*=================================*/
.roles-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*================================*
* Roles Table
*=================================*/
.roles-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}
.roles-table th {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  background: rgba(16, 26, 35, 0.018);
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}
.roles-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
}
.roles-table tbody tr {
  transition: background-color 0.2s ease;
}
.roles-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.018);
}
.roles-table tbody tr:last-child td {
  border-bottom: 0;
}

/*================================*
* Role Profile
*=================================*/
.role-profile {
  display: flex;
  align-items: center;
  gap: 11px;
}

.role-profile__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.role-profile__icon i {
  font-size: 18px;
  line-height: 1;
}

.role-profile__info {
  min-width: 0;
}

.role-profile__name {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s ease;
}
.role-profile__name:hover {
  color: #177245;
}

.role-profile__info > span {
  display: block;
  color: rgba(85, 85, 85, 0.8);
  font-size: 14px;
  line-height: 1.3;
}

/*================================*
* Role Slug
*=================================*/
.role-slug {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 5px;
  background: rgba(16, 26, 35, 0.025);
  color: #555555;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.3;
}

/*================================*
* Role Count In Table
*=================================*/
.role-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.role-count i {
  font-size: 16px;
  line-height: 1;
}

.role-count strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.role-count small {
  color: #555555;
  font-size: 14px;
  line-height: 1;
}

.role-count--users i {
  color: #177245;
}

.role-count--permissions i {
  color: #198754;
}

/*================================*
* Role Date
*=================================*/
.role-date {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

/*================================*
* Actions
*=================================*/
.role-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.role-view-btn,
.role-edit-btn,
.role-delete-btn {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.role-view-btn i,
.role-edit-btn i,
.role-delete-btn i {
  display: block;
  font-size: 16px;
  line-height: 1;
}

/*================================*
* View
*=================================*/
.role-view-btn {
  border: 1px solid rgba(23, 114, 69, 0.15);
  background: rgba(23, 114, 69, 0.045);
  color: #177245;
}
.role-view-btn:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
}

/*================================*
* Edit
*=================================*/
.role-edit-btn {
  border: 1px solid rgba(13, 202, 240, 0.15);
  background: rgba(13, 202, 240, 0.045);
  color: #0dcaf0;
}
.role-edit-btn:hover {
  border-color: rgba(13, 202, 240, 0.25);
  background: rgba(13, 202, 240, 0.09);
  color: #0dcaf0;
}

/*================================*
* Delete
*=================================*/
.role-delete-btn {
  border: 1px solid rgba(220, 38, 38, 0.15);
  background: rgba(220, 38, 38, 0.045);
  color: #dc2626;
}
.role-delete-btn:hover {
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.role-delete-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.role-delete-btn--disabled:hover {
  border-color: rgba(220, 38, 38, 0.15);
  background: rgba(220, 38, 38, 0.045);
  color: #dc2626;
}

.role-delete-form {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

/*================================*
* Table Footer
*=================================*/
.roles-table-card__footer {
  min-height: 62px;
  padding: 13px 20px;
  border-top: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
@media (max-width: 767px) {
  .roles-table-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*================================*
* Pagination Info
*=================================*/
.roles-pagination-info {
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.roles-pagination-info strong {
  color: #0D2B5A;
  font-weight: 600;
}

/*================================*
* Pagination
*=================================*/
.roles-pagination nav {
  display: flex;
}
.roles-pagination .pagination {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
}
.roles-pagination .page-item .page-link {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 6px;
  background: #fff;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.roles-pagination .page-item .page-link:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
}
.roles-pagination .page-item.active .page-link {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.roles-pagination .page-item.disabled .page-link {
  opacity: 0.4;
  cursor: not-allowed;
}

/*================================*
* Empty State
*=================================*/
.roles-empty {
  min-height: 330px;
  padding: 50px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.roles-empty__content {
  max-width: 420px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

/*================================*
* Empty Icon
*=================================*/
.roles-empty__icon {
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.roles-empty__icon i {
  font-size: 24px;
  line-height: 1;
}

/*================================*
* Empty Text
*=================================*/
.roles-empty__content h3 {
  margin: 0 0 8px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.roles-empty__content p {
  margin: 0 0 20px;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* XL
*=================================*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .roles-page__header {
    margin-bottom: 22px;
  }
  .roles-stats {
    gap: 12px;
  }
  .role-stat-card {
    padding: 15px;
  }
  .roles-table-card__header {
    padding: 17px 18px;
  }
  .roles-table th {
    padding: 13px 18px;
  }
  .roles-table td {
    padding: 15px 18px;
  }
}
/*================================*
* LG
*=================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .roles-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .roles-table {
    min-width: 850px;
  }
  .role-stat-card {
    min-height: 92px;
  }
}
/*================================*
* MD
*=================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .roles-page__header {
    margin-bottom: 20px;
  }
  .roles-page__header-content {
    align-items: flex-start;
    flex-direction: column;
  }
  .roles-page__actions {
    width: 100%;
  }
  .roles-primary-btn {
    width: 100%;
  }
  .roles-table-card {
    border-radius: 10px;
  }
  .roles-table-card__header {
    padding: 16px;
  }
  .roles-table th {
    padding: 13px 16px;
  }
  .roles-table td {
    padding: 14px 16px;
  }
  .role-profile__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}
/*================================*
* XS
*=================================*/
@media (max-width: 767px) {
  .roles-page__header {
    margin-bottom: 18px;
  }
  .roles-page__heading .roles-page__eyebrow {
    font-size: 14px;
  }
  .roles-page__heading h1 {
    font-size: 24px;
  }
  .roles-page__heading p {
    font-size: 14px;
  }
  .roles-stats {
    grid-template-columns: 1fr;
    margin-bottom: 14px;
    gap: 9px;
  }
  .role-stat-card {
    min-height: 84px;
    padding: 14px;
  }
  .role-stat-card__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .role-stat-card__icon i {
    font-size: 18px;
  }
  .role-stat-card__content span {
    font-size: 14px;
  }
  .role-stat-card__content strong {
    font-size: 20px;
  }
  .role-stat-card__content small {
    font-size: 14px;
  }
  .roles-table-card__header {
    padding: 16px;
  }
  .roles-table-card__heading h2 {
    font-size: 20px;
  }
  .roles-table-card__heading p {
    font-size: 14px;
  }
  .roles-table {
    min-width: 820px;
  }
  .roles-table th {
    padding: 12px 14px;
    font-size: 14px;
  }
  .roles-table td {
    padding: 13px 14px;
    font-size: 14px;
  }
  .role-profile {
    gap: 9px;
  }
  .role-profile__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .role-profile__icon i {
    font-size: 16px;
  }
  .role-profile__name {
    font-size: 14px;
  }
  .role-profile__info > span {
    font-size: 14px;
  }
  .role-slug {
    font-size: 14px;
  }
  .role-count {
    gap: 6px;
  }
  .role-count i {
    font-size: 15px;
  }
  .role-count strong {
    font-size: 14px;
  }
  .role-count small {
    font-size: 14px;
  }
  .role-date {
    font-size: 14px;
  }
  .role-actions {
    gap: 5px;
  }
  .role-view-btn,
  .role-edit-btn,
  .role-delete-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .role-view-btn i,
  .role-edit-btn i,
  .role-delete-btn i {
    font-size: 15px;
  }
  .roles-table-card__footer {
    padding: 13px 15px;
  }
  .roles-pagination-info {
    font-size: 14px;
  }
  .roles-pagination .pagination {
    gap: 4px;
  }
  .roles-pagination .page-item .page-link {
    min-width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .roles-empty {
    min-height: 290px;
    padding: 45px 18px;
  }
  .roles-empty__content h3 {
    font-size: 20px;
  }
  .roles-empty__content p {
    font-size: 14px;
  }
}
/*================================*
* Create Role Page
*=================================*/
.role-create-page {
  width: 100%;
}

/*================================*
* Header
*=================================*/
.role-create-page__header {
  margin-bottom: 24px;
}

.role-create-page__header-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .role-create-page__header-content {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

.role-create-page__eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.role-create-page__heading h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.role-create-page__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Header Action
*=================================*/
.role-create-page__actions {
  flex-shrink: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .role-create-page__actions {
    width: 100%;
  }
}

.role-secondary-btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.role-secondary-btn i {
  font-size: 17px;
}
.role-secondary-btn:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.04);
  color: #177245;
}
@media (min-width: 768px) and (max-width: 991px) {
  .role-secondary-btn {
    width: 100%;
  }
}

/*================================*
* Alert
*=================================*/
.role-create-alert {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.role-create-alert--danger {
  border: 1px solid rgba(220, 38, 38, 0.14);
  background: rgba(220, 38, 38, 0.045);
  color: #b91c1c;
}
.role-create-alert--danger i {
  margin-top: 2px;
  font-size: 18px;
}

/*================================*
* Card
*=================================*/
.role-create-card {
  width: 100%;
  max-width: 760px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
}

/*================================*
* Card Header
*=================================*/
.role-create-card__header {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  gap: 13px;
}

.role-create-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}
.role-create-card__icon i {
  font-size: 21px;
}

.role-create-card__header h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.role-create-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Form
*=================================*/
.role-create-form {
  padding: 24px;
}

/*================================*
* Form Group
*=================================*/
.role-create-form__group {
  margin-bottom: 22px;
}

.role-create-form__group > label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.role-create-form__group > label span {
  color: #dc2626;
}

/*================================*
* Input
*=================================*/
.role-create-form__input {
  position: relative;
}
.role-create-form__input i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: rgba(85, 85, 85, 0.05);
  font-size: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}
.role-create-form__input input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 43px;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.role-create-form__input input::placeholder {
  color: rgba(85, 85, 85, 0.2);
}
.role-create-form__input input:focus {
  border-color: rgba(23, 114, 69, 0.45);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

/*================================*
* Error
*=================================*/
.role-create-form__error {
  margin-top: 7px;
  color: #dc2626;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Help Text
*=================================*/
.role-create-form__help {
  margin: 8px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Information Box
*=================================*/
.role-create-info {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid rgba(13, 202, 240, 0.14);
  border-radius: 8px;
  background: rgba(13, 202, 240, 0.045);
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.role-create-info__icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}
.role-create-info__icon i {
  font-size: 17px;
}

.role-create-info__content h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.role-create-info__content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Footer
*=================================*/
.role-create-form__footer {
  padding-top: 20px;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 767px) {
  .role-create-form__footer {
    flex-direction: column-reverse;
  }
}

/*================================*
* Cancel Button
*=================================*/
.role-cancel-btn,
.role-submit-btn {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.role-cancel-btn i,
.role-submit-btn i {
  font-size: 17px;
}
@media (max-width: 767px) {
  .role-cancel-btn,
  .role-submit-btn {
    width: 100%;
  }
}

.role-cancel-btn {
  border: 1px solid rgba(16, 26, 35, 0.1);
  background: #fff;
  color: #555555;
}
.role-cancel-btn:hover {
  border-color: rgba(16, 26, 35, 0.18);
  background: rgba(16, 26, 35, 0.025);
  color: #0D2B5A;
}

/*================================*
* Submit Button
*=================================*/
.role-submit-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.role-submit-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}

/*================================*
* MD
*=================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .role-create-card {
    max-width: 100%;
  }
  .role-create-page__header {
    margin-bottom: 20px;
  }
  .role-create-form {
    padding: 20px;
  }
  .role-create-card__header {
    padding: 20px;
  }
}
/*================================*
* XS
*=================================*/
@media (max-width: 767px) {
  .role-create-page__header {
    margin-bottom: 18px;
  }
  .role-create-page__heading h1 {
    font-size: 24px;
  }
  .role-create-page__heading p {
    font-size: 14px;
  }
  .role-create-card__header {
    padding: 18px 16px;
  }
  .role-create-card__header h2 {
    font-size: 18px;
  }
  .role-create-card__header p {
    font-size: 14px;
  }
  .role-create-form {
    padding: 18px 16px;
  }
  .role-create-info {
    padding: 14px;
  }
  .role-create-info__content h3 {
    font-size: 16px;
  }
  .role-create-info__content p {
    font-size: 14px;
  }
}
/*================================*
* Role Details Page
*=================================*/
.role-details-page {
  width: 100%;
}

/*================================*
* Page Header
*=================================*/
.role-details-page__header {
  margin-bottom: 24px;
}

.role-details-page__header-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .role-details-page__header-content {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

.role-details-page__heading .role-details-page__eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.role-details-page__heading h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.role-details-page__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Header Actions
*=================================*/
.role-details-page__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .role-details-page__actions {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .role-details-page__actions {
    flex-direction: column;
  }
}

.role-details-secondary-btn,
.role-details-permissions-btn,
.role-details-primary-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.role-details-secondary-btn i,
.role-details-permissions-btn i,
.role-details-primary-btn i {
  font-size: 17px;
  line-height: 1;
}
@media (max-width: 767px) {
  .role-details-secondary-btn,
  .role-details-permissions-btn,
  .role-details-primary-btn {
    width: 100%;
  }
}

/*================================*
* Secondary Button
*=================================*/
.role-details-secondary-btn {
  border: 1px solid rgba(16, 26, 35, 0.1);
  background: #fff;
  color: #0D2B5A;
}
.role-details-secondary-btn:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.04);
  color: #177245;
}

/*================================*
* Manage Permissions Button
*=================================*/
.role-details-permissions-btn {
  border: 1px solid rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}
.role-details-permissions-btn:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}

/*================================*
* Primary Button
*=================================*/
.role-details-primary-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.role-details-primary-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}

/*================================*
* Overview
*=================================*/
.role-details-overview {
  margin-bottom: 20px;
  display: grid;
  /*
  |--------------------------------------------------------------------------
  | Fixed invalid minmax()
  |--------------------------------------------------------------------------
  */
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .role-details-overview {
    grid-template-columns: 1fr 1fr;
  }
  .role-details-overview .role-details-card--identity {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .role-details-overview {
    grid-template-columns: 1fr;
  }
  .role-details-overview .role-details-card--identity {
    grid-column: auto;
  }
}

/*================================*
* Card
*=================================*/
.role-details-card {
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
  overflow: hidden;
}

/*================================*
* Identity Card
*=================================*/
.role-details-card--identity {
  min-height: 108px;
  padding: 20px;
}

.role-details-identity {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.role-details-identity__icon {
  width: 54px;
  height: 54px;
  border-radius: 11px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px;
}
.role-details-identity__icon i {
  font-size: 25px;
  line-height: 1;
}

.role-details-identity__content > span {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}
.role-details-identity__content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.role-details-identity__content code {
  padding: 5px 8px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 5px;
  background: rgba(16, 26, 35, 0.025);
  color: #555555;
  font-family: monospace;
  font-size: 14px;
}

/*================================*
* Statistic Card
*=================================*/
.role-details-stat {
  min-height: 108px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.role-details-stat__icon {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}
.role-details-stat__icon i {
  font-size: 21px;
  line-height: 1;
}

.role-details-stat__icon--users {
  background: rgba(13, 202, 240, 0.09);
  color: #0dcaf0;
}

.role-details-stat__icon--permissions {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}

.role-details-stat__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.role-details-stat__content span {
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.role-details-stat__content strong {
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.role-details-stat__content small {
  color: rgba(85, 85, 85, 0.1);
  font-size: 14px;
  line-height: 1.4;
}

/*================================*
* Main Grid
*=================================*/
.role-details-grid {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .role-details-grid {
    grid-template-columns: 1fr;
  }
}

/*================================*
* Card Header
*=================================*/
.role-details-card__header {
  min-height: 76px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.role-details-card__header h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.role-details-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Count Badge
*=================================*/
.role-details-count {
  min-width: 34px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 6px;
  background: rgba(16, 26, 35, 0.025);
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*================================*
* Role Information
*=================================*/
.role-details-information {
  padding: 6px 20px 20px;
}

.role-details-information__item {
  min-height: 62px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.role-details-information__item:last-child {
  border-bottom: 0;
}
.role-details-information__item > span {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.role-details-information__item > strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}
.role-details-information__item > code {
  padding: 6px 9px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 5px;
  background: rgba(16, 26, 35, 0.025);
  color: #555555;
  font-family: monospace;
  font-size: 14px;
}
@media (max-width: 767px) {
  .role-details-information__item {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .role-details-information__item > strong {
    text-align: left;
  }
}

/*================================*
* Permissions List
*=================================*/
.role-permissions-list {
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
}

.role-permission-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.role-permission-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
}
.role-permission-item__icon i {
  font-size: 17px;
}

.role-permission-item__content {
  min-width: 0;
}
.role-permission-item__content strong {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.role-permission-item__content code {
  display: inline-block;
  margin-bottom: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 5px;
  background: rgba(16, 26, 35, 0.025);
  color: #555555;
  font-family: monospace;
  font-size: 14px;
}
.role-permission-item__content p,
.role-permission-item__content small {
  display: block;
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Permissions Footer
*=================================*/
.role-details-permissions-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
@media (max-width: 767px) {
  .role-details-permissions-footer {
    padding: 14px 16px;
    align-items: stretch;
    flex-direction: column;
  }
}

.role-details-permissions-footer__info {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.role-details-permissions-footer__info i {
  color: #177245;
  font-size: 16px;
}

.role-details-manage-permissions-btn {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #177245;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.role-details-manage-permissions-btn i {
  font-size: 16px;
}
.role-details-manage-permissions-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}
@media (max-width: 767px) {
  .role-details-manage-permissions-btn {
    width: 100%;
  }
}

/*================================*
* Assigned Users Card
*=================================*/
.role-details-card--users {
  margin-bottom: 20px;
}

/*================================*
* Users Table
*=================================*/
.role-users-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.role-users-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.role-users-table th {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  background: rgba(16, 26, 35, 0.018);
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}
.role-users-table td {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
}
.role-users-table tbody tr {
  transition: background-color 0.2s ease;
}
.role-users-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.018);
}
.role-users-table tbody tr:last-child td {
  border-bottom: 0;
}

/*================================*
* User Profile
*=================================*/
.role-user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.role-user-profile__avatar {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.role-user-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.role-user-profile__avatar span {
  font-size: 14px;
  font-weight: 600;
}

.role-user-profile__info strong {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/*================================*
* User Email
*=================================*/
.role-user-email {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

/*================================*
* User Status
*=================================*/
.role-user-status {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
}

.role-user-status--active {
  border: 1px solid rgba(25, 135, 84, 0.15);
  background: rgba(25, 135, 84, 0.07);
  color: #198754;
}

.role-user-status--inactive {
  border: 1px solid rgba(255, 193, 7, 0.15);
  background: rgba(255, 193, 7, 0.07);
  color: #ffc107;
}

.role-user-status--suspended {
  border: 1px solid rgba(220, 38, 38, 0.15);
  background: rgba(220, 38, 38, 0.06);
  color: #dc2626;
}

/*================================*
* User Date
*=================================*/
.role-user-date {
  color: rgba(85, 85, 85, 0.8);
  font-size: 14px;
}

/*================================*
* User View Button
*=================================*/
.role-user-view-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 6px;
  background: #fff;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.role-user-view-btn:hover {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}

/*================================*
* Empty State
*=================================*/
.role-details-empty {
  min-height: 230px;
  padding: 35px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.role-details-empty__icon {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.role-details-empty__icon i {
  font-size: 23px;
}

.role-details-empty h3 {
  margin: 0 0 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.role-details-empty p {
  max-width: 400px;
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

.role-details-empty__action {
  min-height: 40px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid #177245;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.role-details-empty__action i {
  font-size: 16px;
}
.role-details-empty__action:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}

/*================================*
* XL
*=================================*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .role-details-page__header {
    margin-bottom: 22px;
  }
  .role-details-card--identity {
    padding: 18px;
  }
  .role-details-stat {
    padding: 18px;
  }
  .role-details-card__header {
    padding: 17px 18px;
  }
  .role-details-information {
    padding: 6px 18px 18px;
  }
  .role-permissions-list {
    padding: 8px 18px 18px;
  }
  .role-details-permissions-footer {
    padding: 14px 18px;
  }
  .role-users-table th {
    padding: 13px 18px;
  }
  .role-users-table td {
    padding: 14px 18px;
  }
}
/*================================*
* LG
*=================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .role-details-overview {
    grid-template-columns: 1fr 1fr;
  }
  .role-details-card--identity {
    grid-column: 1/-1;
  }
  .role-details-grid {
    grid-template-columns: 1fr;
  }
}
/*================================*
* MD
*=================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .role-details-page__header {
    margin-bottom: 20px;
  }
  .role-details-page__actions {
    width: 100%;
  }
  .role-details-secondary-btn,
  .role-details-permissions-btn,
  .role-details-primary-btn {
    flex: 1;
  }
  .role-details-card {
    border-radius: 10px;
  }
  .role-details-card__header {
    padding: 16px;
  }
  .role-details-information {
    padding: 6px 16px 16px;
  }
  .role-permissions-list {
    padding: 8px 16px 16px;
  }
  .role-details-permissions-footer {
    padding: 14px 16px;
  }
  .role-users-table th {
    padding: 13px 16px;
  }
  .role-users-table td {
    padding: 14px 16px;
  }
}
/*================================*
* XS
*=================================*/
@media (max-width: 767px) {
  .role-details-page__header {
    margin-bottom: 18px;
  }
  .role-details-page__heading .role-details-page__eyebrow {
    font-size: 14px;
  }
  .role-details-page__heading h1 {
    font-size: 24px;
  }
  .role-details-page__heading p {
    font-size: 14px;
  }
  .role-details-page__actions {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  .role-details-secondary-btn,
  .role-details-permissions-btn,
  .role-details-primary-btn {
    width: 100%;
    flex: none;
  }
  .role-details-overview {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .role-details-card--identity {
    grid-column: auto;
    padding: 16px;
  }
  .role-details-identity {
    gap: 11px;
  }
  .role-details-identity__icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  .role-details-identity__icon i {
    font-size: 21px;
  }
  .role-details-identity__content h2 {
    font-size: 20px;
  }
  .role-details-identity__content code {
    font-size: 14px;
  }
  .role-details-stat {
    min-height: 94px;
    padding: 16px;
  }
  .role-details-stat__content span {
    font-size: 14px;
  }
  .role-details-stat__content strong {
    font-size: 20px;
  }
  .role-details-stat__content small {
    font-size: 14px;
  }
  .role-details-card__header {
    padding: 16px;
  }
  .role-details-card__header h2 {
    font-size: 20px;
  }
  .role-details-card__header p {
    font-size: 14px;
  }
  .role-details-information {
    padding: 5px 16px 16px;
  }
  .role-details-information__item {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .role-details-information__item > span,
  .role-details-information__item > strong,
  .role-details-information__item > code {
    font-size: 14px;
  }
  .role-details-information__item > strong {
    text-align: left;
  }
  .role-permissions-list {
    padding: 7px 16px 16px;
  }
  .role-permission-item {
    gap: 9px;
  }
  .role-permission-item__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .role-permission-item__icon i {
    font-size: 16px;
  }
  .role-permission-item__content strong {
    font-size: 16px;
  }
  .role-permission-item__content code,
  .role-permission-item__content p,
  .role-permission-item__content small {
    font-size: 14px;
  }
  .role-details-permissions-footer {
    padding: 14px 16px;
    align-items: stretch;
    flex-direction: column;
  }
  .role-details-permissions-footer__info {
    align-items: flex-start;
    font-size: 14px;
  }
  .role-details-manage-permissions-btn {
    width: 100%;
  }
  .role-users-table {
    min-width: 720px;
  }
  .role-users-table th {
    padding: 12px 14px;
    font-size: 14px;
  }
  .role-users-table td {
    padding: 13px 14px;
    font-size: 14px;
  }
  .role-user-profile__avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .role-user-profile__info strong {
    font-size: 14px;
  }
  .role-user-email,
  .role-user-date,
  .role-user-status {
    font-size: 14px;
  }
  .role-details-empty {
    min-height: 210px;
    padding: 30px 16px;
  }
  .role-details-empty h3 {
    font-size: 20px;
  }
  .role-details-empty p {
    font-size: 14px;
  }
}
/*================================*
* Role Permissions Page
*=================================*/
.role-permissions-page {
  width: 100%;
}

/*================================*
* Page Header
*=================================*/
.role-permissions-page__header {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .role-permissions-page__header {
    align-items: flex-start;
  }
}
@media (max-width: 767px) {
  .role-permissions-page__header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
}

.role-permissions-page__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.role-permissions-page__heading h1 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
@media (min-width: 768px) and (max-width: 991px) {
  .role-permissions-page__heading h1 {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .role-permissions-page__heading h1 {
    font-size: 20px;
  }
}
.role-permissions-page__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Header Button
*=================================*/
.role-permissions-back-btn {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}
.role-permissions-back-btn i {
  font-size: 16px;
}
.role-permissions-back-btn:hover {
  border-color: #177245;
  color: #177245;
}
@media (max-width: 767px) {
  .role-permissions-back-btn {
    width: 100%;
  }
}

/*================================*
* Role Information Card
*=================================*/
.role-permissions-role-card {
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.03);
}
@media (max-width: 767px) {
  .role-permissions-role-card {
    padding: 15px;
    flex-wrap: wrap;
  }
}

.role-permissions-role-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
}
.role-permissions-role-card__icon i {
  font-size: 20px;
}

.role-permissions-role-card__content {
  min-width: 0;
  flex: 1;
}
.role-permissions-role-card__content > span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.role-permissions-role-card__content h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}
.role-permissions-role-card__content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

.role-permissions-role-card__stats {
  display: flex;
  align-items: center;
  gap: 25px;
}
.role-permissions-role-card__stats > div {
  text-align: right;
}
.role-permissions-role-card__stats > div strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.role-permissions-role-card__stats > div span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .role-permissions-role-card__stats {
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid rgba(16, 26, 35, 0.06);
    justify-content: flex-start;
    gap: 30px;
  }
  .role-permissions-role-card__stats > div {
    text-align: left;
  }
}

/*================================*
* Main Permission Card
*=================================*/
.role-permissions-card {
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
}

/*================================*
* Card Header
*=================================*/
.role-permissions-card__header {
  min-height: 68px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.role-permissions-card__header h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.role-permissions-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}
@media (min-width: 768px) and (max-width: 991px) {
  .role-permissions-card__header {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .role-permissions-card__header {
    padding: 15px 16px;
  }
}

/*================================*
* Tools
*=================================*/
.role-permissions-card__tools {
  display: flex;
  align-items: center;
  gap: 7px;
}
@media (max-width: 767px) {
  .role-permissions-card__tools {
    width: 100%;
  }
}

.role-permissions-tool-btn {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s ease;
}
.role-permissions-tool-btn i {
  font-size: 15px;
}
.role-permissions-tool-btn:hover {
  border-color: #177245;
  color: #177245;
  background: rgba(23, 114, 69, 0.025);
}
@media (max-width: 767px) {
  .role-permissions-tool-btn {
    flex: 1;
  }
}

/*================================*
* Permission List
*=================================*/
.role-permissions-list {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .role-permissions-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .role-permissions-list {
    padding: 15px;
  }
}

/*================================*
* Permission Item
*=================================*/
.role-permission-item {
  position: relative;
  min-height: 76px;
  padding: 13px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.role-permission-item:hover {
  border-color: rgba(23, 114, 69, 0.3);
  background: rgba(23, 114, 69, 0.015);
}
.role-permission-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.role-permission-item:has(input:checked) {
  border-color: rgba(23, 114, 69, 0.35);
  background: rgba(23, 114, 69, 0.035);
  box-shadow: 0 2px 8px rgba(23, 114, 69, 0.05);
}
@media (max-width: 767px) {
  .role-permission-item {
    padding: 12px;
  }
}

.role-permission-item__checkbox {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  transition: 0.2s ease;
}
.role-permission-item__checkbox i {
  opacity: 0;
  font-size: 14px;
  line-height: 1;
}

.role-permission-item:has(input:checked) .role-permission-item__checkbox {
  border-color: #177245;
  background: #177245;
}
.role-permission-item:has(input:checked) .role-permission-item__checkbox i {
  opacity: 1;
}

.role-permission-item__content {
  min-width: 0;
}
.role-permission-item__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.role-permission-item__content > span {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}
.role-permission-item__content small {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}

/*================================*
* Empty State
*=================================*/
.role-permissions-empty {
  grid-column: 1/-1;
  padding: 45px 20px;
  text-align: center;
}

.role-permissions-empty__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: flex;
  align-items: center;
  justify-content: center;
}
.role-permissions-empty__icon i {
  font-size: 22px;
}

.role-permissions-empty h3 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 600;
}
.role-permissions-empty p {
  max-width: 450px;
  margin: 0 auto 16px;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.role-permissions-empty__btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}
.role-permissions-empty__btn i {
  font-size: 16px;
}
.role-permissions-empty__btn:hover {
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}

/*================================*
* Card Footer
*=================================*/
.role-permissions-card__footer {
  min-height: 66px;
  padding: 12px 20px;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
@media (max-width: 767px) {
  .role-permissions-card__footer {
    padding: 14px 15px;
    align-items: stretch;
    flex-direction: column;
  }
}

.role-permissions-selected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #555555;
  font-size: 14px;
}
.role-permissions-selected i {
  color: #177245;
  font-size: 16px;
}
.role-permissions-selected strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

/*================================*
* Form Actions
*=================================*/
.role-permissions-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 767px) {
  .role-permissions-form-actions {
    width: 100%;
  }
}

.role-permissions-cancel-btn,
.role-permissions-save-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}
.role-permissions-cancel-btn i,
.role-permissions-save-btn i {
  font-size: 16px;
}
@media (max-width: 767px) {
  .role-permissions-cancel-btn,
  .role-permissions-save-btn {
    flex: 1;
  }
}

.role-permissions-cancel-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #0D2B5A;
}
.role-permissions-cancel-btn:hover {
  border-color: #177245;
  color: #177245;
}

.role-permissions-save-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
  cursor: pointer;
}
.role-permissions-save-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
}

/*================================*
* Responsive
*=================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .role-permissions-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .role-permissions-page__actions {
    width: 100%;
  }
  .role-permissions-role-card {
    align-items: flex-start;
  }
  .role-permissions-role-card__content {
    flex: 1 1 calc(100% - 65px);
  }
  .role-permissions-role-card__stats {
    flex-basis: 100%;
  }
  .role-permissions-card__tools {
    width: 100%;
  }
  .role-permissions-tool-btn {
    flex: 1;
  }
  .role-permissions-form-actions {
    width: 100%;
  }
  .role-permissions-cancel-btn,
  .role-permissions-save-btn {
    flex: 1;
  }
}
/*================================*
* Permission Page
*=================================*/
.permission-page {
  width: 100%;
}

/*================================*
* Page Header
*=================================*/
.permission-page__header {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-page__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

.permission-page__heading .permission-page__eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.permission-page__heading h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.permission-page__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Header Actions
*=================================*/
.permission-page__actions {
  flex-shrink: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-page__actions {
    width: 100%;
  }
}

.permission-primary-btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #177245;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
}
.permission-primary-btn i {
  font-size: 17px;
  line-height: 1;
}
.permission-primary-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-primary-btn {
    width: 100%;
  }
}

/*================================*
* Permission Card
*=================================*/
.permission-card {
  width: 100%;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
  overflow: hidden;
}

/*================================*
* Card Header
*=================================*/
.permission-card__header {
  min-height: 80px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 767px) {
  .permission-card__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}

.permission-card__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.permission-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}
.permission-card__icon i {
  font-size: 20px;
  line-height: 1;
}

.permission-card__title h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.permission-card__title p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Permission Count
*=================================*/
.permission-card__count {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.permission-card__count span {
  min-width: 34px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 6px;
  background: rgba(16, 26, 35, 0.025);
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.permission-card__count small {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

/*================================*
* Table Wrapper
*=================================*/
.permission-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*================================*
* Table
*=================================*/
.permission-table {
  width: 100%;
  min-width: 950px;
  border-collapse: collapse;
}
.permission-table th {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  background: rgba(16, 26, 35, 0.018);
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}
.permission-table td {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
}
.permission-table tbody tr {
  transition: background-color 0.2s ease;
}
.permission-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.018);
}
.permission-table tbody tr:last-child td {
  border-bottom: 0;
}

/*================================*
* Actions Column
*=================================*/
.permission-table__actions-column {
  width: 120px;
  text-align: right !important;
}

/*================================*
* Permission Name
*=================================*/
.permission-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.permission-name__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.permission-name__icon i {
  font-size: 18px;
  line-height: 1;
}

.permission-name__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.permission-name__content strong {
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.permission-name__content span {
  color: rgba(85, 85, 85, 0.1);
  font-size: 14px;
  line-height: 1.3;
}

/*================================*
* Permission Slug
*=================================*/
.permission-slug {
  display: inline-block;
  max-width: 210px;
  padding: 6px 8px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 5px;
  background: rgba(16, 26, 35, 0.025);
  color: #555555;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*================================*
* Description
*=================================*/
.permission-description {
  display: block;
  max-width: 270px;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.permission-description--empty {
  color: rgba(85, 85, 85, 0.18);
  font-style: italic;
}

/*================================*
* Role Count
*=================================*/
.permission-role-count {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(13, 202, 240, 0.12);
  border-radius: 6px;
  background: rgba(13, 202, 240, 0.06);
  color: #0dcaf0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.permission-role-count i {
  font-size: 16px;
}

/*================================*
* Date
*=================================*/
.permission-date {
  color: #555555;
  font-size: 14px;
  white-space: nowrap;
}

/*================================*
* Actions
*=================================*/
.permission-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.permission-delete-form {
  margin: 0;
  padding: 0;
}

.permission-action {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 6px;
  background: #fff;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.permission-action i {
  font-size: 16px;
  line-height: 1;
}

/*================================*
* View Action
*=================================*/
.permission-action--view:hover {
  border-color: rgba(13, 202, 240, 0.2);
  background: rgba(13, 202, 240, 0.07);
  color: #0dcaf0;
}

/*================================*
* Edit Action
*=================================*/
.permission-action--edit:hover {
  border-color: rgba(23, 114, 69, 0.2);
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
}

/*================================*
* Delete Action
*=================================*/
.permission-action--delete:hover {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.06);
  color: #dc2626;
}

/*================================*
* Pagination
*=================================*/
.permission-pagination {
  width: 100%;
  padding: 16px 20px;
  border-top: 1px solid rgba(16, 26, 35, 0.055);
  background: #fff;
  box-sizing: border-box;
  /*
  |--------------------------------------------------------------------------
  | Laravel Pagination Navigation
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav {
  width: 100%;
  display: block !important;
  margin: 0;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Desktop Pagination Wrapper
  |--------------------------------------------------------------------------
  |
  | Laravel generates:
  |
  | 1st div = mobile pagination
  | 2nd div = desktop pagination
  |
  */
}
.permission-pagination nav > div:nth-child(1) {
  display: none !important;
}
.permission-pagination nav > div:nth-child(2) {
  width: 100%;
  min-height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 !important;
  box-sizing: border-box;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Result Information
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav > div:nth-child(2) > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
.permission-pagination nav > div:nth-child(2) > div:first-child p {
  margin: 0 !important;
  color: #555555 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 36px !important;
  white-space: nowrap;
}
.permission-pagination nav > div:nth-child(2) > div:first-child p span {
  color: #0D2B5A !important;
  font-weight: 600 !important;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Pagination Controls
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav > div:nth-child(2) > div:last-child {
  flex: 0 0 auto;
  margin: 0 !important;
}
.permission-pagination nav > div:nth-child(2) > div:last-child > span {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 7px;
  box-shadow: none !important;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Pagination Items
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav a,
.permission-pagination nav span {
  min-width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid rgba(16, 26, 35, 0.08) !important;
  border-radius: 0;
  background: #fff !important;
  color: #555555 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | First Pagination Item
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav > div:nth-child(2) > div:last-child > span > *:first-child {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Last Pagination Item
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav > div:nth-child(2) > div:last-child > span > *:last-child {
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Pagination Links
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav a:hover {
  border-color: rgba(23, 114, 69, 0.22) !important;
  background: rgba(23, 114, 69, 0.055) !important;
  color: #177245 !important;
}
.permission-pagination nav a:focus {
  outline: none;
  border-color: rgba(23, 114, 69, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08) !important;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Current Page
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav span[aria-current=page] {
  padding: 0 !important;
  border: 0 !important;
}
.permission-pagination nav span[aria-current=page] span {
  width: 100%;
  border-color: #177245 !important;
  background: #177245 !important;
  color: #fff !important;
  font-weight: 600 !important;
  cursor: default;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Disabled Previous / Next
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav span[aria-disabled=true] {
  display: inline-flex !important;
  color: rgba(85, 85, 85, 0.22) !important;
  background: #fff !important;
  cursor: not-allowed;
}
.permission-pagination nav span[aria-disabled=true] > span {
  color: rgba(85, 85, 85, 0.22) !important;
  background: #f8f9fa !important;
  cursor: not-allowed;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | SVG Icons
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav svg {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  display: block;
  flex-shrink: 0;
  color: currentColor;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Previous / Next Buttons
  |--------------------------------------------------------------------------
  */
}
.permission-pagination nav a[rel=next],
.permission-pagination nav a[rel=prev],
.permission-pagination nav a[aria-label*=Next],
.permission-pagination nav a[aria-label*=Previous] {
  font-size: 0 !important;
}
.permission-pagination nav a[rel=next] svg,
.permission-pagination nav a[rel=prev] svg,
.permission-pagination nav a[aria-label*=Next] svg,
.permission-pagination nav a[aria-label*=Previous] svg {
  width: 16px !important;
  height: 16px !important;
}
.permission-pagination {
  /*
  |--------------------------------------------------------------------------
  | Mobile Pagination
  |--------------------------------------------------------------------------
  */
}
@media (max-width: 767px) {
  .permission-pagination {
    padding: 14px 16px;
  }
  .permission-pagination nav > div:nth-child(1) {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 !important;
  }
  .permission-pagination nav > div:nth-child(2) {
    display: none !important;
  }
  .permission-pagination nav > div:nth-child(1) a,
  .permission-pagination nav > div:nth-child(1) span {
    min-width: 38px;
    height: 36px;
    padding: 0 12px !important;
    border: 1px solid rgba(16, 26, 35, 0.08) !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    background: #fff !important;
  }
  .permission-pagination nav > div:nth-child(1) a {
    color: #0D2B5A !important;
  }
  .permission-pagination nav > div:nth-child(1) a:hover {
    border-color: rgba(23, 114, 69, 0.22) !important;
    background: rgba(23, 114, 69, 0.055) !important;
    color: #177245 !important;
  }
  .permission-pagination nav > div:nth-child(1) span {
    color: rgba(85, 85, 85, 0.22) !important;
    background: #f8f9fa !important;
  }
}

/*================================*
* Empty State
*=================================*/
.permission-empty {
  min-height: 330px;
  padding: 45px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.permission-empty__icon {
  width: 58px;
  height: 58px;
  margin-bottom: 15px;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.permission-empty__icon i {
  font-size: 25px;
  line-height: 1;
}

.permission-empty h3 {
  margin: 0 0 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.permission-empty p {
  max-width: 430px;
  margin: 0 0 20px;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.permission-empty .permission-primary-btn {
  width: auto;
}

/*================================*
* XL
*=================================*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .permission-table th,
  .permission-table td {
    padding-left: 17px;
    padding-right: 17px;
  }
  .permission-description {
    max-width: 230px;
  }
}
/*================================*
* LG
*=================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .permission-page__header {
    margin-bottom: 20px;
  }
  .permission-table {
    min-width: 900px;
  }
  .permission-pagination {
    padding-left: 17px;
    padding-right: 17px;
  }
}
/*================================*
* MD
*=================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .permission-page__actions {
    width: 100%;
  }
  .permission-card {
    border-radius: 10px;
  }
  .permission-card__header {
    padding: 17px;
  }
  .permission-table th {
    padding: 13px 16px;
  }
  .permission-table td {
    padding: 14px 16px;
  }
  .permission-pagination {
    padding: 15px 16px;
  }
}
/*================================*
* XS
*=================================*/
@media (max-width: 767px) {
  .permission-page__header {
    margin-bottom: 18px;
  }
  .permission-page__heading .permission-page__eyebrow {
    font-size: 14px;
  }
  .permission-page__heading h1 {
    font-size: 24px;
  }
  .permission-page__heading p {
    font-size: 14px;
  }
  .permission-card__header {
    padding: 16px;
  }
  .permission-card__title {
    align-items: flex-start;
  }
  .permission-card__title h2 {
    font-size: 20px;
  }
  .permission-card__title p {
    font-size: 14px;
  }
  .permission-card__count {
    width: 100%;
    justify-content: flex-start;
  }
  .permission-table {
    min-width: 900px;
  }
  .permission-table th {
    padding: 12px 14px;
    font-size: 14px;
  }
  .permission-table td {
    padding: 13px 14px;
    font-size: 14px;
  }
  .permission-name__content strong {
    font-size: 16px;
  }
  .permission-name__content span {
    font-size: 14px;
  }
  .permission-slug {
    font-size: 14px;
  }
  .permission-description {
    font-size: 14px;
  }
  .permission-empty {
    min-height: 280px;
    padding: 35px 16px;
  }
  .permission-empty h3 {
    font-size: 20px;
  }
  .permission-empty p {
    font-size: 14px;
  }
}
/*================================*
* Permission Create Page
*=================================*/
.permission-create-page {
  width: 100%;
}

/*================================*
* Page Header
*=================================*/
.permission-create-page__header {
  margin-bottom: 24px;
}

.permission-create-page__header-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-create-page__header-content {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

.permission-create-page__heading .permission-create-page__eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.permission-create-page__heading h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.permission-create-page__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Header Action
*=================================*/
.permission-create-page__actions {
  flex-shrink: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-create-page__actions {
    width: 100%;
  }
}

.permission-secondary-btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
}
.permission-secondary-btn i {
  font-size: 17px;
  line-height: 1;
}
.permission-secondary-btn:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.04);
  color: #177245;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-secondary-btn {
    width: 100%;
  }
}

/*================================*
* Create Card
*=================================*/
.permission-create-card {
  width: 100%;
  max-width: 760px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
}

/*================================*
* Card Header
*=================================*/
.permission-create-card__header {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  gap: 13px;
}

.permission-create-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}
.permission-create-card__icon i {
  font-size: 21px;
  line-height: 1;
}

.permission-create-card__header h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.permission-create-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Form
*=================================*/
.permission-create-form {
  padding: 24px;
}

/*================================*
* Form Group
*=================================*/
.permission-create-form__group {
  margin-bottom: 22px;
}

.permission-create-form__group > label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.permission-create-form__group > label span {
  color: #dc2626;
}

/*================================*
* Text Input
*=================================*/
.permission-create-form__input {
  position: relative;
}
.permission-create-form__input i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: rgba(85, 85, 85, 0.05);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.permission-create-form__input input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 43px;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.permission-create-form__input input::placeholder {
  color: rgba(85, 85, 85, 0.2);
}
.permission-create-form__input input:focus {
  border-color: rgba(23, 114, 69, 0.45);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

/*================================*
* Textarea
*=================================*/
.permission-create-form__textarea {
  position: relative;
}
.permission-create-form__textarea i {
  position: absolute;
  top: 15px;
  left: 14px;
  color: rgba(85, 85, 85, 0.05);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}
.permission-create-form__textarea textarea {
  width: 100%;
  min-height: 130px;
  padding: 13px 14px 13px 43px;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 7px;
  outline: none;
  resize: vertical;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.permission-create-form__textarea textarea::placeholder {
  color: rgba(85, 85, 85, 0.2);
}
.permission-create-form__textarea textarea:focus {
  border-color: rgba(23, 114, 69, 0.45);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

/*================================*
* Help Text
*=================================*/
.permission-create-form__help {
  margin: 8px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Information Box
*=================================*/
.permission-create-info {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid rgba(13, 202, 240, 0.14);
  border-radius: 8px;
  background: rgba(13, 202, 240, 0.045);
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.permission-create-info__icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}
.permission-create-info__icon i {
  font-size: 17px;
  line-height: 1;
}

.permission-create-info__content h3 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.permission-create-info__content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Form Footer
*=================================*/
.permission-create-form__footer {
  padding-top: 20px;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 767px) {
  .permission-create-form__footer {
    flex-direction: column-reverse;
  }
}

/*================================*
* Buttons
*=================================*/
.permission-cancel-btn,
.permission-submit-btn {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.permission-cancel-btn i,
.permission-submit-btn i {
  font-size: 17px;
  line-height: 1;
}
@media (max-width: 767px) {
  .permission-cancel-btn,
  .permission-submit-btn {
    width: 100%;
  }
}

/*================================*
* Cancel
*=================================*/
.permission-cancel-btn {
  border: 1px solid rgba(16, 26, 35, 0.1);
  background: #fff;
  color: #555555;
}
.permission-cancel-btn:hover {
  border-color: rgba(16, 26, 35, 0.18);
  background: rgba(16, 26, 35, 0.025);
  color: #0D2B5A;
}

/*================================*
* Submit
*=================================*/
.permission-submit-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.permission-submit-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}

/*================================*
* MD
*=================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .permission-create-page__header {
    margin-bottom: 20px;
  }
  .permission-create-card {
    max-width: 100%;
  }
  .permission-create-form {
    padding: 20px;
  }
  .permission-create-card__header {
    padding: 20px;
  }
}
/*================================*
* XS
*=================================*/
@media (max-width: 767px) {
  .permission-create-page__header {
    margin-bottom: 18px;
  }
  .permission-create-page__heading .permission-create-page__eyebrow {
    font-size: 14px;
  }
  .permission-create-page__heading h1 {
    font-size: 24px;
  }
  .permission-create-page__heading p {
    font-size: 14px;
  }
  .permission-create-card__header {
    padding: 18px 16px;
  }
  .permission-create-card__header h2 {
    font-size: 18px;
  }
  .permission-create-card__header p {
    font-size: 14px;
  }
  .permission-create-form {
    padding: 18px 16px;
  }
  .permission-create-form__group {
    margin-bottom: 20px;
  }
  .permission-create-info {
    padding: 14px;
  }
  .permission-create-info__content h3 {
    font-size: 16px;
  }
  .permission-create-info__content p {
    font-size: 14px;
  }
  .permission-create-form__footer {
    gap: 8px;
  }
}
/*================================*
* Form Error
*=================================*/
.permission-create-form__error {
  margin-top: 7px;
  color: #dc2626;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Slug Display
*=================================*/
.permission-create-info__content code {
  display: inline-block;
  margin-top: 9px;
  padding: 6px 9px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 5px;
  background: #fff;
  color: #555555;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.3;
}

/*================================*
* Permission Details Page
*=================================*/
.permission-details-page {
  width: 100%;
}

/*================================*
* Page Header
*=================================*/
.permission-details-page__header {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-details-page__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

.permission-details-page__heading .permission-details-page__eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.permission-details-page__heading h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.permission-details-page__heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Header Actions
*=================================*/
.permission-details-page__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-details-page__actions {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .permission-details-page__actions {
    flex-direction: column;
  }
}

.permission-details-secondary-btn,
.permission-details-primary-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
}
.permission-details-secondary-btn i,
.permission-details-primary-btn i {
  font-size: 17px;
  line-height: 1;
}
@media (max-width: 767px) {
  .permission-details-secondary-btn,
  .permission-details-primary-btn {
    width: 100%;
  }
}

/*================================*
* Secondary Button
*=================================*/
.permission-details-secondary-btn {
  border: 1px solid rgba(16, 26, 35, 0.1);
  background: #fff;
  color: #0D2B5A;
}
.permission-details-secondary-btn:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.04);
  color: #177245;
}

/*================================*
* Primary Button
*=================================*/
.permission-details-primary-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.permission-details-primary-btn:hover {
  border-color: rgba(23, 114, 69, 0.7);
  background: rgba(23, 114, 69, 0.7);
  color: #fff;
}

/*================================*
* Overview
*=================================*/
.permission-details-overview {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .permission-details-overview {
    grid-template-columns: 1fr 1fr;
  }
  .permission-details-overview .permission-details-card--identity {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .permission-details-overview {
    grid-template-columns: 1fr;
  }
  .permission-details-overview .permission-details-card--identity {
    grid-column: auto;
  }
}

/*================================*
* Card
*=================================*/
.permission-details-card {
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.035);
  overflow: hidden;
}

/*================================*
* Identity Card
*=================================*/
.permission-details-card--identity {
  min-height: 108px;
  padding: 20px;
}

.permission-details-identity {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.permission-details-identity__icon {
  width: 54px;
  height: 54px;
  border-radius: 11px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px;
}
.permission-details-identity__icon i {
  font-size: 25px;
  line-height: 1;
}

.permission-details-identity__content > span {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}
.permission-details-identity__content h2 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.permission-details-identity__content code {
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 5px;
  background: rgba(16, 26, 35, 0.025);
  color: #555555;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.3;
}

/*================================*
* Statistics
*=================================*/
.permission-details-stat {
  min-height: 108px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.permission-details-stat__icon {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}
.permission-details-stat__icon i {
  font-size: 21px;
  line-height: 1;
}

.permission-details-stat__icon--roles {
  background: rgba(13, 202, 240, 0.09);
  color: #0dcaf0;
}

.permission-details-stat__icon--date {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}

.permission-details-stat__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.permission-details-stat__content span {
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.permission-details-stat__content strong {
  margin-bottom: 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.permission-details-stat__content small {
  color: rgba(85, 85, 85, 0.1);
  font-size: 14px;
  line-height: 1.4;
}

/*================================*
* Main Grid
*=================================*/
.permission-details-grid {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .permission-details-grid {
    grid-template-columns: 1fr;
  }
}

/*================================*
* Card Header
*=================================*/
.permission-details-card__header {
  min-height: 76px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.permission-details-card__header h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.permission-details-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Count
*=================================*/
.permission-details-count {
  min-width: 34px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 6px;
  background: rgba(16, 26, 35, 0.025);
  color: #0D2B5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*================================*
* Information
*=================================*/
.permission-details-information {
  padding: 6px 20px 20px;
}

.permission-details-information__item {
  min-height: 62px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.permission-details-information__item:last-child {
  border-bottom: 0;
}
.permission-details-information__item > span {
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.permission-details-information__item > strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}
.permission-details-information__item > code {
  padding: 6px 9px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 5px;
  background: rgba(16, 26, 35, 0.025);
  color: #555555;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .permission-details-information__item {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .permission-details-information__item > strong {
    text-align: left;
  }
}

/*================================*
* Description
*=================================*/
.permission-details-information__item--description {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}
.permission-details-information__item--description p {
  width: 100%;
  margin: 0;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.7;
}

.permission-details-muted {
  color: rgba(85, 85, 85, 0.12) !important;
  font-weight: 500 !important;
}

/*================================*
* Roles List
*=================================*/
.permission-roles-list {
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
}

.permission-role-item {
  min-height: 64px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: center;
  gap: 11px;
}
.permission-role-item:last-child {
  border-bottom: 0;
}

.permission-role-item__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.permission-role-item__icon i {
  font-size: 18px;
  line-height: 1;
}

.permission-role-item__content {
  min-width: 0;
  flex: 1;
}
.permission-role-item__content strong {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.permission-role-item__content code {
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 5px;
  background: rgba(16, 26, 35, 0.025);
  color: #555555;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.3;
}

/*================================*
* Role Action
*=================================*/
.permission-role-item__action {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 6px;
  background: #fff;
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.permission-role-item__action:hover {
  border-color: rgba(23, 114, 69, 0.2);
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}
.permission-role-item__action i {
  font-size: 16px;
  line-height: 1;
}

/*================================*
* Empty State
*=================================*/
.permission-details-empty {
  min-height: 230px;
  padding: 35px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.permission-details-empty__icon {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.permission-details-empty__icon i {
  font-size: 23px;
  line-height: 1;
}

.permission-details-empty h3 {
  margin: 0 0 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.permission-details-empty p {
  max-width: 390px;
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*================================*
* Danger Zone
*=================================*/
.permission-details-danger {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(220, 38, 38, 0.15);
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.025);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-details-danger {
    align-items: flex-start;
    flex-direction: column;
  }
}

.permission-details-danger__content {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 767px) {
  .permission-details-danger__content {
    align-items: flex-start;
  }
}

.permission-details-danger__icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}
.permission-details-danger__icon i {
  font-size: 19px;
  line-height: 1;
}

.permission-details-danger__content h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.permission-details-danger__content p {
  max-width: 560px;
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*================================*
* Delete Button
*=================================*/
.permission-details-delete-btn {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 7px;
  background: #fff;
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}
.permission-details-delete-btn i {
  font-size: 16px;
}
.permission-details-delete-btn:hover {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}
@media (min-width: 768px) and (max-width: 991px) {
  .permission-details-delete-btn {
    width: 100%;
  }
}

/*================================*
* XL
*=================================*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .permission-details-card--identity {
    padding: 18px;
  }
  .permission-details-stat {
    padding: 18px;
  }
  .permission-details-card__header {
    padding: 17px 18px;
  }
  .permission-details-information {
    padding: 6px 18px 18px;
  }
  .permission-roles-list {
    padding: 8px 18px 18px;
  }
}
/*================================*
* LG
*=================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .permission-details-overview {
    grid-template-columns: 1fr 1fr;
  }
  .permission-details-card--identity {
    grid-column: 1/-1;
  }
  .permission-details-grid {
    grid-template-columns: 1fr;
  }
}
/*================================*
* MD
*=================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .permission-details-page__header {
    margin-bottom: 20px;
  }
  .permission-details-page__actions {
    width: 100%;
  }
  .permission-details-secondary-btn,
  .permission-details-primary-btn {
    flex: 1;
  }
  .permission-details-card {
    border-radius: 10px;
  }
  .permission-details-card__header {
    padding: 16px;
  }
  .permission-details-information {
    padding: 6px 16px 16px;
  }
  .permission-roles-list {
    padding: 7px 16px 16px;
  }
  .permission-details-danger {
    padding: 16px;
  }
}
/*================================*
* XS
*=================================*/
@media (max-width: 767px) {
  .permission-details-page__header {
    margin-bottom: 18px;
  }
  .permission-details-page__heading .permission-details-page__eyebrow {
    font-size: 14px;
  }
  .permission-details-page__heading h1 {
    font-size: 24px;
  }
  .permission-details-page__heading p {
    font-size: 14px;
  }
  .permission-details-page__actions {
    flex-direction: column;
  }
  .permission-details-secondary-btn,
  .permission-details-primary-btn {
    width: 100%;
  }
  .permission-details-overview {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .permission-details-card--identity {
    grid-column: auto;
    padding: 16px;
  }
  .permission-details-identity {
    gap: 11px;
  }
  .permission-details-identity__icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  .permission-details-identity__icon i {
    font-size: 21px;
  }
  .permission-details-identity__content h2 {
    font-size: 20px;
  }
  .permission-details-identity__content code {
    font-size: 14px;
  }
  .permission-details-stat {
    min-height: 94px;
    padding: 16px;
  }
  .permission-details-stat__content span {
    font-size: 14px;
  }
  .permission-details-stat__content strong {
    font-size: 20px;
  }
  .permission-details-stat__content small {
    font-size: 14px;
  }
  .permission-details-card__header {
    padding: 16px;
  }
  .permission-details-card__header h2 {
    font-size: 20px;
  }
  .permission-details-card__header p {
    font-size: 14px;
  }
  .permission-details-information {
    padding: 5px 16px 16px;
  }
  .permission-details-information__item {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .permission-details-information__item > span,
  .permission-details-information__item > strong,
  .permission-details-information__item > code {
    font-size: 14px;
  }
  .permission-details-information__item > strong {
    text-align: left;
  }
  .permission-role-item {
    gap: 9px;
  }
  .permission-role-item__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .permission-role-item__icon i {
    font-size: 16px;
  }
  .permission-role-item__content strong {
    font-size: 16px;
  }
  .permission-role-item__content code {
    font-size: 14px;
  }
  .permission-details-empty {
    min-height: 210px;
    padding: 30px 16px;
  }
  .permission-details-empty h3 {
    font-size: 20px;
  }
  .permission-details-empty p {
    font-size: 14px;
  }
  .permission-details-danger {
    padding: 16px;
    align-items: stretch;
  }
  .permission-details-danger__content {
    align-items: flex-start;
  }
  .permission-details-danger__content h2 {
    font-size: 18px;
  }
  .permission-details-danger__content p {
    font-size: 14px;
  }
  .permission-details-delete-btn {
    width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER ACCOUNT PAYMENTS
|--------------------------------------------------------------------------
*/
.customer-account-payments-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding-bottom: 30px;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.customer-account-payments-page .customer-account-payments-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-account-payments-page .customer-account-payments-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-account-payments-page .customer-account-payments-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-header {
  margin-bottom: 20px;
}
.customer-account-payments-page .customer-account-payments-header__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-account-payments-page .customer-account-payments-header h1 {
  margin: 0 0 6px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-account-payments-page .customer-account-payments-header p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | SUMMARY STATS
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}
.customer-account-payments-page .customer-account-payments-stat {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fff;
}
.customer-account-payments-page .customer-account-payments-stat__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 19px;
}
.customer-account-payments-page .customer-account-payments-stat span {
  display: block;
  margin-bottom: 3px;
  color: #888;
  font-size: 14px;
}
.customer-account-payments-page .customer-account-payments-stat strong {
  display: block;
  color: #0D2B5A;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | MAIN LAYOUT
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.customer-account-payments-page .customer-account-payments-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | COMMON CARD
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-account-payments-page .customer-account-payments-card__header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 16px;
  border-bottom: 1px solid #ddd;
}
.customer-account-payments-page .customer-account-payments-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-account-payments-page .customer-account-payments-card__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | FILTER
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-filter {
  position: relative;
}
.customer-account-payments-page .customer-account-payments-filter select {
  width: 140px;
  height: 36px;
  appearance: none;
  padding: 0 30px 0 11px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.customer-account-payments-page .customer-account-payments-filter select:focus {
  border-color: rgba(15, 61, 46, 0.35);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.05);
}
.customer-account-payments-page .customer-account-payments-filter i {
  position: absolute;
  top: 50%;
  right: 9px;
  color: #888;
  font-size: 15px;
  transform: translateY(-50%);
  pointer-events: none;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | TABLE
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.customer-account-payments-page .customer-account-payments-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}
.customer-account-payments-page .customer-account-payments-table thead {
  background: #fafafa;
}
.customer-account-payments-page .customer-account-payments-table thead th {
  padding: 11px 14px;
  border-bottom: 1px solid #ddd;
  color: #777;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.customer-account-payments-page .customer-account-payments-table tbody tr {
  border-bottom: 1px solid #eee;
  transition: background 0.2s ease;
}
.customer-account-payments-page .customer-account-payments-table tbody tr:last-child {
  border-bottom: 0;
}
.customer-account-payments-page .customer-account-payments-table tbody tr:hover {
  background: #fcfdfc;
}
.customer-account-payments-page .customer-account-payments-table tbody td {
  padding: 12px 14px;
  color: #666;
  font-size: 14px;
  line-height: 1.35;
  vertical-align: middle;
  white-space: nowrap;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | TRANSACTION
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .payment-transaction {
  display: flex;
  align-items: center;
  gap: 9px;
}
.customer-account-payments-page .payment-transaction__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 15px;
}
.customer-account-payments-page .payment-transaction strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}
.customer-account-payments-page .payment-transaction span {
  display: block;
  color: #999;
  font-size: 14px;
  line-height: 1.3;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER LINK
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .payment-order-link {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-account-payments-page .payment-order-link:hover {
  text-decoration: underline !important;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | PAYMENT METHOD
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .payment-method {
  display: flex;
  align-items: center;
  gap: 6px;
}
.customer-account-payments-page .payment-method i {
  color: #177245;
  font-size: 15px;
}
.customer-account-payments-page .payment-method span {
  color: #666;
  font-size: 14px;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | AMOUNT
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .payment-amount {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | PAYMENT STATUS
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .payment-status {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}
.customer-account-payments-page .payment-status.paid {
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
}
.customer-account-payments-page .payment-status.pending {
  background: rgba(190, 140, 40, 0.1);
  color: #9a721e;
}
.customer-account-payments-page .payment-status.failed {
  background: rgba(170, 60, 60, 0.08);
  color: #a34b4b;
}
.customer-account-payments-page .payment-status.refunded {
  background: rgba(80, 100, 150, 0.08);
  color: #536d9e;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | VIEW BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .payment-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 5px;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-account-payments-page .payment-view-btn:hover {
  background: rgba(15, 61, 46, 0.05);
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | MOBILE PAYMENT LIST
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-mobile-list {
  display: none;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | PAGINATION
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-pagination {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 16px;
  border-top: 1px solid #ddd;
}
.customer-account-payments-page .customer-account-payments-pagination > span {
  color: #888;
  font-size: 14px;
}
.customer-account-payments-page .customer-account-payments-pagination > div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.customer-account-payments-page .customer-account-payments-pagination > div button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #666;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.customer-account-payments-page .customer-account-payments-pagination > div button:hover:not(:disabled) {
  border-color: #177245;
  color: #177245;
}
.customer-account-payments-page .customer-account-payments-pagination > div button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.customer-account-payments-page .customer-account-payments-pagination > div button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.customer-account-payments-page .customer-account-payments-pagination > div > span {
  padding: 0 2px;
  color: #999;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | ADD PAYMENT BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .payment-add-btn {
  width: 33px;
  height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(15, 61, 46, 0.2);
  border-radius: 6px;
  background: rgba(15, 61, 46, 0.04);
  color: #177245;
  font-size: 17px;
  cursor: pointer;
}
.customer-account-payments-page .payment-add-btn:hover {
  background: #177245;
  color: #fff;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | SAVED PAYMENT METHODS
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .saved-payment-method {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
}
.customer-account-payments-page .saved-payment-method__brand {
  width: 40px;
  height: 29px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}
.customer-account-payments-page .saved-payment-method__brand.visa {
  color: #1a4f9c;
}
.customer-account-payments-page .saved-payment-method__brand.mastercard {
  color: #b55a32;
}
.customer-account-payments-page .saved-payment-method__info {
  min-width: 0;
  flex: 1;
}
.customer-account-payments-page .saved-payment-method__info strong {
  display: block;
  margin-bottom: 2px;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-account-payments-page .saved-payment-method__info span {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.3;
}
.customer-account-payments-page .saved-payment-method__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.customer-account-payments-page .saved-payment-method__actions button {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #888;
  cursor: pointer;
}
.customer-account-payments-page .saved-payment-method__actions button:hover {
  background: #f5f5f5;
  color: #0D2B5A;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | DEFAULT BADGE
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .default-badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | ADD PAYMENT METHOD
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .saved-payment-add {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: #fff;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.customer-account-payments-page .saved-payment-add:hover {
  background: #fafafa;
}
.customer-account-payments-page .saved-payment-add i {
  font-size: 16px;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | SECURITY BOX
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-security {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 9px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-account-payments-page .customer-account-payments-security__icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 17px;
}
.customer-account-payments-page .customer-account-payments-security strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-account-payments-page .customer-account-payments-security p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.customer-account-payments-page {
  /*
  |--------------------------------------------------------------------------
  | HELP BOX
  |--------------------------------------------------------------------------
  */
}
.customer-account-payments-page .customer-account-payments-help {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fff;
}
.customer-account-payments-page .customer-account-payments-help__icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f5f5f5;
  color: #0D2B5A;
  font-size: 17px;
}
.customer-account-payments-page .customer-account-payments-help strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
}
.customer-account-payments-page .customer-account-payments-help p {
  margin: 0 0 6px !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.customer-account-payments-page .customer-account-payments-help a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/*==========================================================================
| ADD PAYMENT MODAL
| IMPORTANT: Modal is OUTSIDE .customer-account-payments-page
===========================================================================*/
.customer-account-payment-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  width: 100%;
  height: 100%;
}
.customer-account-payment-modal.active {
  display: block;
}
.customer-account-payment-modal {
  /*
  |--------------------------------------------------------------------------
  | Overlay
  |--------------------------------------------------------------------------
  */
}
.customer-account-payment-modal__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 25, 20, 0.48);
  backdrop-filter: blur(3px);
}
.customer-account-payment-modal {
  /*
  |--------------------------------------------------------------------------
  | Modal Content
  |--------------------------------------------------------------------------
  */
}
.customer-account-payment-modal__content {
  position: relative;
  z-index: 2;
  width: calc(100% - 30px);
  max-width: 500px;
  max-height: calc(100vh - 30px);
  overflow-y: auto;
  margin: 15px auto;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
  animation: paymentModalIn 0.2s ease forwards;
}
.customer-account-payment-modal {
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.customer-account-payment-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 20px;
  border-bottom: 1px solid #ddd;
}
.customer-account-payment-modal__header span {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-account-payment-modal__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
.customer-account-payment-modal {
  /*
  |--------------------------------------------------------------------------
  | Close
  |--------------------------------------------------------------------------
  */
}
.customer-account-payment-modal__close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #666;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.customer-account-payment-modal__close:hover {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.05);
  color: #177245;
}
.customer-account-payment-modal {
  /*
  |--------------------------------------------------------------------------
  | Form
  |--------------------------------------------------------------------------
  */
}
.customer-account-payment-modal__form {
  display: block;
  padding: 20px;
}
.customer-account-payment-modal {
  /*
  |--------------------------------------------------------------------------
  | Actions
  |--------------------------------------------------------------------------
  */
}
.customer-account-payment-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
}

/*
|--------------------------------------------------------------------------
| Modal Form Groups
|--------------------------------------------------------------------------
*/
.customer-account-payment-modal .modal-form-group {
  margin: 0 0 15px;
}
.customer-account-payment-modal .modal-form-group label {
  display: block;
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.customer-account-payment-modal .modal-form-group input {
  display: block;
  width: 100%;
  height: 43px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 43px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.customer-account-payment-modal .modal-form-group input::placeholder {
  color: #aaa;
  opacity: 1;
}
.customer-account-payment-modal .modal-form-group input:focus {
  border-color: rgba(15, 61, 46, 0.45);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.06);
}
.customer-account-payment-modal {
  /*
  |--------------------------------------------------------------------------
  | Two Column Inputs
  |--------------------------------------------------------------------------
  */
}
.customer-account-payment-modal .modal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.customer-account-payment-modal {
  /*
  |--------------------------------------------------------------------------
  | Checkbox
  |--------------------------------------------------------------------------
  */
}
.customer-account-payment-modal .modal-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  color: #777;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.customer-account-payment-modal .modal-checkbox input {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 0;
  padding: 0;
  accent-color: #177245;
  cursor: pointer;
}
.customer-account-payment-modal .modal-checkbox span {
  color: #777;
  font-size: 14px;
}
.customer-account-payment-modal {
  /*
  |--------------------------------------------------------------------------
  | Buttons
  |--------------------------------------------------------------------------
  */
}
.customer-account-payment-modal .modal-cancel-btn,
.customer-account-payment-modal .modal-save-btn {
  min-height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 15px;
  border-radius: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.customer-account-payment-modal .modal-cancel-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
}
.customer-account-payment-modal .modal-cancel-btn:hover {
  border-color: #ccc;
  background: #f8f8f8;
  color: #0D2B5A;
}
.customer-account-payment-modal .modal-save-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.customer-account-payment-modal .modal-save-btn:hover {
  opacity: 0.92;
}
.customer-account-payment-modal .modal-save-btn i {
  font-size: 15px;
}

/*
|--------------------------------------------------------------------------
| Body Lock
|--------------------------------------------------------------------------
*/
body.payment-modal-open {
  overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| Modal Animation
|--------------------------------------------------------------------------
*/
@keyframes paymentModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1100px) {
  .customer-account-payments-page .customer-account-payments-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}
/*
|--------------------------------------------------------------------------
| TABLET / SMALL DESKTOP
|--------------------------------------------------------------------------
*/
@media (max-width: 900px) {
  .customer-account-payments-page .customer-account-payments-layout {
    grid-template-columns: 1fr;
  }
  .customer-account-payments-page .customer-account-payments-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .customer-account-payments-page .saved-methods-card {
    grid-column: 1/-1;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-account-payments-page .customer-account-payments-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .customer-account-payments-page .customer-account-payments-layout {
    grid-template-columns: 1fr;
  }
  .customer-account-payments-page .customer-account-payments-sidebar {
    display: flex;
    flex-direction: column;
  }
  .customer-account-payments-page .customer-account-payments-table-wrap {
    display: none;
  }
  .customer-account-payments-page .customer-account-payments-mobile-list {
    display: flex;
    flex-direction: column;
  }
  .customer-account-payments-page .mobile-payment-item {
    padding: 14px;
    border-bottom: 1px solid #eee;
  }
  .customer-account-payments-page .mobile-payment-item:last-child {
    border-bottom: 0;
  }
  .customer-account-payments-page .mobile-payment-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .customer-account-payments-page .mobile-payment-item__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .customer-account-payments-page .mobile-payment-item__bottom > span:first-child {
    color: #777;
    font-size: 14px;
  }
  .customer-account-payments-page .mobile-payment-view {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #177245 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  .customer-account-payments-page .customer-account-payments-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
  /*
  |--------------------------------------------------------------------------
  | Modal Mobile
  |--------------------------------------------------------------------------
  */
  .customer-account-payment-modal__content {
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
    margin: 10px auto;
  }
  .customer-account-payment-modal__header {
    padding: 16px;
  }
  .customer-account-payment-modal__form {
    padding: 16px;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-account-payments-page .customer-account-payments-header h1 {
    font-size: 22px !important;
  }
  .customer-account-payments-page .customer-account-payments-card__header {
    padding: 13px 14px;
  }
  .customer-account-payments-page .customer-account-payments-card__header h2 {
    font-size: 19px !important;
  }
  .customer-account-payments-page .customer-account-payments-filter select {
    width: 130px;
  }
  .customer-account-payments-page .customer-account-payments-stat {
    min-height: 70px;
    padding: 12px;
  }
  .customer-account-payments-page .customer-account-payments-stat__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .customer-account-payments-page .customer-account-payments-stat strong {
    font-size: 19px;
  }
  .customer-account-payments-page .saved-payment-method {
    padding: 12px 14px;
  }
  .customer-account-payments-page .default-badge {
    display: none;
  }
  /*
  |--------------------------------------------------------------------------
  | Modal Small Mobile
  |--------------------------------------------------------------------------
  */
  .customer-account-payment-modal__header h2 {
    font-size: 20px !important;
  }
  .customer-account-payment-modal .modal-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .customer-account-payment-modal__actions {
    flex-direction: column-reverse;
  }
  .customer-account-payment-modal .modal-cancel-btn,
  .customer-account-payment-modal .modal-save-btn {
    width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-account-payments-page .customer-account-payments-header h1 {
    font-size: 21px !important;
  }
  .customer-account-payments-page .customer-account-payments-filter select {
    width: 120px;
  }
  .customer-account-payments-page .payment-transaction__icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}
.smart-buy-admin-page {
  padding: 20px;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/
.smart-buy-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  margin-bottom: 24px;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(16, 26, 35, 0.04);
}
.smart-buy-admin-header__content {
  display: flex;
  align-items: center;
  gap: 18px;
}
.smart-buy-admin-header__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  font-size: 22px;
}
.smart-buy-admin-header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #0D2B5A;
  line-height: 1.3;
}
.smart-buy-admin-header p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #555555;
}
.smart-buy-admin-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.smart-buy-admin-header__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-admin-header__button--outline {
  color: #177245;
  border: 1px solid rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.04);
}
.smart-buy-admin-header__button--outline:hover {
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
}
@media (max-width: 767px) {
  .smart-buy-admin-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .smart-buy-admin-header__actions {
    width: 100%;
  }
  .smart-buy-admin-header__button {
    width: 100%;
  }
}

/*
|--------------------------------------------------------------------------
| Statistics
|--------------------------------------------------------------------------
*/
.smart-buy-admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .smart-buy-admin-stats {
    grid-template-columns: 1fr;
  }
}

.smart-buy-admin-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 100px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(16, 26, 35, 0.035);
}
.smart-buy-admin-stat-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 14px;
  font-size: 19px;
}
.smart-buy-admin-stat-card__icon--blue {
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.1);
}
.smart-buy-admin-stat-card__icon--warning {
  color: #d97706;
  background: rgba(245, 158, 11, 0.1);
}
.smart-buy-admin-stat-card__icon--purple {
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.1);
}
.smart-buy-admin-stat-card__icon--green {
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
}
.smart-buy-admin-stat-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.smart-buy-admin-stat-card__content span {
  font-size: 13px;
  color: #555555;
}
.smart-buy-admin-stat-card__content strong {
  font-size: 24px;
  font-weight: 700;
  color: #0D2B5A;
}

/*
|--------------------------------------------------------------------------
| Main List Card
|--------------------------------------------------------------------------
*/
.smart-buy-admin-list-card {
  padding: 20px;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(16, 26, 35, 0.04);
}
.smart-buy-admin-list-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.08);
}
.smart-buy-admin-list-card__header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #0D2B5A;
}
.smart-buy-admin-list-card__header p {
  margin: 5px 0 0;
  font-size: 13px;
  color: #555555;
}
.smart-buy-admin-list-card__count {
  width: 68px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(23, 114, 69, 0.07);
}
.smart-buy-admin-list-card__count strong {
  font-size: 18px;
  font-weight: 700;
  color: #177245;
}
.smart-buy-admin-list-card__count span {
  margin-top: 2px;
  font-size: 10px;
  color: #555555;
}
@media (max-width: 767px) {
  .smart-buy-admin-list-card {
    padding: 15px;
  }
  .smart-buy-admin-list-card__header {
    align-items: flex-start;
  }
}

/*
|--------------------------------------------------------------------------
| Filters
|--------------------------------------------------------------------------
*/
.smart-buy-admin-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr)) auto auto;
  gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .smart-buy-admin-filters {
    grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(140px, 1fr)) auto;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-admin-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-admin-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .smart-buy-admin-filters {
    grid-template-columns: 1fr;
  }
}

.smart-buy-admin-filter-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  border: 1px solid rgba(16, 26, 35, 0.12);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-admin-filter-search:focus-within {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}
.smart-buy-admin-filter-search i {
  position: absolute;
  left: 16px;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
}
.smart-buy-admin-filter-search input {
  width: 100%;
  height: 100%;
  padding: 0 15px 0 42px;
  border: 0;
  outline: none;
  background: transparent;
  color: #0D2B5A;
  font-size: 13px;
}
.smart-buy-admin-filter-search input::-webkit-input-placeholder {
  color: rgba(85, 85, 85, 0.65);
}
.smart-buy-admin-filter-search input:-moz-placeholder {
  color: rgba(85, 85, 85, 0.65);
}
.smart-buy-admin-filter-search input::-moz-placeholder {
  color: rgba(85, 85, 85, 0.65);
}
.smart-buy-admin-filter-search input:-ms-input-placeholder {
  color: rgba(85, 85, 85, 0.65);
}

.smart-buy-admin-filter-select {
  position: relative;
}
.smart-buy-admin-filter-select select {
  width: 100%;
  height: 46px;
  padding: 0 36px 0 14px;
  appearance: none;
  border: 1px solid rgba(16, 26, 35, 0.12);
  border-radius: 10px;
  background: linear-gradient(45deg, transparent 50%, rgba(85, 85, 85, 0.7) 50%), linear-gradient(135deg, rgba(85, 85, 85, 0.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  outline: none;
  color: #0D2B5A;
  font-size: 13px;
  cursor: pointer;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-admin-filter-select select:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

.smart-buy-admin-filter-button {
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: #177245;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-admin-filter-button:hover {
  background: rgba(23, 114, 69, 0.9);
}

.smart-buy-admin-reset-button {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 26, 35, 0.12);
  border-radius: 10px;
  color: #555555;
  background: #ffffff;
  text-decoration: none;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-admin-reset-button:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.05);
  border-color: rgba(220, 53, 69, 0.2);
}

/*
|--------------------------------------------------------------------------
| Request Card
|--------------------------------------------------------------------------
*/
.smart-buy-admin-requests {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.smart-buy-admin-request {
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 15px;
  background: #ffffff;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-admin-request:hover {
  border-color: rgba(23, 114, 69, 0.22);
  box-shadow: 0 8px 24px rgba(16, 26, 35, 0.04);
}
.smart-buy-admin-request__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.07);
}
.smart-buy-admin-request__info {
  min-width: 0;
}
.smart-buy-admin-request__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: rgba(85, 85, 85, 0.75);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.smart-buy-admin-request__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.smart-buy-admin-request__meta strong {
  color: #0D2B5A;
  font-size: 17px;
  font-weight: 700;
}
.smart-buy-admin-request__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #555555;
  font-size: 12px;
}
.smart-buy-admin-request__meta span i {
  color: #177245;
  font-size: 11px;
}
.smart-buy-admin-request__product {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) minmax(180px, 0.5fr);
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.smart-buy-admin-request__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid rgba(16, 26, 35, 0.07);
  background: rgba(242, 244, 247, 0.35);
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-admin-request__product {
    grid-template-columns: 82px 1fr;
  }
  .smart-buy-admin-request .smart-buy-admin-customer {
    grid-column: 2/-1;
  }
}
@media (max-width: 767px) {
  .smart-buy-admin-request__top {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-admin-request__product {
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 16px;
  }
  .smart-buy-admin-request__actions {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }
}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/
.smart-buy-admin-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
}
.smart-buy-admin-status--warning {
  color: #a16207;
  background: rgba(245, 158, 11, 0.12);
}
.smart-buy-admin-status--info {
  color: #0369a1;
  background: rgba(14, 165, 233, 0.1);
}
.smart-buy-admin-status--purple {
  color: #6d28d9;
  background: rgba(139, 92, 246, 0.1);
}
.smart-buy-admin-status--success {
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
}
.smart-buy-admin-status--blue {
  color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
}
.smart-buy-admin-status--primary {
  color: #075985;
  background: rgba(14, 165, 233, 0.1);
}
.smart-buy-admin-status--danger {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

/*
|--------------------------------------------------------------------------
| Product
|--------------------------------------------------------------------------
*/
.smart-buy-admin-product-image {
  width: 82px;
  height: 82px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(16, 26, 35, 0.04);
}
.smart-buy-admin-product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@media (max-width: 767px) {
  .smart-buy-admin-product-image {
    width: 70px;
    height: 70px;
  }
}

.smart-buy-admin-product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(85, 85, 85, 0.5);
  background: rgba(16, 26, 35, 0.04);
}

.smart-buy-admin-product-details {
  min-width: 0;
}
.smart-buy-admin-product-details > span {
  display: block;
  margin-bottom: 6px;
  color: #177245;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.smart-buy-admin-product-details h3 {
  margin: 0 0 8px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.smart-buy-admin-product-details__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 15px;
}
.smart-buy-admin-product-details__meta span {
  color: #555555;
  font-size: 12px;
}
.smart-buy-admin-product-details__meta strong {
  color: #0D2B5A;
  font-weight: 600;
}

.smart-buy-admin-more-items {
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  color: #177245;
  background: rgba(23, 114, 69, 0.08);
  font-size: 11px;
  font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| Customer
|--------------------------------------------------------------------------
*/
.smart-buy-admin-customer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
  border-left: 1px solid rgba(16, 26, 35, 0.08);
}
.smart-buy-admin-customer span {
  color: rgba(85, 85, 85, 0.7);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.smart-buy-admin-customer strong {
  color: #0D2B5A;
  font-size: 13px;
  font-weight: 600;
}
.smart-buy-admin-customer small {
  overflow: hidden;
  color: #555555;
  font-size: 11px;
  text-overflow: ellipsis;
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-admin-customer {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid rgba(16, 26, 35, 0.08);
  }
}
@media (max-width: 767px) {
  .smart-buy-admin-customer {
    grid-column: 1/-1;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid rgba(16, 26, 35, 0.08);
  }
}

/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/
.smart-buy-admin-progress {
  padding: 0 20px 18px;
}
.smart-buy-admin-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.smart-buy-admin-progress__header span {
  color: #555555;
  font-size: 12px;
}
.smart-buy-admin-progress__header strong {
  color: #177245;
  font-size: 12px;
  font-weight: 700;
}
.smart-buy-admin-progress__bar {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(16, 26, 35, 0.08);
}
.smart-buy-admin-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: #177245;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-admin-progress__steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 9px;
}
.smart-buy-admin-progress__steps span {
  color: rgba(85, 85, 85, 0.65);
  font-size: 10px;
  text-align: center;
}
.smart-buy-admin-progress__steps span:first-child {
  text-align: left;
}
.smart-buy-admin-progress__steps span:last-child {
  text-align: right;
}
.smart-buy-admin-progress__steps span.is-active {
  color: #177245;
  font-weight: 600;
}
@media (max-width: 767px) {
  .smart-buy-admin-progress {
    padding: 0 16px 16px;
  }
  .smart-buy-admin-progress__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .smart-buy-admin-progress__steps span {
    text-align: center !important;
  }
}

/*
|--------------------------------------------------------------------------
| Actions
|--------------------------------------------------------------------------
*/
.smart-buy-admin-action-info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
  color: #a16207;
  font-size: 12px;
  font-weight: 600;
}
.smart-buy-admin-action-info i {
  color: inherit;
}
.smart-buy-admin-action-info--info {
  color: #0369a1;
}
.smart-buy-admin-action-info--purple {
  color: #6d28d9;
}
.smart-buy-admin-action-info--success {
  color: #177245;
}
.smart-buy-admin-action-info--blue {
  color: #2563eb;
}
.smart-buy-admin-action-info--primary {
  color: #075985;
}
@media (max-width: 767px) {
  .smart-buy-admin-action-info {
    margin-right: 0;
  }
}

.smart-buy-admin-view-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(13, 43, 90, 0.16);
  border-radius: 10px;
  color: #0D2B5A;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-admin-view-button:hover {
  color: #ffffff;
  background: #177245;
  border-color: #177245;
}
@media (max-width: 767px) {
  .smart-buy-admin-view-button {
    width: 100%;
  }
}

/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/
.smart-buy-admin-empty {
  padding: 70px 20px;
  text-align: center;
}
.smart-buy-admin-empty__icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 20px;
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
  font-size: 26px;
}
.smart-buy-admin-empty h3 {
  margin: 0 0 8px;
  color: #0D2B5A;
  font-size: 18px;
}
.smart-buy-admin-empty p {
  max-width: 420px;
  margin: 0 auto;
  color: #555555;
  font-size: 13px;
  line-height: 1.7;
}
.smart-buy-admin-empty__button {
  display: inline-flex;
  margin-top: 20px;
  padding: 11px 18px;
  border-radius: 9px;
  color: #ffffff;
  background: #177245;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/
.smart-buy-admin-pagination {
  display: flex;
  justify-content: center;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid rgba(16, 26, 35, 0.08);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .smart-buy-admin-page {
    padding: 14px;
  }
  .smart-buy-admin-stat-card {
    min-height: 90px;
  }
  .smart-buy-admin-request__meta {
    gap: 7px 12px;
  }
  .smart-buy-admin-product-details h3 {
    font-size: 14px;
  }
}
.smart-buy-details-page {
  width: 100%;
  color: #344054;
  font-size: 14px;
}
.smart-buy-details-page * {
  box-sizing: border-box;
}
.smart-buy-details-page {
  /* =========================================================
      PAGE HEADER
  ========================================================= */
}
.smart-buy-details-page .smart-buy-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  margin-bottom: 20px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
}
.smart-buy-details-page .header-left {
  min-width: 0;
}
.smart-buy-details-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s ease;
}
.smart-buy-details-page .back-link i {
  font-size: 17px;
}
.smart-buy-details-page .back-link:hover {
  color: #1f6f50;
}
.smart-buy-details-page .request-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.smart-buy-details-page .request-title-row .request-label {
  display: block;
  margin-bottom: 4px;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-details-page .request-title-row h1 {
  margin: 0;
  color: #243b53;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}
.smart-buy-details-page .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.smart-buy-details-page {
  /* =========================================================
      STATUS BADGES
  ========================================================= */
}
.smart-buy-details-page .status-badge,
.smart-buy-details-page .quote-status-badge,
.smart-buy-details-page .item-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.smart-buy-details-page .status-pending {
  background: #fff7e6;
  color: #b54708;
}
.smart-buy-details-page .status-info {
  background: #eaf4ff;
  color: #175cd3;
}
.smart-buy-details-page .status-success {
  background: #eaf7f0;
  color: #157347;
}
.smart-buy-details-page .status-warning {
  background: #fff7e6;
  color: #b54708;
}
.smart-buy-details-page .status-danger {
  background: #fff0f0;
  color: #d92d20;
}
.smart-buy-details-page .quote-status-badge {
  background: #fff7e6;
  color: #b54708;
}
.smart-buy-details-page .quote-status-badge.pending {
  background: #f2f4f7;
  color: #667085;
}
.smart-buy-details-page .item-count {
  background: #eef7f3;
  color: #287255;
}
.smart-buy-details-page {
  /* =========================================================
      MAIN GRID
  ========================================================= */
}
.smart-buy-details-page .smart-buy-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.smart-buy-details-page .main-column,
.smart-buy-details-page .sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.smart-buy-details-page {
  /* =========================================================
      CARD
  ========================================================= */
}
.smart-buy-details-page .smart-buy-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
}
.smart-buy-details-page .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-details-page .card-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.smart-buy-details-page .card-heading .card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #eef6f2;
  border-radius: 10px;
  color: #287255;
}
.smart-buy-details-page .card-heading .card-icon i {
  font-size: 18px;
}
.smart-buy-details-page .card-heading h2 {
  margin: 0 0 3px;
  color: #344054;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}
.smart-buy-details-page .card-heading p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.4;
}
.smart-buy-details-page {
  /* =========================================================
      BUTTONS
  ========================================================= */
}
.smart-buy-details-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.smart-buy-details-page .btn i {
  font-size: 17px;
}
.smart-buy-details-page .btn-primary {
  background: #216e4e;
  border-color: #216e4e;
  color: #ffffff;
}
.smart-buy-details-page .btn-primary:hover {
  background: #195a40;
  border-color: #195a40;
  color: #ffffff;
}
.smart-buy-details-page .btn-secondary {
  background: #eef6f2;
  border-color: #d9ebe3;
  color: #216e4e;
}
.smart-buy-details-page .btn-secondary:hover {
  background: #e2f0e9;
  color: #195a40;
}
.smart-buy-details-page .btn-outline {
  background: #ffffff;
  border-color: #d0d5dd;
  color: #344054;
}
.smart-buy-details-page .btn-outline:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}
.smart-buy-details-page {
  /* =========================================================
      REQUESTED PRODUCTS
  ========================================================= */
}
.smart-buy-details-page .requested-products {
  padding: 0 20px;
}
.smart-buy-details-page .requested-product {
  padding: 20px 0;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-details-page .requested-product:last-child {
  border-bottom: none;
}
.smart-buy-details-page .product-main-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.smart-buy-details-page .product-image-wrap {
  flex-shrink: 0;
}
.smart-buy-details-page .product-image,
.smart-buy-details-page .product-number {
  width: 68px;
  height: 68px;
  border-radius: 10px;
}
.smart-buy-details-page .product-image {
  display: block;
  object-fit: cover;
  border: 1px solid #eaecf0;
}
.smart-buy-details-page .product-number {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef6f2;
  color: #287255;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-details-page .product-info {
  flex: 1;
  min-width: 0;
}
.smart-buy-details-page .product-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.smart-buy-details-page .product-title-row h3 {
  margin: 0;
  color: #344054;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.smart-buy-details-page .product-quantity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: #667085;
  font-size: 14px;
}
.smart-buy-details-page .product-quantity strong {
  color: #344054;
  font-weight: 700;
}
.smart-buy-details-page .view-product {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: #287255;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.smart-buy-details-page .view-product i {
  font-size: 15px;
}
.smart-buy-details-page .view-product:hover {
  color: #195a40;
}
.smart-buy-details-page .product-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.smart-buy-details-page .product-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  background: #f2f4f7;
  border-radius: 6px;
  color: #667085;
  font-size: 14px;
  line-height: 1.2;
}
.smart-buy-details-page .product-meta-item strong {
  color: #475467;
  font-weight: 600;
}
.smart-buy-details-page .product-notes {
  margin-top: 16px;
  padding: 12px 14px;
  background: #f8faf9;
  border-radius: 8px;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}
.smart-buy-details-page .product-notes strong {
  margin-right: 4px;
  color: #475467;
}
.smart-buy-details-page {
  /* =========================================================
      QUOTE DETAILS
  ========================================================= */
}
.smart-buy-details-page .quote-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-details-page .quote-summary-item {
  padding: 16px 20px;
  border-right: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-details-page .quote-summary-item:nth-child(3n) {
  border-right: none;
}
.smart-buy-details-page .quote-summary-item:nth-last-child(-n+3) {
  border-bottom: none;
}
.smart-buy-details-page .quote-summary-item span {
  display: block;
  margin-bottom: 7px;
  color: #667085;
  font-size: 14px;
}
.smart-buy-details-page .quote-summary-item strong {
  display: block;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-details-page .quote-summary-item .quote-total {
  color: #216e4e;
}
.smart-buy-details-page {
  /* =========================================================
      QUOTE ITEMS
  ========================================================= */
}
.smart-buy-details-page .quote-items-box {
  margin: 16px 20px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  overflow: hidden;
}
.smart-buy-details-page .quote-items-header {
  padding: 14px;
  background: #f9fafb;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-details-page .quote-items-header h3 {
  margin: 0 0 3px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-details-page .quote-items-header p {
  margin: 0;
  color: #667085;
  font-size: 14px;
}
.smart-buy-details-page .quote-table-head,
.smart-buy-details-page .quote-table-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(80px, 0.7fr) minmax(110px, 1fr) minmax(110px, 1fr);
  gap: 16px;
  align-items: center;
}
.smart-buy-details-page .quote-table-head {
  padding: 11px 14px;
  background: #f9fafb;
  color: #667085;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-details-page .quote-table-row {
  padding: 15px 14px;
  border-top: 1px solid #eaecf0;
  color: #475467;
  font-size: 14px;
}
.smart-buy-details-page .quote-product-name {
  min-width: 0;
}
.smart-buy-details-page .quote-product-name strong {
  display: block;
  overflow: hidden;
  color: #344054;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.smart-buy-details-page .quote-line-total {
  color: #344054;
  font-weight: 700;
}
.smart-buy-details-page .quote-table-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  color: #667085;
  font-size: 14px;
}
.smart-buy-details-page .quote-table-empty i {
  font-size: 20px;
}
.smart-buy-details-page {
  /* =========================================================
      QUOTE NOTES
  ========================================================= */
}
.smart-buy-details-page .quote-notes {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 20px;
  padding: 14px;
  background: #f4f9f6;
  border-left: 3px solid #287255;
  border-radius: 6px;
}
.smart-buy-details-page .quote-notes .quote-notes-icon {
  flex-shrink: 0;
  color: #287255;
}
.smart-buy-details-page .quote-notes .quote-notes-icon i {
  font-size: 18px;
}
.smart-buy-details-page .quote-notes strong {
  display: block;
  margin-bottom: 5px;
  color: #344054;
  font-size: 14px;
}
.smart-buy-details-page .quote-notes p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.6;
}
.smart-buy-details-page .quote-action-bottom {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px 20px;
}
.smart-buy-details-page {
  /* =========================================================
      EMPTY STATES
  ========================================================= */
}
.smart-buy-details-page .quote-empty-state,
.smart-buy-details-page .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 30px 20px;
  text-align: center;
}
.smart-buy-details-page .quote-empty-state .empty-icon,
.smart-buy-details-page .empty-state .empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  background: #f2f4f7;
  border-radius: 50%;
  color: #98a2b3;
}
.smart-buy-details-page .quote-empty-state .empty-icon i,
.smart-buy-details-page .empty-state .empty-icon i {
  font-size: 24px;
}
.smart-buy-details-page .quote-empty-state h3,
.smart-buy-details-page .empty-state h3 {
  margin: 0 0 6px;
  color: #344054;
  font-size: 16px;
  font-weight: 700;
}
.smart-buy-details-page .quote-empty-state p,
.smart-buy-details-page .empty-state p {
  max-width: 400px;
  margin: 0 0 18px;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}
.smart-buy-details-page .small-empty {
  min-height: 150px;
}
.smart-buy-details-page {
  /* =========================================================
      INFO GRID
  ========================================================= */
}
.smart-buy-details-page .info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.smart-buy-details-page .info-item {
  padding: 18px 20px;
  border-right: 1px solid #eaecf0;
}
.smart-buy-details-page .info-item:last-child {
  border-right: none;
}
.smart-buy-details-page .info-item span {
  display: block;
  margin-bottom: 7px;
  color: #667085;
  font-size: 14px;
}
.smart-buy-details-page .info-item strong {
  display: block;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-details-page {
  /* =========================================================
      SIDEBAR
  ========================================================= */
}
.smart-buy-details-page .sidebar-card .card-header {
  padding: 17px 20px;
}
.smart-buy-details-page .customer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-details-page .customer-profile h3 {
  margin: 0 0 4px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-details-page .customer-profile span {
  color: #667085;
  font-size: 14px;
}
.smart-buy-details-page .customer-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #216e4e;
  border-radius: 50%;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}
.smart-buy-details-page .sidebar-info-list {
  padding: 0 20px;
}
.smart-buy-details-page .sidebar-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-details-page .sidebar-info-row:last-child {
  border-bottom: none;
}
.smart-buy-details-page .sidebar-info-row > i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #f2f4f7;
  border-radius: 7px;
  color: #667085;
  font-size: 15px;
}
.smart-buy-details-page .sidebar-info-row div {
  min-width: 0;
}
.smart-buy-details-page .sidebar-info-row span {
  display: block;
  margin-bottom: 4px;
  color: #667085;
  font-size: 14px;
}
.smart-buy-details-page .sidebar-info-row strong {
  display: block;
  overflow-wrap: anywhere;
  color: #344054;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-details-page {
  /* =========================================================
      ADDRESS
  ========================================================= */
}
.smart-buy-details-page .address-content {
  padding: 20px;
}
.smart-buy-details-page .address-content p {
  margin: 0 0 7px;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}
.smart-buy-details-page .address-content strong {
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-details-page {
  /* =========================================================
      REQUEST INFORMATION
  ========================================================= */
}
.smart-buy-details-page .request-info-list {
  padding: 0 20px;
}
.smart-buy-details-page .request-info-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-details-page .request-info-list > div:last-child {
  border-bottom: none;
}
.smart-buy-details-page .request-info-list > div span {
  color: #667085;
  font-size: 14px;
}
.smart-buy-details-page .request-info-list > div strong {
  color: #344054;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.smart-buy-details-page {
  /* =========================================================
      STATUS FORM
  ========================================================= */
}
.smart-buy-details-page .status-form {
  padding: 20px;
}
.smart-buy-details-page .status-form select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  outline: none;
  color: #344054;
  font-size: 14px;
}
.smart-buy-details-page .status-form select:focus {
  border-color: #287255;
  box-shadow: 0 0 0 3px rgba(40, 114, 85, 0.08);
}
.smart-buy-details-page .status-form .btn-save-status {
  width: 100%;
  margin-top: 10px;
  background: #216e4e;
  color: #ffffff;
}
.smart-buy-details-page .status-form .btn-save-status:hover {
  background: #195a40;
}
.smart-buy-details-page {
  /* =========================================================
      RESPONSIVE
  ========================================================= */
}
@media (max-width: 1100px) {
  .smart-buy-details-page .smart-buy-content-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  .smart-buy-details-page .quote-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .smart-buy-details-page .quote-summary-item:nth-child(3n) {
    border-right: 1px solid #eaecf0;
  }
  .smart-buy-details-page .quote-summary-item:nth-child(2n) {
    border-right: none;
  }
  .smart-buy-details-page .quote-summary-item:nth-last-child(-n+3) {
    border-bottom: 1px solid #eaecf0;
  }
  .smart-buy-details-page .quote-summary-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}
@media (max-width: 991px) {
  .smart-buy-details-page .smart-buy-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .smart-buy-details-page .header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .smart-buy-details-page .smart-buy-content-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-details-page .sidebar-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .smart-buy-details-page .smart-buy-page-header {
    padding: 18px;
  }
  .smart-buy-details-page .header-actions .btn {
    flex: 1;
  }
  .smart-buy-details-page .sidebar-column {
    grid-template-columns: 1fr;
  }
  .smart-buy-details-page .card-header {
    padding: 16px;
  }
  .smart-buy-details-page .requested-products {
    padding: 0 16px;
  }
  .smart-buy-details-page .product-main-row {
    align-items: flex-start;
  }
  .smart-buy-details-page .product-image,
  .smart-buy-details-page .product-number {
    width: 58px;
    height: 58px;
  }
  .smart-buy-details-page .product-title-row {
    flex-direction: column;
    gap: 8px;
  }
  .smart-buy-details-page .quote-summary-grid,
  .smart-buy-details-page .info-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-details-page .quote-summary-item {
    border-right: none !important;
    border-bottom: 1px solid #eaecf0 !important;
  }
  .smart-buy-details-page .quote-summary-item:last-child {
    border-bottom: none !important;
  }
  .smart-buy-details-page .quote-table-head {
    display: none;
  }
  .smart-buy-details-page .quote-table-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .smart-buy-details-page .quote-table-row .quote-product-name {
    grid-column: 1/-1;
  }
  .smart-buy-details-page .quote-items-box,
  .smart-buy-details-page .quote-notes {
    margin-left: 16px;
    margin-right: 16px;
  }
  .smart-buy-details-page .quote-action-bottom {
    padding-left: 16px;
    padding-right: 16px;
    flex-direction: column;
  }
  .smart-buy-details-page .quote-action-bottom .btn {
    width: 100%;
  }
  .smart-buy-details-page .request-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}
@media (max-width: 480px) {
  .smart-buy-details-page .header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .smart-buy-details-page .header-actions .btn {
    width: 100%;
  }
  .smart-buy-details-page .product-main-row {
    flex-wrap: wrap;
  }
  .smart-buy-details-page .product-info {
    width: 100%;
    flex-basis: calc(100% - 72px);
  }
  .smart-buy-details-page .product-meta {
    width: 100%;
  }
  .smart-buy-details-page .quote-table-row {
    grid-template-columns: 1fr;
  }
  .smart-buy-details-page .quote-table-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .smart-buy-details-page .quote-table-row .quote-product-name {
    display: block;
  }
}
.smart-buy-details-page {
  /* =========================================================
     SMART BUY - SHIPPING & TRACKING
  ========================================================= */
}
.smart-buy-details-page .smart-buy-card .shipping-section {
  padding: 32px 20px 8px;
}
.smart-buy-details-page .smart-buy-card .shipping-section:first-of-type {
  padding-top: 28px;
}
.smart-buy-details-page .smart-buy-card .shipping-section + .shipping-section {
  margin-top: 8px;
}
.smart-buy-details-page .smart-buy-card {
  /* =====================================================
     SECTION HEADING
  ===================================================== */
}
.smart-buy-details-page .smart-buy-card .shipping-section-header {
  margin-bottom: 22px;
}
.smart-buy-details-page .smart-buy-card .shipping-section-header h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: #2f415c;
}
.smart-buy-details-page .smart-buy-card {
  /* =====================================================
     SHIPPING INFORMATION GRID
  ===================================================== */
}
.smart-buy-details-page .smart-buy-card .shipping-section .info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #e7eaee;
  border-left: 1px solid #e7eaee;
  border-radius: 10px;
  overflow: hidden;
  gap: 0;
}
.smart-buy-details-page .smart-buy-card .shipping-section .info-item {
  position: relative;
  min-height: 105px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border-right: 1px solid #e7eaee;
  border-bottom: 1px solid #e7eaee;
}
.smart-buy-details-page .smart-buy-card .shipping-section .info-item span {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #7a8596;
}
.smart-buy-details-page .smart-buy-card .shipping-section .info-item strong {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  color: #435168;
  word-break: break-word;
}
.smart-buy-details-page .smart-buy-card .shipping-section .info-item a.view-product {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  font-size: 14px;
  font-weight: 600;
  color: #356d61;
  text-decoration: none;
  transition: all 0.2s ease;
}
.smart-buy-details-page .smart-buy-card .shipping-section .info-item a.view-product i {
  font-size: 16px;
}
.smart-buy-details-page .smart-buy-card .shipping-section .info-item a.view-product:hover {
  color: #1f5549;
  transform: translateX(2px);
}
.smart-buy-details-page .smart-buy-card {
  /* =====================================================
     SHIPPING TIMELINE
  ===================================================== */
}
.smart-buy-details-page .smart-buy-card .shipping-section:nth-of-type(2) .info-item {
  min-height: 95px;
}
.smart-buy-details-page .smart-buy-card {
  /* =====================================================
     DELIVERY ADDRESS
  ===================================================== */
}
.smart-buy-details-page .smart-buy-card .shipping-address-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 22px 24px;
  border: 1px solid #e7eaee;
  border-radius: 10px;
  background: #fafcfc;
}
.smart-buy-details-page .smart-buy-card .shipping-address-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #edf4f1;
  color: #356d61;
}
.smart-buy-details-page .smart-buy-card .shipping-address-icon i {
  font-size: 20px;
}
.smart-buy-details-page .smart-buy-card .shipping-address-content {
  padding-top: 2px;
}
.smart-buy-details-page .smart-buy-card .shipping-address-content p {
  margin: 0 0 7px;
  font-size: 15px;
  line-height: 1.6;
  color: #566378;
}
.smart-buy-details-page .smart-buy-card .shipping-address-content p:last-of-type {
  margin-bottom: 5px;
}
.smart-buy-details-page .smart-buy-card .shipping-address-content strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #36445a;
}
.smart-buy-details-page .smart-buy-card {
  /* =====================================================
     SHIPMENT NOTES
  ===================================================== */
}
.smart-buy-details-page .smart-buy-card .quote-notes {
  margin: 26px 20px 0;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-left: 3px solid #356d61;
  border-radius: 8px;
  background: #f3f7f6;
}
.smart-buy-details-page .smart-buy-card .quote-notes-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e7f0ed;
  color: #356d61;
}
.smart-buy-details-page .smart-buy-card .quote-notes-icon i {
  font-size: 17px;
}
.smart-buy-details-page .smart-buy-card .quote-notes strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #435168;
}
.smart-buy-details-page .smart-buy-card .quote-notes p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #667085;
}
.smart-buy-details-page .smart-buy-card {
  /* =====================================================
     SHIPPING ACTIONS
  ===================================================== */
}
.smart-buy-details-page .smart-buy-card .quote-action-bottom {
  margin-top: 26px;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #edf0f2;
  background: #fafbfb;
}
.smart-buy-details-page .smart-buy-card .quote-action-bottom .btn {
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.smart-buy-details-page .smart-buy-card .quote-action-bottom .btn i {
  font-size: 17px;
}
.smart-buy-details-page .smart-buy-card .quote-action-bottom .btn-secondary {
  background: #fff;
  border: 1px solid #cfd9d6;
  color: #356d61;
}
.smart-buy-details-page .smart-buy-card .quote-action-bottom .btn-secondary:hover {
  background: #f2f7f5;
  border-color: #356d61;
}
.smart-buy-details-page .smart-buy-card .quote-action-bottom .btn-primary {
  background: #356d61;
  border: 1px solid #356d61;
  color: #fff;
}
.smart-buy-details-page .smart-buy-card .quote-action-bottom .btn-primary:hover {
  background: #29594e;
  border-color: #29594e;
  transform: translateY(-1px);
}
.smart-buy-details-page {
  /* =========================================================
     RESPONSIVE
  ========================================================= */
}
@media (max-width: 767px) {
  .smart-buy-details-page .smart-buy-card .shipping-section {
    padding: 24px 16px 4px;
  }
  .smart-buy-details-page .smart-buy-card .shipping-section-header {
    margin-bottom: 16px;
  }
  .smart-buy-details-page .smart-buy-card .shipping-section-header h3 {
    font-size: 19px;
  }
  .smart-buy-details-page .smart-buy-card .shipping-section .info-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-details-page .smart-buy-card .shipping-section .info-item {
    min-height: auto;
    padding: 18px 18px;
  }
  .smart-buy-details-page .smart-buy-card .shipping-address-box {
    padding: 18px;
  }
  .smart-buy-details-page .smart-buy-card .quote-notes {
    margin: 22px 16px 0;
    padding: 16px;
  }
  .smart-buy-details-page .smart-buy-card .quote-action-bottom {
    padding: 16px;
    flex-direction: column;
  }
  .smart-buy-details-page .smart-buy-card .quote-action-bottom .btn {
    width: 100%;
  }
}

/*==================================================
| Smart Buy Edit Page
==================================================*/
.smart-buy-edit-page {
  width: 100%;
}

/*==================================================
| Header
==================================================*/
.smart-buy-edit-header {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.smart-buy-edit-header > div {
  min-width: 0;
}

.smart-buy-edit-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.smart-buy-edit-back i {
  font-size: 14px;
}
.smart-buy-edit-back:hover {
  color: #177245;
}

.smart-buy-edit-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.smart-buy-edit-heading__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-buy-edit-heading__icon i {
  font-size: 20px;
}

.smart-buy-edit-heading > div:last-child {
  min-width: 0;
}

.smart-buy-edit-heading > div:last-child > span {
  display: block;
  margin-bottom: 2px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.smart-buy-edit-heading h1 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.smart-buy-edit-heading p {
  margin: 0;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  line-height: 1.4;
}

/*==================================================
| Header Status
==================================================*/
.smart-buy-edit-status {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 20px;
  background: #fff4dc;
  color: #ad7711;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.smart-buy-edit-status > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/*==================================================
| Layout
==================================================*/
.smart-buy-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 15px;
}

.smart-buy-edit-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.smart-buy-edit-sidebar {
  min-width: 0;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*==================================================
| Card
==================================================*/
.smart-buy-edit-card {
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.025);
}

.smart-buy-edit-card__header {
  min-height: 58px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.smart-buy-edit-card__header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.smart-buy-edit-card__header p {
  margin: 0;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  line-height: 1.4;
}

.smart-buy-edit-card__body {
  padding: 16px;
}

/*==================================================
| Grid
==================================================*/
.smart-buy-edit-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 13px;
}

.smart-buy-edit-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smart-buy-edit-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*==================================================
| Field
==================================================*/
.smart-buy-edit-field {
  margin-bottom: 13px;
}

.smart-buy-edit-grid .smart-buy-edit-field {
  margin-bottom: 0;
}

.smart-buy-edit-field:last-child {
  margin-bottom: 0;
}

.smart-buy-edit-field label {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.smart-buy-edit-field label span {
  color: #d45c5c;
}

.smart-buy-edit-field input,
.smart-buy-edit-field select,
.smart-buy-edit-field textarea {
  width: 100%;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.smart-buy-edit-field input,
.smart-buy-edit-field select {
  height: 39px;
  padding: 0 10px;
}

.smart-buy-edit-field textarea {
  min-height: 110px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.5;
}

.smart-buy-edit-field input::placeholder,
.smart-buy-edit-field textarea::placeholder {
  color: rgba(85, 85, 85, 0.2);
}

.smart-buy-edit-field input:hover,
.smart-buy-edit-field select:hover,
.smart-buy-edit-field textarea:hover {
  border-color: rgba(16, 26, 35, 0.15);
}

.smart-buy-edit-field input:focus,
.smart-buy-edit-field select:focus,
.smart-buy-edit-field textarea:focus {
  border-color: rgba(23, 114, 69, 0.35);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

/*==================================================
| Input Icon
==================================================*/
.smart-buy-edit-input-icon {
  position: relative;
}

.smart-buy-edit-input-icon > i {
  position: absolute;
  top: 50%;
  left: 10px;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}

.smart-buy-edit-input-icon input {
  padding-left: 32px;
}

/*==================================================
| Field Footer
==================================================*/
.smart-buy-edit-field-footer {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.smart-buy-edit-field-footer span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  line-height: 1.3;
}

.smart-buy-edit-field-footer span:last-child {
  color: rgba(85, 85, 85, 0.8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*==================================================
| Status Info
==================================================*/
.smart-buy-edit-status-info {
  margin-top: 11px;
  padding: 9px;
  border-radius: 7px;
  background: #f7f9fa;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.smart-buy-edit-status-info > i {
  color: #177245;
  font-size: 15px;
  flex: 0 0 auto;
}

.smart-buy-edit-status-info p {
  margin: 0;
  color: rgba(85, 85, 85, 0.8);
  font-size: 14px;
  line-height: 1.45;
}

/*==================================================
| Summary
==================================================*/
.smart-buy-edit-summary {
  padding: 5px 15px 9px;
}

.smart-buy-edit-summary > div {
  min-height: 41px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.smart-buy-edit-summary > div:last-child {
  border-bottom: 0;
}

.smart-buy-edit-summary span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-edit-summary strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

/*==================================================
| Amount
==================================================*/
.smart-buy-edit-amount {
  min-height: 42px;
  padding: 7px 15px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.smart-buy-edit-amount span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-edit-amount strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-edit-amount--total {
  margin-top: 2px;
  border-bottom: 0;
  border-top: 1px solid rgba(16, 26, 35, 0.08);
}

.smart-buy-edit-amount--total span {
  color: #0D2B5A;
  font-weight: 600;
}

.smart-buy-edit-amount--total strong {
  color: #177245;
  font-size: 18px;
  font-weight: 700;
}

/*==================================================
| Warning
==================================================*/
.smart-buy-edit-warning {
  padding: 12px;
  border: 1px solid #e9dfc7;
  border-radius: 9px;
  background: #fffaf0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.smart-buy-edit-warning__icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border-radius: 7px;
  background: #fff0c9;
  color: #a67516;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-buy-edit-warning__icon i {
  font-size: 14px;
}

.smart-buy-edit-warning strong {
  display: block;
  margin-bottom: 3px;
  color: #765615;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-edit-warning p {
  margin: 0;
  color: #876f42;
  font-size: 14px;
  line-height: 1.45;
}

/*==================================================
| Form Footer
==================================================*/
.smart-buy-edit-footer {
  margin-top: 15px;
  padding: 12px 15px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.025);
}

.smart-buy-edit-footer > div:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-buy-edit-footer > div:first-child span {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-edit-footer > div:first-child small {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-edit-footer__actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

/*==================================================
| Footer Buttons
==================================================*/
.smart-buy-edit-cancel,
.smart-buy-edit-reset,
.smart-buy-edit-save {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.smart-buy-edit-cancel {
  border: 1px solid transparent;
  background: transparent;
  color: #555555;
}
.smart-buy-edit-cancel:hover {
  background: #f7f8f9;
  color: #0D2B5A;
}

.smart-buy-edit-reset {
  border: 1px solid rgba(16, 26, 35, 0.09);
  background: #fff;
  color: #555555;
}
.smart-buy-edit-reset:hover {
  border-color: rgba(16, 26, 35, 0.15);
  background: #f8f9fa;
}

.smart-buy-edit-save {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.smart-buy-edit-save:hover {
  border-color: rgba(23, 114, 69, 0.07);
  background: rgba(23, 114, 69, 0.07);
}

.smart-buy-edit-save--loading {
  opacity: 0.7;
  cursor: wait;
}

.smart-buy-edit-save--loading i {
  animation: smartBuyEditSpin 0.8s linear infinite;
}

@keyframes smartBuyEditSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*==================================================
| Responsive - LG
==================================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-edit-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}
/*==================================================
| Responsive - MD
==================================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-edit-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-edit-layout {
    grid-template-columns: 1fr;
  }
  .smart-buy-edit-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smart-buy-edit-warning {
    grid-column: 1/-1;
  }
}
/*==================================================
| Responsive - XS
==================================================*/
@media (max-width: 767px) {
  .smart-buy-edit-heading h1 {
    font-size: 20px;
  }
  .smart-buy-edit-heading__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .smart-buy-edit-status {
    width: fit-content;
  }
  .smart-buy-edit-grid--two,
  .smart-buy-edit-grid--three {
    grid-template-columns: 1fr;
  }
  .smart-buy-edit-card__body {
    padding: 13px;
  }
  .smart-buy-edit-sidebar {
    grid-template-columns: 1fr;
  }
  .smart-buy-edit-warning {
    grid-column: auto;
  }
  .smart-buy-edit-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .smart-buy-edit-footer__actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .smart-buy-edit-cancel,
  .smart-buy-edit-reset,
  .smart-buy-edit-save {
    width: 100%;
    padding: 0 7px;
  }
}
.smart-buy-quote-create-page {
  width: 100%;
  font-family: "Poppins", sans-serif;
}
.smart-buy-quote-create-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.smart-buy-quote-create-page__heading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.smart-buy-quote-create-page__icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
}
.smart-buy-quote-create-page__icon i {
  font-size: 24px;
}
.smart-buy-quote-create-page__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-quote-create-page h1,
.smart-buy-quote-create-page h2,
.smart-buy-quote-create-page h3,
.smart-buy-quote-create-page strong {
  font-family: "Poppins", sans-serif;
}
.smart-buy-quote-create-page h1 {
  margin: 0;
  color: #0D2B5A;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.smart-buy-quote-create-page__heading p {
  margin: 4px 0 0;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-create-page__heading p strong {
  color: #0D2B5A;
  font-weight: 600;
}
.smart-buy-quote-create-page__view-request {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  color: #0D2B5A;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-create-page__view-request i {
  font-size: 18px;
}
.smart-buy-quote-create-page__view-request:hover {
  color: #177245;
  border-color: #177245;
}
.smart-buy-quote-create-page__alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid rgba(220, 53, 69, 0.25);
  border-radius: 10px;
  background: rgba(220, 53, 69, 0.06);
}
.smart-buy-quote-create-page__alert-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}
.smart-buy-quote-create-page__alert-icon i {
  font-size: 20px;
}
.smart-buy-quote-create-page__alert-content strong {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 15px;
  font-weight: 600;
}
.smart-buy-quote-create-page__alert-content ul {
  margin: 0;
  padding-left: 18px;
}
.smart-buy-quote-create-page__alert-content li {
  color: #dc3545;
  font-size: 14px;
  line-height: 1.7;
}
.smart-buy-quote-create-page__request-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.smart-buy-quote-create-page__info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #fff;
}
.smart-buy-quote-create-page__info-item span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-create-page__info-item strong {
  display: block;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.smart-buy-quote-create-page__info-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.smart-buy-quote-create-page__info-icon i {
  font-size: 19px;
}
.smart-buy-quote-create-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 24px;
}
.smart-buy-quote-create-page__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.smart-buy-quote-create-page__card, .smart-buy-quote-create-page__summary-card {
  border: 1px solid #eaecf0;
  border-radius: 12px;
  background: #fff;
}
.smart-buy-quote-create-page__card {
  overflow: hidden;
}
.smart-buy-quote-create-page__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-create-page__card-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.smart-buy-quote-create-page__card-title h2 {
  margin: 0;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 600;
}
.smart-buy-quote-create-page__card-title p {
  margin: 3px 0 0;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-create-page__card-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.smart-buy-quote-create-page__card-icon i {
  font-size: 20px;
}
.smart-buy-quote-create-page__product-count {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.smart-buy-quote-create-page__products {
  display: flex;
  flex-direction: column;
}
.smart-buy-quote-create-page__product {
  padding: 24px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-create-page__product:last-child {
  border-bottom: 0;
}
.smart-buy-quote-create-page__product-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.smart-buy-quote-create-page__product-details {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 16px;
}
.smart-buy-quote-create-page__product-image {
  width: 88px;
  height: 88px;
  min-width: 88px;
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #F2F4F7;
}
.smart-buy-quote-create-page__product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.smart-buy-quote-create-page__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
}
.smart-buy-quote-create-page__image-placeholder i {
  font-size: 24px;
}
.smart-buy-quote-create-page__product-content {
  min-width: 0;
}
.smart-buy-quote-create-page__product-content h3 {
  margin: 0 0 8px;
  color: #0D2B5A;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
.smart-buy-quote-create-page__product-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  color: #177245;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.smart-buy-quote-create-page__product-link i {
  font-size: 16px;
}
.smart-buy-quote-create-page__product-link:hover {
  color: #D4AF37;
}
.smart-buy-quote-create-page__product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.smart-buy-quote-create-page__product-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-create-page__product-meta > span i {
  color: #ddd;
  font-size: 16px;
}
.smart-buy-quote-create-page__product-meta > span strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-create-page__request-note {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #F2F4F7;
  line-height: 1.5;
}
.smart-buy-quote-create-page__product-pricing {
  width: 220px;
  min-width: 220px;
}
.smart-buy-quote-create-page__price-field label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-create-page__currency-input {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #fff;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-create-page__currency-input > span {
  height: 44px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eaecf0;
  color: #555555;
  background: #F2F4F7;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-quote-create-page__currency-input input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 0;
  outline: 0;
  color: #0D2B5A;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.smart-buy-quote-create-page__currency-input input::-webkit-outer-spin-button, .smart-buy-quote-create-page__currency-input input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.smart-buy-quote-create-page__currency-input input::-webkit-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__currency-input input:-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__currency-input input::-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__currency-input input:-ms-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__currency-input:focus-within {
  border-color: #177245;
}
.smart-buy-quote-create-page__currency-input.is-invalid {
  border-color: #dc3545;
}
.smart-buy-quote-create-page__field-error {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: #dc3545;
  font-size: 14px;
}
.smart-buy-quote-create-page__field-error i {
  font-size: 16px;
}
.smart-buy-quote-create-page__item-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 0 0;
  border-top: 1px dashed #eaecf0;
}
.smart-buy-quote-create-page__item-total span {
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-create-page__item-total strong {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
}
.smart-buy-quote-create-page__item-notes {
  margin-top: 20px;
}
.smart-buy-quote-create-page__item-notes label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-create-page__item-notes label i {
  color: #177245;
  font-size: 16px;
}
.smart-buy-quote-create-page__item-notes textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  outline: 0;
  resize: vertical;
  color: #0D2B5A;
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-create-page__item-notes textarea::-webkit-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__item-notes textarea:-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__item-notes textarea::-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__item-notes textarea:-ms-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__item-notes textarea:focus {
  border-color: #177245;
}
.smart-buy-quote-create-page__cost-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 24px;
}
.smart-buy-quote-create-page__form-group label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-create-page__date-input {
  position: relative;
}
.smart-buy-quote-create-page__date-input input {
  width: 100%;
  height: 46px;
  padding: 0 42px 0 14px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  outline: 0;
  color: #0D2B5A;
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-create-page__date-input input:focus {
  border-color: #177245;
}
.smart-buy-quote-create-page__date-input i {
  position: absolute;
  top: 50%;
  right: 14px;
  color: #ddd;
  font-size: 18px;
  pointer-events: none;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.smart-buy-quote-create-page__notes-group {
  padding: 0 24px 24px;
}
.smart-buy-quote-create-page__notes-group label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-create-page__notes-group textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  outline: 0;
  resize: vertical;
  color: #0D2B5A;
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-create-page__notes-group textarea::-webkit-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__notes-group textarea:-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__notes-group textarea::-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__notes-group textarea:-ms-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-create-page__notes-group textarea:focus {
  border-color: #177245;
}
.smart-buy-quote-create-page__sidebar {
  position: sticky;
  top: 20px;
}
.smart-buy-quote-create-page__summary-card {
  overflow: hidden;
}
.smart-buy-quote-create-page__summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-create-page__summary-header > div:first-child > span {
  display: block;
  margin-bottom: 2px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-create-page__summary-header > div:first-child h2 {
  margin: 0;
  color: #0D2B5A;
  font-size: 20px;
  font-weight: 600;
}
.smart-buy-quote-create-page__summary-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.smart-buy-quote-create-page__summary-icon i {
  font-size: 21px;
}
.smart-buy-quote-create-page__summary-body {
  padding: 18px 20px;
}
.smart-buy-quote-create-page__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 0;
}
.smart-buy-quote-create-page__summary-row span {
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-create-page__summary-row strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.smart-buy-quote-create-page__summary-row--discount strong {
  color: #dc3545;
}
.smart-buy-quote-create-page__summary-total {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-top: 1px solid #eaecf0;
  background: rgba(23, 114, 69, 0.04);
}
.smart-buy-quote-create-page__summary-total span {
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-create-page__summary-total strong {
  color: #177245;
  font-size: 22px;
  font-weight: 700;
}
.smart-buy-quote-create-page__actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #eaecf0;
}
.smart-buy-quote-create-page__cancel-btn, .smart-buy-quote-create-page__submit-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-create-page__cancel-btn i, .smart-buy-quote-create-page__submit-btn i {
  font-size: 18px;
}
.smart-buy-quote-create-page__cancel-btn {
  border: 1px solid #eaecf0;
  color: #555555;
  background: #fff;
}
.smart-buy-quote-create-page__cancel-btn:hover {
  border-color: #dc3545;
  color: #dc3545;
}
.smart-buy-quote-create-page__submit-btn {
  border: 1px solid #177245;
  color: #fff;
  background: #177245;
}
.smart-buy-quote-create-page__submit-btn:hover {
  border-color: #D4AF37;
  background: #D4AF37;
}
.smart-buy-quote-create-page__empty-state {
  padding: 50px 24px;
  text-align: center;
}
.smart-buy-quote-create-page__empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 16px;
}
.smart-buy-quote-create-page__empty-state p {
  margin: 0;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-create-page__empty-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F2F4F7;
  color: #ddd;
}
.smart-buy-quote-create-page__empty-icon i {
  font-size: 24px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .smart-buy-quote-create-page__request-info {
    grid-template-columns: repeat(2, 1fr);
  }
  .smart-buy-quote-create-page__layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .smart-buy-quote-create-page__product-pricing {
    width: 190px;
    min-width: 190px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-quote-create-page__layout {
    grid-template-columns: 1fr;
  }
  .smart-buy-quote-create-page__sidebar {
    position: static;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-quote-create-page__product-top {
    flex-direction: column;
  }
  .smart-buy-quote-create-page__product-pricing {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  .smart-buy-quote-create-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-quote-create-page__view-request {
    width: 100%;
  }
  .smart-buy-quote-create-page__request-info {
    grid-template-columns: 1fr;
  }
  .smart-buy-quote-create-page__card-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }
  .smart-buy-quote-create-page__product {
    padding: 16px;
  }
  .smart-buy-quote-create-page__product-details {
    gap: 12px;
  }
  .smart-buy-quote-create-page__product-image {
    width: 70px;
    height: 70px;
    min-width: 70px;
  }
  .smart-buy-quote-create-page__cost-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .smart-buy-quote-create-page__notes-group {
    padding: 0 16px 16px;
  }
  .smart-buy-quote-create-page__summary-header, .smart-buy-quote-create-page__summary-body, .smart-buy-quote-create-page__summary-total, .smart-buy-quote-create-page__actions {
    padding-left: 16px;
    padding-right: 16px;
  }
  .smart-buy-quote-create-page__actions {
    grid-template-columns: 1fr;
  }
  .smart-buy-quote-create-page__heading {
    align-items: flex-start;
  }
  .smart-buy-quote-create-page__icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }
}

.smart-buy-quote-show-page {
  font-family: "Poppins", sans-serif;
  padding: 20px;
  /*
  |--------------------------------------------------------------------------
  | Page Header
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-page-header {
  margin-bottom: 20px;
}
.smart-buy-quote-show-page .quote-page-header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
}
.smart-buy-quote-show-page .quote-page-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.smart-buy-quote-show-page .quote-page-header__icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
}
.smart-buy-quote-show-page .quote-page-header__icon i {
  font-size: 22px;
}
.smart-buy-quote-show-page .quote-page-header__title h1 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #0D2B5A;
}
.smart-buy-quote-show-page .quote-page-header__title p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #555555;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.smart-buy-quote-show-page .quote-page-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.smart-buy-quote-show-page .quote-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #555555;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-show-page .quote-back-link i {
  font-size: 18px;
}
.smart-buy-quote-show-page .quote-back-link:hover {
  color: #177245;
}
.smart-buy-quote-show-page .quote-edit-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 8px;
  background: #177245;
  color: #F2F4F7;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-show-page .quote-edit-btn i {
  font-size: 18px;
}
.smart-buy-quote-show-page .quote-edit-btn:hover {
  background: #D4AF37;
  color: #F2F4F7;
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Overview
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  margin-bottom: 20px;
}
.smart-buy-quote-show-page .quote-overview-card {
  padding: 20px;
  background: #F2F4F7;
  border: 1px solid #eaecf0;
  border-radius: 14px;
}
.smart-buy-quote-show-page .quote-overview-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-show-page .quote-overview-card__label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-overview-card h2 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0D2B5A;
}
.smart-buy-quote-show-page .quote-overview-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 16px;
}
.smart-buy-quote-show-page .quote-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.smart-buy-quote-show-page .quote-meta-item span {
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-meta-item strong {
  font-size: 14px;
  font-weight: 500;
  color: #0D2B5A;
}
.smart-buy-quote-show-page .quote-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-show-page .quote-status-badge i {
  font-size: 16px;
}
.smart-buy-quote-show-page .quote-status-badge.status-accepted {
  color: #198754;
  background: rgba(25, 135, 84, 0.1);
}
.smart-buy-quote-show-page .quote-status-badge.status-rejected {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}
.smart-buy-quote-show-page .quote-status-badge.status-sent {
  color: #0dcaf0;
  background: rgba(13, 202, 240, 0.1);
}
.smart-buy-quote-show-page .quote-status-badge.status-pending {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
}
.smart-buy-quote-show-page .quote-status-badge.status-expired {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}
.smart-buy-quote-show-page .quote-status-badge.status-cancelled {
  color: #ddd;
  background: rgba(221, 221, 221, 0.12);
}
.smart-buy-quote-show-page .quote-total-card {
  padding: 20px;
  border-radius: 14px;
  background: #101a23;
  color: #F2F4F7;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.smart-buy-quote-show-page .quote-total-card__label {
  font-size: 14px;
  color: rgba(242, 244, 247, 0.7);
}
.smart-buy-quote-show-page .quote-total-card__amount {
  margin-top: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
}
.smart-buy-quote-show-page .quote-total-card__amount small {
  margin-left: 5px;
  font-size: 14px;
  color: rgba(242, 244, 247, 0.7);
}
.smart-buy-quote-show-page .quote-total-card__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(242, 244, 247, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(242, 244, 247, 0.7);
}
.smart-buy-quote-show-page .quote-total-card__footer i {
  font-size: 20px;
  color: rgba(242, 244, 247, 0.8);
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Main Grid
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 20px;
  align-items: start;
}
.smart-buy-quote-show-page .quote-main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.smart-buy-quote-show-page .quote-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Section Card
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-section-card {
  background: #F2F4F7;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  overflow: hidden;
}
.smart-buy-quote-show-page .quote-section-card__header {
  padding: 18px 20px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-show-page .quote-section-card__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-section-card h2 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0D2B5A;
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Products
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-products-list {
  display: flex;
  flex-direction: column;
}
.smart-buy-quote-show-page .quote-product-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 150px;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-show-page .quote-product-item:last-child {
  border-bottom: none;
}
.smart-buy-quote-show-page .quote-product-item__image {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: rgba(221, 221, 221, 0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555555;
}
.smart-buy-quote-show-page .quote-product-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.smart-buy-quote-show-page .quote-product-item__image i {
  font-size: 22px;
}
.smart-buy-quote-show-page .quote-product-item__content {
  min-width: 0;
}
.smart-buy-quote-show-page .quote-product-item h3 {
  margin: 0 0 7px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0D2B5A;
}
.smart-buy-quote-show-page .quote-product-item__attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 7px;
}
.smart-buy-quote-show-page .quote-product-item__attributes span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-product-item__attributes span i {
  font-size: 15px;
}
.smart-buy-quote-show-page .quote-product-item__pricing {
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-product-item__pricing span {
  margin: 0 4px;
}
.smart-buy-quote-show-page .quote-product-item__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-product-item__note i {
  margin-top: 2px;
  font-size: 15px;
}
.smart-buy-quote-show-page .quote-product-item__total {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.smart-buy-quote-show-page .quote-product-item__total span {
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-product-item__total strong {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0D2B5A;
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Notes
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-notes-content {
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.smart-buy-quote-show-page .quote-notes-content__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.smart-buy-quote-show-page .quote-notes-content__icon i {
  font-size: 18px;
}
.smart-buy-quote-show-page .quote-notes-content p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #555555;
}
.smart-buy-quote-show-page .quote-notes-content__empty {
  color: #ddd;
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Sidebar
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-sidebar-card {
  background: #F2F4F7;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  overflow: hidden;
}
.smart-buy-quote-show-page .quote-sidebar-card__header {
  padding: 18px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-show-page .quote-sidebar-card__header span {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-sidebar-card__header h2 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0D2B5A;
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Customer
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-customer {
  padding: 18px;
}
.smart-buy-quote-show-page .quote-customer__profile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.smart-buy-quote-show-page .quote-customer__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
}
.smart-buy-quote-show-page .quote-customer h3 {
  margin: 0 0 3px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0D2B5A;
}
.smart-buy-quote-show-page .quote-customer p {
  margin: 0;
  font-size: 14px;
  color: #555555;
  word-break: break-word;
}
.smart-buy-quote-show-page .quote-customer__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
.smart-buy-quote-show-page .quote-customer__info div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-customer__info div i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 17px;
  color: #177245;
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Quote Summary
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-summary {
  padding: 8px 18px 18px;
}
.smart-buy-quote-show-page .quote-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-show-page .quote-summary__row span {
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-summary__row strong {
  font-size: 14px;
  font-weight: 500;
  color: #0D2B5A;
  text-align: right;
}
.smart-buy-quote-show-page .quote-summary__discount strong {
  color: #198754;
}
.smart-buy-quote-show-page .quote-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 16px;
}
.smart-buy-quote-show-page .quote-summary__total span {
  font-size: 14px;
  font-weight: 600;
  color: #0D2B5A;
}
.smart-buy-quote-show-page .quote-summary__total strong {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0D2B5A;
  text-align: right;
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Smart Buy Request
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-request-info {
  padding: 18px;
}
.smart-buy-quote-show-page .quote-request-info__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-show-page .quote-request-info__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.smart-buy-quote-show-page .quote-request-info__item span {
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page .quote-request-info__item strong {
  font-size: 14px;
  font-weight: 600;
  color: #0D2B5A;
}
.smart-buy-quote-show-page .quote-request-info__footer {
  border-top: 1px solid #eaecf0;
}
.smart-buy-quote-show-page .quote-request-info__footer a {
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: #177245;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-show-page .quote-request-info__footer a i {
  font-size: 18px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-show-page .quote-request-info__footer a:hover {
  background: rgba(23, 114, 69, 0.04);
}
.smart-buy-quote-show-page .quote-request-info__footer a:hover i {
  -webkit-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Empty State
  |--------------------------------------------------------------------------
  */
}
.smart-buy-quote-show-page .quote-empty-state {
  padding: 40px 20px;
  text-align: center;
}
.smart-buy-quote-show-page .quote-empty-state__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(221, 221, 221, 0.08);
  color: #ddd;
}
.smart-buy-quote-show-page .quote-empty-state__icon i {
  font-size: 24px;
}
.smart-buy-quote-show-page .quote-empty-state h3 {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #0D2B5A;
}
.smart-buy-quote-show-page .quote-empty-state p {
  margin: 0;
  font-size: 14px;
  color: #555555;
}
.smart-buy-quote-show-page {
  /*
  |--------------------------------------------------------------------------
  | Responsive
  |--------------------------------------------------------------------------
  */
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .smart-buy-quote-show-page .quote-main-grid {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-quote-show-page .quote-overview-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-quote-show-page .quote-total-card {
    min-height: auto;
  }
  .smart-buy-quote-show-page .quote-main-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-quote-show-page .quote-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-quote-show-page {
    padding: 16px;
  }
  .smart-buy-quote-show-page .quote-page-header__content {
    flex-direction: column;
    align-items: flex-start;
  }
  .smart-buy-quote-show-page .quote-page-header__actions {
    width: 100%;
  }
  .smart-buy-quote-show-page .quote-overview-card__meta {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .smart-buy-quote-show-page .quote-sidebar {
    grid-template-columns: 1fr;
  }
  .smart-buy-quote-show-page .quote-product-item {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
  }
  .smart-buy-quote-show-page .quote-product-item__image {
    width: 56px;
    height: 56px;
  }
  .smart-buy-quote-show-page .quote-product-item__total {
    grid-column: 2/-1;
    text-align: left;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
}
@media (max-width: 767px) {
  .smart-buy-quote-show-page {
    padding: 14px;
  }
  .smart-buy-quote-show-page .quote-page-header {
    margin-bottom: 16px;
  }
  .smart-buy-quote-show-page .quote-page-header__left {
    align-items: flex-start;
  }
  .smart-buy-quote-show-page .quote-page-header__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }
  .smart-buy-quote-show-page .quote-page-header__title h1 {
    font-size: 20px;
  }
  .smart-buy-quote-show-page .quote-page-header__title p {
    line-height: 1.6;
  }
  .smart-buy-quote-show-page .quote-edit-btn {
    width: 100%;
  }
  .smart-buy-quote-show-page .quote-overview-card {
    padding: 16px;
  }
  .smart-buy-quote-show-page .quote-overview-card__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .smart-buy-quote-show-page .quote-total-card {
    padding: 18px;
  }
  .smart-buy-quote-show-page .quote-section-card__header {
    padding: 16px;
  }
  .smart-buy-quote-show-page .quote-product-item {
    padding: 16px;
    gap: 12px;
  }
  .smart-buy-quote-show-page .quote-product-item h3 {
    font-size: 14px;
  }
  .smart-buy-quote-show-page .quote-product-item__attributes {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .smart-buy-quote-show-page .quote-product-item__total span,
  .smart-buy-quote-show-page .quote-product-item__total strong {
    font-size: 14px;
  }
  .smart-buy-quote-show-page .quote-notes-content {
    padding: 16px;
  }
  .smart-buy-quote-show-page .quote-sidebar-card__header {
    padding: 16px;
  }
  .smart-buy-quote-show-page .quote-customer {
    padding: 16px;
  }
  .smart-buy-quote-show-page .quote-summary {
    padding: 8px 16px 16px;
  }
  .smart-buy-quote-show-page .quote-request-info {
    padding: 16px;
  }
}

.smart-buy-quote-edit-page {
  font-family: "Poppins", sans-serif;
  width: 100%;
}
.smart-buy-quote-edit-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.smart-buy-quote-edit-page__heading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.smart-buy-quote-edit-page__heading h1 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.smart-buy-quote-edit-page__heading p {
  margin: 4px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.smart-buy-quote-edit-page__heading p strong {
  color: #0D2B5A;
  font-weight: 600;
}
.smart-buy-quote-edit-page__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #177245;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-edit-page__icon, .smart-buy-quote-edit-page__info-icon, .smart-buy-quote-edit-page__card-icon, .smart-buy-quote-edit-page__summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  border-radius: 10px;
}
.smart-buy-quote-edit-page__icon {
  width: 50px;
  height: 50px;
}
.smart-buy-quote-edit-page__icon i {
  font-size: 22px;
}
.smart-buy-quote-edit-page__view-request, .smart-buy-quote-edit-page__cancel-btn, .smart-buy-quote-edit-page__submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-edit-page__view-request i, .smart-buy-quote-edit-page__cancel-btn i, .smart-buy-quote-edit-page__submit-btn i {
  font-size: 17px;
}
.smart-buy-quote-edit-page__view-request {
  background: #fff;
  border: 1px solid #eaecf0;
  color: #0D2B5A;
}
.smart-buy-quote-edit-page__view-request:hover {
  border-color: #177245;
  color: #177245;
}
.smart-buy-quote-edit-page__alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid rgba(220, 53, 69, 0.25);
  border-radius: 10px;
  background: rgba(220, 53, 69, 0.06);
}
.smart-buy-quote-edit-page__alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}
.smart-buy-quote-edit-page__alert-icon i {
  font-size: 18px;
}
.smart-buy-quote-edit-page__alert-content strong {
  display: block;
  margin-bottom: 8px;
  color: #dc3545;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-quote-edit-page__alert-content ul {
  margin: 0;
  padding-left: 20px;
}
.smart-buy-quote-edit-page__alert-content ul li {
  margin-bottom: 4px;
  color: #dc3545;
  font-size: 14px;
  line-height: 1.5;
}
.smart-buy-quote-edit-page__alert-content ul li:last-child {
  margin-bottom: 0;
}
.smart-buy-quote-edit-page__request-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.smart-buy-quote-edit-page__info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
}
.smart-buy-quote-edit-page__info-item span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-edit-page__info-item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}
.smart-buy-quote-edit-page__info-icon {
  width: 36px;
  height: 36px;
}
.smart-buy-quote-edit-page__info-icon i {
  font-size: 17px;
}
.smart-buy-quote-edit-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.smart-buy-quote-edit-page__main {
  min-width: 0;
}
.smart-buy-quote-edit-page__sidebar {
  position: sticky;
  top: 20px;
}
.smart-buy-quote-edit-page__card, .smart-buy-quote-edit-page__summary-card {
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
}
.smart-buy-quote-edit-page__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-edit-page__card-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.smart-buy-quote-edit-page__card-title h2 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.smart-buy-quote-edit-page__card-title p {
  margin: 3px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.smart-buy-quote-edit-page__card-icon {
  width: 40px;
  height: 40px;
}
.smart-buy-quote-edit-page__card-icon i {
  font-size: 19px;
}
.smart-buy-quote-edit-page__product-count {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.smart-buy-quote-edit-page__products {
  padding: 14px;
}
.smart-buy-quote-edit-page__product {
  padding: 14px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
}
.smart-buy-quote-edit-page__product:not(:last-child) {
  margin-bottom: 14px;
}
.smart-buy-quote-edit-page__product-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.smart-buy-quote-edit-page__product-details {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 14px;
}
.smart-buy-quote-edit-page__product-image {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  overflow: hidden;
  border-radius: 9px;
  background: #F2F4F7;
}
.smart-buy-quote-edit-page__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.smart-buy-quote-edit-page__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #ddd;
}
.smart-buy-quote-edit-page__image-placeholder i {
  font-size: 22px;
}
.smart-buy-quote-edit-page__product-content {
  min-width: 0;
}
.smart-buy-quote-edit-page__product-content h3 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.smart-buy-quote-edit-page__product-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  color: #177245;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-edit-page__product-link i {
  font-size: 15px;
}
.smart-buy-quote-edit-page__product-link:hover {
  color: #0D2B5A;
}
.smart-buy-quote-edit-page__product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.smart-buy-quote-edit-page__product-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 6px;
  background: #F2F4F7;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.smart-buy-quote-edit-page__product-meta > span i {
  color: #177245;
  font-size: 14px;
}
.smart-buy-quote-edit-page__product-meta > span strong {
  color: #0D2B5A;
  font-weight: 600;
}
.smart-buy-quote-edit-page__request-note {
  width: 100%;
}
.smart-buy-quote-edit-page__product-pricing {
  width: 190px;
  flex: 0 0 190px;
}
.smart-buy-quote-edit-page__price-field {
  margin-bottom: 10px;
}
.smart-buy-quote-edit-page__price-field label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-edit-page__currency-input {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-edit-page__currency-input > span {
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-edit-page__currency-input input {
  width: 100%;
  height: 44px;
  padding: 0 12px 0 7px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.smart-buy-quote-edit-page__currency-input input::-webkit-outer-spin-button, .smart-buy-quote-edit-page__currency-input input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.smart-buy-quote-edit-page__currency-input:focus-within {
  border-color: #177245;
}
.smart-buy-quote-edit-page__currency-input.is-invalid {
  border-color: #dc3545;
}
.smart-buy-quote-edit-page__field-error {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: #dc3545;
  font-size: 14px;
}
.smart-buy-quote-edit-page__field-error i {
  font-size: 15px;
}
.smart-buy-quote-edit-page__item-total {
  padding: 12px;
  border-radius: 8px;
  background: #F2F4F7;
}
.smart-buy-quote-edit-page__item-total span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-edit-page__item-total strong {
  display: block;
  color: #177245;
  font-size: 16px;
  font-weight: 600;
}
.smart-buy-quote-edit-page__item-notes {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eaecf0;
}
.smart-buy-quote-edit-page__item-notes label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-edit-page__item-notes label i {
  color: #177245;
  font-size: 15px;
}
.smart-buy-quote-edit-page__item-notes textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px 14px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  outline: none;
  resize: vertical;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-edit-page__item-notes textarea::-webkit-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-edit-page__item-notes textarea:-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-edit-page__item-notes textarea::-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-edit-page__item-notes textarea:-ms-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-edit-page__item-notes textarea:focus {
  border-color: #177245;
}
.smart-buy-quote-edit-page__cost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 20px;
}
.smart-buy-quote-edit-page__form-group label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-edit-page__date-input {
  position: relative;
}
.smart-buy-quote-edit-page__date-input input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 12px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-edit-page__date-input input:focus {
  border-color: #177245;
}
.smart-buy-quote-edit-page__date-input i {
  position: absolute;
  top: 50%;
  right: 13px;
  color: #555555;
  font-size: 17px;
  pointer-events: none;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.smart-buy-quote-edit-page__notes-group {
  padding: 0 20px 20px;
}
.smart-buy-quote-edit-page__notes-group label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-edit-page__notes-group textarea {
  width: 100%;
  min-height: 130px;
  padding: 14px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  outline: none;
  resize: vertical;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-quote-edit-page__notes-group textarea::-webkit-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-edit-page__notes-group textarea:-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-edit-page__notes-group textarea::-moz-placeholder {
  color: #ddd;
}
.smart-buy-quote-edit-page__notes-group textarea:-ms-input-placeholder {
  color: #ddd;
}
.smart-buy-quote-edit-page__notes-group textarea:focus {
  border-color: #177245;
}
.smart-buy-quote-edit-page__empty-state {
  padding: 40px 20px;
  text-align: center;
}
.smart-buy-quote-edit-page__empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 16px;
}
.smart-buy-quote-edit-page__empty-state p {
  margin: 0;
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-edit-page__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #F2F4F7;
  color: #ddd;
}
.smart-buy-quote-edit-page__empty-icon i {
  font-size: 22px;
}
.smart-buy-quote-edit-page__summary-card {
  margin-bottom: 0;
}
.smart-buy-quote-edit-page__summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-quote-edit-page__summary-header > div:first-child span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 500;
}
.smart-buy-quote-edit-page__summary-header > div:first-child h2 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.smart-buy-quote-edit-page__summary-icon {
  width: 38px;
  height: 38px;
}
.smart-buy-quote-edit-page__summary-icon i {
  font-size: 18px;
}
.smart-buy-quote-edit-page__summary-body {
  padding: 14px 18px;
}
.smart-buy-quote-edit-page__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 0;
}
.smart-buy-quote-edit-page__summary-row span {
  color: #555555;
  font-size: 14px;
}
.smart-buy-quote-edit-page__summary-row strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.smart-buy-quote-edit-page__summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border-top: 1px solid #eaecf0;
}
.smart-buy-quote-edit-page__summary-total span {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-quote-edit-page__summary-total strong {
  color: #177245;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.smart-buy-quote-edit-page__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 18px 18px;
}
.smart-buy-quote-edit-page__cancel-btn {
  width: 100%;
  background: #fff;
  border: 1px solid #eaecf0;
  color: #0D2B5A;
}
.smart-buy-quote-edit-page__cancel-btn:hover {
  border-color: #dc3545;
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}
.smart-buy-quote-edit-page__submit-btn {
  width: 100%;
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.smart-buy-quote-edit-page__submit-btn:hover {
  background: #0D2B5A;
  border-color: #0D2B5A;
}
.smart-buy-quote-edit-page {
  /*
  |--------------------------------------------------------------------------
  | Responsive
  |--------------------------------------------------------------------------
  */
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .smart-buy-quote-edit-page__layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  .smart-buy-quote-edit-page__product-pricing {
    width: 175px;
    flex-basis: 175px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-quote-edit-page__request-info {
    grid-template-columns: repeat(2, 1fr);
  }
  .smart-buy-quote-edit-page__layout {
    grid-template-columns: 1fr;
  }
  .smart-buy-quote-edit-page__sidebar {
    position: static;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-quote-edit-page__product-top {
    flex-direction: column;
  }
  .smart-buy-quote-edit-page__product-pricing {
    width: 100%;
    flex-basis: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .smart-buy-quote-edit-page__price-field {
    margin-bottom: 0;
  }
  .smart-buy-quote-edit-page__cost-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .smart-buy-quote-edit-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-quote-edit-page__view-request {
    width: 100%;
  }
  .smart-buy-quote-edit-page__heading {
    align-items: flex-start;
  }
  .smart-buy-quote-edit-page__icon {
    width: 44px;
    height: 44px;
  }
  .smart-buy-quote-edit-page__request-info {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .smart-buy-quote-edit-page__info-item {
    min-height: 70px;
  }
  .smart-buy-quote-edit-page__card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-quote-edit-page__product-count {
    align-self: flex-start;
  }
  .smart-buy-quote-edit-page__products {
    padding: 10px;
  }
  .smart-buy-quote-edit-page__product {
    padding: 12px;
  }
  .smart-buy-quote-edit-page__product-details {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-quote-edit-page__product-image {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }
  .smart-buy-quote-edit-page__product-pricing {
    grid-template-columns: 1fr;
  }
  .smart-buy-quote-edit-page__cost-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .smart-buy-quote-edit-page__notes-group {
    padding: 0 16px 16px;
  }
  .smart-buy-quote-edit-page__summary-header, .smart-buy-quote-edit-page__summary-body, .smart-buy-quote-edit-page__summary-total {
    padding-left: 16px;
    padding-right: 16px;
  }
  .smart-buy-quote-edit-page__actions {
    grid-template-columns: 1fr;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/*==================================================
| Page
==================================================*/
.smart-buy-purchase-page {
  width: 100%;
}

/*==================================================
| Header
==================================================*/
.smart-buy-purchase-header {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.smart-buy-purchase-header > div:first-child {
  min-width: 0;
}

.smart-buy-purchase-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.smart-buy-purchase-back:hover {
  color: #177245;
}

.smart-buy-purchase-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.smart-buy-purchase-heading__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-buy-purchase-heading__icon i {
  font-size: 20px;
}

.smart-buy-purchase-heading > div:last-child {
  min-width: 0;
}

.smart-buy-purchase-heading > div:last-child > span {
  display: block;
  margin-bottom: 2px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.smart-buy-purchase-heading h1 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.smart-buy-purchase-heading p {
  margin: 0;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-purchase-status {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 20px;
  background: #eaf7ef;
  color: #2d8752;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.smart-buy-purchase-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/*==================================================
| Layout
==================================================*/
.smart-buy-purchase-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 15px;
}

.smart-buy-purchase-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.smart-buy-purchase-sidebar {
  min-width: 0;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*==================================================
| Card
==================================================*/
.smart-buy-purchase-card {
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.025);
}

.smart-buy-purchase-card__header {
  min-height: 58px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.smart-buy-purchase-card__header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.smart-buy-purchase-card__header p {
  margin: 0;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-purchase-card__body {
  padding: 16px;
}

/*==================================================
| Product
==================================================*/
.smart-buy-purchase-product {
  padding: 17px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.smart-buy-purchase-product__icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-buy-purchase-product__icon i {
  font-size: 26px;
}

.smart-buy-purchase-product__content {
  min-width: 0;
}

.smart-buy-purchase-product__content > span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-purchase-product__content h3 {
  margin: 2px 0 5px;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 600;
}

.smart-buy-purchase-product__content > p {
  margin: 0 0 12px;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.smart-buy-purchase-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.smart-buy-purchase-product__meta > div {
  min-width: 110px;
  padding: 7px 9px;
  border: 1px solid rgba(16, 26, 35, 0.055);
  border-radius: 7px;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-buy-purchase-product__meta span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-purchase-product__meta strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

/*==================================================
| Grid
==================================================*/
.smart-buy-purchase-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 13px;
}

.smart-buy-purchase-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smart-buy-purchase-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*==================================================
| Fields
==================================================*/
.smart-buy-purchase-field {
  margin-bottom: 13px;
}

.smart-buy-purchase-grid .smart-buy-purchase-field {
  margin-bottom: 0;
}

.smart-buy-purchase-field:last-child {
  margin-bottom: 0;
}

.smart-buy-purchase-field label {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-purchase-field label span {
  color: #d45c5c;
}

.smart-buy-purchase-field input,
.smart-buy-purchase-field select,
.smart-buy-purchase-field textarea {
  width: 100%;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.smart-buy-purchase-field input,
.smart-buy-purchase-field select {
  height: 39px;
  padding: 0 10px;
}

.smart-buy-purchase-field textarea {
  min-height: 105px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.5;
}

.smart-buy-purchase-field input:focus,
.smart-buy-purchase-field select:focus,
.smart-buy-purchase-field textarea:focus {
  border-color: rgba(23, 114, 69, 0.35);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

/*==================================================
| Money
==================================================*/
.smart-buy-purchase-money {
  position: relative;
}

.smart-buy-purchase-money > span {
  position: absolute;
  top: 50%;
  left: 10px;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-50%);
  pointer-events: none;
}

.smart-buy-purchase-money input {
  padding-left: 26px !important;
}

/*==================================================
| Footer
==================================================*/
.smart-buy-purchase-field-footer {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.smart-buy-purchase-field-footer span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

/*==================================================
| Upload
==================================================*/
.smart-buy-purchase-upload {
  min-height: 150px;
  padding: 20px;
  border: 1px dashed rgba(16, 26, 35, 0.16);
  border-radius: 9px;
  background: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.smart-buy-purchase-upload:hover {
  border-color: rgba(23, 114, 69, 0.3);
  background: rgba(23, 114, 69, 0.025);
}

.smart-buy-purchase-upload input {
  display: none;
}

.smart-buy-purchase-upload__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 3px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-buy-purchase-upload__icon i {
  font-size: 20px;
}

.smart-buy-purchase-upload strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-purchase-upload > span:last-child {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

/*==================================================
| Files
==================================================*/
.smart-buy-purchase-file-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.smart-buy-purchase-file {
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid rgba(16, 26, 35, 0.06);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.smart-buy-purchase-file__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f5f6f7;
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.smart-buy-purchase-file__name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-buy-purchase-file__size {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  white-space: nowrap;
}

/*==================================================
| Status Note
==================================================*/
.smart-buy-purchase-status-note {
  margin-top: 10px;
  padding: 9px;
  border-radius: 7px;
  background: #f7f9fa;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.smart-buy-purchase-status-note i {
  color: #177245;
  font-size: 15px;
}

.smart-buy-purchase-status-note p {
  margin: 0;
  color: rgba(85, 85, 85, 0.8);
  font-size: 14px;
  line-height: 1.45;
}

/*==================================================
| Payment
==================================================*/
.smart-buy-purchase-payment {
  padding: 13px 15px;
}

.smart-buy-purchase-payment__status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.smart-buy-purchase-payment__status > span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eaf7ef;
  color: #2d8752;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-buy-purchase-payment__status > span i {
  font-size: 17px;
}

.smart-buy-purchase-payment__status > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-buy-purchase-payment__status strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-purchase-payment__status small {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-purchase-payment__total {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.smart-buy-purchase-payment__total span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-purchase-payment__total strong {
  color: #177245;
  font-size: 18px;
}

/*==================================================
| Summary
==================================================*/
.smart-buy-purchase-summary {
  padding: 5px 15px 8px;
}

.smart-buy-purchase-summary > div {
  min-height: 42px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.smart-buy-purchase-summary > div:last-child {
  border-bottom: 0;
}

.smart-buy-purchase-summary span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-purchase-summary strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-purchase-summary > div:last-child strong {
  color: #177245;
  font-size: 18px;
}

/*==================================================
| Customer
==================================================*/
.smart-buy-purchase-customer {
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.smart-buy-purchase-customer__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.smart-buy-purchase-customer > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-buy-purchase-customer strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-purchase-customer span {
  overflow: hidden;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*==================================================
| Destination
==================================================*/
.smart-buy-purchase-destination {
  padding: 10px 15px 13px;
  border-top: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.smart-buy-purchase-destination > i {
  color: #177245;
  font-size: 16px;
}

.smart-buy-purchase-destination > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-buy-purchase-destination span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-purchase-destination strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

/*==================================================
| Next
==================================================*/
.smart-buy-purchase-next {
  padding: 12px;
  border: 1px solid rgba(23, 114, 69, 0.15);
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.035);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.smart-buy-purchase-next__icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.smart-buy-purchase-next strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
}

.smart-buy-purchase-next p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}

/*==================================================
| Footer
==================================================*/
.smart-buy-purchase-footer {
  margin-top: 15px;
  padding: 12px 15px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.025);
}

.smart-buy-purchase-footer > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-buy-purchase-footer > div:first-child span {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-purchase-footer > div:first-child small {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-purchase-footer__actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.smart-buy-purchase-cancel,
.smart-buy-purchase-confirm {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.smart-buy-purchase-cancel {
  color: #555555;
}
.smart-buy-purchase-cancel:hover {
  background: #f7f8f9;
  color: #0D2B5A;
}

.smart-buy-purchase-confirm {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
  transition: 0.2s ease;
}
.smart-buy-purchase-confirm:hover {
  border-color: rgba(23, 114, 69, 0.07);
  background: rgba(23, 114, 69, 0.07);
}

.smart-buy-purchase-confirm:disabled {
  opacity: 0.65;
  cursor: wait;
}

/*==================================================
| Loading
==================================================*/
.smart-buy-purchase-spin {
  animation: smartBuyPurchaseSpin 0.8s linear infinite;
}

@keyframes smartBuyPurchaseSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*==================================================
| Responsive - LG
==================================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-purchase-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}
/*==================================================
| Responsive - MD
==================================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-purchase-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-purchase-layout {
    grid-template-columns: 1fr;
  }
  .smart-buy-purchase-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smart-buy-purchase-next {
    grid-column: 1/-1;
  }
}
/*==================================================
| Responsive - XS
==================================================*/
@media (max-width: 767px) {
  .smart-buy-purchase-heading h1 {
    font-size: 20px;
  }
  .smart-buy-purchase-heading__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .smart-buy-purchase-grid--two,
  .smart-buy-purchase-grid--three {
    grid-template-columns: 1fr;
  }
  .smart-buy-purchase-product {
    padding: 14px;
    flex-direction: column;
  }
  .smart-buy-purchase-product__icon {
    width: 55px;
    height: 55px;
    flex-basis: 55px;
  }
  .smart-buy-purchase-card__body {
    padding: 13px;
  }
  .smart-buy-purchase-sidebar {
    grid-template-columns: 1fr;
  }
  .smart-buy-purchase-next {
    grid-column: auto;
  }
  .smart-buy-purchase-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .smart-buy-purchase-footer__actions {
    width: 100%;
  }
  .smart-buy-purchase-cancel,
  .smart-buy-purchase-confirm {
    flex: 1;
  }
}
/*==================================================
| Page
==================================================*/
.smart-buy-shipment-page {
  width: 100%;
}

/*==================================================
| Header
==================================================*/
.smart-buy-shipment-header {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.smart-buy-shipment-header > div:first-child {
  min-width: 0;
}

.smart-buy-shipment-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.smart-buy-shipment-back:hover {
  color: #177245;
}

.smart-buy-shipment-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.smart-buy-shipment-heading__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-buy-shipment-heading__icon i {
  font-size: 20px;
}

.smart-buy-shipment-heading > div:last-child {
  min-width: 0;
}

.smart-buy-shipment-heading > div:last-child > span {
  display: block;
  margin-bottom: 2px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.smart-buy-shipment-heading h1 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.smart-buy-shipment-heading p {
  margin: 0;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-shipment-status {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 20px;
  background: #eaf7ef;
  color: #2d8752;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.smart-buy-shipment-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/*==================================================
| Layout
==================================================*/
.smart-buy-shipment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 15px;
}

.smart-buy-shipment-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.smart-buy-shipment-sidebar {
  min-width: 0;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*==================================================
| Card
==================================================*/
.smart-buy-shipment-card {
  overflow: hidden;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.025);
}

.smart-buy-shipment-card__header {
  min-height: 58px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(16, 26, 35, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.smart-buy-shipment-card__header h2 {
  margin: 0 0 3px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.smart-buy-shipment-card__header p {
  margin: 0;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  line-height: 1.4;
}

.smart-buy-shipment-card__body {
  padding: 16px;
}

/*==================================================
| Grid
==================================================*/
.smart-buy-shipment-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 13px;
}

.smart-buy-shipment-grid:last-child {
  margin-bottom: 0;
}

.smart-buy-shipment-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smart-buy-shipment-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*==================================================
| Field
==================================================*/
.smart-buy-shipment-field {
  margin-bottom: 13px;
}

.smart-buy-shipment-grid .smart-buy-shipment-field {
  margin-bottom: 0;
}

.smart-buy-shipment-field:last-child {
  margin-bottom: 0;
}

.smart-buy-shipment-field label {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.smart-buy-shipment-field label span {
  color: #d45c5c;
}

.smart-buy-shipment-field input,
.smart-buy-shipment-field select,
.smart-buy-shipment-field textarea {
  width: 100%;
  border: 1px solid rgba(16, 26, 35, 0.1);
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.smart-buy-shipment-field input,
.smart-buy-shipment-field select {
  height: 39px;
  padding: 0 10px;
}

.smart-buy-shipment-field textarea {
  min-height: 105px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.5;
}

.smart-buy-shipment-field input::placeholder,
.smart-buy-shipment-field textarea::placeholder {
  color: rgba(85, 85, 85, 0.2);
}

.smart-buy-shipment-field input:focus,
.smart-buy-shipment-field select:focus,
.smart-buy-shipment-field textarea:focus {
  border-color: rgba(23, 114, 69, 0.35);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

/*==================================================
| Unit Input
==================================================*/
.smart-buy-shipment-unit-input {
  position: relative;
}

.smart-buy-shipment-unit-input input {
  padding-right: 42px;
}

.smart-buy-shipment-unit-input > span {
  position: absolute;
  top: 50%;
  right: 11px;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-50%);
  pointer-events: none;
}

/*==================================================
| Recipient
==================================================*/
.smart-buy-shipment-recipient {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(16, 26, 35, 0.055);
  border-radius: 8px;
  background: #fafbfc;
  display: flex;
  align-items: center;
  gap: 9px;
}

.smart-buy-shipment-recipient__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-buy-shipment-recipient__icon i {
  font-size: 16px;
}

.smart-buy-shipment-recipient > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-buy-shipment-recipient span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-shipment-recipient strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-shipment-recipient small {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

/*==================================================
| Footer Counter
==================================================*/
.smart-buy-shipment-field-footer {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.smart-buy-shipment-field-footer span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  line-height: 1.35;
}

.smart-buy-shipment-field-footer span:last-child {
  color: rgba(85, 85, 85, 0.8);
  white-space: nowrap;
}

/*==================================================
| Checkbox
==================================================*/
.smart-buy-shipment-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #555555;
  font-size: 14px;
  cursor: pointer;
}

.smart-buy-shipment-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.smart-buy-shipment-checkbox__box {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 1px solid #cfd4d7;
  border-radius: 4px;
  background: #fff;
}

.smart-buy-shipment-checkbox input:checked ~ .smart-buy-shipment-checkbox__box {
  border-color: #177245;
  background: #177245;
}

.smart-buy-shipment-checkbox input:checked ~ .smart-buy-shipment-checkbox__box::after {
  content: "";
  display: block;
  width: 7px;
  height: 4px;
  margin: 4px 0 0 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/*==================================================
| Status Note
==================================================*/
.smart-buy-shipment-status-note {
  margin-top: 10px;
  padding: 9px;
  border-radius: 7px;
  background: #f7f9fa;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.smart-buy-shipment-status-note > i {
  color: #177245;
  font-size: 15px;
}

.smart-buy-shipment-status-note p {
  margin: 0;
  color: rgba(85, 85, 85, 0.8);
  font-size: 14px;
  line-height: 1.45;
}

/*==================================================
| Summary
==================================================*/
.smart-buy-shipment-summary {
  padding: 5px 15px 8px;
}

.smart-buy-shipment-summary > div {
  min-height: 42px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.smart-buy-shipment-summary > div:last-child {
  border-bottom: 0;
}

.smart-buy-shipment-summary span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-shipment-summary strong {
  max-width: 155px;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*==================================================
| Tracking Preview
==================================================*/
.smart-buy-shipment-tracking-preview {
  padding: 14px 15px 16px;
}

.smart-buy-shipment-tracking-line {
  position: relative;
  min-height: 60px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.smart-buy-shipment-tracking-line:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 29px;
  left: 14px;
  width: 1px;
  height: 42px;
  background: #e2e5e7;
}

.smart-buy-shipment-tracking-dot {
  position: relative;
  z-index: 1;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border: 1px solid #e0e3e5;
  border-radius: 50%;
  background: #fff;
  color: #9aa0a5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-buy-shipment-tracking-dot i {
  font-size: 13px;
}

.smart-buy-shipment-tracking-dot.is-active {
  border-color: rgba(23, 114, 69, 0.18);
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}

.smart-buy-shipment-tracking-line > div:last-child {
  padding-top: 1px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-buy-shipment-tracking-line strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-shipment-tracking-line span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
  line-height: 1.35;
}

/*==================================================
| Notice
==================================================*/
.smart-buy-shipment-notice {
  padding: 12px;
  border: 1px solid #e9dfc7;
  border-radius: 9px;
  background: #fffaf0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.smart-buy-shipment-notice__icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border-radius: 7px;
  background: #fff0c9;
  color: #a67516;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.smart-buy-shipment-notice strong {
  display: block;
  margin-bottom: 3px;
  color: #765615;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-shipment-notice p {
  margin: 0;
  color: #876f42;
  font-size: 14px;
  line-height: 1.45;
}

/*==================================================
| Footer
==================================================*/
.smart-buy-shipment-footer {
  margin-top: 15px;
  padding: 12px 15px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.025);
}

.smart-buy-shipment-footer > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-buy-shipment-footer > div:first-child span {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-shipment-footer > div:first-child small {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.smart-buy-shipment-footer__actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.smart-buy-shipment-cancel,
.smart-buy-shipment-create {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.smart-buy-shipment-cancel {
  color: #555555;
}
.smart-buy-shipment-cancel:hover {
  background: #f7f8f9;
  color: #0D2B5A;
}

.smart-buy-shipment-create {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
  transition: 0.2s ease;
}
.smart-buy-shipment-create:hover {
  border-color: rgba(23, 114, 69, 0.07);
  background: rgba(23, 114, 69, 0.07);
}

.smart-buy-shipment-create:disabled {
  opacity: 0.65;
  cursor: wait;
}

/*==================================================
| Loading
==================================================*/
.smart-buy-shipment-spin {
  animation: smartBuyShipmentSpin 0.8s linear infinite;
}

@keyframes smartBuyShipmentSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*==================================================
| Responsive LG
==================================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-shipment-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}
/*==================================================
| Responsive MD
==================================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-shipment-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-shipment-layout {
    grid-template-columns: 1fr;
  }
  .smart-buy-shipment-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smart-buy-shipment-notice {
    grid-column: 1/-1;
  }
}
/*==================================================
| Responsive XS
==================================================*/
@media (max-width: 767px) {
  .smart-buy-shipment-heading h1 {
    font-size: 20px;
  }
  .smart-buy-shipment-heading__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .smart-buy-shipment-grid--two,
  .smart-buy-shipment-grid--three {
    grid-template-columns: 1fr;
  }
  .smart-buy-shipment-card__body {
    padding: 13px;
  }
  .smart-buy-shipment-sidebar {
    grid-template-columns: 1fr;
  }
  .smart-buy-shipment-notice {
    grid-column: auto;
  }
  .smart-buy-shipment-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .smart-buy-shipment-footer__actions {
    width: 100%;
  }
  .smart-buy-shipment-cancel,
  .smart-buy-shipment-create {
    flex: 1;
  }
}
.shipment-create-page {
  font-family: "Poppins", sans-serif;
  /* ============================================================
      PAGE HEADER
  ============================================================ */
}
.shipment-create-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
}
.shipment-create-page__header-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.shipment-create-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.shipment-create-page__back i {
  font-size: 14px;
}
.shipment-create-page__back:hover {
  color: #177245;
}
.shipment-create-page__title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.shipment-create-page__title h1 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
}
.shipment-create-page__title p {
  margin: 0;
  color: #555555;
  font-size: 14px;
}
.shipment-create-page__title-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #177245;
  background: rgba(23, 114, 69, 0.08);
  border-radius: 12px;
}
.shipment-create-page__title-icon i {
  font-size: 20px;
}
.shipment-create-page__request-id {
  min-width: 150px;
  padding: 14px 18px;
  text-align: right;
  background: #F2F4F7;
  border-radius: 12px;
}
.shipment-create-page__request-id span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
}
.shipment-create-page__request-id strong {
  display: block;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 600;
}
.shipment-create-page {
  /* ============================================================
      REQUEST CARD
  ============================================================ */
}
.shipment-create-page__request-card, .shipment-create-page__card, .shipment-create-page__summary-card, .shipment-create-page__action-card {
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  overflow: hidden;
}
.shipment-create-page__section-heading {
  padding: 20px 24px;
  border-bottom: 1px solid #eaecf0;
}
.shipment-create-page__section-heading h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.shipment-create-page__section-heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
}
.shipment-create-page__request-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.shipment-create-page__request-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-right: 1px solid #eaecf0;
}
.shipment-create-page__request-item:last-child {
  border-right: 0;
}
.shipment-create-page__request-item span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
}
.shipment-create-page__request-item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.shipment-create-page__request-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #177245;
  background: rgba(23, 114, 69, 0.08);
  border-radius: 10px;
}
.shipment-create-page__request-icon i {
  font-size: 16px;
}
.shipment-create-page {
  /* ============================================================
      MAIN LAYOUT
  ============================================================ */
}
.shipment-create-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
.shipment-create-page__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.shipment-create-page__sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 20px;
}
.shipment-create-page {
  /* ============================================================
      FORM CARD
  ============================================================ */
}
.shipment-create-page__card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #eaecf0;
}
.shipment-create-page__card-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shipment-create-page__card-title h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.shipment-create-page__card-title p {
  margin: 0;
  color: #555555;
  font-size: 14px;
}
.shipment-create-page__card-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #177245;
  background: rgba(23, 114, 69, 0.08);
  border-radius: 11px;
}
.shipment-create-page__card-icon i {
  font-size: 17px;
}
.shipment-create-page__card-body {
  padding: 22px 24px;
}
.shipment-create-page__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.shipment-create-page__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shipment-create-page__field--full {
  grid-column: 1/-1;
}
.shipment-create-page__field label {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}
.shipment-create-page__field input,
.shipment-create-page__field select,
.shipment-create-page__field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  outline: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.shipment-create-page__field input:focus,
.shipment-create-page__field select:focus,
.shipment-create-page__field textarea:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}
.shipment-create-page__field input::-webkit-input-placeholder,
.shipment-create-page__field select::-webkit-input-placeholder,
.shipment-create-page__field textarea::-webkit-input-placeholder {
  color: #ddd;
}
.shipment-create-page__field input:-moz-placeholder,
.shipment-create-page__field select:-moz-placeholder,
.shipment-create-page__field textarea:-moz-placeholder {
  color: #ddd;
}
.shipment-create-page__field input::-moz-placeholder,
.shipment-create-page__field select::-moz-placeholder,
.shipment-create-page__field textarea::-moz-placeholder {
  color: #ddd;
}
.shipment-create-page__field input:-ms-input-placeholder,
.shipment-create-page__field select:-ms-input-placeholder,
.shipment-create-page__field textarea:-ms-input-placeholder {
  color: #ddd;
}
.shipment-create-page__field textarea {
  min-height: 110px;
  resize: vertical;
}
.shipment-create-page__field select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.shipment-create-page__error {
  color: #dc3545;
  font-size: 14px;
}
.shipment-create-page {
  /* ============================================================
      PRODUCT SUMMARY
  ============================================================ */
}
.shipment-create-page__summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 20px;
  border-bottom: 1px solid #eaecf0;
}
.shipment-create-page__summary-header h2 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.shipment-create-page__summary-header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
}
.shipment-create-page__count {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  background: rgba(23, 114, 69, 0.08);
  border-radius: 50%;
}
.shipment-create-page__product-list {
  display: flex;
  flex-direction: column;
}
.shipment-create-page__product {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid #eaecf0;
}
.shipment-create-page__product-image {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  overflow: hidden;
  background: #F2F4F7;
  border-radius: 10px;
}
.shipment-create-page__product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.shipment-create-page__product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
}
.shipment-create-page__product-placeholder i {
  font-size: 20px;
}
.shipment-create-page__product-content {
  flex: 1;
  min-width: 0;
}
.shipment-create-page__product-content h3 {
  margin: 0 0 8px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.shipment-create-page__product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.shipment-create-page__product-meta span {
  padding: 4px 7px;
  color: #555555;
  font-size: 14px;
  background: #F2F4F7;
  border-radius: 5px;
}
.shipment-create-page__product-price, .shipment-create-page__product-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.shipment-create-page__product-price span, .shipment-create-page__product-total span {
  color: #555555;
  font-size: 14px;
}
.shipment-create-page__product-price strong, .shipment-create-page__product-total strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.shipment-create-page__product-total {
  margin-top: 7px;
}
.shipment-create-page__product-total strong {
  color: #177245;
}
.shipment-create-page {
  /* ============================================================
      COST SUMMARY
  ============================================================ */
}
.shipment-create-page__cost-summary {
  padding: 18px 20px 20px;
}
.shipment-create-page__cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 0;
}
.shipment-create-page__cost-row span {
  color: #555555;
  font-size: 14px;
}
.shipment-create-page__cost-row strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.shipment-create-page__cost-row--shipping > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shipment-create-page__cost-row--shipping > div i {
  color: #177245;
  font-size: 14px;
}
.shipment-create-page__cost-row--shipping strong {
  color: #177245;
}
.shipment-create-page__cost-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid #eaecf0;
}
.shipment-create-page__cost-total span {
  color: #0D2B5A;
  font-size: 15px;
  font-weight: 600;
}
.shipment-create-page__cost-total strong {
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.shipment-create-page {
  /* ============================================================
      ACTION CARD
  ============================================================ */
}
.shipment-create-page__action-card {
  padding: 20px;
}
.shipment-create-page__action-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.shipment-create-page__action-content h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.shipment-create-page__action-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.shipment-create-page__action-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #177245;
  background: rgba(23, 114, 69, 0.08);
  border-radius: 11px;
}
.shipment-create-page__action-icon i {
  font-size: 17px;
}
.shipment-create-page__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.shipment-create-page__cancel-btn, .shipment-create-page__submit-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.shipment-create-page__cancel-btn {
  color: #555555;
  background: #fff;
  border: 1px solid #eaecf0;
}
.shipment-create-page__cancel-btn:hover {
  color: #0D2B5A;
  border-color: #ddd;
}
.shipment-create-page__submit-btn {
  color: #fff;
  background: #177245;
  border: 1px solid #177245;
}
.shipment-create-page__submit-btn i {
  font-size: 14px;
}
.shipment-create-page__submit-btn:hover {
  background: #D4AF37;
  border-color: #D4AF37;
}
.shipment-create-page {
  /* ============================================================
      RESPONSIVE
  ============================================================ */
}
@media (min-width: 992px) and (max-width: 1199px) {
  .shipment-create-page__layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
  .shipment-create-page__sidebar {
    position: static;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .shipment-create-page__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .shipment-create-page__request-id {
    width: 100%;
    text-align: left;
  }
  .shipment-create-page__request-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shipment-create-page__request-item:nth-child(2) {
    border-right: 0;
  }
  .shipment-create-page__request-item:nth-child(-n+2) {
    border-bottom: 1px solid #eaecf0;
  }
  .shipment-create-page__layout {
    grid-template-columns: 1fr;
  }
  .shipment-create-page__sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
@media (max-width: 767px) {
  .shipment-create-page__header {
    padding: 18px;
  }
  .shipment-create-page__title {
    align-items: flex-start;
  }
  .shipment-create-page__title-icon {
    width: 44px;
    height: 44px;
  }
  .shipment-create-page__request-grid {
    grid-template-columns: 1fr;
  }
  .shipment-create-page__request-item {
    border-right: 0;
    border-bottom: 1px solid #eaecf0;
  }
  .shipment-create-page__request-item:last-child {
    border-bottom: 0;
  }
  .shipment-create-page__form-grid {
    grid-template-columns: 1fr;
  }
  .shipment-create-page__field--full {
    grid-column: auto;
  }
  .shipment-create-page__card-header, .shipment-create-page__card-body {
    padding: 18px;
  }
  .shipment-create-page__section-heading {
    padding: 18px;
  }
  .shipment-create-page__sidebar {
    display: flex;
    flex-direction: column;
  }
  .shipment-create-page__product {
    padding: 16px;
  }
  .shipment-create-page__summary-header {
    padding: 18px;
  }
  .shipment-create-page__cost-summary, .shipment-create-page__action-card {
    padding: 18px;
  }
}

.smart-buy-payments-page {
  width: 100%;
  max-width: 100%;
  padding: 24px;
  font-size: 14px;
}
.smart-buy-payments-page * {
  box-sizing: border-box;
}
.smart-buy-payments-page a {
  text-decoration: none;
}
.smart-buy-payments-page button,
.smart-buy-payments-page input,
.smart-buy-payments-page select {
  font: inherit;
}
.smart-buy-payments-page .smart-buy-payments-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 14px;
}
.smart-buy-payments-page .smart-buy-payments-breadcrumb a {
  color: #64748b;
  transition: color 0.2s ease;
}
.smart-buy-payments-page .smart-buy-payments-breadcrumb a:hover {
  color: #12355B;
}
.smart-buy-payments-page .smart-buy-payments-breadcrumb i {
  color: #94a3b8;
  font-size: 16px;
}
.smart-buy-payments-page .smart-buy-payments-breadcrumb span {
  color: #12355B;
  font-weight: 600;
}
.smart-buy-payments-page .smart-buy-payments-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.smart-buy-payments-page .smart-buy-payments-header__content .smart-buy-payments-eyebrow {
  display: inline-flex;
  margin-bottom: 7px;
  color: #C8A646;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.smart-buy-payments-page .smart-buy-payments-header__content h1 {
  margin: 0;
  color: #12355B;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}
.smart-buy-payments-page .smart-buy-payments-header__content p {
  max-width: 680px;
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.smart-buy-payments-page .smart-buy-payment-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.smart-buy-payments-page .smart-buy-payment-stat {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
  padding: 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.035);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.smart-buy-payments-page .smart-buy-payment-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.smart-buy-payments-page .smart-buy-payment-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 20px;
}
.smart-buy-payments-page .smart-buy-payment-stat__icon.total {
  background: #eef4fa;
  color: #12355B;
}
.smart-buy-payments-page .smart-buy-payment-stat__icon.paid {
  background: #ecfdf5;
  color: #047857;
}
.smart-buy-payments-page .smart-buy-payment-stat__icon.pending {
  background: #fffbeb;
  color: #b45309;
}
.smart-buy-payments-page .smart-buy-payment-stat__icon.failed {
  background: #fef2f2;
  color: #dc2626;
}
.smart-buy-payments-page .smart-buy-payment-stat__icon.refunded {
  background: #f5f3ff;
  color: #6d28d9;
}
.smart-buy-payments-page .smart-buy-payment-stat__content {
  min-width: 0;
}
.smart-buy-payments-page .smart-buy-payment-stat__content span {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.4;
}
.smart-buy-payments-page .smart-buy-payment-stat__content strong {
  display: block;
  margin-bottom: 4px;
  color: #12355B;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}
.smart-buy-payments-page .smart-buy-payment-stat__content small {
  display: block;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.4;
}
.smart-buy-payments-page .smart-buy-payments-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.035);
}
.smart-buy-payments-page .smart-buy-payments-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid #edf0f3;
}
.smart-buy-payments-page .smart-buy-payments-toolbar__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.smart-buy-payments-page .smart-buy-payments-toolbar__title h2 {
  margin: 0;
  color: #12355B;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}
.smart-buy-payments-page .smart-buy-payments-toolbar__title > span {
  display: inline-flex;
  padding: 4px 8px;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.2;
}
.smart-buy-payments-page .smart-buy-payments-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.smart-buy-payments-page .smart-buy-payment-search {
  position: relative;
  width: 220px;
}
.smart-buy-payments-page .smart-buy-payment-search i {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 17px;
  pointer-events: none;
}
.smart-buy-payments-page .smart-buy-payment-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 38px;
  color: #12355B;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 9px;
  outline: none;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.smart-buy-payments-page .smart-buy-payment-search input::placeholder {
  color: #a1aab5;
}
.smart-buy-payments-page .smart-buy-payment-search input:focus {
  border-color: #12355B;
  box-shadow: 0 0 0 3px rgba(18, 53, 91, 0.08);
}
.smart-buy-payments-page .smart-buy-payment-filter {
  position: relative;
  display: flex;
  align-items: center;
}
.smart-buy-payments-page .smart-buy-payment-filter i {
  position: absolute;
  left: 11px;
  z-index: 1;
  color: #64748b;
  font-size: 16px;
  pointer-events: none;
}
.smart-buy-payments-page .smart-buy-payment-filter select {
  width: 145px;
  height: 40px;
  padding: 0 30px 0 34px;
  color: #334155;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 9px;
  outline: none;
  appearance: none;
  cursor: pointer;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.smart-buy-payments-page .smart-buy-payment-filter select:focus {
  border-color: #12355B;
  box-shadow: 0 0 0 3px rgba(18, 53, 91, 0.08);
}
.smart-buy-payments-page .smart-buy-payment-filter::after {
  content: "\ea4e";
  position: absolute;
  right: 10px;
  color: #94a3b8;
  font-family: "remixicon";
  font-size: 15px;
  pointer-events: none;
}
.smart-buy-payments-page .smart-buy-payments-table-wrapper {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.smart-buy-payments-page .smart-buy-payments-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
}
.smart-buy-payments-page .smart-buy-payments-table thead {
  background: #f8fafc;
}
.smart-buy-payments-page .smart-buy-payments-table th {
  padding: 12px 18px;
  color: #64748b;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.smart-buy-payments-page .smart-buy-payments-table td {
  padding: 15px 18px;
  color: #475569;
  border-bottom: 1px solid #edf0f3;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.45;
}
.smart-buy-payments-page .smart-buy-payments-table tbody tr {
  transition: background 0.15s ease;
}
.smart-buy-payments-page .smart-buy-payments-table tbody tr:hover {
  background: #fafcff;
}
.smart-buy-payments-page .smart-buy-payments-table tbody tr:last-child td {
  border-bottom: 0;
}
.smart-buy-payments-page .smart-buy-payment-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.smart-buy-payments-page .smart-buy-payment-id strong {
  color: #12355B;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-payments-page .smart-buy-payment-id span {
  color: #94a3b8;
  font-size: 14px;
}
.smart-buy-payments-page .smart-buy-payment-request {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.smart-buy-payments-page .smart-buy-payment-request strong {
  color: #12355B;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.2s ease;
}
.smart-buy-payments-page .smart-buy-payment-request span {
  color: #64748b;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 170px;
  text-overflow: ellipsis;
}
.smart-buy-payments-page .smart-buy-payment-request:hover strong {
  color: #C8A646;
}
.smart-buy-payments-page .smart-buy-payment-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}
.smart-buy-payments-page .smart-buy-payment-customer > div:last-child {
  min-width: 0;
}
.smart-buy-payments-page .smart-buy-payment-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: #12355B;
  background: #eef4fa;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.smart-buy-payments-page .smart-buy-payment-customer strong {
  display: block;
  margin-bottom: 2px;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  max-width: 155px;
  text-overflow: ellipsis;
}
.smart-buy-payments-page .smart-buy-payment-customer span {
  display: block;
  color: #94a3b8;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 155px;
  text-overflow: ellipsis;
}
.smart-buy-payments-page .smart-buy-payment-amount {
  color: #12355B;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.smart-buy-payments-page .smart-buy-payment-method {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  white-space: nowrap;
}
.smart-buy-payments-page .smart-buy-payment-method i {
  color: #64748b;
  font-size: 16px;
}
.smart-buy-payments-page .smart-buy-payment-date {
  color: #64748b;
  white-space: nowrap;
}
.smart-buy-payments-page .smart-buy-payment-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-payments-page .smart-buy-payment-status.paid {
  color: #047857;
  background: #ecfdf5;
}
.smart-buy-payments-page .smart-buy-payment-status.pending {
  color: #b45309;
  background: #fffbeb;
}
.smart-buy-payments-page .smart-buy-payment-status.failed {
  color: #dc2626;
  background: #fef2f2;
}
.smart-buy-payments-page .smart-buy-payment-status.refunded {
  color: #6d28d9;
  background: #f5f3ff;
}
.smart-buy-payments-page .smart-buy-payment-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 17px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.smart-buy-payments-page .smart-buy-payment-action:hover {
  color: #fff;
  background: #12355B;
  border-color: #12355B;
}
.smart-buy-payments-page .smart-buy-payments-empty {
  min-height: 260px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 20px;
  text-align: center;
}
.smart-buy-payments-page .smart-buy-payments-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  font-size: 24px;
}
.smart-buy-payments-page .smart-buy-payments-empty h3 {
  margin: 0 0 6px;
  color: #12355B;
  font-size: 18px;
  font-weight: 700;
}
.smart-buy-payments-page .smart-buy-payments-empty p {
  margin: 0;
  color: #94a3b8;
  font-size: 14px;
}
.smart-buy-payments-page .smart-buy-payments-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 22px;
  border-top: 1px solid #edf0f3;
}
.smart-buy-payments-page .smart-buy-payments-pagination__info {
  color: #64748b;
  font-size: 14px;
}
.smart-buy-payments-page .smart-buy-payments-pagination__info strong {
  color: #334155;
  font-weight: 600;
}
.smart-buy-payments-page .smart-buy-payments-pagination__buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.smart-buy-payments-page .pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  color: #475569;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.smart-buy-payments-page .pagination-button:hover:not(.disabled):not(.active) {
  color: #12355B;
  border-color: #12355B;
}
.smart-buy-payments-page .pagination-button.active {
  color: #fff;
  background: #12355B;
  border-color: #12355B;
}
.smart-buy-payments-page .pagination-button.disabled {
  color: #cbd5e1;
  background: #f8fafc;
  cursor: not-allowed;
}
.smart-buy-payments-page .pagination-button i {
  font-size: 17px;
}
.smart-buy-payments-page .pagination-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  color: #94a3b8;
  font-size: 14px;
}
@media (max-width: 1400px) {
  .smart-buy-payments-page .smart-buy-payment-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .smart-buy-payments-page .smart-buy-payments-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-payments-page .smart-buy-payments-toolbar__actions {
    width: 100%;
  }
  .smart-buy-payments-page .smart-buy-payment-search {
    flex: 1;
    min-width: 220px;
  }
}
@media (max-width: 800px) {
  .smart-buy-payments-page {
    padding: 18px;
  }
  .smart-buy-payments-page .smart-buy-payment-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smart-buy-payments-page .smart-buy-payments-header__content h1 {
    font-size: 22px;
  }
  .smart-buy-payments-page .smart-buy-payments-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 560px) {
  .smart-buy-payments-page {
    padding: 14px;
  }
  .smart-buy-payments-page .smart-buy-payment-stats {
    grid-template-columns: 1fr;
  }
  .smart-buy-payments-page .smart-buy-payment-stat {
    padding: 15px;
  }
  .smart-buy-payments-page .smart-buy-payments-toolbar {
    padding: 16px;
  }
  .smart-buy-payments-page .smart-buy-payments-toolbar__title {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .smart-buy-payments-page .smart-buy-payments-toolbar__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .smart-buy-payments-page .smart-buy-payment-search {
    width: 100%;
    min-width: 0;
  }
  .smart-buy-payments-page .smart-buy-payment-filter {
    width: 100%;
  }
  .smart-buy-payments-page .smart-buy-payment-filter select {
    width: 100%;
  }
  .smart-buy-payments-page .smart-buy-payments-pagination {
    padding: 14px 16px;
  }
  .smart-buy-payments-page .smart-buy-payments-pagination__buttons {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

.smart-buy-customer-create-page {
  width: 100%;
  padding: 24px 0;
}

.smart-buy-customer-create-page .page-header {
  margin-bottom: 20px;
}

.smart-buy-customer-create-page .page-header-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.smart-buy-customer-create-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.smart-buy-customer-create-page .back-link:hover {
  color: #177245;
}

.smart-buy-customer-create-page .back-link i {
  font-size: 17px;
}

.smart-buy-customer-create-page .page-eyebrow,
.smart-buy-customer-create-page .card-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-customer-create-page .page-title {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.smart-buy-customer-create-page .page-description {
  max-width: 700px;
  margin: 8px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

.smart-buy-customer-create-page .smart-buy-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 15px 17px;
  border: 1px solid rgba(23, 114, 69, 0.18);
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.035);
}

.smart-buy-customer-create-page .message-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  font-size: 19px;
}

.smart-buy-customer-create-page .message-content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}

.smart-buy-customer-create-page .message-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.smart-buy-customer-create-page .form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 20px;
}

.smart-buy-customer-create-page .form-main,
.smart-buy-customer-create-page .form-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.smart-buy-customer-create-page .form-card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(16, 26, 35, 0.04);
}

.smart-buy-customer-create-page .card-header {
  margin-bottom: 20px;
}

.smart-buy-customer-create-page .card-header h2 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.smart-buy-customer-create-page .card-header p {
  margin: 5px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.smart-buy-customer-create-page .smart-buy-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.smart-buy-customer-create-page .smart-buy-item {
  padding: 18px;
  border: 1px solid rgba(23, 114, 69, 0.18);
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.018);
}

.smart-buy-customer-create-page .smart-buy-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(85, 85, 85, 0.1);
}

.smart-buy-customer-create-page .smart-buy-item-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.smart-buy-customer-create-page .item-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 62px;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 12px;
  font-weight: 700;
}

.smart-buy-customer-create-page .smart-buy-item-title h3 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.smart-buy-customer-create-page .smart-buy-item-title p {
  margin: 2px 0 0;
  color: rgba(85, 85, 85, 0.65);
  font-size: 13px;
  line-height: 1.5;
}

.smart-buy-customer-create-page .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.smart-buy-customer-create-page .form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.smart-buy-customer-create-page .form-group.full-width {
  grid-column: 1/-1;
}

.smart-buy-customer-create-page .form-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-customer-create-page .form-group label > span:not(.optional) {
  color: #dc3545;
}

.smart-buy-customer-create-page .form-group label .optional {
  color: rgba(85, 85, 85, 0.55);
  font-size: 14px;
  font-weight: 400;
}

.smart-buy-customer-create-page .form-group input,
.smart-buy-customer-create-page .form-group select,
.smart-buy-customer-create-page .form-group textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.smart-buy-customer-create-page .form-group input,
.smart-buy-customer-create-page .form-group select {
  height: 42px;
  padding: 0 12px;
}

.smart-buy-customer-create-page .form-group textarea {
  min-height: 110px;
  padding: 11px 12px;
  resize: vertical;
  line-height: 1.5;
}

.smart-buy-customer-create-page .form-group input:focus,
.smart-buy-customer-create-page .form-group select:focus,
.smart-buy-customer-create-page .form-group textarea:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}

.smart-buy-customer-create-page .form-group input::placeholder,
.smart-buy-customer-create-page .form-group textarea::placeholder {
  color: rgba(85, 85, 85, 0.5);
}

.smart-buy-customer-create-page .form-group small {
  margin-top: 5px;
  color: rgba(85, 85, 85, 0.6);
  font-size: 14px;
  line-height: 1.4;
}

.smart-buy-customer-create-page .input-with-icon {
  position: relative;
}

.smart-buy-customer-create-page .input-with-icon > i {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  color: rgba(85, 85, 85, 0.55);
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}

.smart-buy-customer-create-page .input-with-icon input {
  padding-left: 37px;
}

.smart-buy-customer-create-page .upload-box {
  position: relative;
  overflow: hidden;
  border: 1px dashed rgba(85, 85, 85, 0.3);
  border-radius: 9px;
  background: rgba(16, 26, 35, 0.015);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.smart-buy-customer-create-page .upload-box:hover {
  border-color: rgba(23, 114, 69, 0.45);
  background: rgba(23, 114, 69, 0.02);
}

.smart-buy-customer-create-page .upload-box input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.smart-buy-customer-create-page .upload-content {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  padding: 12px 14px;
}

.smart-buy-customer-create-page .upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 18px;
}

.smart-buy-customer-create-page .upload-content > div:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.smart-buy-customer-create-page .upload-content strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-customer-create-page .upload-content span {
  color: rgba(85, 85, 85, 0.6);
  font-size: 14px;
}

.smart-buy-customer-create-page .upload-content .browse-text {
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-customer-create-page .image-preview-wrapper {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 12px;
  background: #fff;
}

.smart-buy-customer-create-page .image-preview-wrapper.has-image {
  display: flex;
}

.smart-buy-customer-create-page .image-preview-wrapper.has-image + * {
  display: none;
}

.smart-buy-customer-create-page .upload-box:has(.image-preview-wrapper.has-image) .upload-content {
  display: none;
}

.smart-buy-customer-create-page .upload-box:has(.image-preview-wrapper.has-image) .product-image-input {
  z-index: 1;
}

.smart-buy-customer-create-page .product-image-preview {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 280px;
  border-radius: 7px;
  object-fit: contain;
}

.smart-buy-customer-create-page .remove-image-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 50%;
  background: #fff;
  color: #dc3545;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 26, 35, 0.1);
  transition: all 0.2s ease;
}

.smart-buy-customer-create-page .remove-image-button:hover {
  border-color: #dc3545;
  background: #dc3545;
  color: #fff;
}

.smart-buy-customer-create-page .remove-image-button i {
  line-height: 1;
}

.smart-buy-customer-create-page .remove-item-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 7px;
  background: rgba(220, 53, 69, 0.04);
  color: #dc3545;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.smart-buy-customer-create-page .remove-item-button:hover {
  border-color: rgba(220, 53, 69, 0.35);
  background: rgba(220, 53, 69, 0.08);
}

.smart-buy-customer-create-page .remove-item-button i {
  font-size: 16px;
}

.smart-buy-customer-create-page .add-item-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(85, 85, 85, 0.1);
}

.smart-buy-customer-create-page .add-item-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px dashed rgba(23, 114, 69, 0.45);
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.025);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.smart-buy-customer-create-page .add-item-button:hover {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.07);
}

.smart-buy-customer-create-page .add-item-button i {
  font-size: 18px;
}

.smart-buy-customer-create-page .add-item-wrapper p {
  margin: 0;
  color: rgba(85, 85, 85, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

.smart-buy-customer-create-page .sidebar-card,
.smart-buy-customer-create-page .trust-card {
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(16, 26, 35, 0.04);
}

.smart-buy-customer-create-page .sidebar-card {
  position: sticky;
  top: 20px;
}

.smart-buy-customer-create-page .sidebar-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.smart-buy-customer-create-page .sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 18px;
}

.smart-buy-customer-create-page .sidebar-card-header span {
  display: block;
  margin-bottom: 2px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-customer-create-page .sidebar-card-header h3 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.smart-buy-customer-create-page .how-it-works {
  display: flex;
  flex-direction: column;
}

.smart-buy-customer-create-page .how-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 17px;
}

.smart-buy-customer-create-page .how-step:not(:last-child)::after {
  position: absolute;
  top: 29px;
  left: 14px;
  width: 1px;
  height: calc(100% - 10px);
  background: #ddd;
  content: "";
}

.smart-buy-customer-create-page .step-number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(23, 114, 69, 0.2);
  border-radius: 50%;
  background: #fff;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}

.smart-buy-customer-create-page .how-step > div {
  flex: 1;
}

.smart-buy-customer-create-page .how-step strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-customer-create-page .how-step p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.smart-buy-customer-create-page .sidebar-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px;
  border: 1px solid rgba(255, 193, 7, 0.22);
  border-radius: 10px;
  background: rgba(255, 193, 7, 0.055);
}

.smart-buy-customer-create-page .notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 193, 7, 0.12);
  color: #ffc107;
  font-size: 17px;
}

.smart-buy-customer-create-page .sidebar-notice strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-customer-create-page .sidebar-notice p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.smart-buy-customer-create-page .trust-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.smart-buy-customer-create-page .trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
  font-size: 18px;
}

.smart-buy-customer-create-page .trust-card strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-customer-create-page .trust-card p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.smart-buy-customer-create-page .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.smart-buy-customer-create-page .cancel-button,
.smart-buy-customer-create-page .submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.smart-buy-customer-create-page .cancel-button {
  border: 1px solid #ddd;
  background: #fff;
  color: #555555;
}

.smart-buy-customer-create-page .cancel-button:hover {
  border-color: rgba(23, 114, 69, 0.35);
  background: rgba(23, 114, 69, 0.03);
  color: #177245;
}

.smart-buy-customer-create-page .submit-button {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
  cursor: pointer;
}

.smart-buy-customer-create-page .submit-button:hover {
  border-color: rgba(23, 114, 69, 0.88);
  background: rgba(23, 114, 69, 0.88);
}

@media (min-width: 1400px) and (max-width: 1700px) {
  .smart-buy-customer-create-page .form-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .smart-buy-customer-create-page .form-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-customer-create-page .form-layout {
    grid-template-columns: 1fr;
  }
  .smart-buy-customer-create-page .sidebar-card {
    position: static;
  }
  .smart-buy-customer-create-page .form-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-customer-create-page .page-header-content {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-customer-create-page .form-sidebar {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .smart-buy-customer-create-page {
    padding: 20px 0;
  }
  .smart-buy-customer-create-page .form-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-customer-create-page .form-group.full-width {
    grid-column: auto;
  }
  .smart-buy-customer-create-page .form-card,
  .smart-buy-customer-create-page .sidebar-card,
  .smart-buy-customer-create-page .trust-card {
    padding: 16px;
  }
  .smart-buy-customer-create-page .smart-buy-item {
    padding: 14px;
  }
  .smart-buy-customer-create-page .smart-buy-item-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-customer-create-page .remove-item-button {
    width: 100%;
  }
  .smart-buy-customer-create-page .add-item-wrapper {
    align-items: stretch;
    flex-direction: column;
  }
  .smart-buy-customer-create-page .add-item-button {
    width: 100%;
  }
  .smart-buy-customer-create-page .image-preview-wrapper {
    min-height: 180px;
  }
  .smart-buy-customer-create-page .product-image-preview {
    max-height: 230px;
  }
  .smart-buy-customer-create-page .form-actions {
    justify-content: stretch;
  }
  .smart-buy-customer-create-page .cancel-button,
  .smart-buy-customer-create-page .submit-button {
    flex: 1;
  }
}
@media (max-width: 767px) {
  .smart-buy-customer-create-page .page-title {
    font-size: 18px;
  }
  .smart-buy-customer-create-page .smart-buy-message {
    align-items: flex-start;
  }
  .smart-buy-customer-create-page .image-preview-wrapper {
    min-height: 150px;
  }
  .smart-buy-customer-create-page .product-image-preview {
    max-height: 200px;
  }
  .smart-buy-customer-create-page .form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .smart-buy-customer-create-page .cancel-button,
  .smart-buy-customer-create-page .submit-button {
    width: 100%;
  }
}
.smart-buy-confirmation-page {
  width: 100%;
  min-height: 100%;
  padding: 30px 0;
}

.smart-buy-confirmation-page .confirmation-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.smart-buy-confirmation-page .confirmation-card {
  width: 100%;
  max-width: 720px;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(16, 26, 35, 0.05);
}

.smart-buy-confirmation-page .confirmation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border: 1px solid rgba(25, 135, 84, 0.2);
  border-radius: 50%;
  background: rgba(25, 135, 84, 0.08);
  color: #198754;
  font-size: 29px;
}

.smart-buy-confirmation-page .confirmation-content {
  text-align: center;
}

.smart-buy-confirmation-page .confirmation-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-confirmation-page .confirmation-content h1 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.smart-buy-confirmation-page .confirmation-content p {
  max-width: 570px;
  margin: 10px auto 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

.smart-buy-confirmation-page .request-number-card {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(23, 114, 69, 0.18);
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.035);
  text-align: center;
}

.smart-buy-confirmation-page .request-number-card > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(85, 85, 85, 0.65);
  font-size: 14px;
}

.smart-buy-confirmation-page .request-number-card strong {
  display: block;
  color: #177245;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.smart-buy-confirmation-page .request-number-card p {
  margin: 5px 0 0;
  color: rgba(85, 85, 85, 0.6);
  font-size: 14px;
}

.smart-buy-confirmation-page .next-steps {
  margin-top: 28px;
}

.smart-buy-confirmation-page .section-heading {
  margin-bottom: 16px;
}

.smart-buy-confirmation-page .section-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-confirmation-page .section-heading h2 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.smart-buy-confirmation-page .steps-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.smart-buy-confirmation-page .confirmation-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 120px;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.smart-buy-confirmation-page .confirmation-step:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.018);
}

.smart-buy-confirmation-page .step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 17px;
}

.smart-buy-confirmation-page .step-content {
  min-width: 0;
}

.smart-buy-confirmation-page .step-content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-confirmation-page .step-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.smart-buy-confirmation-page .confirmation-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
}

.smart-buy-confirmation-page .primary-button,
.smart-buy-confirmation-page .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.smart-buy-confirmation-page .primary-button {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}

.smart-buy-confirmation-page .primary-button:hover {
  border-color: rgba(23, 114, 69, 0.88);
  background: rgba(23, 114, 69, 0.88);
}

.smart-buy-confirmation-page .secondary-button {
  border: 1px solid #ddd;
  background: #fff;
  color: #555555;
}

.smart-buy-confirmation-page .secondary-button:hover {
  border-color: rgba(23, 114, 69, 0.35);
  background: rgba(23, 114, 69, 0.03);
  color: #177245;
}

.smart-buy-confirmation-page .confirmation-help {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid rgba(13, 202, 240, 0.2);
  border-radius: 9px;
  background: rgba(13, 202, 240, 0.04);
}

.smart-buy-confirmation-page .help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
  font-size: 17px;
}

.smart-buy-confirmation-page .confirmation-help strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-confirmation-page .confirmation-help p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.smart-buy-confirmation-page .confirmation-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  color: rgba(85, 85, 85, 0.55);
  font-size: 14px;
  font-weight: 600;
}

.smart-buy-confirmation-page .confirmation-footer i {
  color: #177245;
  font-size: 15px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-confirmation-page {
    padding: 25px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-confirmation-page .confirmation-card {
    max-width: 680px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .smart-buy-confirmation-page {
    padding: 20px 0;
  }
  .smart-buy-confirmation-page .confirmation-card {
    padding: 24px 18px;
  }
  .smart-buy-confirmation-page .steps-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .smart-buy-confirmation-page .confirmation-card {
    padding: 20px 15px;
  }
  .smart-buy-confirmation-page .confirmation-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
  .smart-buy-confirmation-page .confirmation-content h1 {
    font-size: 18px;
  }
  .smart-buy-confirmation-page .request-number-card strong {
    font-size: 18px;
  }
  .smart-buy-confirmation-page .confirmation-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .smart-buy-confirmation-page .primary-button,
  .smart-buy-confirmation-page .secondary-button {
    width: 100%;
  }
  .smart-buy-confirmation-page .confirmation-footer {
    flex-wrap: wrap;
    gap: 5px;
  }
}
/* ==========================================================================
   MY SMART BUY
   ========================================================================== */
.my-smart-buy-page {
  width: 100%;
  padding: 24px;
}
@media (max-width: 767px) {
  .my-smart-buy-page {
    padding: 16px;
  }
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */
.smart-buy-page-header {
  margin-bottom: 24px;
}

.smart-buy-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: 1px solid rgba(13, 43, 90, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(16, 26, 35, 0.04);
}
@media (max-width: 767px) {
  .smart-buy-header-content {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
}

.smart-buy-header-text {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 767px) {
  .smart-buy-header-text {
    align-items: flex-start;
  }
}
.smart-buy-header-text h1 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.smart-buy-header-text p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.7;
}

.smart-buy-header-icon {
  width: 52px;
  min-width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
  font-size: 20px;
}

.smart-buy-create-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: 10px;
  background: #177245;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-create-btn:hover {
  color: #fff;
  background: rgba(23, 114, 69, 0.9);
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
}
.smart-buy-create-btn i {
  font-size: 13px;
}
@media (max-width: 767px) {
  .smart-buy-create-btn {
    width: 100%;
  }
}

/* ==========================================================================
   STATISTICS
   ========================================================================== */
.smart-buy-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .smart-buy-stats-grid {
    grid-template-columns: 1fr;
  }
}

.smart-buy-stat-card {
  min-height: 100px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  border: 1px solid rgba(13, 43, 90, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(16, 26, 35, 0.035);
}

.stat-icon {
  width: 48px;
  min-width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
}

.stat-icon-blue {
  color: #0dcaf0;
  background: rgba(13, 202, 240, 0.1);
}

.stat-icon-warning {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.12);
}

.stat-icon-purple {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
}

.stat-icon-green {
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stat-content span {
  color: #555555;
  font-size: 13px;
  line-height: 1.4;
}
.stat-content strong {
  color: #0D2B5A;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

/* ==========================================================================
   MAIN CARD
   ========================================================================== */
.smart-buy-main-card {
  padding: 24px;
  border: 1px solid rgba(13, 43, 90, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(16, 26, 35, 0.04);
}
@media (max-width: 767px) {
  .smart-buy-main-card {
    padding: 16px;
    border-radius: 14px;
  }
}

.smart-buy-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(13, 43, 90, 0.08);
}
.smart-buy-card-header h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.smart-buy-card-header p {
  margin: 0;
  color: #555555;
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .smart-buy-card-header {
    align-items: flex-start;
  }
}

.smart-buy-total-count {
  min-width: 70px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.smart-buy-total-count span {
  display: block;
  margin-top: 2px;
  color: #555555;
  font-size: 10px;
  font-weight: 500;
}

/* ==========================================================================
   FILTER
   ========================================================================== */
.smart-buy-filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) repeat(3, minmax(130px, 1fr)) auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .smart-buy-filter-form {
    grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(120px, 1fr)) auto auto;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .smart-buy-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .smart-buy-filter-form {
    grid-template-columns: 1fr;
  }
}

.smart-buy-search {
  position: relative;
}
.smart-buy-search i {
  position: absolute;
  top: 50%;
  left: 15px;
  color: rgba(85, 85, 85, 0.6);
  font-size: 14px;
  pointer-events: none;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.smart-buy-search input {
  width: 100%;
  height: 46px;
  padding: 0 15px 0 42px;
  border: 1px solid rgba(13, 43, 90, 0.12);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-search input::-webkit-input-placeholder {
  color: rgba(85, 85, 85, 0.6);
}
.smart-buy-search input:-moz-placeholder {
  color: rgba(85, 85, 85, 0.6);
}
.smart-buy-search input::-moz-placeholder {
  color: rgba(85, 85, 85, 0.6);
}
.smart-buy-search input:-ms-input-placeholder {
  color: rgba(85, 85, 85, 0.6);
}
.smart-buy-search input:focus {
  border-color: rgba(23, 114, 69, 0.7);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}

.smart-buy-filter-select {
  position: relative;
}
.smart-buy-filter-select select {
  width: 100%;
  height: 46px;
  padding: 0 38px 0 14px;
  border: 1px solid rgba(13, 43, 90, 0.12);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-filter-select select:focus {
  border-color: rgba(23, 114, 69, 0.7);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.08);
}
.smart-buy-filter-select > i {
  position: absolute;
  top: 50%;
  right: 14px;
  color: rgba(85, 85, 85, 0.65);
  font-size: 11px;
  pointer-events: none;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.smart-buy-filter-btn,
.smart-buy-reset-btn {
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .smart-buy-filter-btn,
  .smart-buy-reset-btn {
    width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-filter-btn,
  .smart-buy-reset-btn {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-filter-btn,
  .smart-buy-reset-btn {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .smart-buy-filter-btn,
  .smart-buy-reset-btn {
    width: 100%;
  }
}

.smart-buy-filter-btn {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
  cursor: pointer;
}
.smart-buy-filter-btn:hover {
  background: rgba(23, 114, 69, 0.9);
  color: #fff;
}

.smart-buy-reset-btn {
  border: 1px solid rgba(220, 53, 69, 0.18);
  background: rgba(220, 53, 69, 0.06);
  color: #dc3545;
  text-decoration: none;
}
.smart-buy-reset-btn:hover {
  border-color: rgba(220, 53, 69, 0.3);
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/* ==========================================================================
   REQUEST LIST
   ========================================================================== */
.smart-buy-request-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.smart-buy-request-card {
  overflow: hidden;
  border: 1px solid rgba(13, 43, 90, 0.08);
  border-radius: 14px;
  background: #fff;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.smart-buy-request-card:hover {
  border-color: rgba(23, 114, 69, 0.18);
  box-shadow: 0 10px 28px rgba(16, 26, 35, 0.05);
}

/* ==========================================================================
   REQUEST TOP
   ========================================================================== */
.request-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
  background: rgba(242, 244, 247, 0.45);
}
@media (max-width: 767px) {
  .request-card-top {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
}

.request-main-info {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 767px) {
  .request-main-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

.request-number-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.request-number-box span {
  color: #555555;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.request-number-box strong {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}

.request-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.request-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #555555;
  font-size: 12px;
}
.request-meta i {
  color: #177245;
  font-size: 12px;
}

/* ==========================================================================
   STATUS
   ========================================================================== */
.request-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.request-status i {
  font-size: 11px;
}

.status-pending {
  color: #9a6700;
  background: rgba(255, 193, 7, 0.15);
}

.status-quote-sent {
  color: #0dcaf0;
  background: rgba(13, 202, 240, 0.1);
}

.status-quote-accepted {
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.1);
}

.status-rejected,
.status-cancelled {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

.status-payment {
  color: #198754;
  background: rgba(25, 135, 84, 0.1);
}

.status-purchased {
  color: #a16207;
  background: rgba(212, 175, 55, 0.15);
}

.status-transit {
  color: #0369a1;
  background: rgba(13, 202, 240, 0.12);
}

.status-completed {
  color: #198754;
  background: rgba(25, 135, 84, 0.1);
}

/* ==========================================================================
   PRODUCT PREVIEW
   ========================================================================== */
.request-product-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
@media (max-width: 767px) {
  .request-product-preview {
    align-items: flex-start;
    padding: 16px;
  }
}

.request-product-image {
  width: 88px;
  min-width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid rgba(13, 43, 90, 0.08);
  border-radius: 12px;
  background: rgba(242, 244, 247, 0.8);
}
.request-product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@media (max-width: 767px) {
  .request-product-image {
    width: 70px;
    min-width: 70px;
    height: 70px;
  }
}

.product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(85, 85, 85, 0.45);
  font-size: 22px;
}

.request-product-content {
  min-width: 0;
  flex: 1;
}
.request-product-content h3 {
  margin: 3px 0 8px;
  overflow: hidden;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .request-product-content h3 {
    font-size: 14px;
    white-space: normal;
  }
}

.product-label {
  color: #177245;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.product-details span {
  color: #555555;
  font-size: 12px;
}
.product-details strong {
  margin-left: 3px;
  color: #0D2B5A;
  font-weight: 600;
}

.additional-products {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  font-size: 11px;
  font-weight: 600;
}
.additional-products i {
  font-size: 9px;
}

/* ==========================================================================
   REQUEST PROGRESS
   ========================================================================== */
.request-progress-section {
  padding: 0 20px 20px;
}
@media (max-width: 767px) {
  .request-progress-section {
    padding: 0 16px 16px;
  }
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 9px;
}
.progress-header span {
  color: #555555;
  font-size: 12px;
  font-weight: 500;
}
.progress-header strong {
  color: #177245;
  font-size: 13px;
  font-weight: 700;
}

.request-progress-bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 50px;
  background: rgba(13, 43, 90, 0.08);
}

.request-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #177245;
  -webkit-transition: all 0.6s linear 0s;
  -o-transition: all 0.6s linear 0s;
  transition: all 0.6s linear 0s;
}

.request-progress-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 9px;
}
.request-progress-steps span {
  position: relative;
  color: rgba(85, 85, 85, 0.55);
  font-size: 10px;
  font-weight: 500;
  text-align: center;
}
.request-progress-steps span:first-child {
  text-align: left;
}
.request-progress-steps span:last-child {
  text-align: right;
}
.request-progress-steps span.active {
  color: #177245;
  font-weight: 700;
}
@media (max-width: 767px) {
  .request-progress-steps {
    gap: 4px;
  }
  .request-progress-steps span {
    font-size: 8px;
    word-break: break-word;
  }
}

/* ==========================================================================
   REQUEST FOOTER
   ========================================================================== */
.request-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-top: 1px solid rgba(13, 43, 90, 0.07);
  background: rgba(242, 244, 247, 0.3);
}
@media (min-width: 768px) and (max-width: 991px) {
  .request-card-footer {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 767px) {
  .request-card-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
}

.request-extra-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
@media (max-width: 767px) {
  .request-extra-info {
    width: 100%;
  }
}

.request-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.request-info-item > i {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #177245;
  background: rgba(23, 114, 69, 0.08);
  font-size: 13px;
}
.request-info-item div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.request-info-item span {
  color: #555555;
  font-size: 10px;
  line-height: 1.3;
}
.request-info-item strong {
  color: #0D2B5A;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

/* ==========================================================================
   ACTION BUTTONS
   ========================================================================== */
.request-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .request-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 767px) {
  .request-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.request-action-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.request-action-btn i {
  font-size: 12px;
}
.request-action-btn:hover {
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
}
@media (max-width: 767px) {
  .request-action-btn {
    width: 100%;
    padding: 0 8px;
  }
}

.request-view-btn {
  border-color: rgba(13, 43, 90, 0.12);
  background: #fff;
  color: #0D2B5A;
}
.request-view-btn:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
}

.request-quote-btn {
  background: rgba(13, 202, 240, 0.1);
  color: #087da3;
}
.request-quote-btn:hover {
  background: rgba(13, 202, 240, 0.16);
  color: #087da3;
}

.request-payment-btn {
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
}
.request-payment-btn:hover {
  background: rgba(124, 58, 237, 0.16);
  color: #6d28d9;
}
.request-payment-btn.is-loading {
  pointer-events: none;
  opacity: 0.65;
}
.request-payment-btn.is-loading i {
  animation: smartBuySpin 0.8s linear infinite;
}

.request-track-btn {
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
}
.request-track-btn:hover {
  background: rgba(23, 114, 69, 0.16);
  color: #177245;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.smart-buy-pagination {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.smart-buy-empty-state {
  max-width: 500px;
  margin: 0 auto;
  padding: 55px 20px;
  text-align: center;
}
.smart-buy-empty-state h3 {
  margin: 18px 0 8px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.smart-buy-empty-state p {
  max-width: 420px;
  margin: 0 auto 22px;
  color: #555555;
  font-size: 14px;
  line-height: 1.8;
}

.empty-state-icon {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 20px;
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
  font-size: 28px;
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */
@keyframes smartBuySpin {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (min-width: 480px) and (max-width: 767px) {
  .my-smart-buy-page {
    padding: 18px;
  }
  .smart-buy-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smart-buy-search {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .smart-buy-stats-grid {
    gap: 12px;
  }
  .smart-buy-stat-card {
    min-height: 88px;
    padding: 15px;
  }
  .stat-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .smart-buy-card-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .smart-buy-card-header h2 {
    font-size: 18px;
  }
  .request-status {
    align-self: flex-start;
  }
  .request-meta {
    gap: 10px;
  }
  .request-actions .request-action-btn:only-child {
    grid-column: 1/-1;
  }
}
.my-smart-buy-details {
  width: 100%;
  padding: 12px;
  font-family: "Poppins", sans-serif;
}
.my-smart-buy-details * {
  box-sizing: border-box;
}
.my-smart-buy-details .smart-buy-details-card,
.my-smart-buy-details .smart-buy-sidebar-card,
.my-smart-buy-details .smart-buy-progress-card,
.my-smart-buy-details .smart-buy-payment-required,
.my-smart-buy-details .smart-buy-cancelled-notice {
  background: #fff;
  border: 1px solid rgba(13, 43, 90, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(13, 43, 90, 0.04);
}
.my-smart-buy-details .smart-buy-details__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid rgba(13, 43, 90, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(13, 43, 90, 0.04);
}
.my-smart-buy-details .smart-buy-details__header-left {
  min-width: 0;
}
.my-smart-buy-details .smart-buy-details__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: rgba(85, 85, 85, 0.75);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-details .smart-buy-details__back i {
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-details__back:hover {
  color: #177245;
}
.my-smart-buy-details .smart-buy-details__back:hover i {
  -webkit-transform: translateX(-2px);
  -ms-transform: translateX(-2px);
  transform: translateX(-2px);
}
.my-smart-buy-details .smart-buy-details__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.my-smart-buy-details .smart-buy-details__title-wrap .smart-buy-details__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
  border-radius: 10px;
}
.my-smart-buy-details .smart-buy-details__title-wrap .smart-buy-details__icon i {
  font-size: 16px;
}
.my-smart-buy-details .smart-buy-details__title-wrap h2 {
  margin: 0 0 2px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.my-smart-buy-details .smart-buy-details__title-wrap p {
  margin: 0;
  color: rgba(85, 85, 85, 0.65);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.my-smart-buy-details .smart-buy-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.my-smart-buy-details .smart-buy-status--pending, .my-smart-buy-details .smart-buy-status--quote-sent, .my-smart-buy-details .smart-buy-status--extension-requested, .my-smart-buy-details .smart-buy-status--payment-pending, .my-smart-buy-details .smart-buy-status--payment-processing {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
}
.my-smart-buy-details .smart-buy-status--quote-rejected, .my-smart-buy-details .smart-buy-status--payment-failed, .my-smart-buy-details .smart-buy-status--payment-cancelled, .my-smart-buy-details .smart-buy-status--cancelled {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}
.my-smart-buy-details .smart-buy-status--quote-accepted, .my-smart-buy-details .smart-buy-status--payment-completed, .my-smart-buy-details .smart-buy-status--product-purchased, .my-smart-buy-details .smart-buy-status--in-transit {
  color: #0dcaf0;
  background: rgba(13, 202, 240, 0.1);
}
.my-smart-buy-details .smart-buy-status--completed {
  color: #198754;
  background: rgba(25, 135, 84, 0.1);
}
.my-smart-buy-details .smart-buy-progress-card {
  margin-bottom: 12px;
  overflow: hidden;
}
.my-smart-buy-details .smart-buy-progress-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-progress-card__heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.my-smart-buy-details .smart-buy-progress-card__heading h3 {
  margin: 0 0 2px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-progress-card__heading p {
  margin: 0;
  color: rgba(85, 85, 85, 0.65);
  font-size: 14px;
  line-height: 1.5;
}
.my-smart-buy-details .smart-buy-progress-card__status-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
  border-radius: 8px;
}
.my-smart-buy-details .smart-buy-progress-card__status-icon i {
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-progress-card__status-icon--terminal {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}
.my-smart-buy-details .smart-buy-progress-card__status-icon--completed {
  color: #198754;
  background: rgba(25, 135, 84, 0.1);
}
.my-smart-buy-details .smart-buy-progress-card__percentage {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.my-smart-buy-details .smart-buy-progress-card__percentage span {
  color: rgba(85, 85, 85, 0.65);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-progress-card__percentage strong {
  color: #198754;
  font-size: 14px;
  font-weight: 700;
}
.my-smart-buy-details .smart-buy-progress-card__percentage--terminal strong {
  color: #dc3545;
}
.my-smart-buy-details .smart-buy-progress {
  padding: 18px;
}
.my-smart-buy-details .smart-buy-progress__line {
  position: relative;
  width: 84%;
  height: 2px;
  margin: 0 auto;
  background: rgba(13, 43, 90, 0.12);
  overflow: hidden;
}
.my-smart-buy-details .smart-buy-progress__active {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #177245;
  border-radius: 999px;
  -webkit-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
  transition: all 0.4s linear 0s;
}
.my-smart-buy-details .smart-buy-progress__active--terminal {
  background: #dc3545;
}
.my-smart-buy-details .smart-buy-progress__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: -10px;
}
.my-smart-buy-details .smart-buy-progress__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.my-smart-buy-details .smart-buy-progress__step.is-active .smart-buy-progress__circle, .my-smart-buy-details .smart-buy-progress__step.is-current .smart-buy-progress__circle {
  color: #fff;
  background: #177245;
  border-color: #177245;
  box-shadow: 0 0 0 4px rgba(23, 114, 69, 0.08);
}
.my-smart-buy-details .smart-buy-progress__step.is-active .smart-buy-progress__label, .my-smart-buy-details .smart-buy-progress__step.is-current .smart-buy-progress__label {
  color: #177245;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-progress__step.is-current .smart-buy-progress__circle {
  box-shadow: 0 0 0 5px rgba(23, 114, 69, 0.12);
}
.my-smart-buy-details .smart-buy-progress__step.is-terminal .smart-buy-progress__circle {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.08);
  border-color: #dc3545;
}
.my-smart-buy-details .smart-buy-progress__step.is-terminal .smart-buy-progress__label {
  color: #dc3545;
}
.my-smart-buy-details .smart-buy-progress__circle {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(85, 85, 85, 0.55);
  background: #fff;
  border: 2px solid rgba(13, 43, 90, 0.15);
  border-radius: 50%;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-details .smart-buy-progress__circle i {
  font-size: 14px;
  line-height: 1;
}
.my-smart-buy-details .smart-buy-progress__label {
  margin-top: 8px;
  color: rgba(85, 85, 85, 0.65);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.my-smart-buy-details .smart-buy-progress__current {
  margin-top: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-progress__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-progress__status-info {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-progress__status-info i {
  color: #dc3545;
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-progress__status strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-progress__status--terminal strong {
  color: #dc3545;
}
.my-smart-buy-details .smart-buy-progress__status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #198754;
}
.my-smart-buy-details .smart-buy-details__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 12px;
}
.my-smart-buy-details .smart-buy-details__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.my-smart-buy-details .smart-buy-details__sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
}
.my-smart-buy-details .smart-buy-details-card {
  overflow: hidden;
}
.my-smart-buy-details .smart-buy-details-card__header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-details-card__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.my-smart-buy-details .smart-buy-details-card h3 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.my-smart-buy-details .smart-buy-details-card__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(85, 85, 85, 0.65);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-details-card__date i {
  color: #177245;
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-details-card__count, .my-smart-buy-details .smart-buy-details-card__actions {
  display: flex;
  align-items: center;
}
.my-smart-buy-details .smart-buy-details-card__count,
.my-smart-buy-details .smart-buy-details-card .smart-buy-quote-number {
  padding: 6px 10px;
  color: #198754;
  background: rgba(25, 135, 84, 0.08);
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.my-smart-buy-details .smart-buy-details-card__actions {
  justify-content: flex-end;
  padding: 14px 18px;
  border-top: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-request-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.my-smart-buy-details .smart-buy-request-info__item {
  min-height: 68px;
  padding: 14px 18px;
  border-right: 1px solid rgba(13, 43, 90, 0.07);
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-request-info__item:nth-child(2n) {
  border-right: 0;
}
.my-smart-buy-details .smart-buy-request-info__item:nth-last-child(-n+2) {
  border-bottom: 0;
}
.my-smart-buy-details .smart-buy-request-info__item span {
  display: block;
  margin-bottom: 5px;
  color: rgba(85, 85, 85, 0.6);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-request-info__item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}
.my-smart-buy-details .smart-buy-product-list .smart-buy-product:not(:last-child) {
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-product {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
}
.my-smart-buy-details .smart-buy-product__image {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  overflow: hidden;
  background: #F2F4F7;
  border: 1px solid rgba(13, 43, 90, 0.07);
  border-radius: 9px;
}
.my-smart-buy-details .smart-buy-product__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.my-smart-buy-details .smart-buy-product__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(85, 85, 85, 0.45);
}
.my-smart-buy-details .smart-buy-product__placeholder i {
  font-size: 16px;
}
.my-smart-buy-details .smart-buy-product__content {
  flex: 1;
  min-width: 0;
}
.my-smart-buy-details .smart-buy-product__label {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.my-smart-buy-details .smart-buy-product h4 {
  margin: 0 0 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.my-smart-buy-details .smart-buy-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.my-smart-buy-details .smart-buy-product__meta span {
  color: rgba(85, 85, 85, 0.68);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-product__meta strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-product__notes {
  margin-bottom: 8px;
  padding: 7px 9px;
  color: rgba(85, 85, 85, 0.75);
  background: #F2F4F7;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
}
.my-smart-buy-details .smart-buy-product__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-details .smart-buy-product__link i {
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-product__link:hover {
  color: #0D2B5A;
}
.my-smart-buy-details .smart-buy-empty {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: rgba(85, 85, 85, 0.6);
}
.my-smart-buy-details .smart-buy-empty i {
  color: rgba(23, 114, 69, 0.6);
  font-size: 24px;
}
.my-smart-buy-details .smart-buy-empty p {
  margin: 0;
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-quote-summary__row {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 18px;
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-quote-summary__row span {
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-quote-summary__row strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.my-smart-buy-details .smart-buy-quote-summary__row.is-discount strong {
  color: #198754;
}
.my-smart-buy-details .smart-buy-quote-summary__row.is-total {
  min-height: 52px;
  background: rgba(23, 114, 69, 0.035);
  border-bottom: 0;
}
.my-smart-buy-details .smart-buy-quote-summary__row.is-total span {
  color: #0D2B5A;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-quote-summary__row.is-total strong {
  color: #198754;
  font-size: 16px;
  font-weight: 700;
}
.my-smart-buy-details .smart-buy-quote-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 18px 0;
  padding: 10px 12px;
  color: #0dcaf0;
  background: rgba(13, 202, 240, 0.07);
  border-radius: 8px;
}
.my-smart-buy-details .smart-buy-quote-note i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-quote-note p {
  margin: 0;
  color: rgba(85, 85, 85, 0.8);
  font-size: 14px;
  line-height: 1.6;
}
.my-smart-buy-details .smart-buy-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-details .smart-buy-btn i {
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-btn--primary {
  color: #fff;
  background: #177245;
}
.my-smart-buy-details .smart-buy-btn--primary:hover {
  color: #fff;
  background: #0D2B5A;
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
}
.my-smart-buy-details .smart-buy-payment-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-payment-status--completed, .my-smart-buy-details .smart-buy-payment-status--paid, .my-smart-buy-details .smart-buy-payment-status--success {
  color: #198754;
  background: rgba(25, 135, 84, 0.08);
}
.my-smart-buy-details .smart-buy-payment-status--pending, .my-smart-buy-details .smart-buy-payment-status--processing {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
}
.my-smart-buy-details .smart-buy-payment-status--failed, .my-smart-buy-details .smart-buy-payment-status--cancelled {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}
.my-smart-buy-details .smart-buy-payment-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.my-smart-buy-details .smart-buy-payment-info > div {
  min-height: 68px;
  padding: 14px 18px;
  border-right: 1px solid rgba(13, 43, 90, 0.07);
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-payment-info > div:nth-child(2n) {
  border-right: 0;
}
.my-smart-buy-details .smart-buy-payment-info > div:nth-last-child(-n+2) {
  border-bottom: 0;
}
.my-smart-buy-details .smart-buy-payment-info span {
  display: block;
  margin-bottom: 5px;
  color: rgba(85, 85, 85, 0.6);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-payment-info strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}
.my-smart-buy-details .smart-buy-payment-required {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
}
.my-smart-buy-details .smart-buy-payment-required__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 10px;
}
.my-smart-buy-details .smart-buy-payment-required__icon i {
  font-size: 16px;
}
.my-smart-buy-details .smart-buy-payment-required__content {
  flex: 1;
}
.my-smart-buy-details .smart-buy-payment-required__content h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-payment-required__content p {
  margin: 0;
  color: rgba(85, 85, 85, 0.7);
  font-size: 14px;
  line-height: 1.6;
}
.my-smart-buy-details .smart-buy-shipment-card .smart-buy-details-card__header {
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-shipment-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-shipment-status--pending {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
}
.my-smart-buy-details .smart-buy-shipment-status--shipped, .my-smart-buy-details .smart-buy-shipment-status--in_transit {
  color: #0dcaf0;
  background: rgba(13, 202, 240, 0.1);
}
.my-smart-buy-details .smart-buy-shipment-status--delivered {
  color: #198754;
  background: rgba(25, 135, 84, 0.08);
}
.my-smart-buy-details .smart-buy-shipment-status--cancelled, .my-smart-buy-details .smart-buy-shipment-status--failed {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}
.my-smart-buy-details .smart-buy-shipment-section {
  padding: 14px 18px;
}
.my-smart-buy-details .smart-buy-shipment-section:not(:last-of-type) {
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-shipment-section__title {
  margin: 0 0 10px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-shipment-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(13, 43, 90, 0.07);
  border-radius: 8px;
  overflow: hidden;
}
.my-smart-buy-details .smart-buy-shipment-info__item {
  min-height: 64px;
  padding: 11px;
  border-right: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-shipment-info__item:last-child {
  border-right: 0;
}
.my-smart-buy-details .smart-buy-shipment-info__item span {
  display: block;
  margin-bottom: 5px;
  color: rgba(85, 85, 85, 0.58);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-shipment-info__item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}
.my-smart-buy-details .smart-buy-delivery-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: #F2F4F7;
  border: 1px solid rgba(13, 43, 90, 0.06);
  border-radius: 9px;
}
.my-smart-buy-details .smart-buy-delivery-address__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
  border-radius: 7px;
}
.my-smart-buy-details .smart-buy-delivery-address__icon i {
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-delivery-address__content {
  min-width: 0;
}
.my-smart-buy-details .smart-buy-delivery-address__content strong {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-delivery-address__content p {
  margin: 2px 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.5;
}
.my-smart-buy-details .smart-buy-delivery-address__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px !important;
  color: #177245 !important;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-delivery-address__phone i {
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-shipment-notes {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 18px 14px;
  padding: 12px;
  border-left: 2px solid #177245;
  background: rgba(23, 114, 69, 0.04);
}
.my-smart-buy-details .smart-buy-shipment-notes__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
  border-radius: 7px;
}
.my-smart-buy-details .smart-buy-shipment-notes__icon i {
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-shipment-notes strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-shipment-notes p {
  margin: 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.6;
}
.my-smart-buy-details .smart-buy-sidebar-card {
  overflow: hidden;
}
.my-smart-buy-details .smart-buy-sidebar-card__header {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(13, 43, 90, 0.07);
}
.my-smart-buy-details .smart-buy-sidebar-card__header > i {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #177245;
  background: rgba(23, 114, 69, 0.1);
  border-radius: 7px;
  font-size: 14px;
}
.my-smart-buy-details .smart-buy-sidebar-card__header h3 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-customer-info {
  padding: 14px 15px;
}
.my-smart-buy-details .smart-buy-customer-info > div:not(:last-child) {
  margin-bottom: 12px;
}
.my-smart-buy-details .smart-buy-customer-info span {
  display: block;
  margin-bottom: 4px;
  color: rgba(85, 85, 85, 0.58);
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-details .smart-buy-customer-info strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  word-break: break-word;
}
.my-smart-buy-details .smart-buy-timeline {
  padding: 14px 15px;
}
.my-smart-buy-details .smart-buy-timeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-bottom: 16px;
}
.my-smart-buy-details .smart-buy-timeline__item:last-child {
  padding-bottom: 0;
}
.my-smart-buy-details .smart-buy-timeline__item:last-child::after {
  display: none;
}
.my-smart-buy-details .smart-buy-timeline__item::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 8px;
  width: 1px;
  height: calc(100% - 12px);
  background: rgba(13, 43, 90, 0.12);
}
.my-smart-buy-details .smart-buy-timeline__item > div:last-child {
  min-width: 0;
}
.my-smart-buy-details .smart-buy-timeline__item strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.my-smart-buy-details .smart-buy-timeline__item span {
  display: block;
  color: rgba(85, 85, 85, 0.6);
  font-size: 14px;
  line-height: 1.4;
}
.my-smart-buy-details .smart-buy-timeline__item.is-active .smart-buy-timeline__marker {
  color: #fff;
  background: #198754;
  border-color: #198754;
}
.my-smart-buy-details .smart-buy-timeline__marker {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: rgba(85, 85, 85, 0.5);
  background: #fff;
  border: 1px solid rgba(13, 43, 90, 0.14);
  border-radius: 50%;
}
.my-smart-buy-details .smart-buy-timeline__marker i {
  font-size: 14px;
  line-height: 1;
}
.my-smart-buy-details .smart-buy-cancelled-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  color: #dc3545;
  background: rgba(220, 53, 69, 0.04);
  border-color: rgba(220, 53, 69, 0.15);
}
.my-smart-buy-details .smart-buy-cancelled-notice > i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 16px;
}
.my-smart-buy-details .smart-buy-cancelled-notice strong {
  display: block;
  margin-bottom: 3px;
  color: #dc3545;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-details .smart-buy-cancelled-notice p {
  margin: 0;
  color: rgba(85, 85, 85, 0.72);
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .my-smart-buy-details .smart-buy-details__grid {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  .my-smart-buy-details .smart-buy-details__sidebar {
    position: static;
  }
  .my-smart-buy-details .smart-buy-shipment-info {
    grid-template-columns: repeat(2, 1fr);
  }
  .my-smart-buy-details .smart-buy-shipment-info__item {
    border-bottom: 1px solid rgba(13, 43, 90, 0.07);
  }
  .my-smart-buy-details .smart-buy-shipment-info__item:nth-child(2n) {
    border-right: 0;
  }
  .my-smart-buy-details .smart-buy-shipment-info__item:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .my-smart-buy-details {
    padding: 8px;
  }
  .my-smart-buy-details .smart-buy-details__grid {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-details .smart-buy-details__sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
  .my-smart-buy-details .smart-buy-cancelled-notice {
    grid-column: 1/-1;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .my-smart-buy-details .smart-buy-details__header {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }
  .my-smart-buy-details .smart-buy-details__status {
    width: 100%;
  }
  .my-smart-buy-details .smart-buy-status {
    justify-content: center;
  }
  .my-smart-buy-details .smart-buy-progress-card__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .my-smart-buy-details .smart-buy-progress-card__percentage {
    align-self: flex-start;
  }
  .my-smart-buy-details .smart-buy-details__sidebar {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-details .smart-buy-cancelled-notice {
    grid-column: auto;
  }
  .my-smart-buy-details .smart-buy-payment-required {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .my-smart-buy-details .smart-buy-payment-required .smart-buy-btn {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .my-smart-buy-details {
    padding: 0;
  }
  .my-smart-buy-details .smart-buy-details__header {
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
  }
  .my-smart-buy-details .smart-buy-details__title-wrap {
    align-items: flex-start;
  }
  .my-smart-buy-details .smart-buy-details__title-wrap h2 {
    font-size: 16px;
  }
  .my-smart-buy-details .smart-buy-progress-card {
    border-radius: 10px;
  }
  .my-smart-buy-details .smart-buy-progress-card__header {
    padding: 14px;
  }
  .my-smart-buy-details .smart-buy-progress-card__heading {
    align-items: flex-start;
  }
  .my-smart-buy-details .smart-buy-progress {
    padding: 16px 10px;
  }
  .my-smart-buy-details .smart-buy-progress__line {
    width: 90%;
  }
  .my-smart-buy-details .smart-buy-progress__steps {
    margin-top: -10px;
  }
  .my-smart-buy-details .smart-buy-progress__circle {
    width: 20px;
    height: 20px;
  }
  .my-smart-buy-details .smart-buy-progress__circle i {
    font-size: 14px;
  }
  .my-smart-buy-details .smart-buy-progress__label {
    margin-top: 7px;
    font-size: 14px;
    word-break: break-word;
  }
  .my-smart-buy-details .smart-buy-progress__current {
    display: none;
  }
  .my-smart-buy-details .smart-buy-progress__status {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
  }
  .my-smart-buy-details .smart-buy-details-card {
    border-radius: 10px;
  }
  .my-smart-buy-details .smart-buy-details-card__header {
    min-height: auto;
    align-items: flex-start;
    padding: 13px 14px;
  }
  .my-smart-buy-details .smart-buy-details-card__actions {
    padding: 12px 14px;
  }
  .my-smart-buy-details .smart-buy-details-card__actions .smart-buy-btn {
    width: 100%;
  }
  .my-smart-buy-details .smart-buy-request-info,
  .my-smart-buy-details .smart-buy-payment-info {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-details .smart-buy-request-info__item,
  .my-smart-buy-details .smart-buy-request-info > div,
  .my-smart-buy-details .smart-buy-payment-info__item,
  .my-smart-buy-details .smart-buy-payment-info > div {
    min-height: auto;
    padding: 12px 14px;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(13, 43, 90, 0.07) !important;
  }
  .my-smart-buy-details .smart-buy-request-info__item:last-child,
  .my-smart-buy-details .smart-buy-request-info > div:last-child,
  .my-smart-buy-details .smart-buy-payment-info__item:last-child,
  .my-smart-buy-details .smart-buy-payment-info > div:last-child {
    border-bottom: 0 !important;
  }
  .my-smart-buy-details .smart-buy-product {
    gap: 10px;
    padding: 13px 14px;
  }
  .my-smart-buy-details .smart-buy-product__image {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
  .my-smart-buy-details .smart-buy-quote-summary__row {
    padding: 10px 14px;
  }
  .my-smart-buy-details .smart-buy-quote-note {
    margin: 12px 14px 0;
  }
  .my-smart-buy-details .smart-buy-payment-required {
    padding: 14px;
  }
  .my-smart-buy-details .smart-buy-shipment-section {
    padding: 13px 14px;
  }
  .my-smart-buy-details .smart-buy-shipment-info {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-details .smart-buy-shipment-info__item {
    min-height: auto;
    padding: 11px;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(13, 43, 90, 0.07) !important;
  }
  .my-smart-buy-details .smart-buy-shipment-info__item:last-child {
    border-bottom: 0 !important;
  }
  .my-smart-buy-details .smart-buy-delivery-address {
    padding: 12px;
  }
  .my-smart-buy-details .smart-buy-shipment-notes {
    margin: 0 14px 12px;
  }
  .my-smart-buy-details .smart-buy-sidebar-card {
    border-radius: 10px;
  }
}

.my-smart-buy-quote {
  font-family: "Poppins", sans-serif;
  /*
  |--------------------------------------------------------------------------
  | Page Header
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.my-smart-buy-quote .page-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.my-smart-buy-quote .page-header-content {
  min-width: 0;
}
.my-smart-buy-quote .back-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #fff;
  color: #0D2B5A;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-quote .back-btn i {
  font-size: 20px;
  line-height: 1;
}
.my-smart-buy-quote .back-btn:hover {
  color: #177245;
  -webkit-transform: translateX(-2px);
  -ms-transform: translateX(-2px);
  transform: translateX(-2px);
}
.my-smart-buy-quote .page-label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #555555;
}
.my-smart-buy-quote .page-header h1 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: #0D2B5A;
}
.my-smart-buy-quote .quote-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-quote .quote-status i {
  font-size: 18px;
  line-height: 1;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Layout
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 24px;
  align-items: start;
}
.my-smart-buy-quote .quote-main-content {
  min-width: 0;
}
.my-smart-buy-quote .quote-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Common Cards
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .quote-card {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  background: #fff;
}
.my-smart-buy-quote .quote-card:last-child {
  margin-bottom: 0;
}
.my-smart-buy-quote .card-header {
  padding: 20px;
  border-bottom: 1px solid #eaecf0;
}
.my-smart-buy-quote .card-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.my-smart-buy-quote .card-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.my-smart-buy-quote .card-icon i {
  font-size: 20px;
  line-height: 1;
}
.my-smart-buy-quote .card-title h2 {
  margin: 0 0 4px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: #0D2B5A;
}
.my-smart-buy-quote .card-title p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Quote Summary
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .quote-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.my-smart-buy-quote .summary-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px;
  border-right: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
}
.my-smart-buy-quote .summary-item:nth-child(2n) {
  border-right: 0;
}
.my-smart-buy-quote .summary-item:nth-last-child(-n+2) {
  border-bottom: 0;
}
.my-smart-buy-quote .summary-item span {
  font-size: 14px;
  line-height: 1.4;
  color: #555555;
}
.my-smart-buy-quote .summary-item strong {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: #0D2B5A;
}
.my-smart-buy-quote .status-text {
  text-transform: capitalize;
}
.my-smart-buy-quote .status-text.status-sent {
  color: #0dcaf0;
}
.my-smart-buy-quote .status-text.status-accepted {
  color: #198754;
}
.my-smart-buy-quote .status-text.status-rejected {
  color: #dc3545;
}
.my-smart-buy-quote .status-text.status-expired {
  color: #ffc107;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Products
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .products-list {
  display: flex;
  flex-direction: column;
}
.my-smart-buy-quote .product-item {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) minmax(120px, auto);
  gap: 20px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eaecf0;
}
.my-smart-buy-quote .product-item:last-child {
  border-bottom: 0;
}
.my-smart-buy-quote .product-image {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #F2F4F7;
}
.my-smart-buy-quote .product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.my-smart-buy-quote .product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
}
.my-smart-buy-quote .product-placeholder i {
  font-size: 24px;
}
.my-smart-buy-quote .product-info {
  min-width: 0;
}
.my-smart-buy-quote .product-info h3 {
  margin: 0 0 7px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: #0D2B5A;
}
.my-smart-buy-quote .product-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-quote .product-link i {
  font-size: 16px;
}
.my-smart-buy-quote .product-link:hover {
  opacity: 0.75;
}
.my-smart-buy-quote .product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.my-smart-buy-quote .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
}
.my-smart-buy-quote .meta-item i {
  font-size: 16px;
  color: #ddd;
}
.my-smart-buy-quote .meta-item strong {
  font-weight: 600;
  color: #0D2B5A;
}
.my-smart-buy-quote .product-notes {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}
.my-smart-buy-quote .product-notes i {
  margin-top: 2px;
  font-size: 16px;
  color: #ddd;
}
.my-smart-buy-quote .product-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 120px;
}
.my-smart-buy-quote .product-price > span {
  font-size: 14px;
  color: #555555;
}
.my-smart-buy-quote .product-price > strong {
  font-size: 16px;
  font-weight: 600;
  color: #0D2B5A;
}
.my-smart-buy-quote .product-price-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eaecf0;
}
.my-smart-buy-quote .product-price-total span {
  font-size: 14px;
  color: #555555;
}
.my-smart-buy-quote .product-price-total strong {
  font-size: 16px;
  font-weight: 700;
  color: #177245;
}
.my-smart-buy-quote .empty-state {
  padding: 40px 20px;
  text-align: center;
  color: #555555;
}
.my-smart-buy-quote .empty-state i {
  display: block;
  margin-bottom: 10px;
  font-size: 24px;
}
.my-smart-buy-quote .empty-state p {
  margin: 0;
  font-size: 14px;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Quote Notes
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .quote-notes {
  padding: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #555555;
  white-space: pre-line;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Price Breakdown
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .price-card {
  margin-bottom: 0;
}
.my-smart-buy-quote .price-breakdown {
  padding: 20px;
}
.my-smart-buy-quote .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.my-smart-buy-quote .price-row span {
  font-size: 14px;
  color: #555555;
}
.my-smart-buy-quote .price-row strong {
  font-size: 14px;
  font-weight: 600;
  color: #0D2B5A;
  text-align: right;
}
.my-smart-buy-quote .price-divider {
  height: 1px;
  margin: 18px 0;
  background: #eaecf0;
}
.my-smart-buy-quote .price-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.my-smart-buy-quote .price-total span {
  font-size: 16px;
  font-weight: 600;
  color: #0D2B5A;
}
.my-smart-buy-quote .price-total strong {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: #177245;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Quote Actions
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .quote-action-card {
  margin-bottom: 0;
}
.my-smart-buy-quote .quote-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}
.my-smart-buy-quote .quote-actions form {
  width: 100%;
  margin: 0;
}
.my-smart-buy-quote .quote-btn {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 16px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-quote .quote-btn i {
  font-size: 18px;
  line-height: 1;
}
.my-smart-buy-quote .quote-btn:hover {
  opacity: 0.9;
}
.my-smart-buy-quote .quote-btn-success {
  background: #198754;
  color: #fff;
}
.my-smart-buy-quote .quote-btn-danger {
  background: #dc3545;
  color: #fff;
}
.my-smart-buy-quote .quote-btn-light {
  border-color: #eaecf0;
  background: #fff;
  color: #0D2B5A;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Reject Form
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .reject-quote-box {
  padding: 0 20px 20px;
}
.my-smart-buy-quote .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my-smart-buy-quote .form-group label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: #0D2B5A;
}
.my-smart-buy-quote .form-group label small {
  font-size: 14px;
  font-weight: 400;
  color: #555555;
}
.my-smart-buy-quote .form-group textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  padding: 12px;
  outline: 0;
  resize: vertical;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-quote .form-group textarea::-webkit-input-placeholder {
  color: #ddd;
}
.my-smart-buy-quote .form-group textarea:-moz-placeholder {
  color: #ddd;
}
.my-smart-buy-quote .form-group textarea::-moz-placeholder {
  color: #ddd;
}
.my-smart-buy-quote .form-group textarea:-ms-input-placeholder {
  color: #ddd;
}
.my-smart-buy-quote .form-group textarea:focus {
  border-color: #dc3545;
}
.my-smart-buy-quote .text-danger {
  font-size: 14px;
  color: #dc3545;
}
.my-smart-buy-quote .reject-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-direction: column;
}
.my-smart-buy-quote .reject-form-actions .quote-btn {
  flex: 1;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Decision Cards
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .quote-decision-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  margin-bottom: 0;
}
.my-smart-buy-quote .quote-decision-card > i {
  flex-shrink: 0;
  font-size: 24px;
}
.my-smart-buy-quote .quote-decision-card h3 {
  margin: 0 0 4px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: #0D2B5A;
}
.my-smart-buy-quote .quote-decision-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}
.my-smart-buy-quote .quote-decision-card.accepted > i {
  color: #198754;
}
.my-smart-buy-quote .quote-decision-card.rejected > i {
  color: #dc3545;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Help Card
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-quote .help-card {
  padding: 22px;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  background: #fff;
}
.my-smart-buy-quote .help-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #F2F4F7;
  color: #0D2B5A;
}
.my-smart-buy-quote .help-icon i {
  font-size: 20px;
}
.my-smart-buy-quote .help-card h3 {
  margin: 0 0 8px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0D2B5A;
}
.my-smart-buy-quote .help-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}
.my-smart-buy-quote {
  /*
  |--------------------------------------------------------------------------
  | Responsive
  |--------------------------------------------------------------------------
  */
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .my-smart-buy-quote .quote-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .my-smart-buy-quote .quote-layout {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-quote .quote-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .my-smart-buy-quote .help-card {
    grid-column: span 2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .my-smart-buy-quote .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .my-smart-buy-quote .quote-status {
    align-self: flex-start;
  }
  .my-smart-buy-quote .product-item {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  .my-smart-buy-quote .product-image {
    width: 80px;
    height: 80px;
  }
  .my-smart-buy-quote .product-price {
    grid-column: 2;
    align-items: flex-start;
    margin-top: 4px;
  }
  .my-smart-buy-quote .product-price-total {
    align-items: flex-start;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .my-smart-buy-quote .quote-sidebar {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-quote .help-card {
    grid-column: auto;
  }
  .my-smart-buy-quote .quote-summary-grid {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-quote .summary-item {
    border-right: 0;
  }
  .my-smart-buy-quote .summary-item:nth-last-child(-n+2) {
    border-bottom: 1px solid #eaecf0;
  }
  .my-smart-buy-quote .summary-item:last-child {
    border-bottom: 0;
  }
  .my-smart-buy-quote .reject-form-actions {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .my-smart-buy-quote .page-header {
    gap: 16px;
    margin-bottom: 20px;
  }
  .my-smart-buy-quote .page-header-left {
    align-items: flex-start;
  }
  .my-smart-buy-quote .back-btn {
    width: 40px;
    height: 40px;
  }
  .my-smart-buy-quote .page-header h1 {
    font-size: 20px;
  }
  .my-smart-buy-quote .card-header,
  .my-smart-buy-quote .price-breakdown,
  .my-smart-buy-quote .quote-notes {
    padding: 16px;
  }
  .my-smart-buy-quote .product-item {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .my-smart-buy-quote .product-image {
    width: 100%;
    height: 200px;
  }
  .my-smart-buy-quote .product-price {
    grid-column: auto;
    align-items: flex-start;
  }
  .my-smart-buy-quote .product-price-total {
    align-items: flex-start;
  }
  .my-smart-buy-quote .product-meta {
    flex-direction: column;
    gap: 8px;
  }
  .my-smart-buy-quote .quote-actions {
    padding: 16px;
  }
  .my-smart-buy-quote .reject-quote-box {
    padding: 0 16px 16px;
  }
  .my-smart-buy-quote .price-total strong {
    font-size: 20px;
  }
}

.my-smart-buy-tracking-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: "Poppins", sans-serif;
  /*
  |--------------------------------------------------------------------------
  | Page Header
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
}
.my-smart-buy-tracking-page__header-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.my-smart-buy-tracking-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-tracking-page__back:hover {
  color: #177245;
}
.my-smart-buy-tracking-page__title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.my-smart-buy-tracking-page__title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  font-size: 20px;
}
.my-smart-buy-tracking-page__title h1 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.my-smart-buy-tracking-page__title p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Smart Buy Request Number
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__request {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  background: #F2F4F7;
}
.my-smart-buy-tracking-page__request span {
  color: #555555;
  font-size: 13px;
}
.my-smart-buy-tracking-page__request strong {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Status Card
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__status-card {
  padding: 24px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
}
.my-smart-buy-tracking-page__status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.my-smart-buy-tracking-page__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #555555;
  font-size: 14px;
}
.my-smart-buy-tracking-page__status-header h2 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
}
.my-smart-buy-tracking-page__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
  font-size: 14px;
  font-weight: 500;
}
.my-smart-buy-tracking-page__status-badge span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.my-smart-buy-tracking-page__status-badge--delivered {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.my-smart-buy-tracking-page__status-badge--cancelled {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.my-smart-buy-tracking-page__status-badge--pending, .my-smart-buy-tracking-page__status-badge--preparing {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Shipment Number
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__shipment-number {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #eaecf0;
}
.my-smart-buy-tracking-page__shipment-number span {
  color: #555555;
  font-size: 14px;
}
.my-smart-buy-tracking-page__shipment-number strong {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Admin Tracking Information
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__tracking-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eaecf0;
}
.my-smart-buy-tracking-page__tracking-number span {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
}
.my-smart-buy-tracking-page__tracking-number strong {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 600;
  word-break: break-all;
}
.my-smart-buy-tracking-page__copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 16px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-tracking-page__copy-btn:hover {
  border-color: #177245;
  color: #177245;
}
.my-smart-buy-tracking-page__copy-btn.is-copied {
  border-color: #198754;
  color: #198754;
}
.my-smart-buy-tracking-page__tracking-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: #177245;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-tracking-page__tracking-link:hover {
  color: #D4AF37;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Common Cards
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__progress-card, .my-smart-buy-tracking-page__details-card, .my-smart-buy-tracking-page__address-card, .my-smart-buy-tracking-page__products-card, .my-smart-buy-tracking-page__cancelled-card {
  padding: 24px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
}
.my-smart-buy-tracking-page__card-heading {
  margin-bottom: 24px;
}
.my-smart-buy-tracking-page__card-heading h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
}
.my-smart-buy-tracking-page__card-heading p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Timeline
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__timeline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
.my-smart-buy-tracking-page__timeline-item {
  position: relative;
  flex: 1;
  text-align: center;
}
.my-smart-buy-tracking-page__timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(50% + 28px);
  width: calc(100% - 56px);
  height: 2px;
  background: #eaecf0;
}
.my-smart-buy-tracking-page__timeline-item.is-completed::after {
  background: #198754;
}
.my-smart-buy-tracking-page__timeline-item.is-completed .my-smart-buy-tracking-page__timeline-marker {
  background: #198754;
  color: #fff;
}
.my-smart-buy-tracking-page__timeline-item.is-current .my-smart-buy-tracking-page__timeline-marker {
  background: #177245;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(23, 114, 69, 0.1);
}
.my-smart-buy-tracking-page__timeline-marker {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #F2F4F7;
  color: #ddd;
  font-size: 16px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-tracking-page__timeline-content h3 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-tracking-page__timeline-content p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Main Grid
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Shipment Details
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__details-list {
  display: flex;
  flex-direction: column;
}
.my-smart-buy-tracking-page__detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #eaecf0;
}
.my-smart-buy-tracking-page__detail-item:first-child {
  padding-top: 0;
}
.my-smart-buy-tracking-page__detail-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.my-smart-buy-tracking-page__detail-item span {
  color: #555555;
  font-size: 14px;
}
.my-smart-buy-tracking-page__detail-item strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Address
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__address {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.my-smart-buy-tracking-page__address-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  font-size: 18px;
}
.my-smart-buy-tracking-page__address strong,
.my-smart-buy-tracking-page__address span {
  display: block;
}
.my-smart-buy-tracking-page__address strong {
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
.my-smart-buy-tracking-page__address span {
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Products
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.my-smart-buy-tracking-page__product {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  background: #fff;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.my-smart-buy-tracking-page__product:hover {
  border-color: rgba(23, 114, 69, 0.4);
}
.my-smart-buy-tracking-page__product-image {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 10px;
  background: #F2F4F7;
}
.my-smart-buy-tracking-page__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.my-smart-buy-tracking-page__product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #ddd;
  font-size: 18px;
}
.my-smart-buy-tracking-page__product-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.my-smart-buy-tracking-page__product-content h3 {
  margin: 0 0 8px;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Product Meta
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #555555;
  font-size: 13px;
}
.my-smart-buy-tracking-page__product-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Product Pricing
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__product-pricing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eaecf0;
}
.my-smart-buy-tracking-page__product-price {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.my-smart-buy-tracking-page__product-price span {
  color: #555555;
  font-size: 12px;
}
.my-smart-buy-tracking-page__product-price strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.my-smart-buy-tracking-page__product-total {
  text-align: right;
}
.my-smart-buy-tracking-page__product-total span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 12px;
}
.my-smart-buy-tracking-page__product-total strong {
  color: #177245;
  font-size: 16px;
  font-weight: 600;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Order Summary
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__products-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eaecf0;
}
.my-smart-buy-tracking-page__products-summary-label {
  color: #555555;
  font-size: 14px;
}
.my-smart-buy-tracking-page__products-summary-total {
  color: #0D2B5A;
  font-size: 20px;
  font-weight: 600;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Cancelled
  |--------------------------------------------------------------------------
  */
}
.my-smart-buy-tracking-page__cancelled-card {
  display: flex;
  align-items: center;
  gap: 16px;
}
.my-smart-buy-tracking-page__cancelled-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  font-size: 20px;
}
.my-smart-buy-tracking-page__cancelled-card h2 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 18px;
  font-weight: 600;
}
.my-smart-buy-tracking-page__cancelled-card p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.my-smart-buy-tracking-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  grid-column: 1/-1;
  min-height: 160px;
  color: #555555;
  font-size: 14px;
}
.my-smart-buy-tracking-page__empty i {
  color: #ddd;
  font-size: 24px;
}
.my-smart-buy-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | Responsive
  |--------------------------------------------------------------------------
  */
}
@media (min-width: 992px) and (max-width: 1199px) {
  .my-smart-buy-tracking-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .my-smart-buy-tracking-page__request {
    align-items: flex-start;
  }
  .my-smart-buy-tracking-page__timeline {
    flex-direction: column;
    gap: 20px;
  }
  .my-smart-buy-tracking-page__timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }
  .my-smart-buy-tracking-page__timeline-item:not(:last-child)::after {
    top: 50px;
    left: 21px;
    width: 2px;
    height: calc(100% - 22px);
  }
  .my-smart-buy-tracking-page__timeline-marker {
    flex-shrink: 0;
    margin: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .my-smart-buy-tracking-page__grid {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-tracking-page__product-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .my-smart-buy-tracking-page {
    gap: 16px;
  }
  .my-smart-buy-tracking-page__header, .my-smart-buy-tracking-page__status-card, .my-smart-buy-tracking-page__progress-card, .my-smart-buy-tracking-page__details-card, .my-smart-buy-tracking-page__address-card, .my-smart-buy-tracking-page__products-card, .my-smart-buy-tracking-page__cancelled-card {
    padding: 18px;
    border-radius: 12px;
  }
  .my-smart-buy-tracking-page__title {
    align-items: flex-start;
  }
  .my-smart-buy-tracking-page__title-icon {
    width: 46px;
    height: 46px;
  }
  .my-smart-buy-tracking-page__title h1 {
    font-size: 21px;
  }
  .my-smart-buy-tracking-page__status-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .my-smart-buy-tracking-page__tracking-number {
    align-items: flex-start;
    flex-direction: column;
  }
  .my-smart-buy-tracking-page__copy-btn {
    width: 100%;
  }
  .my-smart-buy-tracking-page__detail-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .my-smart-buy-tracking-page__detail-item strong {
    text-align: left;
  }
  .my-smart-buy-tracking-page__product {
    gap: 12px;
    padding: 14px;
  }
  .my-smart-buy-tracking-page__product-image {
    width: 60px;
    height: 60px;
  }
  .my-smart-buy-tracking-page__product-content h3 {
    white-space: normal;
  }
  .my-smart-buy-tracking-page__product-pricing {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .my-smart-buy-tracking-page__product-total {
    text-align: left;
  }
  .my-smart-buy-tracking-page__products-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .my-smart-buy-tracking-page__cancelled-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

.smart-buy-payment-page {
  width: 100%;
}
.smart-buy-payment-page .smart-buy-payment-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.smart-buy-payment-page .smart-buy-payment-page__heading {
  display: flex;
  align-items: center;
  gap: 16px;
}
.smart-buy-payment-page .smart-buy-payment-page__heading-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  border-radius: 14px;
}
.smart-buy-payment-page .smart-buy-payment-page__heading-icon i {
  font-size: 24px;
}
.smart-buy-payment-page .smart-buy-payment-page__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.smart-buy-payment-page .smart-buy-payment-page__heading h1 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.smart-buy-payment-page .smart-buy-payment-page__heading p {
  margin: 4px 0 0;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.smart-buy-payment-page .smart-buy-payment-page__heading p strong {
  color: #0D2B5A;
  font-weight: 600;
}
.smart-buy-payment-page .smart-buy-payment-page__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-payment-page .smart-buy-payment-page__back-btn i {
  font-size: 18px;
}
.smart-buy-payment-page .smart-buy-payment-page__back-btn:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Alerts
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 18px;
  margin-bottom: 24px;
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.smart-buy-payment-page .smart-buy-payment-page__alert-icon i {
  font-size: 20px;
}
.smart-buy-payment-page .smart-buy-payment-page__alert--success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.smart-buy-payment-page .smart-buy-payment-page__alert--error {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Layout
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.smart-buy-payment-page .smart-buy-payment-page__main {
  min-width: 0;
}
.smart-buy-payment-page .smart-buy-payment-page__sidebar {
  min-width: 0;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Cards
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__card {
  margin-bottom: 24px;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.smart-buy-payment-page .smart-buy-payment-page__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 20px 24px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-payment-page .smart-buy-payment-page__card-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.smart-buy-payment-page .smart-buy-payment-page__card-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
}
.smart-buy-payment-page .smart-buy-payment-page__card-icon i {
  font-size: 20px;
}
.smart-buy-payment-page .smart-buy-payment-page__card-title h2 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.smart-buy-payment-page .smart-buy-payment-page__card-title p {
  margin: 2px 0 0;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Request Information
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #eaecf0;
}
.smart-buy-payment-page .smart-buy-payment-page__info-item {
  padding: 20px 24px;
  background: #fff;
}
.smart-buy-payment-page .smart-buy-payment-page__info-item span {
  display: block;
  margin-bottom: 6px;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.smart-buy-payment-page .smart-buy-payment-page__info-item strong {
  display: block;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  word-break: break-word;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Quote Items
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__item-count {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.smart-buy-payment-page .smart-buy-payment-page__items {
  padding: 8px 24px;
}
.smart-buy-payment-page .smart-buy-payment-page__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-payment-page .smart-buy-payment-page__item:last-child {
  border-bottom: 0;
}
.smart-buy-payment-page .smart-buy-payment-page__item-left {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.smart-buy-payment-page .smart-buy-payment-page__item-image {
  width: 72px;
  height: 72px;
  min-width: 72px;
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  background: #F2F4F7;
}
.smart-buy-payment-page .smart-buy-payment-page__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.smart-buy-payment-page .smart-buy-payment-page__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
}
.smart-buy-payment-page .smart-buy-payment-page__image-placeholder i {
  font-size: 24px;
}
.smart-buy-payment-page .smart-buy-payment-page__item-content {
  min-width: 0;
}
.smart-buy-payment-page .smart-buy-payment-page__item-content h3 {
  margin: 0 0 8px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.smart-buy-payment-page .smart-buy-payment-page__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.smart-buy-payment-page .smart-buy-payment-page__item-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.smart-buy-payment-page .smart-buy-payment-page__item-meta span i {
  color: #177245;
  font-size: 16px;
}
.smart-buy-payment-page .smart-buy-payment-page__item-meta span strong {
  color: #0D2B5A;
  font-weight: 600;
}
.smart-buy-payment-page .smart-buy-payment-page__item-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.smart-buy-payment-page .smart-buy-payment-page__item-note i {
  margin-top: 2px;
  color: #177245;
  font-size: 16px;
}
.smart-buy-payment-page .smart-buy-payment-page__item-total {
  min-width: 130px;
  text-align: right;
}
.smart-buy-payment-page .smart-buy-payment-page__item-total span {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.smart-buy-payment-page .smart-buy-payment-page__item-total strong {
  display: block;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Empty State
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__empty-state {
  padding: 40px 20px;
  text-align: center;
}
.smart-buy-payment-page .smart-buy-payment-page__empty-state strong {
  display: block;
  margin-top: 12px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}
.smart-buy-payment-page .smart-buy-payment-page__empty-state p {
  margin: 6px 0 0;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.smart-buy-payment-page .smart-buy-payment-page__empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #F2F4F7;
  color: #ddd;
}
.smart-buy-payment-page .smart-buy-payment-page__empty-icon i {
  font-size: 24px;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Notice
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(13, 202, 240, 0.2);
  border-radius: 14px;
  background: rgba(13, 202, 240, 0.06);
}
.smart-buy-payment-page .smart-buy-payment-page__notice-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(13, 202, 240, 0.12);
  color: #0dcaf0;
}
.smart-buy-payment-page .smart-buy-payment-page__notice-icon i {
  font-size: 20px;
}
.smart-buy-payment-page .smart-buy-payment-page__notice h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.smart-buy-payment-page .smart-buy-payment-page__notice p {
  margin: 0;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.7;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Summary Card
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__summary-card {
  border: 1px solid #eaecf0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  position: sticky;
  top: 20px;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 22px 24px;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-header span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-header h2 {
  margin: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(23, 114, 69, 0.1);
  color: #177245;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-icon i {
  font-size: 22px;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-body {
  padding: 8px 24px;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid #eaecf0;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-row:last-child {
  border-bottom: 0;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-row span {
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.smart-buy-payment-page .smart-buy-payment-page__summary-row strong {
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.smart-buy-payment-page .smart-buy-payment-page__total {
  padding: 20px 24px;
  background: rgba(23, 114, 69, 0.06);
  border-top: 1px solid rgba(23, 114, 69, 0.1);
  border-bottom: 1px solid rgba(23, 114, 69, 0.1);
}
.smart-buy-payment-page .smart-buy-payment-page__total span {
  display: block;
  margin-bottom: 6px;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.smart-buy-payment-page .smart-buy-payment-page__total strong {
  display: block;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
}
.smart-buy-payment-page .smart-buy-payment-page__payment-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 24px;
}
.smart-buy-payment-page .smart-buy-payment-page__payment-info p {
  margin: 0;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.smart-buy-payment-page .smart-buy-payment-page__payment-info-icon {
  color: #0dcaf0;
}
.smart-buy-payment-page .smart-buy-payment-page__payment-info-icon i {
  font-size: 18px;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Payment Actions
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__payment-form {
  padding: 0 24px;
}
.smart-buy-payment-page .smart-buy-payment-page__pay-btn {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #177245;
  border-radius: 10px;
  background: #177245;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-payment-page .smart-buy-payment-page__pay-btn i {
  font-size: 20px;
}
.smart-buy-payment-page .smart-buy-payment-page__pay-btn:hover {
  background: #D4AF37;
  border-color: #D4AF37;
}
.smart-buy-payment-page .smart-buy-payment-page__quote-link {
  width: calc(100% - 48px);
  min-height: 44px;
  margin: 14px 24px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.smart-buy-payment-page .smart-buy-payment-page__quote-link i {
  font-size: 18px;
}
.smart-buy-payment-page .smart-buy-payment-page__quote-link:hover {
  border-color: #177245;
  color: #177245;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Help Card
  |--------------------------------------------------------------------------
  */
}
.smart-buy-payment-page .smart-buy-payment-page__help-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  background: #fff;
}
.smart-buy-payment-page .smart-buy-payment-page__help-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #F2F4F7;
  color: #177245;
}
.smart-buy-payment-page .smart-buy-payment-page__help-icon i {
  font-size: 20px;
}
.smart-buy-payment-page .smart-buy-payment-page__help-card h3 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.smart-buy-payment-page .smart-buy-payment-page__help-card p {
  margin: 0;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.smart-buy-payment-page {
  /*
  |--------------------------------------------------------------------------
  | Responsive
  |--------------------------------------------------------------------------
  */
}
@media (min-width: 992px) and (max-width: 1199px) {
  .smart-buy-payment-page .smart-buy-payment-page__layout {
    grid-template-columns: 1fr;
  }
  .smart-buy-payment-page .smart-buy-payment-page__summary-card {
    position: static;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smart-buy-payment-page .smart-buy-payment-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-payment-page .smart-buy-payment-page__back-btn {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .smart-buy-payment-page .smart-buy-payment-page__header {
    margin-bottom: 20px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__heading {
    align-items: flex-start;
  }
  .smart-buy-payment-page .smart-buy-payment-page__heading-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__card-header {
    padding: 16px;
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-payment-page .smart-buy-payment-page__info-grid {
    grid-template-columns: 1fr;
  }
  .smart-buy-payment-page .smart-buy-payment-page__info-item {
    padding: 16px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__items {
    padding: 6px 16px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__item {
    align-items: flex-start;
    flex-direction: column;
  }
  .smart-buy-payment-page .smart-buy-payment-page__item-left {
    width: 100%;
    align-items: flex-start;
  }
  .smart-buy-payment-page .smart-buy-payment-page__item-image {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__item-total {
    width: 100%;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid #eaecf0;
    text-align: left;
  }
  .smart-buy-payment-page .smart-buy-payment-page__summary-header {
    padding: 18px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__summary-body {
    padding: 8px 18px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__total {
    padding: 18px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__payment-info {
    padding: 15px 18px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__payment-form {
    padding: 0 18px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__quote-link {
    width: calc(100% - 36px);
    margin-right: 18px;
    margin-left: 18px;
  }
  .smart-buy-payment-page .smart-buy-payment-page__help-card {
    padding: 18px;
  }
}

/*==================================================
| Page
==================================================*/
.my-smart-buy-payment-result-page {
  width: 100%;
}

/*==================================================
| Header
==================================================*/
.my-smart-buy-payment-result-header {
  margin-bottom: 15px;
}

.my-smart-buy-payment-result-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.my-smart-buy-payment-result-back:hover {
  color: #177245;
}

/*==================================================
| Main Success Card
==================================================*/
.my-smart-buy-payment-result-card {
  max-width: 760px;
  margin: 0 auto 15px;
  padding: 30px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(16, 26, 35, 0.035);
  text-align: center;
}

/*==================================================
| Success Icon
==================================================*/
.my-smart-buy-payment-result-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #e6f7ed;
  color: #2d8752;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-smart-buy-payment-result-icon i {
  font-size: 29px;
}

.my-smart-buy-payment-result-label {
  display: inline-block;
  margin-bottom: 7px;
  color: #2d8752;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.my-smart-buy-payment-result-card h1 {
  max-width: 600px;
  margin: 0 auto 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.my-smart-buy-payment-result-description {
  max-width: 570px;
  margin: 0 auto 20px;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*==================================================
| Summary
==================================================*/
.my-smart-buy-payment-result-summary {
  margin-bottom: 12px;
  border: 1px solid rgba(16, 26, 35, 0.065);
  border-radius: 9px;
  background: #fafbfc;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.my-smart-buy-payment-result-summary > div {
  min-height: 68px;
  padding: 10px;
  border-right: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.my-smart-buy-payment-result-summary > div:last-child {
  border-right: 0;
}

.my-smart-buy-payment-result-summary span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.my-smart-buy-payment-result-summary strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.my-smart-buy-payment-result-summary strong.is-success {
  color: #2d8752;
}

/*==================================================
| Payment Reference
==================================================*/
.my-smart-buy-payment-result-reference {
  min-height: 52px;
  margin-bottom: 13px;
  padding: 8px 10px;
  border: 1px solid rgba(16, 26, 35, 0.065);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.my-smart-buy-payment-result-reference > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.my-smart-buy-payment-result-reference span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.my-smart-buy-payment-result-reference strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.my-smart-buy-payment-result-copy {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(16, 26, 35, 0.08);
  border-radius: 6px;
  background: #fff;
  color: #555555;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}
.my-smart-buy-payment-result-copy:hover {
  background: #f7f8f9;
  color: #0D2B5A;
}

/*==================================================
| Next Step
==================================================*/
.my-smart-buy-payment-result-next {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(23, 114, 69, 0.12);
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.035);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
}

.my-smart-buy-payment-result-next__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-smart-buy-payment-result-next__icon i {
  font-size: 17px;
}

.my-smart-buy-payment-result-next > div:last-child {
  min-width: 0;
}

.my-smart-buy-payment-result-next strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.my-smart-buy-payment-result-next p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*==================================================
| Actions
==================================================*/
.my-smart-buy-payment-result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.my-smart-buy-payment-result-primary,
.my-smart-buy-payment-result-secondary {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}

.my-smart-buy-payment-result-primary {
  background: #177245;
  color: #fff;
}
.my-smart-buy-payment-result-primary:hover {
  background: rgba(23, 114, 69, 0.07);
  color: #fff;
}

.my-smart-buy-payment-result-secondary {
  border: 1px solid rgba(16, 26, 35, 0.08);
  background: #fff;
  color: #555555;
}
.my-smart-buy-payment-result-secondary:hover {
  background: #f7f8f9;
  color: #0D2B5A;
}

/*==================================================
| Info Grid
==================================================*/
.my-smart-buy-payment-result-info-grid {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.my-smart-buy-payment-result-info-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.025);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.my-smart-buy-payment-result-info-card__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-smart-buy-payment-result-info-card__icon i {
  font-size: 18px;
}

.my-smart-buy-payment-result-info-card > div:last-child {
  min-width: 0;
}

.my-smart-buy-payment-result-info-card span {
  display: block;
  margin-bottom: 2px;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.my-smart-buy-payment-result-info-card strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.my-smart-buy-payment-result-info-card p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}

.my-smart-buy-payment-result-info-card a {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/*==================================================
| Responsive MD
==================================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .my-smart-buy-payment-result-card {
    padding: 24px;
  }
  .my-smart-buy-payment-result-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .my-smart-buy-payment-result-summary > div {
    border-right: 0;
    border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  }
  .my-smart-buy-payment-result-summary > div:nth-child(odd) {
    border-right: 1px solid rgba(16, 26, 35, 0.055);
  }
  .my-smart-buy-payment-result-summary > div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}
/*==================================================
| Responsive XS
==================================================*/
@media (max-width: 767px) {
  .my-smart-buy-payment-result-card {
    padding: 18px 14px;
  }
  .my-smart-buy-payment-result-card h1 {
    font-size: 20px;
  }
  .my-smart-buy-payment-result-summary {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-payment-result-summary > div,
  .my-smart-buy-payment-result-summary > div:nth-child(odd) {
    border-right: 0;
    border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  }
  .my-smart-buy-payment-result-summary > div:last-child {
    border-bottom: 0;
  }
  .my-smart-buy-payment-result-reference {
    align-items: flex-start;
    flex-direction: column;
  }
  .my-smart-buy-payment-result-copy {
    align-self: flex-end;
  }
  .my-smart-buy-payment-result-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .my-smart-buy-payment-result-primary,
  .my-smart-buy-payment-result-secondary {
    width: 100%;
  }
  .my-smart-buy-payment-result-info-grid {
    grid-template-columns: 1fr;
  }
}
/*==================================================
| Page
==================================================*/
.my-smart-buy-payment-result-page {
  width: 100%;
}

/*==================================================
| Header
==================================================*/
.my-smart-buy-payment-result-header {
  margin-bottom: 15px;
}

.my-smart-buy-payment-result-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.my-smart-buy-payment-result-back:hover {
  color: #177245;
}

/*==================================================
| Result Card
==================================================*/
.my-smart-buy-payment-result-card {
  max-width: 760px;
  margin: 0 auto 15px;
  padding: 30px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(16, 26, 35, 0.035);
  text-align: center;
}

.my-smart-buy-payment-result-card.is-failed {
  border-color: rgba(220, 75, 75, 0.1);
}

/*==================================================
| Result Icon
==================================================*/
.my-smart-buy-payment-result-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #fdeaea;
  color: #dc4b4b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-smart-buy-payment-result-icon i {
  font-size: 29px;
}

.my-smart-buy-payment-result-label {
  display: inline-block;
  margin-bottom: 7px;
  color: #dc4b4b;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.my-smart-buy-payment-result-card h1 {
  max-width: 600px;
  margin: 0 auto 7px;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.my-smart-buy-payment-result-description {
  max-width: 570px;
  margin: 0 auto 18px;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*==================================================
| Failed Notice
==================================================*/
.my-smart-buy-payment-failed-notice {
  margin-bottom: 13px;
  padding: 11px 12px;
  border: 1px solid rgba(220, 75, 75, 0.13);
  border-radius: 8px;
  background: #fff7f7;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.my-smart-buy-payment-failed-notice__icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 7px;
  background: #fdeaea;
  color: #dc4b4b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-smart-buy-payment-failed-notice__icon i {
  font-size: 16px;
}

.my-smart-buy-payment-failed-notice > div:last-child {
  min-width: 0;
}

.my-smart-buy-payment-failed-notice strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.my-smart-buy-payment-failed-notice p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}

/*==================================================
| Summary
==================================================*/
.my-smart-buy-payment-result-summary {
  margin-bottom: 12px;
  border: 1px solid rgba(16, 26, 35, 0.065);
  border-radius: 9px;
  background: #fafbfc;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.my-smart-buy-payment-result-summary > div {
  min-height: 68px;
  padding: 10px;
  border-right: 1px solid rgba(16, 26, 35, 0.055);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.my-smart-buy-payment-result-summary > div:last-child {
  border-right: 0;
}

.my-smart-buy-payment-result-summary span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.my-smart-buy-payment-result-summary strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.my-smart-buy-payment-result-summary strong.is-failed {
  color: #dc4b4b;
}

/*==================================================
| Reference
==================================================*/
.my-smart-buy-payment-result-reference {
  min-height: 52px;
  margin-bottom: 15px;
  padding: 8px 10px;
  border: 1px solid rgba(16, 26, 35, 0.065);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.my-smart-buy-payment-result-reference > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.my-smart-buy-payment-result-reference span {
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.my-smart-buy-payment-result-reference strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.my-smart-buy-payment-failed-code {
  padding: 5px 8px;
  border-radius: 6px;
  background: #fdeaea;
  color: #dc4b4b !important;
  font-size: 14px !important;
  font-weight: 600;
}

/*==================================================
| Actions
==================================================*/
.my-smart-buy-payment-result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.my-smart-buy-payment-result-primary,
.my-smart-buy-payment-result-secondary {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}

.my-smart-buy-payment-result-primary.is-failed {
  background: #dc4b4b;
  color: #fff;
}
.my-smart-buy-payment-result-primary.is-failed:hover {
  background: rgba(220, 75, 75, 0.8);
  color: #fff;
}

.my-smart-buy-payment-result-secondary {
  border: 1px solid rgba(16, 26, 35, 0.08);
  background: #fff;
  color: #555555;
}
.my-smart-buy-payment-result-secondary:hover {
  background: #f7f8f9;
  color: #0D2B5A;
}

/*==================================================
| Info Grid
==================================================*/
.my-smart-buy-payment-result-info-grid {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.my-smart-buy-payment-result-info-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(16, 26, 35, 0.07);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(16, 26, 35, 0.025);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.my-smart-buy-payment-result-info-card__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-smart-buy-payment-result-info-card__icon i {
  font-size: 18px;
}

.my-smart-buy-payment-result-info-card > div:last-child {
  min-width: 0;
}

.my-smart-buy-payment-result-info-card span {
  display: block;
  margin-bottom: 2px;
  color: rgba(85, 85, 85, 0.2);
  font-size: 14px;
}

.my-smart-buy-payment-result-info-card strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.my-smart-buy-payment-result-info-card p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}

.my-smart-buy-payment-result-info-card a {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/*==================================================
| Failed Tips
==================================================*/
.my-smart-buy-payment-failed-tips {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.my-smart-buy-payment-failed-tips li {
  position: relative;
  padding-left: 14px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

.my-smart-buy-payment-failed-tips li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #dc4b4b;
}

/*==================================================
| Responsive MD
==================================================*/
@media (min-width: 768px) and (max-width: 991px) {
  .my-smart-buy-payment-result-card {
    padding: 24px;
  }
  .my-smart-buy-payment-result-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .my-smart-buy-payment-result-summary > div {
    border-right: 0;
    border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  }
  .my-smart-buy-payment-result-summary > div:nth-child(odd) {
    border-right: 1px solid rgba(16, 26, 35, 0.055);
  }
  .my-smart-buy-payment-result-summary > div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}
/*==================================================
| Responsive XS
==================================================*/
@media (max-width: 767px) {
  .my-smart-buy-payment-result-card {
    padding: 18px 14px;
  }
  .my-smart-buy-payment-result-card h1 {
    font-size: 20px;
  }
  .my-smart-buy-payment-result-summary {
    grid-template-columns: 1fr;
  }
  .my-smart-buy-payment-result-summary > div,
  .my-smart-buy-payment-result-summary > div:nth-child(odd) {
    border-right: 0;
    border-bottom: 1px solid rgba(16, 26, 35, 0.055);
  }
  .my-smart-buy-payment-result-summary > div:last-child {
    border-bottom: 0;
  }
  .my-smart-buy-payment-result-reference {
    align-items: flex-start;
    flex-direction: column;
  }
  .my-smart-buy-payment-failed-code {
    align-self: flex-end;
  }
  .my-smart-buy-payment-result-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .my-smart-buy-payment-result-primary,
  .my-smart-buy-payment-result-secondary {
    width: 100%;
  }
  .my-smart-buy-payment-result-info-grid {
    grid-template-columns: 1fr;
  }
}
/*
|--------------------------------------------------------------------------
| Customer Shop
|--------------------------------------------------------------------------
*/
.customer-shop-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/
.customer-shop-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 190px;
  margin-bottom: 18px;
  padding: 30px 34px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(23, 114, 69, 0.08), #ffffff 65%);
  border: 1px solid rgba(23, 114, 69, 0.12);
}

.customer-shop-hero__content {
  max-width: 620px;
}

.customer-shop-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-shop-hero__eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #177245;
}

.customer-shop-hero h1 {
  margin: 0 0 9px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.customer-shop-hero h1 strong {
  color: #177245;
  font-weight: 700;
}

.customer-shop-hero p {
  max-width: 560px;
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.65;
}

/*
|--------------------------------------------------------------------------
| Hero Stats
|--------------------------------------------------------------------------
*/
.customer-shop-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
}
.customer-shop-hero__stats > div {
  min-width: 105px;
  padding: 0 20px;
  border-left: 1px solid rgba(221, 221, 221, 0.8);
}
.customer-shop-hero__stats > div:first-child {
  border-left: 0;
}
.customer-shop-hero__stats strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}
.customer-shop-hero__stats span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Topbar
|--------------------------------------------------------------------------
*/
.customer-shop-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.customer-shop-topbar__left {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #999;
  font-size: 14px;
}
.customer-shop-topbar__left strong {
  color: #0D2B5A;
  font-weight: 600;
}

.customer-shop-breadcrumb {
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.customer-shop-breadcrumb:hover {
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Cart
|--------------------------------------------------------------------------
*/
.customer-shop-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.customer-shop-cart i {
  color: #177245;
  font-size: 17px;
}
.customer-shop-cart b {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #177245;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.customer-shop-cart:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Main Layout
|--------------------------------------------------------------------------
*/
.customer-shop-layout {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
*/
.customer-shop-sidebar {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 17px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}

.customer-shop-sidebar__mobile-header {
  display: none;
}

.customer-shop-sidebar__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
.customer-shop-sidebar__heading span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}
.customer-shop-sidebar__heading h2 {
  margin: 0;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.customer-shop-clear-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Filter
|--------------------------------------------------------------------------
*/
.customer-shop-filter {
  padding: 17px 0;
  border-bottom: 1px solid #ddd;
}
.customer-shop-filter:last-of-type {
  border-bottom: 0;
}

.customer-shop-filter__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.customer-shop-filter__header h3 {
  margin: 0;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-shop-filter__header i {
  color: #999;
  font-size: 17px;
}

.customer-shop-filter__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
|--------------------------------------------------------------------------
| Checkbox
|--------------------------------------------------------------------------
*/
.customer-shop-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.customer-shop-check input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.customer-shop-check__box {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  background: #fff;
  transition: 0.2s;
}
input:checked + .customer-shop-check__box {
  border-color: #177245;
  background: #177245;
}
input:checked + .customer-shop-check__box::after {
  content: "";
  width: 7px;
  height: 4px;
  margin-top: -1px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.customer-shop-check__label {
  flex: 1;
}
.customer-shop-check small {
  color: #999;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Rating
|--------------------------------------------------------------------------
*/
.customer-shop-rating-check {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 22px;
  cursor: pointer;
}
.customer-shop-rating-check input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.customer-shop-radio {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
  transition: 0.2s;
}

.customer-shop-rating-check input:checked + .customer-shop-radio {
  border: 4px solid #177245;
}

.customer-shop-stars {
  color: #e2a800;
  font-size: 14px;
  letter-spacing: 1px;
}

.customer-shop-rating-check small {
  color: #555555;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Price
|--------------------------------------------------------------------------
*/
.customer-shop-price-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.customer-shop-price-inputs > div {
  min-width: 0;
}
.customer-shop-price-inputs label {
  display: block;
  margin-bottom: 5px;
  color: #888;
  font-size: 14px;
}

.customer-shop-price-input {
  position: relative;
}
.customer-shop-price-input span {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}
.customer-shop-price-input input {
  width: 100%;
  height: 38px;
  padding: 0 8px 0 22px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.customer-shop-price-input input:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.05);
}

.customer-shop-filter-btn {
  width: 100%;
  height: 38px;
  margin-top: 10px;
  border: 1px solid #177245;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
.customer-shop-filter-btn:hover {
  opacity: 0.92;
}

/*
|--------------------------------------------------------------------------
| Sidebar Clear
|--------------------------------------------------------------------------
*/
.customer-shop-sidebar__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #888;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.customer-shop-sidebar__clear:hover {
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Product Area
|--------------------------------------------------------------------------
*/
.customer-shop-products {
  min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/
.customer-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 42px;
  margin-bottom: 12px;
}

.customer-shop-toolbar__result {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.customer-shop-toolbar__result strong {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-shop-toolbar__result span {
  color: #555555;
  font-size: 14px;
}

.customer-shop-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
|--------------------------------------------------------------------------
| Search
|--------------------------------------------------------------------------
*/
.customer-shop-search {
  position: relative;
  width: 235px;
}
.customer-shop-search i {
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  color: #999;
  font-size: 17px;
  pointer-events: none;
}
.customer-shop-search input {
  width: 100%;
  height: 40px;
  padding: 0 10px 0 35px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.customer-shop-search input::placeholder {
  color: #999;
}
.customer-shop-search input:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.05);
}

/*
|--------------------------------------------------------------------------
| Sort
|--------------------------------------------------------------------------
*/
.customer-shop-sort-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 9px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.customer-shop-sort-wrap > span {
  color: #999;
  font-size: 14px;
}

.customer-shop-sort {
  height: 34px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| View Switcher
|--------------------------------------------------------------------------
*/
.customer-shop-view {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 3px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.customer-shop-view button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #999;
  cursor: pointer;
}
.customer-shop-view button.active {
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Active Filters
|--------------------------------------------------------------------------
*/
.customer-shop-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.customer-shop-active-filters > span {
  margin-right: 3px;
  color: #888;
  font-size: 14px;
}
.customer-shop-active-filters button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(23, 114, 69, 0.16);
  border-radius: 5px;
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.customer-shop-active-filters button i {
  font-size: 14px;
}
.customer-shop-active-filters .customer-shop-active-filters__clear {
  border-color: transparent;
  background: transparent;
  color: #888;
}

/*
|--------------------------------------------------------------------------
| Product Grid
|--------------------------------------------------------------------------
*/
.customer-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

/*
|--------------------------------------------------------------------------
| Product Card
|--------------------------------------------------------------------------
*/
.customer-product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.customer-product-card:hover {
  border-color: rgba(23, 114, 69, 0.25);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  transform: translateY(-3px);
}

/*
|--------------------------------------------------------------------------
| Product Image
|--------------------------------------------------------------------------
*/
.customer-product-card__image {
  position: relative;
  aspect-ratio: 1/1.12;
  overflow: hidden;
  background: #f5f5f5;
}
.customer-product-card__image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.customer-product-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.customer-product-card__image:hover img {
  transform: scale(1.045);
}

/*
|--------------------------------------------------------------------------
| Product Badges
|--------------------------------------------------------------------------
*/
.customer-product-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
}
.customer-product-card__badges span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}
.customer-product-card__badges span.sale {
  background: #177245;
}
.customer-product-card__badges span.new {
  background: #0D2B5A;
}

/*
|--------------------------------------------------------------------------
| Wishlist
|--------------------------------------------------------------------------
*/
.customer-product-card__wishlist {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #0D2B5A;
  font-size: 17px;
  cursor: pointer;
  transition: 0.2s;
}
.customer-product-card__wishlist:hover {
  color: #177245;
  transform: scale(1.05);
}

/*
|--------------------------------------------------------------------------
| Quick View
|--------------------------------------------------------------------------
*/
.customer-product-card__quick {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: 0.25s;
}

.customer-product-card__image:hover .customer-product-card__quick {
  opacity: 1;
  transform: translateY(0);
}

/*
|--------------------------------------------------------------------------
| Product Content
|--------------------------------------------------------------------------
*/
.customer-product-card__content {
  padding: 13px;
}

.customer-product-card__category {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}

.customer-product-card__content h2 {
  min-height: 40px;
  margin: 0 0 7px;
}
.customer-product-card__content h2 a {
  display: -webkit-box;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 650;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.customer-product-card__content h2 a:hover {
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Rating
|--------------------------------------------------------------------------
*/
.customer-product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.customer-product-card__rating > span {
  color: #e2a800;
  font-size: 14px;
  letter-spacing: 1px;
}
.customer-product-card__rating small {
  color: #888;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Product Bottom
|--------------------------------------------------------------------------
*/
.customer-product-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.customer-product-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
}
.customer-product-card__price del {
  color: #aaa;
  font-size: 14px;
}
.customer-product-card__price strong {
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Add To Cart
|--------------------------------------------------------------------------
*/
.customer-product-card__cart {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(23, 114, 69, 0.2);
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
  font-size: 17px;
  cursor: pointer;
  transition: 0.2s;
}
.customer-product-card__cart:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
  transform: translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/
.customer-shop-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 28px;
}
.customer-shop-pagination button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
.customer-shop-pagination button:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.customer-shop-pagination button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.customer-shop-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.customer-shop-pagination > span {
  padding: 0 3px;
  color: #999;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .customer-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/*
|--------------------------------------------------------------------------
| LG
|--------------------------------------------------------------------------
*/
@media (min-width: 992px) and (max-width: 1199px) {
  .customer-shop-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .customer-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .customer-shop-hero__stats {
    display: none;
  }
  .customer-shop-search {
    width: 190px;
  }
}
/*
|--------------------------------------------------------------------------
| MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .customer-shop-hero {
    min-height: auto;
    padding: 25px;
  }
  .customer-shop-layout {
    grid-template-columns: 1fr;
  }
  .customer-shop-sidebar {
    position: static;
  }
  .customer-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-shop-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-shop-toolbar__right {
    width: 100%;
  }
  .customer-shop-search {
    flex: 1;
    width: auto;
  }
}
/*
|--------------------------------------------------------------------------
| XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .customer-shop-hero {
    padding: 20px;
  }
  .customer-shop-hero h1 {
    font-size: 24px;
  }
  .customer-shop-topbar {
    margin-bottom: 15px;
  }
  .customer-shop-layout {
    gap: 15px;
  }
  .customer-shop-sidebar {
    padding: 14px;
  }
  .customer-shop-toolbar__right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .customer-shop-search {
    grid-column: 1/-1;
    width: 100%;
  }
  .customer-shop-sort-wrap {
    width: 100%;
  }
  .customer-shop-view {
    width: 100%;
    justify-content: center;
  }
  .customer-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .customer-product-card__content {
    padding: 10px;
  }
  .customer-product-card__category {
    font-size: 14px;
  }
  .customer-product-card__content h2 {
    min-height: 38px;
  }
  .customer-product-card__price {
    display: block;
  }
  .customer-product-card__price del,
  .customer-product-card__price strong {
    display: block;
  }
  .customer-product-card__cart {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 16px;
  }
  .customer-product-card__quick {
    display: none;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER PRODUCT DETAILS
|--------------------------------------------------------------------------
*/
.customer-product-details {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  color: #777;
  font-size: 14px;
  line-height: 1.5;
}
.customer-product-details .customer-product-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-product-details .customer-product-breadcrumb a:hover {
  color: #0D2B5A !important;
}
.customer-product-details .customer-product-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-product-details .customer-product-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-product-details .customer-product-breadcrumb span:last-child {
  color: #0D2B5A;
  font-weight: 600;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | PRODUCT MAIN
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  gap: 40px;
  align-items: start;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | PRODUCT MEDIA
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-media {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | THUMBNAILS
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.customer-product-details .customer-product-thumbnail {
  position: relative;
  width: 72px;
  height: 82px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f5f5f5;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.customer-product-details .customer-product-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.customer-product-details .customer-product-thumbnail:hover {
  border-color: rgba(15, 61, 46, 0.4);
  transform: translateY(-1px);
}
.customer-product-details .customer-product-thumbnail.active {
  border-color: #177245;
  box-shadow: 0 0 0 2px rgba(15, 61, 46, 0.1);
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | MAIN IMAGE
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-main-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1.08;
  overflow: hidden;
  border-radius: 12px;
  background: #f3f3f3;
}
.customer-product-details .customer-product-main-image > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.customer-product-details .customer-product-main-image__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  background: #177245;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.customer-product-details .customer-product-main-image__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #0D2B5A;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.customer-product-details .customer-product-main-image__zoom:hover {
  color: #177245;
  transform: scale(1.05);
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | PRODUCT INFORMATION
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-info {
  min-width: 0;
  padding-top: 4px;
}
.customer-product-details .customer-product-info__category {
  display: block;
  margin-bottom: 8px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-product-details .customer-product-info h1 {
  margin: 0 0 12px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | PRODUCT RATING
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-info__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 17px;
  border-bottom: 1px solid #ddd;
}
.customer-product-details .customer-product-info__rating a {
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.customer-product-details .customer-product-info__rating a:hover {
  color: #177245 !important;
}
.customer-product-details .customer-product-info__rating > span:last-child {
  color: #888;
  font-size: 14px;
}
.customer-product-details .customer-product-stars {
  display: inline-flex;
  align-items: center;
}
.customer-product-details .customer-product-stars span {
  color: #e2a200;
  font-size: 16px;
  letter-spacing: 1px;
}
.customer-product-details .customer-product-info__separator {
  color: #ccc !important;
  font-size: 14px;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | PRICE
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-info__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 14px;
}
.customer-product-details .customer-product-info__price del {
  color: #999;
  font-size: 14px;
}
.customer-product-details .customer-product-info__price strong {
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}
.customer-product-details .customer-product-info__price > span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 5px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | DESCRIPTION
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-info__description {
  margin-bottom: 16px;
}
.customer-product-details .customer-product-info__description p {
  margin: 0 !important;
  color: #555555 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | STOCK
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-stock {
  min-height: 42px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px;
  padding: 0 13px;
  border: 1px solid rgba(15, 61, 46, 0.14);
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-product-details .customer-product-stock i {
  color: #177245;
  font-size: 17px;
}
.customer-product-details .customer-product-stock strong {
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}
.customer-product-details .customer-product-stock span {
  color: #777;
  font-size: 14px;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | PRODUCT OPTIONS
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-options {
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding-bottom: 21px;
  border-bottom: 1px solid #ddd;
}
.customer-product-details .customer-product-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.customer-product-details .customer-product-option__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.customer-product-details .customer-product-option__label strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-product-details .customer-product-option__label span {
  color: #999;
  font-size: 14px;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | OPTION VALUES
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-option__values {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.customer-product-details .customer-product-option__values label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.customer-product-details .customer-product-option__values label input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.customer-product-details .customer-product-option__values label > span {
  min-width: 44px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #d5d5d5;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.customer-product-details .customer-product-option__values label:hover > span {
  border-color: rgba(15, 61, 46, 0.45);
}
.customer-product-details .customer-product-option__values label input:checked + span {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.06);
  color: #177245;
  box-shadow: 0 0 0 1px #177245;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | COLOR OPTIONS
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-color-values {
  display: flex;
  align-items: center;
  gap: 11px;
}
.customer-product-details .customer-product-color-values label {
  position: relative;
  width: 31px;
  height: 31px;
  display: inline-flex;
  cursor: pointer;
}
.customer-product-details .customer-product-color-values label input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.customer-product-details .customer-product-color-values label > span {
  width: 31px;
  height: 31px;
  display: block;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d5d5d5;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.customer-product-details .customer-product-color-values label:hover > span {
  transform: scale(1.05);
}
.customer-product-details .customer-product-color-values label input:checked + span {
  box-shadow: 0 0 0 2px #177245;
}
.customer-product-details .customer-product-color-values .color-black {
  background: #111;
}
.customer-product-details .customer-product-color-values .color-white {
  background: #fff;
}
.customer-product-details .customer-product-color-values .color-blue {
  background: #3f6f9f;
}
.customer-product-details .customer-product-color-values .color-gray {
  background: #9b9b9b;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | PURCHASE
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-purchase {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(110px, 0.7fr) 46px;
  gap: 8px;
  align-items: stretch;
  margin-top: 20px;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | QUANTITY
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-quantity {
  height: 46px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  overflow: hidden;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: #fff;
}
.customer-product-details .customer-product-quantity button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #0D2B5A;
  font-size: 16px;
  cursor: pointer;
}
.customer-product-details .customer-product-quantity button:hover {
  background: #f6f6f6;
  color: #177245;
}
.customer-product-details .customer-product-quantity input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.customer-product-details .customer-product-quantity input::-webkit-inner-spin-button, .customer-product-details .customer-product-quantity input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | ADD TO CART
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-add-cart {
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #177245;
  border-radius: 8px;
  background: #177245;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.customer-product-details .customer-product-add-cart i {
  font-size: 17px;
}
.customer-product-details .customer-product-add-cart:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.customer-product-details .customer-product-add-cart.is-added {
  background: #16805c;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | BUY NOW
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-buy-now {
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #0D2B5A;
  border-radius: 8px;
  background: #0D2B5A;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.customer-product-details .customer-product-buy-now:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | WISHLIST
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-wishlist {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  background: #fff;
  color: #0D2B5A;
  font-size: 19px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.customer-product-details .customer-product-wishlist:hover, .customer-product-details .customer-product-wishlist.is-active {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.04);
  color: #177245;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | PRODUCT BENEFITS
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 19px;
}
.customer-product-details .customer-product-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.customer-product-details .customer-product-benefit__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 16px;
}
.customer-product-details .customer-product-benefit strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.customer-product-details .customer-product-benefit span {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.5;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | PRODUCT TABS
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-tabs {
  width: 100%;
  margin-top: 40px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | TAB NAVIGATION
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-tabs__nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 22px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
}
.customer-product-details .customer-product-tabs__nav::-webkit-scrollbar {
  display: none;
}
.customer-product-details .customer-product-tab {
  position: relative;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: #777;
  font-family: "Poppins", sans-serif;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: color 0.2s ease;
}
.customer-product-details .customer-product-tab i {
  font-size: 16px;
}
.customer-product-details .customer-product-tab b {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 11px;
  background: #f1f1f1;
  color: #777;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.customer-product-details .customer-product-tab:hover {
  color: #177245;
}
.customer-product-details .customer-product-tab.active {
  color: #177245 !important;
}
.customer-product-details .customer-product-tab.active b {
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
}
.customer-product-details .customer-product-tab::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #177245;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.customer-product-details .customer-product-tab.active::after {
  transform: scaleX(1);
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | TAB CONTENT
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-tabs__content {
  position: relative;
  min-height: 280px;
}
.customer-product-details .customer-product-tab-panel {
  padding: 30px;
  animation: customerProductTabFade 0.22s ease;
}
.customer-product-details .customer-product-tab-panel[hidden] {
  display: none !important;
}
@keyframes customerProductTabFade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | TAB PANEL HEADING
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-tab-panel__heading {
  margin-bottom: 17px;
}
.customer-product-details .customer-product-tab-panel__heading span {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-product-details .customer-product-tab-panel__heading h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | DESCRIPTION TAB
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-description {
  max-width: 900px;
}
.customer-product-details .customer-product-description > p {
  margin: 0 0 13px !important;
  color: #555555 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}
.customer-product-details .customer-product-description__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 32px;
  margin-top: 20px;
}
.customer-product-details .customer-product-description__features > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #555555;
  font-size: 14px;
}
.customer-product-details .customer-product-description__features i {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 14px;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | SPECIFICATIONS
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-spec-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 9px;
}
.customer-product-details .customer-product-spec-table > div {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 17px;
  border-bottom: 1px solid #ddd;
  background: #fff;
}
.customer-product-details .customer-product-spec-table > div:nth-child(odd) {
  border-right: 1px solid #ddd;
}
.customer-product-details .customer-product-spec-table > div:nth-last-child(-n+2) {
  border-bottom: 0;
}
.customer-product-details .customer-product-spec-table span {
  color: #777;
  font-size: 14px;
}
.customer-product-details .customer-product-spec-table strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | SHIPPING
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-shipping-info > p {
  max-width: 800px;
  margin: 0 0 22px !important;
  color: #555555 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}
.customer-product-details .customer-product-shipping-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.customer-product-details .customer-product-shipping-grid > div {
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.customer-product-details .customer-product-shipping-grid > div:hover {
  border-color: rgba(15, 61, 46, 0.2);
  transform: translateY(-2px);
}
.customer-product-details .customer-product-shipping-grid__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-product-details .customer-product-shipping-grid strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-product-details .customer-product-shipping-grid span {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.5;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | REVIEWS HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-reviews__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}
.customer-product-details .customer-product-reviews__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}
.customer-product-details .customer-product-reviews__rating strong {
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1;
}
.customer-product-details .customer-product-reviews__rating > span {
  color: #e3a300;
  font-size: 16px;
  letter-spacing: 1px;
}
.customer-product-details .customer-product-reviews__rating small {
  color: #888;
  font-size: 14px;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | REVIEW BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-review-btn {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border: 1px solid #177245;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.customer-product-details .customer-product-review-btn:hover {
  opacity: 0.9;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | REVIEW LIST
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-product-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.customer-product-details .customer-product-review {
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fff;
}
.customer-product-details .customer-product-review__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}
.customer-product-details .customer-product-review__avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}
.customer-product-details .customer-product-review__author {
  flex: 1;
}
.customer-product-details .customer-product-review__author strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-product-details .customer-product-review__author span {
  display: block;
  color: #177245;
  font-size: 14px;
}
.customer-product-details .customer-product-review__stars {
  color: #e3a300;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.customer-product-details .customer-product-review h3 {
  margin: 0 0 6px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}
.customer-product-details .customer-product-review p {
  margin: 0 !important;
  color: #555555 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | RELATED PRODUCTS
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-related-products {
  margin-top: 40px;
}
.customer-product-details .customer-related-products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
}
.customer-product-details .customer-related-products__header > div > span {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-product-details .customer-related-products__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-product-details .customer-related-products__header > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-product-details .customer-related-products__header > a:hover {
  color: #0D2B5A !important;
}
.customer-product-details .customer-related-products__header > a i {
  font-size: 16px;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | RELATED GRID
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-related-products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | RELATED PRODUCT CARD
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-related-product {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.customer-product-details .customer-related-product:hover {
  border-color: rgba(15, 61, 46, 0.2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | RELATED IMAGE
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-related-product__image {
  position: relative;
  display: block;
  aspect-ratio: 1/1.08;
  overflow: hidden;
  background: #f3f3f3;
}
.customer-product-details .customer-related-product__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.customer-product-details .customer-related-product__image > button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #0D2B5A;
  font-size: 16px;
  cursor: pointer;
}
.customer-product-details .customer-related-product__image > button:hover {
  color: #177245;
}
.customer-product-details .customer-related-product:hover .customer-related-product__image img {
  transform: scale(1.035);
}
.customer-product-details {
  /*
  |--------------------------------------------------------------------------
  | RELATED CONTENT
  |--------------------------------------------------------------------------
  */
}
.customer-product-details .customer-related-product__content {
  padding: 13px;
}
.customer-product-details .customer-related-product__content > span {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.customer-product-details .customer-related-product__content h3 {
  margin: 0 0 7px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}
.customer-product-details .customer-related-product__content strong {
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| LARGE DESKTOP
|--------------------------------------------------------------------------
*/
@media (max-width: 1250px) {
  .customer-product-details .customer-product-main {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.9fr);
    gap: 30px;
  }
  .customer-product-details .customer-product-info h1 {
    font-size: 24px !important;
  }
  .customer-product-details .customer-product-purchase {
    grid-template-columns: 100px minmax(0, 1fr) 105px 44px;
  }
  .customer-product-details .customer-product-benefits {
    grid-template-columns: 1fr;
  }
}
/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1024px) {
  .customer-product-details .customer-product-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .customer-product-details .customer-product-media {
    max-width: 700px;
  }
  .customer-product-details .customer-product-info {
    max-width: 750px;
  }
  .customer-product-details .customer-product-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .customer-product-details .customer-product-purchase {
    max-width: 750px;
  }
  .customer-product-details .customer-related-products__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/*
|--------------------------------------------------------------------------
| SMALL TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-product-details .customer-product-media {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 10px;
  }
  .customer-product-details .customer-product-thumbnail {
    width: 60px;
    height: 68px;
  }
  .customer-product-details .customer-product-info h1 {
    font-size: 23px !important;
  }
  .customer-product-details .customer-product-purchase {
    grid-template-columns: 100px minmax(0, 1fr) 105px 44px;
  }
  .customer-product-details .customer-product-tabs__nav {
    padding: 0 8px;
  }
  .customer-product-details .customer-product-tab {
    min-height: 54px;
    padding: 0 13px;
    font-size: 14px !important;
  }
  .customer-product-details .customer-product-tab-panel {
    padding: 25px 21px;
  }
  .customer-product-details .customer-product-description__features {
    grid-template-columns: 1fr;
  }
  .customer-product-details .customer-product-spec-table {
    grid-template-columns: 1fr;
  }
  .customer-product-details .customer-product-spec-table > div {
    border-right: 0 !important;
  }
  .customer-product-details .customer-product-spec-table > div:nth-last-child(-n+2) {
    border-bottom: 1px solid #ddd;
  }
  .customer-product-details .customer-product-spec-table > div:last-child {
    border-bottom: 0;
  }
  .customer-product-details .customer-product-shipping-grid {
    grid-template-columns: 1fr;
  }
  .customer-product-details .customer-related-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-product-details {
    width: 100%;
  }
  .customer-product-details .customer-product-breadcrumb {
    margin-bottom: 15px;
    font-size: 14px;
  }
  .customer-product-details .customer-product-breadcrumb a,
  .customer-product-details .customer-product-breadcrumb span {
    font-size: 14px !important;
  }
  .customer-product-details .customer-product-main {
    gap: 24px;
  }
  .customer-product-details .customer-product-media {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
  }
  .customer-product-details .customer-product-thumbnail {
    width: 52px;
    height: 59px;
    border-radius: 6px;
  }
  .customer-product-details .customer-product-main-image {
    border-radius: 9px;
  }
  .customer-product-details .customer-product-main-image__badge {
    top: 10px;
    left: 10px;
    min-height: 28px;
    padding: 0 9px;
    font-size: 14px;
  }
  .customer-product-details .customer-product-main-image__zoom {
    right: 9px;
    bottom: 9px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .customer-product-details .customer-product-info h1 {
    margin-bottom: 10px !important;
    font-size: 22px !important;
  }
  .customer-product-details .customer-product-info__category {
    font-size: 14px;
  }
  .customer-product-details .customer-product-info__rating {
    padding-bottom: 14px;
  }
  .customer-product-details .customer-product-info__rating a {
    font-size: 14px !important;
  }
  .customer-product-details .customer-product-info__rating > span:last-child {
    font-size: 14px;
  }
  .customer-product-details .customer-product-info__price {
    margin-top: 15px;
    margin-bottom: 12px;
  }
  .customer-product-details .customer-product-info__price strong {
    font-size: 21px;
  }
  .customer-product-details .customer-product-info__price del {
    font-size: 14px;
  }
  .customer-product-details .customer-product-info__price > span {
    font-size: 14px;
  }
  .customer-product-details .customer-product-info__description p {
    font-size: 14px !important;
  }
  .customer-product-details .customer-product-stock {
    min-height: 38px;
    margin-bottom: 16px;
    padding: 0 10px;
  }
  .customer-product-details .customer-product-stock strong,
  .customer-product-details .customer-product-stock span {
    font-size: 14px;
  }
  .customer-product-details .customer-product-options {
    gap: 15px;
    padding-bottom: 17px;
  }
  .customer-product-details .customer-product-option__label strong,
  .customer-product-details .customer-product-option__label span {
    font-size: 14px;
  }
  .customer-product-details .customer-product-option__values label > span {
    min-width: 40px;
    height: 35px;
    font-size: 14px;
  }
  .customer-product-details .customer-product-purchase {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 8px;
  }
  .customer-product-details .customer-product-quantity {
    height: 43px;
  }
  .customer-product-details .customer-product-quantity input {
    font-size: 14px;
  }
  .customer-product-details .customer-product-add-cart {
    height: 43px;
    font-size: 14px;
  }
  .customer-product-details .customer-product-buy-now {
    height: 43px;
    font-size: 14px;
  }
  .customer-product-details .customer-product-wishlist {
    width: 43px;
    height: 43px;
  }
  .customer-product-details .customer-product-purchase .customer-product-buy-now {
    grid-column: 1/3;
  }
  .customer-product-details .customer-product-purchase .customer-product-wishlist {
    position: absolute;
    right: 0;
    margin-top: -51px;
  }
  .customer-product-details .customer-product-benefits {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .customer-product-details .customer-product-benefit {
    min-height: 48px;
  }
  .customer-product-details .customer-product-benefit strong,
  .customer-product-details .customer-product-benefit span {
    font-size: 14px;
  }
  .customer-product-details .customer-product-tabs {
    margin-top: 30px;
    border-radius: 9px;
  }
  .customer-product-details .customer-product-tabs__nav {
    padding: 0 4px;
  }
  .customer-product-details .customer-product-tab {
    min-height: 50px;
    padding: 0 11px;
    gap: 6px;
    font-size: 14px !important;
  }
  .customer-product-details .customer-product-tab i {
    font-size: 15px;
  }
  .customer-product-details .customer-product-tab b {
    min-width: 20px;
    height: 20px;
    font-size: 14px !important;
  }
  .customer-product-details .customer-product-tab-panel {
    padding: 21px 15px;
  }
  .customer-product-details .customer-product-tab-panel__heading {
    margin-bottom: 14px;
  }
  .customer-product-details .customer-product-tab-panel__heading span {
    font-size: 14px;
  }
  .customer-product-details .customer-product-tab-panel__heading h2 {
    font-size: 20px !important;
  }
  .customer-product-details .customer-product-description > p {
    font-size: 14px !important;
  }
  .customer-product-details .customer-product-description__features {
    gap: 8px;
    margin-top: 15px;
  }
  .customer-product-details .customer-product-description__features > div {
    font-size: 14px;
  }
  .customer-product-details .customer-product-spec-table > div {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px;
  }
  .customer-product-details .customer-product-spec-table span,
  .customer-product-details .customer-product-spec-table strong {
    font-size: 14px;
  }
  .customer-product-details .customer-product-spec-table strong {
    text-align: left;
  }
  .customer-product-details .customer-product-shipping-info > p {
    font-size: 14px !important;
  }
  .customer-product-details .customer-product-shipping-grid {
    grid-template-columns: 1fr;
  }
  .customer-product-details .customer-product-shipping-grid strong,
  .customer-product-details .customer-product-shipping-grid span {
    font-size: 14px;
  }
  .customer-product-details .customer-product-reviews__header {
    flex-direction: column;
    gap: 15px;
  }
  .customer-product-details .customer-product-reviews__rating strong {
    font-size: 22px;
  }
  .customer-product-details .customer-product-reviews__rating > span,
  .customer-product-details .customer-product-reviews__rating small {
    font-size: 14px;
  }
  .customer-product-details .customer-product-review-btn {
    width: 100%;
    font-size: 14px;
  }
  .customer-product-details .customer-product-review {
    padding: 14px;
  }
  .customer-product-details .customer-product-review__author strong,
  .customer-product-details .customer-product-review__author span {
    font-size: 14px;
  }
  .customer-product-details .customer-product-review__stars {
    font-size: 14px;
  }
  .customer-product-details .customer-product-review h3 {
    font-size: 16px !important;
  }
  .customer-product-details .customer-product-review p {
    font-size: 14px !important;
  }
  .customer-product-details .customer-related-products {
    margin-top: 30px;
  }
  .customer-product-details .customer-related-products__header {
    align-items: flex-start;
  }
  .customer-product-details .customer-related-products__header > div > span {
    font-size: 14px;
  }
  .customer-product-details .customer-related-products__header h2 {
    font-size: 20px !important;
  }
  .customer-product-details .customer-related-products__header > a {
    font-size: 14px !important;
  }
  .customer-product-details .customer-related-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .customer-product-details .customer-related-product__content {
    padding: 10px;
  }
  .customer-product-details .customer-related-product__content > span {
    font-size: 14px;
  }
  .customer-product-details .customer-related-product__content h3 {
    font-size: 15px !important;
  }
  .customer-product-details .customer-related-product__content strong {
    font-size: 17px;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-product-details .customer-product-media {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  .customer-product-details .customer-product-thumbnail {
    width: 46px;
    height: 53px;
  }
  .customer-product-details .customer-product-info h1 {
    font-size: 20px !important;
  }
  .customer-product-details .customer-product-info__price strong {
    font-size: 20px;
  }
  .customer-product-details .customer-product-purchase {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .customer-product-details .customer-product-tab-panel__heading h2 {
    font-size: 19px !important;
  }
  .customer-product-details .customer-related-products__header h2 {
    font-size: 19px !important;
  }
  .customer-product-details .customer-related-products__grid {
    grid-template-columns: 1fr;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER CART
|--------------------------------------------------------------------------
*/
.customer-cart-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding-bottom: 30px;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.customer-cart-page .customer-cart-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-cart-page .customer-cart-breadcrumb a:hover {
  color: #0D2B5A !important;
}
.customer-cart-page .customer-cart-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-cart-page .customer-cart-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.customer-cart-page .customer-cart-header__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-cart-page .customer-cart-header h1 {
  margin: 0 0 6px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-cart-page .customer-cart-header p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-cart-page .customer-cart-header__continue {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.customer-cart-page .customer-cart-header__continue:hover {
  border-color: #177245;
  color: #177245 !important;
}
.customer-cart-page .customer-cart-header__continue i {
  font-size: 16px;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | LAYOUT
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
.customer-cart-page .customer-cart-main {
  min-width: 0;
}
.customer-cart-page .customer-cart-sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | ITEMS CARD
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-items-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-cart-page .customer-cart-items-card__header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  border-bottom: 1px solid #ddd;
}
.customer-cart-page .customer-cart-items-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-cart-page .customer-cart-items-card__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-cart-page .customer-cart-items-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  border-top: 1px solid #ddd;
  background: #fafafa;
}
.customer-cart-page .customer-cart-items-card__footer > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #999;
  font-size: 14px;
}
.customer-cart-page .customer-cart-items-card__footer > span i {
  color: #177245;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | CLEAR CART
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9a5a5a;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.customer-cart-page .customer-cart-clear:hover {
  color: #7f3f3f;
}
.customer-cart-page .customer-cart-clear i {
  font-size: 16px;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | CART ITEM
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid #ddd;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.customer-cart-page .customer-cart-item:last-of-type {
  border-bottom: 0;
}
.customer-cart-page .customer-cart-item.removing {
  opacity: 0;
  transform: translateX(12px);
}
.customer-cart-page .customer-cart-item__image {
  width: 110px;
  height: 125px;
  overflow: hidden;
  border-radius: 8px;
  background: #f5f5f5;
}
.customer-cart-page .customer-cart-item__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.customer-cart-page .customer-cart-item__details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 13px;
}
.customer-cart-page .customer-cart-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}
.customer-cart-page .customer-cart-item__top h3 {
  margin: 2px 0 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
.customer-cart-page .customer-cart-item__category {
  display: block;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}
.customer-cart-page .customer-cart-item__remove {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fff;
  color: #999;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.customer-cart-page .customer-cart-item__remove:hover {
  border-color: rgba(154, 90, 90, 0.25);
  background: rgba(154, 90, 90, 0.05);
  color: #9a5a5a;
}
.customer-cart-page .customer-cart-item__remove i {
  font-size: 16px;
}
.customer-cart-page .customer-cart-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 15px;
}
.customer-cart-page .customer-cart-item__meta span {
  color: #777;
  font-size: 14px;
}
.customer-cart-page .customer-cart-item__meta strong {
  color: #555;
  font-weight: 600;
}
.customer-cart-page .customer-cart-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.customer-cart-page .customer-cart-item__price {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 2px;
}
.customer-cart-page .customer-cart-item__price span {
  color: #999;
  font-size: 14px;
}
.customer-cart-page .customer-cart-item__price strong {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | QUANTITY
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-quantity {
  height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
}
.customer-cart-page .customer-cart-quantity button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.customer-cart-page .customer-cart-quantity button:hover {
  background: #f5f5f5;
  color: #177245;
}
.customer-cart-page .customer-cart-quantity button i {
  font-size: 15px;
}
.customer-cart-page .customer-cart-quantity input {
  width: 38px;
  height: 36px;
  padding: 0;
  border: 0;
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
  outline: 0;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | BACK LINK
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-cart-page .customer-cart-back:hover {
  color: #0D2B5A !important;
}
.customer-cart-page .customer-cart-back i {
  font-size: 15px;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | EMPTY
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-empty {
  padding: 55px 20px;
  text-align: center;
}
.customer-cart-page .customer-cart-empty__icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 27px;
}
.customer-cart-page .customer-cart-empty h2 {
  margin: 0 0 7px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.customer-cart-page .customer-cart-empty p {
  margin: 0 0 18px !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-cart-page .customer-cart-btn.primary {
  border-color: #177245;
  background: #177245;
  color: #fff !important;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | SUMMARY
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-summary {
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-cart-page .customer-cart-summary__header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ddd;
}
.customer-cart-page .customer-cart-summary__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-cart-page .customer-cart-summary__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | COUPON
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-coupon {
  margin-bottom: 16px;
}
.customer-cart-page .customer-cart-coupon label {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-cart-page .customer-cart-coupon > div {
  display: flex;
  gap: 6px;
}
.customer-cart-page .customer-cart-coupon input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: 0;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.customer-cart-page .customer-cart-coupon input:focus {
  border-color: rgba(15, 61, 46, 0.45);
}
.customer-cart-page .customer-cart-coupon button {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f8f8f8;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.customer-cart-page .customer-cart-coupon button:hover {
  border-color: #177245;
  color: #177245;
}
.customer-cart-page .customer-cart-coupon small {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}
.customer-cart-page .customer-cart-coupon small.success {
  color: #177245;
}
.customer-cart-page .customer-cart-coupon small.error {
  color: #a05252;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | SUMMARY TOTALS
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-summary__totals {
  padding: 14px 0;
  border-top: 1px solid #ddd;
}
.customer-cart-page .customer-cart-summary__totals > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}
.customer-cart-page .customer-cart-summary__totals > div:last-child {
  margin-bottom: 0;
}
.customer-cart-page .customer-cart-summary__totals span {
  color: #777;
  font-size: 14px;
}
.customer-cart-page .customer-cart-summary__totals strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-cart-page .customer-cart-summary__totals strong.discount {
  color: #a05252;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | TOTAL
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 0;
  border-top: 1px solid #ddd;
}
.customer-cart-page .customer-cart-summary__total span {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-cart-page .customer-cart-summary__total strong {
  color: #177245;
  font-size: 22px;
  font-weight: 700;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | CHECKOUT
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-checkout {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #177245;
  border-radius: 8px;
  background: #177245;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.customer-cart-page .customer-cart-checkout:hover {
  border-color: #0D2B5A;
  background: #0D2B5A;
}
.customer-cart-page .customer-cart-checkout.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.customer-cart-page .customer-cart-checkout i {
  font-size: 16px;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | SECURE
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 11px;
  color: #999;
  font-size: 14px;
}
.customer-cart-page .customer-cart-secure i {
  color: #177245;
  font-size: 15px;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | INFO CARD
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-info-card {
  padding: 15px 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-cart-page .customer-cart-info-card__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #eee;
}
.customer-cart-page .customer-cart-info-card__item:first-child {
  padding-top: 0;
}
.customer-cart-page .customer-cart-info-card__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.customer-cart-page .customer-cart-info-card__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 17px;
}
.customer-cart-page .customer-cart-info-card strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-cart-page .customer-cart-info-card span {
  display: block;
  color: #888;
  font-size: 14px;
}
.customer-cart-page {
  /*
  |--------------------------------------------------------------------------
  | MOBILE BAR
  |--------------------------------------------------------------------------
  */
}
.customer-cart-page .customer-cart-mobile-bar {
  display: none;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1050px) {
  .customer-cart-page .customer-cart-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-cart-page {
    padding-bottom: 85px;
  }
  .customer-cart-page .customer-cart-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-cart-page .customer-cart-header__continue {
    width: 100%;
  }
  .customer-cart-page .customer-cart-layout {
    grid-template-columns: 1fr;
  }
  .customer-cart-page .customer-cart-sidebar {
    order: -1;
  }
  .customer-cart-page .customer-cart-summary {
    margin-bottom: 0;
  }
  .customer-cart-page .customer-cart-info-card {
    display: none;
  }
  .customer-cart-page .customer-cart-mobile-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 15px;
    border-top: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.07);
  }
  .customer-cart-page .customer-cart-mobile-bar > div span {
    display: block;
    margin-bottom: 2px;
    color: #999;
    font-size: 14px;
  }
  .customer-cart-page .customer-cart-mobile-bar > div strong {
    display: block;
    color: #177245;
    font-size: 20px;
    font-weight: 700;
  }
  .customer-cart-page .customer-cart-mobile-bar > a {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    border-radius: 7px;
    background: #177245;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  .customer-cart-page .customer-cart-summary {
    padding: 15px;
  }
  .customer-cart-page .customer-cart-checkout {
    display: none;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-cart-page .customer-cart-header h1 {
    font-size: 22px !important;
  }
  .customer-cart-page .customer-cart-items-card__header {
    padding: 14px;
  }
  .customer-cart-page .customer-cart-items-card__header h2 {
    font-size: 19px !important;
  }
  .customer-cart-page .customer-cart-item {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
  }
  .customer-cart-page .customer-cart-item__image {
    width: 80px;
    height: 100px;
  }
  .customer-cart-page .customer-cart-item__top h3 {
    font-size: 15px !important;
  }
  .customer-cart-page .customer-cart-item__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .customer-cart-page .customer-cart-item__bottom {
    align-items: flex-end;
    flex-direction: column;
    gap: 9px;
  }
  .customer-cart-page .customer-cart-item__price {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }
  .customer-cart-page .customer-cart-items-card__footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 13px 14px;
  }
  .customer-cart-page .customer-cart-clear {
    font-size: 14px;
  }
  .customer-cart-page .customer-cart-summary__header h2 {
    font-size: 19px !important;
  }
  .customer-cart-page .customer-cart-summary__total strong {
    font-size: 20px;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-cart-page .customer-cart-header h1 {
    font-size: 21px !important;
  }
  .customer-cart-page .customer-cart-item {
    grid-template-columns: 65px minmax(0, 1fr);
  }
  .customer-cart-page .customer-cart-item__image {
    width: 65px;
    height: 82px;
  }
  .customer-cart-page .customer-cart-quantity {
    height: 35px;
  }
  .customer-cart-page .customer-cart-quantity button {
    width: 32px;
    height: 33px;
  }
  .customer-cart-page .customer-cart-quantity input {
    width: 34px;
    height: 33px;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER CHECKOUT
|--------------------------------------------------------------------------
*/
.customer-checkout-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding-bottom: 30px;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.customer-checkout-page .customer-checkout-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-checkout-page .customer-checkout-breadcrumb a:hover {
  color: #0D2B5A !important;
}
.customer-checkout-page .customer-checkout-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-checkout-page .customer-checkout-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-header {
  margin-bottom: 20px;
}
.customer-checkout-page .customer-checkout-header__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-checkout-page .customer-checkout-header h1 {
  margin: 0 0 6px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-checkout-page .customer-checkout-header p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | CHECKOUT STEPS
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-steps {
  display: flex;
  align-items: center;
  max-width: 760px;
  margin-bottom: 24px;
}
.customer-checkout-page .customer-checkout-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.customer-checkout-page .customer-checkout-step__number {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  color: #999;
  font-size: 14px;
  font-weight: 700;
}
.customer-checkout-page .customer-checkout-step span {
  display: block;
  margin-bottom: 1px;
  color: #999;
  font-size: 14px;
}
.customer-checkout-page .customer-checkout-step strong {
  display: block;
  color: #999;
  font-size: 14px;
  font-weight: 600;
}
.customer-checkout-page .customer-checkout-step.active .customer-checkout-step__number {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.customer-checkout-page .customer-checkout-step.active span,
.customer-checkout-page .customer-checkout-step.active strong {
  color: #177245;
}
.customer-checkout-page .customer-checkout-step__line {
  width: 100%;
  height: 1px;
  margin: 0 14px;
  background: #ddd;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | MAIN LAYOUT
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
.customer-checkout-page .customer-checkout-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.customer-checkout-page .customer-checkout-sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | CARD
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-checkout-page .customer-checkout-card__header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  border-bottom: 1px solid #ddd;
}
.customer-checkout-page .customer-checkout-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-checkout-page .customer-checkout-card__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | FORM
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}
.customer-checkout-page .customer-checkout-form__group {
  min-width: 0;
}
.customer-checkout-page .customer-checkout-form__group.full {
  grid-column: 1/-1;
}
.customer-checkout-page .customer-checkout-form__group label {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-checkout-page .customer-checkout-form__group label span {
  margin-left: 3px;
  color: #999;
  font-size: 14px;
  font-weight: 400;
}
.customer-checkout-page .customer-checkout-form__group > input {
  width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.customer-checkout-page .customer-checkout-form__group > input::placeholder {
  color: #aaa;
}
.customer-checkout-page .customer-checkout-form__group > input:focus {
  border-color: rgba(15, 61, 46, 0.5);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.06);
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | INPUT
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-input {
  position: relative;
}
.customer-checkout-page .customer-checkout-input i {
  position: absolute;
  top: 50%;
  left: 12px;
  color: #999;
  font-size: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.customer-checkout-page .customer-checkout-input input {
  width: 100%;
  height: 43px;
  padding: 0 12px 0 38px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.customer-checkout-page .customer-checkout-input input:focus {
  border-color: rgba(15, 61, 46, 0.5);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.06);
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | SELECT
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-select {
  position: relative;
}
.customer-checkout-page .customer-checkout-select select {
  width: 100%;
  height: 43px;
  appearance: none;
  padding: 0 38px 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.customer-checkout-page .customer-checkout-select select:focus {
  border-color: rgba(15, 61, 46, 0.5);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.06);
}
.customer-checkout-page .customer-checkout-select i {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #999;
  font-size: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | CHECKBOX
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 18px;
  color: #777;
  font-size: 14px;
  cursor: pointer;
}
.customer-checkout-page .customer-checkout-checkbox input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #177245;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | SHIPPING
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-shipping {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px 18px;
}
.customer-checkout-page .customer-checkout-shipping-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 11px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.customer-checkout-page .customer-checkout-shipping-option input {
  position: absolute;
  opacity: 0;
}
.customer-checkout-page .customer-checkout-shipping-option:hover {
  border-color: rgba(15, 61, 46, 0.35);
}
.customer-checkout-page .customer-checkout-shipping-option.active {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.025);
}
.customer-checkout-page .customer-checkout-shipping-option .customer-checkout-radio {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #bbb;
  border-radius: 50%;
}
.customer-checkout-page .customer-checkout-shipping-option .customer-checkout-radio span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}
.customer-checkout-page .customer-checkout-shipping-option.active .customer-checkout-radio {
  border-color: #177245;
}
.customer-checkout-page .customer-checkout-shipping-option.active .customer-checkout-radio span {
  background: #177245;
}
.customer-checkout-page .customer-checkout-shipping-option__icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-checkout-page .customer-checkout-shipping-option__content {
  flex: 1;
  min-width: 0;
}
.customer-checkout-page .customer-checkout-shipping-option__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-checkout-page .customer-checkout-shipping-option__content small {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.4;
}
.customer-checkout-page .customer-checkout-shipping-option__price {
  flex: 0 0 auto;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER NOTE
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-note {
  padding: 16px 18px 18px;
}
.customer-checkout-page .customer-checkout-note label {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-checkout-page .customer-checkout-note label span {
  margin-left: 3px;
  color: #999;
  font-weight: 400;
}
.customer-checkout-page .customer-checkout-note textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.customer-checkout-page .customer-checkout-note textarea::placeholder {
  color: #aaa;
}
.customer-checkout-page .customer-checkout-note textarea:focus {
  border-color: rgba(15, 61, 46, 0.5);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.06);
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | SECURITY
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-security {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-checkout-page .customer-checkout-security > i {
  color: #177245;
  font-size: 20px;
}
.customer-checkout-page .customer-checkout-security strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-checkout-page .customer-checkout-security p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | SUMMARY
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-summary {
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-checkout-page .customer-checkout-summary__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ddd;
}
.customer-checkout-page .customer-checkout-summary__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-checkout-page .customer-checkout-summary__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.customer-checkout-page .customer-checkout-summary__header a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | PRODUCT
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-product {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 13px;
}
.customer-checkout-page .customer-checkout-product__image {
  position: relative;
  width: 52px;
  height: 58px;
}
.customer-checkout-page .customer-checkout-product__image img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}
.customer-checkout-page .customer-checkout-product__image > span {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 9px;
  background: #177245;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.customer-checkout-page .customer-checkout-product__info {
  min-width: 0;
}
.customer-checkout-page .customer-checkout-product__info strong {
  display: block;
  margin-bottom: 3px;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-checkout-page .customer-checkout-product__info span {
  display: block;
  color: #888;
  font-size: 14px;
}
.customer-checkout-page .customer-checkout-product__price {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | TOTALS
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-summary__totals {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid #ddd;
}
.customer-checkout-page .customer-checkout-summary__totals > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}
.customer-checkout-page .customer-checkout-summary__totals > div:last-child {
  margin-bottom: 0;
}
.customer-checkout-page .customer-checkout-summary__totals span {
  color: #777;
  font-size: 14px;
}
.customer-checkout-page .customer-checkout-summary__totals strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-checkout-page .customer-checkout-summary__totals strong.discount {
  color: #a05252;
}
.customer-checkout-page .customer-checkout-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ddd;
}
.customer-checkout-page .customer-checkout-summary__total span {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-checkout-page .customer-checkout-summary__total strong {
  color: #177245;
  font-size: 22px;
  font-weight: 700;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | PAYMENT BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-payment-btn {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 17px;
  padding: 0 15px;
  border: 1px solid #177245;
  border-radius: 8px;
  background: #177245;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.customer-checkout-page .customer-checkout-payment-btn:hover {
  border-color: #0D2B5A;
  background: #0D2B5A;
}
.customer-checkout-page .customer-checkout-payment-btn i {
  font-size: 16px;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | TERMS
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-terms {
  margin: 10px 0 0 !important;
  color: #999 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  text-align: center;
}
.customer-checkout-page .customer-checkout-terms a {
  color: #177245 !important;
  text-decoration: none !important;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | SIDEBAR CARD
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-sidebar-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-checkout-page .customer-checkout-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}
.customer-checkout-page .customer-checkout-sidebar-card__icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-checkout-page .customer-checkout-sidebar-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-checkout-page .customer-checkout-sidebar-card__header strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | ADDRESS
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-sidebar-address {
  padding: 14px 15px;
}
.customer-checkout-page .customer-checkout-sidebar-address strong {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-checkout-page .customer-checkout-sidebar-address p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | TRUST
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-trust {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 9px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-checkout-page .customer-checkout-trust__icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 18px;
}
.customer-checkout-page .customer-checkout-trust strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-checkout-page .customer-checkout-trust p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-checkout-page {
  /*
  |--------------------------------------------------------------------------
  | MOBILE BAR
  |--------------------------------------------------------------------------
  */
}
.customer-checkout-page .customer-checkout-mobile-bar {
  display: none;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1050px) {
  .customer-checkout-page .customer-checkout-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-checkout-page {
    padding-bottom: 85px;
  }
  .customer-checkout-page .customer-checkout-layout {
    grid-template-columns: 1fr;
  }
  .customer-checkout-page .customer-checkout-sidebar {
    order: -1;
  }
  .customer-checkout-page .customer-checkout-mobile-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 15px;
    border-top: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.07);
  }
  .customer-checkout-page .customer-checkout-mobile-bar > div span {
    display: block;
    margin-bottom: 2px;
    color: #999;
    font-size: 14px;
  }
  .customer-checkout-page .customer-checkout-mobile-bar > div strong {
    display: block;
    color: #177245;
    font-size: 20px;
    font-weight: 700;
  }
  .customer-checkout-page .customer-checkout-mobile-bar > a {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    border-radius: 7px;
    background: #177245;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  .customer-checkout-page .customer-checkout-payment-btn {
    display: none;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-checkout-page .customer-checkout-header h1 {
    font-size: 22px !important;
  }
  .customer-checkout-page .customer-checkout-steps {
    overflow-x: auto;
    padding-bottom: 3px;
  }
  .customer-checkout-page .customer-checkout-step {
    flex: 0 0 auto;
  }
  .customer-checkout-page .customer-checkout-step > div:last-child {
    display: none;
  }
  .customer-checkout-page .customer-checkout-step__line {
    flex: 0 0 35px;
    margin: 0 8px;
  }
  .customer-checkout-page .customer-checkout-card__header {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }
  .customer-checkout-page .customer-checkout-card__header h2 {
    font-size: 19px !important;
  }
  .customer-checkout-page .customer-checkout-form {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .customer-checkout-page .customer-checkout-form__group.full {
    grid-column: auto;
  }
  .customer-checkout-page .customer-checkout-checkbox {
    margin-right: 14px;
    margin-left: 14px;
  }
  .customer-checkout-page .customer-checkout-shipping {
    padding: 14px;
  }
  .customer-checkout-page .customer-checkout-shipping-option {
    align-items: flex-start;
  }
  .customer-checkout-page .customer-checkout-shipping-option__price {
    font-size: 14px;
  }
  .customer-checkout-page .customer-checkout-note {
    padding: 14px;
  }
  .customer-checkout-page .customer-checkout-summary {
    padding: 14px;
  }
  .customer-checkout-page .customer-checkout-summary__header h2 {
    font-size: 19px !important;
  }
  .customer-checkout-page .customer-checkout-summary__total strong {
    font-size: 20px;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-checkout-page .customer-checkout-header h1 {
    font-size: 21px !important;
  }
  .customer-checkout-page .customer-checkout-shipping-option__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 16px;
  }
  .customer-checkout-page .customer-checkout-shipping-option__content strong {
    font-size: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER PAYMENT
|--------------------------------------------------------------------------
*/
.customer-payment-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding-bottom: 30px;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.customer-payment-page .customer-payment-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-payment-page .customer-payment-breadcrumb a:hover {
  color: #0D2B5A !important;
}
.customer-payment-page .customer-payment-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-payment-page .customer-payment-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-header {
  margin-bottom: 20px;
}
.customer-payment-page .customer-payment-header__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-payment-page .customer-payment-header h1 {
  margin: 0 0 6px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-payment-page .customer-payment-header p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | CHECKOUT STEPS
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-steps {
  display: flex;
  align-items: center;
  max-width: 760px;
  margin-bottom: 24px;
}
.customer-payment-page .customer-payment-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.customer-payment-page .customer-payment-step__number {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  color: #999;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-page .customer-payment-step span {
  display: block;
  margin-bottom: 1px;
  color: #999;
  font-size: 14px;
}
.customer-payment-page .customer-payment-step strong {
  display: block;
  color: #999;
  font-size: 14px;
  font-weight: 600;
}
.customer-payment-page .customer-payment-step.active .customer-payment-step__number {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.customer-payment-page .customer-payment-step.active span,
.customer-payment-page .customer-payment-step.active strong {
  color: #177245;
}
.customer-payment-page .customer-payment-step.completed .customer-payment-step__number {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
}
.customer-payment-page .customer-payment-step.completed span {
  color: #177245;
}
.customer-payment-page .customer-payment-step.completed strong {
  color: #0D2B5A;
}
.customer-payment-page .customer-payment-step__line {
  width: 100%;
  height: 1px;
  margin: 0 14px;
  background: #ddd;
}
.customer-payment-page .customer-payment-step__line.completed {
  background: rgba(15, 61, 46, 0.3);
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | LAYOUT
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
.customer-payment-page .customer-payment-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.customer-payment-page .customer-payment-sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | CARD
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-payment-page .customer-payment-card__header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  border-bottom: 1px solid #ddd;
}
.customer-payment-page .customer-payment-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-payment-page .customer-payment-card__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | SECURE LABEL
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-secure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}
.customer-payment-page .customer-payment-secure i {
  font-size: 15px;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | PAYMENT METHODS
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-methods {
  display: flex;
  flex-direction: column;
  padding: 7px 18px 16px;
}
.customer-payment-page .customer-payment-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  padding: 12px 13px;
  margin-top: 9px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.customer-payment-page .customer-payment-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.customer-payment-page .customer-payment-method:hover {
  border-color: rgba(15, 61, 46, 0.35);
}
.customer-payment-page .customer-payment-method.active {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.025);
  box-shadow: 0 0 0 1px rgba(15, 61, 46, 0.04);
}
.customer-payment-page .customer-payment-method__radio {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #bbb;
  border-radius: 50%;
}
.customer-payment-page .customer-payment-method__radio span {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  background: transparent;
}
.customer-payment-page .customer-payment-method.active .customer-payment-page .customer-payment-method__radio {
  border-color: #177245;
}
.customer-payment-page .customer-payment-method.active .customer-payment-page .customer-payment-method__radio span {
  background: #177245;
}
.customer-payment-page .customer-payment-method__icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #f3f5f4;
  color: #0D2B5A;
  font-size: 18px;
}
.customer-payment-page .customer-payment-method__icon.paypal {
  color: #355c8c;
}
.customer-payment-page .customer-payment-method__icon.apple {
  color: #111;
}
.customer-payment-page .customer-payment-method__icon.cod {
  color: #9b6a19;
}
.customer-payment-page .customer-payment-method__content {
  flex: 1;
  min-width: 0;
}
.customer-payment-page .customer-payment-method__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-page .customer-payment-method__content small {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.4;
}
.customer-payment-page .customer-payment-method__cards {
  display: flex;
  align-items: center;
  gap: 4px;
}
.customer-payment-page .customer-payment-method__cards span {
  min-width: 32px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  color: #555;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | CARD FORM
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}
.customer-payment-page .customer-payment-form__group {
  min-width: 0;
}
.customer-payment-page .customer-payment-form__group.full {
  grid-column: 1/-1;
}
.customer-payment-page .customer-payment-form__group label {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-payment-page .customer-payment-form__group > input {
  width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.customer-payment-page .customer-payment-form__group > input::placeholder {
  color: #aaa;
}
.customer-payment-page .customer-payment-form__group > input:focus {
  border-color: rgba(15, 61, 46, 0.5);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.06);
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | INPUT WITH ICON
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-input {
  position: relative;
}
.customer-payment-page .customer-payment-input i {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #999;
  font-size: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.customer-payment-page .customer-payment-input input {
  width: 100%;
  height: 43px;
  padding: 0 65px 0 38px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.customer-payment-page .customer-payment-input input:focus {
  border-color: rgba(15, 61, 46, 0.5);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.06);
}
.customer-payment-page .customer-payment-input > i:first-child {
  right: auto;
  left: 12px;
}
.customer-payment-page .customer-payment-input__brand {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #555;
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-50%);
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | SAVE CARD
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-save-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 18px;
  color: #777;
  font-size: 14px;
  cursor: pointer;
}
.customer-payment-page .customer-payment-save-card input {
  width: 15px;
  height: 15px;
  accent-color: #177245;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | BILLING ADDRESS
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-address-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 18px 10px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.customer-payment-page .customer-payment-address-option:last-child {
  margin-bottom: 18px;
}
.customer-payment-page .customer-payment-address-option input {
  position: absolute;
  opacity: 0;
}
.customer-payment-page .customer-payment-address-option:has(input:checked) {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.025);
}
.customer-payment-page .customer-payment-address-option__radio {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1.5px solid #bbb;
  border-radius: 50%;
}
.customer-payment-page .customer-payment-address-option__radio span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}
.customer-payment-page .customer-payment-address-option:has(input:checked) .customer-payment-page .customer-payment-address-option__radio {
  border-color: #177245;
}
.customer-payment-page .customer-payment-address-option:has(input:checked) .customer-payment-page .customer-payment-address-option__radio span {
  background: #177245;
}
.customer-payment-page .customer-payment-address-option strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-payment-page .customer-payment-address-option small {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.45;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | SECURITY
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-security {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-payment-page .customer-payment-security > i {
  color: #177245;
  font-size: 20px;
}
.customer-payment-page .customer-payment-security strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-page .customer-payment-security p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER SUMMARY
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-summary {
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-payment-page .customer-payment-summary__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ddd;
}
.customer-payment-page .customer-payment-summary__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-payment-page .customer-payment-summary__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.customer-payment-page .customer-payment-summary__header a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | PRODUCTS
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-product {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 13px;
}
.customer-payment-page .customer-payment-product__image {
  position: relative;
  width: 52px;
  height: 58px;
  overflow: visible;
}
.customer-payment-page .customer-payment-product__image img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}
.customer-payment-page .customer-payment-product__image > span {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 9px;
  background: #177245;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-page .customer-payment-product__info {
  min-width: 0;
}
.customer-payment-page .customer-payment-product__info strong {
  display: block;
  margin-bottom: 3px;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-payment-page .customer-payment-product__info span {
  display: block;
  color: #888;
  font-size: 14px;
}
.customer-payment-page .customer-payment-product__price {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | SUMMARY TOTALS
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-summary__totals {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}
.customer-payment-page .customer-payment-summary__totals > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}
.customer-payment-page .customer-payment-summary__totals > div:last-child {
  margin-bottom: 0;
}
.customer-payment-page .customer-payment-summary__totals span {
  color: #777;
  font-size: 14px;
}
.customer-payment-page .customer-payment-summary__totals strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-payment-page .customer-payment-summary__totals strong.discount {
  color: #a35757;
}
.customer-payment-page .customer-payment-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ddd;
}
.customer-payment-page .customer-payment-summary__total span {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-payment-page .customer-payment-summary__total strong {
  color: #177245;
  font-size: 22px;
  font-weight: 700;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | PLACE ORDER
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-place-order {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 17px;
  padding: 0 15px;
  border: 1px solid #177245;
  border-radius: 8px;
  background: #177245;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.customer-payment-page .customer-payment-place-order:hover {
  border-color: #0D2B5A;
  background: #0D2B5A;
}
.customer-payment-page .customer-payment-place-order:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.customer-payment-page .customer-payment-place-order i {
  font-size: 16px;
}
.customer-payment-page .customer-payment-loading {
  animation: customer-payment-spin 0.8s linear infinite;
}
@keyframes customer-payment-spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.customer-payment-page .customer-payment-summary__note {
  margin: 11px 0 0 !important;
  color: #999 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  text-align: center;
}
.customer-payment-page .customer-payment-summary__note a {
  color: #177245 !important;
  text-decoration: none !important;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | SIDEBAR CARD
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-sidebar-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-payment-page .customer-payment-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}
.customer-payment-page .customer-payment-sidebar-card__header > i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-payment-page .customer-payment-sidebar-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-payment-page .customer-payment-sidebar-card__header strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-page .customer-payment-sidebar-card__body {
  padding: 13px 15px;
}
.customer-payment-page .customer-payment-sidebar-card__body span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-payment-page .customer-payment-sidebar-card__body strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | SECURE BOX
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-secure-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 9px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-payment-page .customer-payment-secure-box > i {
  color: #177245;
  font-size: 20px;
}
.customer-payment-page .customer-payment-secure-box strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-page .customer-payment-secure-box p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-payment-page {
  /*
  |--------------------------------------------------------------------------
  | MOBILE ACTION
  |--------------------------------------------------------------------------
  */
}
.customer-payment-page .customer-payment-mobile-action {
  display: none;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1050px) {
  .customer-payment-page .customer-payment-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-payment-page {
    padding-bottom: 85px;
  }
  .customer-payment-page .customer-payment-steps {
    width: 100%;
  }
  .customer-payment-page .customer-payment-step__line {
    margin: 0 8px;
  }
  .customer-payment-page .customer-payment-step strong {
    font-size: 14px;
  }
  .customer-payment-page .customer-payment-layout {
    grid-template-columns: 1fr;
  }
  .customer-payment-page .customer-payment-sidebar {
    order: -1;
  }
  .customer-payment-page .customer-payment-summary {
    margin-bottom: 0;
  }
  .customer-payment-page .customer-payment-mobile-action {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 15px;
    border-top: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.07);
  }
  .customer-payment-page .customer-payment-mobile-action > div span {
    display: block;
    margin-bottom: 2px;
    color: #999;
    font-size: 14px;
  }
  .customer-payment-page .customer-payment-mobile-action > div strong {
    display: block;
    color: #177245;
    font-size: 20px;
    font-weight: 700;
  }
  .customer-payment-page .customer-payment-mobile-action button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    border: 1px solid #177245;
    border-radius: 7px;
    background: #177245;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .customer-payment-page .customer-payment-place-order {
    display: none;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-payment-page .customer-payment-header h1 {
    font-size: 22px !important;
  }
  .customer-payment-page .customer-payment-steps {
    overflow-x: auto;
    padding-bottom: 3px;
  }
  .customer-payment-page .customer-payment-step {
    flex: 0 0 auto;
  }
  .customer-payment-page .customer-payment-step > div:last-child {
    display: none;
  }
  .customer-payment-page .customer-payment-step__line {
    flex: 0 0 35px;
    margin: 0 8px;
  }
  .customer-payment-page .customer-payment-card__header {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }
  .customer-payment-page .customer-payment-card__header h2 {
    font-size: 19px !important;
  }
  .customer-payment-page .customer-payment-methods {
    padding: 5px 14px 14px;
  }
  .customer-payment-page .customer-payment-method {
    align-items: flex-start;
    min-height: 65px;
    padding: 10px;
  }
  .customer-payment-page .customer-payment-method__cards {
    display: none;
  }
  .customer-payment-page .customer-payment-form {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .customer-payment-page .customer-payment-form__group.full {
    grid-column: auto;
  }
  .customer-payment-page .customer-payment-save-card {
    margin: 0 14px 14px;
  }
  .customer-payment-page .customer-payment-address-option {
    margin-right: 14px;
    margin-left: 14px;
  }
  .customer-payment-page .customer-payment-summary {
    padding: 14px;
  }
  .customer-payment-page .customer-payment-summary__header h2 {
    font-size: 19px !important;
  }
  .customer-payment-page .customer-payment-product__price {
    font-size: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-payment-page .customer-payment-header h1 {
    font-size: 21px !important;
  }
  .customer-payment-page .customer-payment-method__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 16px;
  }
  .customer-payment-page .customer-payment-method__content strong {
    font-size: 14px;
  }
  .customer-payment-page .customer-payment-summary__total strong {
    font-size: 20px;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER PAYMENT SUCCESS
|--------------------------------------------------------------------------
*/
.customer-payment-success-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 30px;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-payment-success-page .customer-payment-success-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.customer-payment-success-page .customer-payment-success-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-payment-success-page .customer-payment-success-breadcrumb a:hover {
  color: #0D2B5A !important;
}
.customer-payment-success-page .customer-payment-success-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-payment-success-page .customer-payment-success-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-payment-success-page {
  /*
  |--------------------------------------------------------------------------
  | SUCCESS CARD
  |--------------------------------------------------------------------------
  */
}
.customer-payment-success-page .customer-payment-success-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid rgba(15, 61, 46, 0.14);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.customer-payment-success-page .customer-payment-success-card__icon {
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.09);
  color: #177245;
  font-size: 32px;
  box-shadow: 0 0 0 7px rgba(15, 61, 46, 0.035);
}
.customer-payment-success-page .customer-payment-success-card__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-payment-success-page .customer-payment-success-card h1 {
  margin: 0 0 10px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-payment-success-page .customer-payment-success-card__description {
  max-width: 610px;
  margin: 0 auto 25px !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.customer-payment-success-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER INFORMATION
  |--------------------------------------------------------------------------
  */
}
.customer-payment-success-page .customer-payment-success-order {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fafafa;
}
.customer-payment-success-page .customer-payment-success-order > div {
  min-width: 0;
  padding: 13px;
  border-right: 1px solid #ddd;
}
.customer-payment-success-page .customer-payment-success-order > div:last-child {
  border-right: 0;
}
.customer-payment-success-page .customer-payment-success-order span {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
.customer-payment-success-page .customer-payment-success-order strong {
  display: block;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-payment-success-page {
  /*
  |--------------------------------------------------------------------------
  | CONFIRMATION
  |--------------------------------------------------------------------------
  */
}
.customer-payment-success-page .customer-payment-success-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 15px;
  padding: 14px;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.035);
  text-align: left;
}
.customer-payment-success-page .customer-payment-success-confirmation__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 18px;
}
.customer-payment-success-page .customer-payment-success-confirmation strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-success-page .customer-payment-success-confirmation p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-payment-success-page {
  /*
  |--------------------------------------------------------------------------
  | DELIVERY
  |--------------------------------------------------------------------------
  */
}
.customer-payment-success-page .customer-payment-success-delivery {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: left;
}
.customer-payment-success-page .customer-payment-success-delivery__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 19px;
}
.customer-payment-success-page .customer-payment-success-delivery span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-payment-success-page .customer-payment-success-delivery strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-payment-success-page .customer-payment-success-delivery p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-payment-success-page .customer-payment-success-delivery__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex: 0 0 auto;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-payment-success-page .customer-payment-success-delivery__link:hover {
  color: #0D2B5A !important;
}
.customer-payment-success-page {
  /*
  |--------------------------------------------------------------------------
  | ACTIONS
  |--------------------------------------------------------------------------
  */
}
.customer-payment-success-page .customer-payment-success-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 17px;
}
.customer-payment-success-page .customer-payment-success-btn {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.customer-payment-success-page .customer-payment-success-btn i {
  font-size: 16px;
}
.customer-payment-success-page .customer-payment-success-btn:hover {
  border-color: #177245;
  color: #177245 !important;
  transform: translateY(-1px);
}
.customer-payment-success-page .customer-payment-success-btn.primary {
  border-color: #177245;
  background: #177245;
  color: #fff !important;
}
.customer-payment-success-page .customer-payment-success-btn.primary:hover {
  border-color: #0D2B5A;
  background: #0D2B5A;
  color: #fff !important;
}
.customer-payment-success-page {
  /*
  |--------------------------------------------------------------------------
  | CONTINUE SHOPPING
  |--------------------------------------------------------------------------
  */
}
.customer-payment-success-page .customer-payment-success-continue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #777 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-payment-success-page .customer-payment-success-continue:hover {
  color: #177245 !important;
}
.customer-payment-success-page .customer-payment-success-continue i {
  font-size: 15px;
}
.customer-payment-success-page {
  /*
  |--------------------------------------------------------------------------
  | WHAT'S NEXT
  |--------------------------------------------------------------------------
  */
}
.customer-payment-success-page .customer-payment-success-next {
  max-width: 820px;
  margin: 18px auto 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-payment-success-page .customer-payment-success-next__header {
  padding: 16px 18px;
  border-bottom: 1px solid #ddd;
}
.customer-payment-success-page .customer-payment-success-next__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-payment-success-page .customer-payment-success-next__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-payment-success-page .customer-payment-success-next__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.customer-payment-success-page .customer-payment-success-next__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-height: 145px;
  padding: 20px 13px;
  border-right: 1px solid #ddd;
  text-align: center;
}
.customer-payment-success-page .customer-payment-success-next__step:last-child {
  border-right: 0;
}
.customer-payment-success-page .customer-payment-success-next__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  right: -1px;
  width: 1px;
  height: 0;
}
.customer-payment-success-page .customer-payment-success-next__number {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  color: #aaa;
  font-size: 15px;
}
.customer-payment-success-page .customer-payment-success-next__step.completed .customer-payment-success-page .customer-payment-success-next__number {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
}
.customer-payment-success-page .customer-payment-success-next__step.active .customer-payment-success-page .customer-payment-success-next__number {
  border-color: #177245;
  background: #177245;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(15, 61, 46, 0.07);
}
.customer-payment-success-page .customer-payment-success-next__step strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-success-page .customer-payment-success-next__step p {
  max-width: 160px;
  margin: 0 !important;
  color: #888 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-payment-success-page {
  /*
  |--------------------------------------------------------------------------
  | SUPPORT
  |--------------------------------------------------------------------------
  */
}
.customer-payment-success-page .customer-payment-success-support {
  max-width: 820px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px auto 0;
  padding: 15px 17px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-payment-success-page .customer-payment-success-support__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-payment-success-page .customer-payment-success-support h2 {
  margin: 0 0 3px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.customer-payment-success-page .customer-payment-success-support p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-payment-success-page .customer-payment-success-support > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex: 0 0 auto;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-payment-success-page .customer-payment-success-support > a i {
  font-size: 15px;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 900px) {
  .customer-payment-success-page .customer-payment-success-order {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-payment-success-page .customer-payment-success-order > div:nth-child(2) {
    border-right: 0;
  }
  .customer-payment-success-page .customer-payment-success-order > div:nth-child(-n+2) {
    border-bottom: 1px solid #ddd;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-payment-success-page .customer-payment-success-card {
    padding: 32px 24px;
  }
  .customer-payment-success-page .customer-payment-success-next__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-payment-success-page .customer-payment-success-next__step {
    border-bottom: 1px solid #ddd;
  }
  .customer-payment-success-page .customer-payment-success-next__step:nth-child(2) {
    border-right: 0;
  }
  .customer-payment-success-page .customer-payment-success-next__step:nth-child(3), .customer-payment-success-page .customer-payment-success-next__step:nth-child(4) {
    border-bottom: 0;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-payment-success-page .customer-payment-success-card {
    padding: 30px 15px;
    border-radius: 10px;
  }
  .customer-payment-success-page .customer-payment-success-card__icon {
    width: 58px;
    height: 58px;
    font-size: 27px;
  }
  .customer-payment-success-page .customer-payment-success-card h1 {
    font-size: 22px !important;
  }
  .customer-payment-success-page .customer-payment-success-order {
    grid-template-columns: 1fr;
  }
  .customer-payment-success-page .customer-payment-success-order > div {
    border-right: 0 !important;
    border-bottom: 1px solid #ddd;
  }
  .customer-payment-success-page .customer-payment-success-order > div:last-child {
    border-bottom: 0;
  }
  .customer-payment-success-page .customer-payment-success-confirmation {
    align-items: flex-start;
  }
  .customer-payment-success-page .customer-payment-success-delivery {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .customer-payment-success-page .customer-payment-success-delivery__link {
    width: 100%;
    margin-left: 53px;
  }
  .customer-payment-success-page .customer-payment-success-actions {
    flex-direction: column;
  }
  .customer-payment-success-page .customer-payment-success-btn {
    width: 100%;
  }
  .customer-payment-success-page .customer-payment-success-next__header {
    padding: 14px;
  }
  .customer-payment-success-page .customer-payment-success-next__header h2 {
    font-size: 19px !important;
  }
  .customer-payment-success-page .customer-payment-success-next__steps {
    grid-template-columns: 1fr;
  }
  .customer-payment-success-page .customer-payment-success-next__step {
    min-height: auto;
    align-items: flex-start;
    flex-direction: row;
    padding: 15px;
    border-right: 0 !important;
    border-bottom: 1px solid #ddd !important;
    text-align: left;
  }
  .customer-payment-success-page .customer-payment-success-next__step:last-child {
    border-bottom: 0 !important;
  }
  .customer-payment-success-page .customer-payment-success-next__step p {
    max-width: none;
  }
  .customer-payment-success-page .customer-payment-success-support {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .customer-payment-success-page .customer-payment-success-support > a {
    width: 100%;
    margin-left: 52px;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-payment-success-page .customer-payment-success-card h1 {
    font-size: 21px !important;
  }
  .customer-payment-success-page .customer-payment-success-next__header h2 {
    font-size: 18px !important;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER PAYMENT RESULT
|--------------------------------------------------------------------------
*/
.customer-payment-result-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-payment-result-page .customer-payment-result-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.customer-payment-result-page .customer-payment-result-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-payment-result-page .customer-payment-result-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-payment-result-page .customer-payment-result-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-payment-result-page {
  /*
  |--------------------------------------------------------------------------
  | RESULT CARD
  |--------------------------------------------------------------------------
  */
}
.customer-payment-result-page .customer-payment-result-card {
  max-width: 780px;
  margin: 0 auto;
  padding: 42px 40px;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.customer-payment-result-page .customer-payment-result-card__icon {
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(190, 65, 65, 0.09);
  color: #b84d4d;
  font-size: 32px;
}
.customer-payment-result-page .customer-payment-result-card__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #b84d4d;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-payment-result-page .customer-payment-result-card h1 {
  margin: 0 0 10px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-payment-result-page .customer-payment-result-card__description {
  max-width: 590px;
  margin: 0 auto 25px !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.customer-payment-result-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER INFO
  |--------------------------------------------------------------------------
  */
}
.customer-payment-result-page .customer-payment-result-order {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fafafa;
}
.customer-payment-result-page .customer-payment-result-order > div {
  padding: 14px;
  border-right: 1px solid #ddd;
}
.customer-payment-result-page .customer-payment-result-order > div:last-child {
  border-right: 0;
}
.customer-payment-result-page .customer-payment-result-order span {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
.customer-payment-result-page .customer-payment-result-order strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-result-page {
  /*
  |--------------------------------------------------------------------------
  | ALERT
  |--------------------------------------------------------------------------
  */
}
.customer-payment-result-page .customer-payment-result-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 23px;
  padding: 14px;
  border: 1px solid rgba(190, 65, 65, 0.16);
  border-radius: 8px;
  background: rgba(190, 65, 65, 0.045);
  text-align: left;
}
.customer-payment-result-page .customer-payment-result-alert > i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #b84d4d;
  font-size: 19px;
}
.customer-payment-result-page .customer-payment-result-alert strong {
  display: block;
  margin-bottom: 4px;
  color: #9f4040;
  font-size: 14px;
  font-weight: 700;
}
.customer-payment-result-page .customer-payment-result-alert p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.customer-payment-result-page {
  /*
  |--------------------------------------------------------------------------
  | ACTIONS
  |--------------------------------------------------------------------------
  */
}
.customer-payment-result-page .customer-payment-result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 18px;
}
.customer-payment-result-page .customer-payment-result-btn {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.customer-payment-result-page .customer-payment-result-btn i {
  font-size: 16px;
}
.customer-payment-result-page .customer-payment-result-btn:hover {
  border-color: #177245;
  color: #177245 !important;
}
.customer-payment-result-page .customer-payment-result-btn.primary {
  border-color: #177245;
  background: #177245;
  color: #fff !important;
}
.customer-payment-result-page .customer-payment-result-btn.primary:hover {
  border-color: #0D2B5A;
  background: #0D2B5A;
  color: #fff !important;
}
.customer-payment-result-page {
  /*
  |--------------------------------------------------------------------------
  | BACK LINK
  |--------------------------------------------------------------------------
  */
}
.customer-payment-result-page .customer-payment-result-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #777 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-payment-result-page .customer-payment-result-back:hover {
  color: #177245 !important;
}
.customer-payment-result-page .customer-payment-result-back i {
  font-size: 15px;
}
.customer-payment-result-page {
  /*
  |--------------------------------------------------------------------------
  | HELP
  |--------------------------------------------------------------------------
  */
}
.customer-payment-result-page .customer-payment-result-help {
  max-width: 780px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px auto 0;
  padding: 15px 17px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-payment-result-page .customer-payment-result-help__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-payment-result-page .customer-payment-result-help h2 {
  margin: 0 0 3px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.customer-payment-result-page .customer-payment-result-help p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-payment-result-page .customer-payment-result-help > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex: 0 0 auto;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-payment-result-page .customer-payment-result-help > a i {
  font-size: 15px;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-payment-result-page .customer-payment-result-card {
    padding: 35px 25px;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-payment-result-page .customer-payment-result-card {
    padding: 30px 16px;
    border-radius: 10px;
  }
  .customer-payment-result-page .customer-payment-result-card__icon {
    width: 58px;
    height: 58px;
    font-size: 27px;
  }
  .customer-payment-result-page .customer-payment-result-card h1 {
    font-size: 22px !important;
  }
  .customer-payment-result-page .customer-payment-result-order {
    grid-template-columns: 1fr;
  }
  .customer-payment-result-page .customer-payment-result-order > div {
    border-right: 0;
    border-bottom: 1px solid #ddd;
  }
  .customer-payment-result-page .customer-payment-result-order > div:last-child {
    border-bottom: 0;
  }
  .customer-payment-result-page .customer-payment-result-actions {
    flex-direction: column;
  }
  .customer-payment-result-page .customer-payment-result-btn {
    width: 100%;
  }
  .customer-payment-result-page .customer-payment-result-help {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .customer-payment-result-page .customer-payment-result-help > a {
    width: 100%;
    margin-left: 52px;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-payment-result-page .customer-payment-result-card h1 {
    font-size: 21px !important;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER ORDERS
|--------------------------------------------------------------------------
*/
.customer-orders-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-orders-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.customer-orders-page .customer-orders-header__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-orders-page .customer-orders-header h1 {
  margin: 0 0 7px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
.customer-orders-page .customer-orders-header p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.customer-orders-page .customer-orders-header__shop {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border: 1px solid #177245;
  border-radius: 8px;
  background: #177245;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.customer-orders-page .customer-orders-header__shop i {
  font-size: 16px;
}
.customer-orders-page .customer-orders-header__shop:hover {
  color: #fff !important;
  opacity: 0.92;
  transform: translateY(-1px);
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | SUMMARY
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-orders-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.customer-orders-page .customer-orders-summary__card {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-orders-page .customer-orders-summary__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-orders-page .customer-orders-summary span {
  display: block;
  margin-bottom: 3px;
  color: #888;
  font-size: 14px;
  line-height: 1.4;
}
.customer-orders-page .customer-orders-summary strong {
  display: block;
  color: #0D2B5A;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | MAIN CARD
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-orders-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | TOOLBAR
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-orders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid #ddd;
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | FILTER TABS
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-orders-tabs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.customer-orders-page .customer-orders-tabs::-webkit-scrollbar {
  display: none;
}
.customer-orders-page .customer-orders-tab {
  position: relative;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 15px;
  border: 0;
  background: transparent;
  color: #777;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.customer-orders-page .customer-orders-tab span {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 11px;
  background: #f1f1f1;
  color: #777;
  font-size: 14px;
}
.customer-orders-page .customer-orders-tab::after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: -1px;
  left: 15px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #177245;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.customer-orders-page .customer-orders-tab:hover, .customer-orders-page .customer-orders-tab.active {
  color: #177245;
}
.customer-orders-page .customer-orders-tab.active span {
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
}
.customer-orders-page .customer-orders-tab.active::after {
  transform: scaleX(1);
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | SEARCH
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-orders-search {
  position: relative;
  width: 230px;
  flex: 0 0 230px;
}
.customer-orders-page .customer-orders-search i {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #999;
  font-size: 17px;
  transform: translateY(-50%);
  pointer-events: none;
}
.customer-orders-page .customer-orders-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 38px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: 0;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.customer-orders-page .customer-orders-search input::placeholder {
  color: #aaa;
}
.customer-orders-page .customer-orders-search input:focus {
  border-color: rgba(15, 61, 46, 0.45);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.06);
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER LIST
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-orders-list {
  display: flex;
  flex-direction: column;
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER ITEM
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-order-item {
  padding: 20px;
  border-bottom: 1px solid #ddd;
  background: #fff;
}
.customer-orders-page .customer-order-item[hidden] {
  display: none !important;
}
.customer-orders-page .customer-order-item:last-child {
  border-bottom: 0;
}
.customer-orders-page .customer-order-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px;
}
.customer-orders-page .customer-order-item__number span {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
.customer-orders-page .customer-order-item__number strong {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-orders-page .customer-order-item__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 25px;
  align-items: center;
}
.customer-orders-page .customer-order-item__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.customer-orders-page .customer-order-item__meta > div {
  padding-left: 15px;
  border-left: 1px solid #ddd;
}
.customer-orders-page .customer-order-item__meta span {
  display: block;
  margin-bottom: 5px;
  color: #999;
  font-size: 14px;
}
.customer-orders-page .customer-order-item__meta strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-orders-page .customer-order-item__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | STATUS
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-order-status {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.customer-orders-page .customer-order-status i {
  font-size: 15px;
}
.customer-orders-page .customer-order-status.delivered {
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
}
.customer-orders-page .customer-order-status.shipped {
  background: rgba(53, 92, 140, 0.09);
  color: #355c8c;
}
.customer-orders-page .customer-order-status.processing {
  background: rgba(196, 135, 28, 0.1);
  color: #a66e09;
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER PRODUCTS
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-order-products {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.customer-orders-page .customer-order-product {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.customer-orders-page .customer-order-product__image {
  width: 64px;
  height: 72px;
  flex: 0 0 64px;
  overflow: hidden;
  border-radius: 7px;
  background: #f4f4f4;
}
.customer-orders-page .customer-order-product__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.customer-orders-page .customer-order-product__info {
  min-width: 0;
}
.customer-orders-page .customer-order-product__info strong {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-orders-page .customer-order-product__info span {
  display: block;
  margin-bottom: 3px;
  color: #777;
  font-size: 14px;
}
.customer-orders-page .customer-order-product__info small {
  display: block;
  color: #999;
  font-size: 14px;
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | ACTION BUTTONS
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-order-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.customer-orders-page .customer-order-action i {
  font-size: 15px;
}
.customer-orders-page .customer-order-action:hover {
  border-color: #177245;
  color: #177245 !important;
}
.customer-orders-page .customer-order-action.primary {
  border-color: #177245;
  background: #177245;
  color: #fff !important;
}
.customer-orders-page .customer-order-action.primary:hover {
  background: #0D2B5A;
  border-color: #0D2B5A;
  color: #fff !important;
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | EMPTY STATE
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-orders-empty {
  padding: 60px 20px;
  text-align: center;
}
.customer-orders-page .customer-orders-empty[hidden] {
  display: none !important;
}
.customer-orders-page .customer-orders-empty__icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 24px;
}
.customer-orders-page .customer-orders-empty h2 {
  margin: 0 0 7px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.customer-orders-page .customer-orders-empty p {
  margin: 0 0 16px !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-orders-page .customer-orders-empty button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #177245;
  border-radius: 7px;
  background: #177245;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.customer-orders-page {
  /*
  |--------------------------------------------------------------------------
  | PAGINATION
  |--------------------------------------------------------------------------
  */
}
.customer-orders-page .customer-orders-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 20px;
  border-top: 1px solid #ddd;
}
.customer-orders-page .customer-orders-pagination button {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.customer-orders-page .customer-orders-pagination button:hover:not(:disabled), .customer-orders-page .customer-orders-pagination button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.customer-orders-page .customer-orders-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.customer-orders-page .customer-orders-pagination button i {
  font-size: 16px;
}
.customer-orders-page .customer-orders-pagination span {
  padding: 0 4px;
  color: #999;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1100px) {
  .customer-orders-page .customer-orders-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-orders-page .customer-order-item__body {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .customer-orders-page .customer-order-item__meta {
    max-width: 600px;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-orders-page .customer-orders-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-orders-page .customer-orders-header__shop {
    width: 100%;
  }
  .customer-orders-page .customer-orders-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 12px 15px;
  }
  .customer-orders-page .customer-orders-tabs {
    width: 100%;
  }
  .customer-orders-page .customer-orders-search {
    width: 100%;
    flex: 1 1 auto;
  }
  .customer-orders-page .customer-order-item {
    padding: 16px;
  }
  .customer-orders-page .customer-order-products {
    flex-direction: column;
    align-items: flex-start;
  }
  .customer-orders-page .customer-order-product {
    min-width: 0;
    width: 100%;
  }
  .customer-orders-page .customer-order-item__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .customer-orders-page .customer-order-item__actions {
    justify-content: flex-start;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-orders-page .customer-orders-header {
    margin-bottom: 18px;
  }
  .customer-orders-page .customer-orders-header h1 {
    font-size: 22px !important;
  }
  .customer-orders-page .customer-orders-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .customer-orders-page .customer-orders-summary__card {
    min-height: 70px;
    padding: 11px;
    gap: 8px;
  }
  .customer-orders-page .customer-orders-summary__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 16px;
  }
  .customer-orders-page .customer-orders-summary span {
    font-size: 14px;
  }
  .customer-orders-page .customer-orders-summary strong {
    font-size: 18px;
  }
  .customer-orders-page .customer-orders-tabs {
    width: calc(100% + 10px);
    margin-left: -5px;
  }
  .customer-orders-page .customer-orders-tab {
    min-height: 48px;
    padding: 0 10px;
    font-size: 14px;
  }
  .customer-orders-page .customer-orders-tab span {
    min-width: 20px;
    height: 20px;
    font-size: 14px;
  }
  .customer-orders-page .customer-order-item__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .customer-orders-page .customer-order-item__body {
    gap: 16px;
  }
  .customer-orders-page .customer-order-item__meta {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .customer-orders-page .customer-order-item__meta > div {
    padding-left: 10px;
  }
  .customer-orders-page .customer-order-item__meta > div:last-child {
    grid-column: 1/3;
  }
  .customer-orders-page .customer-order-item__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .customer-orders-page .customer-order-action {
    width: 100%;
  }
  .customer-orders-page .customer-order-action.primary {
    grid-column: 1/3;
  }
  .customer-orders-page .customer-orders-pagination {
    padding: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-orders-page .customer-orders-summary {
    grid-template-columns: 1fr;
  }
  .customer-orders-page .customer-orders-tab {
    padding: 0 8px;
  }
  .customer-orders-page .customer-order-item__meta {
    grid-template-columns: 1fr;
  }
  .customer-orders-page .customer-order-item__meta > div:last-child {
    grid-column: auto;
  }
  .customer-orders-page .customer-order-item__actions {
    grid-template-columns: 1fr;
  }
  .customer-orders-page .customer-order-action.primary {
    grid-column: auto;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER ORDER DETAILS
|--------------------------------------------------------------------------
*/
.customer-order-details-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-details-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}
.customer-order-details-page .customer-order-details-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-order-details-page .customer-order-details-breadcrumb a:hover {
  color: #0D2B5A !important;
}
.customer-order-details-page .customer-order-details-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-order-details-page .customer-order-details-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | PAGE HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-details-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.customer-order-details-page .customer-order-details-header__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-order-details-page .customer-order-details-header h1 {
  margin: 0 0 6px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
.customer-order-details-page .customer-order-details-header p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-order-details-page .customer-order-details-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-details-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.customer-order-details-page .customer-order-details-btn i {
  font-size: 16px;
}
.customer-order-details-page .customer-order-details-btn:hover {
  border-color: #177245;
  color: #177245 !important;
}
.customer-order-details-page .customer-order-details-btn.primary {
  border-color: #177245;
  background: #177245;
  color: #fff !important;
}
.customer-order-details-page .customer-order-details-btn.primary:hover {
  border-color: #0D2B5A;
  background: #0D2B5A;
  color: #fff !important;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER STATUS
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-details-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding: 15px 17px;
  border: 1px solid rgba(15, 61, 46, 0.14);
  border-radius: 10px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-order-details-page .customer-order-details-status__main {
  display: flex;
  align-items: center;
  gap: 11px;
}
.customer-order-details-page .customer-order-details-status__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 20px;
}
.customer-order-details-page .customer-order-details-status strong {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 16px;
  font-weight: 700;
}
.customer-order-details-page .customer-order-details-status span {
  display: block;
  color: #777;
  font-size: 14px;
  line-height: 1.5;
}
.customer-order-details-page .customer-order-details-status > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-order-details-page .customer-order-details-status > a i {
  font-size: 15px;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | LAYOUT
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-details-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.customer-order-details-page .customer-order-details-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.customer-order-details-page .customer-order-details-sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | CARD
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-details-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-order-details-page .customer-order-details-card__header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  border-bottom: 1px solid #ddd;
}
.customer-order-details-page .customer-order-details-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-order-details-page .customer-order-details-card__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-order-details-page .customer-order-details-card__header > strong {
  color: #777;
  font-size: 14px;
  font-weight: 600;
}
.customer-order-details-page .customer-order-details-card__header > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER ITEMS
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-details-items {
  display: flex;
  flex-direction: column;
}
.customer-order-details-page .customer-order-details-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 90px 100px;
  gap: 13px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid #ddd;
}
.customer-order-details-page .customer-order-details-item:last-child {
  border-bottom: 0;
}
.customer-order-details-page .customer-order-details-item__image {
  width: 72px;
  height: 80px;
  overflow: hidden;
  border-radius: 7px;
  background: #f3f3f3;
}
.customer-order-details-page .customer-order-details-item__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.customer-order-details-page .customer-order-details-item__info {
  min-width: 0;
}
.customer-order-details-page .customer-order-details-item__info > span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
}
.customer-order-details-page .customer-order-details-item__info h3 {
  margin: 0 0 4px !important;
  overflow: hidden;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-order-details-page .customer-order-details-item__info p {
  margin: 0 0 3px !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-order-details-page .customer-order-details-item__info small {
  color: #999;
  font-size: 14px;
}
.customer-order-details-page .customer-order-details-item__quantity span, .customer-order-details-page .customer-order-details-item__price span {
  display: block;
  margin-bottom: 5px;
  color: #999;
  font-size: 14px;
}
.customer-order-details-page .customer-order-details-item__quantity strong, .customer-order-details-page .customer-order-details-item__price strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-order-details-page .customer-order-details-item__price {
  text-align: right;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | TIMELINE
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-timeline {
  padding: 22px 20px;
}
.customer-order-details-page .customer-order-timeline__item {
  position: relative;
  display: flex;
  gap: 13px;
  min-height: 78px;
}
.customer-order-details-page .customer-order-timeline__item:not(.last)::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 16px;
  width: 1px;
  height: calc(100% - 10px);
  background: #d9d9d9;
}
.customer-order-details-page .customer-order-timeline__item.completed:not(.last)::after {
  background: rgba(15, 61, 46, 0.22);
}
.customer-order-details-page .customer-order-timeline__marker {
  position: relative;
  z-index: 2;
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 16px;
}
.customer-order-details-page .customer-order-timeline__content {
  flex: 1;
  padding-bottom: 18px;
}
.customer-order-details-page .customer-order-timeline__content > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.customer-order-details-page .customer-order-timeline__content strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-order-details-page .customer-order-timeline__content span {
  color: #999;
  font-size: 14px;
}
.customer-order-details-page .customer-order-timeline__content p {
  margin: 5px 0 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | ADDRESS
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-address {
  display: flex;
  gap: 13px;
  padding: 19px;
}
.customer-order-details-page .customer-order-address__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-order-details-page .customer-order-address strong {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-order-details-page .customer-order-address p {
  margin: 0 0 8px !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.customer-order-details-page .customer-order-address span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #777;
  font-size: 14px;
}
.customer-order-details-page .customer-order-address span i {
  color: #177245;
  font-size: 15px;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | SUMMARY CARD
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-summary-card {
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-order-details-page .customer-order-summary-card__header {
  margin-bottom: 17px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ddd;
}
.customer-order-details-page .customer-order-summary-card__header span {
  display: block;
  margin-bottom: 4px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-order-details-page .customer-order-summary-card__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.customer-order-details-page .customer-order-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}
.customer-order-details-page .customer-order-summary-row span {
  color: #777;
  font-size: 14px;
}
.customer-order-details-page .customer-order-summary-row strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-order-details-page .customer-order-summary-row strong.discount {
  color: #b05b5b;
}
.customer-order-details-page .customer-order-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}
.customer-order-details-page .customer-order-summary-total span {
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-order-details-page .customer-order-summary-total strong {
  color: #177245;
  font-size: 22px;
  font-weight: 700;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | PAYMENT
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-payment {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 11px;
  border: 1px solid #eee;
  border-radius: 7px;
  background: #fafafa;
}
.customer-order-details-page .customer-order-payment__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #fff;
  color: #0D2B5A;
  font-size: 16px;
}
.customer-order-details-page .customer-order-payment > div {
  flex: 1;
}
.customer-order-details-page .customer-order-payment > div span {
  display: block;
  margin-bottom: 2px;
  color: #999;
  font-size: 14px;
}
.customer-order-details-page .customer-order-payment > div strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-order-details-page .customer-order-payment > i {
  color: #177245;
  font-size: 17px;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | SIDEBAR CARD
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-sidebar-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-order-details-page .customer-order-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}
.customer-order-details-page .customer-order-sidebar-card__header > i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-order-details-page .customer-order-sidebar-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-order-details-page .customer-order-sidebar-card__header strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-order-details-page .customer-order-sidebar-card__body {
  padding: 15px 16px;
}
.customer-order-details-page .customer-order-sidebar-card__body > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}
.customer-order-details-page .customer-order-sidebar-card__body > div:last-child {
  margin-bottom: 0;
}
.customer-order-details-page .customer-order-sidebar-card__body span {
  color: #999;
  font-size: 14px;
}
.customer-order-details-page .customer-order-sidebar-card__body strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-order-details-page .customer-order-sidebar-card__link {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-top: 1px solid #ddd;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-order-details-page .customer-order-sidebar-card__link i {
  font-size: 15px;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | HELP CARD
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-help-card {
  display: flex;
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(15, 61, 46, 0.14);
  border-radius: 10px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-order-details-page .customer-order-help-card__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 18px;
}
.customer-order-details-page .customer-order-help-card h3 {
  margin: 0 0 5px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.customer-order-details-page .customer-order-help-card p {
  margin: 0 0 9px !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.customer-order-details-page .customer-order-help-card a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-order-details-page {
  /*
  |--------------------------------------------------------------------------
  | FOOTER ACTIONS
  |--------------------------------------------------------------------------
  */
}
.customer-order-details-page .customer-order-details-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1050px) {
  .customer-order-details-page .customer-order-details-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .customer-order-details-page .customer-order-details-item {
    grid-template-columns: 68px minmax(0, 1fr) 70px 85px;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-order-details-page .customer-order-details-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-order-details-page .customer-order-details-header__actions {
    width: 100%;
  }
  .customer-order-details-page .customer-order-details-header__actions .customer-order-details-btn {
    flex: 1;
  }
  .customer-order-details-page .customer-order-details-layout {
    grid-template-columns: 1fr;
  }
  .customer-order-details-page .customer-order-details-sidebar {
    order: -1;
  }
  .customer-order-details-page .customer-order-details-status {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-order-details-page .customer-order-details-status > a {
    padding-left: 53px;
  }
  .customer-order-details-page .customer-order-details-item {
    grid-template-columns: 65px minmax(0, 1fr) 70px;
    gap: 11px;
  }
  .customer-order-details-page .customer-order-details-item__image {
    width: 65px;
    height: 73px;
  }
  .customer-order-details-page .customer-order-details-item__price {
    grid-column: 2/4;
    text-align: left;
    padding-top: 4px;
  }
  .customer-order-details-page .customer-order-details-item__quantity {
    align-self: center;
  }
  .customer-order-details-page .customer-order-timeline__content > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-order-details-page .customer-order-details-breadcrumb {
    margin-bottom: 15px;
  }
  .customer-order-details-page .customer-order-details-header h1 {
    font-size: 22px !important;
  }
  .customer-order-details-page .customer-order-details-header__actions {
    flex-direction: column;
  }
  .customer-order-details-page .customer-order-details-header__actions .customer-order-details-btn {
    width: 100%;
    flex: auto;
  }
  .customer-order-details-page .customer-order-details-status {
    padding: 13px;
  }
  .customer-order-details-page .customer-order-details-status__main {
    align-items: flex-start;
  }
  .customer-order-details-page .customer-order-details-status__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 17px;
  }
  .customer-order-details-page .customer-order-details-status strong {
    font-size: 15px;
  }
  .customer-order-details-page .customer-order-details-card__header {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }
  .customer-order-details-page .customer-order-details-card__header h2 {
    font-size: 19px !important;
  }
  .customer-order-details-page .customer-order-details-item {
    grid-template-columns: 60px minmax(0, 1fr);
    padding: 14px;
  }
  .customer-order-details-page .customer-order-details-item__image {
    width: 60px;
    height: 68px;
  }
  .customer-order-details-page .customer-order-details-item__quantity,
  .customer-order-details-page .customer-order-details-item__price {
    grid-column: 2;
    padding: 0;
    text-align: left;
  }
  .customer-order-details-page .customer-order-details-item__quantity {
    margin-top: -2px;
  }
  .customer-order-details-page .customer-order-details-item__info h3 {
    font-size: 15px !important;
  }
  .customer-order-details-page .customer-order-details-item__info p,
  .customer-order-details-page .customer-order-details-item__info small,
  .customer-order-details-page .customer-order-details-item__quantity span,
  .customer-order-details-page .customer-order-details-item__quantity strong,
  .customer-order-details-page .customer-order-details-item__price span,
  .customer-order-details-page .customer-order-details-item__price strong {
    font-size: 14px !important;
  }
  .customer-order-details-page .customer-order-timeline {
    padding: 18px 14px;
  }
  .customer-order-details-page .customer-order-timeline__content p {
    font-size: 14px !important;
  }
  .customer-order-details-page .customer-order-address {
    padding: 15px;
  }
  .customer-order-details-page .customer-order-details-footer-actions {
    flex-direction: column;
  }
  .customer-order-details-page .customer-order-details-footer-actions .customer-order-details-btn {
    width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-order-details-page .customer-order-details-header h1 {
    font-size: 21px !important;
  }
  .customer-order-details-page .customer-order-details-card__header h2 {
    font-size: 18px !important;
  }
  .customer-order-details-page .customer-order-details-item {
    grid-template-columns: 55px minmax(0, 1fr);
  }
  .customer-order-details-page .customer-order-details-item__image {
    width: 55px;
    height: 62px;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER SHIPMENT
|--------------------------------------------------------------------------
*/
.customer-shipment-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.customer-shipment-page .customer-shipment-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-shipment-page .customer-shipment-breadcrumb a:hover {
  color: #0D2B5A !important;
}
.customer-shipment-page .customer-shipment-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.customer-shipment-page .customer-shipment-header__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-shipment-page .customer-shipment-header h1 {
  margin: 0 0 6px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
.customer-shipment-page .customer-shipment-header p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-shipment-page .customer-shipment-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.customer-shipment-page .customer-shipment-btn i {
  font-size: 16px;
}
.customer-shipment-page .customer-shipment-btn:hover {
  border-color: #177245;
  color: #177245 !important;
  transform: translateY(-1px);
}
.customer-shipment-page .customer-shipment-btn.primary {
  border-color: #177245;
  background: #177245;
  color: #fff !important;
}
.customer-shipment-page .customer-shipment-btn.primary:hover {
  border-color: #0D2B5A;
  background: #0D2B5A;
  color: #fff !important;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | STATUS
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding: 15px 17px;
  border: 1px solid rgba(15, 61, 46, 0.14);
  border-radius: 10px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-shipment-page .customer-shipment-status__main {
  display: flex;
  align-items: center;
  gap: 11px;
}
.customer-shipment-page .customer-shipment-status__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 20px;
}
.customer-shipment-page .customer-shipment-status__main span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-status__main strong {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 16px;
  font-weight: 700;
}
.customer-shipment-page .customer-shipment-status__main p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-shipment-page .customer-shipment-status__date {
  min-width: 150px;
  padding-left: 18px;
  border-left: 1px solid rgba(15, 61, 46, 0.12);
}
.customer-shipment-page .customer-shipment-status__date span {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-status__date strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | LAYOUT
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.customer-shipment-page .customer-shipment-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.customer-shipment-page .customer-shipment-sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | CARD
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-shipment-page .customer-shipment-card__header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  border-bottom: 1px solid #ddd;
}
.customer-shipment-page .customer-shipment-card__header span:not(.customer-shipment-carrier-status) {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-shipment-page .customer-shipment-card__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-shipment-page .customer-shipment-card__header > strong {
  color: #777;
  font-size: 14px;
  font-weight: 600;
}
.customer-shipment-page .customer-shipment-card__header > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | CARRIER
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-carrier {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) minmax(220px, 0.8fr);
  gap: 14px;
  align-items: center;
  padding: 19px;
}
.customer-shipment-page .customer-shipment-carrier__logo {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 22px;
}
.customer-shipment-page .customer-shipment-carrier__info,
.customer-shipment-page .customer-shipment-carrier__tracking {
  min-width: 0;
}
.customer-shipment-page .customer-shipment-carrier__info span,
.customer-shipment-page .customer-shipment-carrier__tracking span {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-carrier__info strong,
.customer-shipment-page .customer-shipment-carrier__tracking strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-shipment-page .customer-shipment-carrier__info p,
.customer-shipment-page .customer-shipment-carrier__tracking p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-shipment-page .customer-shipment-carrier__tracking {
  position: relative;
  padding-left: 18px;
  border-left: 1px solid #ddd;
}
.customer-shipment-page .customer-shipment-carrier__tracking strong {
  padding-right: 40px;
  word-break: break-all;
}
.customer-shipment-page .customer-shipment-copy {
  position: absolute;
  top: 50%;
  right: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A;
  font-size: 15px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.customer-shipment-page .customer-shipment-copy:hover, .customer-shipment-page .customer-shipment-copy.copied {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.05);
  color: #177245;
}
.customer-shipment-page .customer-shipment-carrier-status {
  min-height: 30px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 6px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.customer-shipment-page .customer-shipment-carrier-status i {
  font-size: 15px;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | TIMELINE
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-timeline {
  padding: 22px 20px;
}
.customer-shipment-page .customer-shipment-timeline__item {
  position: relative;
  display: flex;
  gap: 13px;
  min-height: 80px;
}
.customer-shipment-page .customer-shipment-timeline__item:not(.last)::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 16px;
  width: 1px;
  height: calc(100% - 10px);
  background: #ddd;
}
.customer-shipment-page .customer-shipment-timeline__item.completed:not(.last)::after {
  background: rgba(15, 61, 46, 0.22);
}
.customer-shipment-page .customer-shipment-timeline__marker {
  position: relative;
  z-index: 2;
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 16px;
}
.customer-shipment-page .customer-shipment-timeline__content {
  flex: 1;
  padding-bottom: 18px;
}
.customer-shipment-page .customer-shipment-timeline__content > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.customer-shipment-page .customer-shipment-timeline__content strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-shipment-page .customer-shipment-timeline__content span {
  color: #999;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-timeline__content p {
  margin: 5px 0 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | ITEMS
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-items {
  display: flex;
  flex-direction: column;
}
.customer-shipment-page .customer-shipment-item {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr) 70px;
  gap: 13px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid #ddd;
}
.customer-shipment-page .customer-shipment-item:last-child {
  border-bottom: 0;
}
.customer-shipment-page .customer-shipment-item__image {
  width: 65px;
  height: 72px;
  overflow: hidden;
  border-radius: 7px;
  background: #f3f3f3;
}
.customer-shipment-page .customer-shipment-item__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.customer-shipment-page .customer-shipment-item__info {
  min-width: 0;
}
.customer-shipment-page .customer-shipment-item__info span {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-item__info h3 {
  margin: 0 0 4px !important;
  overflow: hidden;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-shipment-page .customer-shipment-item__info p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-shipment-page .customer-shipment-item__qty span {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-item__qty strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | SIDEBAR CARD
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-sidebar-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-shipment-page .customer-shipment-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid #ddd;
}
.customer-shipment-page .customer-shipment-sidebar-card__header > i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-shipment-page .customer-shipment-sidebar-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-sidebar-card__header strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | ADDRESS
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-address {
  padding: 16px;
}
.customer-shipment-page .customer-shipment-address > strong {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-shipment-page .customer-shipment-address p {
  margin: 0 0 9px !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.customer-shipment-page .customer-shipment-address > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #777;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-address > span i {
  color: #177245;
  font-size: 15px;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | PACKAGE
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-package {
  padding: 15px 16px;
}
.customer-shipment-page .customer-shipment-package > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.customer-shipment-page .customer-shipment-package > div:last-child {
  margin-bottom: 0;
}
.customer-shipment-page .customer-shipment-package span {
  color: #999;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-package strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | DELIVERY CARD
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-delivery-card {
  display: flex;
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(15, 61, 46, 0.14);
  border-radius: 10px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-shipment-page .customer-shipment-delivery-card__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 18px;
}
.customer-shipment-page .customer-shipment-delivery-card span {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
.customer-shipment-page .customer-shipment-delivery-card strong {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-shipment-page .customer-shipment-delivery-card p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | TRACK BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-track-btn {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid #177245;
  border-radius: 8px;
  background: #177245;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease;
}
.customer-shipment-page .customer-shipment-track-btn i:last-child {
  margin-left: 2px;
}
.customer-shipment-page .customer-shipment-track-btn:hover {
  background: #0D2B5A;
  border-color: #0D2B5A;
  color: #fff !important;
  transform: translateY(-1px);
}
.customer-shipment-page {
  /*
  |--------------------------------------------------------------------------
  | FOOTER
  |--------------------------------------------------------------------------
  */
}
.customer-shipment-page .customer-shipment-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1050px) {
  .customer-shipment-page .customer-shipment-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .customer-shipment-page .customer-shipment-carrier {
    grid-template-columns: 50px minmax(0, 1fr);
  }
  .customer-shipment-page .customer-shipment-carrier__tracking {
    grid-column: 2;
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid #ddd;
    border-left: 0;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-shipment-page .customer-shipment-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-shipment-page .customer-shipment-header__actions {
    width: 100%;
  }
  .customer-shipment-page .customer-shipment-header__actions .customer-shipment-btn {
    flex: 1;
  }
  .customer-shipment-page .customer-shipment-layout {
    grid-template-columns: 1fr;
  }
  .customer-shipment-page .customer-shipment-sidebar {
    order: -1;
  }
  .customer-shipment-page .customer-shipment-status {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-shipment-page .customer-shipment-status__date {
    width: 100%;
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid rgba(15, 61, 46, 0.12);
    border-left: 0;
  }
  .customer-shipment-page .customer-shipment-card__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-shipment-page .customer-shipment-carrier-status {
    align-self: flex-start;
  }
  .customer-shipment-page .customer-shipment-timeline__content > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-shipment-page .customer-shipment-header h1 {
    font-size: 22px !important;
  }
  .customer-shipment-page .customer-shipment-header__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .customer-shipment-page .customer-shipment-header__actions .customer-shipment-btn {
    width: 100%;
    flex: auto;
  }
  .customer-shipment-page .customer-shipment-status {
    padding: 13px;
  }
  .customer-shipment-page .customer-shipment-status__main {
    align-items: flex-start;
  }
  .customer-shipment-page .customer-shipment-status__icon {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
    font-size: 17px;
  }
  .customer-shipment-page .customer-shipment-card__header {
    padding: 14px;
  }
  .customer-shipment-page .customer-shipment-card__header h2 {
    font-size: 19px !important;
  }
  .customer-shipment-page .customer-shipment-carrier {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 15px;
  }
  .customer-shipment-page .customer-shipment-carrier__logo {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
  .customer-shipment-page .customer-shipment-carrier__tracking {
    grid-column: 1/3;
  }
  .customer-shipment-page .customer-shipment-timeline {
    padding: 18px 14px;
  }
  .customer-shipment-page .customer-shipment-item {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 13px 14px;
  }
  .customer-shipment-page .customer-shipment-item__image {
    width: 58px;
    height: 64px;
  }
  .customer-shipment-page .customer-shipment-item__qty {
    grid-column: 2;
  }
  .customer-shipment-page .customer-shipment-item__info h3 {
    font-size: 15px !important;
  }
  .customer-shipment-page .customer-shipment-footer {
    flex-direction: column;
  }
  .customer-shipment-page .customer-shipment-footer .customer-shipment-btn {
    width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-shipment-page .customer-shipment-header h1 {
    font-size: 21px !important;
  }
  .customer-shipment-page .customer-shipment-card__header h2 {
    font-size: 18px !important;
  }
  .customer-shipment-page .customer-shipment-carrier__tracking strong {
    font-size: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| CUSTOMER TRACKING
|--------------------------------------------------------------------------
*/
.customer-tracking-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: #555555;
  font-size: 14px;
  /*
  |--------------------------------------------------------------------------
  | BREADCRUMB
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.customer-tracking-page .customer-tracking-breadcrumb a {
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.customer-tracking-page .customer-tracking-breadcrumb a:hover {
  color: #0D2B5A !important;
}
.customer-tracking-page .customer-tracking-breadcrumb span {
  color: #777;
  font-size: 14px;
}
.customer-tracking-page .customer-tracking-breadcrumb i {
  color: #aaa;
  font-size: 14px;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | HEADER
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.customer-tracking-page .customer-tracking-header__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.customer-tracking-page .customer-tracking-header h1 {
  margin: 0 0 6px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
.customer-tracking-page .customer-tracking-header p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-tracking-page .customer-tracking-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | BUTTON
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.customer-tracking-page .customer-tracking-btn i {
  font-size: 16px;
}
.customer-tracking-page .customer-tracking-btn:hover {
  border-color: #177245;
  color: #177245 !important;
  transform: translateY(-1px);
}
.customer-tracking-page .customer-tracking-btn.primary {
  border-color: #177245;
  background: #177245;
  color: #fff !important;
}
.customer-tracking-page .customer-tracking-btn.primary:hover {
  border-color: #0D2B5A;
  background: #0D2B5A;
  color: #fff !important;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | SEARCH CARD
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-search-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 18px;
  padding: 17px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-tracking-page .customer-tracking-search-card__content {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.customer-tracking-page .customer-tracking-search-card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 20px;
}
.customer-tracking-page .customer-tracking-search-card h2 {
  margin: 0 0 3px !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.customer-tracking-page .customer-tracking-search-card p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-tracking-page .customer-tracking-number {
  width: 340px;
  display: flex;
  gap: 7px;
  flex: 0 0 340px;
}
.customer-tracking-page .customer-tracking-number input {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: 0;
  background: #fafafa;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.customer-tracking-page .customer-tracking-number button {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.customer-tracking-page .customer-tracking-number button:hover, .customer-tracking-page .customer-tracking-number button.copied {
  border-color: #177245;
  background: rgba(15, 61, 46, 0.05);
  color: #177245;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | CURRENT STATUS
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 61, 46, 0.14);
  border-radius: 10px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-tracking-page .customer-tracking-current__main {
  display: flex;
  align-items: center;
  gap: 11px;
}
.customer-tracking-page .customer-tracking-current__icon {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 20px;
}
.customer-tracking-page .customer-tracking-current__main span {
  display: block;
  margin-bottom: 2px;
  color: #999;
  font-size: 14px;
}
.customer-tracking-page .customer-tracking-current__main h2 {
  margin: 0 0 3px !important;
  color: #177245 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.customer-tracking-page .customer-tracking-current__main p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
}
.customer-tracking-page .customer-tracking-current__location {
  min-width: 170px;
  padding-left: 18px;
  border-left: 1px solid rgba(15, 61, 46, 0.12);
}
.customer-tracking-page .customer-tracking-current__location span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-tracking-page .customer-tracking-current__location strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-tracking-page .customer-tracking-current__location small {
  color: #999;
  font-size: 14px;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | LAYOUT
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.customer-tracking-page .customer-tracking-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.customer-tracking-page .customer-tracking-sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | CARD
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-tracking-page .customer-tracking-card__header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  border-bottom: 1px solid #ddd;
}
.customer-tracking-page .customer-tracking-card__header span:first-child {
  display: block;
  margin-bottom: 3px;
  color: #177245;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-tracking-page .customer-tracking-card__header h2 {
  margin: 0 !important;
  color: #0D2B5A !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | DELIVERED BADGE
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-delivered-badge {
  min-height: 30px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 6px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.customer-tracking-page .customer-tracking-delivered-badge i {
  font-size: 15px;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | TIMELINE
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-timeline {
  padding: 24px 20px;
}
.customer-tracking-page .customer-tracking-timeline__item {
  position: relative;
  display: flex;
  gap: 14px;
  min-height: 88px;
}
.customer-tracking-page .customer-tracking-timeline__item:not(.last)::after {
  content: "";
  position: absolute;
  top: 39px;
  left: 17px;
  width: 1px;
  height: calc(100% - 10px);
  background: #ddd;
}
.customer-tracking-page .customer-tracking-timeline__item.completed:not(.last)::after, .customer-tracking-page .customer-tracking-timeline__item.active:not(.last)::after {
  background: rgba(15, 61, 46, 0.22);
}
.customer-tracking-page .customer-tracking-timeline__marker {
  position: relative;
  z-index: 2;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 61, 46, 0.12);
  border-radius: 50%;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 16px;
}
.customer-tracking-page .customer-tracking-timeline__item.active .customer-tracking-timeline__marker {
  border-color: #177245;
  background: #177245;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(15, 61, 46, 0.08);
}
.customer-tracking-page .customer-tracking-timeline__content {
  flex: 1;
  padding-bottom: 20px;
}
.customer-tracking-page .customer-tracking-timeline__content p {
  margin: 6px 0 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.customer-tracking-page .customer-tracking-timeline__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}
.customer-tracking-page .customer-tracking-timeline__top strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-tracking-page .customer-tracking-timeline__top span {
  display: block;
  color: #999;
  font-size: 14px;
}
.customer-tracking-page .customer-tracking-timeline__top em {
  padding: 4px 8px;
  border-radius: 5px;
  background: #f7f7f7;
  color: #777;
  font-size: 14px;
  font-style: normal;
  white-space: nowrap;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | DELIVERY CARD
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-delivery {
  display: flex;
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(15, 61, 46, 0.14);
  border-radius: 10px;
  background: rgba(15, 61, 46, 0.035);
}
.customer-tracking-page .customer-tracking-delivery__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.08);
  color: #177245;
  font-size: 19px;
}
.customer-tracking-page .customer-tracking-delivery span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-tracking-page .customer-tracking-delivery strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-tracking-page .customer-tracking-delivery p {
  margin: 0 !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | SIDEBAR CARD
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-sidebar-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.customer-tracking-page .customer-tracking-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid #ddd;
}
.customer-tracking-page .customer-tracking-sidebar-card__icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 61, 46, 0.07);
  color: #177245;
  font-size: 18px;
}
.customer-tracking-page .customer-tracking-sidebar-card__header span {
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 14px;
}
.customer-tracking-page .customer-tracking-sidebar-card__header strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 700;
}
.customer-tracking-page .customer-tracking-sidebar-card__body {
  padding: 15px 16px;
}
.customer-tracking-page .customer-tracking-sidebar-card__body > div {
  margin-bottom: 13px;
}
.customer-tracking-page .customer-tracking-sidebar-card__body > div:last-child {
  margin-bottom: 0;
}
.customer-tracking-page .customer-tracking-sidebar-card__body span {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
.customer-tracking-page .customer-tracking-sidebar-card__body strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.customer-tracking-page .customer-tracking-sidebar-card__body strong.success {
  color: #177245;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | ADDRESS
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-address {
  padding: 15px 16px;
}
.customer-tracking-page .customer-tracking-address > strong {
  display: block;
  margin-bottom: 6px;
  color: #0D2B5A;
  font-size: 16px;
  font-weight: 700;
}
.customer-tracking-page .customer-tracking-address p {
  margin: 0 0 9px !important;
  color: #777 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.customer-tracking-page .customer-tracking-address > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #777;
  font-size: 14px;
}
.customer-tracking-page .customer-tracking-address > span i {
  color: #177245;
  font-size: 15px;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | PACKAGE
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-package {
  padding: 15px 16px;
}
.customer-tracking-page .customer-tracking-package > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.customer-tracking-page .customer-tracking-package > div:last-child {
  margin-bottom: 0;
}
.customer-tracking-page .customer-tracking-package span {
  color: #999;
  font-size: 14px;
}
.customer-tracking-page .customer-tracking-package strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | ORDER LINK
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-order-link {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fff;
  color: #0D2B5A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.customer-tracking-page .customer-tracking-order-link > i:first-child {
  color: #177245;
  font-size: 17px;
}
.customer-tracking-page .customer-tracking-order-link span {
  flex: 1;
}
.customer-tracking-page .customer-tracking-order-link > i:last-child {
  color: #999;
  font-size: 15px;
}
.customer-tracking-page .customer-tracking-order-link:hover {
  border-color: #177245;
  color: #177245 !important;
}
.customer-tracking-page {
  /*
  |--------------------------------------------------------------------------
  | FOOTER
  |--------------------------------------------------------------------------
  */
}
.customer-tracking-page .customer-tracking-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (max-width: 1050px) {
  .customer-tracking-page .customer-tracking-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .customer-tracking-page .customer-tracking-number {
    width: 300px;
    flex-basis: 300px;
  }
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .customer-tracking-page .customer-tracking-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-tracking-page .customer-tracking-header__actions {
    width: 100%;
  }
  .customer-tracking-page .customer-tracking-header__actions .customer-tracking-btn {
    flex: 1;
  }
  .customer-tracking-page .customer-tracking-search-card {
    align-items: stretch;
    flex-direction: column;
  }
  .customer-tracking-page .customer-tracking-number {
    width: 100%;
    flex-basis: auto;
  }
  .customer-tracking-page .customer-tracking-current {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-tracking-page .customer-tracking-current__location {
    width: 100%;
    padding-top: 11px;
    padding-left: 0;
    border-top: 1px solid rgba(15, 61, 46, 0.12);
    border-left: 0;
  }
  .customer-tracking-page .customer-tracking-layout {
    grid-template-columns: 1fr;
  }
  .customer-tracking-page .customer-tracking-sidebar {
    order: -1;
  }
  .customer-tracking-page .customer-tracking-card__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .customer-tracking-page .customer-tracking-timeline__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .customer-tracking-page .customer-tracking-timeline__top em {
    white-space: normal;
  }
}
/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 575px) {
  .customer-tracking-page .customer-tracking-header h1 {
    font-size: 22px !important;
  }
  .customer-tracking-page .customer-tracking-header__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .customer-tracking-page .customer-tracking-header__actions .customer-tracking-btn {
    width: 100%;
    flex: auto;
  }
  .customer-tracking-page .customer-tracking-search-card {
    padding: 14px;
  }
  .customer-tracking-page .customer-tracking-search-card__content {
    align-items: flex-start;
  }
  .customer-tracking-page .customer-tracking-number {
    flex-direction: column;
  }
  .customer-tracking-page .customer-tracking-number input,
  .customer-tracking-page .customer-tracking-number button {
    width: 100%;
  }
  .customer-tracking-page .customer-tracking-current {
    padding: 14px;
  }
  .customer-tracking-page .customer-tracking-current__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 17px;
  }
  .customer-tracking-page .customer-tracking-card__header {
    padding: 14px;
  }
  .customer-tracking-page .customer-tracking-card__header h2 {
    font-size: 19px !important;
  }
  .customer-tracking-page .customer-tracking-timeline {
    padding: 20px 14px;
  }
  .customer-tracking-page .customer-tracking-timeline__item {
    gap: 10px;
  }
  .customer-tracking-page .customer-tracking-timeline__marker {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: 14px;
  }
  .customer-tracking-page .customer-tracking-timeline__item:not(.last)::after {
    left: 15px;
    top: 35px;
  }
  .customer-tracking-page .customer-tracking-timeline__top strong {
    font-size: 15px;
  }
  .customer-tracking-page .customer-tracking-delivery {
    padding: 14px;
  }
  .customer-tracking-page .customer-tracking-footer {
    flex-direction: column;
  }
  .customer-tracking-page .customer-tracking-footer .customer-tracking-btn {
    width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 380px) {
  .customer-tracking-page .customer-tracking-header h1 {
    font-size: 21px !important;
  }
  .customer-tracking-page .customer-tracking-card__header h2 {
    font-size: 18px !important;
  }
  .customer-tracking-page .customer-tracking-timeline__content {
    padding-bottom: 17px;
  }
}
/*
|--------------------------------------------------------------------------
| Products Page
|--------------------------------------------------------------------------
*/
.products-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.products-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.products-page__eyebrow {
  display: block;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.products-page h1 {
  margin: 4px 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.products-page p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.products-page__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #177245;
  border-radius: 8px;
  background: #177245;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.products-page__add-btn i {
  font-size: 18px;
}
.products-page__add-btn:hover {
  background: rgba(23, 114, 69, 0.85);
  color: #fff;
}

/*
|--------------------------------------------------------------------------
| Summary
|--------------------------------------------------------------------------
*/
.products-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.products-summary__card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
}
.products-summary__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 21px;
}
.products-summary__icon--success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.products-summary__icon--warning {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.products-summary__icon--danger {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.products-summary span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.products-summary strong {
  display: block;
  color: #0D2B5A;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Products Card
|--------------------------------------------------------------------------
*/
.products-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.products-card__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.products-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-top: 1px solid rgba(221, 221, 221, 0.7);
}
.products-card__footer > span {
  color: #555555;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Search
|--------------------------------------------------------------------------
*/
.products-search {
  position: relative;
  width: 300px;
}
.products-search i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #888;
  font-size: 18px;
  pointer-events: none;
}
.products-search input {
  width: 100%;
  height: 42px;
  padding: 0 13px 0 38px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.products-search input::placeholder {
  color: #999;
}
.products-search input:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

/*
|--------------------------------------------------------------------------
| Filters
|--------------------------------------------------------------------------
*/
.products-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.products-filter-group select {
  min-width: 145px;
  height: 42px;
  padding: 0 32px 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.products-filter-group select:focus {
  border-color: rgba(23, 114, 69, 0.5);
}

/*
|--------------------------------------------------------------------------
| Table
|--------------------------------------------------------------------------
*/
.products-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.products-table {
  width: 100%;
  min-width: 1250px;
  border-collapse: collapse;
}
.products-table th,
.products-table td {
  padding: 14px 13px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  text-align: left;
  vertical-align: middle;
}
.products-table th {
  background: #F2F4F7;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}
.products-table td {
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.products-table tbody tr {
  transition: 0.15s;
}
.products-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.018);
}
.products-table tbody tr:last-child td {
  border-bottom: 0;
}
.products-table__check {
  width: 45px;
}

/*
|--------------------------------------------------------------------------
| Checkbox
|--------------------------------------------------------------------------
*/
.products-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #177245;
  cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Product
|--------------------------------------------------------------------------
*/
.product-table-product {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 240px;
}
.product-table-product__image {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #F2F4F7;
}
.product-table-product__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.product-table-product__info {
  min-width: 0;
}
.product-table-product__info a {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-table-product__info a:hover {
  color: #177245;
}
.product-table-product__info span {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Source Badge
|--------------------------------------------------------------------------
*/
.product-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.product-source-badge i {
  font-size: 15px;
}
.product-source-badge--own {
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.product-source-badge--amazon {
  background: rgba(255, 193, 7, 0.11);
  color: #947000;
}
.product-source-badge--aliexpress {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}

/*
|--------------------------------------------------------------------------
| Price
|--------------------------------------------------------------------------
*/
.product-price strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.product-price span {
  display: block;
  margin-top: 2px;
  color: #999;
  font-size: 14px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Stock
|--------------------------------------------------------------------------
*/
.product-stock {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.product-stock--available {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.product-stock--low {
  background: rgba(255, 193, 7, 0.11);
  color: #947000;
}
.product-stock--out {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Variant Badge
|--------------------------------------------------------------------------
*/
.product-variant-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/
.product-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.product-status i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
}
.product-status--active {
  color: #198754;
}
.product-status--active i {
  background: #198754;
}
.product-status--inactive {
  color: #dc3545;
}
.product-status--inactive i {
  background: #dc3545;
}
.product-status--draft {
  color: #947000;
}
.product-status--draft i {
  background: #ffc107;
}

/*
|--------------------------------------------------------------------------
| Actions
|--------------------------------------------------------------------------
*/
.product-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.product-action-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s;
}
.product-action-btn:hover {
  border-color: rgba(23, 114, 69, 0.4);
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
}
.product-action-btn--danger:hover {
  border-color: rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.06);
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/
.products-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
}
.products-pagination button {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.products-pagination button:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}
.products-pagination button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.products-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.products-pagination span {
  padding: 0 3px;
  color: #888;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media (min-width: 1400px) and (max-width: 1700px) {
  .products-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .products-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .products-card__filters {
    align-items: stretch;
    flex-direction: column;
  }
  .products-search {
    width: 100%;
  }
  .products-filter-group {
    width: 100%;
  }
  .products-filter-group select {
    flex: 1;
    width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .products-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .products-page__header {
    align-items: flex-start;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .products-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .products-page__add-btn {
    width: 100%;
  }
  .products-filter-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .products-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .products-pagination {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .products-page h1 {
    font-size: 24px;
  }
  .products-summary {
    grid-template-columns: 1fr;
  }
  .products-card__filters {
    padding: 15px;
  }
  .products-filter-group {
    grid-template-columns: 1fr;
  }
  .products-card__footer {
    padding: 15px;
  }
}
/*
|--------------------------------------------------------------------------
| Product Create Page
|--------------------------------------------------------------------------
*/
.product-create-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.product-create-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.product-create-page__header h1 {
  margin: 4px 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.product-create-page__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.product-create-page__eyebrow {
  display: block;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product-create-page__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.product-create-page__back i {
  font-size: 18px;
}
.product-create-page__back:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/
.product-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 20px;
}

.product-create-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-create-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*
|--------------------------------------------------------------------------
| Form Card
|--------------------------------------------------------------------------
*/
.product-form-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.product-form-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 19px 20px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.product-form-card__header h4 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.product-form-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.product-form-card__body {
  padding: 20px;
}
.product-form-card__body--table {
  padding: 0;
}

/*
|--------------------------------------------------------------------------
| Product Source
|--------------------------------------------------------------------------
*/
.product-source-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.product-source-option {
  position: relative;
  display: block;
  min-width: 0;
  padding: 17px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: 0.2s;
}
.product-source-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.product-source-option__content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-right: 25px;
}
.product-source-option__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 20px;
}
.product-source-option__icon.amazon {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.product-source-option__icon.aliexpress {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.product-source-option__text {
  min-width: 0;
}
.product-source-option__text strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}
.product-source-option__text > span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.product-source-option__check {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  font-size: 14px;
}
.product-source-option:has(input:checked) {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.025);
  box-shadow: 0 0 0 1px rgba(23, 114, 69, 0.08);
}
.product-source-option:has(input:checked) .product-source-option__check {
  border-color: #177245;
  background: #177245;
}
.product-source-option:hover {
  border-color: rgba(23, 114, 69, 0.4);
}

/*
|--------------------------------------------------------------------------
| Form Groups
|--------------------------------------------------------------------------
*/
.product-form-group {
  margin-bottom: 18px;
}
.product-form-group:last-child {
  margin-bottom: 0;
}
.product-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.product-form-group label span {
  color: #dc3545;
}
.product-form-group input,
.product-form-group select,
.product-form-group textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: 0.2s;
}
.product-form-group input::placeholder,
.product-form-group select::placeholder,
.product-form-group textarea::placeholder {
  color: #999;
}
.product-form-group input:focus,
.product-form-group select:focus,
.product-form-group textarea:focus {
  border-color: rgba(23, 114, 69, 0.55);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.product-form-group input,
.product-form-group select {
  height: 44px;
  padding: 0 13px;
}
.product-form-group textarea {
  min-height: 130px;
  padding: 12px 13px;
  resize: vertical;
  line-height: 1.6;
}

.product-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.product-form-help {
  display: block;
  margin-top: 7px;
  color: #888;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Prefix / Suffix
|--------------------------------------------------------------------------
*/
.product-input-prefix,
.product-input-suffix {
  position: relative;
}
.product-input-prefix input,
.product-input-suffix input {
  padding-left: 38px;
}

.product-input-prefix span {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 1;
  transform: translateY(-50%);
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

.product-input-suffix input {
  padding-right: 42px;
}
.product-input-suffix span {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Product Media
|--------------------------------------------------------------------------
*/
.product-media-section {
  margin-bottom: 25px;
}
.product-media-section:last-child {
  margin-bottom: 0;
}
.product-media-section__title {
  margin-bottom: 12px;
}
.product-media-section__title strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.product-media-section__title span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.product-main-image-upload {
  position: relative;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
  border: 1px dashed rgba(23, 114, 69, 0.4);
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.025);
  text-align: center;
  cursor: pointer;
}
.product-main-image-upload__icon {
  width: 55px;
  height: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 25px;
}
.product-main-image-upload strong {
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
}
.product-main-image-upload span {
  color: #555555;
  font-size: 14px;
}
.product-main-image-upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.product-gallery-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px dashed #ddd;
  border-radius: 10px;
  background: #F2F4F7;
  cursor: pointer;
}
.product-gallery-upload__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #fff;
  color: #177245;
  font-size: 22px;
}
.product-gallery-upload__content {
  min-width: 0;
}
.product-gallery-upload__content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
}
.product-gallery-upload__content span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.product-gallery-upload__content small {
  display: block;
  color: #888;
  font-size: 14px;
}
.product-gallery-upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Variant Toggle
|--------------------------------------------------------------------------
*/
.product-variant-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  margin-bottom: 25px;
  border: 1px solid rgba(23, 114, 69, 0.18);
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.035);
}
.product-variant-toggle__content {
  min-width: 0;
}
.product-variant-toggle__content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}
.product-variant-toggle__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Switch
|--------------------------------------------------------------------------
*/
.product-switch {
  position: relative;
  width: 46px;
  height: 25px;
  flex: 0 0 46px;
  display: inline-block;
}
.product-switch input {
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  position: absolute;
}
.product-switch__slider {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: #ddd;
  cursor: pointer;
  transition: 0.2s;
}
.product-switch__slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 26, 35, 0.15);
  transition: 0.2s;
}
.product-switch input:checked + .product-switch__slider {
  background: #177245;
}
.product-switch input:checked + .product-switch__slider::before {
  transform: translateX(21px);
}
.product-switch--small {
  width: 38px;
  height: 21px;
}
.product-switch--small .product-switch__slider::before {
  width: 15px;
  height: 15px;
}
.product-switch--small input:checked + .product-switch__slider::before {
  transform: translateX(17px);
}

/*
|--------------------------------------------------------------------------
| Variant Builder
|--------------------------------------------------------------------------
*/
.product-variant-builder {
  padding-top: 5px;
}
.product-variant-builder__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}
.product-variant-builder__header h5 {
  margin: 0 0 4px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.product-variant-builder__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.product-add-attribute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(23, 114, 69, 0.3);
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.product-add-attribute-btn i {
  font-size: 17px;
}

.product-attribute-item {
  padding: 18px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.product-attribute-item__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}
.product-attribute-item__top .product-form-group {
  margin-bottom: 0;
}

.product-remove-attribute-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 8px;
  background: rgba(220, 53, 69, 0.05);
  color: #dc3545;
  font-size: 17px;
  cursor: pointer;
}

.product-value-input {
  display: flex;
  gap: 8px;
}
.product-value-input input {
  flex: 1;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.product-value-input input:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

.product-add-value-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(23, 114, 69, 0.3);
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
  font-size: 18px;
  cursor: pointer;
}

.product-value-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.product-value-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px 4px 11px;
  border: 1px solid rgba(23, 114, 69, 0.18);
  border-radius: 20px;
  background: rgba(23, 114, 69, 0.06);
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.3;
}
.product-value-tag button {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #555555;
  font-size: 13px;
  cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Generate Variations
|--------------------------------------------------------------------------
*/
.product-generate-variations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  margin-top: 20px;
  border-radius: 10px;
  background: #F2F4F7;
}
.product-generate-variations strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
}
.product-generate-variations span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.product-generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #177245;
  border-radius: 8px;
  background: #177245;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.product-generate-btn i {
  font-size: 17px;
}

/*
|--------------------------------------------------------------------------
| Variation Table
|--------------------------------------------------------------------------
*/
.product-variation-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}

.product-variation-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.product-variation-table {
  width: 100%;
  min-width: 950px;
  border-collapse: collapse;
}
.product-variation-table th,
.product-variation-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  text-align: left;
  vertical-align: middle;
}
.product-variation-table th {
  background: #F2F4F7;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.product-variation-table td {
  background: #fff;
}
.product-variation-table tbody tr:last-child td {
  border-bottom: 0;
}
.product-variation-table input {
  width: 100%;
  min-width: 80px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid #ddd;
  border-radius: 7px;
  outline: none;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.product-variation-table input:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

.product-variation-name {
  min-width: 150px;
}
.product-variation-name strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.product-variation-name span {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.4;
}

.product-table-price {
  position: relative;
}
.product-table-price span {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  color: #555555;
  font-size: 14px;
  pointer-events: none;
}
.product-table-price input {
  padding-left: 23px;
}

.product-variation-image {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ddd;
  border-radius: 7px;
  background: #F2F4F7;
  color: #177245;
  cursor: pointer;
}
.product-variation-image i {
  font-size: 18px;
}
.product-variation-image input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  opacity: 0;
  cursor: pointer;
}

.product-remove-row-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 7px;
  background: rgba(220, 53, 69, 0.06);
  color: #dc3545;
  font-size: 17px;
  cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Publish
|--------------------------------------------------------------------------
*/
.product-publish-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
}
.product-publish-status span {
  color: #555555;
  font-size: 14px;
}
.product-publish-status strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
  font-size: 14px;
  font-weight: 600;
}

.product-publish-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  margin-bottom: 18px;
  border-radius: 8px;
  background: #F2F4F7;
}
.product-publish-info i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #177245;
  font-size: 18px;
}
.product-publish-info span {
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

.product-publish-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/
.product-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.product-btn--primary {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.product-btn--primary:hover {
  background: rgba(23, 114, 69, 0.85);
  color: #fff;
}
.product-btn--secondary {
  border: 1px solid #ddd;
  background: #fff;
  color: #555555;
}
.product-btn--secondary:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
*/
.product-source-reminder,
.product-create-help {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
}

.product-source-reminder {
  border: 1px solid rgba(13, 202, 240, 0.25);
  background: rgba(13, 202, 240, 0.06);
}
.product-source-reminder__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
  font-size: 20px;
}

.product-create-help {
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.06);
}
.product-create-help__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.12);
  color: #D4AF37;
  font-size: 20px;
}

.product-source-reminder strong,
.product-create-help strong {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
}

.product-source-reminder p,
.product-create-help p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .product-create-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .product-source-options {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .product-create-layout {
    grid-template-columns: 1fr;
  }
  .product-create-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-create-sidebar .product-form-card:first-child {
    grid-column: span 2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .product-create-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-create-page__back {
    width: 100%;
  }
  .product-create-sidebar {
    display: flex;
  }
  .product-form-row {
    grid-template-columns: 1fr;
  }
  .product-source-options {
    grid-template-columns: 1fr;
  }
  .product-variant-toggle {
    align-items: flex-start;
  }
  .product-variant-builder__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-generate-variations {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-gallery-upload {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .product-create-page__header h1 {
    font-size: 24px;
  }
  .product-form-card__header,
  .product-form-card__body {
    padding: 16px;
  }
  .product-source-option {
    padding: 15px;
  }
  .product-attribute-item {
    padding: 14px;
  }
  .product-variant-toggle {
    flex-direction: column;
  }
  .product-switch {
    align-self: flex-start;
  }
  .product-attribute-item__top {
    grid-template-columns: 1fr;
  }
  .product-remove-attribute-btn {
    width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| Product Details Page
|--------------------------------------------------------------------------
*/
.product-details-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.product-details-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.product-details-page__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.product-details-page__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.product-details-page__title-row h1 {
  margin: 0;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.product-details-page__header > div > p {
  margin: 7px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.product-details-page__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/
.product-details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.product-details-btn i {
  font-size: 17px;
}
.product-details-btn--primary {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.product-details-btn--primary:hover {
  background: rgba(23, 114, 69, 0.85);
  color: #fff;
}
.product-details-btn--secondary {
  border: 1px solid #ddd;
  background: #fff;
  color: #555555;
}
.product-details-btn--secondary:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Product Status
|--------------------------------------------------------------------------
*/
.product-details-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.product-details-status i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
}
.product-details-status--active {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.product-details-status--active i {
  background: #198754;
}
.product-details-status--inactive {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}
.product-details-status--inactive i {
  background: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Product Overview
|--------------------------------------------------------------------------
*/
.product-details-overview {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 25px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.product-details-overview__media {
  min-width: 0;
}
.product-details-overview__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 5px 10px;
}
.product-details-overview__footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid rgba(221, 221, 221, 0.7);
}

/*
|--------------------------------------------------------------------------
| Main Image
|--------------------------------------------------------------------------
*/
.product-details-main-image {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #F2F4F7;
}
.product-details-main-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/*
|--------------------------------------------------------------------------
| Gallery
|--------------------------------------------------------------------------
*/
.product-details-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.product-details-gallery__item {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #F2F4F7;
  cursor: pointer;
}
.product-details-gallery__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.product-details-gallery__item.active {
  border-color: #177245;
  box-shadow: 0 0 0 1px rgba(23, 114, 69, 0.15);
}

/*
|--------------------------------------------------------------------------
| Source
|--------------------------------------------------------------------------
*/
.product-details-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}
.product-details-source__label {
  color: #555555;
  font-size: 14px;
}
.product-details-source__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}
.product-details-source__badge i {
  font-size: 16px;
}

/*
|--------------------------------------------------------------------------
| Price
|--------------------------------------------------------------------------
*/
.product-details-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.product-details-price__sale {
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.product-details-price__regular {
  color: #999;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: line-through;
}

.product-details-description {
  max-width: 700px;
  margin: 0 0 20px;
  color: #555555;
  font-size: 14px;
  line-height: 1.7;
}

/*
|--------------------------------------------------------------------------
| Meta
|--------------------------------------------------------------------------
*/
.product-details-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-details-meta__item {
  padding: 12px 14px;
  border: 1px solid rgba(221, 221, 221, 0.8);
  border-radius: 8px;
  background: #F2F4F7;
}
.product-details-meta__item span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.product-details-meta__item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.product-details-meta__item strong.stock {
  color: #198754;
}

/*
|--------------------------------------------------------------------------
| Overview Stats
|--------------------------------------------------------------------------
*/
.product-details-stat {
  padding: 12px 14px;
  border-radius: 8px;
  background: #F2F4F7;
}
.product-details-stat span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
}
.product-details-stat strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| Detail Card
|--------------------------------------------------------------------------
*/
.product-details-card {
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.product-details-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 19px 20px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.product-details-card__header h4 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.product-details-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.product-details-card__body {
  padding: 20px;
}
.product-details-card__body--table {
  padding: 0;
}

/*
|--------------------------------------------------------------------------
| Info Grid
|--------------------------------------------------------------------------
*/
.product-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.product-info-item {
  padding: 15px;
  border: 1px solid rgba(221, 221, 221, 0.75);
  border-radius: 9px;
  background: #fff;
}
.product-info-item--full {
  grid-column: 1/-1;
}
.product-info-item span {
  display: block;
  margin-bottom: 6px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.product-info-item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}
.product-info-item p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.7;
}
.product-info-item__sale {
  color: #177245 !important;
}
.product-info-item__success {
  color: #198754 !important;
}

/*
|--------------------------------------------------------------------------
| Product Media Details
|--------------------------------------------------------------------------
*/
.product-media-details {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 25px;
}
.product-media-details__label {
  display: block;
  margin-bottom: 10px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.product-media-details__main-image {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #F2F4F7;
}
.product-media-details__main-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.product-media-details__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.product-media-details__image {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #F2F4F7;
}
.product-media-details__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/*
|--------------------------------------------------------------------------
| Attributes
|--------------------------------------------------------------------------
*/
.product-attribute-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
}

.product-attributes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.product-attribute-card {
  padding: 17px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.product-attribute-card__header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}
.product-attribute-card__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 20px;
}
.product-attribute-card strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
}
.product-attribute-card__header span {
  display: block;
  color: #555555;
  font-size: 14px;
}
.product-attribute-card__values {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.product-attribute-card__values > span {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 4px 10px;
  border: 1px solid rgba(23, 114, 69, 0.18);
  border-radius: 20px;
  background: rgba(23, 114, 69, 0.05);
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 500;
}

/*
|--------------------------------------------------------------------------
| Variations
|--------------------------------------------------------------------------
*/
.product-details-variation-wrapper {
  width: 100%;
  overflow-x: auto;
}

.product-details-variation-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}
.product-details-variation-table th,
.product-details-variation-table td {
  padding: 13px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
  text-align: left;
  vertical-align: middle;
}
.product-details-variation-table th {
  background: #F2F4F7;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}
.product-details-variation-table td {
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.product-details-variation-table tbody tr:last-child td {
  border-bottom: 0;
}
.product-details-variation-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.018);
}

.product-details-variant-name {
  min-width: 160px;
}
.product-details-variant-name strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.product-details-variant-name span {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Stock
|--------------------------------------------------------------------------
*/
.product-details-stock {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.product-details-stock--available {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.product-details-stock--low {
  background: rgba(255, 193, 7, 0.11);
  color: #947000;
}
.product-details-stock--out {
  background: rgba(220, 53, 69, 0.09);
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Variation Image
|--------------------------------------------------------------------------
*/
.product-details-variation-image {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #F2F4F7;
}
.product-details-variation-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .product-details-overview {
    grid-template-columns: 360px minmax(0, 1fr);
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .product-details-overview {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .product-media-details {
    grid-template-columns: 230px minmax(0, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .product-details-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-details-page__actions {
    width: 100%;
  }
  .product-details-page__actions .product-details-btn {
    flex: 1;
  }
  .product-details-overview {
    grid-template-columns: 1fr;
  }
  .product-details-overview__content {
    padding: 5px 0;
  }
  .product-info-grid {
    grid-template-columns: 1fr;
  }
  .product-info-item--full {
    grid-column: auto;
  }
  .product-attributes-grid {
    grid-template-columns: 1fr;
  }
  .product-media-details {
    grid-template-columns: 1fr;
  }
  .product-details-overview__footer {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .product-details-page__title-row h1 {
    font-size: 24px;
  }
  .product-details-page__actions {
    flex-direction: column;
  }
  .product-details-page__actions .product-details-btn {
    width: 100%;
  }
  .product-details-overview {
    padding: 15px;
  }
  .product-details-meta {
    grid-template-columns: 1fr;
  }
  .product-details-overview__footer {
    grid-template-columns: 1fr;
  }
  .product-details-card__header,
  .product-details-card__body {
    padding: 16px;
  }
  .product-details-card__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-details-source {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-details-price__sale {
    font-size: 22px;
  }
  .product-media-details__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*
|--------------------------------------------------------------------------
| Product Edit Page
|--------------------------------------------------------------------------
*/
.product-edit-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.product-edit-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.product-edit-page__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.product-edit-page__header h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.product-edit-page__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.product-edit-page__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 43px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.product-edit-page__back i {
  font-size: 17px;
}
.product-edit-page__back:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/
.product-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

.product-edit-main {
  min-width: 0;
}

.product-edit-sidebar {
  min-width: 0;
  position: sticky;
  top: 20px;
}

/*
|--------------------------------------------------------------------------
| Edit Main Image
|--------------------------------------------------------------------------
*/
.product-edit-main-image {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.product-edit-main-image__preview {
  overflow: hidden;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #f7f7f7;
}
.product-edit-main-image__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.product-edit-main-image__upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 25px;
  border: 1px dashed rgba(23, 114, 69, 0.35);
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.025);
  text-align: center;
}
.product-edit-main-image__upload .product-main-image-upload__icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 22px;
}
.product-edit-main-image__upload strong {
  display: block;
  margin-bottom: 5px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
}
.product-edit-main-image__upload span {
  display: block;
  margin-bottom: 15px;
  color: #555555;
  font-size: 14px;
}
.product-edit-main-image__upload input[type=file] {
  width: 100%;
  max-width: 280px;
  color: #555555;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Gallery
|--------------------------------------------------------------------------
*/
.product-edit-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.product-edit-gallery__item {
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #f7f7f7;
}
.product-edit-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.product-edit-gallery__item button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s;
}
.product-edit-gallery__item button:hover {
  background: #dc3545;
}

.product-edit-gallery__upload {
  min-height: 100%;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px;
  border: 1px dashed rgba(23, 114, 69, 0.4);
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.025);
  color: #177245;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}
.product-edit-gallery__upload i {
  font-size: 23px;
}
.product-edit-gallery__upload span {
  font-size: 14px;
  font-weight: 600;
}
.product-edit-gallery__upload input {
  display: none;
}
.product-edit-gallery__upload:hover {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.06);
}

/*
|--------------------------------------------------------------------------
| Product Info Sidebar Card
|--------------------------------------------------------------------------
*/
.product-edit-info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.product-edit-info-card__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 18px;
}
.product-edit-info-card strong {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.product-edit-info-card p {
  margin: 3px 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Sidebar Buttons
|--------------------------------------------------------------------------
*/
.product-edit-sidebar .product-publish-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-edit-sidebar .product-btn {
  width: 100%;
  min-height: 42px;
}

/*
|--------------------------------------------------------------------------
| Existing Create Styles Compatibility
|--------------------------------------------------------------------------
*/
.product-edit-page .product-form-card {
  margin-bottom: 20px;
}
.product-edit-page .product-form-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.product-edit-page .product-form-group {
  margin-bottom: 18px;
}
.product-edit-page .product-form-group:last-child {
  margin-bottom: 0;
}
.product-edit-page .product-form-help {
  display: block;
  margin-top: 6px;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Responsive - XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .product-edit-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
  .product-edit-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - LG
|--------------------------------------------------------------------------
*/
@media (min-width: 992px) and (max-width: 1199px) {
  .product-edit-layout {
    grid-template-columns: 1fr;
  }
  .product-edit-sidebar {
    position: static;
  }
  .product-edit-main-image {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .product-edit-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-edit-page__back {
    width: fit-content;
  }
  .product-edit-main-image {
    grid-template-columns: 1fr;
  }
  .product-edit-main-image__preview {
    width: 220px;
    max-width: 100%;
  }
  .product-edit-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .product-edit-page__header h1 {
    font-size: 24px;
  }
  .product-edit-page__header p {
    font-size: 14px;
  }
  .product-edit-page__back {
    width: 100%;
  }
  .product-edit-main-image__preview {
    width: 180px;
  }
  .product-edit-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-edit-info-card {
    padding: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| Categories Page
|--------------------------------------------------------------------------
*/
.categories-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.categories-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.categories-page__header h1 {
  margin: 4px 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.categories-page__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}
.categories-page__eyebrow {
  display: block;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.categories-page__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: #177245;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.25s;
}
.categories-page__add-btn i {
  font-size: 18px;
}
.categories-page__add-btn:hover {
  background: rgba(23, 114, 69, 0.85);
  color: #fff;
}

/*
|--------------------------------------------------------------------------
| Statistics
|--------------------------------------------------------------------------
*/
.categories-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.categories-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  transition: 0.25s;
}
.categories-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.35);
  box-shadow: 0 8px 25px rgba(16, 26, 35, 0.05);
}
.categories-stat-card__icon {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 20px;
}
.categories-stat-card__icon.active {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.categories-stat-card__icon.products {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.categories-stat-card__icon.empty {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.categories-stat-card span {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.categories-stat-card strong {
  display: block;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Main Card
|--------------------------------------------------------------------------
*/
.categories-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}

/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/
.categories-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.categories-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
|--------------------------------------------------------------------------
| Search
|--------------------------------------------------------------------------
*/
.categories-search {
  position: relative;
  width: 100%;
  max-width: 360px;
}
.categories-search i {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: #888;
  font-size: 18px;
  pointer-events: none;
}
.categories-search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.categories-search input::placeholder {
  color: #999;
}
.categories-search input:focus {
  border-color: rgba(23, 114, 69, 0.55);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}

/*
|--------------------------------------------------------------------------
| Select
|--------------------------------------------------------------------------
*/
.categories-select {
  min-width: 160px;
  height: 42px;
  padding: 0 30px 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.categories-select:focus {
  border-color: rgba(23, 114, 69, 0.55);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}

/*
|--------------------------------------------------------------------------
| Filter Button
|--------------------------------------------------------------------------
*/
.categories-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.categories-filter-btn i {
  font-size: 18px;
}
.categories-filter-btn:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Table
|--------------------------------------------------------------------------
*/
.categories-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.categories-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
}
.categories-table th,
.categories-table td {
  padding: 15px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.5;
}
.categories-table th {
  background: #F2F4F7;
  color: #555555;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.categories-table td {
  color: #555555;
}
.categories-table tbody tr {
  transition: 0.2s;
}
.categories-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.025);
}
.categories-table tbody tr:last-child td {
  border-bottom: 0;
}

/*
|--------------------------------------------------------------------------
| Category Info
|--------------------------------------------------------------------------
*/
.category-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
}
.category-info__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.09);
  color: #177245;
  font-size: 20px;
}
.category-info__icon.fashion {
  background: rgba(212, 175, 55, 0.12);
  color: #D4AF37;
}
.category-info__icon.home {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.category-info__icon.beauty {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.category-info__icon.sports {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.category-info__icon {
  /*
  |--------------------------------------------------------------------------
  | Subcategory Icon
  |--------------------------------------------------------------------------
  */
}
.category-info__icon.subcategory {
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}
.category-info__content {
  min-width: 0;
}
.category-info__content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-info__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Child Category Info
|--------------------------------------------------------------------------
*/
.category-info--child {
  min-width: 300px;
}

/*
|--------------------------------------------------------------------------
| Child Connector
|--------------------------------------------------------------------------
*/
.category-info__connector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 48px;
  flex: 0 0 20px;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
}

/*
|--------------------------------------------------------------------------
| Child Category Row
|--------------------------------------------------------------------------
*/
.category-row--child {
  background: rgba(0, 0, 0, 0.012);
}
.category-row--child td {
  border-bottom-color: rgba(221, 221, 221, 0.5);
}
.category-row--child:hover {
  background: rgba(23, 114, 69, 0.035);
}

/*
|--------------------------------------------------------------------------
| Category Type
|--------------------------------------------------------------------------
*/
.category-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.category-type i {
  font-size: 15px;
  line-height: 1;
}
.category-type {
  /*
  |--------------------------------------------------------------------------
  | Main Category
  |--------------------------------------------------------------------------
  */
}
.category-type--parent {
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.category-type {
  /*
  |--------------------------------------------------------------------------
  | Subcategory
  |--------------------------------------------------------------------------
  */
}
.category-type--child {
  background: rgba(85, 85, 85, 0.08);
  color: #555555;
}

/*
|--------------------------------------------------------------------------
| Parent Category
|--------------------------------------------------------------------------
*/
.category-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.category-parent i {
  color: #177245;
  font-size: 15px;
  line-height: 1;
}

.category-parent-empty {
  color: #999;
  font-size: 14px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Product Count
|--------------------------------------------------------------------------
*/
.category-product-count {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.category-product-count.empty {
  color: #947000;
}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/
.category-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.category-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.category-status.active {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.category-status.inactive {
  background: rgba(85, 85, 85, 0.1);
  color: #555555;
}

/*
|--------------------------------------------------------------------------
| Actions
|--------------------------------------------------------------------------
*/
.category-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.category-actions a,
.category-actions button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #555555;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}
.category-actions a:hover,
.category-actions button:hover {
  border-color: rgba(23, 114, 69, 0.25);
  background: rgba(23, 114, 69, 0.06);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/
.categories-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 20px;
}
.categories-pagination__info {
  color: #555555;
  font-size: 14px;
}
.categories-pagination__buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.categories-pagination__buttons button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.categories-pagination__buttons button:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.categories-pagination__buttons button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.categories-pagination__buttons button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Responsive - XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .categories-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .categories-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .categories-search {
    max-width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - LG
|--------------------------------------------------------------------------
*/
@media (min-width: 992px) and (max-width: 1199px) {
  .categories-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .categories-toolbar__actions {
    width: 100%;
  }
  .categories-select {
    flex: 1;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .categories-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .categories-page__add-btn {
    width: 100%;
  }
  .categories-toolbar__actions {
    flex-wrap: wrap;
  }
  .categories-select {
    min-width: 0;
    flex: 1;
  }
  .categories-filter-btn {
    flex: 0 0 auto;
  }
  .categories-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .categories-page__header h1 {
    font-size: 24px;
  }
  .categories-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .categories-stat-card {
    padding: 16px;
  }
  .categories-toolbar {
    padding: 15px;
  }
  .categories-toolbar__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .categories-select,
  .categories-filter-btn {
    width: 100%;
  }
  .categories-pagination {
    padding: 15px;
  }
  .categories-pagination__buttons {
    width: 100%;
    justify-content: center;
  }
  /*
  |--------------------------------------------------------------------------
  | Child Category Mobile
  |--------------------------------------------------------------------------
  */
  .category-info--child {
    min-width: 230px;
  }
  .category-info__connector {
    width: 16px;
    flex: 0 0 16px;
    font-size: 16px;
  }
  .category-type {
    font-size: 14px;
    padding: 4px 8px;
  }
  .category-parent {
    font-size: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| Category Create Page
|--------------------------------------------------------------------------
*/
.category-create-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.category-create-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.category-create-page__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.category-create-page__header h1 {
  margin: 0;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.category-create-page__header p {
  margin: 7px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.category-create-page__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.category-create-page__back-btn i {
  font-size: 17px;
}
.category-create-page__back-btn:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/
.category-create-card {
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.category-create-card__header {
  padding: 19px 20px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.category-create-card__header h4 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.category-create-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.category-create-card__body {
  padding: 20px;
}

/*
|--------------------------------------------------------------------------
| Category Type
|--------------------------------------------------------------------------
*/
.category-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.category-type-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.category-type-option input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.category-type-option__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: 0.2s;
}
.category-type-option__radio {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #c8cdd3;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
}
.category-type-option__radio i {
  display: none;
}
.category-type-option__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 21px;
}
.category-type-option__content {
  min-width: 0;
  padding-right: 22px;
}
.category-type-option__content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.category-type-option__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}
.category-type-option:hover .category-type-option__box {
  border-color: rgba(23, 114, 69, 0.45);
}
.category-type-option input:checked + .category-type-option__box {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.025);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}
.category-type-option input:checked + .category-type-option__box .category-type-option__radio {
  border-color: #177245;
  background: #177245;
}
.category-type-option input:checked + .category-type-option__box .category-type-option__radio i {
  display: block;
}

/*
|--------------------------------------------------------------------------
| Parent Category
|--------------------------------------------------------------------------
*/
.category-parent-field {
  display: none;
  max-width: 650px;
}
.category-parent-field label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-parent-field label span {
  color: #dc3545;
}
.category-parent-field select {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.category-parent-field select:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.category-parent-field small {
  display: block;
  margin-top: 6px;
  color: #888;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Show Parent Category When Subcategory Is Selected
|--------------------------------------------------------------------------
*/
.category-create-form:has(input[name=category_type][value=subcategory]:checked) .category-parent-field {
  display: block;
}

/*
|--------------------------------------------------------------------------
| Form Grid
|--------------------------------------------------------------------------
*/
.category-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/*
|--------------------------------------------------------------------------
| Form Field
|--------------------------------------------------------------------------
*/
.category-create-field {
  min-width: 0;
}
.category-create-field--full {
  grid-column: 1/-1;
}
.category-create-field label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-create-field label span {
  color: #dc3545;
}
.category-create-field input,
.category-create-field textarea,
.category-create-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: 0.2s;
}
.category-create-field input,
.category-create-field select {
  height: 44px;
  padding: 0 13px;
}
.category-create-field textarea {
  min-height: 120px;
  padding: 12px 13px;
  resize: vertical;
}
.category-create-field input::placeholder,
.category-create-field textarea::placeholder {
  color: #999;
}
.category-create-field input:focus,
.category-create-field textarea:focus,
.category-create-field select:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.category-create-field small {
  display: block;
  margin-top: 6px;
  color: #888;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Settings
|--------------------------------------------------------------------------
*/
.category-create-settings {
  display: flex;
  flex-direction: column;
}

.category-create-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.category-create-setting:first-child {
  padding-top: 0;
}
.category-create-setting:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.category-create-setting__content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.category-create-setting__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 19px;
}
.category-create-setting strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-create-setting span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Switch
|--------------------------------------------------------------------------
*/
.category-create-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 44px;
  cursor: pointer;
}
.category-create-switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.category-create-switch > span {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 30px;
  background: #cfd4da;
  transition: 0.2s;
}
.category-create-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}
.category-create-switch input:checked + span {
  background: #177245;
}
.category-create-switch input:checked + span::after {
  transform: translateX(20px);
}

/*
|--------------------------------------------------------------------------
| Image Upload
|--------------------------------------------------------------------------
*/
.category-create-image-upload {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  border: 1px dashed rgba(23, 114, 69, 0.35);
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.025);
}
.category-create-image-upload__icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 23px;
}
.category-create-image-upload__content {
  flex: 1;
  min-width: 0;
}
.category-create-image-upload__content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-create-image-upload__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.category-create-image-upload__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #0D2B5A;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s;
}
.category-create-image-upload__btn i {
  font-size: 17px;
}
.category-create-image-upload__btn:hover {
  border-color: #177245;
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Form Actions
|--------------------------------------------------------------------------
*/
.category-create-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 5px;
  margin-bottom: 20px;
}
.category-create-actions__cancel, .category-create-actions__submit {
  min-height: 43px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}
.category-create-actions__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  background: #fff;
  color: #555555;
}
.category-create-actions__cancel:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}
.category-create-actions__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.category-create-actions__submit i {
  font-size: 17px;
}
.category-create-actions__submit:hover {
  opacity: 0.9;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media (min-width: 992px) and (max-width: 1199px) {
  .category-type-options {
    gap: 12px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .category-create-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .category-create-page__back-btn {
    width: fit-content;
  }
  .category-type-options {
    grid-template-columns: 1fr;
  }
  .category-create-grid {
    grid-template-columns: 1fr;
  }
  .category-create-field--full {
    grid-column: auto;
  }
}
@media (max-width: 767px) {
  .category-create-page__header h1 {
    font-size: 24px;
  }
  .category-create-card__header,
  .category-create-card__body {
    padding: 16px;
  }
  .category-create-setting {
    align-items: flex-start;
  }
  .category-create-setting__content {
    align-items: flex-start;
  }
  .category-create-image-upload {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .category-create-image-upload__content {
    flex: 1 1 calc(100% - 67px);
  }
  .category-create-image-upload__btn {
    width: 100%;
  }
  .category-create-actions {
    flex-direction: column-reverse;
  }
  .category-create-actions__cancel, .category-create-actions__submit {
    width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| Category Details Page
|--------------------------------------------------------------------------
*/
.category-details-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.category-details-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.category-details-page__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.category-details-page__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.category-details-page__title-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 22px;
}
.category-details-page__title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.category-details-page__title h1 {
  margin: 0;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.category-details-page__title-row p {
  margin: 5px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.category-details-page__actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/
.category-details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}
.category-details-btn i {
  font-size: 17px;
}
.category-details-btn--secondary {
  border: 1px solid #ddd;
  background: #fff;
  color: #555555;
}
.category-details-btn--secondary:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}
.category-details-btn--primary {
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.category-details-btn--primary:hover {
  opacity: 0.9;
}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/
.category-details-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.category-details-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.category-details-status--active {
  background: rgba(25, 135, 84, 0.09);
  color: #198754;
}
.category-details-status--inactive {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Overview
|--------------------------------------------------------------------------
*/
.category-details-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  margin-bottom: 20px;
}
.category-details-overview__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.category-details-overview__sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/
.category-details-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.category-details-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.category-details-card__header h4 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.category-details-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.category-details-card__body {
  padding: 20px;
}

/*
|--------------------------------------------------------------------------
| Category Info
|--------------------------------------------------------------------------
*/
.category-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.category-info-item {
  min-width: 0;
}
.category-info-item--full {
  grid-column: 1/-1;
}
.category-info-item span {
  display: block;
  margin-bottom: 6px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.category-info-item strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  word-break: break-word;
}
.category-info-item p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.65;
}

/*
|--------------------------------------------------------------------------
| Category Image
|--------------------------------------------------------------------------
*/
.category-details-image {
  overflow: hidden;
  width: 100%;
  border-radius: 10px;
  background: #f6f7f8;
}
.category-details-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/8;
  object-fit: cover;
}

/*
|--------------------------------------------------------------------------
| Statistics
|--------------------------------------------------------------------------
*/
.category-stat-list {
  display: flex;
  flex-direction: column;
}

.category-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.category-stat-item:first-child {
  padding-top: 0;
}
.category-stat-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.category-stat-item__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 18px;
}
.category-stat-item span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.category-stat-item strong {
  display: block;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.category-stat-item__success {
  color: #198754 !important;
}

/*
|--------------------------------------------------------------------------
| Dates
|--------------------------------------------------------------------------
*/
.category-date-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.category-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.category-date-item span {
  color: #555555;
  font-size: 14px;
}
.category-date-item strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

/*
|--------------------------------------------------------------------------
| Status Box
|--------------------------------------------------------------------------
*/
.category-status-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(25, 135, 84, 0.2);
  border-radius: 9px;
  background: rgba(25, 135, 84, 0.05);
}
.category-status-box__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
  font-size: 18px;
}
.category-status-box strong {
  display: block;
  margin-bottom: 3px;
  color: #198754;
  font-size: 14px;
  font-weight: 700;
}
.category-status-box span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Count Badge
|--------------------------------------------------------------------------
*/
.category-details-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 20px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Subcategories
|--------------------------------------------------------------------------
*/
.category-subcategories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.category-subcategory {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #ddd;
  border-radius: 9px;
  transition: 0.2s;
}
.category-subcategory:hover {
  border-color: rgba(23, 114, 69, 0.35);
}
.category-subcategory__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  font-size: 18px;
}
.category-subcategory__content {
  flex: 1;
  min-width: 0;
}
.category-subcategory__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-subcategory__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Product Summary
|--------------------------------------------------------------------------
*/
.category-product-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.category-product-summary__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 9px;
}
.category-product-summary__item > div:last-child {
  min-width: 0;
}
.category-product-summary__item span {
  display: block;
  margin-bottom: 3px;
  color: #555555;
  font-size: 14px;
}
.category-product-summary__item strong {
  display: block;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.category-product-summary__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(25, 135, 84, 0.08);
  color: #198754;
  font-size: 19px;
}
.category-product-summary__icon--warning {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
.category-product-summary__icon--danger {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media (min-width: 992px) and (max-width: 1199px) {
  .category-details-overview {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
  .category-subcategories {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .category-details-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .category-details-page__actions {
    width: 100%;
  }
  .category-details-btn {
    flex: 1;
  }
  .category-details-overview {
    grid-template-columns: 1fr;
  }
  .category-details-overview__sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .category-details-overview__sidebar .category-details-card:last-child {
    grid-column: 1/-1;
  }
  .category-product-summary {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .category-details-page__title-row {
    align-items: flex-start;
  }
  .category-details-page__title {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .category-details-page__actions {
    flex-direction: column;
  }
  .category-details-btn {
    width: 100%;
  }
  .category-details-overview__sidebar {
    display: flex;
  }
  .category-info-grid {
    grid-template-columns: 1fr;
  }
  .category-info-item--full {
    grid-column: auto;
  }
  .category-details-card__header,
  .category-details-card__body {
    padding: 16px;
  }
  .category-subcategories {
    grid-template-columns: 1fr;
  }
  .category-subcategory {
    flex-wrap: wrap;
  }
  .category-subcategory .category-details-status {
    margin-left: 51px;
  }
}
/*
|--------------------------------------------------------------------------
| Category Edit Page
|--------------------------------------------------------------------------
*/
.category-edit-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.category-edit-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.category-edit-page__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.category-edit-page__header h1 {
  margin: 0;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.category-edit-page__header p {
  margin: 7px 0 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.category-edit-page__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.category-edit-page__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.category-edit-page__back-btn i {
  font-size: 17px;
}
.category-edit-page__back-btn:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/
.category-edit-card {
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.category-edit-card__header {
  padding: 19px 20px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.category-edit-card__header h4 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.category-edit-card__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.category-edit-card__body {
  padding: 20px;
}

/*
|--------------------------------------------------------------------------
| Category Type
|--------------------------------------------------------------------------
*/
.category-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.category-type-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.category-type-option input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.category-type-option__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: 0.2s;
}
.category-type-option__radio {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #c8cdd3;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
}
.category-type-option__radio i {
  display: none;
}
.category-type-option__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 21px;
}
.category-type-option__content {
  min-width: 0;
  padding-right: 22px;
}
.category-type-option__content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.category-type-option__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}
.category-type-option:hover .category-type-option__box {
  border-color: rgba(23, 114, 69, 0.45);
}
.category-type-option input:checked + .category-type-option__box {
  border-color: #177245;
  background: rgba(23, 114, 69, 0.025);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}
.category-type-option input:checked + .category-type-option__box .category-type-option__radio {
  border-color: #177245;
  background: #177245;
}
.category-type-option input:checked + .category-type-option__box .category-type-option__radio i {
  display: block;
}

/*
|--------------------------------------------------------------------------
| Parent Category
|--------------------------------------------------------------------------
*/
.category-edit-parent-field {
  display: none;
  max-width: 650px;
}
.category-edit-parent-field label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-edit-parent-field label span {
  color: #dc3545;
}
.category-edit-parent-field select {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.category-edit-parent-field select:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.category-edit-parent-field small {
  display: block;
  margin-top: 6px;
  color: #888;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Show Parent Category When Subcategory Selected
|--------------------------------------------------------------------------
*/
.category-edit-form:has(input[name=category_type][value=subcategory]:checked) .category-edit-parent-field {
  display: block;
}

/*
|--------------------------------------------------------------------------
| Form Grid
|--------------------------------------------------------------------------
*/
.category-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/*
|--------------------------------------------------------------------------
| Form Field
|--------------------------------------------------------------------------
*/
.category-edit-field {
  min-width: 0;
}
.category-edit-field--full {
  grid-column: 1/-1;
}
.category-edit-field label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-edit-field label span {
  color: #dc3545;
}
.category-edit-field input,
.category-edit-field textarea,
.category-edit-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: 0.2s;
}
.category-edit-field input,
.category-edit-field select {
  height: 44px;
  padding: 0 13px;
}
.category-edit-field textarea {
  min-height: 120px;
  padding: 12px 13px;
  resize: vertical;
}
.category-edit-field input::placeholder,
.category-edit-field textarea::placeholder {
  color: #999;
}
.category-edit-field input:focus,
.category-edit-field textarea:focus,
.category-edit-field select:focus {
  border-color: #177245;
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.07);
}
.category-edit-field small {
  display: block;
  margin-top: 6px;
  color: #888;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Settings
|--------------------------------------------------------------------------
*/
.category-edit-settings {
  display: flex;
  flex-direction: column;
}

.category-edit-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.category-edit-setting:first-child {
  padding-top: 0;
}
.category-edit-setting:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.category-edit-setting__content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.category-edit-setting__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 19px;
}
.category-edit-setting strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-edit-setting span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Switch
|--------------------------------------------------------------------------
*/
.category-edit-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 44px;
  cursor: pointer;
}
.category-edit-switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.category-edit-switch > span {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 30px;
  background: #cfd4da;
  transition: 0.2s;
}
.category-edit-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}
.category-edit-switch input:checked + span {
  background: #177245;
}
.category-edit-switch input:checked + span::after {
  transform: translateX(20px);
}

/*
|--------------------------------------------------------------------------
| Image Section
|--------------------------------------------------------------------------
*/
.category-edit-image-section {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

/*
|--------------------------------------------------------------------------
| Current Image
|--------------------------------------------------------------------------
*/
.category-edit-current-image__label {
  display: block;
  margin-bottom: 8px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-edit-current-image__preview {
  overflow: hidden;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #f7f7f7;
}
.category-edit-current-image__preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/*
|--------------------------------------------------------------------------
| Image Upload
|--------------------------------------------------------------------------
*/
.category-edit-upload {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  border: 1px dashed rgba(23, 114, 69, 0.35);
  border-radius: 10px;
  background: rgba(23, 114, 69, 0.025);
}
.category-edit-upload__icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 23px;
}
.category-edit-upload__content {
  flex: 1;
  min-width: 0;
}
.category-edit-upload__content strong {
  display: block;
  margin-bottom: 4px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.category-edit-upload__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.category-edit-upload__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #0D2B5A;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s;
}
.category-edit-upload__btn i {
  font-size: 17px;
}
.category-edit-upload__btn:hover {
  border-color: #177245;
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Form Actions
|--------------------------------------------------------------------------
*/
.category-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 5px;
  margin-bottom: 20px;
}
.category-edit-actions__cancel, .category-edit-actions__submit {
  min-height: 43px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}
.category-edit-actions__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  background: #fff;
  color: #555555;
}
.category-edit-actions__cancel:hover {
  border-color: rgba(23, 114, 69, 0.4);
  color: #177245;
}
.category-edit-actions__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #177245;
  background: #177245;
  color: #fff;
}
.category-edit-actions__submit i {
  font-size: 17px;
}
.category-edit-actions__submit:hover {
  opacity: 0.9;
}

/*
|--------------------------------------------------------------------------
| Responsive - LG
|--------------------------------------------------------------------------
*/
@media (min-width: 992px) and (max-width: 1199px) {
  .category-edit-image-section {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .category-edit-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .category-edit-page__header-actions {
    width: 100%;
  }
  .category-edit-page__back-btn {
    width: fit-content;
  }
  .category-type-options {
    grid-template-columns: 1fr;
  }
  .category-edit-grid {
    grid-template-columns: 1fr;
  }
  .category-edit-field--full {
    grid-column: auto;
  }
  .category-edit-image-section {
    grid-template-columns: 1fr;
  }
  .category-edit-current-image {
    max-width: 300px;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .category-edit-page__header h1 {
    font-size: 24px;
  }
  .category-edit-card__header,
  .category-edit-card__body {
    padding: 16px;
  }
  .category-edit-setting {
    align-items: flex-start;
  }
  .category-edit-setting__content {
    align-items: flex-start;
  }
  .category-edit-upload {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .category-edit-upload__content {
    flex: 1 1 calc(100% - 67px);
  }
  .category-edit-upload__btn {
    width: 100%;
  }
  .category-edit-actions {
    flex-direction: column-reverse;
  }
  .category-edit-actions__cancel, .category-edit-actions__submit {
    width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| Inventory Page
|--------------------------------------------------------------------------
*/
.inventory-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.inventory-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.inventory-page__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.inventory-page__header h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.inventory-page__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Statistics
|--------------------------------------------------------------------------
*/
.inventory-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.inventory-stat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
  transition: 0.2s;
}
.inventory-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}
.inventory-stat-card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 20px;
}
.inventory-stat-card__icon--stock {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.inventory-stat-card__icon--warning {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.inventory-stat-card__icon--danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.inventory-stat-card span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.inventory-stat-card strong {
  display: block;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Inventory Card
|--------------------------------------------------------------------------
*/
.inventory-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}

/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/
.inventory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.inventory-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
|--------------------------------------------------------------------------
| Search
|--------------------------------------------------------------------------
*/
.inventory-search {
  position: relative;
  width: 100%;
  max-width: 300px;
}
.inventory-search i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #888;
  font-size: 17px;
  pointer-events: none;
}
.inventory-search input {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 38px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: 0.2s;
}
.inventory-search input::placeholder {
  color: #999;
}
.inventory-search input:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

/*
|--------------------------------------------------------------------------
| Filters
|--------------------------------------------------------------------------
*/
.inventory-filter {
  height: 42px;
  min-width: 135px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.inventory-filter:focus {
  border-color: rgba(23, 114, 69, 0.5);
}

.inventory-filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  background: rgba(255, 193, 7, 0.05);
  color: #947000;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.inventory-filter-link i {
  font-size: 16px;
}
.inventory-filter-link:hover {
  border-color: #ffc107;
  color: #947000;
}
.inventory-filter-link--danger {
  border-color: rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.05);
  color: #dc3545;
}
.inventory-filter-link--danger:hover {
  border-color: #dc3545;
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Table Wrapper
|--------------------------------------------------------------------------
*/
.inventory-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/*
|--------------------------------------------------------------------------
| Table
|--------------------------------------------------------------------------
*/
.inventory-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
}
.inventory-table th,
.inventory-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.5;
}
.inventory-table th {
  background: #F2F4F7;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.inventory-table td {
  color: #555555;
}
.inventory-table tbody tr {
  transition: 0.2s;
}
.inventory-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.02);
}
.inventory-table tbody tr:last-child td {
  border-bottom: 0;
}

/*
|--------------------------------------------------------------------------
| Product
|--------------------------------------------------------------------------
*/
.inventory-product {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 230px;
}
.inventory-product__image {
  overflow: hidden;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f7f7f7;
}
.inventory-product__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inventory-product__content {
  min-width: 0;
}
.inventory-product__content strong {
  display: block;
  margin-bottom: 3px;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-product__content span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| SKU
|--------------------------------------------------------------------------
*/
.inventory-sku {
  color: #555555;
  font-family: monospace;
  font-size: 14px;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Type
|--------------------------------------------------------------------------
*/
.inventory-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(23, 114, 69, 0.07);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Price
|--------------------------------------------------------------------------
*/
.inventory-price {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Stock Input
|--------------------------------------------------------------------------
*/
.inventory-stock-input {
  display: flex;
  align-items: center;
  width: 145px;
  height: 38px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}
.inventory-stock-input input {
  width: 75px;
  height: 100%;
  padding: 0 9px;
  border: 0;
  outline: none;
  background: transparent;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.inventory-stock-input input:focus {
  box-shadow: inset 0 0 0 1px #177245;
}
.inventory-stock-input span {
  padding-right: 9px;
  color: #888;
  font-size: 14px;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/
.inventory-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.inventory-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.inventory-status--in-stock {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.inventory-status--low-stock {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.inventory-status--out-of-stock {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Update Button
|--------------------------------------------------------------------------
*/
.inventory-update-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 37px;
  padding: 0 11px;
  border: 1px solid rgba(23, 114, 69, 0.3);
  border-radius: 7px;
  background: rgba(23, 114, 69, 0.05);
  color: #177245;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
}
.inventory-update-btn i {
  font-size: 16px;
}
.inventory-update-btn:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/
.inventory-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 18px;
  border-top: 1px solid rgba(221, 221, 221, 0.65);
}
.inventory-pagination__info {
  color: #555555;
  font-size: 14px;
}
.inventory-pagination__info strong {
  color: #0D2B5A;
  font-weight: 600;
}
.inventory-pagination__buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.inventory-pagination__buttons button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.inventory-pagination__buttons button:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.inventory-pagination__buttons button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.inventory-pagination__buttons button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Responsive - XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .inventory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventory-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .inventory-search {
    max-width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .inventory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventory-toolbar__actions {
    width: 100%;
  }
  .inventory-filter {
    flex: 1;
    min-width: 130px;
  }
  .inventory-filter-link {
    flex: 1;
  }
  .inventory-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .inventory-page__header h1 {
    font-size: 24px;
  }
  .inventory-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .inventory-stat-card {
    padding: 15px;
  }
  .inventory-toolbar {
    padding: 14px;
  }
  .inventory-toolbar__actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .inventory-filter,
  .inventory-filter-link {
    width: 100%;
  }
  .inventory-pagination {
    padding: 14px;
  }
  .inventory-pagination__buttons {
    width: 100%;
    justify-content: center;
  }
}
/*
|--------------------------------------------------------------------------
| Low Stock Page
|--------------------------------------------------------------------------
*/
.inventory-low-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Back Button
  |--------------------------------------------------------------------------
  */
}
.inventory-low-stock-page .inventory-page__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.inventory-low-stock-page .inventory-page__back i {
  font-size: 17px;
}
.inventory-low-stock-page .inventory-page__back:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.inventory-low-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Low Stock Alert
  |--------------------------------------------------------------------------
  */
}
.inventory-low-stock-page .inventory-low-stock-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 9px;
  background: rgba(255, 193, 7, 0.06);
}
.inventory-low-stock-page .inventory-low-stock-alert__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
  font-size: 18px;
}
.inventory-low-stock-page .inventory-low-stock-alert strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.inventory-low-stock-page .inventory-low-stock-alert p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.inventory-low-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Threshold
  |--------------------------------------------------------------------------
  */
}
.inventory-low-stock-page .inventory-threshold {
  color: #555555;
  font-size: 14px;
  white-space: nowrap;
}
.inventory-low-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Warning Stock Input
  |--------------------------------------------------------------------------
  */
}
.inventory-low-stock-page .inventory-stock-input--warning {
  border-color: rgba(255, 193, 7, 0.45);
  background: rgba(255, 193, 7, 0.025);
}
.inventory-low-stock-page .inventory-stock-input--warning input {
  color: #947000;
}
.inventory-low-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Critical Stock Input
  |--------------------------------------------------------------------------
  */
}
.inventory-low-stock-page .inventory-stock-input--critical {
  border-color: rgba(220, 53, 69, 0.45);
  background: rgba(220, 53, 69, 0.025);
}
.inventory-low-stock-page .inventory-stock-input--critical input {
  color: #dc3545;
}
.inventory-low-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Table
  |--------------------------------------------------------------------------
  */
}
.inventory-low-stock-page .inventory-low-stock-table {
  min-width: 1150px;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .inventory-low-stock-page .inventory-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .inventory-low-stock-page .inventory-page__back {
    width: fit-content;
  }
  .inventory-low-stock-page .inventory-low-stock-alert {
    margin: 14px;
  }
}
@media (max-width: 767px) {
  .inventory-low-stock-page .inventory-page__header h1 {
    font-size: 24px;
  }
  .inventory-low-stock-page .inventory-low-stock-alert {
    align-items: flex-start;
    padding: 12px;
  }
  .inventory-low-stock-page .inventory-low-stock-alert p {
    font-size: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| Out Of Stock Page
|--------------------------------------------------------------------------
*/
.inventory-out-of-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Back Button
  |--------------------------------------------------------------------------
  */
}
.inventory-out-of-stock-page .inventory-page__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.inventory-out-of-stock-page .inventory-page__back i {
  font-size: 17px;
}
.inventory-out-of-stock-page .inventory-page__back:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.inventory-out-of-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Out Of Stock Alert
  |--------------------------------------------------------------------------
  */
}
.inventory-out-of-stock-page .inventory-out-of-stock-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px;
  padding: 14px 15px;
  border: 1px solid rgba(220, 53, 69, 0.28);
  border-radius: 9px;
  background: rgba(220, 53, 69, 0.045);
}
.inventory-out-of-stock-page .inventory-out-of-stock-alert__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  font-size: 18px;
}
.inventory-out-of-stock-page .inventory-out-of-stock-alert strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.inventory-out-of-stock-page .inventory-out-of-stock-alert p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.inventory-out-of-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Critical Stock Input
  |--------------------------------------------------------------------------
  */
}
.inventory-out-of-stock-page .inventory-stock-input--critical {
  border-color: rgba(220, 53, 69, 0.4);
  background: rgba(220, 53, 69, 0.025);
}
.inventory-out-of-stock-page .inventory-stock-input--critical input {
  color: #dc3545;
}
.inventory-out-of-stock-page .inventory-stock-input--critical:focus-within {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.06);
}
.inventory-out-of-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Warning Filter
  |--------------------------------------------------------------------------
  */
}
.inventory-out-of-stock-page .inventory-filter-link--warning {
  border-color: rgba(255, 193, 7, 0.3);
  background: rgba(255, 193, 7, 0.05);
  color: #947000;
}
.inventory-out-of-stock-page .inventory-filter-link--warning:hover {
  border-color: #ffc107;
  color: #947000;
}
.inventory-out-of-stock-page {
  /*
  |--------------------------------------------------------------------------
  | Out Of Stock Table
  |--------------------------------------------------------------------------
  */
}
.inventory-out-of-stock-page .inventory-out-of-stock-table {
  min-width: 1050px;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .inventory-out-of-stock-page .inventory-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .inventory-out-of-stock-page .inventory-page__back {
    width: fit-content;
  }
  .inventory-out-of-stock-page .inventory-out-of-stock-alert {
    margin: 14px;
  }
}
@media (max-width: 767px) {
  .inventory-out-of-stock-page .inventory-page__header h1 {
    font-size: 24px;
  }
  .inventory-out-of-stock-page .inventory-out-of-stock-alert {
    padding: 12px;
  }
  .inventory-out-of-stock-page .inventory-out-of-stock-alert p {
    font-size: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| Orders Page
|--------------------------------------------------------------------------
*/
.orders-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.orders-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.orders-page__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.orders-page__header h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.orders-page__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.orders-page__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
|--------------------------------------------------------------------------
| Export Button
|--------------------------------------------------------------------------
*/
.orders-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
.orders-export-btn i {
  font-size: 17px;
}
.orders-export-btn:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Stats
|--------------------------------------------------------------------------
*/
.orders-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.orders-stat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
  transition: 0.2s;
}
.orders-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}
.orders-stat-card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 20px;
}
.orders-stat-card__icon--warning {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.orders-stat-card__icon--info {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.orders-stat-card__icon--success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.orders-stat-card span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.orders-stat-card strong {
  display: block;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Orders Card
|--------------------------------------------------------------------------
*/
.orders-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}

/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/
.orders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.orders-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
|--------------------------------------------------------------------------
| Search
|--------------------------------------------------------------------------
*/
.orders-search {
  position: relative;
  width: 100%;
  max-width: 340px;
}
.orders-search i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #888;
  font-size: 17px;
  pointer-events: none;
}
.orders-search input {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 38px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: 0.2s;
}
.orders-search input::placeholder {
  color: #999;
}
.orders-search input:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

/*
|--------------------------------------------------------------------------
| Filters
|--------------------------------------------------------------------------
*/
.orders-filter {
  height: 42px;
  min-width: 145px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.orders-filter:focus {
  border-color: rgba(23, 114, 69, 0.5);
}

/*
|--------------------------------------------------------------------------
| Table Wrapper
|--------------------------------------------------------------------------
*/
.orders-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/*
|--------------------------------------------------------------------------
| Table
|--------------------------------------------------------------------------
*/
.orders-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
}
.orders-table th,
.orders-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.5;
}
.orders-table th {
  background: #F2F4F7;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.orders-table td {
  color: #555555;
}
.orders-table tbody tr {
  transition: 0.2s;
}
.orders-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.02);
}
.orders-table tbody tr:last-child td {
  border-bottom: 0;
}

/*
|--------------------------------------------------------------------------
| Order Number
|--------------------------------------------------------------------------
*/
.orders-number {
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.orders-number:hover {
  text-decoration: underline;
}

/*
|--------------------------------------------------------------------------
| Customer
|--------------------------------------------------------------------------
*/
.orders-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}
.orders-customer__avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}
.orders-customer strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}
.orders-customer span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Products
|--------------------------------------------------------------------------
*/
.orders-products {
  color: #555555;
  font-size: 14px;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Total
|--------------------------------------------------------------------------
*/
.orders-total {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Payment Status
|--------------------------------------------------------------------------
*/
.orders-payment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.orders-payment i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.orders-payment--paid {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.orders-payment--pending {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.orders-payment--failed {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Order Status
|--------------------------------------------------------------------------
*/
.orders-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.orders-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.orders-status--pending {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.orders-status--processing {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.orders-status--shipped {
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.orders-status--delivered, .orders-status--completed {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.orders-status--cancelled {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Date
|--------------------------------------------------------------------------
*/
.orders-date {
  color: #555555;
  font-size: 14px;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| View Button
|--------------------------------------------------------------------------
*/
.orders-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.orders-view-btn i {
  font-size: 16px;
}
.orders-view-btn:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/
.orders-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 18px;
  border-top: 1px solid rgba(221, 221, 221, 0.65);
}
.orders-pagination__info {
  color: #555555;
  font-size: 14px;
}
.orders-pagination__info strong {
  color: #0D2B5A;
  font-weight: 600;
}
.orders-pagination__buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.orders-pagination__buttons button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.orders-pagination__buttons button:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.orders-pagination__buttons button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.orders-pagination__buttons button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Responsive - XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .orders-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .orders-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .orders-search {
    max-width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .orders-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .orders-page__header-actions {
    width: 100%;
  }
  .orders-export-btn {
    width: 100%;
  }
  .orders-toolbar__filters {
    width: 100%;
  }
  .orders-filter {
    flex: 1;
    min-width: 130px;
  }
  .orders-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive - XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .orders-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .orders-stat-card {
    padding: 15px;
  }
  .orders-page__header h1 {
    font-size: 24px;
  }
  .orders-toolbar {
    padding: 14px;
  }
  .orders-toolbar__filters {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .orders-filter {
    width: 100%;
  }
  .orders-pagination {
    padding: 14px;
  }
  .orders-pagination__buttons {
    width: 100%;
    justify-content: center;
  }
}
/*
|--------------------------------------------------------------------------
| Order Details Page
|--------------------------------------------------------------------------
*/
.order-details-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.order-details-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 22px;
}
.order-details-page__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/*
|--------------------------------------------------------------------------
| Back
|--------------------------------------------------------------------------
*/
.order-details-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 15px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.order-details-back i {
  font-size: 17px;
}
.order-details-back:hover {
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/
.order-details-title {
  display: flex;
  align-items: center;
  gap: 15px;
}
.order-details-title h1 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.order-details-title p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Main Status
|--------------------------------------------------------------------------
*/
.order-details-main-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.order-details-main-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.order-details-main-status--processing {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}

/*
|--------------------------------------------------------------------------
| Header Actions
|--------------------------------------------------------------------------
*/
.order-details-page__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-details-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
.order-details-action-btn i {
  font-size: 17px;
}
.order-details-action-btn:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.order-details-action-btn--primary {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.order-details-action-btn--primary:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
}

/*
|--------------------------------------------------------------------------
| Summary
|--------------------------------------------------------------------------
*/
.order-details-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
}

.order-details-summary__item {
  padding: 17px 18px;
  border-right: 1px solid rgba(221, 221, 221, 0.7);
}
.order-details-summary__item:last-child {
  border-right: 0;
}
.order-details-summary__item span {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
}
.order-details-summary__item strong {
  display: block;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.order-details-summary__paid {
  color: #198754 !important;
}

/*
|--------------------------------------------------------------------------
| Main Grid
|--------------------------------------------------------------------------
*/
.order-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 20px;
}

.order-details-main,
.order-details-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/
.order-details-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
}
.order-details-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.order-details-card__header h2 {
  margin: 0;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.order-details-card__header span {
  display: block;
  margin-top: 3px;
  color: #555555;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Order Items
|--------------------------------------------------------------------------
*/
.order-items-table-wrapper {
  overflow-x: auto;
}

.order-items-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
}
.order-items-table th,
.order-items-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}
.order-items-table th {
  background: #F2F4F7;
  color: #555555;
  font-weight: 600;
  white-space: nowrap;
}
.order-items-table td {
  color: #555555;
}
.order-items-table tbody tr:last-child td {
  border-bottom: 0;
}

/*
|--------------------------------------------------------------------------
| Product
|--------------------------------------------------------------------------
*/
.order-product {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 270px;
}
.order-product__image {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f7f7f7;
}
.order-product__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-product__content {
  min-width: 0;
}
.order-product__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.order-product__content span {
  display: block;
  margin-bottom: 2px;
  color: #555555;
  font-size: 14px;
}
.order-product__content small {
  display: block;
  color: #888;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Quantity
|--------------------------------------------------------------------------
*/
.order-item-quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| Order Totals
|--------------------------------------------------------------------------
*/
.order-total-list {
  padding: 5px 18px;
}

.order-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(221, 221, 221, 0.6);
}
.order-total-row:last-child {
  border-bottom: 0;
}
.order-total-row span {
  color: #555555;
  font-size: 14px;
}
.order-total-row strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.order-total-row--grand {
  padding-top: 17px;
}
.order-total-row--grand span {
  color: #0D2B5A;
  font-weight: 700;
}
.order-total-row--grand strong {
  color: #177245;
  font-size: 20px;
}

/*
|--------------------------------------------------------------------------
| Shipment
|--------------------------------------------------------------------------
*/
.order-shipment-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.order-shipment-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.order-shipment-status--pending {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}

.order-shipment-box {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 17px 18px;
}

.order-shipment-info {
  padding-right: 15px;
  border-right: 1px solid rgba(221, 221, 221, 0.7);
}
.order-shipment-info:last-child {
  padding-right: 0;
  padding-left: 15px;
  border-right: 0;
}
.order-shipment-info:not(:first-child) {
  padding-left: 15px;
}
.order-shipment-info span {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
}
.order-shipment-info strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.order-shipment-action {
  padding: 0 18px 17px;
}

.order-details-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.order-details-secondary-btn:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Customer
|--------------------------------------------------------------------------
*/
.order-customer-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 18px;
}
.order-customer-profile__avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}
.order-customer-profile strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.order-customer-profile span {
  display: block;
  color: #555555;
  font-size: 14px;
}

.order-customer-contact {
  padding: 0 18px 17px;
}
.order-customer-contact > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 11px;
  margin-top: 11px;
  border-top: 1px solid rgba(221, 221, 221, 0.6);
}
.order-customer-contact > div i {
  color: #177245;
  font-size: 17px;
}
.order-customer-contact > div span {
  overflow: hidden;
  color: #555555;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Address
|--------------------------------------------------------------------------
*/
.order-address {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 17px 18px;
}
.order-address strong {
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.order-address span {
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Payment
|--------------------------------------------------------------------------
*/
.order-payment-details {
  padding: 5px 18px;
}
.order-payment-details > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(221, 221, 221, 0.6);
}
.order-payment-details > div:last-child {
  border-bottom: 0;
}
.order-payment-details > div > span:first-child {
  color: #555555;
  font-size: 14px;
}
.order-payment-details > div strong {
  max-width: 180px;
  overflow: hidden;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-payment-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.order-payment-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.order-payment-status--paid {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

/*
|--------------------------------------------------------------------------
| Note
|--------------------------------------------------------------------------
*/
.order-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 17px 18px;
}
.order-note i {
  margin-top: 2px;
  color: #177245;
  font-size: 17px;
}
.order-note p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*
|--------------------------------------------------------------------------
| Responsive XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .order-details-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .order-shipment-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
  .order-shipment-info {
    padding: 0 0 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(221, 221, 221, 0.6);
  }
  .order-shipment-info:nth-last-child(-n+2) {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive LG
|--------------------------------------------------------------------------
*/
@media (min-width: 992px) and (max-width: 1199px) {
  .order-details-grid {
    grid-template-columns: 1fr;
  }
  .order-details-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*
|--------------------------------------------------------------------------
| Responsive MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .order-details-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .order-details-page__actions {
    width: 100%;
  }
  .order-details-action-btn {
    flex: 1;
  }
  .order-details-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .order-details-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-details-summary__item {
    border-right: 0;
    border-bottom: 1px solid rgba(221, 221, 221, 0.7);
  }
  .order-details-summary__item:nth-child(odd) {
    border-right: 1px solid rgba(221, 221, 221, 0.7);
  }
  .order-details-summary__item:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .order-details-sidebar {
    grid-template-columns: 1fr;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .order-details-page__header {
    margin-bottom: 18px;
  }
  .order-details-title h1 {
    font-size: 24px;
  }
  .order-details-summary {
    grid-template-columns: 1fr;
  }
  .order-details-summary__item {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(221, 221, 221, 0.7);
  }
  .order-details-summary__item:last-child {
    border-bottom: 0;
  }
  .order-details-page__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .order-details-action-btn {
    width: 100%;
    padding: 0 9px;
  }
  .order-details-card__header {
    padding: 14px;
  }
  .order-total-list {
    padding: 5px 14px;
  }
  .order-shipment-box {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .order-shipment-info {
    padding: 10px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(221, 221, 221, 0.6);
  }
  .order-shipment-info:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .order-shipment-action {
    padding: 0 14px 14px;
  }
  .order-customer-profile {
    padding: 14px;
  }
  .order-customer-contact {
    padding: 0 14px 14px;
  }
  .order-address {
    padding: 14px;
  }
  .order-payment-details {
    padding: 5px 14px;
  }
  .order-note {
    padding: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| Payments Page
|--------------------------------------------------------------------------
*/
.payments-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.payments-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.payments-page__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.payments-page__header h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.payments-page__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Export Button
|--------------------------------------------------------------------------
*/
.payments-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
.payments-export-btn i {
  font-size: 17px;
}
.payments-export-btn:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Stats
|--------------------------------------------------------------------------
*/
.payments-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.payments-stat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
  transition: 0.2s;
}
.payments-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}
.payments-stat-card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 20px;
}
.payments-stat-card__icon--success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.payments-stat-card__icon--warning {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.payments-stat-card__icon--danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.payments-stat-card span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.payments-stat-card strong {
  display: block;
  color: #0D2B5A;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/
.payments-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}

/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/
.payments-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.payments-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
|--------------------------------------------------------------------------
| Search
|--------------------------------------------------------------------------
*/
.payments-search {
  position: relative;
  width: 100%;
  max-width: 360px;
}
.payments-search i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #888;
  font-size: 17px;
  pointer-events: none;
}
.payments-search input {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 38px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: 0.2s;
}
.payments-search input::placeholder {
  color: #999;
}
.payments-search input:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

/*
|--------------------------------------------------------------------------
| Filters
|--------------------------------------------------------------------------
*/
.payments-filter {
  height: 42px;
  min-width: 145px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.payments-filter:focus {
  border-color: rgba(23, 114, 69, 0.5);
}

/*
|--------------------------------------------------------------------------
| Table Wrapper
|--------------------------------------------------------------------------
*/
.payments-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/*
|--------------------------------------------------------------------------
| Table
|--------------------------------------------------------------------------
*/
.payments-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
}
.payments-table th,
.payments-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.5;
}
.payments-table th {
  background: #F2F4F7;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.payments-table td {
  color: #555555;
}
.payments-table tbody tr {
  transition: 0.2s;
}
.payments-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.02);
}
.payments-table tbody tr:last-child td {
  border-bottom: 0;
}

/*
|--------------------------------------------------------------------------
| Transaction
|--------------------------------------------------------------------------
*/
.payments-transaction {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Order
|--------------------------------------------------------------------------
*/
.payments-order {
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.payments-order:hover {
  text-decoration: underline;
}

/*
|--------------------------------------------------------------------------
| Customer
|--------------------------------------------------------------------------
*/
.payments-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}
.payments-customer__avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}
.payments-customer strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}
.payments-customer span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Payment Method
|--------------------------------------------------------------------------
*/
.payments-method {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #555555;
  font-size: 14px;
  white-space: nowrap;
}
.payments-method i {
  color: #177245;
  font-size: 17px;
}

/*
|--------------------------------------------------------------------------
| Amount
|--------------------------------------------------------------------------
*/
.payments-amount {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/
.payments-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.payments-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.payments-status--paid {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.payments-status--pending {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.payments-status--failed {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.payments-status--refunded {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}

/*
|--------------------------------------------------------------------------
| Date
|--------------------------------------------------------------------------
*/
.payments-date {
  color: #555555;
  font-size: 14px;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| View Button
|--------------------------------------------------------------------------
*/
.payments-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.payments-view-btn i {
  font-size: 16px;
}
.payments-view-btn:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/
.payments-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 18px;
  border-top: 1px solid rgba(221, 221, 221, 0.65);
}
.payments-pagination__info {
  color: #555555;
  font-size: 14px;
}
.payments-pagination__info strong {
  color: #0D2B5A;
  font-weight: 600;
}
.payments-pagination__buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.payments-pagination__buttons button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.payments-pagination__buttons button:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.payments-pagination__buttons button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.payments-pagination__buttons button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Responsive XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .payments-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payments-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .payments-search {
    max-width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .payments-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .payments-page__header-actions {
    width: 100%;
  }
  .payments-export-btn {
    width: 100%;
  }
  .payments-toolbar__filters {
    width: 100%;
  }
  .payments-filter {
    flex: 1;
    min-width: 130px;
  }
  .payments-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .payments-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .payments-stat-card {
    padding: 15px;
  }
  .payments-page__header h1 {
    font-size: 24px;
  }
  .payments-toolbar {
    padding: 14px;
  }
  .payments-toolbar__filters {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .payments-filter {
    width: 100%;
  }
  .payments-pagination {
    padding: 14px;
  }
  .payments-pagination__buttons {
    width: 100%;
    justify-content: center;
  }
}
/*
|--------------------------------------------------------------------------
| Shipments Page
|--------------------------------------------------------------------------
*/
.shipments-page {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Header
  |--------------------------------------------------------------------------
  */
}
.shipments-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.shipments-page__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.shipments-page__header h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.shipments-page__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Create Button
|--------------------------------------------------------------------------
*/
.shipments-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #177245;
  border-radius: 8px;
  background: #177245;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.shipments-create-btn i {
  font-size: 17px;
}
.shipments-create-btn:hover {
  background: #177245;
  color: #fff;
  opacity: 0.92;
}

/*
|--------------------------------------------------------------------------
| Stats
|--------------------------------------------------------------------------
*/
.shipments-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.shipments-stat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
  transition: 0.2s;
}
.shipments-stat-card:hover {
  border-color: rgba(23, 114, 69, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}
.shipments-stat-card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 20px;
}
.shipments-stat-card__icon--warning {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.shipments-stat-card__icon--info {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.shipments-stat-card__icon--success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.shipments-stat-card span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
}
.shipments-stat-card strong {
  display: block;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/
.shipments-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}

/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/
.shipments-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.shipments-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
|--------------------------------------------------------------------------
| Search
|--------------------------------------------------------------------------
*/
.shipments-search {
  position: relative;
  width: 100%;
  max-width: 390px;
}
.shipments-search i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #888;
  font-size: 17px;
  pointer-events: none;
}
.shipments-search input {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 38px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: 0.2s;
}
.shipments-search input::placeholder {
  color: #999;
}
.shipments-search input:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}

/*
|--------------------------------------------------------------------------
| Filters
|--------------------------------------------------------------------------
*/
.shipments-filter {
  height: 42px;
  min-width: 145px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.shipments-filter:focus {
  border-color: rgba(23, 114, 69, 0.5);
}

/*
|--------------------------------------------------------------------------
| Table
|--------------------------------------------------------------------------
*/
.shipments-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.shipments-table {
  width: 100%;
  min-width: 1250px;
  border-collapse: collapse;
}
.shipments-table th,
.shipments-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.5;
}
.shipments-table th {
  background: #F2F4F7;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.shipments-table td {
  color: #555555;
}
.shipments-table tbody tr {
  transition: 0.2s;
}
.shipments-table tbody tr:hover {
  background: rgba(23, 114, 69, 0.02);
}
.shipments-table tbody tr:last-child td {
  border-bottom: 0;
}

/*
|--------------------------------------------------------------------------
| Shipment Number
|--------------------------------------------------------------------------
*/
.shipments-number {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Order
|--------------------------------------------------------------------------
*/
.shipments-order {
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.shipments-order:hover {
  text-decoration: underline;
}

/*
|--------------------------------------------------------------------------
| Customer
|--------------------------------------------------------------------------
*/
.shipments-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}
.shipments-customer__avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}
.shipments-customer strong {
  display: block;
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}
.shipments-customer span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Carrier
|--------------------------------------------------------------------------
*/
.shipments-carrier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.shipments-carrier i {
  color: #177245;
  font-size: 17px;
}

/*
|--------------------------------------------------------------------------
| Tracking
|--------------------------------------------------------------------------
*/
.shipments-tracking {
  color: #555555;
  font-size: 14px;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Shipment Status
|--------------------------------------------------------------------------
*/
.shipments-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.shipments-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.shipments-status--processing {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.shipments-status--transit {
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
}
.shipments-status--out {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}
.shipments-status--delivered {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.shipments-status--failed {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Delivery
|--------------------------------------------------------------------------
*/
.shipments-delivery {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.shipments-delivery--pending {
  color: #947000;
}
.shipments-delivery--transit {
  color: #177245;
}
.shipments-delivery--out {
  color: #947000;
}
.shipments-delivery--delivered {
  color: #198754;
}
.shipments-delivery--failed {
  color: #dc3545;
}

/*
|--------------------------------------------------------------------------
| Date
|--------------------------------------------------------------------------
*/
.shipments-date {
  color: #555555;
  font-size: 14px;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| View Button
|--------------------------------------------------------------------------
*/
.shipments-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.shipments-view-btn i {
  font-size: 16px;
}
.shipments-view-btn:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/
.shipments-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 18px;
  border-top: 1px solid rgba(221, 221, 221, 0.65);
}
.shipments-pagination__info {
  color: #555555;
  font-size: 14px;
}
.shipments-pagination__info strong {
  color: #0D2B5A;
  font-weight: 600;
}
.shipments-pagination__buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.shipments-pagination__buttons button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.shipments-pagination__buttons button:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.shipments-pagination__buttons button.active {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.shipments-pagination__buttons button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Responsive XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .shipments-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shipments-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .shipments-search {
    max-width: 100%;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .shipments-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .shipments-page__header-actions {
    width: 100%;
  }
  .shipments-create-btn {
    width: 100%;
  }
  .shipments-toolbar__filters {
    width: 100%;
  }
  .shipments-filter {
    flex: 1;
    min-width: 130px;
  }
  .shipments-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .shipments-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .shipments-stat-card {
    padding: 15px;
  }
  .shipments-page__header h1 {
    font-size: 24px;
  }
  .shipments-toolbar {
    padding: 14px;
  }
  .shipments-toolbar__filters {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .shipments-filter {
    width: 100%;
  }
  .shipments-pagination {
    padding: 14px;
  }
  .shipments-pagination__buttons {
    width: 100%;
    justify-content: center;
  }
}
/*
|--------------------------------------------------------------------------
| Create Shipment Page
|--------------------------------------------------------------------------
*/
.shipment-create-page {
  width: 100%;
}

/*
|--------------------------------------------------------------------------
| Page Header
|--------------------------------------------------------------------------
*/
.shipment-create-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 22px;
}

.shipment-create-page__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.shipment-create-page__header h1 {
  margin: 0 0 6px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}

.shipment-create-page__header p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Back
|--------------------------------------------------------------------------
*/
.shipment-create-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.shipment-create-back i {
  font-size: 17px;
}
.shipment-create-back:hover {
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Header Actions
|--------------------------------------------------------------------------
*/
.shipment-create-page__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shipment-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
}
.shipment-create-btn i {
  font-size: 17px;
}
.shipment-create-btn--secondary {
  background: #fff;
  color: #555555;
}
.shipment-create-btn--secondary:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.shipment-create-btn--primary {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.shipment-create-btn--primary:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
  opacity: 0.92;
}

/*
|--------------------------------------------------------------------------
| Main Grid
|--------------------------------------------------------------------------
*/
.shipment-create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 20px;
}

.shipment-create-main,
.shipment-create-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/
.shipment-create-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
}
.shipment-create-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.shipment-create-card__header h2 {
  margin: 0;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.shipment-create-card__header span {
  display: block;
  margin-top: 3px;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.shipment-create-card__body {
  padding: 18px;
}

/*
|--------------------------------------------------------------------------
| Form Grid
|--------------------------------------------------------------------------
*/
.shipment-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

/*
|--------------------------------------------------------------------------
| Form Group
|--------------------------------------------------------------------------
*/
.shipment-form-group {
  display: flex;
  flex-direction: column;
}
.shipment-form-group--full {
  grid-column: 1/-1;
}
.shipment-form-group label {
  display: block;
  margin-bottom: 7px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.shipment-form-group label span {
  color: #dc3545;
}
.shipment-form-group input,
.shipment-form-group select,
.shipment-form-group textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0D2B5A;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: 0.2s;
}
.shipment-form-group input::placeholder,
.shipment-form-group select::placeholder,
.shipment-form-group textarea::placeholder {
  color: #999;
}
.shipment-form-group input:focus,
.shipment-form-group select:focus,
.shipment-form-group textarea:focus {
  border-color: rgba(23, 114, 69, 0.5);
  box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.06);
}
.shipment-form-group input,
.shipment-form-group select {
  height: 44px;
  padding: 0 12px;
}
.shipment-form-group textarea {
  min-height: 120px;
  padding: 11px 12px;
  resize: vertical;
  line-height: 1.5;
}
.shipment-form-group small {
  margin-top: 6px;
  color: #888;
  font-size: 14px;
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Status Preview
|--------------------------------------------------------------------------
*/
.shipment-status-preview {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.shipment-status-preview__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 19px;
}
.shipment-status-preview strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.shipment-status-preview span {
  display: block;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Order Preview
|--------------------------------------------------------------------------
*/
.shipment-order-preview {
  padding: 17px 18px;
}

.shipment-order-preview__top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
}

.shipment-order-preview__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 18px;
}

.shipment-order-preview__top strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.shipment-order-preview__top span {
  display: block;
  color: #555555;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Order Details
|--------------------------------------------------------------------------
*/
.shipment-order-preview__details {
  padding: 4px 0;
}
.shipment-order-preview__details > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(221, 221, 221, 0.6);
}
.shipment-order-preview__details > div:last-child {
  border-bottom: 0;
}
.shipment-order-preview__details > div span {
  color: #555555;
  font-size: 14px;
}
.shipment-order-preview__details > div strong {
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

.shipment-order-paid {
  color: #198754 !important;
}

/*
|--------------------------------------------------------------------------
| Order View
|--------------------------------------------------------------------------
*/
.shipment-order-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 13px;
  margin-top: 4px;
  border-top: 1px solid rgba(221, 221, 221, 0.65);
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.shipment-order-view i {
  font-size: 16px;
}
.shipment-order-view:hover {
  text-decoration: underline;
}

/*
|--------------------------------------------------------------------------
| Checklist
|--------------------------------------------------------------------------
*/
.shipment-checklist {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.shipment-checklist > div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
}
.shipment-checklist > div i {
  color: #198754;
  font-size: 17px;
}
.shipment-checklist > div span {
  color: #555555;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Responsive XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .shipment-create-grid {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive LG
|--------------------------------------------------------------------------
*/
@media (min-width: 992px) and (max-width: 1199px) {
  .shipment-create-grid {
    grid-template-columns: 1fr;
  }
  .shipment-create-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*
|--------------------------------------------------------------------------
| Responsive MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .shipment-create-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .shipment-create-page__actions {
    width: 100%;
  }
  .shipment-create-btn {
    flex: 1;
  }
  .shipment-create-sidebar {
    grid-template-columns: 1fr;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .shipment-create-page__header h1 {
    font-size: 24px;
  }
  .shipment-create-page__header p {
    font-size: 14px;
  }
  .shipment-create-page__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .shipment-create-btn {
    width: 100%;
    padding: 0 9px;
  }
  .shipment-create-card__header {
    padding: 14px;
  }
  .shipment-create-card__body {
    padding: 14px;
  }
  .shipment-form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .shipment-form-group--full {
    grid-column: auto;
  }
  .shipment-order-preview {
    padding: 14px;
  }
}
/*
|--------------------------------------------------------------------------
| Shipment Details Page
|--------------------------------------------------------------------------
*/
.shipment-details-page {
  width: 100%;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/
.shipment-details-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 22px;
}

.shipment-details-page__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #177245;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/*
|--------------------------------------------------------------------------
| Back
|--------------------------------------------------------------------------
*/
.shipment-details-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 15px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.shipment-details-back i {
  font-size: 17px;
}
.shipment-details-back:hover {
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/
.shipment-details-title {
  display: flex;
  align-items: center;
  gap: 15px;
}
.shipment-details-title h1 {
  margin: 0 0 5px;
  color: #0D2B5A;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.shipment-details-title p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Main Status
|--------------------------------------------------------------------------
*/
.shipment-main-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.shipment-main-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.shipment-main-status--processing {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}

/*
|--------------------------------------------------------------------------
| Header Actions
|--------------------------------------------------------------------------
*/
.shipment-details-page__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shipment-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.shipment-action-btn i {
  font-size: 17px;
}
.shipment-action-btn:hover {
  border-color: rgba(23, 114, 69, 0.35);
  color: #177245;
}
.shipment-action-btn--primary {
  border-color: #177245;
  background: #177245;
  color: #fff;
}
.shipment-action-btn--primary:hover {
  border-color: #177245;
  background: #177245;
  color: #fff;
  opacity: 0.92;
}

/*
|--------------------------------------------------------------------------
| Summary
|--------------------------------------------------------------------------
*/
.shipment-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
}

.shipment-summary__item {
  padding: 17px 18px;
  border-right: 1px solid rgba(221, 221, 221, 0.7);
}
.shipment-summary__item:last-child {
  border-right: 0;
}
.shipment-summary__item span {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
}
.shipment-summary__item strong,
.shipment-summary__item a {
  display: block;
  color: #0D2B5A;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  text-decoration: none;
}
.shipment-summary__item a {
  color: #177245;
}
.shipment-summary__item a:hover {
  text-decoration: underline;
}

.shipment-summary__success {
  color: #198754 !important;
}

/*
|--------------------------------------------------------------------------
| Main Grid
|--------------------------------------------------------------------------
*/
.shipment-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 20px;
}

.shipment-details-main,
.shipment-details-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/
.shipment-details-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 11px;
  background: #fff;
}
.shipment-details-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.7);
}
.shipment-details-card__header h2 {
  margin: 0;
  color: #0D2B5A;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.shipment-details-card__header > div > span {
  display: block;
  margin-top: 3px;
  color: #555555;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Shipment Information
|--------------------------------------------------------------------------
*/
.shipment-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shipment-info-item {
  padding: 16px 18px;
  border-right: 1px solid rgba(221, 221, 221, 0.6);
  border-bottom: 1px solid rgba(221, 221, 221, 0.6);
}
.shipment-info-item:nth-child(even) {
  border-right: 0;
}
.shipment-info-item:nth-last-child(-n+2) {
  border-bottom: 0;
}
.shipment-info-item > span:first-child {
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 14px;
}
.shipment-info-item > strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.shipment-info-item > a {
  color: #177245;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.shipment-info-item > a:hover {
  text-decoration: underline;
}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/
.shipment-status {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 14px !important;
  line-height: 1.3;
  font-weight: 600 !important;
}
.shipment-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.shipment-status--processing {
  background: rgba(13, 202, 240, 0.1);
  color: #087f99;
}
.shipment-status--pending {
  background: rgba(255, 193, 7, 0.12);
  color: #947000;
}

/*
|--------------------------------------------------------------------------
| Tracking
|--------------------------------------------------------------------------
*/
.shipment-tracking {
  padding: 20px 20px 20px 28px;
}

.shipment-tracking__item {
  position: relative;
  display: flex;
  gap: 13px;
  min-height: 82px;
}
.shipment-tracking__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 13px;
  width: 1px;
  height: calc(100% - 5px);
  background: #ddd;
}
.shipment-tracking__item--completed:not(:last-child)::before {
  background: #198754;
}
.shipment-tracking__item--active:not(:last-child)::before {
  background: #ddd;
}

.shipment-tracking__indicator {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  color: #999;
  font-size: 14px;
}
.shipment-tracking__item--completed .shipment-tracking__indicator {
  border-color: #198754;
  background: #198754;
  color: #fff;
}
.shipment-tracking__item--active .shipment-tracking__indicator {
  border-color: #177245;
  background: #177245;
  color: #fff;
}

.shipment-tracking__content {
  padding-bottom: 20px;
}
.shipment-tracking__content strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.shipment-tracking__content span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}
.shipment-tracking__content small {
  display: block;
  color: #888;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Address
|--------------------------------------------------------------------------
*/
.shipment-address {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px;
}

.shipment-address__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 19px;
}

.shipment-address__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.shipment-address__content strong {
  margin-bottom: 2px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.shipment-address__content span {
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Items Table
|--------------------------------------------------------------------------
*/
.shipment-items-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.shipment-items-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
}
.shipment-items-table th,
.shipment-items-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.65);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}
.shipment-items-table th {
  background: #F2F4F7;
  color: #555555;
  font-weight: 600;
  white-space: nowrap;
}
.shipment-items-table td {
  color: #555555;
}
.shipment-items-table tbody tr:last-child td {
  border-bottom: 0;
}

/*
|--------------------------------------------------------------------------
| Product
|--------------------------------------------------------------------------
*/
.shipment-product {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 280px;
}
.shipment-product__image {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f7f7f7;
}
.shipment-product__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.shipment-product strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.shipment-product span {
  display: block;
  color: #555555;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Quantity
|--------------------------------------------------------------------------
*/
.shipment-quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| Customer
|--------------------------------------------------------------------------
*/
.shipment-customer {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 18px;
}
.shipment-customer__avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 14px;
  font-weight: 700;
}
.shipment-customer strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.shipment-customer span {
  display: block;
  color: #555555;
  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Customer Contact
|--------------------------------------------------------------------------
*/
.shipment-customer-contact {
  padding: 0 18px 17px;
}
.shipment-customer-contact > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 11px;
  margin-top: 11px;
  border-top: 1px solid rgba(221, 221, 221, 0.6);
}
.shipment-customer-contact > div i {
  color: #177245;
  font-size: 17px;
}
.shipment-customer-contact > div span {
  overflow: hidden;
  color: #555555;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Carrier
|--------------------------------------------------------------------------
*/
.shipment-carrier-box {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 18px;
}
.shipment-carrier-box__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(23, 114, 69, 0.08);
  color: #177245;
  font-size: 19px;
}
.shipment-carrier-box strong {
  display: block;
  margin-bottom: 3px;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}
.shipment-carrier-box span {
  display: block;
  color: #555555;
  font-size: 14px;
}

.shipment-carrier-details {
  padding: 0 18px 17px;
}
.shipment-carrier-details > div {
  padding-top: 11px;
  margin-top: 11px;
  border-top: 1px solid rgba(221, 221, 221, 0.6);
}
.shipment-carrier-details > div span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 14px;
}
.shipment-carrier-details > div strong {
  display: block;
  color: #0D2B5A;
  font-size: 14px;
  font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| Quick Actions
|--------------------------------------------------------------------------
*/
.shipment-quick-actions {
  display: flex;
  flex-direction: column;
  padding: 7px 0;
}

.shipment-quick-action {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.shipment-quick-action i {
  width: 20px;
  color: #177245;
  font-size: 17px;
  text-align: center;
}
.shipment-quick-action:hover {
  background: rgba(23, 114, 69, 0.04);
  color: #177245;
}

/*
|--------------------------------------------------------------------------
| Note
|--------------------------------------------------------------------------
*/
.shipment-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 17px 18px;
}
.shipment-note i {
  margin-top: 2px;
  color: #177245;
  font-size: 17px;
}
.shipment-note p {
  margin: 0;
  color: #555555;
  font-size: 14px;
  line-height: 1.6;
}

/*
|--------------------------------------------------------------------------
| Responsive XL
|--------------------------------------------------------------------------
*/
@media (min-width: 1200px) and (max-width: 1399px) {
  .shipment-details-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive LG
|--------------------------------------------------------------------------
*/
@media (min-width: 992px) and (max-width: 1199px) {
  .shipment-details-grid {
    grid-template-columns: 1fr;
  }
  .shipment-details-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*
|--------------------------------------------------------------------------
| Responsive MD
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 991px) {
  .shipment-details-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .shipment-details-page__actions {
    width: 100%;
  }
  .shipment-action-btn {
    flex: 1;
  }
  .shipment-details-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .shipment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shipment-summary__item {
    border-right: 0;
    border-bottom: 1px solid rgba(221, 221, 221, 0.7);
  }
  .shipment-summary__item:nth-child(odd) {
    border-right: 1px solid rgba(221, 221, 221, 0.7);
  }
  .shipment-summary__item:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .shipment-details-sidebar {
    grid-template-columns: 1fr;
  }
}
/*
|--------------------------------------------------------------------------
| Responsive XS
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
  .shipment-details-title h1 {
    font-size: 24px;
  }
  .shipment-summary {
    grid-template-columns: 1fr;
  }
  .shipment-summary__item {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(221, 221, 221, 0.7);
  }
  .shipment-summary__item:last-child {
    border-bottom: 0;
  }
  .shipment-details-page__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .shipment-action-btn {
    width: 100%;
    padding: 0 9px;
  }
  .shipment-details-card__header {
    padding: 14px;
  }
  .shipment-info-grid {
    grid-template-columns: 1fr;
  }
  .shipment-info-item {
    border-right: 0 !important;
  }
  .shipment-info-item:last-child {
    border-bottom: 0;
  }
  .shipment-tracking {
    padding: 18px 14px 18px 18px;
  }
  .shipment-address {
    padding: 14px;
  }
  .shipment-customer {
    padding: 14px;
  }
  .shipment-customer-contact {
    padding: 0 14px 14px;
  }
  .shipment-carrier-box {
    padding: 14px;
  }
  .shipment-carrier-details {
    padding: 0 14px 14px;
  }
  .shipment-note {
    padding: 14px;
  }
}

/*# sourceMappingURL=backend.css.map */