html {
    scroll-behavior: smooth;
}

.scroll-container {
    scroll-behavior: smooth !important;
}

/* CSS Variables */
:root {
    --color-primary: #00a3c7;

    --color-black: #374151;

    --color-shellWhite: #c3c3c34d;

    /* ocean-blue */
    --color-oceanBlue-50: #e5f6f9;
    --color-oceanBlue-100: #ccedf4;
    --color-oceanBlue-200: #b2e3ee;
    --color-oceanBlue-300: #99dae9;
    --color-oceanBlue-400: #80d1e3;
    --color-oceanBlue-500: #66c8dd;
    --color-oceanBlue-600: #4dbfd8;
    --color-oceanBlue-700: #33b5d2;
    --color-oceanBlue-800: #1aaccd;
    --color-oceanBlue-900: #00a3c7;

    /* aqua */
    --color-aqua-50: #ecfcfb;
    --color-aqua-100: #d9f9f6;
    --color-aqua-200: #c6f6f2;
    --color-aqua-300: #b3f3ed;
    --color-aqua-400: #a0efe9;
    --color-aqua-500: #8eece5;
    --color-aqua-600: #7be9e0;
    --color-aqua-700: #68e6dc;
    --color-aqua-800: #55e3d7;
    --color-aqua-900: #42e0d3;

    /* coral */
    --color-coral-50: #fff2ee;
    --color-coral-100: #ffe4de;
    --color-coral-200: #ffd7cd;
    --color-coral-300: #ffcabd;
    --color-coral-400: #ffbcac;
    --color-coral-500: #ffaf9c;
    --color-coral-600: #ffa28b;
    --color-coral-700: #ff957b;
    --color-coral-800: #ff876b;
    --color-coral-900: #ff7a5a;

    /* sand */
    --color-sand-50: #fffefb;
    --color-sand-100: #fffdf7;
    --color-sand-200: #fffbf3;
    --color-sand-300: #fffaef;
    --color-sand-400: #fff9eb;
    --color-sand-500: #fff8e6;
    --color-sand-600: #fff7e2;
    --color-sand-700: #fff5de;
    --color-sand-800: #fff4da;
    --color-sand-900: #fff3d6;

    /* reefBlue */
    --color-reefBlue-50: #e5edef;
    --color-reefBlue-100: #ccdce0;
    --color-reefBlue-200: #b2cad0;
    --color-reefBlue-300: #99b8c1;
    --color-reefBlue-400: #80a6b1;
    --color-reefBlue-500: #6695a2;
    --color-reefBlue-600: #4d8392;
    --color-reefBlue-700: #337183;
    --color-reefBlue-800: #1a6074;
    --color-reefBlue-900: #004e64;

    /* green */
    --color-green-50: #ebf9f2;
    --color-green-100: #d8f2e5;
    --color-green-200: #c4ecd8;
    --color-green-300: #b0e5cb;
    --color-green-400: #9cdfbe;
    --color-green-500: #89d9b1;
    --color-green-600: #75d2a4;
    --color-green-700: #61cc97;
    --color-green-800: #4ec58a;
    --color-green-900: #3abf7d;

    /* yellow */
    --color-yellow-50: #fffbf0;
    --color-yellow-100: #fff7e0;
    --color-yellow-200: #fff3d1;
    --color-yellow-300: #ffefc2;
    --color-yellow-400: #ffebb2;
    --color-yellow-500: #ffe7a3;
    --color-yellow-600: #ffe394;
    --color-yellow-700: #ffdf85;
    --color-yellow-800: #ffdb75;
    --color-yellow-900: #ffd766;

    /* waveGray */
    --color-waveGray-50: #fcfefe;
    --color-waveGray-100: #fafcfd;
    --color-waveGray-200: #f7fbfb;
    --color-waveGray-300: #f4f9fa;
    --color-waveGray-400: #f1f8f9;
    --color-waveGray-500: #eff7f8;
    --color-waveGray-600: #ecf5f7;
    --color-waveGray-700: #e9f4f5;
    --color-waveGray-800: #e7f2f4;
    --color-waveGray-900: #e4f1f3;

    /* gray */
    --color-gray-50: #e7e8e9;
    --color-gray-100: #d0d1d4;
    --color-gray-200: #b8babe;
    --color-gray-300: #a1a3a9;
    --color-gray-400: #898c93;
    --color-gray-500: #71757d;
    --color-gray-600: #5a5e68;
    --color-gray-700: #424752;
    --color-gray-800: #2b303d;
    --color-gray-900: #131927;

    /* red */
    --color-red-50: #fdecec;
    --color-red-100: #fcdad9;
    --color-red-200: #fac7c5;
    --color-red-300: #f8b4b2;
    --color-red-400: #f7a19f;
    --color-red-500: #f58f8c;
    --color-red-600: #f37c79;
    --color-red-700: #f16965;
    --color-red-800: #f05752;
    --color-red-900: #ee443f;

    /* blue */
    --color-blue-50: #e5f4ff;
    --color-blue-100: #cceaff;
    --color-blue-200: #b2dfff;
    --color-blue-300: #99d5ff;
    --color-blue-400: #80caff;
    --color-blue-500: #66bfff;
    --color-blue-600: #4db5ff;
    --color-blue-700: #33aaff;
    --color-blue-800: #1aa0ff;
    --color-blue-900: #0095ff;
}

html {
    scroll-behavior: smooth;
}

/* Base font setup */
body {
    /* font-family: 'Poppins'; */
    font-family: "Poppins", sans-serif;
}

.menu_link {
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    color: var(--color-black);
    transition: all 0.3s ease-in-out;
}

.menu_link:hover {
    color: var(--color-primary, rgb(0, 132, 255));
}

.menu_link_active {
    color: var(--color-primary, rgb(0, 132, 255));
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 100%;
    /* 150% */
}

/* sidebar code  */
.sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.sidebar.open {
    transform: translateX(0);
}

.main-content {
    transition: margin-left 0.3s ease-in-out;
}

/* scrollbar section  */

.scrollbar-hide {
    -ms-overflow-style: none;
    /* for Internet Explorer and Edge */
    scrollbar-width: none;
    /* for Firefox */
    -webkit-overflow-scrolling: touch;
}

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

.scrollbar-style::-webkit-scrollbar {
    height: 2px;
    width: 4px;
}

/* Track */
.scrollbar-style::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(187, 187, 187);
    border-radius: 10px;
}

/* Handle */
.scrollbar-style::-webkit-scrollbar-thumb {
    background: rgb(187, 187, 187);
    border-radius: 90px;
}

.scrollbar-style::-webkit-scrollbar-corner {
}

/* Handle on hover */
.scrollbar-style::-webkit-scrollbar-thumb:hover {
    background: rgb(187, 187, 187);
}

/* buttons */

.btn_solid {
    border-radius: 12px;
    /* border: 1px solid transparent; */
    outline: 2px solid transparent;
    padding: 16px 24px;
    width: fit-content;
    height: 48px;
    background: linear-gradient(163deg, var(--color-oceanBlue-900) 0%),
        linear-gradient(
            179deg,
            rgba(66, 224, 211, 0.6) 0%,
            rgba(0, 163, 199, 0.6) 100%
        );
    color: white;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease-in-out;
}

.btn_solid:hover img {
    transform: translateX(5px);

    /* color: var(--color-mint-600, #32D3A0);
  background: white;
  outline: 1px solid var(--color-mint-600, #32D3A0); */
}

.btn_solid p {
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
}

.btn_solid img {
    transition: all 0.3s ease-in-out;
    height: 12px;
    width: 12px;
}

.btn_outline {
    border-radius: 12px;
    /* border: 1px solid transparent; */
    outline: 1px solid var(--color-oceanBlue-900);
    padding: 16px 24px;
    width: fit-content;
    height: 48px;
    background: transparent;
    color: var(--color-oceanBlue-900);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease-in-out;
}

.btn_outline:hover img {
    transform: translateX(5px);

    /* color: var(--color-mint-600, #32D3A0);
  background: white;
  outline: 1px solid var(--color-mint-600, #32D3A0); */
}

.btn_outline p {
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
}

.btn_outline img {
    transition: all 0.3s ease-in-out;
    height: 15px;
    width: 15px;
}

/* large btns */

.btn_solid_white_lg {
    border-radius: 12px;
    /* border: 1px solid transparent; */
    outline: 2px solid transparent;
    padding: 16px 24px;
    width: fit-content;
    height: fit-content;
    background: white;
    color: var(--color-mint-600, #32d3a0);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease-in-out;
}

.btn_solid_white_lg:hover img {
    transform: translateX(5px);

    /* color: var(--color-mint-600, #32D3A0);
  background: white;
  outline: 1px solid var(--color-mint-600, #32D3A0); */
}

.btn_solid_white_lg p {
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
}

.btn_solid_white_lg img {
    transition: all 0.3s ease-in-out;
    height: 15px;
    width: 15px;
}

.btn_outline_white_lg {
    border-radius: 12px;
    border: 1.5px solid white;

    padding: 14px 20px;
    width: fit-content;
    height: fit-content;
    background: transparent;
    color: white;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease-in-out;
}

.btn_outline_white_lg:hover img {
    transform: translateX(5px);

    /* color: var(--color-mint-600, #32D3A0);
  background: white;
  outline: 1px solid var(--color-mint-600, #32D3A0); */
}

.btn_outline_white_lg p {
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
}

.btn_outline_white_lg img {
    transition: all 0.3s ease-in-out;
    height: 15px;
    width: 15px;
}

/* manage-address */

.rs-manage-addresses-section {
    background: var(--color-neutral-50);
}

.rs-add-new-address-btn {
    background: var(--color-mint-600)
        linear-gradient(
            4deg,
            rgba(232, 251, 244, 0.3) 0%,
            rgba(26, 112, 88, 0.3) 100%
        );
}

/* modal base */
.modal_container {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* when visible */
.modal_container.active {
    opacity: 1;
    pointer-events: auto;
}

/* backdrop */
.modal_backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='rotate(45 16 16)'><circle cx='16' cy='16' r='1.5' fill='white' stroke='black' stroke-width='0.5'/><line x1='16' y1='0' x2='16' y2='32' stroke='white' stroke-width='2' stroke-linecap='round'/><line x1='0' y1='16' x2='32' y2='16' stroke='white' stroke-width='2' stroke-linecap='round'/><line x1='16' y1='0' x2='16' y2='32' stroke='white' stroke-width='0.5' stroke-linecap='round'/><line x1='0' y1='16' x2='32' y2='16' stroke='white' stroke-width='0.5' stroke-linecap='round'/></g></svg>")
            16 16,
        crosshair;
}

.modal_container.active .modal_backdrop {
    opacity: 1;
}

/* content */
.modal_content {
    background-color: white;
    padding: 24px;
    border-radius: 12px;
    z-index: 10;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s ease;
    max-height: 100vh;
    overflow-y: auto;
}

.modal_container.active .modal_content {
    transform: scale(1);
    opacity: 1;
}

/* icon labels */
.icon_labels {
    border-radius: 12px;
    width: 68px;
    height: 68px;
    background: var(--color-mint-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon_labels img {
    width: 24px;
    height: 24px;
}

/* select dropdown css */

.select-dropdown {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'><path d='M1 1L6.20209 6.20209L11.4042 1' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}

.select-dropdown:hover .select-dropdown-option {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.select-dropdown-option {
    transform-origin: 0 0;
    transform: scale(1, 0);
}

.select-dropdown-option li:hover {
    background: var(--color-aqua-50);
    border-radius: 8px;
}

/* form styles */
.required:after {
    content: "*";
    color: red;
}

/* counter */
.counter_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: clamp(82px, 10vw, 110px);
    height: clamp(28px, 4vw, 32px);
    padding: 4px;
    background-color: var(--color-neutral-100);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: var(--color-neutral-700);
}

.counter_container > .decrease {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}

.counter_container > .current_count {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.counter_container > .increase {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}