/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    color: #ffffff;
    overflow-x: hidden;
}

body {
    width: 100%;
    height: 100%;
    background-color: #0D0D0D;
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
}

.flex {
    display: flex;
}

.main-container {
    margin: 0 auto;
    max-width: 1500px;
    padding: 2rem;
    min-height: 100vh;
    background-color: rgb(0 0 0);
}

.container {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    /*padding-left: 280px;*/
}

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

/* Mobile Menu Button */
.mobile-nav-block {
    display: none;
    padding: 0.75rem 1rem;
    background-color: rgb(0 0 0);
    border-bottom: 1px solid rgb(51 51 51);
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: 60px;
}

.mobile-menu-btn {
    background-color: transparent;
    border: none;
    color: rgb(255 255 255);
    height: 40px;
    width: 40px;
    border-radius: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0, 161, 155, 0.3);
    display: none;
    flex-direction: column;
    padding: 0;
    z-index: 1002;
    position: relative;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.burger-line {
    display: block;
    height: 2px;
    width: 20px;
    position: absolute;
    left: 10px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    transform-origin: center;
}

.burger-line:nth-child(1) {
    top: 13px;
}

.burger-line:nth-child(2) {
    top: 19px;
}

.burger-line:nth-child(3) {
    top: 25px;
}

.burger-checkbox:checked + .mobile-menu-btn .burger-line:nth-child(1) {
    transform: rotate(45deg);
    top: 19px;
}

.burger-checkbox:checked + .mobile-menu-btn .burger-line:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.burger-checkbox:checked + .mobile-menu-btn .burger-line:nth-child(3) {
    transform: rotate(-45deg);
    top: 19px;
}
/*.burger-line:not(:last-child) {*/
/*    margin-bottom: 3px;*/
/*}*/
/* Оверлей */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 998;
}

/*!* Состояние активного бургера *!*/
/*    .mobile-menu-btn.active .burger-line:nth-child(1) {*/
/*        transform: rotate(45deg) translate(6px, 6px);*/
/*        width: 60%;*/
/*    }*/

/*    .mobile-menu-btn.active .burger-line:nth-child(2) {*/
/*        opacity: 0;*/
/*    }*/

/*    .mobile-menu-btn.active .burger-line:nth-child(3) {*/
/*        transform: rotate(-45deg) translate(6px, -6px);*/
/*    }*/

    .mobile-menu-title {
        color: rgb(255 255 255);
        font-weight: 700;
        font-size: 1.125rem;
        line-height: 1.75rem;
        margin: 0 auto;

    }
li {
    margin: 0;
    padding: 0;
}
.burger-checkbox {
  position: absolute;
  visibility: hidden;
}
.burger {
    color: rgb(255, 255, 255);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0, 161, 155, 0.3);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    display: block;
    flex-direction: column;
    padding: 0;
    z-index: 1001;
    position: relative;
}
/*.burger::before,*/
/*.burger::after {*/
/*  content: '';*/
/*  left: 2px;*/
/*  right: 2px;*/
/*  position: absolute;*/
/*  display: block;*/
/*  height: 2px;*/
/*  border-radius: 12px;*/
/*  width:80%;*/
/*  background-color: rgba(0, 161, 155, 0.3);*/
/*}*/
/*.burger::before {*/
/*  top: 0;*/
/*  box-shadow: 0 11px 0 #000;*/
/*  transition: box-shadow .3s .15s, top .3s .15s, transform .3s;*/
/*}*/
/*.burger::after {*/
/*  bottom: 0;*/
/*  transition: bottom .3s .15s, transform .3s;*/
/*}*/
.burger-checkbox:checked + .mobile-menu-btn .burger-line:nth-child(1) {
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1px;
}

.burger-checkbox:checked + .mobile-menu-btn .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-checkbox:checked + .mobile-menu-btn .burger-line:nth-child(3) {
    transform: rotate(-45deg);
    top: 50%;
    margin-top: -1px;
}
.menu-list {
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 50px 0 0 0;
  margin: 0;
  background: black;
  list-style-type: none;
  transform: translateX(-100%);
  transition: .3s;
  width: 275px;
  height: auto;
}
.menu-item {
  display: block;
  padding: 8px;
  color: white;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
}
.menu-item:hover {
  background: rgba(255,255,255,.2)
}
.burger-checkbox:checked ~ .menu-list {
  transform: translateX(0);
}
/* Sidebar Styles */
.sidebar {
    width: 288px;
    background-color: #000000;
    border-right: 1px solid #333333;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 50;
    transition: transform 0.3s ease;
}

.sidebar-header {
    padding: 24px;
}

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

.logo-icon {
    width: 48px;
    height: 48px;
    background-color: #00A19B;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 0 20px rgba(0, 161, 155, 0.3);
}

.logo-text h1 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
}

.logo-text p {
    font-size: 14px;
    color: #888888;
}

/* Navigation Menu */
.sidebar-menu {
    flex: 1;
    padding: 0 16px;
}

.menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: #CCCCCC;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.menu-item:hover {
    color: white;
    background-color: #1A1A1A;
}

.menu-item:active {
    background-color: #00A19B;
    color: white;
}

.menu-item:focus {
    background-color: #00A19B;
    border-radius: 0.75rem;
    color: white;
}

.menu-item::before {
    content: '';
    position: absolute;
    background: rgba(0, 161, 155);
}
/*
.menu-item::after {
    content: '';
    position: absolute;
    color: white;
    background: rgba(0, 161, 155);

}*/
/*
.menu-item.active::after {
            content: '';
            position: absolute;
            right: 16px;
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            animation: pulse 2s infinite;
}*/
/*
 .menu-item {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            margin-bottom: 8px;
            border-radius: 12px;
            text-decoration: none;
            color: #888888;
            font-weight: 500;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            border: none;
            background: none;
            cursor: pointer;
            font-family: inherit;
            font-size: inherit;
        }

        .menu-item::before {
            content: '';
            position: absolute;
            background: rgba(0, 161, 155);
        }


        .menu-item:hover {
            color: #CCCCCC;
            background-color: #1A1A1A;
        }

        .menu-item.active {
            background-color: #00A19B;
            color: white;
        }

        .menu-item.active::after {
            content: '';
            position: absolute;
            right: 16px;
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        */

/* User Profile */

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid #333333;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #1A1A1A;
    border-radius: 12px;
    margin-bottom: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(0, 161, 155, 0.3);
}

.user-name {
    color: white;
    font-weight: 500;
    font-size: 14px;
}

.user-email {
    color: #888888;
    font-size: 12px;
}

.logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: none;
    border: none;
    color: #CCCCCC;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    color: white;
    background-color: #1A1A1A;
}

/* User Profile new*/

.navigation-fixed {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-property: transform;
    left: 0;
    top: 0;
    bottom: 0;
    position: static;
}

.profile-container {
    padding: 0.5rem;
    width: 100%;
}

.profile {
    padding: 0.75rem;
    background-color: rgb(26 26 26);
    border-radius: 0.75rem;
    border: 1px solid rgb(26 26 26);
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.profile-img {
    border: 1px solid rgb(0 161 155 / 0.3);
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
}

.profile-wrap {
    min-width: 0;
    width: 100%;
}

.profile-name {
    color: rgb(255 255 255);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-mail {
    color: rgb(136 136 136);
    font-size: 0.75rem;
    line-height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-btn {
    transition-duration: 200ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(204 204 204);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
    width: 100%;
}

.profile-link {
    color: rgb(204 204 204);
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
}

.profile-link:hover {
    color: rgba(255 255 255);
}

.profile-link:active {
    color: rgb(0 161 155);
}

.pd-avatar {
    border: 1px solid rgb(51 51 51);
}

.password-wrap {
    max-width: 28rem;
}

.login-wrap {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(204 204 204);
    font-weight: 500;
    padding: 1rem;
    background-color: rgb(26 26 26);
    border: 1px solid rgb(26 26 26);
    border-radius: 0.75rem;
    gap: 1rem;
    align-items: center;
    text-align: center;
    width: 100%;
}

.menu-item-span {
    font-weight: 600;
}
/* Main Content */
.main-content {
    flex: 1;
    margin-left: 288px;
    background-color: #000000;
    min-height: 100vh;
}

/*garage*/

.garage-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.car-header {
    flex: 1;
}

.page-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.page-span {
    margin: 0;
    color: rgb(204 204 204);
    font-size: 1.1rem;
    line-height: 1.275rem;
}

.add-car {
    display: flex;
    align-items: flex-start;
}

.add-car-btn {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background: rgb(0 161 155);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(0 161 155);
    gap: 0.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    box-shadow: rgba(0, 161, 155, 0.2) 0 0 20px;
}

.add-car-btn:hover {
    opacity: 1;
    background-color: rgb(0 139 133);
    box-shadow: rgba(0, 161, 155, 0.2) 0 0 20px;;
}
.car-card {
    display: flex;
    max-width: 400px;
    height: 400px;
    gap: 1.5rem;
}

.car-span {
    color: rgb(204 204 204);
    gap: 0.5rem;
    align-items: center;
}

.car-cards-btns {
    position: absolute;
    gap: 0.5rem;
    top: 0.75rem;
    right: 0.75rem;
}

.car-cards-btn{
    transition-duration: 200ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(204 204 204);
    background-color: rgb(0 0 0 / 0.5);
    border: none;
    border-radius: 9999px;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
}

.car-cards-btn-redact:hover {
    color: rgb(255 255 255);
    background-color: rgb(0 161 155);
}

.car-cards-btn-del:hover {
    color: rgb(248 113 113);
    background-color: rgb(239 68 68 / 0.2);
}

.gd-form-mini-btn {
    position: relative;
}

/*
        .divider {
            height: 1px;
            background: #333333;
            margin: 24px 0;
        }
*/
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gap-6 {
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Стили карточек */
.car-card {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    opacity: 1;
    background: rgb(26 26 26);
    border: 1px solid rgb(51 51 51);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    min-height: 280px;
    max-width: 400px;
    flex-direction: column;
}

.car-card:hover {
    border-color: rgb(0 161 155);
}

.car-info {
    padding: 24px;
}

.car-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 0.25rem;
}

.car-span {
    gap: 1rem;
    align-items: center;
    color: rgb(204 204 204);
    margin-bottom: 1rem;
}

.car-year {
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 8px;

}

.car-color {
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 8px;
}

.car-details {
    justify-content: space-between;
    align-items: center;
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 1rem;
}

.detail-label {
    color: rgb(204 204 204);
}

.vin-number {
    color: #FFFFFF;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.mileage {
    color: #FFFFFF;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.buttons {
    gap: 0.5rem;
    margin-top: auto;
}

.btn {
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}

.btn-primary {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(0 161 155);
    font-weight: 500;
    opacity: 1;
    background: rgb(0 161 155 / 0.1);
    border: 1px solid rgb(0 161 155 / 0.3);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;

}

.btn-primary:hover {
    background-color: rgb(0 161 155 / 0.2);
    border-color: rgb(0 161 155 / 0.3);
}

.btn-secondary {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(204 204 204);
    font-weight: 500;
    opacity: 1;
    background: transparent;
    border: 1px solid rgb(51 51 51);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
}

.btn-secondary:hover {
    color: #efefef;
    border-color: rgb(0 161 155);
}

.car-img {
    position: relative;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    object-fit: cover;
    overflow: hidden;
    background-image: linear-gradient(to bottom right, #333333, #1A1A1A);
    border-radius: 0.5rem;
    height: 12rem;
    min-height: 12rem;
    width: 100%;
    margin-bottom: 0.5rem;
}
/*
.car-img-detail {
    transition-duration: 300ms;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    object-fit: cover;
    width: 100%;
    height: 100%;
}*/


/*order_history*/
.page-header {
    margin-bottom: 2rem;
}

.relative {
    position: relative;
  /*  margin-bottom: 1.5rem;*/
}

.absolute {
    position: absolute;
    opacity: 1;
    background-color: rgb(51 51 51);
    width: 1px;
    height: 90%;
    top: 4rem;
    left: 1.5rem;
}

.svg1 {
    opacity: 1;
    color: rgb(74 222 128);
}

.svg2 {
    color: rgb(0 161 155);
    opacity: 1;
}

.svg3 {
    color: rgb(250 204 21);
}

.order_history_svg1{
    margin-right: 1.5rem;
    opacity: 1;
    background-color: rgb(26 26 26);
    border: 2px solid rgb(0 161 155);
    border-radius: 9999px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    z-index: 10;
}

svg {
    display: block;
    vertical-align: middle;
}

a {
    text-decoration:none;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex_col {
    flex-direction: column;
}

.card {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgb(26 26 26);
    border: 1px solid rgb(51 51 51);
    opacity: 1;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.card:hover {
   border-color: rgb(0 161 155 / 0.5);
}

.card-completed:hover {
    border-color: rgba(51 51 51);
}

.card-header {
    justify-content: space-between;
    align-items: flex-start;
}

.card-info {
    gap: 1rem;
    align-items: flex-start;
}

.order-info {
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.card-title {
    color: rgb(255 255 255);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin: 0;
}

.card-title-completed {
    text-decoration-line: line-through;
    color: rgb(255 255 255);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.card-service {
    color: rgb(204 204 204);
    opacity: 1;
    font-size: 0.875rem;
    line-height: 1.25rem;
    gap: 1rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

.card-service-completed {
    color: rgb(136 136 136);
}

.card-span {
    gap: 0.25rem;
    align-items: center;
}
.card-text {
    color: rgb(136 136 136);
    line-height: 1.625;
    font-size: 0.875rem;
}

.order-subtitle {
    color: rgb(204 204 204);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.order-date {
    color: rgb(204 204 204);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.order-status {
    opacity: 1;
    color: rgb(74 222 128);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: rgb(74 222 128 / 0.1);
    border: 1px solid rgb(74 222 128 / 0.3);
    border-radius: 9999px;
    gap: 0.25rem;
    align-items: center;
}

.order-status2 {
    opacity: 1;
    color: rgb(0 161 155);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: rgb(0 161 155 / 0.1);
    border: 1px solid rgb(0 161 155 / 0.3);
    border-radius: 9999px;
    gap: 0.25rem;
    align-items: center;
}

.order-status3 {
    opacity: 1;
    color: rgb(250 204 21);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: rgb(250 204 21 / 0.1);
    border: 1px solid rgb(250 204 21 / 0.3);
    border-radius: 9999px;
    gap: 0.25rem;
    align-items: center;
}

.order-status4 {
    opacity: 1;
    color: rgb(156 163 175);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: rgb(156 163 175 / 0.1);
    border: 1px solid rgb(156 163 175 / 0.3);
    border-radius: 9999px;
    gap: 0.25rem;
    align-items: center;
}

.order-details {
    text-align: right;
}

.detail-item {
    color: rgb(0 161 155);
    opacity: 1;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.25rem;
}

.detail-btn {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    color: rgb(204 204 204);
    background-color: transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
    align-items: center;
    gap: 0.5rem;
}

.detail-btn:hover {
    color: rgb(255 255 255);
}

.detail {
    font-size: 0.875rem;
    line-height: 1.25rem;
    justify-content: space-between;
    align-items: center;
}


.divider {
    height: 1px;
    background: #333333;
    margin: 20px 0;
}

/* Адаптивность */
@media (max-width: 1024px) {
    .main-container {
        margin-left: 0;
        /*padding: 1rem;*/
        /*padding-top: 5rem;*/
    }
    .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-top: 4rem;
    }

}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .filters {
        width: 100%;
        overflow-x: auto;
    }

    .order-header {
        flex-direction: column;
        gap: 12px;
    }

    .order-actions {
        width: 100%;
        justify-content: stretch;
    }

    .action-btn {
        flex: 1;
    }

    .glowing-lines {
        display: none;
    }
}

/*recommendation*/

.rec-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.rec-wrap-active {
    margin-bottom: 3rem;
}

.rec-wrap {
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.rec-title {
    color: rgb(255 255 255);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 0;
}

.rec-active-counter {
    color: rgb(255 255 255);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.25rem 0.75rem;
    background-color: rgb(0 161 155);
    opacity: 1;
    border-radius: 9999px;
}

.rec-svg {
    opacity: 1;
    color: rgb(0 161 155);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: rgb(0 161 155 / 0.1);
    border: 1px solid rgb(0 161 155 / 0.3);
    border-radius: 0.75rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
}

.rec-svg-completed {
    background-color: rgb(74 222 128 / 0.1);
    border: 1px solid rgb(74 222 128 / 0.3);
}

.rec-service {
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.rec-status-high {
    opacity: 1;
    color: rgb(248 113 113);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: rgb(248 113 113 / 0.1);
    border: 1px solid rgb(248 113 113 / 0.3);
    border-radius: 9999px;
    gap: 0.25rem;
    align-items: center;
}

.text-red {
    color: rgb(248 113 113);
}

.text-yellow {
    color: rgb(250 204 21);
}

.text-green {
    color: rgb(74 222 128);
}

.rec-date {
    color: rgb(204 204 204);
    line-height: 1.625;
    font-size: 0.875rem;
}

.rec-round {
    background-color: rgb(248 113 113);
    border-radius: 9999px;
    width: 0.75rem;
    height: 0.75rem;
}

.rec-btns {
    gap: 0.75rem;
    margin-top: 1rem;
}

.rec-sign_up {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(255 255 255);
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    background-color: rgb(0 161 155);
    border-radius: 0.75rem;
    border: 1px solid rgb(0 161 155);
}

.rec-sign_up:hover {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgb(0 139 133)
}
.rec-completed {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(204 204 204);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    border-radius: 0.75rem;
    border: 1px solid rgb(51 51 51);
}

.rec-completed:hover {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(255 255 255);
    border: 1px solid rgb(0 161 155);
}

.rec-completed-counter {
    color: rgb(74 222 128);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.25rem 0.75rem;
    background-color: rgb(74 222 128 / 0.2);
    border-radius: 9999px;
}

/*garage_detail*/
.gd-container {
    position: sticky;
    padding: 10rem;
    background-color: rgb(0 0 0 / 0.5);
    justify-content: center;
    align-items: center;
    z-index: 50;
    inset: 0;
}

.gd-form {
    display: flex;
    flex-direction: column;
    max-width: 28rem;
    width: 100%;
    padding: 1.5rem;
    background-color: rgb(26 26 26);
    border: 1px solid rgb(51 51 51);
    border-radius: 1rem;
    align-items: center;
    justify-content: center;
}

.gd-form-title {
    color: rgb(255 255 255);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: center;
    margin: 0 0 1.5rem 0;
}

.gd-form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgb(204 204 204);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.gd-form-input {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    color: rgb(255 255 255);
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgb(0 0 0);
    border: 1px solid rgb(51 51 51);
    border-radius: 0.5rem;
}
.gd-form-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: rgb(0 161 155);
}

.gd-form-gap {
    gap: 1rem;
}

.gd-form-btns {
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.gd-form-cancel {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(204 204 204);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    border-radius: 0.5rem;
    border: 1px solid rgb(51 51 51);
}

.gd-form-cancel:hover {
    border-color: rgb(85 85 85);
}

.gd-form-add {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(255 255 255);
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    background-color: rgb(0 161 155);
    border-radius: 0.5rem;
    border: 1px solid rgb(0 161 155);
}

.gd-form-add:hover {
    background-color: rgb(0 139 133);
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.form-group {
    margin-bottom: 0.5rem;
}

.password-form-input {
    width: 100%;
    margin-bottom: 1rem;
}

.password-login {
    display: block;
    width: 100%;
    text-align: center;
}

.password-offset {
    align-items: center;
    justify-content: space-between;
}

.password-link {
    text-align: center;
    color: rgb(255 255 255);
}

.password-link:not(:last-child) {
    margin-right: 0.5rem;
}


.password-link:hover {
    color: rgb(204 204 204);
}

.password-link:active {
    color: rgb(0 161 155);
}

.password-wrap {
    max-width: 28rem;
}

.input-module_password {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* Стили для загрузки файлов */

.file-wrap {
    margin-bottom: 1rem;
}

.file-upload-container {
    margin-bottom: 8px;
}

.file-upload-input {
    display: none;
}

.file-upload-label {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 2px dashed rgb(51 51 51);
    border-radius: 6px;
    background-color: rgb(0 0 0);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 60px;
}

.file-upload-label:hover {
    border-color: rgb(0 161 155);
    background-color: #6b7280;
}

.file-upload-icon {
    font-size: 18px;
    margin-right: 8px;
}

.file-upload-text {
    color: #6b7280;
    font-size: 14px;
}

.file-list {
    margin-top: 8px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 6px;
    background-color: #6b7280;
    border-radius: 4px;
    font-size: 14px;
}

.file-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 16px;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 3px;
}

.file-remove:hover {
    background-color: #ef4444;
    color: white;
}

.file-upload-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.gd-form-input.error {
    border-color: #dc3545;
}

#manual_car_input {
    transition: all 0.3s ease;
}

.manual-car-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
    margin-bottom: 6px;
}

textarea {
    max-width: 100%;
    min-width: 100%;
    min-height: 10rem;
    overflow: auto;
}

.order-service-form {
    display: flex;
    flex-direction: column;
    max-width: 28rem;
    width: 100%;
    padding: 1.5rem;
    background-color: rgb(26 26 26);
    border: 1px solid rgb(51 51 51);
    border-radius: 1rem;
    justify-content: center;
}

.sign-in {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
}

.reg-subtitle {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25rem;
    margin-bottom: 1rem;
}

.offset {
    margin-top: 1rem;
    text-align: center;
}

.menu-btn-delete-wrap {
    position: relative;
    width: 100%;
    max-width: 28rem;
}

.menu-btn {
    position: absolute;
    top: 0;
    right: 5px;
    cursor: pointer;
    z-index: 10;
}

.menu-btn-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: rgb(204 204 204);
}

.menu-btn svg {
    width: 100%;
    height: 100%;
    fill: rgb(204 204 204);
}

.menu-btn svg:hover {
    color: rgb(255 255 255);
    border: 1px solid rgb(204 204 204);
    border-radius: 0.5rem;
}
/*Personal-data*/
/*
.pd-wrap {
    display: flex;
    width: 100%;
    position: relative;
    flex-direction: column;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: center;
}
*/
.personal-data-img {
    display: inline-block;
    width: 10rem;
    height: 10rem;
    border: 1px solid rgb(0 161 155 / 0.3);
    border-radius: 9999px;
    margin-bottom: 2rem;
    text-align: center;
    justify-content: center;
    object-fit: cover;
}

.pd-title-center {
    align-items: center;
    justify-content: center;
}

.pd-car-cards-btns {
    position: absolute;
    bottom: -5px;
    left: 70%;
    gap: 0.5rem;
}

.pd-car-cards-btn {
    background-color: rgb(51 51 51);
}

.pd-relative {
    position: relative;
    text-align: center;
    width: 100%;
    justify-content: space-between;
}

.toggle {
    fill: rgb(51 51 51);
}
/*
.pd-form {
    width: 100%;
    align-items: center;
    justify-content: center;
}*/

.pd-btn-cancel {
    display: flex;
    align-items: center;
    justify-content: center;

}

.pd-btn-save {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-btns {
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Hero Section */
.hero-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 2rem;
}

.hero-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #000000 0%, #0D0D0D 50%, #1A1A1A 100%);
}

.glowing-lines {
    position: absolute;
    inset: 0;
    opacity: 0.2;
}

.line {
    position: absolute;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #00A19B, transparent);
    animation: glow-pulse 3s infinite ease-in-out;
}

.line-1 {
    top: 25%;
    left: 25%;
    height: 128px;
    transform: rotate(45deg);
    animation-delay: 0s;
}

.line-2 {
    top: 33%;
    right: 33%;
    height: 96px;
    transform: rotate(-12deg);
    animation-delay: 1s;
}

.line-3 {
    bottom: 25%;
    left: 33%;
    height: 112px;
    transform: rotate(25deg);
    animation-delay: 2s;
}

.hero-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    position: relative;
}

.car-display {
    position: relative;
    height: 14rem;
    width: 22rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(0 161 155 / 0.3);
    border-radius: 1.5rem;
    background-image: linear-gradient(to bottom right, #333333, #1A1A1A);
    cursor: pointer;
    box-shadow: none;
    animation-duration: .7s;
    transition-duration: 700ms;
    transition-property: opacity;
    opacity: 1;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0;
    flex-shrink: 0;
}

.car-display:hover {
    opacity: 1;
    background-image: linear-gradient(to right, rgb(0 161 155 / 0.1), rgb(0 161 155 / 0.2));
}

.car-container {
    /*position: absolute;*/
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.car-container svg {
    opacity: 0.8;
    color: rgb(0 161 155);
    width: 120px;
    height: 120px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(0, 161, 155, 0.5));
}
 /*Hero CTA */

.hero-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.hero-cta-text {
    font-size: 18px;
    color: #CCCCCC;
    margin-bottom: 32px;
    max-width: 600px;
}

.cta-button {
    background-color: rgb(0, 161, 155);
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0 30px rgba(0, 161, 155, 0.3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
}

.cta-button:hover {
    background-color: rgb(0 149 143);
    box-shadow: 0 0 40px rgba(0, 161, 155, 0.5);
}


.hero-cta-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hero-cta-text {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: #CCCCCC;
    max-width: 42rem;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.cta-button {
    background-color: rgb(0, 161, 155);
    color: white;
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    padding: clamp(0.875rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0 30px rgba(0, 161, 155, 0.3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    flex: 1;
    min-width: 200px;
    justify-content: center;
}

.cta-button:hover {
    background-color: rgb(0, 149, 143);
    box-shadow: 0 0 40px rgba(0, 161, 155, 0.5);
}

.cta-title {
    text-align: center;
}
/* Services Section */
.services-section {
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.services-header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.services-title {
    font-size: 36px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.services-subtitle {
    font-size: 18px;
    color: #CCCCCC;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 1300px;
    margin: 0 auto;
    align-items: stretch;
}
/* .services-grid {*/
/*    display: grid;*/
/*    !*grid-template-columns: repeat(3, 1fr);*!*/
/*    gap: 20px;*/
/*     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
/*    align-items: stretch;*/
/*}*/
/* Service Cards */
.service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgb(0 0 0);
    border: 1px solid rgb(51 51 51);
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    width: 400px;
    min-height: 350px;
    z-index: 1;
}
.h-full {
    height: 100%;
}

.service-card-content {
    /*margin-bottom: auto;*/
}

.service-card:hover {
    border-color: #00A19B;
    box-shadow: 0 0 30px rgba(0, 161, 155, 0.2);
}
/*
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 161, 155, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover::before {
    opacity: 1;
}
*/
.service-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: rgb(0 161 155 / 0.1);
    border: 1px solid rgb(0 161 155 / 0.3);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: rgb(0 161 155);
}

.service-icon-i:hover {
    background-color: rgb(0 161 155 / 0.2);
    border-color: rgb(0 161 155 / 0.5);
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
}

.service-name{
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    overflow: auto;
}

.service-descr{
    font-size: 0.875rem;;
    color: rgb(204 204 204);
    line-height: 1.625;
    margin-bottom: 24px;
    flex-grow: 1;
    max-height: 4.5rem;
    overflow: auto;
}

.hidden-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hidden-scroll::-webkit-scrollbar {
  display: none;
}

.service-price {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: rgb(0 161 155);
    margin-bottom: 1rem;
}

.service-button {
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color:  rgb(0 161 155);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    gap: 0.5rem;
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    position: relative;
    z-index: 2;
    margin-top: auto;
}

.service-button .service-svg {
    /*transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);*/
}

.service-button:hover {
    --tw-shadow-color: rgb(0 161 155 / 0.3);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: 0 0 20px rgba(0, 161, 155, 0.2);
}

.service-button span {
    flex-grow: 1;
}

.service-card:hover .service-button .service-svg {
    transform: translateX(0.25rem);
}

.text-sm {
    font-weight: 500;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
}
/* Animations */
@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.2;
        filter: blur(0px);
    }
    50% {
        opacity: 0.6;
        filter: blur(1px);
    }
}

@keyframes neon-pulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(0, 161, 155, 0.5), 0 0 10px rgba(0, 161, 155, 0.5), 0 0 20px rgba(0, 161, 155, 0.5);
    }
    50% {
        text-shadow: 0 0 10px rgba(0, 161, 155, 0.8), 0 0 20px rgba(0, 161, 155, 0.8), 0 0 40px rgba(0, 161, 155, 0.8);
    }
}


/* Responsive Design */
@media (max-width: 1024px) {

    .hero-cta-title {
        font-size: 36px;
    }

    .services-grid {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .sidebar {
        transform: translateX(-100%);
    }

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

    .main-content {
        margin-left: 0;
        padding: 0;
    }

    .page-title {
        text-align: center;
    }

    .page-span {
        text-align: center;
    }
}
/* Мобильные стили */
@media (max-width: 1024px) {
    .mobile-nav-block {
        display: flex;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 288px;
        background-color: #000000;
        border-right: 1px solid #333333;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }

    /* Открытое состояние сайдбара */
    .sidebar.active {
        transform: translateX(0);
    }

    /* Открытое состояние оверлея */
    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Анимация бургер-кнопки в крестик */
    .mobile-menu-btn.active .burger-line:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
        width: 60%;
    }

    .mobile-menu-btn.active .burger-line:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active .burger-line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
        width: 60%;
    }

    /* Плавная анимация для линий бургера */
    .burger-line {
        transition: all 0.3s ease;
    }

    /* Блокировка скролла при открытом меню */
    body.menu-open {
        overflow: hidden;
    }
}

/* Десктоп - скрываем мобильные элементы */
@media (min-width: 1025px) {
    .mobile-nav-block {
        display: none;
    }

    .mobile-menu-btn {
        display: none;
    }

    .sidebar-overlay {
        display: none;
    }

    .sidebar {
        position: fixed;
        transform: translateX(0) !important;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 0;
    }

    .page-header {
        margin-bottom: 1rem;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .page-span {
        font-size: 16px;
    }

    .buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .car-icon {
        width: 80px;
        height: 80px;
    }

    .hero-cta-title {
        font-size: 28px;
    }

    .hero-cta-text{
        font-size: 16px;
    }

    .hero-section {
        height: 30rem;
    }

    .services-section {
        padding: 32px 16px;
    }

    .services-title {
        font-size: 1.3rem;
    }

    .services-subtitle {
        font-size: 1rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-card {
        padding: 24px;
        max-width: 300px;
    }

    .rec-title {
        font-size: 1.3rem;
    }

    .rec-wrap-active {
        margin-bottom: 1rem;
    }
}

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

    .car-header {
        margin-bottom: 0.5rem;
    }

    .gd-container {
        padding: 1rem 5rem 0 5rem;
    }
}

@media (max-width: 500px) {

    .page-title {
        font-size: 1.275rem;
    }

    .page-span {
        font-size: 0.8rem;
    }

    .page-header {
        margin-bottom: 1rem;
    }
    .order_history_svg1, .order_history_svg2, .order_history_svg3, .absolute {
        display: none;
    }

    /* История заказов */
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .card-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .card-info {
        width: 100%;
    }

    .order-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-service {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .order-details {
        text-align: left;
        width: 100%;
    }

    .detail {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .services-title {
        font-size: 1.5rem;
    }

    .car-display {
        width: 16rem;
        height: 10rem;
    }
}

@media (max-width: 425px) {
    .page-span{
        margin: 0 auto 0.5rem auto;
        max-width: 200px;
        text-align: center;
        align-items: center;
    }
    .page-header {
        margin-bottom: 0;
    }

    .card {
        padding: 0.5rem;
    }

    .card-title {
        font-size: 1rem;
    }

    .rec-title {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .rec-service {
        justify-content: space-between;
    }

    .rec-btns {
        justify-content: center;
    }

    .rec-sign_up {
        max-width: 45%;
        max-height: 5rem;
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .rec-completed {
        max-width: 45%;
        max-height: 5rem;
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .rec-wrap-active {
        margin-bottom: 0.5rem;
    }

    .rec-wrap {
        align-items: center;
        justify-content: center;
    }

    .rec-active-counter, .rec-completed-counter {
        padding: 0.15rem 0.5rem;
    }

    .rec-round {
        display: none;
    }

    .gd-container {
        padding: 0.5rem;
    }

    .gd-form {
        width: 100%;
        padding: 1rem;
    }

    .sign-in {
        font-size: 1rem;
        max-width: 150px;
        margin: 0 auto 0.5rem auto;
    }

    .reg-subtitle {
        font-size: 0.875rem;
        text-align: center;
    }

    .password-offset {
        flex-direction: column;
    }

    .service-card {
        width: 300px;
        text-align: center;
    }

    .services-header {
        margin-bottom: 1rem;
    }

    .services-section {
        padding: 1rem;
    }

    .hero-section {
        min-height: auto;
        height: 100%;
        padding: 1rem;
    }

    .hero-background {
        display: none;
    }

    .hero-cta-title {
        margin: 0;
        line-height: 1.5rem;
    }

    .hero-cta-text {
        margin-bottom: 0;
    }
}

@media (max-width: 375px) {
    .services-section {
        padding: 0;
    }
}
/* Мобильная адаптация для 320px */
@media (max-width: 320px) {
    /* Общие стили */
    body {
        font-size: 14px;
    }

    .main-container {
        padding: 0.5rem;
        margin: 0;
        width: 100%;
    }

    /* Навигация и сайдбар */
    /*.mobile-menu-btn {*/
    /*    top: 10px;*/
    /*    left: 10px;*/
    /*    width: 40px;*/
    /*    height: 40px;*/
    /*}*/

    .sidebar {
        width: 100%;
        transform: translateX(-100%);
    }

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

    .sidebar-header {
        padding: 16px;
    }

    .logo-icon {
        width: 40px;
        height: 40px;
    }

    .logo-text h1 {
        font-size: 18px;
    }

    .logo-text p {
        font-size: 12px;
    }

    /* Главный контент */
    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .hero-section {
        padding: 0 10px;
    }

    .hero-cta {
        bottom: 40px;
        width: 100%;
        padding: 0 15px;
    }

    .hero-cta-title {
        font-size: 20px;
        margin-bottom: 0;
        line-height: 2rem;
    }

    .hero-cta-text {
        font-size: 14px;
        margin-bottom: 0;
        line-height: 1.4;
    }

    .car-display {
        border: none;
        background-image: none;
    }

    .cta-button {
        font-size: 16px;
        padding: 12px 24px;
        width: 100%;
        max-width: 280px;
    }

    .page-title {
        margin: 0;
    }
    /* Гараж */
    .garage-header {
        flex-direction: column;
        gap: 0;
        margin-bottom: 1rem;
    }

    .page-header {
         margin-bottom: 0.5rem;
     }

    .add-car-btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }

    .car-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .car-card {
        min-height: auto;
        height: 500px;
    }

    .car-info {
        padding: 0.5rem;
    }

    .car-title {
        font-size: 18px;
    }

    .car-img {
        height: 140px;
    }

    .buttons {
        flex-direction: column;
        gap: 8px;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    /* История заказов */
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .card-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .card-info {
        width: 100%;
    }

    .order-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .card {
        padding: 0.5rem;
    }

    .card-title {
        font-size: 14px;
        line-height: 1.2rem;
    }

    .card-title-completed {
        font-size: 14px;
        line-height: 1.2rem;
    }

    .card-service {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0;
        gap: 8px;
    }

    .card-info {
        gap: 0.5rem;
    }
    .order-details {
        text-align: left;
        width: 100%;
    }

    .detail-item {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .detail {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .detail-btn {
        min-height: 22px;
    }
/*
    .absolute {
        left: 1rem;
        top: 3rem;
    }
/*
    .order_history_svg1 {
        margin-right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }
*/
    /* Рекомендации */
    .rec-wrap {
        align-items: flex-start;
        margin-bottom: 0.5rem;
        gap: 12px;
    }

    .rec-btns {
        max-width: 100%;
        width: 100%;
        margin-top: 0.5rem;
    }

    .rec-sign_up,
    .rec-completed {
        width: 100%;
        justify-content: center;
    }

    .rec-svg {
        width: 2.5rem;
        height: 2.5rem;
    }
    /* Формы */
    .gd-container {
        padding: 0.5rem;
    }

    .gd-form {
        width: 100%;
        max-width: none;
        padding: 1rem;
    }

    .gd-form-title {
        font-size: 20px;
    }

    .gd-form-btns {
        flex-direction: column;
    }

    .gd-form-cancel,
    .gd-form-add {
        width: 100%;
    }

    .gd-form-add {
        padding: 0.5rem;
    }
    /* Личные данные */
    /*
    .pd-wrap {
        padding: 1.5rem;
    }*/

    .personal-data-img {
        width: 8rem;
        height: 8rem;
    }

    .pd-car-cards-btns {
        left: 60%;
        top: 80%;
    }

    /* Сервисы */

    .services-header {
        margin-bottom: 32px;
    }

    .services-title {
        font-size: 24px;
    }

    .services-subtitle {
        font-size: 14px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .service-card {
        padding: 1rem;
    }

    .service-icon {
        width: 3rem;
        height: 3rem;
    }

    .service-card h3 {
        font-size: 18px;
    }

    .service-price {
        font-size: 20px;
    }

    /* Текстовые элементы */
    h1, h2, h3 {
        word-wrap: break-word;
    }

    /* Улучшение touch targets */
    button,
    .btn,
    .menu-item,
    .service-button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Убираем горизонтальный скролл */
    html, body {
        max-width: 100%;
    }

    /* Улучшаем читаемость текста */
    p, span, div {
        line-height: 1.4;
    }

    /* Адаптивные отступы */
    .container,
    .garage-header,
    .card,
    .service-card {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Дополнительные улучшения для очень маленьких экранов */
@media (max-width: 280px) {
    .main-container {
        padding: 0.25rem;
    }

    .hero-cta h1 {
        font-size: 20px;
    }

    .page-title {
        font-size: 20px;
        margin: 0 auto;
    }

    .garage-header {
        justify-content: space-between;
        align-items: center;
    }

    .car-info {
        padding: 12px;
    }

    .add-car-btn {
         gap: 0;
    }

    .card {
        padding: 0.75rem;
    }

    .detail-btn {
        min-height: 2rem;
        min-width: 2rem;
    }

    .sign-in {
        max-width: 150px;
        margin: 0 auto;
    }

}

/* Исправление проблем с виртуальной клавиатурой на мобильных */
@media (max-width: 320px) and (max-height: 600px) {
    .gd-container {
        align-items: flex-start;
        padding-top: 20px;
    }

    .hero-section {
        height: 40vh;
    }
}

/* Поддержка landscape ориентации */
@media (max-width: 320px) and (orientation: landscape) {
    .hero-section {
        height: 70vh;
    }

    .sidebar {
        overflow-y: auto;
    }

    .gd-container {
        align-items: flex-start;
        padding: 10px;
    }
}
/*
.special-offers-container {
    padding: 2rem;
}
*/
.special-offers-center {
    padding-top: 4rem;
    padding-bottom: 4rem;
    text-align: center;
}

.special-offers-svg {
    margin: 0 auto 1rem auto;
    color: rgb(51 51 51);
}

.special-offers-subtitle {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: rgb(255 255 255);
}

.special-offers-span {
    color: rgb(204 204 204);
}


/* Animations */
@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.2;
        filter: blur(0px);
    }
    50% {
        opacity: 0.6;
        filter: blur(1px);
    }
}

@keyframes neon-pulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(0, 161, 155, 0.5), 0 0 10px rgba(0, 161, 155, 0.5), 0 0 20px rgba(0, 161, 155, 0.5);
    }
    50% {
        text-shadow: 0 0 10px rgba(0, 161, 155, 0.8), 0 0 20px rgba(0, 161, 155, 0.8), 0 0 40px rgba(0, 161, 155, 0.8);
    }
}



/*tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2,.ring-\[1rem\]{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-\[1rem\]{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1rem + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-\[\#ff0000\]{--tw-ring-opacity:1;--tw-ring-color:rgb(255 0 0/var(--tw-ring-opacity))}.ring-comeback-gray-300{--tw-ring-opacity:1;--tw-ring-color:rgb(149 150 151/var(--tw-ring-opacity))}.ring-red-500{--tw-ring-opacity:1;--tw-ring-color:rgb(238 102 103/var(--tw-ring-opacity))}.ring-opacity-50{--tw-ring-opacity:0.5}.ring-offset-2{--tw-ring-offset-width:2px}.ring-offset-4{--tw-ring-offset-width:4px}.ring-offset-\[\#ff0000\]{--tw-ring-offset-color:red}.ring-offset-red-500{--tw-ring-offset-color:#ee6667}.blur{--tw-blur:blur(8px)}.blur,.blur-0{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-0{--tw-blur:blur(0)}.blur-\[1rem\]{--tw-blur:blur(1rem)}.blur-\[1rem\],.blur-lg{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-lg{--tw-blur:blur(16px)}.blur-none{--tw-blur: }.blur-none,.brightness-100{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.brightness-100{--tw-brightness:brightness(1)}.contrast-100{--tw-contrast:contrast(1)}.contrast-100,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow-\[1rem\]{--tw-drop-shadow:drop-shadow(1rem)}.drop-shadow-\[1rem\],.drop-shadow-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0px 4px 10px 0px rgba(0,0,0,.15))}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale-0{--tw-grayscale:grayscale(0)}.grayscale-0,.hue-rotate-180{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hue-rotate-180{--tw-hue-rotate:hue-rotate(180deg)}.invert{--tw-invert:invert(100%)}.invert,.invert-0{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert-0{--tw-invert:invert(0)}.saturate-100{--tw-saturate:saturate(1)}.saturate-100,.sepia{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia:sepia(100%)}.sepia-0{--tw-sepia:sepia(0)}.filter,.sepia-0{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-0{--tw-backdrop-blur:blur(0)}.backdrop-blur-0,.backdrop-blur-none{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-none{--tw-backdrop-blur: }.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(0,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0,0,.2,1);transition-duration:.15s}.transition-none{transition-property:none}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-1000{transition-duration:1s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.will-change-scroll{will-change:scroll-position}.will-change-transform{will-change:transform}.content-none{--tw-content:none;content:var(--tw-content)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.duration-100{animation-duration:.1s}.duration-1000{animation-duration:1s}.duration-500{animation-duration:.5s}.duration-700{animation-duration:.7s}.ease-in{animation-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{animation-timing-function:linear}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}:root{--tablet-screen-min:640px;--desktop-screen-min:1232px}@font-face{font-family:iA Writer Mono;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff) format("woff")}@media (min-width:640px){.tablet\:text-body-md{font-size:1rem}.tablet\:text-body-md,.tablet\:text-body-sm{font-family:Inter,sans-serif;font-style:normal;line-height:150%;font-weight:400}.tablet\:text-body-sm{font-size:.875rem}.tablet\:comeback-text-body-md{font-size:.875rem;line-height:140%;font-weight:400}.tablet\:comeback-text-body-lg{font-size:1rem;line-height:140%;font-weight:400}}@media (min-width:1232px){.desktop\:comeback-text-body-xs{font-size:.625rem;line-height:140%;font-weight:400}.desktop\:comeback-text-body-sm{font-size:.75rem;line-height:140%;font-weight:400}.desktop\:comeback-text-body-md{font-size:.875rem;line-height:140%;font-weight:400}.desktop\:comeback-text-body-lg{font-size:1rem;line-height:140%;font-weight:400}}.focus-within\:border-\[\#357AFF\]:focus-within{--tw-border-opacity:1;border-color:rgb(53 122 255/var(--tw-border-opacity))}.focus-within\:text-\[\#357AFF\]:focus-within{--tw-text-opacity:1;color:rgb(53 122 255/var(--tw-text-opacity))}.data-\[state\=checked\]\:translate-x-\[100\%\][data-state=checked]{--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:border-comeback-gray-75[data-state=checked]{--tw-border-opacity:1;border-color:rgb(219 219 219/var(--tw-border-opacity))}.data-\[state\=checked\]\:border-comeback-gray-900[data-state=checked]{--tw-border-opacity:1;border-color:rgb(24 25 27/var(--tw-border-opacity))}.data-\[state\=checked\]\:bg-comeback-gray-25[data-state=checked]{--tw-bg-opacity:1;background-color:rgb(249 249 249/var(--tw-bg-opacity))}.data-\[state\=checked\]\:bg-comeback-gray-900[data-state=checked]{--tw-bg-opacity:1;background-color:rgb(24 25 27/var(--tw-bg-opacity))}.data-\[state\=checked\]\:text-comeback-gray-75[data-state=checked]{--tw-text-opacity:1;color:rgb(219 219 219/var(--tw-text-opacity))}.data-\[state\=checked\]\:text-white[data-state=checked]{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:bg-\[\#2E69DE\]:hover{--tw-bg-opacity:1;background-color:rgb(46 105 222/var(--tw-bg-opacity))}.hover\:bg-\[\#32333e\]:hover{--tw-bg-opacity:1;background-color:rgb(50 51 62/var(--tw-bg-opacity))}.hover\:bg-comeback-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(208 226 255/var(--tw-bg-opacity))}.hover\:bg-comeback-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(196 196 196/var(--tw-bg-opacity))}.hover\:bg-comeback-gray-25:hover{--tw-bg-opacity:1;background-color:rgb(249 249 249/var(--tw-bg-opacity))}.hover\:bg-comeback-gray-25\/25:hover{background-color:hsla(0,0%,98%,.25)}.hover\:bg-comeback-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(242 242 242/var(--tw-bg-opacity))}.hover\:bg-comeback-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(65 66 67/var(--tw-bg-opacity))}.hover\:bg-comeback-gray-75:hover{--tw-bg-opacity:1;background-color:rgb(219 219 219/var(--tw-bg-opacity))}.hover\:bg-comeback-green-50:hover{--tw-bg-opacity:1;background-color:rgb(219 237 223/var(--tw-bg-opacity))}.hover\:bg-comeback-orange-50:hover{--tw-bg-opacity:1;background-color:rgb(255 224 207/var(--tw-bg-opacity))}.hover\:bg-comeback-purple-50:hover{--tw-bg-opacity:1;background-color:rgb(220 206 252/var(--tw-bg-opacity))}.hover\:bg-comeback-red-50:hover{--tw-bg-opacity:1;background-color:rgb(243 208 209/var(--tw-bg-opacity))}.hover\:bg-comeback-red-800:hover{--tw-bg-opacity:1;background-color:rgb(119 20 23/var(--tw-bg-opacity))}.hover\:bg-comeback-teal-50:hover{--tw-bg-opacity:1;background-color:rgb(198 229 233/var(--tw-bg-opacity))}.hover\:bg-comeback-yellow-75:hover{--tw-bg-opacity:1;background-color:rgb(255 238 184/var(--tw-bg-opacity))}.hover\:text-comeback-blue-800:hover{--tw-text-opacity:1;color:rgb(18 80 183/var(--tw-text-opacity))}.hover\:text-comeback-gray-600:hover{--tw-text-opacity:1;color:rgb(85 86 88/var(--tw-text-opacity))}.hover\:text-comeback-gray-700:hover{--tw-text-opacity:1;color:rgb(65 66 67/var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\:bg-comeback-gray-50:focus-visible{--tw-bg-opacity:1;background-color:rgb(242 242 242/var(--tw-bg-opacity))}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-comeback-gray-75:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(219 219 219/var(--tw-ring-opacity))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.active\:bg-comeback-blue-25:active{--tw-bg-opacity:1;background-color:rgb(234 242 255/var(--tw-bg-opacity))}.active\:bg-comeback-gray-100:active{--tw-bg-opacity:1;background-color:rgb(196 196 196/var(--tw-bg-opacity))}.active\:bg-comeback-gray-200:active{--tw-bg-opacity:1;background-color:rgb(172 173 174/var(--tw-bg-opacity))}.active\:bg-comeback-gray-50\/25:active{background-color:hsla(0,0%,95%,.25)}.active\:bg-comeback-gray-600:active{--tw-bg-opacity:1;background-color:rgb(85 86 88/var(--tw-bg-opacity))}.active\:bg-comeback-gray-75:active{--tw-bg-opacity:1;background-color:rgb(219 219 219/var(--tw-bg-opacity))}.active\:bg-comeback-green-25:active{--tw-bg-opacity:1;background-color:rgb(244 253 246/var(--tw-bg-opacity))}.active\:bg-comeback-orange-25:active{--tw-bg-opacity:1;background-color:rgb(255 243 236/var(--tw-bg-opacity))}.active\:bg-comeback-purple-25:active{--tw-bg-opacity:1;background-color:rgb(238 230 254/var(--tw-bg-opacity))}.active\:bg-comeback-red-25:active{--tw-bg-opacity:1;background-color:rgb(249 233 233/var(--tw-bg-opacity))}.active\:bg-comeback-red-900:active{--tw-bg-opacity:1;background-color:rgb(79 13 15/var(--tw-bg-opacity))}.active\:bg-comeback-teal-25:active{--tw-bg-opacity:1;background-color:rgb(227 242 244/var(--tw-bg-opacity))}.active\:bg-comeback-yellow-25:active{--tw-bg-opacity:1;background-color:rgb(255 249 231/var(--tw-bg-opacity))}.active\:text-comeback-gray-700:active{--tw-text-opacity:1;color:rgb(65 66 67/var(--tw-text-opacity))}@media (min-width:640px){.tablet\:block{display:block}.tablet\:flex{display:flex}.tablet\:hidden{display:none}.tablet\:h-fit{height:-moz-fit-content;height:fit-content}.tablet\:w-fit{width:-moz-fit-content;width:fit-content}.tablet\:min-w-\[400px\]{min-width:400px}}@media (min-width:1232px){.desktop\:ml-\[12px\]{margin-left:12px}.desktop\:mt-\[0\]{margin-top:0}.desktop\:block{display:block}.desktop\:hidden{display:none}.desktop\:h-\[1\.25rem\]{height:1.25rem}.desktop\:h-\[calc\(2\*1\.25rem\)\]{height:calc(2 * 1.25rem)}.desktop\:h-\[calc\(3\*1\.25rem\)\]{height:calc(3 * 1.25rem)}.desktop\:h-\[calc\(4\*1\.25rem\)\]{height:calc(4 * 1.25rem)}.desktop\:h-\[calc\(5\*1\.25rem\)\]{height:calc(5 * 1.25rem)}.desktop\:w-fit{width:-moz-fit-content;width:fit-content}.desktop\:max-w-none{max-width:none}.desktop\:flex-row{flex-direction:row}.desktop\:items-center{align-items:center}.desktop\:self-auto{align-self:auto}.desktop\:text-sm{font-size:.875rem;line-height:1.25rem}.desktop\:text-xs{font-size:.75rem;line-height:1rem}}*/