@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* Theme Variables & Bootstrap Customization */
:root {
    /* Primary Colors */
    --primary-color: #212d3d;
    --primary-hover: #5c79ff;
    --primary-color-hover: #8298fc;
    --primary-light: #f3f4f9;
    --primary-dark: #051830;
    --danger-button-hover: #f06c78;
    --secondary-color: #111827;
    --secondary-light: #e5e7eb;

    /* Neutral Colors */
    --white: #ffffff;
    --gray-50: #f2f4f5;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;

    /* Semantic Colors */
    --success: #4caf50;
    --success-light: #e8f5e9;
    --warning: #ff9800;
    --danger: #ed3d38;
    --info: #2196f3;

    /* Text Colors */
    --text-primary: #212d3d;
    --text-secondary: #a0a4b1;
    --text-dark: #5e6473;
    --text-disabled: #a0a4b1;
    --text-white: #ffffff;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #fafafa;
    --bg-cus-highlight: #2a3545;

    /* Border Colors */
    --border-light: #e4ecf2;
    --border-medium: #bdbdbd;
    --border-dark: #757575;

    /* Shadow */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* Spacing Scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-10: 0.625rem;
    --spacing-12: 0.75rem;
    --spacing-md: 1rem;
    --spacing-20: 1.25rem;
    --spacing-lg: 1.5rem;
    --spacing-28: 1.75rem;
    --spacing-xl: 2rem;
    --spacing-36: 2.25rem;
    --spacing-32: 2rem;
    --spacing-1xl: 2.5rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Typography */
    --font-primary: "Roboto", sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.938rem;
    --font-size-lg: 1.125rem;
    --font-size-17: 1.063rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Layout */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 60px;
    --navbar-height: 64px;
    --transition-speed: 0.3s;

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    --focus-shadow-primary: 0 0 0 3px rgba(92, 121, 255, 0.15);
    --focus-shadow-success: 0 0 0 3px rgba(76, 175, 80, 0.1);
    --focus-shadow-danger: 0 0 0 3px rgba(244, 67, 54, 0.1);

    /* Button Colors */

    --green-button: #5cb85c;
}

:root {
    --bs-primary: #212d3d;
    /* Teal */
    --bs-primary-rgb: 32, 201, 151;
    --bs-info: #23cf3c;
    /* Cyan */
    --bs-info-rgb: 13, 202, 240;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    height: 100%;
}

/* form css */
/* =========================================
   Global Primary Color Override
   ========================================= */
:root {
    --bs-primary: #212d3d;
    --bs-primary-rgb: 28, 164, 51;
}

/* =========================================
     Form Control (input, textarea, select)
     ========================================= */
.form-control {
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.71rem 0.75rem !important;
    font-size: var(--font-size-base) !important;
    transition: all var(--transition-speed) !important;
    height: auto !important;
    color: var(--text-primary);
    line-height: normal;
}

/* .form-control,
.form-select {
    border-color: var(--border-light);
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
    font-size: var(--font-size-base);
}



/* .form-control:focus,
.form-select:focus {
    border-color: #dee2e6 !important;
    outline: none !important;
    box-shadow: none;
} */
a {
    color: var(--text-primary);
    text-decoration: none;
}

a:focus-visible {
    outline: none;
    box-shadow: none;
}

label {
    font-weight: 600;
}

/* Placeholder color optional:
  .form-control::placeholder {
    color: #7dbf8a;
  }
  */

/* =========================================
     Checkboxes
     ========================================= */
.form-check-input {
    width: 1.2em;
    height: 1.2em;
}

.form-check .form-check-input {
    margin-left: -2em;
    margin-top: 2px;
    border: 1px solid var(--text-dark) !important;
}

.form-check {
    padding-left: var(--spacing-28);
}

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

.form-check-input:checked+.form-check-label {
    color: var(--text-primary) !important;
}

.form-check-input:focus {
    box-shadow: none;
    border: 1px solid var(--text-dark);
}

::placeholder {
    color: var(--text-secondary) !important;
}


/* Hide native checkbox */
.custom-check .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Checkbox box */
.custom-check .form-check-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    cursor: pointer;
}

/* Check icon */
.custom-check .form-check-label::after {
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    font-size: 11px;
    color: var(--white);
    transition: transform 0.15s ease;
    cursor: pointer;
}

.custom-check .form-check-input:checked+.form-check-label::before {
    background: var(--primary-hover);
}

.custom-check .form-check-input:checked+.form-check-label::after {
    transform: translateY(-50%) scale(1);
}

/* =========================================
     Radio Buttons
     ========================================= */
.form-check-input[type="radio"]:checked {
    background-color: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
}

/* =========================================
     Switches
     ========================================= */
.form-switch .form-check-input:checked {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* =========================================
     Input Group (focus border fix)
     ========================================= */
.input-group-text {
    border-color: #dee2e6 !important;
}

/* On focus, input group border becomes green */
/* .input-group .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(200, 217, 240, 0.25) !important;
} */

/* =========================================
     Dropdowns
     ========================================= */
/* .dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:hover {
    background-color: #212d3d !important;
    color: #fff !important;
} */

/* form css end */
.navbar {
    background-color: var(--bs-primary);
}

/* .navbar-brand,
.nav-link {
    color: white !important;
} */
.navbar-nav .nav-item .nav-link {
    color: #fff;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #dee2e6;
}

.hero {
    background: #2a3646;
    color: white;
    padding: 60px 0;
}

.hero h1 {
    font-weight: bold;
    font-size: 2.5rem;
}

.hero .lead {
    font-size: 1.1rem;
}

.section-bg {
    background-color: white;
    padding: 80px 0;
}

.product-card {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card .card-img-top {
    height: 300px;
    object-fit: cover;
}

.image-wrapper {
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    background: #f5f5f5;
}

.card-text {
    min-height: 50px;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes the image fill the box perfectly */
    object-position: center;
}

.feature-icon {
    background: var(--bs-primary);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.testimonial-carousel .carousel-item {
    text-align: center;
    padding: 2rem;
}

.faq-item {
    background: white;
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: var(--bs-primary);
    color: white;
    padding: 40px 0;
    margin-top: 80px;
}

.card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.blockquote {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.blockquote p {
    color: #212529;
    /* Standard text color */
    font-style: italic;
}

.blockquote-footer {
    color: #6c757d;
    /* Muted text color */
    background: none;
}

.hero-small {
    background: #2a3646;
    padding: 80px 0;
    color: #fff;
}

.plan-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-width: 850px;
    margin: 40px auto;
}

.plan-header {
    background: var(--text-primary);
    color: white;
    padding: 25px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
}

.plan-price {
    background: #2a3646;
    color: #f2f2f2;
    padding: 15px;
    text-align: center;
    font-size: 1.9rem;
    font-weight: 700;
}

.content-section {
    padding: 35px;
}

.keypoint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 1rem;
}

.keypoint-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-weight: 700;
    flex-shrink: 0;
}

.divider-line {
    width: 1px;
    background: #053680;
    height: 100%;
    margin: 0 30px;
}

.checkout-btn {
    background: var(--bs-primary);
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 700;
    width: 100%;
}

.checkout-btn:hover {
    opacity: 0.9;
}

.return-btn i {
    margin-right: 6px;
    font-size: var(--font-size-sm);
}

/** questionnaire css **/

.question-container {
    display: none;
    max-width: 700px;
    margin: 50px auto;
}

.question-container.active {
    display: block;
}

.full-center-wrapper {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .progress-container {
        max-width: 720px;
        padding: 0 1.2rem;
        margin: 20px auto;
        width: 100%;
    }
}

.progress-text {
    text-align: right;
    font-weight: 500;
    margin-top: 5px;
}

.sub-question {
    margin-top: 18px;
    text-align: left;
    animation: fadeIn 0.22s ease-in-out;
    border-top: 1px solid #e9ecef;
    padding-top: 14px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-msg {
    color: red;
    font-size: 0.9rem;
    margin-top: 8px;
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

/* ui changes new */
::selection {
    background-color: var(--bs-primary);
    color: var(--text-white);
}

/* For Firefox */
::-moz-selection {
    background-color: var(--bs-primary);
    color: var(--text-white);
}

.accordion-button,
.accordion-button:focus {
    outline: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: #c8d9f0;
}

.accordion-header .accordion-button {
    font-weight: 600;
}

.small-container {
    max-width: 900px;
    margin: 0px auto;
    padding: 0 1.5rem;
}

.btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: var(--spacing-12);
}

.btn:focus-visible {
    color: #fff;
    background-color: #212d3d;
    border-color: #212d3d;
    outline: 0;
    box-shadow: none;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background-color: #212d3d;
    border-color: #212d3d;
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
}

.form-check .form-check-input {
    margin-left: -2em;
}

select option:hover {
    background: #212d3d;
}

.alert-info {
    --bs-alert-bg: #c8d9f0;
    --bs-alert-border-color: #212d3d;
}

input:-internal-autofill-selected,
input:-webkit-autofill {
    background-color: #c8d9f0 !important;
}

.checkout-card .text-danger {
    display: block;
    padding-top: 8px;
}

.checkout-card .form-select {
    padding: var(--spacing-12);
}

.remove-btn {
    position: absolute;
    top: 10px;
    right: -10px;
    background: rgb(215, 40, 40);
    color: white;
    padding: 3px 9px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    width: 32px;
    height: 32px;
    display: none;
}

@media (max-width: 992px) {
    .file-upload-container {
        padding: 40px 20px !important;
        max-width: 90% !important;
    }

    .btns-mob {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .small-container {
        max-width: 100%;
    }

    .progress-container {
        margin: 0 auto;
        width: 90%;
    }
}

/* video upload */
.top-bar {
    background: #212d3d;
    padding: 15px 0;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
}

/*
.select2.select2-container.select2-container--default {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #212d3d !important;
    border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 50px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container .select2-selection--single {
    height: 50px !important;
} */

.card-custom.card {
    max-width: 700px;
    margin: 40px auto;
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.video-box {
    width: 300px;
    height: 200px;
    background: #e3e3e3;
    margin: auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ul {
    list-style: none;
    padding: 0;
}

.btn-record {
    background: #d62828;
    color: white;
    margin-bottom: 20px;
}

.btn-submit {
    background: #73a8cc;
    color: white;
    width: 100%;
    padding: 15px;
}

/* Modal */
.custom-model.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.custom-model .modal-box {
    width: 600px;
    background: white;
    padding: 25px;
    border-radius: 8px;
    position: relative;
}

.btn-camera {
    background: #1c62b9;
    color: white;
}

.btn-upload {
    background: #20a3a7;
    color: white;
}

.btn-cancel {
    background: #d9534f;
    color: white;
}

.close-x {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
}

@media (max-width: 767px) {
    .custom-model .modal-box {
        width: 90%;
    }
}

.row-ft {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 150px;
}

/* SIDEBAR */
.dashboard-sidebar {
    background: #fff;
    min-height: 100vh;
    border-right: 1px solid;
    padding: 16px 0;
    transition: all 0.3s ease;
    z-index: 2000;
}

/* MOBILE SIDEBAR HIDE */
@media (max-width: 992px) {
    .dashboard-sidebar {
        position: fixed;
        left: -260px;
        top: 56px;
        bottom: 0;
        width: 240px;
        border-right: 1px solid;
        border-bottom: none;
        background: #fff;
        min-height: auto;
    }

    .dashboard-sidebar.show {
        left: 0;
    }
}

.dashboard-sidebar h5 {
    padding-left: 22px;
    margin-bottom: 14px;
    font-weight: 600;
}

/* NAV ITEMS */
.dashboard-nav {
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
    padding: 10px 22px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin: 4px 12px;
    text-decoration: none !important;
    /* remove underline */
}

.dashboard-nav i {
    margin-right: 10px;
    font-size: 18px;
    color: #4b5563;
}

.dashboard-nav.active,
.dashboard-nav:hover {
    background: var(--secondary-light);
    color: black;
    text-decoration: none !important;
    /* remove underline on hover */
}

/* CARD */
.card {
    border-radius: 18px;
    border: 1px solid var(--secondary-light);
}

/* BADGE */
.badge-green {
    background: #22c55e;
    color: #fff;
    padding: 4px 10px;
    font-size: 14px;
    border-radius: 6px;
    font-weight: 500;
}

.pill {
    background: #e5f9e6;
    color: #059669;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 6px;
    font-weight: 600;
}

/* BUTTONS */
.btn-refill {
    background: #10b981;
    border: none;
    width: 100%;
    font-size: 16px;
    padding: 10px 0;
    border-radius: 12px;
    font-weight: 500;
}

.btn-refill:hover {
    background: #0ea37b;
}

.btn-view {
    border-radius: 10px;
    font-weight: 500;
    font-size: 16px;
    width: 100%;
    padding: 10px 0;
}

/* IMAGE */
.med-img {
    width: 80px;
    height: auto;
}

@media (max-width: 768px) {
    .med-img {
        width: 60px;
    }
}

/* SHIPPING BOX */
.shipping-box {
    border: 1px solid var(--secondary-light);
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px;
}

/* OVERLAY FOR MOBILE */
#overlay {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
}

/* NEW NAVBAR CLASS */
.topnav {
    border-bottom: 1px solid var(--border);
    min-height: 70px;
    background: #fff;
}

.topnav-brand {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -1px;
    color: rgb(22, 20, 20) !important;
}

.topnav-link {
    font-weight: 500;
    font-size: 14px;
    padding: 24px 16px !important;
    color: var(--text-gray) !important;
}

.topnav-link.active {
    color: var(--brand-primary) !important;
    border-bottom: 2px solid var(--brand-primary) !important;
}

@media (max-width: 992px) {
    .topnav-link {
        padding: 14px 10px !important;
        display: block;
    }
}

/* HEADER BAR */
.top-header {
    border-bottom: 1px solid #dee2e6;
    /* padding: 12px 0; */
    background: #212d3d;
    z-index: 2000;
    position: relative;
}

.logo {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #fff;
}

.header-icon {
    font-size: 1.6rem;
    cursor: pointer;
    color: #fff;
}

/* NAV/GREETING BAR */
.nav-wrapper {
    border-bottom: 1px solid #dee2e6;
    /* padding: 20px 0; */
    background-color: var(--bg-primary);
}

.greeting {
    font-size: 1.05rem;
    font-weight: 700;
    color: #212d3d;
    margin-bottom: 2px;
}

.greeting-sub {
    font-size: 16px;
    color: #444;
    padding-bottom: 10px;
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 400;
    padding: 18px 0 22px;
    text-decoration: none;
    color: #444;
    margin-right: 20px;
    white-space: nowrap;
}

.nav-links a:last-child {
    margin-right: 0;
}

.nav-links a.active {
    border-bottom: 2px solid var(--primary-hover);
    color: var(--primary-hover);
}

/* LEFT PRODUCT CARD */
.product-box {
    /* border: 1px solid #d0dcd2;
    border-radius: 6px;
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.06); */
}

.subs-product-img {
    width: 110px;
    height: 110px;
    border: 1px dashed #c2c2c2;
    border-radius: 6px;
    background: #f1f1f1;
    margin-right: 12px;
}

.product-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0;
}

.product-sub {
    font-size: 1rem;
    color: #818992;
}

.product-price {
    font-size: 1.125rem;
    font-weight: 700;
}

.product-next {
    font-size: 1rem;
    font-weight: 400;
    color: #444;
}

.product-next span {
    color: #1b5e20;
    /* text-decoration: underline; */
    font-weight: 700;
}

.badge {
    line-height: normal;
}

#data-table-order th:nth-child(7),
#data-table-order td:nth-child(7) {
    min-width: 90px;
    white-space: nowrap;
    /* text-align: center; */
    vertical-align: middle;
    padding: 8px 8px;
    line-height: 1;
}

.status-badge {
    background: transparent;
    padding: 0px 0;
    border-radius: 15px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--primary-color);
    line-height: 1;
    font-size: var(--font-size-base);
}

.status-btn {
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 1;
}

table.dataTable.table-striped>tbody>tr.odd>* {
    font-size: 15px !important;
}

.pagination {
    justify-content: center;
}

.active>.page-link,
.page-link.active {
    background-color: var(--primary-hover) !important;
}

.table-responsive {
    overflow-x: hidden;
}

#table-footer {
    margin-top: 25px;
}

/* DataTable "Show entries" inline layout */
.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    white-space: nowrap;
    font-weight: 400;
    color: var(--text-secondary);
}

.dataTables_length select {
    width: auto;
    min-width: 42px;
    height: 42px;
    text-align: center;
}

/* RIGHT PANEL */
.details-card {
    background: var(--white);
    padding: var(--spacing-28);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1;
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #efefef;
}

.details-body {
    /* height: 150px;
    overflow-y: auto; */
}

.details-title {
    font-weight: 500;
    font-size: var(--font-size-17);
    margin: 0;
    text-transform: capitalize;
    color: var(--primary-color);
}

.card-title {
    font-size: 22px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
}

.card-title.mt {
    margin-top: 32px;
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-top: 1px solid #e6edf5;
}

.info-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.value {
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--primary-color);
}

.value.link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon {
    font-size: 1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.carrier {
    width: 24px;
    height: auto;
}

hr {
    margin-top: 12px;
    margin-bottom: 12px;
}

.product-box.active-card {
    /* border-left: 4px solid #212d3d;
    box-shadow: 0 0 6px rgba(13, 110, 253, 0.4); */
}

/* FOOTER TEXT */
.panel-note {
    padding: 12px 24px;
    font-size: 13px;
    text-align: center;
    color: var(--text-gray);
}

/* RESPONSIVE FIXES */
@media (max-width: 992px) {
    .navbar-nav {
        text-align: right;
    }

    .nav-link {
        padding: 14px 10px !important;
        display: block;
    }

    .product-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

.table thead tr th {
    font-weight: 600;
    font-size: 1rem;
    color: #444;
    border-bottom: 1px solid var(--secondary-light);
    background: #fff;
    /* padding: 15px 30px; */
    text-transform: capitalize;
}

/* .table tbody tr td {
    padding: 15px 30px;
} */
.table tbody td {
    font-size: 1rem;
    color: #444;
    vertical-align: middle;
    background: #fff;
}

.status-approved {
    color: #16a34a;
    font-weight: 500;
}

/* cursor hand on pagination */
.pagination .page-link {
    cursor: pointer;
    font-size: 14px;
    width: 42px;
}

/* hover style */
.pagination .page-link:hover {
    background: #f1f5f9;
}

.selectdate-box {
    min-height: 38px;
}

/* order history table  */
.active>.page-link,
.page-link.active {
    background-color: #212d3d;
    border-color: #212d3d;
    color: #fff;
}

.pagination .page-link:hover {
    background-color: #5c79ff;
    color: #fff;
}

.page-link {
    color: #212d3d;
}

.pagination-cont nav .d-none.flex-sm-fill .small.text-muted {
    padding-right: 15px;
}

/* order details page */
.order-summary,
.order-details,
.order-history {
    background: var(--white);
    padding: var(--spacing-28);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.order-summary table {
    margin-bottom: 0px;
}

.order-summary th,
.order-summary td {
    border: none;
    vertical-align: middle;
    font-size: 14px;
}

.order-summary tbody td {
    padding: 12px 8px;
}

.order-summary thead th {
    font-weight: 600;
    font-size: 14px;
}

.order-summary .totals p {
    margin: 3px 0;
    font-size: 14px;
}

.order-summary .totals h5 {
    font-weight: 700;
    margin-top: 10px;
    font-size: 16px;
}

.order-details .detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.order-details .detail-item:last-child {
    border-bottom: none;
}

.order-details .detail-item .icon {
    font-size: 18px;
    color: #555;
    margin-left: 10px;
}

.text-primary {
    color: #212d3d !important;
}

.return-link {
    font-size: 16px;
    color: var(--primary-hover);
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 20px;
    padding: 6px 0px;
    text-decoration: none;
}

.order-summary .table thead tr th,
.order-summary .table tbody tr td {
    padding: 15px 0;
}

.order-summary .table tbody tr:not(:last-child) {
    border-bottom: 1px solid #dee2e6;
}

.product-img-con {
    display: flex;
    align-items: center;
}

.p-image {
    width: 100px;
    margin-right: 15px;
}

.order-summery-btns {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.order-summery-btns li a {
    padding: 8px 20px;
    border-radius: 30px;
}

/*.order-summery-btns li a:hover {
    background: #444;
    color: #fff;
    border: 1px solid #444;
} */
.sub-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.cus-address-title {
    padding-bottom: 20px;
    /* border-bottom: 1px solid #dee2e6;
    margin-bottom: 20px; */
}

.billing-address p {
    margin-bottom: 0;
}

.details-row i {
    margin-left: 5px;
}

/* my account page */
.nav-tabs .nav-link {
    font-size: var(--font-size-17);
    color: var(--text-dark);
    font-weight: 400;
    padding: var(--spacing-12) var(--spacing-20);
    border-top-left-radius: var(--bs-border-radius-sm);
    border-top-right-radius: var(--bs-border-radius-sm);
    border-top: 4px solid transparent;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--primary-hover);
    border-top: 4px solid var(--primary-hover);
}

.nav-tabs {
    gap: 5px;
    border: none;
}

/* .tab-content {
    background:var(--white);
    padding: var(--spacing-20);
} */
.head-t {
    font-weight: 700;
    font-size: 1rem;
    color: #444;
    text-transform: uppercase;
}

.bg-light-green {
    background: #dee8f5;
}

.table>tbody>tr>td,
.table>tbody>tr>th {
    padding: 15px 12px !important;
}

.table>tfoot>tr>td,
.table>tfoot>tr>th {
    padding: 6px 12px !important;
}

.table thead th,
.table td,
.table th {
    font-size: var(--font-size-base) !important;
    /* padding: 6px 24px !important; */
}

.pagination>li:first-child>a,
.pagination>li:first-child>span,
.pagination>li:last-child>a,
.pagination>li:last-child>span,
.pagination>li>a,
.pagination>li>span {
    border-radius: 4px !important;
    padding: 8px 10px;
    font-size: 15px;
    border: 1px solid #f3ecec !important;
    /* margin-inline: 2px !important; */
    height: 42px;
    width: 60px;
    background-color: var(--white);
    color: var(--text-secondary);
}

.dataTables_filter {
    text-align: right !important;
}

.dataTables_info {
    color: var(--text-secondary);
}

.table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: none;
}

.footer-con {
    background-color: #212d3d;
    color: white;
    padding: 40px 0;
    margin-top: 80px;
}

.legitlogo {
    width: 160px;
}

.my-profile {
    padding: 30px 0 30px 30px;
}

.my-profile h5,
.bg-light-green h5 {
    margin-bottom: 40px;
}

@media (max-width: 768px) {

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 12px;
    }

    .table-container table {
        min-width: 720px;
        /* adjust based on columns */
    }

    /* Optional: hide ugly scrollbar (still swipeable) */
    .table-container::-webkit-scrollbar {
        height: 4px;
    }

    .table-container::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }
}

/* .inner-tab-content {
    padding: 30px;
} */
.logo-cont {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.logo-cont .hipaalogo {
    width: 110px;
}

.logo-cont .hipaalogo:not(:first-child) {
    margin-left: 30px;
}

.btn-primary,
.btn-success {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--text-white) !important;
    font-weight: 600;
    padding: 0.563rem 1.25rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-speed);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover) !important;
    transform: none;
    box-shadow: var(--shadow-md) !important;
}

.btn-secondary {
    background-color: var(--white);
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    font-weight: 600;
    padding: 0.563rem 1.25rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-speed);
}

.btn-secondary:hover {
    background-color: var(--gray-50);
    border-color: var(--border-light);
    color: var(--text-dark);
}

.btn-outline-primary {
    color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    font-weight: 600;
    padding: 0.563rem 1.25rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-speed);
}

.btn-outline-primary:hover {
    background-color: var(--primary-hover) !important;
    color: var(--white) !important;
}


.btn-primary-outline {
    background-color: transparent;
    color: #444;
    padding: 12px 38px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #444;
    transition: 0.3s ease;
}

.btn-primary-outline:hover {
    background-color: #444;
    color: #fff;
    border: 1px solid #444;
}

.bi-pencil-square {
    color: #212d3d;
}

.text-success {
    color: #212d3d;
}

/* .status-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
} */

.status-badge.partial {
    background: #6c757d;
    color: #ffffff;
}

.status-pending {
    background: #fff4e6;
    color: #f59f00;
}

.status-badge.cancelled {
    background: #e03131;
    color: #ffe3e3;
}

.status-badge.declined {
    background: #e03131;
    color: #ffe3e3;
}

.status-badge.hold {
    background: #007bff;
    color: #ffffff;
}

.status-badge.completed {
    background: #0c7a2f;
    color: #ffffff;
}

/* doctor message */
.chat-header {
    background: #212d3d;
    color: #fff;
    padding: 15px 20px;
    border-radius: 12px 12px 0 0;
}

.chat-bubble {
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    max-width: 90%;
}

.bg-green {
    background: #f0fddf;
}

.chat-footer {
    border-top: 1px solid #eee;
    padding: 15px;
}

.upload-box {
    border: 1px solid #dce1dd;
    background: #f7f9f8;
    border-radius: 8px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.btn-icon {
    text-decoration: none;
    color: #444;
}

.btn-icon .fa-eye {
    color: #444;
}

.myend-msg {
    background: #f0fddf;
}

.received-msg {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.send-msg {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
}

.attachment-con {
    position: relative;
}

.attachment-con .attachment-icon {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 2;
    padding: 5px;
    background: #fff;
}

.attachment-con input {
    padding-left: 50px;
}

.attachment-options {
    display: none;
    position: absolute;
    bottom: 34px;
    left: 0;
    background: #fff;
    border: 1px solid #dce1dd;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 3;
    width: 140px;
}

.attachment-options li {
    padding: 5px 15px;
    cursor: pointer;
}

.attachment-options li a {
    text-decoration: none;
    color: #444;
}

.attachment-options li a:hover {
    color: #212d3d;
}

.address-text {
    margin-top: 40px;
}

.address-text li {
    margin-bottom: 20px;
}

.address-text li:last-child {
    margin-bottom: 0px;
}

.address-text span {
    font-weight: 600;
}

/* register page */

.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0 4rem 0;
    padding: 0 15px;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex-grow: 0;
}

/*
.circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
    border: 2px solid #e9ecef;
}

.step.active .circle {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.step.active.completed .circle {
    background-color: #198754;
    border-color: #198754;
}

.line {
    height: 4px;
    background-color: #dee2e6;
    flex: 1;
    margin: 0 10px;
    margin-top: -19px;
    z-index: 0;
    transition: background-color 0.3s;
}

.line.active {
    background-color: var(--primary-color);
} */
.card-section {
    padding: var(--spacing-lg);
    margin-bottom: 0;
}

.card {
    background-color: var(--white);
    border: none !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow var(--transition-speed);
    color: var(--text-primary);
}

.card-header-custom {
    background-color: var(--primary-color);
    border-top-left-radius: calc(1rem - 1px);
    border-top-right-radius: calc(1rem - 1px);
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.benefit-item:last-child {
    margin-bottom: 0;
}

.benefit-icon-wrapper {
    flex-shrink: 0;
    margin-right: 1rem;
}

.benefit-icon {
    background: #212d3d;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    justify-content: center;
    display: flex;
    align-items: center;
}

.benefit-icon i {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.benefit-icon img {
    max-width: 30px;
    height: auto;
}

.benefit-text h5 {
    font-weight: 600;
    color: #343a40;
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
}

.benefit-text p {
    font-size: 0.95rem;
    color: #6c757d;
}

@media (max-width: 767px) {
    .stepper {
        margin: 2rem 0;
    }
}

.login-t {
    font-weight: 600;
    color: #5c79ff;
}

.text-green {
    color: #212d3d;
}

.profile-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.profile-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 35px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 150px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.profile-dropdown a,
.profile-dropdown button {
    width: 100%;
    padding: 10px 15px;
    display: block;
    text-align: left;
    color: #333;
    font-size: 14px;
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.profile-dropdown a:hover,
.profile-dropdown button:hover {
    background: #f5f5f5;
}

/* SHOW DROPDOWN ON HOVER */
.profile-wrapper:hover .profile-dropdown {
    display: block;
}

.small-icon {
    font-size: 14px;
}

.loader-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.loader-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    text-align: center;
}

.bg-primary {
    background-color: #212d3d !important;
}

.custom-checkbox {
    position: relative;
}

.custom-checkbox input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.custom-checkbox label span:before {
    content: "";
    -webkit-appearance: none;
    border: 2px solid #212d3d;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
}

.custom-checkbox input:checked+label span:after {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 9px;
    width: 6px;
    height: 14px;
    border: solid #212d3d;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-box {
    position: absolute;
    left: 0;
    top: 3px;
}

.checkbox-label {
    padding-left: 40px;
    position: relative;
    cursor: pointer;
    display: block;
}

.form-input-label {
    font-size: var(--font-size-xs);
    margin-bottom: 0;
    font-weight: 400;
}

.benefit-text h5 {
    font-weight: 400;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    padding: 0 0 0 1.25rem;
    border-radius: var(--radius-2xl);
    transition: background-color var(--transition-speed);
    position: relative;
}

.navbar-user:hover {
    background-color: var(--gray-800);
}

.navbar-user-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-white);
}

.avatar {
    /* width: 40px;
    height: 40px; */
    border-radius: var(--radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
    flex-shrink: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sticky-nav {
    position: sticky;
    top: 0;
    /* sticks to top */
    z-index: 1000;
    /* above content */
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 3000;
    display: none;
    min-width: 180px;
    /* padding: var(--spacing-sm) 0 !important; */
    padding: 0;
    margin-top: 0.5rem !important;
    background-color: var(--white);
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 0.625rem var(--spacing-12) !important;
    clear: both;
    font-weight: 400;
    font-size: var(--font-size-base) !important;
    color: var(--text-primary) !important;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--transition-speed);
    text-decoration: none;
    line-height: 1.2;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--gray-50) !important;
    color: var(--text-primary) !important;
    text-decoration: none;
}

.nav-link-with-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Red notification box */
.nav-badge {
    background-color: var(--danger);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    color: var(--text-primary);
}

/* Card */
.treatment-card {
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Image */
.treatment-card .card-image {
    padding: 16px;
}

.treatment-card .card-image img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Body */
.treatment-card .card-body {
    padding: 10px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.treatment-card .card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* Badges */
.badge-row {
    display: flex;
    gap: 6px;
}

.badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--radius-lg);
}

.badge-success {
    background: var(--green-button);
    color: var(--white);
}

.badge-gray {
    background: var(--border-light);
    color: var(--text-dark);
    display: flex;
    gap: 4px;
}

.badge-text {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.card-border {
    background-color: var(--border-light);
    margin: 5px 0;
}

.card-button {
    background-color: var(--primary-hover);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--white);
    transition: all var(--transition-speed);
}

.card-button:hover,
.card-button:focus,
.card-button:active {
    background-color: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover) !important;
    transform: none;
    box-shadow: var(--shadow-md) !important;
    color: var(--white);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-base);
    transition: all var(--transition-speed);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--danger-button-hover) !important;
    border-color: var(--danger-button-hover) !important;
    transform: none;
    box-shadow: var(--shadow-md) !important;
    color: var(--white);
}

.renew-button {
    background: transparent;
    color: var(--primary-color);
    transition: all var(--transition-speed);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-base);
    border: 1px solid var(--border-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.renew-button:hover,
.renew-button:focus,
.renew-button:active {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-300) !important;
    transform: none;
    box-shadow: var(--shadow-sm) !important;
}

.card-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--secondary-light);
}

/* Each row */
.meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--secondary-light);
}

/* Left text */
.meta-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Label */
.meta-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    /* light gray */
    font-weight: 500;
}

/* Value */
.meta-value {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    font-weight: 400;
}

.icon-col {
    color: var(--text-secondary);
}

/* Icon */
.meta-icon {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

/* Actions */
.card-actions {
    display: flex;
    gap: 8px;
    /* margin-top: auto; */
}

.badge-expire {
    background-color: var(--text-secondary);
    color: var(--bg-primary);
}

.renew-icon {
    color: #c9cdd9;
}

.badge-orange {
    background-color: #fc8d1f;
}

.empty-page-btn {
    display: table;
    align-items: center;
    gap: 10px;
    background-color: #ffea00;
    color: var(--text-primary);
    padding: 14px 28px;
    font-size: var(--font-size-base);
    font-style: italic;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease;
    margin: 100px auto 0 auto;
}

/* Mobile & small devices */
@media (max-width: 767px) {
    .logo img {
        height: 22px;
        /* smaller on mobile */
    }

    .avatar {
        margin-top: 5px;
    }

    /* Stop centering the nav on mobile */
    .sticky-nav .container {
        justify-content: flex-start !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Scroll container */
    .nav-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Actual nav row */
    .nav-links {
        display: flex;
        gap: 20px;
        padding: 0 16px;
        min-width: max-content;
    }

    /* Hide scrollbar */
    .nav-wrapper::-webkit-scrollbar {
        display: none;
    }

    .nav-wrapper {
        scrollbar-width: none;
    }

    .navbar-user:hover {
        background-color: transparent;
    }
}

/* css for login page */

.cmn-window-container {
    height: calc(100vh - 65px);
    font-family: "Roboto Flex", sans-serif;
    align-items: center;
}
@media screen and (orientation: landscape) and (max-width: 998px) {
    .cmn-window-container {
        height: auto;
    }
}
/* .cmn-window-container.login-container{
    height: calc(100vh - 64px);
} */
.cmn-login-card {
    max-width: 470px;
    padding: 2rem 8px;
}

.cmn-heading {
    margin-bottom: 24px;
    font-size: var(--font-size-3xl);
    color: var(--text-primary);
}

.cmn-sub-heading {
    margin-bottom: 40px;
    font-size: var(--font-size-base);
    color: var(--text-dark);
}

.cmn-sub-heading a {
    color: var(--primary-hover);
}

.cmn-sub-heading a:hover {
    text-decoration: underline;
}

.csh-mb-32 {
    margin-bottom: 32px;
}

.form-check-label {
    font-size: var(--font-size-base);
    font-weight: 400 !important;
    cursor: pointer;
}

.cust-form-label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 400 !important;
    margin-bottom: 10px;
}

.cmn-login-window .form-control {
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--font-size-base) !important;
    transition: all var(--transition-speed) !important;
    height: auto !important;
    color: var(--text-primary);
    padding: var(--spacing-12);
}

.cmn-login-window .form-control:focus {
    border-color: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: var(--primary-light);
}

.form-control:focus {
    border-color: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: var(--primary-light);
}

.cmn-login-window .form-check-input :checked {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.fp-link {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 400 !important;
}

.btn-back {
    border-radius: var(--radius-sm);
    padding: 12px 12px;
    font-size: var(--font-size-base);
    color: var(--text-dark);
    border: 1px solid var(--border-light);
}

.btn-back:hover {
    background: var(--primary-light);
    color: var(--text-dark);
    border: 1px solid var(--border-light);
}

.cmn-login-window .card-button {
    margin-top: 24px;
    margin-bottom: 12px;
}

.mask-eye {
    height: 50px;
    width: 50px;
    justify-content: center;
    cursor: pointer;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* END css for login page */

.link-text {
    color: var(--primary-hover);
    font-weight: 500;
    font-size: var(--font-size-base);
}

.treatment-details h2 {
    font-weight: 600;
    font-size: var(--font-size-3xl);
}

.treatment-left {
    border-radius: var(--radius-sm);
}

.treatment-left .product-image img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    background: #f9fafb;
}

.treatment-left h5 {
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.text-muted {
    font-size: var(--font-size-base);
}

.price {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.meta-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 2px;
    font-weight: 500;
}

.treatment-right {
    border-radius: var(--radius-sm);
}

.treatment-right h6 {
    font-size: var(--font-size-17);
}

.meta-label2 {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}

.tracking-info {
    display: flex;
    align-items: center;
    /* vertical alignment */
    gap: 8px;
    /* space between icon & text */
}

.tracking-info img {
    width: 18px;
    height: auto;
}

.treatment-right2 {
    border-radius: var(--radius-sm);
}

.treatment-right2 .row>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 32px;
    position: relative;
}

/* Vertical dividers */
@media (min-width: 768px) {
    .treatment-right2 .row>div:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 20%;
        right: 0;
        height: 60%;
        width: 1px;
        background-color: var(--secondary-light);
    }
}

.order-shipment-history table th {
    font-weight: 600;
    color: #1f2937;
    border-bottom: 1px solid var(--secondary-light);
}

.order-shipment-history table td {
    border-bottom: 1px solid var(--secondary-light);
    color: var(--secondary-color);
    font-size: var(--font-size-base);
}

/* Tracking */
.tracking-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tracking-info img {
    width: 18px;
    height: auto;
}

/* Mobile cards */
.shipment-card {
    border: 1px solid var(--secondary-light);
    border-radius: 8px;
    padding: 16px;
}

.shipment-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.shipment-row:last-child {
    margin-bottom: 0;
}

.shipment-row .label {
    font-size: 13px;
    color: var(--gray-700);
}

.shipment-row .value {
    font-size: 15px;
    font-weight: 500;
}

.th-sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* KEY */
    width: 100%;
    text-transform: capitalize;
    font-weight: 600;
    font-size: var(--font-size-base);
}

.th-sort-text {
    white-space: nowrap;
}

/* Space between text and arrow group */
.th-sort>span:first-child,
.th-sort-text {
    margin-right: 12px;
    /* this creates the visible gap */
}

/* Arrow container */
.sort-icons1 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

/* Base arrow */
.sort-up1,
.sort-down1 {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    opacity: 0.35;
}

/* Up arrow */
.sort-up1 {
    border-bottom: 8px solid var(--gray-700);
}

/* Down arrow */
.sort-down1 {
    border-top: 8px solid var(--gray-700);
}

/* Active states */
.sortable {
    cursor: pointer;
}

.active-up {
    border-bottom-color: #212d3d !important;
    opacity: 1 !important;
}

.active-down {
    border-top-color: #212d3d !important;
    opacity: 1 !important;
}

/* Mobile & small devices */
@media (max-width: 767px) {
    .treatment-details h2 {
        font-size: var(--font-size-2xl);
    }

    .treatment-right2 .row>div {
        padding: 20px 16px;
        position: relative;
    }

    .treatment-right2 .row>div:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 8px;
        bottom: 0;
        width: 95%;
        height: 1px;
        background-color: var(--secondary-light);
    }

    /* Show table on mobile */
    .order-shipment-history .table-responsive {
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Force horizontal scroll */
    .order-shipment-history table {
        min-width: 720px;
        white-space: nowrap;
    }

    /* Hide mobile cards (we don't want stacked layout) */
    .order-shipment-history .d-md-none {
        display: none !important;
    }

    /* Hide native scrollbar */
    .order-shipment-history .table-responsive::-webkit-scrollbar {
        display: none;
    }

    .order-shipment-history .table-responsive {
        scrollbar-width: none;
    }

    /* Indicator track */
    .scroll-indicator {
        margin-top: 12px;
        height: 6px;
        width: 100%;
        background: var(--secondary-light);
        border-radius: 999px;
        overflow: hidden;
    }

    /* Moving thumb */
    .scroll-thumb {
        display: block;
        height: 100%;
        width: 30%;
        background: var(--gray-700);
        border-radius: 999px;
        transform: translateX(0);
        transition: transform 0.05s linear;
    }
}

.link-text {
    color: var(--primary-hover);
    font-weight: 500;
    font-size: var(--font-size-base);
}

.treatment-details h2 {
    font-weight: 600;
    font-size: var(--font-size-3xl);
}

.treatment-left {
    border-radius: var(--radius-sm);
}

.treatment-left .product-image img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    background: #f9fafb;
}

.treatment-left h5 {
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.text-muted {
    font-size: var(--font-size-base);
}

.price {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.meta-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 2px;
    font-weight: 500;
}

.treatment-right {
    border-radius: var(--radius-sm);
}

.treatment-right h6 {
    font-size: var(--font-size-17);
}

.meta-label2 {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}

.tracking-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tracking-info img {
    width: 18px;
    height: auto;
}

.treatment-right2 {
    border-radius: var(--radius-sm);
}

.treatment-right2 .row>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 32px;
    position: relative;
}

/* Vertical dividers */
@media (min-width: 768px) {
    .treatment-right2 .row>div:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 20%;
        right: 0;
        height: 60%;
        width: 1px;
        background-color: var(--secondary-light);
    }
}

.order-shipment-history table th {
    font-weight: 600;
    color: #1f2937;
    border-bottom: 1px solid var(--secondary-light);
}

.order-shipment-history table td {
    border-bottom: 1px solid var(--secondary-light);
    color: var(--secondary-color);
    font-size: var(--font-size-base);
}

/* Tracking */
.tracking-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tracking-info img {
    width: 18px;
    height: auto;
}

/* Mobile cards */
.shipment-card {
    border: 1px solid var(--secondary-light);
    border-radius: 8px;
    padding: 16px;
}

.shipment-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.shipment-row:last-child {
    margin-bottom: 0;
}

.shipment-row .label {
    font-size: 13px;
    color: var(--gray-700);
}

.shipment-row .value {
    font-size: 15px;
    font-weight: 500;
}

.th-sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-transform: capitalize;
    font-weight: 600;
    font-size: var(--font-size-base);
}

.th-sort-text {
    white-space: nowrap;
}

/* Space between text and arrow group */
.th-sort>span:first-child,
.th-sort-text {
    margin-right: 12px;
    /* this creates the visible gap */
}

/* Arrow container */
.sort-icons {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

/* Base arrow */
.sort-up,
.sort-down {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    opacity: 0.35;
    /* inactive look */
}

/* Up arrow */
.sort-up {
    border-bottom: 8px solid var(--arrow-color);
}

/* Down arrow */
.sort-down {
    border-top: 8px solid var(--arrow-color);
}

/* Mobile & small devices */
@media (max-width: 767px) {
    .treatment-details h2 {
        font-size: var(--font-size-2xl);
    }

    .treatment-right2 .row>div {
        padding: 20px 16px;
        position: relative;
    }

    .treatment-right2 .row>div:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 8px;
        bottom: 0;
        width: 95%;
        height: 1px;
        background-color: var(--secondary-light);
    }

    /* Show table on mobile */
    .order-shipment-history .table-responsive {
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Force horizontal scroll */
    .order-shipment-history table {
        min-width: 720px;
        white-space: nowrap;
    }

    /* Hide mobile cards */
    .order-shipment-history .d-md-none {
        display: none !important;
    }

    /* Hide native scrollbar */
    .order-shipment-history .table-responsive::-webkit-scrollbar {
        display: none;
    }

    .order-shipment-history .table-responsive {
        scrollbar-width: none;
    }

    /* Indicator track */
    .scroll-indicator {
        margin-top: 12px;
        height: 6px;
        width: 100%;
        background: var(--secondary-light);
        border-radius: 999px;
        overflow: hidden;
    }

    /* Moving thumb */
    .scroll-thumb {
        display: block;
        height: 100%;
        width: 30%;
        background: var(--gray-700);
        border-radius: 999px;
        transform: translateX(0);
        transition: transform 0.05s linear;
    }
}

/* Modal container */
.refill-modal {
    border-radius: var(--radius-sm);
    padding: 8px;
}

/* Title */
.refill-modal .modal-title {
    font-weight: 500;
    font-size: var(--font-size-17);
    color: var(--primary-color);
}

/* Input with icon */
.input-icon {
    position: relative;
}

.input-icon input {
    height: 44px;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.input-icon .icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
}

.form-text {
    font-size: var(--font-size-base);
    font-weight: 400;
}

/* Footer buttons */
.modal-footer .btn {
    min-width: 110px;
}

/* Mobile tweaks */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 16px;
    }

    .modal-footer {
        gap: 12px;
        flex-wrap: nowrap;
    }
}

.refill-product-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--secondary-light);
    border-radius: 6px;
    background: #fff;
}

.refill-product {
    font-size: var(--font-size-base);
}

.refill-warning {
    color: var(--danger);
    font-size: var(--font-size-base);
    margin-top: 8px;
    font-style: italic;
    font-weight: 600;
}

/* Mobile tweaks */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 1rem;
    }

    .refill-product {
        align-items: flex-start;
    }
}

/* Overlay */
.swap-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1040;
}

/* Drawer */
.swap-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 460px;
    max-width: 100%;
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

/* Active state */
.swap-drawer.open {
    transform: translateX(0);
}

.swap-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Sticky header */
.swap-header {
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: var(--z-dropdown);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.swap-close {
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    line-height: 1;
    cursor: pointer;
}

/* Scrollable body */
.swap-body {
    padding: 20px;
    overflow-y: auto;
}

.text-name {
    font-weight: 400;
    font-size: var(--font-size-base);
    margin-bottom: 10px;
}

/* Product */
.product-thumb {
    width: 90px;
    height: 90px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    object-fit: contain;
}

/* Mobile */
@media (max-width: 576px) {
    .swap-drawer {
        width: 95%;
    }
}

.custom-select {
    position: relative;
    cursor: pointer;
}
.custom-select, .form-select {
	border: 1px solid var(--border-light) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0.55rem 0.875rem !important;
	line-height: 1.5;
	height: auto !important;
	font-size: var(--font-size-base) !important;
}
/* .custom-select input {
    cursor: pointer;
    background-color: #fff;
} */
.form-select {
	transition: all var(--transition-speed);
}
.form-select:hover {
	background-color: var(--gray-50);
}
.custom-select:focus, .form-select:focus {
	border-color: var(--primary-light) !important;
	box-shadow: none !important;
}
.custom-select .chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7280;
}

/* Dropdown container */
.select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid var(--secondary-light);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    display: none;
    z-index: 20;
}

/* Search */
.dropdown-search {
    position: relative;
}

.dropdown-search input {
    padding-right: 36px;
    border: none;
}

.dropdown-search i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-600);
}

/* Options */
.dropdown-options {
    max-height: 200px;
    overflow-y: auto;
}

.option {
    padding: 10px 12px;
    cursor: pointer;
    font-size: var(--font-size-base);
}

.option:hover {
    background-color: #f3f4f6;
}

.dropdown-search input::-webkit-input-placeholder {
    color: var(--gray-400);
}

.dropdown-search input::-moz-placeholder {
    color: var(--gray-400);
    opacity: 1;
}

.dropdown-search input:-ms-input-placeholder {
    color: var(--gray-400);
}

.dropdown-search input::placeholder {
    color: var(--gray-400);
}

.radio-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

/* Hide native radio */
.radio-option input[type="radio"] {
    display: none;
}

/* Custom radio */
.radio-custom {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-2xl);
    border: 4px solid var(--gray-400);
    /* light gray border */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Checked state */
.radio-option input[type="radio"]:checked+.radio-custom {
    border-color: var(--primary-hover);
}

.radio-option input[type="radio"]:checked+.radio-custom::after {
    transform: scale(1);
}

/* Payment */
.payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-link {
    font-size: var(--font-size-base);
    color: var(--primary-hover);
    text-decoration: none;
    font-weight: 600;
}

/* Select */
.select-box {
    border: 1px solid var(--secondary-light);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.select-box {
    border: 1px solid var(--secondary-light);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* text stays left */
.select-text {
    white-space: nowrap;
}

/* arrow pushed to extreme right */
.select-arrow {
    margin-left: auto;
    /* ⭐ this is the magic */
    color: #6b7280;
    font-size: var(--font-size-sm);
    transition: transform 0.2s ease;
}

/* Disclaimer */
.disclaimer {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    line-height: 1.5;
    margin-top: 20px;
}

.drawer-footer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.secure-text {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 1px;
}

.text-style {
    font-size: 15px;
}

.text-1 {
    color: var(--text-disabled);
}

.text-2 {
    font-weight: 400;
    color: var(--primary-color);
}

.cancel-product-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border: 1px solid var(--secondary-light);
    border-radius: 6px;
    background: #fff;
}

.product-price {
    display: flex;
    gap: 10px;
    align-items: center;
}

.old-price {
    color: var(--gray-700);
    text-decoration: line-through;
    font-size: 14px;
}

.discount-price {
    color: #ef4444;
    font-weight: 600;
    font-size: 15px;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* for customer support page */

.support-flex .row {
    align-items: flex-start;
}

.support-flex .custom-card {
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 20px 20px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.cc-heading {
    font-size: 17px;
    margin-bottom: 25px;
}

.cmn-custom-input {
    border-color: var(--border-light);
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
    border-radius: 4px;
}

.text-required-star {
    color: var(--danger);
}

/* Attachment Section Styling */

.custom-file-upload {
    border: 1px solid #e4ecf2;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.file-name-display {
    flex-grow: 1;
    padding: 12px 12px;
    background-color: var(--white);
    color: #adb5bd;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browse-btn {
    background-color: var(--gray-50);
    border-left: 1px solid #e4ecf2;
    padding: 12px 12px;
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--text-dark);
    font-weight: 400 !important;
}

.browse-btn:hover {
    background-color: var(--gray-300);
}

.yellow-button {
    margin-top: 180px;
}

.yellow-button a {
    padding: 10px 20px !important;
    border-radius: 0px;
    background: #ffea00;
    border: 1px solid #ffea00;
    color: var(--primary-color);
    border: none;
    font-style: italic;
    font-family: "Figtree", sans-serif;
    font-size: 14px;
}

.yellow-button a:hover {
    -webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.03);
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.03);
    background: #ffea00;
}

.yellow-button a i {
    transition: all 0.3s ease;
}

.yellow-button a:hover i {
    transform: translateX(5px);
}

.yellow-button a:focus-visible {
    box-shadow: none;
    background: #ffea00;
    border: 1px solid #ffea00;
    color: var(--primary-color);
}

.contact-icon-box {
    font-size: 20px;
    color: var(--text-primary);
}

.contact-icon-box p {
    font-size: 15px;
    color: var(--text-primary) !important;
}

@media screen and (max-width: 991px) {
    .support-flex .row {
        gap: 24px;
    }

    .support-flex form .row {
        gap: 0px;
    }

    .yellow-button {
        margin-top: 62px;
    }
}

/* for customer support page end */


/* dashboard footer */
.dashboard-footer {
    background-color: transparent;
    padding: 0px;
}

.dashboard-footer p {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 400;
}

.old-price1 {
    color: var(--text-dark);
    text-decoration: line-through;
    font-size: var(--font-size-base);
}

/* my account page */
.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    color: var(--text-primary);
}

.mb-new-32 {
    margin-bottom: var(--spacing-32);
}

.card-section-title {
    font-size: var(--font-size-17);
    font-weight: 500;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.flex-1 {
    flex: 1;
}

.avatar-lg {
    width: 80px;
    height: 80px;
    font-size: var(--font-size-xl);
}

.gap-lg {
    gap: var(--spacing-lg) !important;
}

.form-label {
    margin-bottom: var(--spacing-10) !important;
    font-weight: 400;
    color: var(--text-primary);
}

.mb-lg {
    margin-bottom: var(--spacing-lg) !important;
}

.info-box-icon {
    margin-right: 12px;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.address-card {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    padding: var(--spacing-20);
}

.address-content {
    display: grid;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.address-content li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
}

.font-14 {
    font-size: var(--font-size-sm);
}

.text-paragrapgh {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    margin-bottom: 0;
}

.address-top {
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.del-color {
    color: var(--text-secondary);
}

.del-color:hover {
    color: var(--danger);
}

.edit-del-con {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.close-btns {
    background: none;
    border: none;
    font-size: 1.5rem;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.close-btns:hover {
    color: var(--text-primary);
}

.modal-title {
    font-size: var(--font-size-17);
    font-weight: 500;
    margin-bottom: 0;
    line-height: var(--bs-modal-title-line-height);
}

.modal-header {
    border-bottom: unset;
    padding: var(--spacing-20);
    justify-content: space-between;
}

.c-d-con {
    gap: var(--spacing-md);
}

.form-group label {
    margin-bottom: var(--spacing-10) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: 0 var(--spacing-20) var(--spacing-20) var(--spacing-20);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--spacing-md);
}

.btn-group-con {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

/******** Order History ********/

.filters-bar {
    display: flex;
    gap: 16px;
    width: 100%;
}

/* Shared */
.filter {
    position: relative;
    /* height: 40px; */
}

.filter input,
.filter select {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 14px;
    font-size: var(--font-size-sm);
    color: var(--secondary-color);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--white);
}

/* Search grows */
.filter.search {
    flex: 1;
}

/* Fixed widths */
.filter.select,
.filter.date {
    width: 200px;
}

/* Icons */
.filter i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    pointer-events: none;
}

/* Remove native select arrow */
.filter select {
    appearance: none;
    background-image: none;
}

/* Placeholder */
.filter input::placeholder {
    color: var(--gray-600);
}

/* Hover & focus */
.filter input:focus,
.filter select:focus {
    outline: none;
    border-color: var(--primary-hover);
}

/* Mobile */
@media (max-width: 768px) {
    .filters-bar {
        flex-direction: column;
    }

    .filter.select,
    .filter.date {
        width: 100%;
    }
}

/* Wrapper */
.status-filter {
    position: relative;
    width: 220px;
}

/* Trigger */
.status-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.status-trigger i {
    transition: transform 0.2s ease;
}

/* Rotate arrow when open */
.status-filter.open .status-trigger i {
    transform: rotate(180deg);
}

/* Dropdown */
.status-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: var(--spacing-10);
    display: none;
    z-index: 20;
}

/* Show dropdown */
.status-filter.open .status-dropdown {
    display: block;
}

/* Search box */
.status-search {
    position: relative;
    /* margin-bottom: var(--spacing-sm); */
}

.status-text {
    color: var(--text-secondary);
}

.status-search input {
    width: 100%;
    padding: 8px 36px 8px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.status-search i {
    position: absolute;
    right: var(--spacing-10);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-700);
}

/* Options */
.status-options {
    list-style: none;
    margin: 0;
    padding: 0;
}

.status-options li {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.status-options li:hover {
    background: #f3f4f6;
}

.status-options li.active {
    font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
    .status-filter {
        width: 100%;
    }

    .table-responsive table {
        min-width: 900px;
        /* force overflow */
    }

    /* DataTables footer row */
    #table-footer .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    /* Each column full width */
    #table-footer .row>div {
        width: 100%;
        text-align: center !important;
    }

    /* Show entries */
    .dataTables_length {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    /* Pagination center */
    .dataTables_paginate {
        display: flex;
        justify-content: center;
    }

    /* Info text */
    .dataTables_info {
        text-align: center;
    }

    .pagination {
        margin-bottom: 0px;
    }
}

/****** Order Details *******/
.order-table thead tr th {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--secondary-light);
    background: var(--white);
    text-transform: capitalize;
}

.order-table th:nth-child(2),
.order-table th:nth-child(3) {
    text-align: right;
}

.his-text {
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--primary-color);
}

/* Remove native select arrow (all browsers) */
.dataTables_length select {
    appearance: none;
    /* Chrome, Edge, Firefox */
    -webkit-appearance: none;
    /* Safari */
    -moz-appearance: none;
    /* Firefox */
    background-image: none !important;
    padding-right: 12px;
    /* remove arrow space */
}

/* IE / old Edge */
.dataTables_length select::-ms-expand {
    display: none;
}

/* CSS for medical advisory chatbox */

/* Thinner Scrollbar without arrows */

.chat-body::-webkit-scrollbar {
    width: 5px;
}

.chat-body::-webkit-scrollbar-track {
    background: transparent;
}

.chat-body::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 8px;
}

/* Thinner Scrollbar without arrows */

.chat-card {
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-top: 24px;
}

.chat-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0px 1.5rem 0.313rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
    height: 62vh;
}

/* Message Bubbles */
.message {
    max-width: 50%;
    padding: 16px;
    border-radius: var(--spacing-12);
    position: relative;
    font-size: var(--font-size-base);
    border: 1px solid var(--border-light);
}

.message p {
    margin-bottom: 0px;
}

.message p:not(:last-child) {
    margin-bottom: 16px;
}

.msg-outbound {
    align-self: flex-end;
    background-color: var(--gray-50);
    color: var(--primary-color);
    border-bottom-right-radius: 0px;
}

.msg-inbound {
    align-self: flex-start;
    background-color: var(--primary-hover);
    color: #fff;
    border-bottom-left-radius: 0px;
}

.message ul li {
    list-style: disc;
}

/* Media Message Styling */
.msg-media {
    width: 40%;
}

.msg-media video,
.msg-media img {
    max-width: 100%;
    border-radius: 10px;
    display: block;
    min-height: 250px;
}

/* Input Area */
.chat-footer {
    padding: 1.5rem 1.5rem;
    border-top: 1px solid var(--border-light);
}

.input-group-custom {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.textarea-wrapper {
    position: relative;
    flex-grow: 1;
    width: 100%;
}

.message-input {
    border: 1px solid var(--border-light);
    padding: 12px 45px 12px 12px;
    resize: none;
    width: 100%;
    border-radius: 4px;
}

.clip-btn {
    position: absolute;
    right: 12px;
    top: 12px;
    color: var(--text-primary);
    cursor: pointer;
    border: none;
    background: none;
}

.clip-btn:before {
    position: absolute;
    content: "Upload Attachment";
    color: var(--text-white);
    background: var(--text-primary);
    border-radius: 4px;
    padding: 3px 7px;
    font-weight: 400;
    font-size: 14px;
    top: -35px;
    left: -60px;
    width: 145px;
    display: none;
}

.clip-btn:hover::before {
    display: block;
}

/* File Preview Area */
.file-preview-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.file-badge {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-light);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: var(--font-size-base);
    color: var(--text-dark);
    font-weight: 600;
    gap: 10px;
}

.file-badge .fa-file {
    color: var(--text-secondary);
}

.file-badge .fa-xmark {
    cursor: pointer;
    color: var(--white);
    background: var(--primary-color);
    font-size: 12px;
    height: 20px;
    width: 20px;
    line-height: 20px;
    border-radius: 100%;
}

.file-badge span {
    font-size: var(--font-size-base);
    color: var(--text-dark);
    font-weight: 600;
}

.btn-send {
    background-color: var(--primary-hover);
    border: none;
    padding: 12px 20px;
    font-weight: 600;
    color: #fff;
    border-radius: 4px;
}

.timestamp {
    font-size: var(--font-size-xs);
    color: #adb5bd;
    text-align: center;
    width: 100%;
}

/* CSS for medical advisory chatbox end */
@media screen and (max-width: 767px) {

    .message,
    .msg-media {
        max-width: 90%;
        width: 90%;
    }
}

@media screen and (max-width: 575px) {

    .message,
    .msg-media {
        max-width: 100%;
        width: 100%;
    }

    .input-group-custom {
        flex-direction: column;
    }

    .input-group-custom {
        width: 100%;
    }

    .chat-footer {
        padding: 1.25rem 1.25rem;
    }

    .btn-send {
        align-self: flex-end;
    }

    .chat-body {
        padding: 0px 1.25rem 0.313rem 1.25rem;
    }

    .cmn-wrapper .container {
        padding: 0px 0px;
    }

    .clip-btn:hover::before {
        display: none;
    }
}

/* CSS for medical advisory chatbox end */

@media (max-width: 991px) {

    .row.g-4 {
        display: flex;
        flex-direction: column;
    }

    /* Order Summary */
    .order-summary {
        order: 1;
    }

    /* Order Information */
    .order-info {
        order: 2;
    }

    /* Shipping Information */
    .shipping-info {
        order: 3;
    }

    /* Shipping & Billing Information */
    .shipping-billing {
        order: 4;
    }

    /* Order Shipment History */
    .order-history {
        order: 5;
    }

}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.tagify__input {
    min-height: unset !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tagify__tag {
    margin-inline: 5px !important;
    margin-block: 0 !important;
    margin-right: 5px !important;
}

.tagify__tag>div {
    color: var(--white) !important;
    font-size: 15px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    line-height: 15px !important;
}

.tagify__tag>div::before {
    box-shadow: none !important;
    background-color: var(--primary-hover) !important;
}

.tagify__tag__removeBtn {
    background: #adbcff !important;
    color: var(--white) !important;
}

/* select 2 */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary-light) !important;
    box-shadow: none !important;
}

.select2-container--default .select2-selection--single {
    padding: 0.55rem 0.75rem !important;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm) !important;
    min-height: unset !important;
}

.select2-container .select2-selection--single:hover {
    background: var(--primary-light) !important;
}

.select2-container--open .select2-dropdown--below {
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: none !important;
    padding: 0 20px 0 0 !important;
}

.select2-search--dropdown {
    position: relative;
}

.select2-search--dropdown:after {
    position: absolute;
    content: "";
    top: 10px;
    right: 10px;
    z-index: 1;
    background: url(../../frontend/images/search.png) no-repeat right center;
    width: 14px;
    height: 14px;
    background-size: contain;
}

.select2-search--dropdown .select2-search__field:focus {
    box-shadow: none !important;
    border-color: none !important;
}

.select2-container--default.select2-container--open .select2-results__option[aria-selected="true"] {
    background-color: var(--gray-50) !important;
    color: var(--primary-color) !important;
    font-weight: 400 !important;
}

.select2-results__option {
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 0.5rem 0.75rem !important;
}

.select2-results__option[id*="select2-product_category-result-49w4-create_new_category"] {
    border-top: 1px solid var(--border-light) !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 0.7rem !important;
}

.tagify__tag:focus div::before,
.tagify__tag:hover:not([readonly]) div::before {
    --tag-bg-inset: 0 !important;
    --tag-bg: var(--tag-hover);
}

.chat-image-wrapper {
    width: 100%;
    /* height: 280px; */
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    background: #f5f5f5;
    position: relative;
}

.chat-loader-spinner {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3490dc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin-chat 1s linear infinite;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1;
}

@media (max-width: 991px) {
.details-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
}
.offcanvas{
    z-index: 9999 !important;
}
.offcanvas-header{
    border-bottom: none !important;
    padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);
}
.offcanvas-body{
    padding: var(--spacing-lg);
    height: 92vh;
}
.input-group .btn{
    z-index: 5 !important;
}
@media (max-width: 767px) {
   .navbar-user-name {
        display: none;
    }
}