/* font family: Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url("/auth.css");
@import url("/assets/web/css/header-footer.css");
@import url("/assets/web/css/chat.css");

body {
    font-family: "Poppins", sans-serif;
    line-height: 1.5;
    width: 100%;
    color: #f5f5f5;
    background: url(../images/main-bg.png) no-repeat;
    background-size: cover;
    background-position: top center;
    overflow-x: hidden;
    background-attachment: fixed;
}

body.index {
    background: url(../images/index.png) no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: top center;
    overflow-x: hidden;
    height: auto !important;
    width: auto !important;
}

body,
input,
button {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body.active-sidebar {
    overflow: hidden;
}

a:hover {
    color: #fff;
}

a,
a:hover {
    text-decoration: none;
    -webkit-transition: ease-in-out 0.5s;
    -moz-transition: ease-in-out 0.5s;
    -o-transition: ease-in-out 0.5s;
    transition: ease-in-out 0.5s;
}

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

/* custom scroll */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(50, 96, 235, 0.03);
    background-color: #aaaaaa;
}

::-webkit-scrollbar {
    width: 1.5px;
    height: 1.5px;
    background-color: #aaaaaa;
}

::-webkit-scrollbar-thumb {
    background-color: #325feb;
    border: 1px solid #325feb;
}

/* custom scroll [END] */
main {
    padding: 0;
}

#wrapper {
    display: flex;
    padding: 0 30px;
}

#sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px; /* explicit width — must match #page-content-wrapper margin-left */
    height: 100dvh;
    margin: 0;
    z-index: 1000 !important; /* above sticky header (900), below drawers */
    transform: translateX(0px);
    transition: transform 0.35s ease-out;
}

.sidebar-wrapper-body {
    background: linear-gradient(
        180deg,
        rgba(18, 26, 58, 0.92),
        rgba(10, 16, 38, 0.94)
    );
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px);
    box-shadow: none;
    display: flex;
    flex-flow: column;
    border-radius: 0;
    padding: 18px 14px;
    width: 100%;
    min-width: 240px;
    height: 100%;
}

#page-content-wrapper {
    width: 100%;
    overflow-x: hidden;
    margin-left: 240px;
    /* flush sidebar width (no floating margin) */
    transition: margin 0.35s ease-out;
}

.sidenav-toggled #sidebar-wrapper {
    transform: translateX(-350px);
    transition: margin 0.3s ease;
}

.sidenav-toggled #page-content-wrapper {
    transform: translateX(0);
    width: 100%;
    transition: margin 0.25s ease-out;
}

.admin-brand {
    padding: 16px 0 12px;
    margin: 0 auto;
    display: block;
    text-align: center;
    width: fit-content;
    object-fit: contain;
}
.admin-brand img {
    width: 148px;
    height: auto;
}

.brand-brdr {
    display: block;
    text-align: center;
    margin-top: 4px;
}
.brand-brdr svg {
    width: 100%;
    height: auto;
    opacity: 0.5;
}

.sidebar-menu {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 100%;
    gap: 20px;
    padding: 14px 0 0;
}

.sidebar-menu ul li {
    margin-bottom: 2px;
    padding-bottom: 0;
    border-bottom: 0;
}

#scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #325feb;
}

#scroll::-webkit-scrollbar {
    width: 1px;
    background-color: #325feb;
}

#scroll::-webkit-scrollbar-thumb {
    background-color: #325feb;
    border: 1px solid transparent;
}

.sidebar-menu ul li:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.sidebar-menu ul li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 500;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    padding: 11px 14px;
    border-radius: 10px;
    transition:
        background 0.16s ease,
        color 0.16s ease;
}
.sidebar-menu ul li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.sidebar-menu ul li a.active {
    background: rgba(80, 143, 255, 0.12);
    color: #fff;
}
.sidebar-menu ul li a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #7fa8ff, #325feb);
    box-shadow: 0 0 10px rgba(80, 143, 255, 0.85);
}

.menu-icon {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-icon svg {
    width: 21px;
    height: 21px;
}
.menu-icon svg path {
    stroke: currentColor;
}

.sidebar-menu ul li a:hover .menu-icon,
.sidebar-menu ul li a.active .menu-icon {
    color: #fff;
}

.logout-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin: 0;
}

.logout-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 15px;
    transition: color 0.16s ease;
}
.logout-btn a:hover,
.logout-btn a.active {
    color: #fff;
}

.user-dtls h4 {
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 3px;
}

.user-dtls a {
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    background: none;
    border: none;
    display: block;
    transition: 0.3s ease-in-out;
}

.user-dtls a:hover {
    font-weight: 600;
}

.side-arrow-btn {
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    display: none;
}

.close-arrow-btn {
    background: #325feb;
    border: none;
    border-radius: 50%;
    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 78px;
    right: -12px;
    transition: margin 0.3s ease-out;
}

#mobview,
.mob-search-btn {
    display: none;
}

/* right side navbar */
.content-container {
    padding: 0 0 0 0;
    position: relative;
}

/* ----- admin header ----- */
.admin-nav {
    background: #ffffff1a;
    border: 1px solid #ffffff1a;
    backdrop-filter: blur(104px);
    box-shadow: 0px 12px 24px 0px #00000073;
    /* compact + sticky (!important beats responsive.css padding, which loads later) */
    padding: 14px 24px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    position: sticky;
    top: 0;
    z-index: 900;
    border-radius: 16px;
    margin-bottom: 18px !important;
    transition:
        padding 0.22s ease,
        box-shadow 0.22s ease;
}

.admin-lft {
    display: flex;
    align-items: center;
    grid-gap: 3px;
    flex-flow: row-reverse;
}

.admin-lft h1 {
    font-weight: 600;
    font-size: 22px !important; /* compact header; beats responsive.css (loads later) */
    color: #ffffff;
    margin-bottom: 0;
    transition: font-size 0.22s ease;
}

.admin-rgt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-gap: 20px;
    width: 60%;
}

.admin-rgt form {
    width: 50%;
}

.admin-rgt .form-group {
    margin: 0;
    position: relative;
    width: 100%;
}

.admin-rgt .form-group span {
    position: absolute;
    /* full-height flex-centering keeps the search icon centered in both header states */
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    margin: 0 0 0 18px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 0 !important;
    transform: none !important;
}

.admin-rgt .form-group .form-control {
    background: #00000066;
    border: 1px solid #dddddd4d;
    border-radius: 15px;
    padding: 14px 14px 14px 53px;
    font-size: 16px;
    font-weight: 400;
    vertical-align: middle;
    width: 100%;
    color: #fff;
}

.admin-rgt .form-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.admin-rgt .form-group .form-control:focus {
    box-shadow: none;
    border-color: #fff;
}

.notify-btn {
    background: #071116b2;
    border: 1px solid #ffffff1a;
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in;
}

.notify-btn:hover {
    border: 1px solid #ffffff;
}

.comn-btn {
    padding: 12px 20px;
    background: #325feb;
    color: #fff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    white-space: nowrap;
    border: 0;
    border: 1px solid #325feb;
}

.comn-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.comn-btn:after,
.comn-btn:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    z-index: -1;
}

.comn-btn:before {
    background: #ffffff86;
    transition: 0.6s ease-in;
    transition-delay: 0.1s;
}

.comn-btn:after {
    background: #fff;
    transition: 0.8s ease;
    transition-delay: 0.4s;
}

.comn-btn:hover::before,
.comn-btn:hover:after {
    transform: translate(-50%, -50%) scale(350);
}

.comn-btn:hover {
    color: #325feb;
    transition: 0.4s ease-in-out;
}

.comn-btn:hover svg path {
    stroke: #325feb;
    transition: 0.8s ease-in-out;
}

.new-tender-btn {
    background: linear-gradient(90deg, #325feb, #4f7dff, #a8bdfc, #325feb);
    background-size: 300% auto;
    animation: whiteShimmer 3s linear infinite;
}

@keyframes whiteShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* --------------- common-sidebar --------------- */
.main-side-area {
    position: relative;
}

.left-side-area {
    position: fixed;
    inset: 0px;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
    transition: opacity 300ms ease-out 0s;
    opacity: 1;
    display: none;
    z-index: 1100 !important; /* overlay above sticky header */
}

.notification-sidebar,
.tender-sidebar,
.tender-tab-sidebar,
.explore-sidebar,
.explore-tab-sidebar,
.project-sidebar,
.project-tab-sidebar {
    background: #fff;
    box-shadow: -20px 4px 54px 0px rgba(0, 0, 0, 0.45);
    width: 650px;
    max-height: 100%;
    padding-bottom: 50px;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 20px;
    z-index: 1200 !important; /* drawers above sticky header */
    box-shadow: none;
    transition-property: transform;
    transition-duration: 900ms;
    transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1);
    transform: translateX(650px);
}

.slide-sidebar {
    transform: translateX(0px) !important;
    transition-property: transform;
    transition-duration: 900ms;
    transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1);
}

.sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sidebar-title h3 {
    font-weight: 700;
    font-size: 28px;
    color: #071116;
    margin-bottom: 0;
}

.sidebar-close {
    background: transparent;
    border: none;
    opacity: 0.7;
    transition: 0.3s ease-in-out;
}

.sidebar-close:hover {
    opacity: 1;
}

.sidebar-body {
    position: relative;
    height: calc(100vh - 75px);
}

/* ---------------- common-sidebar [END]--------------- */
/* --------------- Notification Sidebar --------------- */
.when-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    height: 100%;
}

.when-no-data span {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eef1f6 0%, #ffffff 100%);
    width: 100px;
    min-width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.when-no-data h5 {
    font-weight: 600;
    font-size: 22px;
    text-align: center;
    color: #071116;
    margin-bottom: 5px;
}

.when-no-data p {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    color: rgba(7, 17, 22, 0.6);
}

.notify-listing {
    height: 100%;
    overflow-y: auto;
}

.notify-bx {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.notify-bx:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.notify-icon {
    width: 70px;
    min-width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 96, 235, 0.1);
    border-radius: 50%;
}

.notify-dtls {
    width: 100%;
}

.notify-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
    width: 100%;
}

.notify-title h5 {
    font-weight: 600;
    font-size: 18px;
    color: #071116;
    margin-bottom: 0;
}

.read .notify-title h5 {
    color: rgba(7, 17, 22, 0.5);
}

.notify-title span {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: rgba(7, 17, 22, 0.7);
    display: block;
    margin: 0;
    white-space: nowrap;
}

.notify-dtls p {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.02em;
    margin-bottom: 0;
    color: rgba(7, 17, 22, 0.5);
}

/* --------------- Notification Sidebar [END]--------------- */
/* ------------- logout Modal --------------- */
.profile-modal .modal-content {
    background: #ffffff;
    box-shadow: 0px 14px 11px 0px #00000021;
    border-radius: 21px;
}

.profile-modal .modal-body {
    text-align: center;
    padding: 30px 42px;
}

.profile-modal .modal-body h5 {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #071116;
    margin-bottom: 20px;
    line-height: 1.5;
}

@media (min-width: 576px) {
    .profile-modal .modal-dialog {
        max-width: 450px;
        margin-right: auto;
        margin-left: auto;
    }
}

.modal-btn-grp {
    display: flex;
    align-items: center;
    gap: 20px;
}

.modal-btn-grp button {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    padding: 10.5px;
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    border: none;
    color: #fff;
    border: 1px solid transparent;
}

.no-btn {
    background: #325feb;
}

.yes-btn {
    background: #071116;
}

.no-btn:hover {
    border: 1px solid #325feb;
}

.yes-btn:hover {
    border: 1px solid #071116;
    color: #071116;
}

/* ------------- Privacy policy : Terms & condition-------------- */
.policy-blog {
    background: #ffffff;
    border-radius: 15px;
    position: relative;
    padding: 20px;
}

.policy-blog p {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.03em;
    margin-bottom: 14px;
    color: #000000;
}

.policy-blog p:last-child {
    margin-bottom: 0;
}

/* ------------- Privacy policy : Terms & condition -------------- */
.wd-mb-24 {
    margin-bottom: 24px;
}

/* --------------- Subscriptipon [END] -------------------- */
/* ----------------------  Profile ------------------------ */
.profile-dtls-bx {
    background: #ffffff29;
    padding: 20px 24px 24px;
    position: relative;
    border-radius: 15px;
}

.profile-pic img {
    width: 128px;
    min-width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
}

.profile-dtls-txt h3 {
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    margin-bottom: 15px;
}

.profl-info-flx {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.profl-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff26;
}

.profl-txt h5 {
    font-weight: 500;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
}

.profl-txt a {
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    word-break: break-all;
}

.profl-info-flx:hover .profl-icon {
    background: #325feb;
}

.profl-txt a:hover {
    color: #fff;
}

.red-txt {
    color: #ff8080 !important;
}

.profile-right .tab-content {
    margin-top: 23px;
}

.profl-right-bx {
    background: #fff;
    border-radius: 13px;
    padding: 25px 32px;
    position: relative;
}

.profl-right-bx h2 {
    font-weight: 600;
    font-size: 28px;
    padding-bottom: 24px;
    margin-bottom: 34px;
    border-bottom: 1px solid #dddddd;
    color: #000000;
}

.profile-right .nav {
    gap: 14px;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
}

.profile-right .nav-link {
    background: #ffffff1a;
    font-weight: 500;
    font-size: 15px;
    padding: 12px 18px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.profile-right .nav-link.active {
    background: #325feb;
}

.profile-plan-bx {
    border: 2px solid #dddddd;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 16px;
}

.profl-top-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #0000001a;
}

.profl-plan-lft h3 {
    font-weight: 600;
    font-size: 18px;
    color: #071116;
    margin-bottom: 3px;
}

.profl-plan-lft p {
    font-weight: 400;
    font-size: 14px;
    color: rgba(7, 17, 22, 0.6);
    margin-bottom: 0;
}

.profl-plan-rght p {
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    margin-bottom: 0;
}

.profl-plan-rght span {
    font-weight: 600;
    font-size: 18px;
    color: #325feb;
    display: block;
}

.profl-plan-status p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 15px;
    color: rgba(7, 17, 22, 0.8);
    margin-bottom: 8px;
}

.profl-plan-status p:last-child {
    margin-bottom: 0;
}

.profl-plan-status p span {
    color: #071116;
}

.profile-plan-bx h4 {
    font-weight: 600;
    font-size: 18px;
    color: #071116;
    text-align: center;
    margin-bottom: 16px;
}

/* ----------------------  Profile [END] ------------------------ */
/* ---------------------Dashboard [ START ] ---------------------- */
.kd_tender_bx {
    background: url(../images/dashboard/tender-bg.png) no-repeat;
    background-position: top center;
    background-size: cover;
    border-radius: 15px;
    border: 1px solid #ffffff33;
    display: flex;
    align-items: center;
    grid-gap: 19px;
    padding: 22px 26px;
    margin-bottom: 35px;
}

.tender_icon {
    border: 1px solid #ffffff4d;
    width: 69px;
    min-width: 69px;
    height: 69px;
    border-radius: 50%;
    background: #00000099;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tender_txt span {
    font-weight: 600;
    font-size: 30px;
    color: #fff;
}

.tender_txt p {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #fff;
    margin-bottom: 0;
}

.white-box {
    background: #ffffff;
    border-radius: 15px;
    padding: 40px;
}

.vendor-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.vendor-title h2 {
    font-weight: 600;
    font-size: 26px;
    color: #000000;
    margin-bottom: 0;
}

.vendor-title a {
    font-weight: 700;
    font-size: 18px;
    color: #325feb;
    display: inline-block;
    margin: 0;
}

.venders-bx {
    position: relative;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 30px;
    transition: all ease-in-out 0.3s;
    background: #ffffff;
    border: 1px solid #dddddd;
}

.venders-bx .srvc-listing,
.venders-bx .srvc-listing ul {
    justify-content: flex-start;
}

.venders-bx:hover {
    transform: translateY(-8px);
}

.lock-dtls:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(7, 17, 22, 0.7);
    backdrop-filter: blur(17px);
    width: 100%;
    height: 100%;
    border-radius: 15px;
    z-index: 1;
}

.lock-dtls:after {
    content: "";
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='44' viewBox='0 0 32 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.75 11.75C4.75 5.5355 9.7855 0.5 16 0.5C22.2145 0.5 27.25 5.5355 27.25 11.75V18.5H28.15C30.13 18.5 31.75 20.12 31.75 22.1V37.85C31.75 40.82 29.32 43.25 26.35 43.25H5.65C2.68 43.25 0.25 40.82 0.25 37.85V22.1C0.25 20.12 1.87 18.5 3.85 18.5H4.75V11.75ZM22.75 11.75V18.5H9.25V11.75C9.25 8.0195 12.2695 5 16 5C19.7305 5 22.75 8.0195 22.75 11.75ZM16 23.5625C15.1053 23.5616 14.2369 23.8654 13.5379 24.4239C12.8389 24.9825 12.351 25.7624 12.1545 26.6353C11.958 27.5082 12.0647 28.422 12.457 29.2262C12.8492 30.0304 13.5037 30.677 14.3125 31.0595V36.5C14.3125 36.9476 14.4903 37.3768 14.8068 37.6932C15.1232 38.0097 15.5524 38.1875 16 38.1875C16.4476 38.1875 16.8768 38.0097 17.1932 37.6932C17.5097 37.3768 17.6875 36.9476 17.6875 36.5V31.0595C18.4963 30.677 19.1508 30.0304 19.543 29.2262C19.9353 28.422 20.042 27.5082 19.8455 26.6353C19.649 25.7624 19.1611 24.9825 18.4621 24.4239C17.7631 23.8654 16.8947 23.5616 16 23.5625Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 32px;
    height: 42px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.vender-intro {
    padding: 12px 14px;
    gap: 10px;
    background: #325feb;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vender-dtls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

.vender-dtls h4 {
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    margin: 0 0 3px;
}

.vender-contct {
    display: flex;
    align-items: center;
    gap: 7px;
}

.vender-contct a {
    background: #325feb;
    width: 30px;
    height: 30px;
    min-width: 30px;
    box-shadow:
        -1.44px 1.44px 1.44px 0px #54bbb156 inset,
        -0.72px 0.72px 0.72px 0px #ffffff56 inset,
        1.44px -1.44px 1.44px 0px #ffffff56 inset,
        0.72px -0.72px 0.72px 0px #54bbb156 inset;
    backdrop-filter: blur(15.048px);
    -webkit-backdrop-filter: blur(15.048px);
    /* for Safari */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.vender-contct a:hover {
    background: #508fff;
}

.vender-dtls p {
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 0;
}

.vender-img img {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 11px;
    object-fit: cover;
}

.vender-body {
    padding: 10px 0 0;
}

p.vendr-exp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 14px;
    color: #071116;
}

.vendr-exp span {
    color: #325feb;
}

.vender-body h5 {
    font-weight: 500;
    font-size: 15px;
    color: #000000;
    margin-bottom: 8px;
}

.srvc-listing ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

.srvc-listing li {
    background: rgba(50, 95, 235, 0.1);
    padding: 8px;
    font-weight: 400;
    font-size: 13px;
    color: #325feb;
    border-radius: 7px;
    white-space: nowrap;
}

.srvc-listing li:last-child {
    background: transparent;
    padding: 0;
}

.total-srvc {
    background: rgba(50, 95, 235, 0.3);
    border-radius: 10px;
    padding: 5px 9px;
    text-align: center;
    font-size: 13px;
    line-height: 25px;
    font-weight: 400;
    color: #325feb;
    vertical-align: middle;
    border: none;
}

/* my tender */
.tender-bx {
    background: #ffffff;
    border: 1px solid #dddddd;
    padding: 20px 15px;
    border-radius: 15px;
    margin-bottom: 24px;
    transition: all ease-in-out 0.3s;
}

.tender-bx:hover {
    border-color: #325feb;
    transform: translateY(-10px);
}

.tender-ctgry {
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tender-ctgry span {
    font-weight: 500;
    font-size: 13px;
    color: #325feb;
    text-align: center;
    background: #508fff33;
    padding: 2px 9px;
    border-radius: 15px;
}

/* 3 dot button */
.ctgry-option {
    position: relative;
    padding: 0;
    /* display: none; */
}

.wd-dropdown-menu {
    border-radius: 14px;
    box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: linear-gradient(158deg, #1a2a58 0%, #111a3a 70%, #0d1430 100%);
    display: none;
    position: absolute;
    top: 24px;
    right: 0px;
    padding: 6px;
    white-space: nowrap;
    z-index: 20;
    width: 190px;
}

.ctgry-option:hover .wd-dropdown-menu {
    display: block !important;
}

.wd-dropdown-menu a,
.wd-dropdown-menu button {
    padding: 9px 12px;
    display: block;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.02px;
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    width: 100%;
    transition: background 0.15s ease, color 0.15s ease;
}

.wd-dropdown-menu a:hover,
.wd-dropdown-menu button:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.wd-dropdown-menu .text-danger { color: #ff8f8f !important; }
.wd-dropdown-menu .text-danger:hover { background: rgba(255, 90, 90, 0.14); color: #ffb3b3 !important; }

/* "Set status" themed button list inside the card menu */
.dropdown-status { padding: 4px 4px 6px; }
.dropdown-status__label {
    display: block;
    padding: 4px 8px 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(159, 184, 255, 0.85);
}
.tz-statusmenu { display: flex; flex-direction: column; gap: 2px; }
.tz-statusmenu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.tz-statusmenu__item::before {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237fa8ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    opacity: 0;
    transition: opacity 0.15s ease;
}
.tz-statusmenu__item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.tz-statusmenu__item.is-active { color: #fff; background: rgba(110, 160, 255, 0.15); }
.tz-statusmenu__item.is-active::before { opacity: 1; }

.tender-body h4 {
    font-weight: 600;
    font-size: 18px;
    color: #071116;
    margin-bottom: 5px;
}

.tender-body p {
    font-weight: 400;
    font-size: 14px;
    color: rgba(7, 17, 22, 0.5);
    margin-bottom: 12px;
}

.tendr-adrs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
}

.tendr-adrs svg {
    width: 20px;
    min-width: 20px;
}

.tendr-adrs address {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 12px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.4;
}

.tender-dtls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tender-dtls > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tender-dtls > div span {
    font-weight: 400;
    font-size: 12px;
    color: #000;
    margin-bottom: 0;
}

/* ---------------------Dashboard [ END ] ---------------------- */
/* -------------- Filter --------------------- */
.filtr-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    padding: 0;
    margin: 15px 12px;
}

.mob-filter {
    display: none;
}

.filter-modal .modal-content {
    background: #ffffff;
    box-shadow: 0px 14px 11px 0px #00000021;
    border-radius: 21px;
}

.filter-modal .modal-header {
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-bottom: 0;
}

.filter-modal .modal-title {
    font-weight: 700;
    font-size: 26px;
    color: #071116;
    margin-bottom: 0;
    text-align: center;
}

.filter-modal .close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 30px;
    background: transparent;
    border: none;
    padding: 0;
}

.filter-modal .modal-body {
    padding: 0 30px 30px;
}

/* ------------ tender sidebar ----------------- */
.tender-sidebar-dtls {
    height: calc(100dvh - 100px);
    overflow-y: auto;
    padding-right: 15px;
}

.tender-sidebar-dtls h4,
.new-tender-form h4 {
    font-weight: 600;
    font-size: 24px;
    color: #000000;
    margin-bottom: 20px;
}

.tender-sidebar-dtls .tendr-adrs address,
.tender-sidebar-dtls .tender-dtls > div span {
    font-size: 15px;
}

.tender-descript {
    margin: 20px 0;
}

.tender-descript h5,
.rcv-quotes h5 {
    font-weight: 600;
    font-size: 15px;
    color: #071116;
    margin-bottom: 15px;
}

.tender-descript p {
    font-weight: 400;
    font-size: 14px;
    color: #545454;
    margin-bottom: 0;
}

.srvc-listing {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tender-srvc {
    margin: 0;
    padding: 0;
}

.tender-srvc li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #0000001a;
}

.tender-srvc li p {
    font-weight: 400;
    font-size: 15px;
    color: #000000;
    margin-bottom: 0;
}

.srvc-listing span {
    font-weight: 400;
    font-size: 13px;
    color: #325feb;
    background: #325feb1a;
    padding: 8px;
    border-radius: 7px;
    white-space: nowrap;
}

.rcv-quote-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #0000001a;
}

.rcv-quote-items h6 {
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    margin-bottom: 12px;
}

.quote-ctgry-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.quote-crgry-lft {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.quote-crgry-lft span {
    font-weight: 400;
    font-size: 12px;
    color: #071116b2;
    text-align: center;
    padding: 8px 10px;
    border-radius: 7px;
    background: #0000000a;
    white-space: nowrap;
}

.quote-action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quote-call,
.quote-msg,
.quote-price {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow:
        -1.44px 1.44px 1.44px 0px #54bbb156 inset,
        -0.72px 0.72px 0.72px 0px #ffffff56 inset,
        1.44px -1.44px 1.44px 0px #ffffff56 inset,
        0.72px -0.72px 0.72px 0px #54bbb156 inset;
    backdrop-filter: blur(15.04800033569336px);
    opacity: 0.5;
}

.quote-call {
    background: #325feb;
}

.quote-msg {
    background: #508fff;
}

.quote-price {
    background: #071116;
}

.rcv-quote-items p {
    font-weight: 500;
    font-size: 14px;
    color: #325feb;
    margin-bottom: 0;
}

.rcv-quote-items:last-child {
    border-bottom: 0;
}

/* ---------tender tab sidebar ------------ */
.rcv-quotes .nav {
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.rcv-quotes .nav-link {
    color: #325feb;
    padding: 7px 8px;
    text-align: center;
    background: #325feb1a;
    border-radius: 8px;
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
}

.rcv-quotes .nav-link.active {
    color: #ffffff;
    background: #325feb;
}

.rcv-quotes .tab-content {
    margin-top: 10px;
}

/* -------------- Quote details --------------------- */
.detail-modal .modal-content {
    background: #ffffff;
    box-shadow: 0px 14px 11px 0px #00000021;
    border-radius: 21px;
}

.detail-modal .modal-content .modal-body {
    padding: 30px;
}

.detail-modal .modal-content .modal-body p {
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #071116;
    margin-bottom: 20px;
}

@media (min-width: 767px) {
    .detail-modal .modal-dialog {
        max-width: 725px;
        margin-right: auto;
        margin-left: auto;
    }
}

.detail-modal .modal-content .modal-body .comn-btn {
    width: 50%;
    margin: 0 auto;
}

.detail-modal .modal-content .modal-body .comn-btn:hover {
    border: 1px solid #325feb;
}

/* wizard */
.form-wizard {
    position: relative;
}

.form-wizard .form-wizard-header {
    text-align: center;
    width: 70%;
    margin: 0 auto;
}

.form-wizard .form-wizard-header ul {
    margin: 0 auto 30px;
}

.form-wizard .form-wizard-steps {
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    text-align: center;
    position: relative;
}

.form-wizard-header ul:before {
    content: "";
    max-width: 75%;
    width: 100%;
    height: 8px;
    background: #363b43;
    display: block;
    border-radius: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 32px auto 0;
}

.form-wizard-header ul li {
    position: relative;
    text-align: center;
    max-width: 90px;
    width: 100%;
    background: #03080f;
}

.form-wizard-header li span {
    width: 70px;
    max-width: 70px;
    height: 70px;
    background: #363b43;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 10px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 32px;
    color: #fff;
}

.form-wizard-header li.active span {
    background: #325feb;
}

.form-wizard .wizard-fieldset {
    display: none;
}

.form-wizard .wizard-fieldset.show {
    display: block;
}

.tender-form-title {
    text-align: center;
    margin: 0 auto 30px;
}

.tender-form-title h2 {
    font-weight: 700;
    font-size: 33px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 0;
}

.tender-form-title p {
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 0;
}

.new-tender-form .auth-form {
    background: #fff;
    border-radius: 15px;
    padding: 30px 40px;
}

.wizard_btngrp {
    margin: 36px auto 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.wizard_btngrp .comn-btn {
    width: fit-content;
}

.wizard_btngrp .comn-btn:hover {
    border: 1px solid #325feb;
}

.new-tender-form h3 {
    font-weight: 400;
    font-size: 15px;
    margin-bottom: 10px;
    color: #000000;
}

/* ----------- step 2 ------------ */
.tender-type {
    display: flex;
    gap: 16px;
}

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

.radio-option label {
    border: 1px solid #508fff80;
    background: #ffffff;
    border-radius: 17px;
    padding: 15px 18px;
    font-weight: 400;
    font-size: 16px;
    color: #071116;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.radio-option input:checked + label {
    background-color: #508fff75;
    border-color: #508fff33;
}

.radio-icon {
    display: none;
}

.radio-option input[type="radio"]:checked + label .radio-icon {
    display: block;
}

/* ---------------- select2 ---------------- */
/* Make the container and tags rounded */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #325feb;
    background: #f5f5f5 url(../images/form-arrow.svg) no-repeat !important;
    background-position: 98% !important;
    background-size: 15px !important;
    padding: 16px 15px;
    font-size: 14px;
    border-radius: 12px;
}

.select2-results__option--selectable:last-child {
    border-radius: 0 0 12px 12px;
}

/* Individual tag style */
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background: #508fff33;
    border: none;
    border-radius: 17px;
    padding: 8px 12px;
    margin-top: 0;
    font-weight: 400;
    font-size: 16px;
    color: #071116;
    display: flex;
    align-items: center;
    flex-flow: row-reverse;
    gap: 10px;
    margin: 0;
}

/* "X" icon inside tag */
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
    color: #508fff;
    font-weight: bold;
    margin-left: 0;
    margin-right: 0;
    cursor: pointer;
    border-right: 0;
    background: transparent;
    position: relative;
    padding: 0;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__clear {
    cursor: pointer;
    font-weight: bold;
    height: auto;
    margin-right: 10px;
    margin-top: 0px;
    position: absolute;
    right: 0;
    padding: 1px;
}

/* Hover effect for remove icon */
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    color: #ff0000;
    background: transparent;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__display {
    padding: 0;
}

.select2-dropdown {
    background: #f5f5f5;
    border: 1px solid #508fff80;
    border-radius: 15px;
}

.select2-results__option--selectable {
    color: #071116;
    font-size: 15px;
    font-weight: 400;
}

.select2-container--default .select2-results__option--selected {
    background-color: #508fff33;
}

.select2-container .select2-search--inline .select2-search__field {
    margin: 0;
}

/* ------------------------- select2 --------------------------- */
.black-btn {
    padding: 12px 20px;
    background: #071116;
    color: #fff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    white-space: nowrap;
    border: 1px solid #071116;
}

.black-btn:after,
.black-btn:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    z-index: -1;
}

.black-btn:before {
    background: #ffffff86;
    transition: 0.6s ease-in;
    transition-delay: 0.1s;
}

.black-btn:after {
    background: #fff;
    transition: 0.8s ease;
    transition-delay: 0.4s;
}

.black-btn:hover::before,
.black-btn:hover:after {
    transform: translate(-50%, -50%) scale(350);
}

.black-btn:hover {
    color: #071116;
}

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

/* ---------------- Profile upload ---------------- */
.profile-edit {
    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 9px;
    margin: 0 auto 20px;
}

.avatar-img {
    width: 130px;
    min-width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
}

.camera-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 37px;
    min-width: 37px;
    height: 37px;
    background: #325feb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 5px solid #ffffff;
}

.remove-btn {
    display: inline-block;
    color: #c80003;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}

input[type="file"] {
    display: none;
}

/* ============================================================================= */
/* -------------------------------- VENDOR SIDE -------------------------------- */
/* ============================================================================= */
/* explore sidebar */
.sidebar-form {
    width: 100%;
}

.sidebar-form label {
    font-weight: 400;
    font-size: 15px;
    color: #000000;
    margin-bottom: 10px;
}

.sidebar-form .form-control {
    font-weight: 400;
    font-size: 16px;
    color: #071116;
    background: #f5f5f5;
    padding: 15px 18px;
    border-radius: 17px;
    border: 1px solid transparent;
}

.sidebar-form .form-control::placeholder {
    color: rgba(7, 17, 22, 0.4);
}

.sidebar-form .form-control:focus {
    box-shadow: none;
    border-color: #325feb;
}

.submit-btn {
    margin: 30px auto;
    width: 55%;
}

/*  */
.successful-bx {
    background: #ffffff;
    border-radius: 15px;
    height: 78dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    text-align: center;
}

.successful-bx span {
    background: linear-gradient(180deg, #eef1f6 0%, #ffffff 100%);
    width: 130px;
    min-width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.successful-bx h2 {
    font-weight: 600;
    font-size: 28px;
    text-align: center;
    color: #071116;
    margin-bottom: 7px;
}

.successful-bx p {
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
    color: rgba(28, 27, 25, 0.7);
}

.successful-bx .comn-btn {
    width: 60%;
    margin: 0 auto;
}

/* Edit Price modal */
@media (min-width: 675px) {
    #editPrice .modal-dialog {
        max-width: 600px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* -------------- profile ------------------ */
.btn-grp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 20px auto 0;
    flex-wrap: wrap;
}

.btn-grp button {
    flex: 1 1 45%;
    min-width: 140px;
    padding: 11px 12px;
    white-space: normal;
}

@media (max-width: 576px) {
    .btn-grp button {
        flex: 1 1 100%;
    }
}

.cancel-btn {
    background: #c0c0c0;
    color: #fff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-block;
    font-weight: 600;
    font-size: 18px;
    white-space: nowrap;
    border: 0;
    border: 1px solid #c0c0c0;
}

.cancel-btn:after,
.cancel-btn:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    z-index: -1;
}

.cancel-btn:before {
    background: #ffffff86;
    transition: 0.6s ease-in;
    transition-delay: 0.1s;
}

.cancel-btn:after {
    background: #fff;
    transition: 0.8s ease;
    transition-delay: 0.4s;
}

.cancel-btn:hover::before,
.cancel-btn:hover:after {
    transform: translate(-50%, -50%) scale(350);
}

.cancel-btn:hover {
    color: #c0c0c0;
    transition: 0.4s ease-in-out;
}

/* ---------------Home [ START ] ---------------------*/
.banner {
    padding: 111px 0 50px;
    background: url(../images/star-bg.png) no-repeat;
    width: 100%;
    height: auto;
    background-position: center center;
    background-size: cover;
}

.bnr_txt h1 {
    font-weight: 700;
    font-size: 38px;
    line-height: 69px;
    letter-spacing: 0.2px;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

.bnr_txt h1 span {
    color: #325feb;
}

.bnr_txt p {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.2px;
    text-align: center;
    margin-bottom: 30px;
}

.bnr_txt h6 {
    font-style: Italic;
    font-size: 18px;
    letter-spacing: 0.2px;
    text-align: center;
    color: #508fff;
    display: block;
}

.bnr_btns {
    display: flex;
    align-items: center;
    grid-gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
}

.look_btn {
    background: linear-gradient(90deg, #0099ff 0%, #2600fe 100%);
    box-shadow: 0px 4px 34px 0px #2fabfc33;
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    padding: 14px 30px;
    border-radius: 24px;
    font-size: 14px;
    color: #fff;
    min-width: 256px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    display: block;
}

.look_btn:hover,
.look_btn:active {
    box-shadow: inset 600px 0 0 0 #fff !important;
    color: #0051fe !important;
    -webkit-text-fill-color: #0051fe;
}

.prov_btn {
    box-shadow: inset 0 0 0 0 #0099ff;
    border: 1px solid #0099ff;
    padding: 14px 30px;
    box-shadow: 0px 4px 34px 0px #2fabfc33;
    border-radius: 24px;
    min-width: 256px;
    color: #fff;
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    display: block;
}

.prov_btn:hover,
.prov_btn:active {
    box-shadow: inset 600px 0 0 0 #fff !important;
    color: #0051fe !important;
    -webkit-text-fill-color: #0051fe;
}

.work_blog {
    padding: 50px 0;
}

.work_blog h3 {
    font-weight: 600;
    font-size: 42px;
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
}

.work_bx {
    background:
        linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.06)
        ),
        linear-gradient(
            302.63deg,
            rgba(0, 81, 254, 0) 0%,
            rgba(1, 150, 255, 0.14) 97.48%
        );
    border-radius: 13px;
    padding: 30px 30px 30px;
    height: 100%;
    position: relative;
    backdrop-filter: blur(164px);
}

.no_icon {
    min-width: 70px;
    width: 70px;
    height: 70px;
    background: #1a47e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 28px;
    color: #fff;
    text-align: center;
    margin: -30px auto 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.work_bx h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    margin: 30px auto 10px;
}

.work_bx p {
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0;
}

.start_btn {
    background: linear-gradient(90deg, #0099ff 0%, #2600fe 100%);
    box-shadow: 0px 4px 34px 0px #2fabfc33;

    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    padding: 14px 70px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 50px auto 0;
    text-align: center;
    display: block;
    width: fit-content;
}

.start_btn:hover,
.start_btn:active {
    box-shadow: inset 550px 0 0 0 #fff;
    background: linear-gradient(90deg, #0051fe 0%, #0099ff 100%);
    color: #0051fe !important;
    -webkit-text-fill-color: #0051fe;
}

/* Fix hover effects on iOS touch devices */
@media (hover: none) {
    .look_btn:active,
    .prov_btn:active {
        box-shadow: inset 600px 0 0 0 #fff !important;
        color: #0051fe !important;
    }

    .start_btn:active {
        box-shadow: inset 550px 0 0 0 #fff;
        background: linear-gradient(90deg, #0051fe 0%, #0099ff 100%);
        color: #0051fe !important;
    }
}

.better_blog {
    padding: 50px 0;
}

.better_bx h3 {
    font-weight: 700;
    font-size: 35px;
    color: #fff;
    margin-bottom: 10px;
}

.better_bx p {
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #fff;
    margin-bottom: 12px;
}

.better_blog .start_btn {
    display: inline-block;
    width: fit-content;
    margin: 15px auto 0;
}

.connection_blog {
    padding: 50px 0 80px;
}

.con_bx {
    background:
        linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.06)
        ),
        linear-gradient(
            302.63deg,
            rgba(0, 81, 254, 0) 0%,
            rgba(1, 150, 255, 0.14) 97.48%
        );
    padding: 50px 80px;
    border: 1px solid #ffffff33;
    border-radius: 40px;
    backdrop-filter: blur(44px);
}

.con_bx h3 {
    font-weight: 600;
    font-size: 32px;
    vertical-align: middle;
    color: #fff;
    margin-bottom: 12px;
    text-align: center;
}

.con_bx p {
    font-weight: 400;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
}

.con_bx span {
    font-weight: 400;
    font-style: Italic;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    display: block;
}

/* ---------------Home [ END ]----------------------- */

/* --------------Feedbacks--------------- */
.tag {
    font-weight: 400;
    font-style: Italic;
    font-size: 16px;
    display: block;
    margin-bottom: 15px;
    color: #000;
}

/*---subscriptions--*/

.wlcomcont-sec h1 {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}
.wlcomcont-sec p {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.subscrinnr-wrap h2 {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}

.subscrinnr-wrap p {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.whtsnext-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.whtsnext-wrap h3 {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}
.yourplan-sec li {
    margin-bottom: 12px;
}
.yourplan-sec li .yourplaninr {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.yourplan-sec li .yourplaninr p {
    margin-bottom: 0;
}

.subcanl {
    margin-bottom: 16px;
}

.subcanl h1 {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}
.subcanl p {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 0;
}
.nochrg-wrap h2,
.whathap-wrap h3,
.stilinwrap h3 {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}
.nochrg-wrap p,
.stilinwrap p {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 0;
}
.aactionbtn-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.subcntent p,
.noready-cnt p {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}
.cnentinfo li {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.advfetur-wrap {
    margin-bottom: 12px;
}
.advfetur-wrap span {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

/* =============================================================================
   TENDZIFY — app-specific UI styles (glass wizard form, tender cards, dashboard
   widgets, dark detail drawers, sticky header). Appended here to keep all
   platform styling in one file. Namespaced by page/component wrappers
   (.new-property, .explore-glass, .dash-glass, .tender-sidebar, .explore-sidebar,
   .admin-nav …) so each rule only applies where its wrapper exists.
   NOTE: the base .tender-sidebar/.explore-sidebar/etc. rule (~line 481) is shared
   by 7 sidebar types; these rules intentionally re-skin ONLY the tender & explore
   drawers rather than editing that shared base.
   ============================================================================= */

/* ----- Sticky / compact top header (was app.blade) ----- */
/* overflow-x:hidden on these ancestors breaks position:sticky.
           overflow-x:clip clips the same way without creating a scroll container. */
body,
#page-content-wrapper {
    overflow-x: clip !important;
}

.admin-nav .side-arrow-btn svg {
    width: 16px;
    height: 14px;
}
.admin-nav .notify-btn,
.admin-nav .new-tender-btn {
    transition:
        transform 0.22s ease,
        padding 0.22s ease,
        font-size 0.22s ease;
}
.admin-nav .new-tender-btn svg {
    transition:
        width 0.22s ease,
        height 0.22s ease;
}
.admin-nav .admin-rgt form,
.admin-nav .admin-rgt .form-group .form-control {
    transition:
        width 0.22s ease,
        max-width 0.22s ease;
}
/* Vertically center the search icon + filter button in the field (both states).
           Stretch the box top-to-bottom and flex-center the SVG so it can never drift. */
.admin-rgt .form-group .filtr-btn {
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    height: auto !important;
    margin: 0 16px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
}
@media (max-width: 575px) {
    .admin-nav {
        padding: 12px 16px !important;
    }
    .admin-lft h1 {
        font-size: 19px !important;
    }
}

/* Collapse is a purely horizontal slide — animate transform (not margin),
           so it doesn't drift down while closing. */
#sidebar-wrapper,
.sidenav-toggled #sidebar-wrapper {
    transition: transform 0.35s ease !important;
}

/* On narrower screens the sidebar's margin/height differ between open & closed,
           which shifts it down-right while sliding. Keep them constant so only the
           horizontal slide animates. */
@media (max-width: 1200px) {
    #sidebar-wrapper,
    .sidenav-toggled #sidebar-wrapper {
        margin: 0 !important;
        height: 100dvh !important;
    }
}

/* ----- Header page title + subtitle (was top-header.blade) ----- */
.admin-lft .admin-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.admin-lft .admin-title-wrap h1 {
    margin: 0;
    line-height: 1.15;
}
.admin-subtitle {
    margin: 3px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}
@media (max-width: 767px) {
    .admin-subtitle {
        display: none;
    }
}

/* ----- Header profile avatar + popover ----- */
.hdr-profile {
    position: relative;
}
.hdr-profile__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        background 0.16s ease;
}
.hdr-profile__btn:hover {
    border-color: rgba(127, 168, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
}
.hdr-profile.is-open .hdr-profile__btn {
    border-color: rgba(127, 168, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(80, 143, 255, 0.2);
}
.hdr-profile__btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hdr-profile__ini {
    color: #cdd8ff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
}

.hdr-profile__pop {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 300px;
    z-index: 1300;
    padding: 10px;
    background: linear-gradient(158deg, #172352 0%, #101a3c 55%, #0c1330 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        visibility 0.16s;
}
.hdr-profile.is-open .hdr-profile__pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.hdr-profile__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.hdr-profile__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.hdr-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hdr-profile__id {
    min-width: 0;
}
.hdr-profile__id h5 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hdr-profile__id p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hdr-profile__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
    transition:
        background 0.14s ease,
        color 0.14s ease;
}
.hdr-profile__item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.hdr-profile__item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.hdr-profile__item svg path {
    stroke: currentColor;
}
.hdr-profile__item--danger {
    color: #ff9b9b;
}
.hdr-profile__item--danger:hover {
    background: rgba(255, 90, 90, 0.12);
    color: #ffb3b3;
}

/* usage meter (unlocks) */
.pf-usage {
    padding: 12px 10px 14px;
}
.pf-usage__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pf-usage__label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.pf-usage__count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #9fb8ff;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.14s ease;
}
.pf-usage__count:hover {
    color: #fff;
}
.pf-usage__count svg {
    width: 14px;
    height: 14px;
}
.pf-usage__count svg path {
    stroke: currentColor;
}
.pf-meter {
    display: flex;
    gap: 5px;
    margin-top: 11px;
}
.pf-dot {
    flex: 1 1 0;
    height: 8px;
    max-width: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
}
.pf-dot.is-on {
    background: linear-gradient(145deg, #7fa8ff, #325feb);
    box-shadow: 0 0 6px rgba(80, 143, 255, 0.55);
}

/* upsell row */
.pf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    transition: background 0.14s ease;
}
.pf-row:hover {
    background: rgba(255, 255, 255, 0.06);
}
.pf-row__ic {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(80, 143, 255, 0.16);
    color: #7fa8ff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-row__ic svg {
    width: 18px;
    height: 18px;
}
.pf-row__ic svg path {
    stroke: currentColor;
}
.pf-row__label {
    flex: 1;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.pf-row__cta {
    background: linear-gradient(145deg, #7fa8ff, #325feb);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 14px -6px rgba(50, 95, 235, 0.8);
}

/* section separator */
.pf-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 4px;
}

/* ----- Create / Edit tender — glass wizard form (was create/edit .blade) ----- */
/* ==========================================================================
   Create Tender — polished form styling (scoped to .new-property).
   auth.css isn't loaded on this layout, so we define the field/label/icon
   styles here and give the whole wizard a cleaner, premium look.
   ========================================================================== */

.new-property {
    --tz-blue: #325feb;
    --tz-blue-soft: #508fff;
    --tz-ink: #071116;
}

/* ---- Card (dark frosted glass) ---- */
.new-property .new-tender-form .auth-form {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: 26px 28px;
    box-shadow:
        0 30px 70px -30px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Tighter column gutters for the two-up rows */
.new-property .auth-form .row {
    --bs-gutter-x: 20px;
}

/* ---- Titles (moved to the top header; hidden in-page) ---- */
.new-property .tender-form-title {
    display: none;
}

/* ---- Stepper (compact, left-aligned, text labels) ---- */
.new-property .form-wizard-header {
    width: 100%;
    margin: 0 0 22px;
    text-align: left;
}
.new-property .form-wizard-header ul {
    margin: 0;
}
.new-property .form-wizard-header ul:before {
    display: none;
} /* remove the connecting bar */
.new-property .form-wizard-steps {
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}
.new-property .form-wizard-header li {
    max-width: none;
    width: auto;
    background: transparent;
    display: inline-flex;
    align-items: center;
    text-align: left;
}
.new-property .form-wizard-header li span {
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    border-radius: 9px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    background: #1c2431;
    color: rgba(255, 255, 255, 0.55);
    box-shadow: none;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.new-property .form-wizard-header li.active span {
    background: var(--tz-blue);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(50, 95, 235, 0.8);
}
.new-property .form-wizard-header li:not(:last-child)::after {
    content: "›";
    margin: 0 4px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 18px;
    font-weight: 700;
}
.new-property .form-wizard-header li.is-reached span {
    cursor: pointer;
}
.new-property .form-wizard-header li:not(.is-reached) span {
    cursor: not-allowed;
    opacity: 0.8;
}

/* ---- Field groups ---- */
.new-property .auth-form .form-group {
    position: relative;
    margin-bottom: 15px;
    width: 100%;
}
.new-property .auth-form .form-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.1px;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.9);
}

/* ---- Inputs / selects / textarea ---- */
.new-property .auth-form .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 11px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    color-scheme: dark;
    height: auto;
    min-height: 46px;
    box-shadow: none;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}
.new-property .auth-form textarea.form-control {
    min-height: 92px;
    resize: vertical;
}
.new-property .auth-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
}
.new-property .auth-form .form-control:hover {
    border-color: rgba(255, 255, 255, 0.34);
    background-color: rgba(255, 255, 255, 0.13);
}
.new-property .auth-form .form-control:focus {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: var(--tz-blue);
    box-shadow: 0 0 0 4px rgba(50, 95, 235, 0.22);
    outline: none;
}
.new-property .auth-form select.form-control {
    cursor: pointer;
}
.new-property .auth-form select.form-control:disabled {
    color: rgba(255, 255, 255, 0.8);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}
/* Disclose-price checkbox */
.new-property .tz-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}
.new-property .tz-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--tz-blue);
    cursor: pointer;
    margin: 0;
}

/* Validation states (jQuery Validate toggles Bootstrap's is-valid / is-invalid) */
.new-property .auth-form .form-control.is-valid {
    border-color: #2fb57a;
    background-position: right 14px center;
    padding-right: 44px;
}
.new-property .auth-form .form-control.is-invalid {
    border-color: #e04b59;
    background-position: right 14px center;
    padding-right: 44px;
}
.new-property .auth-form .form-control.is-valid:focus {
    box-shadow: 0 0 0 4px rgba(47, 181, 122, 0.14);
}
.new-property .auth-form .form-control.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(224, 75, 89, 0.14);
}
.new-property .auth-form small.text-danger {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
}
.new-property .time-validation-error {
    color: #e04b59;
    font-size: 12.5px;
    margin-top: 6px;
}

/* Redundant floating calendar/clock icons — native date/time inputs already
   render their own picker icon, so hide the duplicated (mis-positioned) span. */
.new-property .with-label-icon {
    display: none !important;
}

/* ---- Buttons ---- */
.new-property .wizard_btngrp {
    margin-top: 22px;
    gap: 12px;
    justify-content: flex-end;
}
.new-property .comn-btn {
    padding: 10px 26px;
    border-radius: 11px;
    font-size: 14.5px;
    box-shadow: 0 10px 22px -12px rgba(50, 95, 235, 0.7);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}
.new-property .comn-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -12px rgba(50, 95, 235, 0.8);
}
.new-property .black-btn {
    padding: 10px 26px;
    border-radius: 11px;
    font-size: 14.5px;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease;
}
.new-property .black-btn:hover {
    transform: translateY(-2px);
}

/* ---- Step 2: sub tenders ---- */
.new-property .new-tender-form h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--tz-ink);
}
.new-property .radio-option label {
    border-radius: 14px;
    padding: 14px 20px;
    transition: all 0.16s ease;
}
.new-property .radio-option label:hover {
    border-color: var(--tz-blue);
}

.new-property .sub-tender-card {
    position: relative;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 13px;
    padding: 16px 16px 2px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.05);
}
.new-property .sub-tender-card .sub-index {
    font-weight: 700;
    font-size: 12px;
    color: var(--tz-blue);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
    display: block;
}
.new-property .sub-tender-card .sub-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #fdeef0;
    color: #e04b59;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.new-property .sub-tender-card .sub-remove:hover {
    background: #f9d9dd;
}
.new-property .add-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #cdd8ff;
    border: 1.5px dashed rgba(120, 150, 255, 0.5);
    border-radius: 13px;
    padding: 13px 22px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition:
        background 0.16s ease,
        border-color 0.16s ease;
}
.new-property .add-sub-btn:hover {
    background: rgba(50, 95, 235, 0.16);
    border-color: var(--tz-blue);
}
.new-property .add-sub-btn span {
    font-size: 20px;
    line-height: 1;
}
.new-property .sub-empty-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin: 4px 0 18px;
}

/* Step 3 preview: parent tender card + sub tender cards */
.new-property .tz-struct-block {
    border-top: 1px solid #eef0f5;
    margin-top: 18px;
    padding-top: 18px;
}
.new-property .tz-struct-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--tz-ink);
    margin: 0 0 14px;
}

.new-property .tz-card {
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
}
.new-property .tz-card__body {
    min-width: 0;
}
.new-property .tz-card__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.new-property .tz-card__name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    word-break: break-word;
}

/* Detail rows inside a card */
.new-property .tz-card__rows {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}
.new-property .tz-card__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13.5px;
    line-height: 1.4;
}
.new-property .tz-card__k {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    flex-shrink: 0;
}
.new-property .tz-card__v {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.new-property .tz-card__descblock {
    margin-top: 10px;
}
.new-property .tz-card__descblock .tz-card__k {
    display: block;
    margin-bottom: 2px;
}
.new-property .tz-card__desc {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
    word-break: break-word;
}

/* Parent (glass) */
.new-property .tz-card--parent {
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
}
.new-property .tz-card--parent .tz-card__tag {
    color: var(--tz-blue-soft);
}

/* Sub tenders — indented under parent with a connector accent */
.new-property .tz-subs {
    margin-left: 26px;
    padding-left: 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
}
.new-property .tz-subs:empty {
    display: none;
}
.new-property .tz-subs .tz-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    position: relative;
}
.new-property .tz-subs .tz-card::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 28px;
    width: 18px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
}
.new-property .tz-subs .tz-card__tag {
    color: var(--tz-blue-soft);
}
/* Step 2 editable sub-tender cards nested under the parent node */
.new-property .tz-subs .sub-tender-card {
    position: relative;
}
.new-property .tz-subs .sub-tender-card::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 34px;
    width: 18px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
}
.new-property .tz-struct__empty {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin: 6px 0 0 26px;
}

/* ---- Step 3: preview ---- */
.new-property .step-3 .auth-form h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--tz-ink);
    margin-bottom: 12px;
}
.new-property .tender-srvc {
    border-top: 1px solid #eef0f5;
    margin-top: 18px;
    padding-top: 6px;
}

/* ---- Responsive ---- */
@media (max-width: 575px) {
    .new-property .new-tender-form .auth-form {
        padding: 22px 18px;
    }
    .new-property .tender-form-title h2 {
        font-size: 24px;
    }
    .new-property .form-wizard-header li span {
        font-size: 12px;
        padding: 6px 11px;
    }
}

/* ----- Glass tender cards — My Tenders + Explore (was index/explore .blade) ----- */
/* Explore Tenders — glass cards on the dark background (scoped to this page) */
.explore-glass {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Equal-height cards */
.explore-glass #tender-list {
    align-items: stretch;
}
.explore-glass #tender-list > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}

/* Glass card */
.explore-glass .tender-bx {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 20px;
    box-shadow:
        0 20px 50px -30px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}
.explore-glass .tender-bx:hover {
    transform: translateY(-4px);
    border-color: rgba(120, 150, 255, 0.55);
    box-shadow: 0 28px 62px -28px rgba(0, 0, 0, 0.75);
}

/* Category chip */
.explore-glass .tender-ctgry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.explore-glass .tender-ctgry > span {
    background: rgba(80, 143, 255, 0.18);
    color: #cdd8ff;
    border: 1px solid rgba(120, 150, 255, 0.35);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Body */
.explore-glass .tender-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.explore-glass .tender-body h4 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
}
.explore-glass .tender-body > p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

/* Location + date/time — one lighter panel, pinned to the bottom, left-aligned */
.explore-glass .tendr-adrs {
    margin-top: auto; /* keep the whole meta block at the bottom */
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 12px 14px 8px;
    margin-bottom: 0;
}
.explore-glass .tendr-adrs address {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    margin: 0;
}
.explore-glass .tender-dtls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 8px 14px 12px;
}
.explore-glass .tender-dtls > div {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.explore-glass .tender-dtls > div > span:first-child {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}
.explore-glass .tender-dtls span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}
/* Consistent, left-aligned icons */
.explore-glass .tendr-adrs svg,
.explore-glass .tender-dtls svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Sub badge tuned for the glass card */
.explore-glass .sub-parent-link {
    background: rgba(80, 143, 255, 0.2) !important;
    color: #cdd8ff !important;
    border-color: rgba(120, 150, 255, 0.45) !important;
}

/* (from My Tenders) owner 3-dot menu icon + empty state on the glass */
.explore-glass .ctgry-option > a svg path {
    stroke: rgba(255, 255, 255, 0.7);
}
.explore-glass .col-12 p {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ----- Dashboard glass cards + vendor card (was dashboard.blade) ----- */
/* Dashboard — glass theme (scoped to .dash-glass) */
.dash-glass.white-box {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Section headers */
.dash-glass .vendor-title {
    margin: 6px 0 20px;
}
.dash-glass .vendor-title h2 {
    position: relative;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding-left: 15px;
    margin: 0;
}
.dash-glass .vendor-title h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(180deg, #7fa8ff, #325FEB);
    box-shadow: 0 0 10px rgba(80, 143, 255, 0.7);
}
.dash-glass .vendor-title a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9fb8ff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid rgba(127, 168, 255, 0.3);
    background: rgba(80, 143, 255, 0.1);
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.dash-glass .vendor-title a::after {
    content: '→';
    font-size: 14px;
    line-height: 1;
}
.dash-glass .vendor-title a:hover {
    color: #fff;
    background: rgba(80, 143, 255, 0.22);
    border-color: rgba(127, 168, 255, 0.6);
}

/* Vendor cards */
.dash-glass .venders-bx {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: 18px;
    padding: 16px;
    box-shadow:
        0 20px 50px -30px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}
.dash-glass .venders-bx:hover {
    transform: translateY(-4px);
    border-color: rgba(120, 150, 255, 0.55);
    box-shadow: 0 28px 62px -28px rgba(0, 0, 0, 0.75);
}

/* Blue intro header — richer gradient + polished avatar & contact buttons */
.dash-glass .venders-bx .vender-intro {
    background: linear-gradient(135deg, #4f6bff 0%, #325feb 100%) !important;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 12px 26px -12px rgba(50, 95, 235, 0.7);
}
.dash-glass .venders-bx .vender-img img {
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.dash-glass .venders-bx .vender-dtls h4 {
    color: #fff;
    font-weight: 700;
}
.dash-glass .venders-bx .vender-contct a {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s ease,
        transform 0.15s ease;
}
.dash-glass .venders-bx .vender-contct a:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Body */
.dash-glass .venders-bx .vender-body {
    padding-top: 4px;
}
.dash-glass .venders-bx .vender-body .vendr-exp {
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dash-glass .venders-bx .vender-body .vendr-exp span {
    color: #cdd8ff;
    font-weight: 700;
    background: rgba(80, 143, 255, 0.18);
    border: 1px solid rgba(120, 150, 255, 0.3);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 13px;
}
.dash-glass .venders-bx .vender-body h5 {
    color: #fff;
    margin: 10px 0 10px;
}
.dash-glass .venders-bx .srvc-listing li {
    background: rgba(80, 143, 255, 0.16);
    color: #cdd8ff;
    border: 1px solid rgba(120, 150, 255, 0.3);
    border-radius: 20px;
    padding: 6px 14px;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}
.dash-glass .venders-bx .srvc-listing li:hover {
    background: rgba(80, 143, 255, 0.28);
    border-color: rgba(120, 150, 255, 0.55);
}
.dash-glass .venders-bx .total-srvc {
    background: rgba(80, 143, 255, 0.28);
    color: #cdd8ff;
    border: none;
    border-radius: 20px;
}

/* Tender cards (same glass as Explore) */
.dash-glass .row > [class*="col-"] {
    display: flex;
}
.dash-glass .tender-bx {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 20px;
    box-shadow:
        0 20px 50px -30px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}
.dash-glass .tender-bx:hover {
    transform: translateY(-4px);
    border-color: rgba(120, 150, 255, 0.55);
    box-shadow: 0 28px 62px -28px rgba(0, 0, 0, 0.75);
}
.dash-glass .tender-ctgry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.dash-glass .tender-ctgry > span {
    background: rgba(80, 143, 255, 0.18);
    color: #cdd8ff;
    border: 1px solid rgba(120, 150, 255, 0.35);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.dash-glass .ctgry-option > a svg path {
    stroke: rgba(255, 255, 255, 0.7);
}
.dash-glass .tender-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.dash-glass .tender-body h4 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
}
.dash-glass .tender-body > p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}
.dash-glass .tendr-adrs {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 12px 14px 8px;
    margin-bottom: 0;
}
.dash-glass .tendr-adrs address {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    margin: 0;
}
.dash-glass .tender-dtls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 8px 14px 12px;
}
.dash-glass .tender-dtls > div {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.dash-glass .tender-dtls > div > span:first-child {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}
.dash-glass .tender-dtls span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}
.dash-glass .tendr-adrs svg,
.dash-glass .tender-dtls svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.dash-glass .sub-parent-link {
    background: rgba(80, 143, 255, 0.2) !important;
    color: #cdd8ff !important;
    border-color: rgba(120, 150, 255, 0.45) !important;
}

/* Empty states */
.dash-glass .col-12 p,
.dash-glass .col-12.text-center p {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ----- Dashboard subscription-lock badge (was dashboard.blade) ----- */
.subscription-required {
    opacity: 0.6;
    position: relative;
}

.subscription-required:hover {
    opacity: 0.8;
}

.subscription-required::after {
    content: "🔒";
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 10px;
    background: #ff6b6b;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

/* ----- Detail drawer: My Tenders (was tender-sidebar.blade) ----- */
/* ===== Dark themed, eye-popping My Tenders detail drawer ===== */
.tender-sidebar {
    background:
        radial-gradient(
            130% 55% at 100% 0%,
            rgba(80, 143, 255, 0.3),
            transparent 62%
        ),
        radial-gradient(
            120% 55% at 0% 100%,
            rgba(50, 95, 235, 0.22),
            transparent 60%
        ),
        linear-gradient(158deg, #172352 0%, #101a3c 50%, #0c1330 100%) !important;
    color: #eef2ff;
    border-top-left-radius: 28px !important;
    border-bottom-left-radius: 28px !important;
    border: none !important;
    box-shadow: -24px 0 70px -20px rgba(70, 90, 230, 0.45) !important;
    padding-bottom: 16px !important;
}
.tender-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px 0 0 28px;
    padding: 2px 0 2px 2px;
    background: linear-gradient(155deg, #7fa8ff 0%, #508fff 50%, #325feb 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 12px rgba(80, 143, 255, 0.7));
}
.tender-sidebar .sidebar-title {
    padding: 24px 30px 18px !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tender-sidebar .sidebar-title h3 {
    color: #fff;
    margin: 0;
}
.tender-sidebar .sidebar-close svg path {
    stroke: #fff !important;
}
.tender-sidebar .tender-sidebar-dtls {
    padding: 8px 30px 14px !important;
}
.tender-sidebar h4,
.tender-sidebar h5,
.tender-sidebar h6,
.tender-sidebar #tenderName {
    color: #fff;
}
.tender-sidebar #tenderName {
    font-size: 21px;
    line-height: 1.35;
    margin: 6px 0 16px;
}
.tender-sidebar .tendr-adrs {
    margin-bottom: 8px;
}
.tender-sidebar .tendr-adrs address,
.tender-sidebar .tender-dtls span,
.tender-sidebar #tenderDate,
.tender-sidebar #tenderTime {
    color: rgba(255, 255, 255, 0.82);
}
.tender-sidebar .tender-dtls {
    margin-bottom: 20px;
}
.tender-sidebar .tender-descript {
    margin-top: 18px;
}
.tender-sidebar .tender-descript h5 {
    margin-bottom: 8px;
}
.tender-sidebar .tender-descript p,
.tender-sidebar #tenderDescription {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}
/* Description panel + show more */
.tender-sidebar .desc-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 15px 17px;
}
.tender-sidebar .desc-text {
    margin: 0 !important;
}
.tender-sidebar .desc-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tender-sidebar .desc-toggle {
    background: none;
    border: none;
    color: #7fa8ff;
    font-weight: 600;
    font-size: 13px;
    padding: 0;
    margin-top: 10px;
    cursor: pointer;
}
.tender-sidebar .desc-toggle:hover {
    color: #fff;
}
/* Detail rows */
.tender-sidebar .tender-srvc li {
    border-color: rgba(255, 255, 255, 0.08) !important;
    padding: 12px 0;
}
.tender-sidebar .tender-srvc li p:first-child {
    color: rgba(255, 255, 255, 0.5);
}
.tender-sidebar .tender-srvc li p:last-child {
    color: #fff;
    font-weight: 600;
}
/* Sub tenders (dark) */
.tz-subtenders {
    margin-top: 22px;
}
.tender-sidebar .tz-subtenders > h5 {
    color: #fff;
    margin-bottom: 12px;
}
.tender-sidebar .tz-subtenders .tz-sub-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.tender-sidebar .tz-subtenders .tz-sub-item__name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    word-break: break-word;
}
.tender-sidebar .tz-subtenders .tz-sub-item__row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    line-height: 1.5;
}
.tender-sidebar .tz-subtenders .tz-sub-item__k {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}
.tender-sidebar .tz-subtenders .tz-sub-item__v {
    color: #fff;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.tender-sidebar .tz-subtenders .tz-sub-item__desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 6px 0 0;
    word-break: break-word;
}
/* Chips / bid form / tabs / quotes */
.tender-sidebar #tenderServices span {
    background: rgba(80, 143, 255, 0.2);
    color: #cdd8ff;
    border: 1px solid rgba(120, 150, 255, 0.35);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}
.tender-sidebar .form-group label,
.tender-sidebar .sidebar-form label {
    color: rgba(255, 255, 255, 0.85);
}
.tender-sidebar .form-control {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    color-scheme: dark;
    border-radius: 11px;
}
.tender-sidebar .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.tender-sidebar .form-control:focus {
    border-color: #325feb !important;
    box-shadow: 0 0 0 4px rgba(50, 95, 235, 0.2) !important;
}
.tender-sidebar .nav-pills .nav-link {
    color: rgba(255, 255, 255, 0.6);
    border-radius: 9px;
}
.tender-sidebar .nav-pills .nav-link.active {
    background: #325feb;
    color: #fff;
}
.tender-sidebar .rcv-quote-items {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.tender-sidebar .rcv-quote-items h6 {
    color: rgba(255, 255, 255, 0.65);
}
.tender-sidebar .rcv-quote-items p {
    color: #fff;
}
.tender-sidebar .text-muted {
    color: rgba(255, 255, 255, 0.45) !important;
}
.tender-sidebar .no-quotes-message,
.tender-sidebar .no-quotes-message p {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ----- Detail drawer: Explore (was explore-tender-sidebar.blade) ----- */
.parent-tender-box {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef2ff;
    border: 1px solid #dbe3ff;
}
.parent-tender-box__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6b7bb5;
    margin-bottom: 4px;
}
.parent-tender-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #325feb;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}
.parent-tender-open:hover {
    color: #1f47c9;
}
.parent-tender-open svg {
    flex-shrink: 0;
}

.tz-subtenders > h5 {
    font-size: 15px;
    font-weight: 700;
    color: #071116;
    margin-bottom: 12px;
}
.tz-sub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #e7e9f1;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #f8f9fc;
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}
.tz-sub-link:hover {
    border-color: #325feb;
    background: #eef2ff;
}
.tz-sub-link__main {
    min-width: 0;
}
.tz-sub-link__name {
    font-size: 14px;
    font-weight: 700;
    color: #071116;
    margin: 0;
    word-break: break-word;
}
.tz-sub-link__price {
    font-size: 12.5px;
    color: #9fb0e6;
    font-weight: 600;
    margin: 2px 0 0;
}
.tz-sub-link > svg {
    flex-shrink: 0;
    color: #7f9cff;
}

/* ===== Dark themed, eye-popping detail drawer ===== */
.explore-sidebar {
    background:
        radial-gradient(
            130% 55% at 100% 0%,
            rgba(80, 143, 255, 0.3),
            transparent 62%
        ),
        radial-gradient(
            120% 55% at 0% 100%,
            rgba(50, 95, 235, 0.22),
            transparent 60%
        ),
        linear-gradient(158deg, #172352 0%, #101a3c 50%, #0c1330 100%) !important;
    color: #eef2ff;
    border-top-left-radius: 28px !important;
    border-bottom-left-radius: 28px !important;
    border: none !important;
    box-shadow: -24px 0 70px -20px rgba(70, 90, 230, 0.45) !important;
    padding-bottom: 16px !important;
}
/* Gradient glowing border on the visible edges (top, left, bottom) — no right edge */
.explore-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px 0 0 28px;
    padding: 2px 0 2px 2px; /* border thickness — right = 0 */
    background: linear-gradient(155deg, #7fa8ff 0%, #508fff 50%, #325feb 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 12px rgba(80, 143, 255, 0.7));
}
/* Roomier layout + clear separation between the title bar and content */
.explore-sidebar .sidebar-title {
    padding: 24px 30px 18px !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.explore-sidebar .tender-sidebar-dtls {
    padding: 8px 30px 14px !important;
}
.explore-sidebar .sidebar-title h3 {
    color: #fff;
    margin: 0;
}
.explore-sidebar .sidebar-close svg path {
    stroke: #fff !important;
}
.explore-sidebar h4,
.explore-sidebar h5,
.explore-sidebar h6,
.explore-sidebar #tenderName {
    color: #fff;
}
.explore-sidebar #tenderName {
    font-size: 21px;
    line-height: 1.35;
    margin: 6px 0 16px;
}
/* A touch more air between sections */
.explore-sidebar .tendr-adrs {
    margin-bottom: 8px;
}
.explore-sidebar .tender-dtls {
    margin-bottom: 20px;
}
.explore-sidebar .tender-descript {
    margin-top: 18px;
}
.explore-sidebar .tender-descript h5 {
    margin-bottom: 8px;
}
.explore-sidebar .tender-descript p,
.explore-sidebar #tenderDescription {
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}
/* Description panel + show more/less */
.explore-sidebar .desc-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 15px 17px;
}
.explore-sidebar .desc-text {
    margin: 0 !important;
}
.explore-sidebar .desc-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.explore-sidebar .desc-toggle {
    background: none;
    border: none;
    color: #7fa8ff;
    font-weight: 600;
    font-size: 13px;
    padding: 0;
    margin-top: 10px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.explore-sidebar .desc-toggle:hover {
    color: #fff;
}
.explore-sidebar .tender-srvc {
    margin-top: 6px;
}
.explore-sidebar .tender-srvc li {
    padding: 12px 0;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Parent tender banner */
.explore-sidebar .parent-tender-box {
    background: rgba(80, 143, 255, 0.14);
    border-color: rgba(120, 150, 255, 0.32);
}
.explore-sidebar .parent-tender-box__label {
    color: #9fb0e6;
}
.explore-sidebar .parent-tender-open {
    color: #cdd8ff;
}
.explore-sidebar .parent-tender-open:hover {
    color: #fff;
}

/* Location / date / time */
.explore-sidebar .tendr-adrs address,
.explore-sidebar .tender-dtls span,
.explore-sidebar #tenderDate,
.explore-sidebar #tenderTime {
    color: rgba(255, 255, 255, 0.82);
}

/* Detail rows (Category / Sub Category / Guest count / Type) */
.explore-sidebar .tender-srvc li p:first-child {
    color: rgba(255, 255, 255, 0.5);
}
.explore-sidebar .tender-srvc li p:last-child {
    color: #fff;
    font-weight: 600;
}

/* Sub tender navigable cards (dark) */
.explore-sidebar .tz-subtenders > h5 {
    color: #fff;
}
.explore-sidebar .tz-sub-link {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}
.explore-sidebar .tz-sub-link:hover {
    background: rgba(80, 143, 255, 0.16);
    border-color: rgba(120, 150, 255, 0.5);
}
.explore-sidebar .tz-sub-link__name {
    color: #fff;
}

/* Service / misc chips */
.explore-sidebar #tenderServices span {
    background: rgba(80, 143, 255, 0.2);
    color: #cdd8ff;
    border: 1px solid rgba(120, 150, 255, 0.35);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}

/* Bid form + inputs */
.explore-sidebar .form-group label,
.explore-sidebar .sidebar-form label {
    color: rgba(255, 255, 255, 0.85);
}
.explore-sidebar .form-control {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    color-scheme: dark;
    border-radius: 11px;
}
.explore-sidebar .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.explore-sidebar .form-control:focus {
    border-color: #325feb !important;
    box-shadow: 0 0 0 4px rgba(50, 95, 235, 0.2) !important;
}

/* Tabs */
.explore-sidebar .nav-pills .nav-link {
    color: rgba(255, 255, 255, 0.6);
    border-radius: 9px;
}
.explore-sidebar .nav-pills .nav-link.active {
    background: #325feb;
    color: #fff;
}

/* Received quotes / bid items */
.explore-sidebar .rcv-quote-items {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.explore-sidebar .rcv-quote-items h6 {
    color: rgba(255, 255, 255, 0.65);
}
.explore-sidebar .rcv-quote-items p {
    color: #fff;
}
.explore-sidebar .text-muted {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* =============================================================================
   Compact header — this IS the default look now (the old "scrolled" design,
   applied permanently via the .is-scrolled class hardcoded on .admin-nav).
   ============================================================================= */
.admin-nav.is-scrolled {
    padding: 6px 0px !important;
    background: #03080e url("/assets/web/images/main-bg.png") no-repeat top
        center fixed !important;
    background-size: cover !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.admin-nav.is-scrolled .admin-lft h1 {
    font-size: 17px !important;
}
.admin-nav.is-scrolled .notify-btn {
    transform: scale(0.78);
}
.admin-nav.is-scrolled .new-tender-btn {
    padding: 7px 14px !important;
    font-size: 13px !important;
}
.admin-nav.is-scrolled .new-tender-btn svg {
    width: 18px !important;
    height: 18px !important;
}
.admin-nav.is-scrolled .admin-rgt form {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
.admin-nav.is-scrolled .admin-rgt .form-group {
    width: 220px !important;
    max-width: 220px !important;
}
.admin-nav.is-scrolled .admin-rgt .form-group .form-control {
    width: 220px !important;
    max-width: 220px !important;
    padding: 8px 12px 8px 40px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
}
.admin-nav.is-scrolled .admin-rgt .form-group span {
    margin: 0 0 0 12px !important;
}
.admin-nav.is-scrolled .admin-rgt .form-group span svg {
    width: 18px !important;
    height: 18px !important;
}

/* =============================================================================
   Mobile bottom tab bar (hidden on desktop; shown <= 991px)
   ============================================================================= */
.m-tabbar { display: none; }
@media (max-width: 991px) {
    .m-tabbar {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        background: rgba(10, 16, 38, 0.92);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.6);
    }
    .m-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 6px 0;
        color: rgba(255, 255, 255, 0.55);
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
    }
    .m-tab svg {
        width: 23px;
        height: 23px;
    }
    .m-tab svg path,
    .m-tab svg rect {
        stroke: currentColor;
    }
    .m-tab.active {
        color: #7fa8ff;
    }
    .m-tab--center {
        flex: 0 0 auto;
    }
    .m-tab__fab {
        width: 58px;
        height: 58px;
        margin-top: -26px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, #7fa8ff, #325FEB);
        box-shadow: 0 12px 26px -6px rgba(50, 95, 235, 0.85);
        border: 4px solid #0a1024;
    }
    .m-tab__fab svg {
        width: 26px;
        height: 26px;
    }
    .m-tab__fab svg path {
        stroke: #fff;
    }
    /* keep page content clear of the fixed bar */
    #page-content-wrapper {
        padding-bottom: 84px;
    }
    /* New Tender lives in the bottom tab bar on mobile — hide the header one */
    .admin-nav .new-tender-btn {
        display: none !important;
    }
}

/* =============================================================================
   Tender status — badge on cards + quick-change select in the 3-dot menu
   ============================================================================= */
.tender-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tender-status-badge {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.4;
}
.tender-status-badge.is-published {
    background: rgba(52, 199, 123, 0.16);
    color: #58d69a;
    border-color: rgba(52, 199, 123, 0.3);
}
.tender-status-badge.is-draft {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.18);
}
.tender-status-badge.is-closed {
    background: rgba(255, 138, 96, 0.16);
    color: #ffab84;
    border-color: rgba(255, 138, 96, 0.32);
}
.tender-status-badge.is-archived {
    background: rgba(150, 160, 200, 0.14);
    color: #aeb7d6;
    border-color: rgba(150, 160, 200, 0.28);
}

/* quick status change inside the white 3-dot dropdown */
.dropdown-status {
    padding: 9px 12px 11px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.dropdown-status__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dropdown-status__select {
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 13px;
    background: #fff;
    color: #071116;
    cursor: pointer;
}

/* expiry hint under the create/edit date field (dark glass form) */
.tz-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* =============================================================================
   My Tenders — status filter tabs
   ============================================================================= */
.tz-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.tz-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.tz-status-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.tz-status-tab__count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}
.tz-status-tab.active {
    color: #fff;
    background: linear-gradient(145deg, #508FFF, #325FEB);
    border-color: transparent;
    box-shadow: 0 10px 22px -10px rgba(50, 95, 235, 0.8);
}
.tz-status-tab.active .tz-status-tab__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
/* subtle accent dot per status when inactive */
.tz-status-tab--published:not(.active) .tz-status-tab__count { color: #58d69a; }
.tz-status-tab--draft:not(.active) .tz-status-tab__count { color: rgba(255,255,255,0.7); }
.tz-status-tab--closed:not(.active) .tz-status-tab__count { color: #ffab84; }
.tz-status-tab--archived:not(.active) .tz-status-tab__count { color: #aeb7d6; }

/* =============================================================================
   AI Tender Builder — top-right button + side chat panel
   ============================================================================= */
.new-property { position: relative; }

.tz-ai-generate {
    position: absolute;
    top: 24px;
    right: 26px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid rgba(127, 168, 255, 0.5);
    background: linear-gradient(145deg, rgba(80, 143, 255, 0.92), rgba(50, 95, 235, 0.96));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(50, 95, 235, 0.8);
    transition: filter 0.16s ease, transform 0.16s ease;
}
.tz-ai-generate:hover { filter: brightness(1.08); transform: translateY(-1px); }

.tz-ai-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 8, 14, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 1190;
}
.tz-ai-overlay.is-open { opacity: 1; visibility: visible; }

.tz-ai-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 92vw;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: linear-gradient(158deg, #141f45 0%, #0e1734 55%, #0b1026 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -24px 0 70px -20px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.5, 1, 0.5, 1);
}
.tz-ai-panel.is-open { transform: translateX(0); }
.tz-ai-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tz-ai-panel__head h4 { color: #fff; font-size: 17px; font-weight: 700; margin: 0 0 3px; }
.tz-ai-panel__head p { color: rgba(255, 255, 255, 0.55); font-size: 12.5px; margin: 0; }
.tz-ai-close { background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.tz-ai-close:hover { color: #fff; }

.tz-ai-log { flex: 1; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 12px; }
.tz-ai-msg { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-break: break-word; }
.tz-ai-msg--bot { align-self: flex-start; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border-bottom-left-radius: 4px; }
.tz-ai-msg--user { align-self: flex-end; background: linear-gradient(145deg, #508FFF, #325FEB); color: #fff; border-bottom-right-radius: 4px; }
.tz-ai-msg em { color: #cdd8ff; font-style: italic; }

.tz-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 6px;
}
.tz-ai-chips:empty { display: none; }
.tz-ai-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(127, 168, 255, 0.35);
    color: #cdd8ff;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.tz-ai-chip:hover {
    background: rgba(80, 143, 255, 0.2);
    border-color: rgba(127, 168, 255, 0.7);
    color: #fff;
}
.tz-ai-input { display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
.tz-ai-input textarea { flex: 1; resize: none; max-height: 120px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; color: #fff; padding: 11px 14px; font-size: 14px; line-height: 1.4; }
.tz-ai-input textarea:focus { outline: none; border-color: rgba(127, 168, 255, 0.7); }
.tz-ai-send { flex-shrink: 0; width: 44px; height: 44px; border: none; border-radius: 12px; background: linear-gradient(145deg, #508FFF, #325FEB); color: #fff; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(50, 95, 235, 0.8); }
.tz-ai-send:disabled { opacity: 0.5; cursor: wait; }

/* On wide screens, shift the form left so the panel sits beside it (not over it). */
@media (min-width: 1200px) {
    .new-property.tz-ai-shifted { margin-right: 420px; transition: margin-right 0.3s ease; }
}
/* Small screens: the top-right button becomes a normal inline button. */
@media (max-width: 767px) {
    .tz-ai-generate { position: static; margin: 0 0 14px; width: 100%; justify-content: center; }
}

/* =============================================================================
   Dashboard stat cards — glass tiles with per-metric accent + count-up
   ============================================================================= */
.tz-stat {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    padding: 22px 22px 20px;
    margin-bottom: 24px;
    min-height: 172px;
    height: calc(100% - 24px);
    background:
        radial-gradient(120% 85% at 100% 0%, var(--tz-stat-glow), transparent 60%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 46px -26px rgba(0, 0, 0, 0.7);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tz-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tz-stat-accent), transparent 80%);
    opacity: 0.9;
}
.tz-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 60px -26px var(--tz-stat-shadow);
    border-color: var(--tz-stat-border);
}
.tz-stat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.tz-stat__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tz-stat-tile);
    flex-shrink: 0;
}
.tz-stat__icon svg { width: 24px; height: 24px; }
.tz-stat__icon svg path { fill: var(--tz-stat-accent); }
.tz-stat__num {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.02em;
    margin-top: auto;
}
.tz-stat__num--text {
    font-size: 25px;
    text-transform: capitalize;
}
.tz-stat__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}
.tz-stat__foot {
    margin-top: 10px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.45);
}
.tz-stat__foot--ok { color: #58d69a; }
.tz-stat__bar {
    margin-top: 14px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.tz-stat__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tz-stat-accent), rgba(255, 255, 255, 0.15));
}
.tz-stat__hint {
    margin-top: 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
}
.tz-stat__hint--ok { color: #58d69a; }

.tz-stat--blue  { --tz-stat-accent: #7fa8ff; --tz-stat-tile: rgba(80, 143, 255, 0.16);  --tz-stat-glow: rgba(80, 143, 255, 0.22);  --tz-stat-shadow: rgba(50, 95, 235, 0.5);  --tz-stat-border: rgba(127, 168, 255, 0.45); }
.tz-stat--green { --tz-stat-accent: #58d69a; --tz-stat-tile: rgba(52, 199, 123, 0.16);  --tz-stat-glow: rgba(52, 199, 123, 0.20);  --tz-stat-shadow: rgba(52, 199, 123, 0.45); --tz-stat-border: rgba(88, 214, 154, 0.45); }
.tz-stat--amber { --tz-stat-accent: #ffb072; --tz-stat-tile: rgba(255, 138, 96, 0.16);  --tz-stat-glow: rgba(255, 138, 96, 0.20);  --tz-stat-shadow: rgba(255, 138, 96, 0.4);  --tz-stat-border: rgba(255, 176, 114, 0.45); }
.tz-stat--plan  { --tz-stat-accent: #c0aaff; --tz-stat-tile: rgba(167, 139, 250, 0.18); --tz-stat-glow: rgba(167, 139, 250, 0.24); --tz-stat-shadow: rgba(124, 58, 237, 0.5);  --tz-stat-border: rgba(192, 170, 255, 0.5); }

/* =============================================================================
   Dashboard welcome hero
   ============================================================================= */
.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 24px 28px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 160% at 100% 0%, rgba(80, 143, 255, 0.22), transparent 55%),
        radial-gradient(80% 140% at 0% 100%, rgba(50, 95, 235, 0.16), transparent 60%),
        linear-gradient(158deg, #16234f 0%, #0e1734 60%, #0b1026 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px -30px rgba(10, 20, 70, 0.7);
}
.dash-hero__date {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7fa8ff;
    margin-bottom: 6px;
}
.dash-hero__title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.dash-hero__sub {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.dash-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 22px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(145deg, #508FFF, #325FEB);
    box-shadow: 0 14px 28px -10px rgba(50, 95, 235, 0.85);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.dash-hero__cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -10px rgba(50, 95, 235, 1);
}
/* hero highlight (stat ring + plan badge) */
.dash-hero__hl {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    padding: 14px 20px 14px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(6px);
}
.dash-hero__ring {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-hero__ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -90deg, #6ea0ff, #8b7bff calc(var(--pct, 0) * 1%), rgba(255, 255, 255, 0.09) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
    filter: drop-shadow(0 0 10px rgba(110, 160, 255, 0.45));
}
.dash-hero__ring-num { font-size: 30px; font-weight: 800; color: #fff; line-height: 1; }
.dash-hero__ring-cap {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}
.dash-hero__hl-meta { display: flex; flex-direction: column; gap: 9px; }
.dash-hero__plan {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, rgba(139, 123, 255, 0.28), rgba(110, 160, 255, 0.12));
    border: 1px solid rgba(139, 123, 255, 0.4);
}
.dash-hero__plan svg { width: 15px; height: 15px; color: #c7a3ff; }
.dash-hero__hl-line { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.dash-hero__hl-line b { color: #fff; font-weight: 700; }

@media (max-width: 575px) {
    .dash-hero { padding: 20px; }
    .dash-hero__title { font-size: 23px; }
    .dash-hero__cta { width: 100%; justify-content: center; }
    .dash-hero__hl { width: 100%; justify-content: center; }
}

/* ----- Dashboard: extra insight accents + panels ----- */
.tz-stat--cyan   { --tz-stat-accent: #5fd0e0; --tz-stat-tile: rgba(95, 208, 224, 0.16); --tz-stat-glow: rgba(95, 208, 224, 0.20); --tz-stat-shadow: rgba(45, 170, 190, 0.4);  --tz-stat-border: rgba(95, 208, 224, 0.45); }
.tz-stat--pink   { --tz-stat-accent: #f78fb3; --tz-stat-tile: rgba(247, 143, 179, 0.16); --tz-stat-glow: rgba(247, 143, 179, 0.20); --tz-stat-shadow: rgba(214, 83, 126, 0.4);  --tz-stat-border: rgba(247, 143, 179, 0.45); }
.tz-stat--violet { --tz-stat-accent: #c0aaff; --tz-stat-tile: rgba(167, 139, 250, 0.18); --tz-stat-glow: rgba(167, 139, 250, 0.22); --tz-stat-shadow: rgba(124, 58, 237, 0.45); --tz-stat-border: rgba(192, 170, 255, 0.5); }

.tz-panel {
    padding: 24px 26px;
    margin-bottom: 24px;
    height: 100%;
    border-radius: 18px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(80, 143, 255, 0.14), transparent 60%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 46px -26px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(16px);
}
.tz-panel .vendor-title { margin: 0 0 20px; }

/* status breakdown */
.tz-breakdown { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.tz-breakdown li { display: flex; align-items: center; gap: 12px; }
.tz-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tz-dot--pub { background: #58d69a; }
.tz-dot--draft { background: #aeb7d6; }
.tz-dot--closed { background: #ffab72; }
.tz-dot--arch { background: #8a94b8; }
.tz-bk-label { width: 84px; flex-shrink: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.75); }
.tz-bk-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tz-bk-bar span { display: block; height: 100%; border-radius: 999px; }
.tz-bk-fill--pub { background: #58d69a; }
.tz-bk-fill--draft { background: #aeb7d6; }
.tz-bk-fill--closed { background: #ffab72; }
.tz-bk-fill--arch { background: #8a94b8; }
.tz-bk-count { width: 34px; text-align: right; font-weight: 700; color: #fff; font-size: 14px; }

/* recent activity */
.tz-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tz-activity li { display: flex; align-items: center; gap: 12px; }
.tz-activity__ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(167, 139, 250, 0.16); color: #c0aaff; }
.tz-activity__ic svg { width: 18px; height: 18px; }
.tz-activity__ic svg path { fill: currentColor; }
.tz-activity__body { min-width: 0; }
.tz-activity__name { margin: 0; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-activity__time { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.tz-empty { color: rgba(255, 255, 255, 0.5); font-size: 14px; margin: 10px 0; }

/* ----- Dashboard: empty state + panel polish ----- */
.tz-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 26px 16px;
    min-height: 150px;
}
.tz-empty-state__ic {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(167, 139, 250, 0.14);
    color: #c0aaff;
    margin-bottom: 14px;
}
.tz-empty-state__ic svg { width: 26px; height: 26px; }
.tz-empty-state__ic svg path { fill: currentColor; }
.tz-empty-state__title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #fff; }
.tz-empty-state__sub { font-size: 13px; color: rgba(255, 255, 255, 0.5); max-width: 260px; }

/* breakdown bar: a touch taller with a soft accent glow */
.tz-bk-bar { height: 9px; }
.tz-bk-fill--pub    { box-shadow: 0 0 10px -2px #58d69a; }
.tz-bk-fill--closed { box-shadow: 0 0 10px -2px #ffab72; }

/* ----- Dashboard: 4th accent + force panel glass over .dash-glass ----- */
.tz-stat--sky { --tz-stat-accent: #6fb2ff; --tz-stat-tile: rgba(111, 178, 255, 0.16); --tz-stat-glow: rgba(111, 178, 255, 0.20); --tz-stat-shadow: rgba(50, 120, 235, 0.45); --tz-stat-border: rgba(111, 178, 255, 0.45); }

/* .white-box.dash-glass sets its own (subtle) bg — raise specificity so panels read as cards */
.white-box.dash-glass.tz-panel {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(80, 143, 255, 0.15), transparent 60%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 20px 46px -26px rgba(0, 0, 0, 0.8) !important;
    padding: 24px 26px !important;
}
/* feed panel keeps flush padding so its header bar reaches the edges */
.white-box.dash-glass.tz-panel.tz-feed-panel { padding: 0 !important; }

.tz-title-flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* =============================================================================
   Custom dropdown (.tz-dd) — reusable dark-glass select replacement
   ============================================================================= */
.tz-dd { position: relative; display: inline-block; }
.tz-dd__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #dfe7ff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.tz-dd__toggle:hover { border-color: rgba(110, 160, 255, 0.55); background: rgba(110, 160, 255, 0.12); }
.tz-dd.is-open .tz-dd__toggle {
    border-color: rgba(110, 160, 255, 0.75);
    box-shadow: 0 0 0 3px rgba(80, 143, 255, 0.16);
}
.tz-dd__chev { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.55); transition: transform 0.22s ease; flex-shrink: 0; }
.tz-dd.is-open .tz-dd__chev { transform: rotate(180deg); color: #9fb8ff; }
.tz-dd__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    list-style: none;
    margin: 0;
    padding: 6px;
    z-index: 70;
    background: linear-gradient(158deg, #1a2a58 0%, #111a3a 70%, #0d1430 100%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    box-shadow: 0 26px 55px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(80, 143, 255, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.tz-dd.is-open .tz-dd__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.tz-dd__opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.tz-dd__opt::before {
    content: '';
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237fa8ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    opacity: 0;
    transition: opacity 0.15s ease;
}
.tz-dd__opt:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.tz-dd__opt.is-selected { color: #fff; background: rgba(110, 160, 255, 0.15); }
.tz-dd__opt.is-selected::before { opacity: 1; }

/* =============================================================================
   select2 (single) — themed to match the dark-glass dropdowns
   ============================================================================= */
.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 40px 0 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(110, 160, 255, 0.75);
    box-shadow: 0 0 0 3px rgba(80, 143, 255, 0.16);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #dfe7ff;
    font-size: 14px;
    font-weight: 500;
    line-height: 44px;
    padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(255, 255, 255, 0.45); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -10px;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb8ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    transition: transform 0.2s ease;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(180deg); }
.select2-container--default .select2-selection--single[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

.select2-dropdown {
    background: linear-gradient(158deg, #1a2a58 0%, #111a3a 70%, #0d1430 100%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    box-shadow: 0 26px 55px -18px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    z-index: 9999;
}
.select2-container--open .select2-dropdown--below { margin-top: 6px; border-radius: 14px; }
.select2-container--open .select2-dropdown--above { margin-bottom: 6px; border-radius: 14px; }
.select2-search--dropdown { padding: 8px 8px 4px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    color: #fff;
    padding: 8px 11px;
    outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: rgba(110, 160, 255, 0.7); }
.select2-container--default .select2-results__options { padding: 4px; max-height: 260px; }
.select2-container--default .select2-results__option {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 9px;
    transition: background 0.12s ease, color 0.12s ease;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted { background: rgba(255, 255, 255, 0.08); color: #fff; }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected { background: rgba(110, 160, 255, 0.16); color: #fff; }

/* equal-height bottom panels (tender status / recent unlocks) */
.tz-eq-panels > [class*="col-"] { display: flex; }
.tz-eq-panels > [class*="col-"] > .tz-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 260px;
}
.tz-eq-panels .tz-empty-state { margin: auto; }
.tz-eq-panels .tz-breakdown,
.tz-eq-panels .tz-activity { margin-top: 4px; }

/* today's activity feed (structured cards, reference style) */
.tz-feed-panel { display: flex; flex-direction: column; height: 100%; min-height: 420px; padding-top: 0 !important; overflow: hidden; }
.tz-feed-panel__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -1px -1px 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #3f6fe0, #2f57c9);
    border-radius: 18px 18px 0 0;
}
.tz-feed-panel__bar h2 { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.tz-feed-panel__ic {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.tz-feed-panel__ic svg { width: 15px; height: 15px; }
.tz-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
}
.tz-feed-panel > .tz-empty-state { padding: 10px 24px 28px; }
.tz-feed::-webkit-scrollbar { width: 5px; }
.tz-feed::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
.tz-feed__item {
    position: relative;
    flex: 0 0 auto;
    padding: 12px 14px 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.tz-feed__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #508fff; }
.tz-feed__item--created::before { background: #508fff; }
.tz-feed__item--quote::before { background: #58d6b0; }
.tz-feed__item--unlock::before { background: #c79bff; }
.tz-feed__head {
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
}
.tz-feed__item--created .tz-feed__head { color: #8fb2ff; }
.tz-feed__item--quote .tz-feed__head { color: #6fdcbc; }
.tz-feed__item--unlock .tz-feed__head { color: #cca7ff; }
.tz-feed__row { margin: 0 0 3px; font-size: 12px; line-height: 1.45; }
.tz-feed__row:last-child { margin-bottom: 0; }
.tz-feed__label { color: rgba(255, 255, 255, 0.45); font-weight: 500; }
.tz-feed__val { color: rgba(255, 255, 255, 0.85); font-weight: 600; }

/* On desktop, cap the activity rail to the left column height (calendar bottom)
   so it scrolls internally instead of running past the calendar. */
@media (min-width: 1200px) {
    .tz-dash-side { position: relative; }
    .tz-dash-side > .tz-feed-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        min-height: 0;
    }
}

/* upcoming deadlines agenda */
.tz-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tz-agenda li { display: flex; align-items: center; gap: 14px; }
.tz-agenda__date {
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 138, 96, 0.14);
    border: 1px solid rgba(255, 138, 96, 0.28);
    line-height: 1;
}
.tz-agenda__date b { font-size: 18px; font-weight: 800; color: #ffb072; }
.tz-agenda__date span { font-size: 11px; font-weight: 600; text-transform: uppercase; color: rgba(255, 176, 114, 0.8); margin-top: 2px; }
.tz-agenda__body { min-width: 0; }
.tz-agenda__name { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-agenda__time { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }

/* =============================================================================
   Vendor priority badges + invite button/chip + invitations inbox
   ============================================================================= */
.tz-vbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.tz-vbadge svg { width: 11px; height: 11px; }
.tz-vbadge--enterprise { color: #dfe6f5; background: rgba(214, 224, 245, 0.14); border: 1px solid rgba(214, 224, 245, 0.4); }
.tz-vbadge--premium { color: #9fc0ff; background: rgba(80, 143, 255, 0.16); border: 1px solid rgba(80, 143, 255, 0.44); }

/* ---- Vendor card — cohesive dark surface with an accent spine (design B) ---- */
.venders-bx {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 16px 16px 18px !important;
}
/* kill the bright blue header — avatar + name sit on the dark card */
.venders-bx .vender-intro,
.dash-glass .venders-bx .vender-intro {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 14px 0 !important;
    margin: 0 0 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.venders-bx .vender-dtls h4,
.dash-glass .venders-bx .vender-dtls h4 { color: #fff !important; }
.venders-bx .vender-img img,
.dash-glass .venders-bx .vender-img img {
    border: 2px solid rgba(120, 150, 255, 0.45) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
/* light body text (matters on the Top Vendors page base card) */
.venders-bx .vender-body h5 { color: #fff !important; }
.venders-bx .vendr-exp { color: rgba(255, 255, 255, 0.7) !important; }
.venders-bx .srvc-listing li {
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* accent spine for Premium / Enterprise */
.venders-bx.tz-vip { position: relative; }
.venders-bx.tz-vip--premium {
    border-color: rgba(110, 160, 255, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(110, 160, 255, 0.22), 0 20px 48px -20px rgba(80, 120, 255, 0.75) !important;
}
.venders-bx.tz-vip--enterprise {
    border-color: rgba(110, 160, 255, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(110, 160, 255, 0.22), 0 20px 48px -20px rgba(80, 120, 255, 0.75) !important;
}
.venders-bx.tz-vip:hover {
    box-shadow: 0 0 0 1px rgba(110, 160, 255, 0.3), 0 26px 58px -20px rgba(80, 120, 255, 0.9) !important;
}
.venders-bx.tz-vip .vender-intro { padding-right: 104px !important; }

/* corner tier ribbon */
.tz-vcard-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
}
.tz-vcard-badge .tz-vbadge {
    margin: 0;
    padding: 4px 11px;
    border: none;
    font-size: 10px;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.tz-vcard-badge .tz-vbadge svg { width: 11px; height: 11px; }
.tz-vcard-badge .tz-vbadge--enterprise { color: #0e1730; background: #dbe3f5; }
.tz-vcard-badge .tz-vbadge--premium { color: #fff; background: #325feb; }

/* card footer holding the vendor actions */
.tz-vfoot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tz-vfoot > * { flex: 1 1 0; }
.tz-vfoot a.contact-call,
.tz-vfoot a.contact-msg,
.tz-vfoot a.contact-usage-btn {
    height: 46px !important;
    min-width: 0 !important;
    width: auto !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
}
.tz-vfoot a.contact-call:hover,
.tz-vfoot a.contact-msg:hover,
.tz-vfoot a.contact-usage-btn:hover {
    transform: translateY(-2px);
    background: rgba(110, 160, 255, 0.14) !important;
    border-color: rgba(110, 160, 255, 0.5) !important;
}
.tz-vfoot a svg { width: 19px; height: 19px; }
.tz-vfoot a.contact-call svg path { fill: #58d69a; }
.tz-vfoot a.contact-msg svg path { fill: #7aa6ff; }
.tz-vfoot a.contact-usage-btn svg path { fill: #cdd8ff; }

/* amazing full-width "Invite" CTA */
.tz-invite-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #5b8cff 0%, #325feb 100%);
    box-shadow: 0 12px 26px -10px rgba(50, 95, 235, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.16s ease;
}
.tz-invite-btn svg { width: 17px; height: 17px; position: relative; z-index: 1; }
.tz-invite-btn span { position: relative; z-index: 1; }
.tz-invite-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}
.tz-invite-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(50, 95, 235, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.tz-invite-btn:hover::after { left: 130%; }
.tz-invite-btn.is-loading { opacity: 0.6; pointer-events: none; }

.tz-invite-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}
.tz-invite-chip svg { width: 14px; height: 14px; }
.tz-invite-chip.is-pending { color: #ffc39c; background: rgba(255, 171, 114, 0.14); border: 1px solid rgba(255, 171, 114, 0.32); }
.tz-invite-chip.is-accepted { color: #7ceab5; background: rgba(88, 214, 154, 0.15); border: 1px solid rgba(88, 214, 154, 0.32); }

/* invitations inbox */
.tz-inv-page { max-width: 860px; margin: 0 auto; }
.tz-inv-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tz-inv-sub { margin: 6px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.55); font-weight: 400; }
.tz-inv-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #ffc39c;
    background: rgba(255, 171, 114, 0.14);
    border: 1px solid rgba(255, 171, 114, 0.3);
    padding: 5px 12px;
    border-radius: 999px;
}
.tz-inv-section { margin-bottom: 28px; }
.tz-inv-section:last-child { margin-bottom: 0; }
.tz-inv-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 14px;
}
.tz-inv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.tz-inv--past { opacity: 0.85; }
.tz-inv__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tz-inv__img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.tz-inv__body { min-width: 0; }
.tz-inv__name { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.tz-inv__meta { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }
.tz-inv__msg { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); font-style: italic; }
.tz-inv__actions { display: flex; align-items: center; gap: 10px; }
.tz-inv__btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease;
}
.tz-inv__btn:hover { filter: brightness(1.08); }
.tz-inv__btn--accept { color: #fff; background: linear-gradient(135deg, #3fb984, #2e9e6e); }
.tz-inv__btn--decline { color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.tz-inv__btn--chat { color: #fff; background: linear-gradient(135deg, #508fff, #325feb); }
.tz-inv__status {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 11px;
    border-radius: 999px;
}
.tz-inv__status--accepted { color: #7ceab5; background: rgba(88, 214, 154, 0.15); }
.tz-inv__status--declined { color: #ff9f9f; background: rgba(255, 90, 90, 0.12); }
.tz-inv-count--ok { color: #7ceab5; background: rgba(88, 214, 154, 0.15); border-color: rgba(88, 214, 154, 0.32); }

/* unlocked vendors cards */
.tz-uv {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: border-color 0.16s ease, transform 0.16s ease;
}
.tz-uv:hover { border-color: rgba(110, 160, 255, 0.4); transform: translateY(-2px); }
.tz-uv__top { display: flex; align-items: center; gap: 12px; }
.tz-uv__img { width: 50px; height: 50px; border-radius: 13px; object-fit: cover; flex-shrink: 0; }
.tz-uv__id { min-width: 0; }
.tz-uv__name { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #fff; }
.tz-uv__src {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
}
.tz-uv__src--paid { color: #9fc0ff; background: rgba(80, 143, 255, 0.16); }
.tz-uv__src--plan { color: #cbb6ff; background: rgba(150, 110, 255, 0.16); }
.tz-uv__src--invitation { color: #7ceab5; background: rgba(88, 214, 154, 0.16); }
.tz-uv__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tz-uv__cats span {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.tz-uv__cats-more { color: #9fc0ff !important; }
.tz-uv__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}
.tz-uv__date { font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.tz-uv__actions { display: flex; align-items: center; gap: 8px; }
.tz-uv__actions a {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #508fff, #325feb);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tz-uv__actions a:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(50, 95, 235, 0.9); }

/* =============================================================================
   History tables (quotations / transactions)
   ============================================================================= */
.tz-htable-wrap { overflow-x: auto; border-radius: 12px; }
.tz-htable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 640px;
}
.tz-htable thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}
.tz-htable tbody td {
    padding: 14px 14px;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}
.tz-htable tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.tz-hmuted { color: rgba(255, 255, 255, 0.5) !important; }
.tz-hamt { font-weight: 700; white-space: nowrap; }
.tz-hamt.is-credit { color: #7ceab5; }
.tz-hamt.is-debit { color: #ff9f9f; }
.tz-htag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tz-htag--credit { color: #7ceab5; background: rgba(88, 214, 154, 0.14); border-color: rgba(88, 214, 154, 0.28); }
.tz-htag--debit { color: #ff9f9f; background: rgba(255, 90, 90, 0.12); border-color: rgba(255, 90, 90, 0.28); }
.tz-hstatus {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
}
.tz-hstatus--published, .tz-hstatus--completed { color: #7ceab5; background: rgba(88, 214, 154, 0.15); }
.tz-hstatus--draft, .tz-hstatus--pending { color: #ffc39c; background: rgba(255, 171, 114, 0.15); }
.tz-hstatus--closed, .tz-hstatus--failed { color: #ff9f9f; background: rgba(255, 90, 90, 0.13); }
.tz-hstatus--archived { color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); }

@media (max-width: 640px) {
    .tz-htable { min-width: 0; }
    .tz-htable thead { display: none; }
    .tz-htable tbody tr {
        display: block;
        padding: 12px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .tz-htable tbody td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 5px 6px;
        border: 0;
        text-align: right;
    }
    .tz-htable tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.45);
        text-align: left;
    }
}

/* =============================================================================
   Global AI launcher (floating "Ask AI" button)
   ============================================================================= */
.tz-ai-fab {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 1200;
    padding: 2.5px;                 /* thickness of the animated aura ring */
    border-radius: 999px;
    display: inline-block;
    animation: tzAiFloat 4.5s ease-in-out infinite;
    transition: transform 0.25s ease;
}
.tz-ai-fab:hover { transform: translateX(-50%) translateY(-4px) scale(1.03); }
.tz-ai-fab:focus-visible { outline: 3px solid rgba(127, 168, 255, 0.75); outline-offset: 4px; }

/* rotating aurora ring + soft glow (angle animates, element stays put) */
@property --tz-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.tz-ai-fab__aura {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(from var(--tz-angle), #35d0ff, #508fff, #7b8bff, #35d0ff, #508fff, #35d0ff);
    animation: tzAiSpin 5s linear infinite;
}
.tz-ai-fab__aura::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: inherit;
    filter: blur(7px);
    opacity: 0.35;
    z-index: -1;
    transition: opacity 0.25s ease;
}
.tz-ai-fab:hover .tz-ai-fab__aura::after { opacity: 0.55; }

/* pause the idle float while the user is interacting */
.tz-ai-fab:hover, .tz-ai-fab:focus-within { animation-play-state: paused; }

/* glass body */
.tz-ai-fab__glass {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    height: 54px;
    padding-right: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(16, 26, 58, 0.94), rgba(11, 18, 40, 0.96));
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px -10px rgba(50, 110, 255, 0.6);
    transition: box-shadow 0.25s ease;
    overflow: hidden;
}
.tz-ai-fab:hover .tz-ai-fab__glass,
.tz-ai-fab:focus-within .tz-ai-fab__glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 40px -10px rgba(50, 110, 255, 0.85); }
.tz-ai-fab__btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
}
.tz-ai-fab__icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #bfe0ff;
    filter: drop-shadow(0 0 6px rgba(80, 170, 255, 0.7));
    animation: tzAiTwinkle 3.2s ease-in-out infinite;
}
.tz-ai-fab__icon svg { width: 25px; height: 25px; }
.tz-ai-fab__label {
    white-space: nowrap;
    max-width: 120px;
    padding-right: 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    overflow: hidden;
    background: linear-gradient(90deg, #eaf3ff, #8fd4ff, #9db6ff, #eaf3ff);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: tzAiShimmer 3.5s linear infinite;
    transition: max-width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}
/* the ask input — hidden until the pill is hovered/focused */
.tz-ai-fab__input {
    width: 0;
    min-width: 0;
    opacity: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #eaf3ff;
    font-size: 15px;
    font-weight: 500;
    padding: 0;
    transition: width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}
.tz-ai-fab__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.tz-ai-fab:hover .tz-ai-fab__label,
.tz-ai-fab:focus-within .tz-ai-fab__label { max-width: 0; opacity: 0; padding: 0; }
.tz-ai-fab:hover .tz-ai-fab__input,
.tz-ai-fab:focus-within .tz-ai-fab__input { width: 210px; opacity: 1; padding: 0 8px; }
.tz-ai-fab:hover .tz-ai-fab__spark,
.tz-ai-fab:focus-within .tz-ai-fab__spark { opacity: 0 !important; animation: none; }
/* drifting sparkles */
.tz-ai-fab__spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 1px rgba(180, 220, 255, 0.9);
    opacity: 0;
    pointer-events: none;
}
.tz-ai-fab__spark--1 { left: 20px; top: 14px; animation: tzAiSpark 2.8s ease-in-out infinite; }
.tz-ai-fab__spark--2 { left: 40px; top: 34px; animation: tzAiSpark 3.4s ease-in-out infinite 0.7s; }
.tz-ai-fab__spark--3 { right: 30px; top: 12px; animation: tzAiSpark 3.1s ease-in-out infinite 1.4s; }

@keyframes tzAiSpin { to { --tz-angle: 360deg; } }
@keyframes tzAiFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes tzAiShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
@keyframes tzAiTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.08); } }
@keyframes tzAiSpark {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.6); }
    40% { opacity: 1; transform: translateY(-6px) scale(1); }
    60% { opacity: 1; }
}

@media (max-width: 575px) {
    .tz-ai-fab { bottom: 16px; }
    .tz-ai-fab__glass { height: 48px; padding-right: 20px; }
    .tz-ai-fab__icon { width: 48px; height: 48px; }
    .tz-ai-fab__icon svg { width: 22px; height: 22px; }
    .tz-ai-fab__label { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .tz-ai-fab, .tz-ai-fab__aura, .tz-ai-fab__icon, .tz-ai-fab__label, .tz-ai-fab__spark { animation: none; }
}

/* =============================================================================
   Recommended vendor picker (create tender) + invite-to-tender modal list
   ============================================================================= */
.tz-reco { margin-top: 6px; }
.tz-reco__sub { margin: 4px 0 12px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.tz-reco__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}
.tz-reco__item { cursor: pointer; margin: 0; }
.tz-reco__item input { position: absolute; opacity: 0; pointer-events: none; }
.tz-reco__card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tz-reco__item:hover .tz-reco__card { border-color: rgba(110, 160, 255, 0.4); }
.tz-reco__img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.tz-reco__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tz-reco__name { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-reco__pkg { align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; }
.tz-reco__pkg--premium { color: #9fc0ff; background: rgba(80, 143, 255, 0.16); }
.tz-reco__pkg--enterprise { color: #cbb6ff; background: rgba(150, 110, 255, 0.16); }
.tz-reco__check {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.tz-reco__check svg { width: 13px; height: 13px; }
.tz-reco__item input:checked + .tz-reco__card {
    border-color: rgba(110, 160, 255, 0.75);
    background: rgba(80, 143, 255, 0.12);
    box-shadow: 0 0 0 1px rgba(110, 160, 255, 0.4);
}
.tz-reco__item input:checked + .tz-reco__card .tz-reco__check {
    opacity: 1;
    background: linear-gradient(135deg, #508fff, #325feb);
    border-color: transparent;
}

/* invite-to-tender modal vendor rows */
.tz-tilist { display: flex; flex-direction: column; gap: 8px; }
.tz-ti-invite {
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #508fff, #325feb);
    cursor: pointer;
    box-shadow: 0 8px 18px -8px rgba(50, 95, 235, 0.9);
    transition: transform 0.15s ease;
}
.tz-ti-invite:hover { transform: translateY(-1px); }
.tz-ti-invite:disabled { opacity: 0.6; cursor: default; }

/* invite-vendors button in the tender detail sidebar */
.tz-side-invite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 10px;
    padding: 7px 13px;
    border: none;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #508fff, #325feb);
    cursor: pointer;
    box-shadow: 0 8px 18px -8px rgba(50, 95, 235, 0.9);
    transition: transform 0.15s ease;
}
.tz-side-invite:hover { transform: translateY(-1px); }
.tz-side-invite svg { width: 15px; height: 15px; }

/* tender context line in the invitations inbox */
.tz-inv__tender { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: #9fc0ff; }
.tz-inv__tender svg { width: 13px; height: 13px; flex-shrink: 0; }
.tz-inv__tender b { color: #fff; font-weight: 700; }
.tz-inv__tender--inline { margin: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* signup terms checkbox */
.tz-terms { margin: 6px 0 14px; }
.tz-terms__check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.tz-terms__check input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: #325feb; }
.tz-terms__check a { font-weight: 600; color: #7fa8ff; }

/* =============================================================================
   Auth pages (sign up / login) — polished dark-glass card
   ============================================================================= */
.login-blog {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
}
.login-blog .login-container { width: 100% !important; max-width: 1060px !important; padding: 0 !important; margin: 0 auto !important; }
/* the whole auth card = one rounded split (promo half + form half) */
.login-blog .login-container > .row {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    min-height: min(86vh, 700px);
    align-items: stretch;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(20, 30, 66, 0.94), rgba(9, 14, 30, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95);
}
.login-blog .login-container > .row > [class*="col-"] { padding: 0; }

/* left promo half (accent gradient) with a big curved edge overlapping the form */
.login-blog .col-lg-7 { display: flex; z-index: 2; }
.login-lft {
    position: relative;
    flex: 1;
    height: 100%;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 46px;
    margin-right: -70px;
    background: linear-gradient(150deg, #3f6fe0 0%, #4f46e5 55%, #7c3aed 125%);
    border-radius: 0 44% 44% 0 / 0 52% 52% 0;
    box-shadow: 34px 0 70px -34px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    text-align: left;
}
.login-lft::before,
.login-lft::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(6px);
    opacity: 0.35;
}
.login-lft::before { width: 260px; height: 260px; right: -70px; top: -60px; background: radial-gradient(circle, rgba(255, 255, 255, 0.45), transparent 65%); }
.login-lft::after { width: 220px; height: 220px; left: -50px; bottom: -60px; background: radial-gradient(circle, rgba(124, 58, 237, 0.6), transparent 65%); }

/* right form half */
.login-blog .col-lg-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 38px 44px 78px;
    overflow-y: auto;
}
.login-area {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}
.login-head { text-align: center; margin-bottom: 16px; }
/* compact spacing so the signup form fits without scrolling */
.login-blog .login-head h1 { font-size: 24px; }
.login-blog .tz-cat-label { margin-bottom: 8px; }
.login-blog .tz-cat { flex-direction: row; align-items: center; gap: 12px; padding: 14px 34px 14px 14px; }
.login-blog .tz-cat__icon { width: 34px; height: 34px; }
.login-blog .tz-cat__title { font-size: 15px; }
.login-blog .tz-terms { margin: 4px 0 12px; }
.login-blog .tzauth__form { padding-top: 34px; padding-bottom: 34px; }
.login-head .auth-dtls-brand img { height: 40px; margin-bottom: 14px; }
.login-blog .login-head h1 { font-size: 26px; font-weight: 800; color: #fff !important; margin: 0 0 6px; letter-spacing: -0.01em; }
.login-blog .login-head p { font-size: 14px; color: rgba(255, 255, 255, 0.55) !important; margin: 0; }

.login-blog .login-area .auth-form .form-group { margin-bottom: 11px; }
.login-blog .login-area .input_group_include { position: relative; }
.login-blog .login-area .form-control {
    width: 100%;
    height: 46px;
    padding: 10px 44px 10px 16px;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    font-size: 14.5px;
    box-shadow: none;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.login-blog .login-area .form-control::placeholder { color: rgba(255, 255, 255, 0.42) !important; }
.login-blog .login-area .form-control:hover { border-color: rgba(110, 160, 255, 0.4) !important; }
.login-blog .login-area .form-control:focus {
    outline: none;
    border-color: rgba(110, 160, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 0 0 3px rgba(80, 143, 255, 0.16) !important;
}
.login-blog .login-area .form-control.is-invalid { border-color: rgba(255, 90, 90, 0.6) !important; }
/* keep browser-autofilled inputs on-theme (no white box) */
.login-blog .login-area .form-control:-webkit-autofill,
.login-blog .login-area .form-control:-webkit-autofill:hover,
.login-blog .login-area .form-control:-webkit-autofill:focus,
.login-blog .login-area input:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset !important;
    caret-color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: background-color 9999s ease-in-out 0s;
}
.login-blog .login-area .form-group { position: relative; }
.login-blog .login-area .auth-icon {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: 0 !important;
    bottom: auto !important;
    height: 46px !important;
    margin: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    pointer-events: none;
}
.login-blog .login-area .auth-icon svg { width: 20px; height: 20px; }
/* brighten the dim theme icons so they read on the dark inputs */
.login-blog .login-area .auth-icon svg g { opacity: 1 !important; }
.login-blog .login-area .auth-icon svg [stroke],
.login-blog .login-area .toggle-hide-show svg [stroke] { stroke: #9fc0ff !important; }
.login-blog .login-area .auth-icon svg [fill]:not([fill="none"]) { fill: #9fc0ff !important; }
.login-blog .login-area .toggle-hide-show,
.login-blog .login-area .toggle-hide-show svg,
.login-blog .login-area .toggle-hide-show .icon-show,
.login-blog .login-area .toggle-hide-show .icon-hide { opacity: 1 !important; }
.login-blog .login-area .toggle-hide-show:hover svg [stroke] { stroke: #cfe0ff !important; }
.login-blog .login-area .toggle-hide-show {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 0 !important;
    bottom: auto !important;
    height: 46px !important;
    margin: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer;
}
.login-area .toggle-hide-show svg { width: 20px; height: 20px; }
.login-area .auth-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 12px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
    background: linear-gradient(135deg, #5b8cff, #325feb);
    box-shadow: 0 16px 30px -12px rgba(50, 95, 235, 0.9);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.login-area .auth-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -12px rgba(50, 95, 235, 1); }
.login-area .form-txt { text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, 0.55); margin: 14px 0 0; }
.login-area .form-txt a { color: #7fa8ff; font-weight: 600; }
.login-area small.text-danger, .login-area .text-danger { font-size: 12.5px; }

/* ===== Verify OTP page ===== */
.login-blog .tz-verify { text-align: center; }
.login-blog .tz-verify .login-head { text-align: center; }
.login-blog .tz-verify .auth-form,
.login-blog .tz-verify .auth-form .form-control { text-align: left; }
.login-blog .tz-otp-icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    color: #9fc0ff;
    background: rgba(80, 143, 255, 0.14);
    border: 1px solid rgba(80, 143, 255, 0.3);
    box-shadow: 0 0 44px rgba(80, 143, 255, 0.35);
}
.login-blog .tz-otp-icon svg { width: 34px; height: 34px; }
.login-blog .tz-otp-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 6px 0 22px;
}
.login-blog .tz-otp-row .otp-input {
    width: 100%;
    max-width: 56px;
    height: 58px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.login-blog .tz-otp-row .otp-input::placeholder { color: rgba(255, 255, 255, 0.22); }
.login-blog .tz-otp-row .otp-input:focus {
    outline: none;
    border-color: rgba(110, 160, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(80, 143, 255, 0.16);
}
.login-blog .auth-btn--ghost {
    margin-top: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: none;
}
.login-blog .auth-btn--ghost:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

/* ===== Add-detail (complete profile) page ===== */
.login-blog #fileInput { display: none; }
.login-blog .profile-edit { display: flex; justify-content: center; margin-bottom: 4px; }
.login-blog .profile-wrapper { position: relative; width: 96px; height: 96px; }
.login-blog .avatar-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.login-blog .camera-icon {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(135deg, #5b8cff, #325feb);
    border: 2px solid #0e1530;
}
.login-blog .camera-icon svg { width: 15px; height: 15px; }
/* drag & drop upload box */
.login-blog .upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 22px 16px;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px dashed rgba(255, 255, 255, 0.22);
    transition: border-color 0.16s ease, background 0.16s ease;
}
.login-blog .upload-box:hover { border-color: rgba(110, 160, 255, 0.5); background: rgba(255, 255, 255, 0.06); }
.login-blog .upload-box h4 { font-size: 14px; font-weight: 600; color: #fff; margin: 6px 0 0; }
.login-blog .upload-box h4 a { color: #7fa8ff; text-decoration: underline; cursor: pointer; }
.login-blog .upload-box p { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin: 0; }
.login-blog .upload-box .upload-icon svg [fill="#325FEB"] { fill: #7ea6ff; }
.login-blog .upload-box .upload-icon svg [stroke="white"] { stroke: #101a37; }
/* multi-select (categories) on the dark card */
.login-blog .select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    padding: 9px 14px !important;
    min-height: 46px;
}
.login-blog .select2-container--default.select2-container--focus .select2-selection--multiple,
.login-blog .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: rgba(110, 160, 255, 0.75) !important;
    box-shadow: 0 0 0 3px rgba(80, 143, 255, 0.16) !important;
}
.login-blog .select2-container { width: 100% !important; }
.login-blog .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(80, 143, 255, 0.22);
    color: #dbe7ff;
    border: 1px solid rgba(110, 160, 255, 0.35);
}

/* ===== Company onboarding: documents + categories + review ===== */
.login-blog .tz-flabel { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.82) !important; margin-bottom: 7px; }
.login-blog .tz-textarea {
    height: auto !important;
    min-height: 84px;
    padding: 12px 16px !important;
    line-height: 1.5;
    resize: vertical;
}
.login-blog select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
.login-blog select.form-control option { background: #101a37; color: #fff; }
.login-blog .tz-file-name { margin-top: 9px; font-size: 13px; color: #cfe0ff; word-break: break-all; }
.login-blog .upload-box.is-dragover { border-color: rgba(110, 160, 255, 0.7); background: rgba(80, 143, 255, 0.1); }
/* compact upload tiles (KYC front/back) */
.login-blog .upload-box--mini { padding: 16px 10px; gap: 2px; }
.login-blog .upload-box--mini h4 { font-size: 13px; margin: 4px 0 0; }
.login-blog .upload-box--mini p { font-size: 11px; }
/* native date input on the dark card */
.login-blog input[type="date"] { color-scheme: dark; color: #fff !important; position: relative; }
.login-blog input[type="date"]::-webkit-datetime-edit,
.login-blog input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.login-blog input[type="date"]::-webkit-datetime-edit-text,
.login-blog input[type="date"]::-webkit-datetime-edit-day-field,
.login-blog input[type="date"]::-webkit-datetime-edit-month-field,
.login-blog input[type="date"]::-webkit-datetime-edit-year-field { color: #fff !important; }
.login-blog input[type="date"]::-webkit-calendar-picker-indicator {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    max-width: 16px;
    min-height: 16px;
    max-height: 16px;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    opacity: 0.65;
    cursor: pointer;
}

/* cloud pills */
.login-blog .tz-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 2px 4px 2px 2px;
    margin-bottom: 6px;
}
.login-blog .tz-pill {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.login-blog .tz-pill:hover { border-color: rgba(110, 160, 255, 0.5); color: #fff; }
.login-blog .tz-pill.active {
    color: #fff;
    background: linear-gradient(135deg, #5b8cff, #325feb);
    border-color: transparent;
    box-shadow: 0 8px 20px -8px rgba(50, 95, 235, 0.85);
}
.login-blog .tz-empty { font-size: 14px; color: rgba(255, 255, 255, 0.6); text-align: center; margin: 10px 0 16px; }

/* under-review screen */
.login-blog .tz-review-note {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(80, 143, 255, 0.08);
    border: 1px solid rgba(80, 143, 255, 0.22);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.login-blog .auth-btn--link { display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; }

/* =====================================================================
   Login v3 — dark panel + floating dashboard mockups + login card
   ===================================================================== */
.tzlogin {
    min-height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(1100px 560px at 14% 8%, rgba(45,72,150,0.38), transparent 60%),
        radial-gradient(900px 520px at 88% 92%, rgba(50,95,235,0.18), transparent 55%),
        linear-gradient(160deg, #070c1c, #0a1024 60%, #070a18);
}
.tzlogin__left {
    flex: 1 1 55%;
    position: relative;
    padding: 60px 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}
.tzlogin__brandwrap { position: relative; z-index: 2; max-width: 480px; }
.tzlogin__brand { display: block; height: 34px; margin-bottom: 26px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.4)); }
.tzlogin__tag {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #9fc0ff;
    background: rgba(80, 143, 255, 0.12); border: 1px solid rgba(80, 143, 255, 0.25);
    padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.tzlogin__title { font-size: 42px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; }
.tzlogin__title span { color: #6f9bff; }
.tzlogin__lead { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); max-width: 420px; margin: 0 0 30px; }
.tzlogin__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.tzlogin__features li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.tzlogin__fic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #9fc0ff; background: rgba(80, 143, 255, 0.12); border: 1px solid rgba(80, 143, 255, 0.22); flex-shrink: 0; }
.tzlogin__fic svg { width: 19px; height: 19px; }

/* floating dashboard mockup cards */
.tzlogin__mock { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tzmock {
    position: absolute; overflow: hidden; border-radius: 18px; padding: 20px 22px;
    color: rgba(255, 255, 255, 0.88);
    background: linear-gradient(158deg, rgba(30, 44, 88, 0.5), rgba(12, 18, 38, 0.62));
    border: 1px solid rgba(120, 150, 255, 0.14);
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0.62;
}
/* soft blue shine, upper-left of each card */
.tzmock::before {
    content: ""; position: absolute; top: -40px; left: -30px; width: 190px; height: 150px;
    background: radial-gradient(circle at center, rgba(96, 132, 255, 0.35), transparent 68%);
    pointer-events: none;
}
.tzmock__head { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.tzmock__ic {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #8fb2ff; background: rgba(96, 132, 255, 0.16); border: 1px solid rgba(120, 150, 255, 0.28);
}
.tzmock__ic svg { width: 18px; height: 18px; }
.tzmock__ic--green { color: #58d6a0; background: rgba(55, 208, 160, 0.14); border-color: rgba(55, 208, 160, 0.3); }
.tzmock__big { font-size: 34px; font-weight: 800; margin-top: 12px; letter-spacing: -0.01em; }
.tzmock__sub { font-size: 13px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; }
.tzmock__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6f9bff; margin-top: 16px; }
.tzmock__link svg { width: 14px; height: 14px; }
.tzmock--tenders { top: 4%; right: 5%; width: 250px; transform: rotate(1.5deg); }
.tzmock--quotes { top: 31%; right: 12%; width: 250px; transform: rotate(-1.5deg); }
.tzmock--donut { bottom: 22%; right: 2%; width: 330px; transform: rotate(1deg); }
.tzmock--recent { bottom: 5%; left: 4%; width: 440px; transform: rotate(-1.5deg); }
.tzmock--cats { bottom: 4%; left: 36%; width: 360px; transform: rotate(1.5deg); }
/* donut */
.tzmock__donutrow { display: flex; align-items: center; gap: 26px; margin-top: 16px; }
.tzmock__donut { width: 96px; height: 96px; border-radius: 50%; position: relative; flex-shrink: 0; background: conic-gradient(#6f9bff 0 33%, #7c5cff 33% 73%, #37d0a0 73% 100%); display: flex; align-items: center; justify-content: center; }
.tzmock__donut::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: #0c1226; }
.tzmock__donut span { position: relative; z-index: 1; font-weight: 800; font-size: 20px; text-align: center; line-height: 1; }
.tzmock__donut small { display: block; font-size: 9px; font-weight: 500; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.tzmock__legend { list-style: none; margin: 0; padding: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 12px; color: rgba(255, 255, 255, 0.6); }
.tzmock__legend li { display: flex; align-items: center; }
.tzmock__legend b { color: rgba(255, 255, 255, 0.9); font-weight: 700; margin-right: 6px; }
.tzmock__legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; }
.tzmock__legend .d1 { background: #6f9bff; }
.tzmock__legend .d2 { background: #7c5cff; }
.tzmock__legend .d3 { background: #37d0a0; }
/* recent tenders table */
.tzmock__table { margin-top: 16px; font-size: 13px; }
.tzmock__thead, .tzmock__trow { display: grid; grid-template-columns: 1.7fr 1fr 1.2fr 0.4fr; gap: 12px; align-items: center; }
.tzmock__thead { color: rgba(255, 255, 255, 0.45); padding-bottom: 10px; }
.tzmock__trow { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.8); }
.tzmock__trow span:nth-child(n+2) { color: rgba(255, 255, 255, 0.5); }
/* top categories */
.tzmock__cats { display: flex; gap: 20px; margin-top: 18px; }
.tzmock__cats span { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tzmock__cats i { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #8fb2ff; background: rgba(96, 132, 255, 0.12); border: 1px solid rgba(120, 150, 255, 0.2); }
.tzmock__cats i svg { width: 20px; height: 20px; }
.tzmock__cats small { font-size: 10.5px; color: rgba(255, 255, 255, 0.55); }
/* decorative dots + corner arcs */
.tzlogin__dots { position: absolute; width: 66px; height: 66px; opacity: 0.4; background-image: radial-gradient(rgba(140, 165, 255, 0.5) 1.4px, transparent 1.4px); background-size: 14px 14px; }
.tzlogin__dots--a { top: 27%; right: 33%; }
.tzlogin__dots--b { top: 46%; left: 42%; }
.tzlogin__dots--c { bottom: 6%; right: 1%; width: 84px; height: 120px; }
.tzlogin__arc { position: absolute; border-radius: 50%; border: 1px solid rgba(90, 120, 220, 0.22); pointer-events: none; }
.tzlogin__arc--tl { width: 520px; height: 520px; top: -230px; left: -170px; }
.tzlogin__arc--bl { width: 430px; height: 430px; bottom: -220px; left: -130px; }

/* right: login card */
.tzlogin__right { flex: 0 0 45%; max-width: 780px; display: flex; align-items: center; justify-content: center; padding: 40px 56px; position: relative; z-index: 2; }
.tzlogin__card {
    position: relative;
    width: 100%; max-width: 540px; padding: 46px 46px; border-radius: 24px;
    background: linear-gradient(180deg, rgba(26, 38, 78, 0.55), rgba(10, 15, 33, 0.82));
    border: 1px solid rgba(120, 150, 255, 0.16);
    box-shadow: 0 40px 110px -40px rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(16px);
    overflow: hidden;
}
/* lit top edge / shine */
.tzlogin__card::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 82%; height: 130px;
    background: radial-gradient(ellipse at top, rgba(110, 150, 255, 0.32), transparent 72%);
    pointer-events: none;
}
.tzlogin__card > * { position: relative; z-index: 1; }
.tzlogin__welcome { font-size: 30px; font-weight: 800; text-align: center; margin: 0 0 8px; letter-spacing: -0.01em; color: #fff; }
.tzlogin__welcomesub { font-size: 14px; color: rgba(255, 255, 255, 0.55); text-align: center; margin: 0 0 26px; line-height: 1.5; }
.tzlogin__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.tzlogin__role { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.tzlogin__role:hover { border-color: rgba(110, 160, 255, 0.45); color: #fff; }
.tzlogin__role.active { color: #7fa8ff; background: rgba(80, 143, 255, 0.1); border-color: rgba(110, 160, 255, 0.85); }
.tzlogin__field { position: relative; margin-bottom: 14px; }
.tzlogin__input { width: 100%; height: 50px; padding: 10px 46px 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 14.5px; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.tzlogin__input::placeholder { color: rgba(255, 255, 255, 0.42); }
.tzlogin__input:focus { outline: none; border-color: rgba(110, 160, 255, 0.75); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(80, 143, 255, 0.16); }
.tzlogin__input.is-invalid { border-color: rgba(255, 90, 90, 0.6); }
.tzlogin__input:-webkit-autofill,
.tzlogin__input:-webkit-autofill:hover,
.tzlogin__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset !important;
    caret-color: #fff !important;
    transition: background-color 9999s ease-in-out 0s;
}
.tzlogin__ficon { position: absolute; right: 14px; top: 0; height: 50px; display: inline-flex; align-items: center; color: #7ea6ff; pointer-events: none; }
.tzlogin__ficon svg { width: 20px; height: 20px; }
.tzlogin__toggle { pointer-events: auto; cursor: pointer; }
.tzlogin__meta { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 20px; }
.tzlogin__remember { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.7); cursor: pointer; }
.tzlogin__remember input { width: 16px; height: 16px; accent-color: #325feb; }
.tzlogin__forgot { font-size: 13.5px; color: #7fa8ff; font-weight: 600; }
.tzlogin__submit { width: 100%; height: 52px; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5b8cff, #325feb); box-shadow: 0 18px 34px -14px rgba(50, 95, 235, 0.95); cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease; }
.tzlogin__submit:hover { transform: translateY(-2px); box-shadow: 0 24px 44px -14px rgba(50, 95, 235, 1); }
.tzlogin__or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: rgba(255, 255, 255, 0.4); font-size: 13px; }
.tzlogin__or::before, .tzlogin__or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.tzlogin__social { width: 100%; height: 50px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; margin-bottom: 12px; transition: background 0.15s ease, border-color 0.15s ease; }
.tzlogin__social:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); }
.tzlogin__signup { text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.55); margin: 12px 0 0; }
.tzlogin__signup a { color: #7fa8ff; font-weight: 700; }
.tzlogin small.text-danger, .tzlogin .text-danger { font-size: 12.5px; color: #ff8a8a; display: block; margin-top: 4px; }
@media (max-width: 1280px) {
    .tzlogin__title { font-size: 38px; }
}
@media (max-width: 1024px) {
    .tzlogin__mock { display: none; }
    .tzlogin__left { flex: 1 1 44%; padding: 40px; }
    .tzlogin__right { flex: 0 0 56%; max-width: none; padding: 40px 48px; }
    .tzlogin__card { max-width: 620px; }
    .tzlogin__title { font-size: 34px; }
}
@media (max-width: 860px) {
    .tzlogin { flex-direction: column; }
    .tzlogin__left { display: none; }
    .tzlogin__right { flex: 1 1 100%; max-width: none; padding: 28px 18px; }
}

/* Sign up reuses the login shell: neutralise the nested .login-blog styling
   hook so the existing form-field styles apply inside the new card. */
.tzlogin .login-blog { min-height: auto; display: block; padding: 0; margin: 0; background: transparent; }
.tzlogin .login-area { max-width: none; width: 100%; padding: 0; margin: 0; background: transparent; border: none; box-shadow: none; }
.tzsignup .tzlogin__card { overflow: visible; padding: 30px 38px; }
.tzsignup .tzlogin__right { align-items: center; padding-top: 28px; padding-bottom: 28px; }
.tzsignup .login-head { text-align: center; margin-bottom: 14px; }
.tzsignup .login-head h1 { font-size: 24px; }
.tzsignup .login-head p { color: rgba(255, 255, 255, 0.55) !important; font-size: 13.5px; }
/* compact spacing so the signup card fits without scrolling */
.tzsignup .tz-cat-label { margin-bottom: 6px; }
.tzsignup .tz-cat-switch { margin-bottom: 4px; }
.tzsignup .tz-cat { padding: 10px 14px 10px 12px; }
.tzsignup .tz-cat__icon { width: 30px; height: 30px; }
.tzsignup .login-area .auth-form .form-group { margin-bottom: 9px; }
.tzsignup .login-area .form-control { height: 44px !important; }
.tzsignup .tz-terms { margin: 4px 0 12px !important; }
.tzsignup .auth-btn { height: 46px; margin-top: 2px; }
.tzsignup .form-txt { margin-top: 10px; }

/* ============================ Mobile responsiveness ============================ */
@media (max-width: 600px) {
    /* login / signup (tzlogin shell) */
    .tzlogin__right { padding: 18px 12px; }
    .tzlogin__card { max-width: 100%; padding: 26px 20px; border-radius: 18px; }
    .tzlogin__welcome { font-size: 25px; }
    .tzlogin__welcomesub { font-size: 13px; }
    .tzlogin__roles { gap: 8px; }
    .tzlogin__social { height: 46px; }
    .tzsignup .tzlogin__right { padding-top: 16px; padding-bottom: 16px; }
    .tzsignup .tzlogin__card { padding: 22px 18px; }

    /* verify / kyc / company / add-detail (tzauth card + login-blog section) */
    .login-blog { padding: 16px 12px; }
    .tzauth__card { max-width: 100%; border-radius: 18px; }
    .tzauth__form { padding: 26px 18px; }
    .tzauth__form .login-area { max-width: 100%; }
    .login-blog .login-head h1 { font-size: 22px; }
    .login-blog .tz-otp-row { gap: 7px; }
    .login-blog .tz-otp-row .otp-input { height: 52px; font-size: 20px; }
}
@media (max-width: 380px) {
    .tzlogin__card, .tzsignup .tzlogin__card { padding: 20px 14px; }
    .tzauth__form { padding: 22px 14px; }
    .login-blog .tz-otp-row { gap: 5px; }
    .login-blog .tz-otp-row .otp-input { height: 46px; font-size: 18px; }
}

/* ============================ First-login product tour ============================ */
.tztour[hidden] { display: none; }
.tztour__overlay { position: fixed; inset: 0; background: rgba(6, 10, 24, 0.78); z-index: 100000; }
.tztour__spot {
    position: fixed;
    display: none;
    border-radius: 12px;
    border: 2px solid rgba(110, 160, 255, 0.9);
    box-shadow: 0 0 0 9999px rgba(6, 10, 24, 0.78), 0 0 22px rgba(80, 143, 255, 0.5);
    pointer-events: none;
    z-index: 100000;
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tztour__pop {
    position: fixed;
    z-index: 100001;
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 22px 22px 18px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(180deg, rgba(26, 38, 78, 0.98), rgba(12, 18, 38, 0.99));
    border: 1px solid rgba(120, 150, 255, 0.25);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
}
.tztour__pop.is-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tztour__step { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #7fa8ff; }
.tztour__title { font-size: 19px; font-weight: 800; margin: 8px 0 6px; color: #fff; }
.tztour__text { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); margin: 0 0 18px; }
.tztour__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tztour__skip { background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 13px; cursor: pointer; padding: 6px 2px; }
.tztour__skip:hover { color: rgba(255, 255, 255, 0.8); }
.tztour__nav { display: flex; gap: 8px; }
.tztour__prev { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.tztour__prev:hover { background: rgba(255, 255, 255, 0.12); }
.tztour__next { border: none; color: #fff; font-size: 13.5px; font-weight: 700; padding: 9px 20px; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg, #5b8cff, #325feb); box-shadow: 0 10px 22px -10px rgba(50, 95, 235, 0.9); }
.tztour__next:hover { transform: translateY(-1px); }

/* Vendor tier + connect-cost badge (shown to clients) */
.tz-tier {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
    padding: 4px 6px 4px 4px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
}
.tz-tier__label { padding: 2px 9px; border-radius: 999px; color: #fff; letter-spacing: 0.02em; }
.tz-tier__cost { color: rgba(255, 255, 255, 0.7); font-weight: 600; padding-right: 6px; }
.tz-tier--company-basic .tz-tier__label { background: rgba(148, 163, 184, 0.35); }
.tz-tier--company-pro .tz-tier__label { background: linear-gradient(135deg, #5b8cff, #325feb); }
.tz-tier--company-premium .tz-tier__label { background: linear-gradient(135deg, #7c5cff, #4f46e5); }
.tz-tier--company-enterprise .tz-tier__label { background: linear-gradient(135deg, #f0b64d, #e0902f); color: #1a1206; }
.tz-tier--company-premium .tz-tier__cost,
.tz-tier--company-enterprise .tz-tier__cost { color: #58d6a0; }

/* ============================ Subscription / packages (v2) ============================ */
.tzsub { max-width: 1240px; margin: 0 auto; padding: 8px 4px 40px; color: #fff; }
.tzsub__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.tzsub__eyebrow { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a78bfa; margin-bottom: 10px; }
.tzsub__title { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; color: #fff; }
.tzsub__sub { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); max-width: 560px; margin: 0; }
.tzsub__current {
    display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0;
}
.tzsub__current-ic { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #a78bfa; background: rgba(124, 92, 255, 0.14); border: 1px solid rgba(124, 92, 255, 0.28); }
.tzsub__current-ic svg { width: 20px; height: 20px; }
.tzsub__current-plan small { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.tzsub__current-plan strong { font-size: 15px; color: #fff; }
.tzsub__current-cr { padding-left: 16px; margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, 0.12); text-align: right; }
.tzsub__current-cr strong { display: block; font-size: 15px; color: #fff; }
.tzsub__current-cr span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.tzsub__current-cr i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }

.tzsub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tzsub-card {
    --acc: #a78bfa; --accbg: rgba(124, 92, 255, 0.14); --accbd: rgba(124, 92, 255, 0.3);
    position: relative; display: flex; flex-direction: column; padding: 26px 24px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(22, 30, 55, 0.6), rgba(12, 17, 34, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tzsub-card--purple { --acc: #a78bfa; --accbg: rgba(124, 92, 255, 0.14); --accbd: rgba(124, 92, 255, 0.32); }
.tzsub-card--green { --acc: #34d399; --accbg: rgba(52, 211, 153, 0.12); --accbd: rgba(52, 211, 153, 0.32); }
.tzsub-card--gold { --acc: #f0b64d; --accbg: rgba(240, 182, 77, 0.12); --accbd: rgba(240, 182, 77, 0.35); }
.tzsub-card.is-featured { border-color: rgba(240, 182, 77, 0.55); box-shadow: 0 0 0 1px rgba(240, 182, 77, 0.35), 0 34px 80px -34px rgba(224, 144, 47, 0.45); }
.tzsub-ribbon {
    position: absolute; top: 16px; right: 16px; font-size: 11.5px; font-weight: 700; color: #f0b64d;
    background: rgba(240, 182, 77, 0.14); border: 1px solid rgba(240, 182, 77, 0.3); padding: 5px 12px; border-radius: 999px;
}
.tzsub-card__top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.tzsub-card__ic { width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--acc); background: var(--accbg); border: 1px solid var(--accbd); }
.tzsub-card__ic svg { width: 24px; height: 24px; }
.tzsub-card__name { font-size: 21px; font-weight: 800; margin: 0; color: #fff; }
.tzsub-card__tag { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin: 3px 0 0; }
.tzsub-card__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.tzsub-card__cur { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.tzsub-card__amt { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.tzsub-card__per { font-size: 14px; color: rgba(255, 255, 255, 0.5); }
.tzsub-card__credits { font-size: 14px; font-weight: 700; color: var(--acc); }
.tzsub-card__rule { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 20px 0; }
.tzsub-card__feats { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.tzsub-card__feats li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.tzsub-card__feats svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--acc); }
.tzsub-card__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto;
    height: 48px; border-radius: 12px; font-size: 14.5px; font-weight: 700; text-decoration: none;
    border: 1px solid var(--acc); color: var(--acc); background: transparent;
    transition: background 0.15s ease, transform 0.15s ease;
}
.tzsub-card__cta:hover { background: var(--accbg); }
.tzsub-card--gold .tzsub-card__cta { border-color: transparent; color: #1a1206; background: linear-gradient(135deg, #f5c869, #e0902f); box-shadow: 0 14px 30px -14px rgba(224, 144, 47, 0.85); }
.tzsub-card--gold .tzsub-card__cta:hover { transform: translateY(-1px); }
.tzsub-card__cta.is-current { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.7); background: transparent; cursor: default; }
.tzsub-card--gold .tzsub-card__cta.is-current { background: transparent; color: rgba(255,255,255,0.7); box-shadow: none; border: 1px solid rgba(255,255,255,0.2); }
.tzsub-card__cta.is-disabled { border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.4); background: transparent; pointer-events: none; }

.tzsub__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.tzsub-info { display: flex; gap: 14px; padding: 22px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.09); }
.tzsub-info__ic { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #a78bfa; background: rgba(124, 92, 255, 0.12); border: 1px solid rgba(124, 92, 255, 0.24); }
.tzsub-info__ic svg { width: 22px; height: 22px; }
.tzsub-info h4 { font-size: 16px; font-weight: 700; margin: 0 0 5px; color: #fff; }
.tzsub-info p { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); margin: 0 0 8px; }
.tzsub-info__link { font-size: 13.5px; font-weight: 600; color: #a78bfa; text-decoration: none; }
.tzsub-info__link:hover { color: #c4b5fd; }

.tzsub-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.tzsub-pack { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 24px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); }
.tzsub-pack__name { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.tzsub-pack__credits { display: inline-flex; align-items: baseline; gap: 6px; font-size: 28px; font-weight: 800; color: #fff; }
.tzsub-pack__credits small { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.tzsub-pack__price { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; }
.tzsub-pack .tzsub-card__cta { --acc: #a78bfa; --accbg: rgba(124, 92, 255, 0.14); width: 100%; }
.tzsub__foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 30px; font-size: 13px; color: rgba(255, 255, 255, 0.45); }
@media (max-width: 1000px) { .tzsub__grid, .tzsub__info, .tzsub-packs { grid-template-columns: 1fr; } .tzsub__title { font-size: 30px; } }

/* category switch box */
.tz-cat-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; }
.tz-cat-switch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tz-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 14px 34px 14px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.tz-cat:hover { border-color: rgba(110, 160, 255, 0.45); }
.tz-cat__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9fc0ff;
    background: rgba(80, 143, 255, 0.14);
    border: 1px solid rgba(80, 143, 255, 0.28);
}
.tz-cat__icon svg { width: 19px; height: 19px; }
.tz-cat__text { min-width: 0; width: 100%; }
.tz-cat__title { display: block; font-size: 14.5px; font-weight: 700; color: #fff; }
.tz-cat__desc { display: block; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.55); margin-top: 3px; white-space: normal; overflow-wrap: anywhere; }
.tz-cat__tick {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.tz-cat__tick svg { width: 12px; height: 12px; }
.tz-cat.active {
    border-color: rgba(110, 160, 255, 0.8);
    background: rgba(80, 143, 255, 0.12);
    box-shadow: 0 0 0 1px rgba(110, 160, 255, 0.4);
}
.tz-cat.active .tz-cat__tick { opacity: 1; background: linear-gradient(135deg, #508fff, #325feb); border-color: transparent; }

/* intl-tel-input on the dark input */
.login-area .iti { width: 100%; }
.login-blog .login-area .iti input,
.login-blog .login-area .iti input#phone { color: #fff !important; }
.login-area .iti__selected-flag,
.login-area .iti__selected-flag *,
.login-area .iti__selected-dial-code { color: #fff !important; }
.login-area .iti__arrow { border-top-color: rgba(255, 255, 255, 0.6); }
.login-area .iti--separate-dial-code .iti__selected-flag { background: rgba(255, 255, 255, 0.06); border-radius: 12px 0 0 12px; }
.login-area .iti--separate-dial-code .iti__selected-flag:hover { background: rgba(255, 255, 255, 0.1); }
/* country dropdown list stays readable (dark) */
.login-area .iti__country-list { background: #131a34; border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; }
.login-area .iti__country.iti__highlight { background: rgba(80, 143, 255, 0.2); }
.login-area .iti__dial-code { color: rgba(255, 255, 255, 0.55); }

@media (max-width: 991px) {
    .login-lft { display: none; }
    .login-area { max-width: 520px; }
}
@media (max-width: 480px) {
    .tz-cat-switch { grid-template-columns: 1fr; }
    .login-area { padding: 26px 20px; }
}

/* auth promo panel content + switch */
.login-lft > * { position: relative; z-index: 1; }
.tz-promo__brand { height: 44px; margin-bottom: 24px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35)); }
.tz-promo__illus { display: block; width: 100%; max-width: 330px; margin: 30px 0 0; }
.tz-promo__title, .tz-promo__text, .tz-promo__list { transition: opacity 0.2s ease; }
.tz-promo__tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.tz-promo__title { font-size: 30px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
.tz-promo__text { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin: 0 0 24px; max-width: 360px; }
.tz-promo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tz-promo__list li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255, 255, 255, 0.92); }
.tz-promo__ic { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tz-promo__ic svg { width: 13px; height: 13px; }
.tz-promo__switch { margin-top: auto; padding-top: 24px; }
.tz-promo__switch p { font-size: 13.5px; color: rgba(255, 255, 255, 0.82); margin: 0 0 10px; }
.tz-promo__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.tz-promo__btn:hover { background: #fff; color: #3f5fe0; transform: translateY(-1px); }

/* login type toggle (User / Vendor) */
.login-blog .select-role {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.login-blog .select-role p { margin: 0; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.75) !important; }
.login-blog .select-role span { display: none; }
.login-blog .select-role:hover { border-color: rgba(110, 160, 255, 0.4); background: rgba(80, 143, 255, 0.1); }
.login-blog .select-role:hover p { color: #fff !important; }
.login-blog .select-role.active { border-color: rgba(110, 160, 255, 0.75); background: rgba(80, 143, 255, 0.14); }
.login-blog .select-role.active p { color: #fff !important; }
.login-blog .interlink { color: #7fa8ff; font-size: 13px; font-weight: 600; }
.login-blog .tag { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); margin-bottom: 8px; }

@media (max-width: 991px) {
    .login-lft { display: none; }
    .login-blog .login-container > .row { min-height: auto; }
}

/* =============================================================================
   Auth card v2 — self-contained split (no Bootstrap grid), reliably aligned
   ============================================================================= */
.tzauth__card {
    display: flex;
    width: 100%;
    max-width: 1320px;
    min-height: min(86vh, 680px);
    max-height: calc(100vh - 48px);
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(18, 26, 58, 0.96), rgba(9, 14, 30, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95);
}
.tzauth__promo {
    flex: 0 0 46%;
    max-width: 46%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px 44px;
    background: linear-gradient(150deg, #3f6fe0 0%, #4f46e5 55%, #7c3aed 130%);
    overflow: hidden;
}
.tzauth__promo > * { position: relative; z-index: 1; }
.tzauth__promo::before { content: ''; position: absolute; width: 280px; height: 280px; right: -90px; top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 65%); }
.tzauth__promo::after { content: ''; position: absolute; width: 240px; height: 240px; left: -70px; bottom: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 65%); }
.tzauth__form {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 46px 42px;
    overflow-y: auto;
}
.tzauth__form .login-area { width: 100%; max-width: 440px; margin: 0; background: transparent; border: none; box-shadow: none; padding: 0; }
@media (max-width: 900px) {
    .tzauth__promo { display: none; }
    .tzauth__card { min-height: auto; max-width: 460px; }
    .tzauth__form { flex: 1 1 100%; padding: 34px 26px; }
}