@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    --main-color: #1FB6FF;
    --main-color-secound: #00406c;
    --bg-body: #ffffff;
    --bg-card: #f6fcff;
    --bg-input: #f4f5f6;
    --main-text: #1a1a1a;
    --white-color: #ffffff;
    --text-paragraph: #768298;
    --border-color: #D6DBE6;
    --shadow: 10px 5px 10px #f1f1f1;
    --margin-inline: 12rem;
    --margin-inline-single: 7rem;
}

/* Start Root */

*,
body {
    font-family: "Outfit", sans-serif;
}

body {
    background-color: var(--bg-body);
    color: var(--main-text);
}

.page-body {
    margin: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

svg {
    animation: strok 1.5s reverse;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
}

::placeholder {
    color: #60606089 !important;
    font-weight: 400;
}

.card {
    border: none;
}

.card-header {
    padding-bottom: 0.5rem;
}

/* End Root */
/* Start Reset Tag */
a {
    color: var(--main-text);
    border-color: var(--border-color) !important;
}

a:hover {
    text-decoration: none;
}

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

.list-unstyled {
    list-style: none !important;
}

input,
select,
textarea {
    box-shadow: none !important;
    outline: none !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--main-color-secound) !important;
}

html[dir="rtl"] .input-icon-addon {
    right: auto;
    left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 0;
}

section {
    min-height: 100vh;
}

hr {
    margin: 0.5rem auto !important;
}

/* End Reset Tag */

/* Start Var */
.btn-info {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-link {
    color: var(--main-text);
}

.manage_request_area .form-selectgroup {
    display: flex;
}

.manage_request_area .form-selectgroup .form-selectgroup-item {
    width: 100%;
}

.manage_request_area .form-selectgroup .form-selectgroup-input+.form-selectgroup-label {
    padding-block: 0.6rem;
    border-radius: 12px;
    border-width: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.manage_request_area .form-selectgroup .form-selectgroup-input:checked+.form-selectgroup-label {
    border-color: var(--main-text);
}

.copy {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.list_languages a.active {
    background-color: var(--main-color);
    color: white;
}

.btn-app {
    background-color: var(--main-color);
    color: var(--white-color);
}

.btn-app:active,
.btn-app:hover {
    background-color: var(--main-color);
    color: white;
    opacity: .9;
}

.buttons_tab_area a.active {
    background-color: var(--main-color);
    color: white;
}

.send_sos_alert {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 3rem;
    height: 2.5rem;
    border-radius: 12px;
}

.send_sos_alert svg {
    --aous-aw-btn-icon-size: 2rem;
}

/* End Var */

/* Start Hero Section Area */
.hero_section_area {
    position: relative;
    overflow: hidden;
    padding-bottom: 5rem;
}

.hero_section_area::before {
    content: '';
    position: absolute;
    top: -15rem;
    right: -12rem;
    width: 55rem;
    height: 55rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 182, 255, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

.hero_section_area::after {
    content: '';
    position: absolute;
    bottom: 20rem;
    left: -10rem;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 64, 108, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* End Hero Section Area */

/* Start App navbar */
.app_navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-inline: calc(var(--margin-inline) - 0.5rem);
    padding-block: 0.5rem;
    background: var(--bg-body);
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.app_navbar.single_navbar {
    margin-inline: var(--margin-inline-single);
}

.app_navbar a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.7rem 1rem;
}

.app_navbar a:hover {
    color: var(--main-color);
}

.app_navbar.account_navbar a {
    padding: 0.6rem;
}

.app_navbar .left_area {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.app_navbar .left_area .logo_area a {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--main-text);
}

.app_navbar .links_area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app_navbar .links_area .auth_action_link {
    position: relative;
}

.app_navbar .links_area .auth_action_link a {
    display: inline-flex;
}

.app_navbar .links_area .auth_action_link a img {
    background-color: var(--main-color);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.app_navbar .links_area .auth_action_link .auth_links {
    position: absolute;
    left: 0.5rem;
    top: 3.5rem;
    width: 10rem;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    border-radius: 12px;
    padding-block: 0.5rem;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.2s ease-in-out;
}

.app_navbar .links_area .auth_action_link .auth_links.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.app_navbar .links_area .auth_action_link .auth_links a {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.4rem 0.75rem;
}

.app_navbar .links_area .nav_publish_btn {
    background: var(--main-color);
    color: white !important;
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(31, 182, 255, 0.3);
}

.app_navbar .links_area .nav_publish_btn:hover {
    background: var(--main-color-secound) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 64, 108, 0.3);
}

.app_navbar .links_area .nav_publish_btn svg {
    color: white;
}

/* End App navbar */

/* Start App Image */
.app_image.hero_image {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    min-height: 28rem;
    margin-bottom: 2rem;
    margin-inline: var(--margin-inline);
    gap: 3rem;
    user-select: none;
    position: relative;
    z-index: 1;
}

.app_image.hero_image .hero_content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.app_image.hero_image .hero_visual {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.app_image.hero_image .hero_visual img {
    width: 100%;
    max-height: 28rem;
    object-fit: contain;
}

.app_image {
    position: relative;
}

.app_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app_text {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--main-text);
    letter-spacing: -0.02em;
}

.app_text .word_slider {
    position: relative;
    height: 1.3em;
    margin-inline-start: 0;
    display: inline-grid;
    align-items: center;
    overflow: hidden;
    text-align: start;
    color: var(--main-color);
}

.app_text .word {
    grid-area: 1 / 1;
    white-space: nowrap;
    line-height: 1.3;
    transform: translateY(100%);
    transition: transform 0.6s ease;
}

.app_text .word.active {
    transform: translateY(0);
}

.app_text .word.exit {
    transform: translateY(-100%);
}

.hero_subtitle {
    font-size: 1.05rem;
    color: var(--text-paragraph);
    line-height: 1.65;
    margin: 0;
    max-width: 36rem;
}

.hero_cta_buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hero_cta_buttons .btn_primary_hero {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.75rem;
    border-radius: 14px;
    background: var(--main-color);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.25s;
    box-shadow: 0 6px 24px rgba(31, 182, 255, 0.35);
}

.hero_cta_buttons .btn_primary_hero:hover {
    background: var(--main-color-secound);
    color: white;
    box-shadow: 0 8px 28px rgba(0, 64, 108, 0.35);
    transform: translateY(-1px);
}

.hero_cta_buttons .btn_primary_hero svg {
    color: white;
    --aous-aw-btn-icon-size: 1.15rem;
}

.hero_cta_buttons .btn_secondary_hero {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.75rem;
    border-radius: 14px;
    border: 1.5px solid var(--border-color);
    color: var(--main-text);
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.25s;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
}

.hero_cta_buttons .btn_secondary_hero:hover {
    border-color: var(--main-color);
    color: var(--main-color);
    background: rgba(31, 182, 255, 0.04);
    transform: translateY(-1px);
}

.hero_cta_buttons .btn_secondary_hero svg {
    --aous-aw-btn-icon-size: 1.15rem;
}

/* End App Image */

/* Start Search form */

.form_landing {
    position: relative;
    margin-top: 0;
    z-index: 99;
    background: white;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    margin-inline: var(--margin-inline);
    padding-block: 1.25rem;
    padding-inline: 0.75rem;
    border: 1px solid rgba(214, 219, 230, 0.6);
}

.form_landing .action_buttons_hero {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form_landing .action_buttons_hero a {
    color: #1a1a1a;
    background-color: var(--bg-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 30px !important;
}

.form_landing .action_buttons_hero a.active {
    background: var(--main-color);
    color: white;
}

.form_landing .action_buttons_hero a:not(.active) {
    color: var(--main-color);
}

.search_form_area .search_form_content {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 15% 15% 15%;
    gap: 8px;
    padding-inline-start: 0.15rem;
}

.search_form_area .search_form_content .input_area {
    position: relative;
}

.search_form_area .input-icon .switch_cities {
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translate(-50%, -50%);
    z-index: 999;
    padding: 8px;
    display: none;
}

.search_form_area .search_form_content input.city_input {
    cursor: pointer;
    font-weight: 600;
}

.search_form_area .search_form_content .passenger_area button,
.search_form_area .search_form_content .calendar_area button {
    text-align: start;
    justify-content: start;
}

.search_form_area .search_form_content .input_area button,
.search_form_area .search_form_content .input_area input {
    color: var(--main-text);
    border: 1px solid var(--border-color);
    box-shadow: unset;
    background-color: transparent;
    padding: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border-radius: 14px;
}

.search_form_area .search_form_content .input_area .input-icon input {
    padding-left: 2.5rem;
}

.search_form_area .search_form_content .input_area .input-icon input.error {
    border: 1px solid var(--aous-aw-danger);
}

.search_form_area .search_form_content .input_area svg {
    color: var(--main-text);
    --aous-aw-icon-size: 1.35rem;
    --aous-aw-btn-icon-size: 1.35rem;
    stroke-width: 2;
}

.search_form_area .search_form_content .input_area button {
    width: 100%;
}

.search_form_area .search_form_content .input_area input:hover,
.search_form_area .search_form_content .input_area button:hover,
.search_form_area .search_form_content .input_area input:focus,
.search_form_area .search_form_content .input_area button:focus {
    background-color: var(--bg-input);
}

.search_form_area .search_form_content .input_area .action_button_area {
    background-color: var(--main-color);
    color: var(--white-color);
    font-size: 1rem;
    font-weight: 500;
}

.search_form_area .search_form_content .input_area .action_button_area:hover {
    background-color: var(--main-color-secound);
}

.search_form_area .search_form_content .input_area .action_button_area svg {
    color: white;
}

.search_form_area .search_form_content .input_area .dropdown_list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    background: var(--white-color);
    border-radius: 1rem;
    padding: 0.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    opacity: 0;
    transform: translateX(10px);
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

.search_form_area .search_form_content .input_area.active .dropdown_list {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.search_form_area .search_form_content .input_area .dropdown_list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    border-radius: 12px;
}

.search_form_area .search_form_content .input_area .dropdown_list a:hover,
.search_form_area .search_form_content .input_area .dropdown_list a.active {
    background: var(--bg-input);
}

.search_form_area .search_form_content .input_area .dropdown_list a .text_area span {
    display: block;
    font-size: 0.9rem;
}

.search_form_area .search_form_content .input_area .dropdown_list a .text_area .city_name {
    font-weight: 500;
}

.search_form_area .search_form_content .input_area .dropdown_list a .text_area .country_name {
    color: var(--text-paragraph);
    margin-top: 0.25rem;
}

.search_form_area .search_form_content .input_area .dropdown_list .no_results {
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    border-radius: 12px;
    font-size: 1rem;
}

.search_form_area .search_form_content .input_area .calendar_area {
    position: relative;
}

.search_form_area .search_form_content .input_area .calendar_popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    width: 320px;
    background: var(--white-color);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    z-index: 9999;
    display: block;
    transform: translateX(-45%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

.search_form_area .search_form_content .calendar_area.active .calendar_popup {
    transform: translateX(-50%);
    opacity: 1;
    visibility: visible;
}

.search_form_area .search_form_content .input_area .calendar_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 1rem;
}

.search_form_area .search_form_content .input_area .calendar_header .nav {
    display: flex;
    gap: .5rem;
}

html[dir="rtl"] .search_form_area .search_form_content .input_area .calendar_popup {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

.search_form_area .search_form_content .input_area .calendar_dates span.disabled {
    pointer-events: none;
    opacity: .35;
}

.search_form_area .search_form_content .input_area .calendar_dates span.today {
    background-color: var(--main-color);
    color: var(--white-color);
}

.search_form_area .search_form_content .input_area .calendar_dates span.active {
    background: var(--main-color);
    color: var(--white-color);
}

.search_form_area .search_form_content .input_area .calendar_header button {
    border: none;
    background: none;
    cursor: pointer;
}

.search_form_area .search_form_content .input_area .calendar_days,
.search_form_area .search_form_content .input_area .calendar_dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.search_form_area .search_form_content .input_area .calendar_days span {
    font-size: .8rem;
    color: var(--text-paragraph);
    margin-bottom: .5rem;
}

.search_form_area .search_form_content .input_area .calendar_dates span {
    padding: .6rem;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s;
}

.search_form_area .search_form_content .input_area .calendar_dates span:hover {
    background: var(--bg-input);
}

.search_form_area .search_form_content .input_area .calendar_dates span.active {
    background: var(--main-color);
    color: var(--white-color);
}

.search_form_area .search_form_content .passenger_area {
    position: relative;
}

.search_form_area .search_form_content .passenger_popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    background: var(--white-color);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    display: block;
    transform: translateX(0);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 9999;
}

html[dir="rtl"] .search_form_area .search_form_content .passenger_popup {
    right: auto;
    left: unset;
    top: calc(100% + -2px);
}

.search_form_area .search_form_content .passenger_area.active .passenger_popup {
    transform: translateX(-10px);
    opacity: 1;
    visibility: visible;
}

.search_form_area .search_form_content .passenger_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search_form_area .search_form_content .passenger_row .controls {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.search_form_area .search_form_content .passenger_row button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--white-color);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search_form_area .search_form_content .passenger_row button svg {
    --aous-aw-icon-size: 1rem;
}

.search_form_area .search_form_content .passenger_row button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.search_form_area .search_form_content .passenger_row .count {
    font-size: 1rem;
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}

/* End Search form */

/* Start How travelling */
.how_travelling {
    margin-top: 6rem;
    margin-inline: var(--margin-inline);
}

/* Live ride types section */
.live_types_area {
    margin-top: 6rem;
    margin-inline: var(--margin-inline);
}

.live_types_area .section_header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.live_types_area .section_header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.live_types_area .section_header p {
    color: var(--text-paragraph);
    font-size: 1rem;
}

.live_types_cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.live_type_card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s;
}

.live_type_card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.live_type_card.ltc_featured {
    border-color: var(--main-color);
    box-shadow: 0 4px 20px rgba(31, 182, 255, 0.15);
}

.ltc_popular_badge {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    background: var(--main-color);
    color: var(--white-color);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
}

.ltc_header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.4rem 1.4rem 1rem;
}

.ltc_header.ltc_private {
    background: var(--bg-input);
}

.ltc_header.ltc_shared {
    background: #e8f7ff;
}

.ltc_icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 10px;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ltc_icon svg {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--main-color);
}

.ltc_badge {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--main-text);
}

.ltc_body {
    padding: 1.2rem 1.4rem;
}

.ltc_body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--main-text);
    margin-bottom: 0.4rem;
}

.ltc_body p {
    font-size: 0.88rem;
    color: var(--text-paragraph);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.ltc_features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ltc_features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--main-text);
}

.ltc_features li svg {
    width: 1rem;
    height: 1rem;
    color: var(--main-color);
    flex-shrink: 0;
}

.ltc_footer {
    padding: 1rem 1.4rem 1.4rem;
}

.ltc_btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: var(--bg-body);
    color: var(--main-text);
    text-decoration: none;
    transition: background 0.2s;
}

.ltc_btn:hover {
    background: var(--border-color);
    color: var(--main-text);
}

.ltc_btn svg {
    width: 1rem;
    height: 1rem;
}

.ltc_btn_featured {
    background: var(--main-color);
    color: var(--white-color);
}

.ltc_btn_featured:hover {
    opacity: 0.9;
    color: var(--white-color);
}

.how_travelling .header_section {
    text-align: center;
    margin-bottom: 3rem;
}

.how_travelling .header_section h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--main-text);
    letter-spacing: -0.02em;
}

.how_travelling .header_section p {
    font-size: 1.05rem;
    color: var(--text-paragraph);
    margin-top: 0.75rem;
}

.how_travelling .cards_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.how_travelling .cards_area .travel_card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 2.5rem;
    border-radius: 24px;
    border: 1.5px solid var(--border-color);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: var(--bg-body);
}

.how_travelling .cards_area .travel_card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.how_travelling .cards_area .card_1::before {
    background: radial-gradient(circle, rgba(31, 182, 255, 0.08) 0%, transparent 70%);
}

.how_travelling .cards_area .card_2::before {
    background: radial-gradient(circle, rgba(0, 64, 108, 0.08) 0%, transparent 70%);
}

.how_travelling .cards_area .travel_card:hover::before {
    opacity: 1;
}

.how_travelling .cards_area .travel_card:hover {
    border-color: var(--main-color);
    box-shadow: 0 16px 48px rgba(31, 182, 255, 0.14);
    transform: translateY(-6px);
}

.how_travelling .cards_area .travel_card.card_2:hover {
    border-color: var(--main-color-secound);
    box-shadow: 0 16px 48px rgba(0, 64, 108, 0.14);
}

.how_travelling .cards_area .travel_card .card_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    width: max-content;
}

.how_travelling .cards_area .card_1 .card_badge {
    background: rgba(31, 182, 255, 0.1);
    color: var(--main-color);
}

.how_travelling .cards_area .card_2 .card_badge {
    background: rgba(0, 64, 108, 0.1);
    color: var(--main-color-secound);
}

.how_travelling .cards_area .travel_card .card_icon_area {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how_travelling .cards_area .card_1 .card_icon_area {
    background: rgba(31, 182, 255, 0.1);
}

.how_travelling .cards_area .card_2 .card_icon_area {
    background: rgba(0, 64, 108, 0.08);
}

.how_travelling .cards_area .travel_card .card_icon_area svg {
    --aous-aw-icon-size: 2rem;
    stroke-width: 2;
}

.how_travelling .cards_area .card_1 .card_icon_area svg {
    color: var(--main-color);
}

.how_travelling .cards_area .card_2 .card_icon_area svg {
    color: var(--main-color-secound);
}

.how_travelling .cards_area .travel_card .card_content {
    flex: 1;
    margin-top: 1rem;
}

.how_travelling .cards_area .travel_card .card_content .title_area {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.how_travelling .cards_area .travel_card .card_content .description_area {
    display: block;
    font-size: 0.95rem;
    color: var(--text-paragraph);
    line-height: 1.6;
}

.how_travelling .cards_area .travel_card .card_footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.how_travelling .cards_area .card_1 .card_footer {
    color: var(--main-color);
}

.how_travelling .cards_area .card_2 .card_footer {
    color: var(--main-color-secound);
}

.how_travelling .cards_area .travel_card .card_footer svg {
    --aous-aw-icon-size: 1.3rem;
}

/* End How travelling */

/* Start Driver CTA */
.driver_cta_area {
    margin-block: 6rem;
    margin-inline: var(--margin-inline);
    background: linear-gradient(135deg, #060f1c 0%, var(--main-color-secound) 50%, #1a5f8f 100%);
    border-radius: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    overflow: hidden;
    min-height: 22rem;
}

.driver_cta_area .cta_text_col {
    padding: 3rem 3.5rem;
}

.driver_cta_area .cta_text_col h2 {
    font-size: 2.25rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.driver_cta_area .cta_text_col p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.driver_cta_area .cta_text_col .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.75rem;
    border-radius: 30px;
    background: white;
    color: var(--main-color-secound);
    font-size: 1rem;
    font-weight: 600;
    transition: opacity 0.2s;
}

.driver_cta_area .cta_text_col .btn:hover {
    opacity: 0.9;
    color: var(--main-color-secound);
}

.driver_cta_area .cta_text_col .btn svg {
    --aous-aw-btn-icon-size: 1.25rem;
    color: var(--main-color-secound);
}

.driver_cta_area .cta_image_col {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.driver_cta_area .cta_image_col img {
    width: 85%;
    object-fit: contain;
    max-height: 22rem;
}

/* End Driver CTA */

/* Start Service cards */
.service_cards_area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-block: 5rem;
    margin-inline: var(--margin-inline);
}

.service_cards_area .service_card {
    border: 1px solid var(--border-color);
    padding: 1.75rem 1.5rem;
    border-radius: 20px;
    transition: all 0.25s ease;
    background: var(--bg-body);
}

.service_cards_area .service_card:hover {
    border-color: rgba(31, 182, 255, 0.35);
    box-shadow: 0 8px 32px rgba(31, 182, 255, 0.08);
    transform: translateY(-3px);
}

.single_page_area .service_cards_area .service_card {
    border: unset;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.single_page_area.publish_ride_info_area .service_cards_area {
    margin-block: 3rem;
}

.service_cards_area .service_card .icon_area {
    width: 62px;
    background: linear-gradient(135deg, rgba(31, 182, 255, 0.12) 0%, rgba(31, 182, 255, 0.06) 100%);
    border-radius: 16px;
    margin: 0 auto 0 0;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service_cards_area .service_card .icon_area svg {
    --aous-aw-icon-size: 1.75rem;
    stroke-width: 2;
    color: var(--main-color);
}

.service_cards_area .service_card .text_area {
    margin-top: 1.25rem;
    text-align: left;
}

.service_cards_area .service_card .text_area .title_content {
    font-size: 1.1rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--main-text);
}

.service_cards_area .service_card .text_area .description_content {
    font-size: 0.9rem;
    display: block;
    color: var(--text-paragraph);
    line-height: 1.6;
}

.single_page_area .action_buttons_area {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 4rem;
    background: var(--main-color);
    text-align: center;
    z-index: 999;
}

.single_page_area .action_buttons_area a {
    font-size: 1rem;
    font-weight: 500;
    padding-block: 0.85rem;
    padding-inline: 1.25rem;
    margin-top: 0.5rem;
    border-radius: 30px;
    background-color: var(--main-color);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

html[dir="rtl"] .single_page_area .action_buttons_area a svg {
    rotate: 180deg;
}

/* End Service cards */

/* Start Footer */
.web_footer {
    background-color: #080f1e;
    padding-inline: var(--margin-inline);
    padding-top: 5rem;
    padding-bottom: 1rem;
}

.web_footer .footer_top {
    display: grid;
    grid-template-columns: 1.5fr 3fr;
    gap: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 3rem;
}

.web_footer .footer_brand .brand_name {
    font-size: 1.6rem;
    font-weight: 600;
    color: white;
    display: block;
    margin-bottom: 0.75rem;
}

.web_footer .footer_brand .brand_tagline {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.65;
    max-width: 22rem;
}

.web_footer .sections_card {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

.web_footer .section_content .section_title {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.web_footer .section_content ul {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.web_footer .section_content ul li a {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 400;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s;
}

.web_footer .section_content ul li a:hover {
    color: white;
}

.web_footer .section_content ul li a svg {
    --aous-aw-icon-size: 0.9rem;
}

.web_footer .other_links {
    padding-top: 3rem;
    display: grid;
    grid-template-columns: 3fr 0.65fr;
    align-items: center;
}

.web_footer .other_links .social_media ul {
    display: flex;
    gap: 0.75rem;
}

.web_footer .other_links .social_media ul li a {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.web_footer .other_links .social_media ul li a:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.web_footer .other_links .social_media ul li a svg {
    --aous-aw-icon-size: 1.1rem;
}

.web_footer .other_links .language_links ul li a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.07);
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    width: max-content;
    transition: background 0.2s;
}

.web_footer .other_links .language_links ul li a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.web_footer .other_links .language_links ul li a svg {
    stroke-width: 2;
    --aous-aw-icon-size: 1.1rem;
}

.web_footer .app_stores {
    padding-top: 2rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.web_footer .app_stores a img {
    width: 8rem;
    height: 3rem;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.web_footer .app_stores a:hover img {
    opacity: 1;
}

.web_footer .copyright {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.web_footer .copyright span {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
}

/* End Footer */

/* Start Faqs section */

.faqs_area {
    margin-top: 8rem;
    padding-bottom: 4rem;
    margin-inline: var(--margin-inline);
}

.faqs_area .header_title {
    margin-bottom: 2.5rem;
}

.faqs_area .header_title h1 {
    font-size: 2.25rem;
    line-height: normal;
    text-align: center;
}

.faqs_area .header_title p {
    font-size: 1.1rem;
}

.faqs_area .question_area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
}

.faqs_area .question_area .accordion-item {
    border: 1px solid var(--border-color);
    box-shadow: 1px 2px 10px #f6f6f6;
    border-radius: 12px;
    padding: 0.3rem;
}

.faqs_area .question_area .accordion-item:first-of-type .accordion-button {
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--main-text);
}

.faqs_area .question_area .accordion-item .accordion-body {
    font-size: 0.9rem;
    line-height: 1.6;
}

.faqs_area .question_area .accordion {
    margin-bottom: 1rem;
}

.faqs_area .question_area .accordion-button:after,
.faqs_area .question_area .accordion-button:not(.collapsed)::after {
    background-image: unset
}

/* End Faqs section */

/* Start Safe info */
.safe_info_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-inline: var(--margin-inline);
    align-items: center;
    gap: 5rem;
    margin-top: 6rem;
    padding: 4rem;
    border-radius: 28px;
    background: linear-gradient(135deg, #f0f9ff 0%, #eaf5fb 100%);
    border: 1px solid rgba(31, 182, 255, 0.1);
}

.safe_info_area .image_area img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.safe_info_area h3 {
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--main-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.safe_info_area p {
    font-size: 1rem;
    color: var(--text-paragraph);
    line-height: 1.65;
}

.safe_info_area .btn {
    margin-top: 1.25rem;
    font-size: 1rem;
    padding-block: 0.85rem;
    padding-inline: 1.5rem;
    border-radius: 30px;
    background-color: var(--main-color);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    transition: background 0.2s;
}

.safe_info_area .btn:hover {
    background-color: var(--main-color-secound);
    color: white;
}

/* End Safe info */
/* Start Stats Section */
.stats_section_area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-inline: var(--margin-inline);
    margin-top: 4rem;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--main-color-secound) 0%, #01304f 100%);
    overflow: hidden;
}

.stats_section_area .stat_item {
    text-align: center;
    padding: 2.5rem 2rem;
    position: relative;
}

.stats_section_area .stat_item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.stats_section_area .stat_item .stat_number {
    font-size: 2.75rem;
    font-weight: 600;
    color: white;
    display: block;
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.stats_section_area .stat_item .stat_label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

/* End Stats Section */
/* Start How It Works */
.how_it_works_area {
    margin-block: 6rem;
    margin-inline: var(--margin-inline);
}

.how_it_works_area .section_header {
    text-align: center;
    margin-bottom: 3rem;
}

.how_it_works_area .section_header h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--main-text);
    letter-spacing: -0.02em;
}

.how_it_works_area .section_header p {
    font-size: 1.05rem;
    color: var(--text-paragraph);
    margin-top: 0.75rem;
}

.how_it_works_area .mode_tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.how_it_works_area .mode_tabs button {
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
    border: 1.5px solid var(--border-color);
    background: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--main-text);
}

.how_it_works_area .mode_tabs button svg {
    --aous-aw-icon-size: 1rem;
    stroke-width: 2;
}

.how_it_works_area .mode_tabs button.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: white;
}

.how_it_works_area .mode_tabs button.active svg {
    color: white;
}

.how_it_works_area .steps_panel {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.how_it_works_area .steps_panel.active {
    display: grid;
}

.how_it_works_area .step_item {
    text-align: center;
    padding: 2.5rem 1.75rem;
    border-radius: 22px;
    border: 1.5px solid var(--border-color);
    position: relative;
    background: var(--bg-body);
    transition: all 0.25s ease;
}

.how_it_works_area .step_item:hover {
    border-color: rgba(31, 182, 255, 0.4);
    box-shadow: 0 12px 40px rgba(31, 182, 255, 0.1);
    transform: translateY(-4px);
}

.how_it_works_area .step_item .step_number {
    width: 36px;
    height: 36px;
    background: var(--main-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 auto 1.25rem;
}

.how_it_works_area .step_item .step_icon {
    width: 60px;
    height: 60px;
    background: var(--bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.how_it_works_area .step_item .step_icon svg {
    --aous-aw-icon-size: 1.75rem;
    color: var(--main-color);
    stroke-width: 2;
}

.how_it_works_area .step_item h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--main-text);
}

.how_it_works_area .step_item p {
    font-size: 1rem;
    color: var(--text-paragraph);
    line-height: 1.65;
    margin: 0;
}

/* End How It Works */
/* Start App Download */
.app_download_area {
    margin-block: 6rem;
    margin-inline: var(--margin-inline);
    background: linear-gradient(135deg, #0a1f40 0%, #00406c 50%, #1FB6FF 100%);
    border-radius: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    padding: 3rem 3.5rem;
    overflow: hidden;
}

.app_download_area .text_area h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.app_download_area .text_area p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.65;
    margin-bottom: 1.75rem;
    max-width: 32rem;
}

.app_download_area .store_buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app_download_area .store_buttons .store_btn img {
    height: 2.75rem;
    object-fit: contain;
    transition: opacity 0.2s;
}

.app_download_area .store_buttons .store_btn:hover img {
    opacity: 0.85;
}

.app_download_area .image_area {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.app_download_area .image_area img {
    max-width: 85%;
    object-fit: contain;
}

/* End App Download */
/* Start Safe info */
.start_carpooling_area {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    margin-inline: var(--margin-inline);
    align-items: center;
    gap: 4rem;
    margin-top: 5rem;
}

.start_carpooling_area h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.start_carpooling_area p {
    font-size: 1.1rem;
    color: var(--text-paragraph);
}

.start_carpooling_area .btn {
    margin-top: 1rem;
    font-size: 1rem;
    padding-block: 0.85rem;
    padding-inline: 1rem;
    border-radius: 30px;
    background-color: var(--main-color);
    color: white;
}

.start_carpooling_area .image_area img {
    border-radius: 12px;
}

/* End Safe info */

/* Start Search */
.search_area {
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f9ff 0%, #fafcff 40%, #f5f8fa 100%);
}

.search_area .search_hero_header {
    text-align: center;
    padding-top: 3.5rem;
    padding-bottom: 1.5rem;
}

.search_area .header_title_page {
    font-size: 3.25rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    padding: 0;
    margin: 0;
    background: linear-gradient(135deg, var(--main-color-secound) 0%, var(--main-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.search_area .search_hero_subtitle {
    font-size: 1.1rem;
    color: var(--text-paragraph);
    margin-top: 0.6rem;
    margin-bottom: 0;
}

.search_area .search_form_area {
    background: transparent;
    padding-bottom: 2rem;
}

.search_area.do_search_action {
    background: #f5f8fa;
    padding-top: 2rem;
}

.search_area.do_search_action .search_form_area {
    background: white;
    padding-block: 1rem 1.25rem;
    border-bottom: 1px solid #e8eef4;
    position: sticky;
    top: 0;
    z-index: 100;
}

.search_area .search_form_area .search_form_content {
    margin-top: 0;
}

.search_area .search_content_area {
    margin-top: 2rem;
    margin-inline: var(--margin-inline);
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    padding-bottom: 4rem;
}

.search_area .search_content_area .filter_area {
    position: sticky;
    top: 90px;
    height: fit-content;
    background: white;
    border-radius: 18px;
    border: 1px solid #e8eef4;
    box-shadow: 0 4px 20px rgba(0, 64, 108, 0.07);
    overflow: hidden;
}

.search_area .search_content_area .filter_area .filter_options {
    position: relative;
    padding: 1.5rem;
    border-bottom: 1px solid #f0f4f8;
}

.search_area .search_content_area .filter_area .filter_options:last-child {
    border-bottom: none;
}

.search_area .search_content_area .filter_area .filter_options .title_text {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 1rem;
    color: var(--main-color-secound);
    text-align: start;
}

.search_area .search_content_area .option_area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 10px;
    transition: background 0.15s;
    cursor: pointer;
}

.search_area .search_content_area .option_area:hover {
    background: #f0f9ff;
}

.search_area .search_content_area .option_area svg {
    --aous-aw-icon-size: 1.25rem;
    color: var(--main-color);
    flex-shrink: 0;
}

.search_area .search_content_area .option_area .form-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
}

.search_area .search_content_area .option_area .form-check-input {
    border-color: #c0cdd8 !important;
    border-width: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.search_area .search_content_area .option_area .form-check-input:checked {
    background-color: var(--main-color);
    border-color: var(--main-color) !important;
}

.search_area .search_content_area .option_area .form-check-label {
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--main-text);
}

.search_area .search_content_area .ride_info_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: white;
    border-radius: 14px;
    border: 1px solid #e8eef4;
    margin-bottom: 1rem;
}

.search_area .search_content_area .ride_info_area .text_info_area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search_area .search_content_area .ride_info_area .time_area span {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--main-color-secound);
}

.search_area .search_content_area .ride_info_area .location_area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search_area .search_content_area .ride_info_area .location_area svg {
    --aous-aw-icon-size: 1rem;
    color: var(--main-color);
}

.search_area .search_content_area .ride_info_area .location_area span {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--main-text);
}

.search_area .search_content_area .total_rides_area .rides_count {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--main-color);
    background: #e5f5ff;
    padding: 0.3rem 0.85rem;
    border-radius: 50px;
}

.search_area .search_content_area .rides_cards_area {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.search_area .search_content_area .rides_cards_area .ride_card {
    display: block;
    background: white;
    border-radius: 16px;
    border: 1px solid #e8eef4;
    box-shadow: 0 2px 12px rgba(0, 64, 108, 0.06);
    transition: all 0.2s ease;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.search_area .search_content_area .rides_cards_area .ride_card:hover {
    box-shadow: 0 8px 32px rgba(31, 182, 255, 0.15);
    border-color: var(--main-color);
    transform: translateY(-2px);
}

.search_area .search_content_area .rides_cards_area .ride_card.complete {
    opacity: 0.45;
    pointer-events: none;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid #f0f4f8;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .start_time,
.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .end_time {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--main-text);
    min-width: 3rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line .line_content {
    position: relative;
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--main-color) 0%, #00406c 100%);
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line .line_content::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--main-color);
    top: -3px;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line .line_content:first-of-type::before {
    left: -2px;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line .line_content:last-of-type::before {
    right: -2px;
    left: auto;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .total_time {
    font-size: 0.75rem;
    color: #8899aa;
    background: #f0f9ff;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    white-space: nowrap;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .location_card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .location_card .from_location,
.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .location_card .to_location {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-paragraph);
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .ride_price_area {
    text-align: end;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .ride_price_area .ride_price {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--main-color-secound);
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1.5rem;
    background: #fafcff;
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info .type_car svg {
    --aous-aw-icon-size: 1.4rem;
    color: #8899aa;
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info .driver_name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--main-text);
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info .driver_name img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info .driver_rate {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info .driver_rate svg {
    --aous-aw-icon-size: 1rem;
}

.search_area .search_content_area .rides_cards_area .empty_card {
    border-radius: 18px;
    border: 1px dashed #c8d8e8;
    background: white;
    box-shadow: none;
}

.search_area .search_content_area .rides_cards_area .empty_card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 2rem;
    text-align: center;
    gap: 0.75rem;
}

.search_area .search_content_area .rides_cards_area .empty_card .card-body svg {
    --aous-aw-icon-size: 3rem;
    color: #b0c4d8;
    margin-bottom: 0.5rem;
}

.search_area .search_content_area .rides_cards_area .empty_card .card-body h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--main-text);
}

.search_area .search_content_area .rides_cards_area .empty_card .card-body p {
    font-size: 0.9rem;
    color: var(--text-paragraph);
    margin: 0;
}

.search_area .search_history_area {
    width: 42rem;
    max-width: 90%;
    margin: 2rem auto 0;
    padding-bottom: 4rem;
}

.search_area .search_history_area .search_history_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    text-align: center;
    background: white;
    border-radius: 20px;
    border: 1px dashed #c8d8e8;
    margin-top: 2rem;
}

.search_area .search_history_area .search_history_empty .icon svg {
    --aous-aw-icon-size: 3rem;
    color: #b0c4d8;
    margin-bottom: 0.5rem;
}

.search_area .search_history_area .search_history_empty h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--main-text);
}

.search_area .search_history_area .search_history_empty p {
    font-size: 0.9rem;
    color: var(--text-paragraph);
    margin: 0;
}

.search_area .search_history_area .search_history_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: white;
    border: 1px solid #e8eef4;
    box-shadow: 0 2px 8px rgba(0, 64, 108, 0.05);
}

.search_area .search_history_area .search_history_item:hover {
    border-color: var(--main-color);
    box-shadow: 0 4px 16px rgba(31, 182, 255, 0.12);
    transform: translateX(-3px);
}

.search_area .search_history_area .search_history_item .left_content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search_area .search_history_area .search_history_item .left_content>svg {
    --aous-aw-icon-size: 1.35rem;
    color: var(--main-color);
}

.search_area .search_history_area .search_history_item .left_content .content .route {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--main-text);
}

.search_area .search_history_area .search_history_item .left_content .content .route svg {
    --aous-aw-icon-size: 1.1rem;
    color: var(--main-color);
}

.search_area .search_history_area .search_history_item .right_content svg {
    --aous-aw-icon-size: 1.25rem;
    color: #b0c4d8;
}

/* End Search */

/* Start Auth */
.auth_area {
    min-height: 100vh;
    position: relative;
}

.auth_area .auth_navbar {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 50%;
    padding: 1.5rem 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    background: white;
}

.auth_area .auth_navbar .logo_area a {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--main-text);
    display: inline-block;
}

.auth_area .auth_navbar .tools_action_area {
    display: flex;
    align-items: center;
}

.auth_area .auth_navbar .tools_action_area a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-paragraph);
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    border: 1.5px solid #e0e8f0;
    transition: all 0.15s;
}

.auth_area .auth_navbar .tools_action_area a svg {
    --aous-aw-icon-size: 1rem;
}

.auth_area .auth_navbar .tools_action_area a:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

.auth_area .auth_app_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.auth_area .form_area {
    background: white;
    min-height: 100vh;
    padding-top: 7rem;
    padding-bottom: 3rem;
    padding-inline: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth_area .form_area .header_section {
    margin-bottom: 2.5rem;
}

.auth_area .form_area .header_section h1 {
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.auth_area .form_area .header_section p {
    font-size: 0.95rem;
    color: var(--text-paragraph);
    line-height: 1.65;
    margin: 0;
}

.auth_area .form_area .with_col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.auth_area .form_area .input_content {
    margin-bottom: 1.25rem;
    position: relative;
}

.auth_area .form_area .input_content label.form-label {
    font-size: 0.95rem;
    color: var(--main-text);
    letter-spacing: 0.03em;
    margin-bottom: 0.45rem;
}

.auth_area .form_area .form-control {
    border-radius: 12px;
    border: 1.5px solid #e0e8f0;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    background: #fafcff;
    color: var(--main-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth_area .form_area .form-control:focus {
    border-color: var(--main-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(31, 182, 255, 0.1);
    outline: none;
}

.auth_area .form_area .input_content .form-selectgroup-input+.form-selectgroup-label {
    color: var(--text-paragraph);
    border: 1.5px solid #e0e8f0;
    border-radius: 12px;
    min-width: 6rem;
    font-size: 0.95rem;
    padding: 0.65rem 1.25rem;
    transition: all 0.15s;
}

.auth_area .form_area .input_content .form-selectgroup-input:checked+.form-selectgroup-label {
    background: var(--main-color);
    border-color: var(--main-color);
    color: white;
    box-shadow: 0 4px 14px rgba(31, 182, 255, 0.28);
}

.auth_area .form_area .input_content a.help_link {
    display: block;
    margin-top: 6px;
    text-align: end;
    font-size: 0.85rem;
    color: var(--main-color);
    font-weight: 600;
}

.auth_area .form_area .phone_number_area {
    display: grid;
    align-items: center;
    grid-template-columns: 40% 1fr;
    gap: 0.85rem;
}

.auth_area .form_area .note_area span {
    display: block;
    font-size: 0.82rem;
    color: var(--text-paragraph);
    line-height: 1.55;
    margin-bottom: 0.75rem;
}

.auth_area .form_area .external_link_area {
    margin-top: 1.5rem;
    text-align: center;
}

.auth_area .form_area .external_link_area span {
    font-size: 0.9rem;
    color: var(--text-paragraph);
}

.auth_area .form_area .external_link_area span a {
    font-weight: 700;
    color: var(--main-color);
}

.auth_area .form_area .show_hidden {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.75rem;
    transform: translateY(20%);
    z-index: 9999;
    cursor: pointer;
    display: none;
}

.auth_area .form_area .login_password .show_hidden {
    top: 40%;
}

.auth_area .addon_content .show_hidden.active {
    display: block;
}

.auth_area .form_area .show_hidden svg {
    --aous-aw-icon-size: 1.3rem;
    color: #8899aa;
}

.auth_area .form_area .action_area_tools {
    margin-top: 1.5rem;
}

.auth_area .submit_action {
    background: linear-gradient(135deg, var(--main-color) 0%, #0078b8 100%);
    border: none;
    border-radius: 14px;
    padding: 0.9rem;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    width: 100%;
    box-shadow: 0 4px 20px rgba(31, 182, 255, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
}

.auth_area .submit_action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(31, 182, 255, 0.42);
}

.auth_area .image_area {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    width: 50%;
    height: 100vh;
    background: linear-gradient(160deg, #040e1c 0%, #003d66 45%, #005a8e 75%, #1480b8 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.auth_area .image_area::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 182, 255, 0.14) 0%, transparent 70%);
    top: -100px;
    inset-inline-end: -80px;
    pointer-events: none;
}

.auth_area .image_area::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 64, 108, 0.35) 0%, transparent 70%);
    bottom: -50px;
    inset-inline-start: 30px;
    pointer-events: none;
}

.auth_area .image_area img {
    width: 72%;
    max-height: 78vh;
    object-fit: contain;
    mix-blend-mode: multiply;
    position: relative;
    z-index: 1;
}

/* End Auth */

/* Start Wizard */
.form_area {
    position: relative;
    padding-inline: 5rem;
    margin-top: 0;
}

.form_area .wizard_step {
    opacity: 1;
    display: none;
    width: 100%;
    transition: all 0.3s ease;
}

.form_area .wizard_step.active {
    display: block;
    position: relative;
}

.form_area .wizard_step .wizard_header {
    margin-bottom: 2.5rem;
}

.form_area .wizard_step .wizard_title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
    color: var(--main-text);
}

.form_area .wizard_step .wizard_description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-paragraph);
    max-width: 480px;
    margin: 0;
}

.form_area .wizard_step .wizard_actions {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.form_area .wizard_step .wizard_actions button {
    min-width: 10rem;
    font-size: 1rem;
    padding-block: 0.8rem;
}

.form_area .wizard_step .wizard_actions button.wizard_next {
    background: linear-gradient(135deg, var(--main-color) 0%, #0078b8 100%);
    border: none;
    border-radius: 14px;
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(31, 182, 255, 0.3);
    transition: all 0.2s;
}

.form_area .wizard_step .wizard_actions button.wizard_next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(31, 182, 255, 0.42);
}

.form_area .wizard_step .wizard_actions button.wizard_back {
    border-color: transparent;
    box-shadow: none;
    min-width: unset;
    color: var(--text-paragraph);
    font-weight: 600;
}

.form_area .wizard_step .wizard_actions .get_started_btn {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--main-color) 0%, #0078b8 100%);
    border: none;
    color: white;
    font-weight: 700;
    width: 100%;
    box-shadow: 0 4px 18px rgba(31, 182, 255, 0.3);
    transition: all 0.2s;
}

.form_area .wizard_step .wizard_actions .get_started_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(31, 182, 255, 0.42);
}

.form_area .wizard_step .wizard_actions.center {
    justify-content: center;
}

.form_area .wizard_step .wizard_step.leaving {
    opacity: 0;
    transform: translateY(-10px);
    transition: all .3s ease;
}

.form_area .wizard_step .wizard_body {
    min-height: 10rem;
}

.form_area .wizard_step .wizard_body .our_logo {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 50%;
}

.form_area .wizard_step .wizard_body .options_area {
    display: grid;
    gap: 0.5rem;
}

.form_area .wizard_step .wizard_body .options_area.one_grid {
    grid-template-columns: repeat(1, 1fr);
}

.form_area .wizard_step .wizard_body .options_area.tow_grid {
    grid-template-columns: repeat(2, 1fr);
}

.form_area .wizard_step .wizard_body .options_area.three_grid {
    grid-template-columns: repeat(3, 1fr);
}

.form_area .wizard_step .wizard_body .options_area .form-selectgroup-item .form-selectgroup-label {
    font-size: 1rem;
    padding-block: 0.8rem;
    color: var(--main-text);
}

.form_area .wizard_step .wizard_body .options_area .form-selectgroup-input:checked+.form-selectgroup-label {
    color: var(--white-color);
    border-color: var(--main-color);
    background: var(--main-color);
}

.form_area .wizard_step .wizard_body .input_area {
    text-align: start;
    margin-bottom: 1rem;
}

.form_area .wizard_step .wizard_body .input_area label {
    font-size: 1rem;
}

.form_area .wizard_step .wizard_body .input_area input {
    padding-block: 0.85rem;
    font-size: 1rem;
}

.wizard_body.has-error {
    animation: shake 0.3s;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }
}

/* End Wizard */

/* Start Dashboard */
.dashboard_app {
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height: 100vh;
    margin-inline: calc(var(--margin-inline));
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 5rem;
}

.dashboard_app .dashboard_aside .type_work {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-input);
    gap: 1rem;
    padding: 0.25rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

.dashboard_app .dashboard_aside .type_work a {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 12px;
    font-weight: 500;
    justify-content: center;
    gap: 0.25rem;
}

.dashboard_app .dashboard_aside .type_work a.active {
    background: var(--bg-body);
}

.dashboard_app .dashboard_aside ul li {
    margin-bottom: 0.25rem;
}

.dashboard_app .dashboard_aside ul li.space_list {
    margin-top: 1.5rem;
}

.dashboard_app .dashboard_aside ul li a {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-weight: 500;
}

.dashboard_app .dashboard_aside ul li a .text_link {
    display: grid;
    grid-template-columns: 13% 1fr;
    width: 100%;
}

.dashboard_app .dashboard_aside ul li a.active {
    background: var(--bg-input);
}

.dashboard_app .dashboard_aside ul li a:hover {
    background: var(--bg-input);
}

.dashboard_app .dashboard_aside ul li a svg {
    stroke-width: 2;
    --aous-aw-icon-size: 1.4rem;
}

.dashboard_app .dashboard_aside ul li a .count_badge {
    font-size: 0.8rem;
    color: #1a1a1a;
}

.dashboard_app .user_account_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.dashboard_app .user_account_header .user_account_action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard_app .user_account_header .user_account_action a {
    position: relative;
}

.dashboard_app .user_account_header .user_account_action a svg {
    --aous-aw-icon-size: 1.3rem;
}

.dashboard_app .user_account_header .user_account_action a .count_new_messages {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--bg-input);
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 0.75rem;
}

.dashboard_app .user_account_header .text_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard_app .user_account_header img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
}

.dashboard_app .user_account_header .user_account_text h2 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.dashboard_app .dashboard_content .card_info {
    position: relative;
    margin-bottom: 3rem;
}

.dashboard_app .dashboard_content .card_info::after {
    content: '';
    position: absolute;
    left: 2%;
    bottom: -1rem;
    height: 3px;
    width: 96%;
    background-color: var(--bg-input);
}

.dashboard_app .dashboard_content .card_info .card_title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding: 0.6rem;
}

.dashboard_app .dashboard_content .card_info .links_list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dashboard_app .dashboard_content .card_info .links_list a {
    font-size: 1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem;
    color: var(--main-text);
    border-radius: 8px;
}

.dashboard_app .dashboard_content .card_info .links_list a:hover {
    background-color: var(--bg-input);
}

.dashboard_app .dashboard_content .card_info .links_list a svg {
    color: var(--main-text);
}

.dashboard_app .dashboard_content .back_action_area {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.dashboard_app .dashboard_content .back_action_area a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1rem;
    font-weight: 500;
}

.dashboard_app .dashboard_content .back_action_area a svg {
    --aous-aw-icon-size: 1.5rem;
    stroke-width: 1.75;
}

.dashboard_app .dashboard_content .single_details_screen {
    margin-top: 1rem;
}

.dashboard_app .dashboard_content .single_details_screen .screen_title_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    margin-bottom: 1rem;
}

.dashboard_app .dashboard_content .single_details_screen .screen_title_area .screen_title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.dashboard_app .dashboard_content .single_details_screen .screen_title_area .screen_description {
    display: block;
    font-size: 1rem;
    margin-top: 0.25rem;
    color: var(--text-paragraph);
}

.dashboard_app .dashboard_content .single_details_screen .screen_title_area a {
    display: inline-flex;
    font-size: 1rem;
    align-items: center;
    gap: 3px;
    font-weight: 500;
}

/* End Dashboard */

/* Start System Message */
.alert_message_area {
    width: 50%;
    margin: auto;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.alert_message_card {
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.alert_message_area .alert_message_card {
    padding: 1.5rem 2rem;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: unset;
    text-align: center;
}

.alert_message_area .alert_message_card .alert_icon {
    margin-top: 3px;
}

.alert_message_area .alert_message_card .alert_icon svg {
    --aous-aw-icon-size: 2rem;
}

.alert_message_area .alert_message_card .alert_text .title_message {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
}

.alert_message_area .alert_message_card .alert_text .description_message {
    display: block;
    font-size: 1rem;
}

.alert_message_area .alert_message_card .alert_text .list_message li {
    display: block;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.alert_message_area .alert_message_card .alert_text .list_message li.done {
    text-decoration: line-through;
}

.alert_message_area .alert_message_card .alert_text a {
    display: block;
    font-weight: 500;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

/* End System Message */

/* Start Profile photo */

.dashboard_app .dashboard_content .single_details_screen .profiel_photo_img img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
}

.dropzone_card .dropzone .dz-preview .dz-image {
    display: none;
}

.dropzone_card .dropzone .dz-preview {
    background-color: #eaf9f0;
    border: 2px dashed #28a745;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8rem;
}

.dropzone_card .dropzone .dz-preview .dz-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 8rem;
}

.dropzone_card .dropzone .dz-preview .dz-progress {
    height: 10px;
    bottom: 1.25rem;
    border: 3px solid var(--aous-aw-success);
    background: var(--aous-aw-success);
    top: unset;
}

.dropzone_card .dropzone .dz-preview:not(.dz-processing) .dz-progress {
    animation: unset
}

.dz-message {
    border: 3px dashed var(--border-color);
    padding-block: 3rem;
    border-radius: 8px;
    margin-top: 0;
}

.theme-dark .dz-message {
    border-color: #262d33 !important;
}

.dz-message .dropzone-msg-title svg {
    --aous-aw-icon-size: 2.5rem;
}

.dz-message .dropzone-msg-desc {
    font-size: 1rem;
    width: 40%;
    display: block;
    margin: auto;
}

.dz-message .dropzone-msg-small {
    display: block;
    margin-top: 1rem !important;
    color: var(--paragraph-color);
}

#cropper_modal .modal-body {
    padding: 0;
}

.cropper-container-wrapper {
    width: 100%;
    height: 70vh;
    max-height: 700px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cropper_image {
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
    display: block;
}

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

/* End Profile Photo */

/* Start Travel preferences */
.options_area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.options_area .options_content {
    margin-bottom: 1.5rem;
}

.options_area .options_content h3 {
    margin-bottom: 1rem;
}

.options_area .options_content .form-check-input {
    border-color: var(--main-text);
}

.options_area .options_content .form-check-input:checked {
    background-color: var(--main-text);
    background-size: 1.25rem;
}

/* Start Travel preferences */

/* Start Personal details */
.form_info_area .personal_details_inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form_info_area .input_content {
    margin-bottom: 1rem;
}

.form_info_area .personal_details_inputs .form-selectgroup-input+.form-selectgroup-label {
    color: var(--text-paragraph);
    border: 1px solid var(--border-color);
    min-width: 6rem;
    border-radius: 30px;
    font-size: 1rem;
}

.form_info_area .personal_details_inputs .form-selectgroup-input:checked+.form-selectgroup-label {
    color: var(--white-color);
    background: var(--main-color);
}

.form_info_area .input_content label {
    font-size: .9rem;
}

.form_info_area .input_content select,
.form_info_area .input_content .tom_select .ts-control,
.form_info_area .input_content input {
    border-radius: 12px !important;
    max-height: 42px;
}


/* End Personal details */

/* Start Personal identity */

.upload_screen_area .dropzone {
    position: relative;
    min-height: 220px;
}

.upload_screen_area .dropzone .dz-message {
    position: absolute;
    inset: 0;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 3px dashed var(--border-color);
    border-radius: 8px;
    pointer-events: auto;
    transition: opacity .25s ease;
    background: transparent;
}

.upload_screen_area .dropzone.dz-started .dz-message {
    opacity: 0.25;
}

.upload_screen_area .dropzone .dz-preview {
    position: relative;
    z-index: 2;
    margin-top: 1rem;
}

.upload_screen_area .dropzone.dz-started .dz-message .dropzone-msg-desc,
.upload_screen_area .dropzone.dz-started .dz-message .dropzone-msg-small {
    display: none;
}

.upload_screen_area .file_cards_area {
    margin-block: 2rem;
}

.upload_screen_area .file_cards_area .file_card {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 6%;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.upload_screen_area .file_cards_area .file_card .file_info {
    display: flex;
    gap: 1rem;
}

.upload_screen_area .file_cards_area .file_card .file_info img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.upload_screen_area .file_cards_area .file_card .file_info .file_text {
    width: 100%;
    padding-top: 0.5rem;
}

.upload_screen_area .file_cards_area .file_card .file_info .file_text .text-body {
    font-size: 1rem;
}

.upload_screen_area .file_cards_area .file_card .file_action a svg {
    --aous-aw-icon-size: 1.5rem;
}

/* End Personal identity */

/* Start New Ride */
.new_ride_area .new_ride_form_area {
    display: flex;
}

.new_ride_area .new_ride_form_area .form_content_area {
    width: 50%;
    min-height: 100vh;
    padding-inline: 8rem;
    padding-top: 3rem;
}

.new_ride_area .new_ride_form_area .form_content_area .text_section {
    text-align: center;
    margin-bottom: 1.75rem;
}

.new_ride_area .new_ride_form_area .form_content_area .text_section .title_section {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.new_ride_area .new_ride_form_area .form_content_area .text_section .description_section {
    display: block;
    text-align: center;
    font-size: 1rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step {
    margin-bottom: 2rem;
    display: none;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step.active {
    display: block;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .form_filed_section .ts-control,
.new_ride_area .new_ride_form_area .form_content_area .wizard_step .form_filed_section input[type="text"] {
    border-radius: 1rem;
    font-size: 1rem;
    background-color: var(--bg-input);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions.first_action {
    justify-content: center;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions .wizard_next,
.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions .wizard_back {
    font-size: 1rem;
    font-weight: 500;
    padding-block: 0.65rem;
    padding-inline: 1.25rem;
    border-radius: 30px;
    color: var(--main-text);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions .wizard_next,
.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions .get_started_btn {
    background-color: var(--main-color);
    color: white;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .routes_list .route_item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 10px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .routes_list .route_item.active {
    border-color: var(--main-color);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .routes_list .route_radio {
    margin-top: 3px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .pickup_points_list .pickup_point_item {
    padding-inline: 2rem;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-block: 0.35rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .pickup_points_list .form-check-input {
    border-color: var(--main-color) !important;
    border-width: 1.5px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .pickup_points_list .form-check-input:disabled {
    border-color: var(--aous-aw-muted);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .pickup_points_list .form-check-input:checked {
    background-color: var(--main-color);
}

.new_ride_area .map_content_area {
    position: relative;
    width: 50%;
}

.new_ride_area .map_content_area #map {
    position: fixed !important;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    border: none;
    border-radius: 0;
    z-index: 10;
}

.new_ride_area .map_content_area .map_pin_wrapper {
    position: fixed;
    top: 50%;
    right: 25%;
    transform: translate(50%, -100%);
    pointer-events: none;
    z-index: 20;
}

.new_ride_area .map_content_area .map_pin_wrapper.hidden {
    display: none !important;
}

.new_ride_area .map_content_area .map_pin {
    width: 28px;
    height: 28px;
    background: #00406c;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    position: relative;
    transition: transform 0.25s ease;
}

.new_ride_area .map_content_area .map_pin::after {
    content: '';
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 8px;
}

.new_ride_area .map_content_area .map_pin_shadow {
    width: 1rem;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    margin: 6px auto 0;
    transition: all 0.25s ease;
}

.pac-container {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border-color);
    margin-top: 8px;
    font-family: inherit;
    z-index: 99999 !important;
}

.pac-icon {
    display: none !important;
}

.pac-item {
    padding: 14px 18px;
    font-size: 15px;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
}

.pac-item:first-child {
    border-top: none;
}

.pac-item:hover,
.pac-item.pac-item-selected {
    background-color: var(--bg-input);
}

.pac-item .pac-item-query {
    font-weight: 600;
    color: var(--main-text);
}

.pac-item span:not(.pac-item-query) {
    color: #64748b;
    font-size: 13px;
}

.pac-logo:after {
    margin: 8px 12px;
    opacity: 0.5;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_popup {
    width: 340px;
    background: var(--white-color);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    transition: all 0.2s ease-in-out;
    margin: 3rem auto;
}

html[dir="rtl"] .new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_popup {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 1rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_header .nav {
    display: flex;
    gap: .5rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span {
    padding: .75rem;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span.disabled {
    pointer-events: none;
    opacity: .35;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span.today {
    background-color: var(--main-color);
    color: var(--white-color);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span.active {
    background: var(--main-color);
    color: var(--white-color);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_header button {
    border: none;
    background: none;
    cursor: pointer;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_days,
.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_days span {
    font-size: .8rem;
    color: var(--text-paragraph);
    margin-bottom: .5rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span:hover {
    background: var(--bg-input);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span.active {
    background: var(--main-color);
    color: var(--white-color);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .passenger_counter {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 48px;
    margin-top: 40px;
    margin-bottom: 2rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .counter_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #0ea5e9;
    background: transparent;
    font-size: 28px;
    color: #0ea5e9;
    cursor: pointer;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .counter_btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .counter_btn svg {
    stroke-width: 3.5;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .counter_value {
    font-size: 4.5rem;
    font-weight: 600;
    color: var(--main-text);
    min-width: 80px;
    text-align: center;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_counter {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 48px;
    margin: 40px 0 24px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_value {
    position: relative;
    font-size: 3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_value .currency {
    font-size: 1.7rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_hint {
    margin-top: 24px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_badge {
    display: inline-block;
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_message {
    margin-top: 10px;
    color: #64748b;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .final_option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    background: var(--main-color);
    border-radius: 40px;
    text-align: center;
    color: white;
    margin-bottom: 0.75rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .final_option svg {
    --aous-aw-icon-size: 1.4rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .save_as_draft {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-paragraph);
    cursor: pointer;
}

/* End New Ride */

/* Start Ride details area */
.page_details_area {
    margin-inline: var(--margin-inline);
    padding-inline: 1rem;
    padding-block: 2rem;
}

.page_details_area h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.page_details_area .ride_details_body {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 1fr 30%;
    gap: 2.5%;
}

.page_details_area .ride_details_body .ride_details_content_left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details {
    background-color: var(--bg-body);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.65rem;
    box-shadow: 1px 1px 10px #e6e6e6;
    padding: 1rem 1.5rem;
    border-radius: 18px;
    overflow: hidden;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .ride_timeline_card {
    display: grid;
    grid-template-columns: 45px 20px 1fr;
    gap: 0.3rem;
    border-radius: 18px;
    width: 100%;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_times {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_time {
    font-weight: 600;
    font-size: 0.9rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_duration {
    font-size: 0.8rem;
    color: var(--text-paragraph);
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_line {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_line::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--main-color-secound);
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_dot {
    width: 12px;
    height: 12px;
    background: var(--bg-body);
    border: 2.5px solid var(--main-text);
    border-radius: 50%;
    z-index: 1;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_locations {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.3rem;
    width: 100%;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_location {
    padding: 0.2rem 0.3rem;
    border-radius: 10px;
    cursor: pointer;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_location:hover {
    background: #f4f4f4;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_location.muted {
    opacity: 0.45;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .location_name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .location_map {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--main-color);
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .location_map svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content {
    width: 100%;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_link {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_link:hover {
    background-color: var(--bg-input);
    border-radius: 12px;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_photo img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_text .driver_name {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_text .driver_rating_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-paragraph);
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_text .driver_rating_content .rating_info {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 500;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_text .driver_rating_content svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .cancel_notes {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .features_list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-block: 1.5rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .features_list li {
    display: grid;
    grid-template-columns: 3% 1fr;
    align-items: center;
    gap: 1rem;
    color: var(--text-paragraph);
    font-weight: 500;
    font-size: 0.95rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .btn {
    padding-inline: 1.25rem;
    padding-block: 0.75rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .section_title {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.7rem;
}

.page_details_area .ride_details_body .ride_details_content_left .stopovers_card .stopovers_area {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details.stopovers_card {
    display: block;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details.stopovers_card .stopover_city {
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details.stopovers_card .stopover_city svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_right {
    position: sticky;
    top: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body,
.page_details_area .ride_details_body .ride_details_content_right .price_ride_content {
    display: flex;
    background-color: var(--bg-body);
    box-shadow: 1px 1px 10px #e6e6e6;
    padding: 1rem 1.5rem;
    border-radius: 18px;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body {
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_right .price_ride_content {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 500;
}

.page_details_area .ride_details_body .ride_details_content_right .price_ride_content .price_text {
    font-size: 1.2rem;
    font-weight: 600;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body span {
    font-size: 0.95rem;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body .date_text {
    font-size: 1.1rem;
    font-weight: 500;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body .driver_small_card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body .driver_small_card .vehicle_info svg {
    --aous-aw-icon-size: 2.25rem;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body .driver_small_card img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.page_details_area .ride_details_body .ride_details_content_right .rating_info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page_details_area .ride_details_body .ride_details_content_right .rating_info svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area.form_booking_details .ride_details_body .ride_details_content_right .action_ride_content p {
    margin-top: 3rem;
}

.page_details_area .ride_details_body .ride_details_content_right .action_ride_content a,
.page_details_area .ride_details_body .ride_details_content_right .action_ride_content button {
    width: 100%;
    padding-block: 0.75rem;
    font-size: 1rem;
    border-radius: 30px;
    margin-bottom: 0.75rem;
}

/* End Ride details area */

/* Start Empty card */
.empty_card {
    text-align: center;
    padding: 1rem;
    border-radius: 12px;
}

.empty_card svg {
    --aous-aw-icon-size: 2.25rem;
}

.empty_card h2 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.empty_card p {
    font-size: 0.9rem;
    color: var(--text-paragraph);
}

/* End Empty card */

/* Start Rides list */
.rides_list .ride_item {
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.rides_list .ride_item .left_content_item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rides_list .ride_item .left_content_item .icon_info svg {
    --aous-aw-icon-size: 1.75rem;
}

.rides_list .ride_item .left_content_item .item_info_content .route_info {
    display: flex;
    gap: 2rem;
    margin-bottom: 10px;
}

.rides_list .ride_item .left_content_item .item_info_content .route_info .pick_up,
.rides_list .ride_item .left_content_item .item_info_content .route_info .drop_off {
    display: flex;
    align-items: center;
    gap: 3px;
}


.rides_list .ride_item .left_content_item .item_info_content .route_info .pick_up svg,
.rides_list .ride_item .left_content_item .item_info_content .route_info .drop_off svg {
    --aous-aw-icon-size: 1rem;
}

.rides_list .ride_item .left_content_item .item_info_content .route_info .pick_up .info_area span,
.rides_list .ride_item .left_content_item .item_info_content .route_info .drop_off .info_area span {
    display: block;
}

.rides_list .ride_item .left_content_item .item_info_content .ride_info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.rides_list .ride_item .left_content_item .item_info_content .ride_info .col_info {
    padding: 5px 1rem;
    display: block;
    border-radius: 12px;
}

/* End Rides list */

/* Start Ride Details */
.ride_profile_details .title_section {
    margin-bottom: 0.2rem;
}

.ride_profile_details hr {
    margin-block: 2rem !important;
}

.info_section .value {
    font-size: 1rem;
    font-weight: 500;
}

.info_section .title {
    color: var(--text-paragraph);
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
}

/* End Ride Details */

/* Start Details area */
.page_details_area .driver_info_area {
    position: relative;
    min-height: 100vh;
    width: 50%;
    margin: auto;
}

.page_details_area .driver_info_area .back_action_area {
    text-align: end;
}

.page_details_area .driver_info_area .driver_info_body {
    padding-top: 2rem;
}

.page_details_area .driver_info_area .driver_info_body .name_content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page_details_area .driver_info_area .driver_info_body .name_content .driver_photo img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.page_details_area .driver_info_area .driver_info_body .name_content .driver_info_text .driver_name {
    display: block;
    font-size: 1.35rem;
    font-weight: 500;
}

.page_details_area .driver_info_area .driver_info_body .name_content .driver_info_text .driver_age {
    display: block;
    font-size: 1rem;
}

.page_details_area .driver_info_area .driver_info_body hr {
    border: 2.5px solid var(--aous-aw-dark-border-subtle) !important;
}

.page_details_area .driver_info_area .driver_info_body .list_area {
    margin-top: 2rem;
}

.page_details_area .driver_info_area .driver_info_body .list_area .title_list {
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}

.page_details_area .driver_info_area .driver_info_body .list_area .bio_text {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-paragraph);
}

.page_details_area .driver_info_area .driver_info_body .list_area .item_list {
    display: grid;
    gap: 1rem;
    grid-template-columns: 3% 1fr;
    padding-block: 0.5rem;
    align-items: center;
    font-size: 1rem;
    color: var(--text-paragraph);
}

.page_details_area .driver_info_area .driver_info_body .list_area .item_list b {
    color: var(--main-color-secound);
}

.page_details_area .driver_info_area .driver_info_body .list_area .item_list .icon_content svg {
    --aous-aw-icon-size: 1.3rem;
    color: var(--text-paragraph);
    stroke-width: 2;
}

/* End Details area */

/* Start Messages */
.page_details_area .driver_info_card_area .driver_info_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content .driver_photo img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 50%;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content .driver_name_content .driver_name {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content .driver_name_content .driver_rating_content {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-paragraph);
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content .driver_name_content .driver_rating_content svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area .driver_info_card_area .route_info_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page_details_area .driver_info_card_area .route_info_card .route_info_card_link .cities_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page_details_area .driver_info_card_area .route_info_card .route_info_card_link .cities_content span {
    font-weight: 600;
}

.page_details_area .driver_info_card_area .route_info_card .route_info_card_link .seats_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-paragraph);
    font-size: 0.8rem;
}

.page_details_area .driver_info_card_area .route_info_card .arrow_icon {
    --aous-aw-icon-size: 1.5rem;
    color: var(--text-paragraph);
}

.page_details_area .driver_info_card_area .request_to_book_action {
    width: 100%;
    margin-bottom: 1.5rem;
    padding-block: 0.75rem;
    border-radius: 30px;
}

.page_details_area .messages_body {
    margin-top: 1rem;
    overflow: auto;
    max-height: 400px;
    min-height: 400px;
    height: 100%;
    padding-bottom: 3rem;
}

.page_details_area .messages_body .no_messages {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_details_area .messages_body .no_messages p {
    font-size: 1rem;
    font-weight: 500;
}

.send_message_area {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    z-index: 99;
    overflow: hidden;
}

.send_message_area button {
    background-color: transparent;
    border: unset;
}

.send_message_area .input-group input,
.send_message_area .input-group,
.send_message_area .input-group .input-group-text {
    border: unset;
}

.send_message_area .input-group {
    padding-block: 0.2rem !important;
    background: var(--bg-input);
}

.send_message_area .input-group input {
    padding-left: 1.25rem;
    background: var(--bg-input)
}

.send_message_area .input-group svg {
    color: var(--main-color);
    --aous-aw-icon-size: 1.5rem;
}

.send_message_area .input-group .input-group-text {
    background-color: transparent;
}

.page_details_area .message_item {
    display: flex;
    margin-bottom: 10px;
}

.page_details_area .message_item.me {
    justify-content: flex-end;
}

.page_details_area .message_item.him {
    justify-content: flex-start;
}

.page_details_area .message_bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 1rem;
    font-size: 14px;
    position: relative;
}

.page_details_area .message_item.me .message_bubble {
    background: #d6f3ff;
    border-bottom-right-radius: 4px;
}

.page_details_area .message_item.me .message_bubble p {
    margin-bottom: 0.5rem;
}

.page_details_area .message_item.him .message_bubble {
    background: #f1f1f1;
    border-bottom-left-radius: 4px;
}

.page_details_area .message_time {
    display: block;
    font-size: 11px;
    color: #777;
    margin-top: 4px;
    text-align: right;
}

/* End Messages */

/* Start No data card */
.no_data_card {
    text-align: center;
    width: 75%;
    margin: 3rem auto;
}

.no_data_card .image_message {
    width: 23rem;
    border-radius: 12px;
    margin: auto;
    margin-block: 1rem;
}

.no_data_card span {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
}

.no_data_card .icon_message {
    margin-bottom: 1rem;
}

.no_data_card .icon_message svg {
    --aous-aw-icon-size: 2.25rem;
}

.no_data_card .title_message {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.7rem;
}

.no_data_card .action_message {
    background-color: var(--main-color);
    color: white;
    border-radius: 30px;
    padding: 0.7rem 1rem;
    display: inline-block;
    margin-top: 1rem;
}

/* End No data card */

/* Start Messages */
.single_details_screen .messages_area .message_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.single_details_screen .messages_area .message_item:hover {
    background-color: var(--bg-input);
}

.single_details_screen .messages_area .message_item .message_info {
    display: flex;
    gap: 0.5rem;
}

.single_details_screen .messages_area .message_item .message_info .message_icon svg {
    --aous-aw-icon-size: 1.5rem;
}

.single_details_screen .messages_area .message_item .message_info .message_content span {
    display: block;
}

.single_details_screen .messages_area .message_item .message_info .message_content .driver_info {
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.single_details_screen .messages_area .message_item .message_info .message_content .driver_info .last_message {
    font-weight: 300;
}

.single_details_screen .messages_area .message_item .message_info .message_content .ride_info {
    color: var(--text-paragraph);
    font-size: 0.8rem;
}

/* End Messages */

/* Start Message Details */
.messages_details_area {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
}

.messages_details_area .messages_header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 1rem;
    border-bottom: 1px solid #eee;
    background: var(--bg-body);
}

.messages_details_area .user_avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.messages_details_area .user_info {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.messages_details_area .user_name {
    font-weight: 600;
    font-size: 15px;
}

.messages_details_area .ride_info {
    font-size: 12px;
    color: #888;
}

.messages_details_area .messages_body {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    margin-top: 1rem;
    overflow: auto;
    max-height: 400px;
    height: 100%;
    padding-bottom: 3rem;
}

.messages_details_area .message_row {
    display: flex;
    margin-bottom: 10px;
}

.messages_details_area .message_row.me {
    justify-content: flex-end;
}

.messages_details_area .message_row.other {
    justify-content: flex-start;
}

.messages_details_area .message_sender {
    font-size: 12px;
    font-weight: 500;
    color: #777;
    margin-bottom: 4px;
}

.messages_details_area .message_row.me .message_sender {
    text-align: right;
}

.messages_details_area .message_row.other .message_sender {
    text-align: left;
}

.messages_details_area .message_bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 1rem;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
}

.messages_details_area .message_row.me .message_bubble {
    background: #d6f3ff;
    border-bottom-right-radius: 4px;
}

.messages_details_area .message_row.other .message_bubble {
    background: var(--bg-input);
    color: #222;
    border-bottom-left-radius: 4px;
}

.messages_details_area .message_meta {
    text-align: right;
    margin-top: 4px;
}

.messages_details_area .message_time {
    font-size: 11px;
    opacity: 0.7;
}

/* End Message Details */

/* Start Bookings */
.bookings_area .booking_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

.bookings_area .booking_card .booking_content {
    display: flex;
    gap: 2rem;
}

.bookings_area .booking_card .booking_content .booking_number_area .booking_number {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.bookings_area .booking_card .booking_content .booking_info .ride_date {
    display: block;
    font-size: 0.8rem;
    color: var(--text-paragraph);
}

.bookings_area .booking_card .booking_content .booking_info .booking_ride {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bookings_area .booking_card .booking_content .booking_info .booking_ride span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.bookings_area .booking_card .booking_content .booking_info .booking_ride svg {
    --aous-aw-icon-size: 1rem;
}

/* End Bookings */

/* Start Booking details */
.booking_details_area .card_details_header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.booking_details_area .card_details_header .card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.booking_details_area .booking_details_content {
    margin-top: 1rem;
}

.booking_details_area .booking_details_content .title_section {
    margin-bottom: 0.5rem;
}

.booking_details_area .booking_details_content hr {
    margin-block: 2rem !important;
}

.warning_details_area {
    margin-bottom: 1rem;
}

.warning_details_area .booking_message_warning {
    padding: 1rem;
    border-radius: 12px;
}

.warning_details_area .booking_message_warning span {
    font-size: 0.9rem;
}

.warning_details_area .booking_message_warning a {
    font-size: 1rem;
    text-decoration: underline;
}

/* End Booking details */

/* Start How to area */
.how_to_area .title_screen {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.how_to_area ul {
    list-style: decimal;
    padding-inline: 1.75rem;
}

.how_to_area ul li {
    margin-bottom: 1.25rem;
}

.how_to_area ul li span {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.how_to_area ul li span b {
    display: inline-flex;
    align-items: center;
}

/* End How to area */

/* Start Instructions screen */
.instructions_screen .instructions_section_list {
    margin-bottom: 3rem;
}

.instructions_screen .instructions_section_list h3 {
    font-size: 1.1rem;
}

.instructions_screen .instructions_section_list span {
    display: block;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.instructions_screen .instructions_section_list ul {
    list-style: disc;
    padding-inline: 2rem;
}

.instructions_screen .instructions_section_list ul li {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    color: var(--text-paragraph);
}

/* End Instructions screen */

/* Start Wallet area */
.wallet_area .section_info_card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1.5rem;
}

.wallet_area .section_info_card .section_info_wallet .value_info {
    font-size: 1.25rem;
    font-weight: 500;
}

.wallet_area .section_info_card.section_info_wallet .title_info {
    font-size: 1rem;
}

/* End Wallet area */

/* Start Rating */
.rating_modal .title_text {
    display: block;
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.rating_modal .section_rate {
    margin-bottom: 1rem;
}

.rating_modal .section_rate svg {
    --aous-aw-icon-size: 1.25rem;
}

#order_rating .section_rate svg {
    --aous-aw-icon-size: 2.25rem;
}

.rating_modal .section_rate .section_title {
    display: block;
}

/* End Rating */

/* Start Live area */

.live_navbar {
    margin-inline: 4rem;
}

.live_content_screen {
    display: grid;
    grid-template-columns: 33% 33% 1fr;
    gap: 2rem;
    height: 90vh;
    overflow: hidden;
}

.main_screen {
    grid-template-columns: 35% 1fr;
}

.live_content_screen .form_options_area {
    padding-left: 5rem;
    padding-right: 1rem;
    overflow-y: scroll;
    scrollbar-width: none;
}

.live_content_screen .form_options_area form {
    border: 1.5px solid var(--border-color);
    padding: 1.5rem 1rem;
    border-radius: 12px;
}

.live_content_screen .form_options_area form>h2 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.live_content_screen .form_options_area form .input_content {
    margin-bottom: 0.7rem;
}

.live_vehicle_cards {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

.live_vehicle_icon {
    border-radius: 10px !important;
    background: var(--bg-input) !important;
    padding: 0.2rem;
}

.live_vehicle_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.live_service_card.selected .live_vehicle_icon {
    background: rgba(31, 182, 255, 0.12) !important;
}

.live_content_screen .form_options_area form .input_content input {
    background: var(--bg-input);
    border: 2px solid transparent !important;
    padding-block: 0.68rem;
    border-radius: 10px;
    font-size: 1rem;
}

.live_content_screen .form_options_area form .input_content input:active,
.live_content_screen .form_options_area form .input_content input:focus {
    border-color: var(--main-text) !important;
}

.live_content_screen .form_options_area form .action_button_form a,
.live_content_screen .form_options_area form .action_button_form button {
    width: 100%;
    padding-block: 0.7rem;
    font-size: 1rem;
    border-radius: 12px;
}

.live_content_screen .form_options_area form .action_button_form button {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.live_content_screen .form_options_area form .action_button_form a {
    display: block;
    text-align: center;
}

.live_content_screen .map_area {
    height: 100%;
}

.live_content_screen .map_area .map_card {
    height: 100%;
    position: relative;
}

.live_content_screen .map_area .map_card .map_back_btn {
    display: none;
}

.live_content_screen .map_area .map_card .live_map {
    height: 100%;
    border-radius: 12px;
    border: 2px solid var(--aous-aw-border-color-translucent);
    direction: ltr;
}

.live_content_screen .map_area .map_card .map_action_button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

.live_content_screen .map_area .map_card .map_action_button button {
    background: var(--main-color);
    color: white;
    padding: 0.75rem;
    border-radius: 12px;
}

html[dir="rtl"] .live_content_screen .map_area .map_card .map_action_button svg {
    margin: 0 !important;
}

.live_content_screen .rahashare-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: auto;
    z-index: 999;
}

.live_content_screen .rahashare-marker .anchor {
    width: 1rem;
    height: 17px;
    background: #111;
    border-radius: 50%;
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
}

.live_content_screen .rahashare-marker .anchor.drop_off {
    width: 14px;
    height: 14px;
    border-radius: 0;
}

.live_content_screen .rahashare-marker .anchor.pick_up::after,
.rahashare-marker .anchor.drop_off::after {
    content: '';
    position: absolute;
    background-color: #fff;
    width: 5px;
    height: 5px;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}

.live_content_screen .marker-card {
    background: #fff;
    padding: 5px 14px;
    min-width: 175px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-left: 11rem;
    border-radius: 8px;
}

.live_content_screen .marker-card .label {
    font-size: 13px;
    font-weight: 600;
    color: #000000;
}

.live_content_screen .marker-card .text {
    font-size: 14px;
    color: #000000;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live_content_screen .marker-card .arrow {
    font-size: 20px;
    color: #000000;
}

.live_content_screen .cars_list_items {
    position: relative;
    overflow: auto;
    height: 100%;
    padding-right: 36px;
    margin-left: -18px;
    padding-left: 18px;
    scrollbar-width: thin;
}

.live_content_screen .cars_list_items .cars_list_header {
    margin-bottom: 0.75rem;
}

.live_content_screen .cars_list_items .cars_list_header span {
    display: block;
}

.live_content_screen .cars_list_items .cars_list_header .title_list {
    font-size: 1.5rem;
    font-weight: 600;
}

.live_content_screen .cars_list_items .cars_list_header .title_description {
    font-size: 1.1rem;
    color: var(--text-paragraph);
}

.live_content_screen .cars_list_items .list_content {
    overflow-y: scroll;
    height: calc(100vh - 180px);
    padding-right: 1rem;
    scrollbar-width: none;
    padding-top: 0.5rem;
}

.live_content_screen .cars_list_items .list_content .car_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem;
    border: 2.5px solid var(--border-color);
    border-radius: 1rem;
    margin-bottom: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
}

.live_content_screen .cars_list_items .list_content .car_item.selected {
    border-color: #1a1a1a !important;
    background: #f9f9f9;
}

.live_content_screen .cars_list_items .list_content .car_item:hover {
    border-color: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.live_content_screen .cars_list_items .list_content .car_item .car_content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.live_content_screen .cars_list_items .list_content .car_item .car_content .img_content img {
    width: 4.5rem;
    object-fit: cover;
}

.live_content_screen .cars_list_items .list_content .car_item .car_content .text_content .car_note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.live_content_screen .cars_list_items .list_content .car_item .car_content .text_content span {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-paragraph);
    font-size: 1rem;
}

.live_content_screen .cars_list_items .list_content .car_item .car_content .text_content .car_name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--main-text);
}

.live_content_screen .cars_list_items .list_content .car_item .price_content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.live_content_screen .cars_list_items .list_content .car_item .price_content b {
    font-size: 1.3rem;
    font-weight: 600;
}

.shared_seats_pill {
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    background: rgba(31, 182, 255, 0.1);
    color: var(--main-color-secound);
    border: 1px solid rgba(31, 182, 255, 0.25);
    border-radius: 20px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.25rem;
    width: fit-content;
}

.live_content_screen .cars_list_items .action_choose_car {
    background-color: rgb(255, 255, 255);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    bottom: 0px;
    position: sticky;
    padding-top: 1rem;
}

.live_content_screen .cars_list_items .action_choose_car button {
    width: 100%;
    padding-block: 0.75rem;
    font-size: 1rem;
    border-radius: 10px;
    background: var(--main-color);
    border-color: var(--main-color);
}

.live_content_screen .empty_state {
    text-align: center;
    margin-top: 2rem;
}

.live_content_screen .empty_state .icon_content svg {
    --aous-aw-icon-size: 3.5rem;
    color: var(--aous-aw-yellow);
}

.live_content_screen .empty_state .title {
    font-size: 1.3rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.live_content_screen .empty_state span {
    display: block;
    font-size: 1rem;
}


/* End Live area */

/* Start Price breakdown */

#price_breakdown .modal-body {
    padding: 2rem !important;
}

#price_breakdown .modal-content {
    border-radius: 20px;
}

#price_breakdown .modal-body h1 {
    font-size: 1.75rem;
    font-weight: 600;
}

#price_breakdown .price_note {
    margin-top: 1rem;
    font-size: 1rem;
}

#price_breakdown .border_dashed {
    border-top: 2px dashed rgba(0, 0, 0, 0.12);
    margin-left: 1rem;
    margin-right: 1rem;
    width: 100%;
}

#price_breakdown .price_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

#price_breakdown .price_row span {
    font-size: 1.1rem;
    font-weight: 500;
    display: block;
    white-space: nowrap;
}

#price_breakdown .price_row b {
    font-weight: 600;
    display: block;
    white-space: nowrap;
}

#price_breakdown .price_row.total {
    font-size: 1.2rem;
    font-weight: 600;
}

#price_breakdown .price_row.total b {
    font-size: 1.3rem;
}

#price_breakdown .modal-content button {
    padding-block: 0.75rem;
    font-size: 1rem;
    border-radius: 10px;
}

/* End Price breakdown */
/* Start Switch */
.online_status_toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 0.3rem 0.5rem;
}

.online_status_toggle.status_online {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.online_status_toggle.status_online:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}

.online_status_toggle.status_offline {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.online_status_toggle.status_offline:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.online_status_toggle .status_text {
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

/* End Switch */

/* Start Activity Passenger */

.account_activity #activity_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.account_activity .activity_card {
    background: #fff;
    border-radius: 1rem;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

.account_activity .activity_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account_activity .activity_id {
    font-weight: 600;
    font-size: 15px;
    color: #111;
}

.account_activity .activity_type {
    margin-top: 6px;
    font-size: 14px;
    color: #666;
}

.account_activity .activity_timeline {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.account_activity .activity_timeline::before {
    content: '';
    position: absolute;
    left: 75px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: #e5e7eb;
}

.account_activity .timeline_item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.account_activity .timeline_date {
    width: 60px;
    font-size: 12px;
    color: #888;
    text-align: right;
    flex-shrink: 0;
}

.account_activity .timeline_dot {
    width: 8px;
    height: 8px;
    background: #111;
    border-radius: 50%;
    margin-top: 4px;
    z-index: 1;
}

.account_activity .timeline_address {
    font-size: 14px;
    color: #111;
    line-height: 1.4;
}

.account_activity .activity_meeting_point {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--main-color);
    background: color-mix(in srgb, var(--main-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--main-color) 20%, transparent);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 8px 0 0;
}

.account_activity .driver_rating {
    color: #f5a623;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.account_activity .activity_price {
    margin-top: 10px;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
    color: #111;
}

.account_activity .activity_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.account_activity .activity_info_line {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account_activity .driver_name {
    font-weight: 600;
    color: #111;
}

.account_activity .dot_sep {
    color: var(--text-paragraph);
}

.account_activity .order_actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.account_activity .action_btn {
    border: 1px solid #e5e7eb;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}

.account_activity .action_btn:active {
    transform: scale(.98);
}


/* Edn Activity Passenger */

/* Start Result Status Order */

.result_status_order {
    padding: 20px;
    width: 35rem;
    margin: auto;
}

.result_status_order .order_card_inner {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 12px 30px rgb(0 0 0 / 6%);
    text-align: center;
}

.result_status_order .order_card_inner .icon_area {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: #16a34a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result_status_order .order_card_inner .icon_area svg {
    --aous-aw-icon-size: 2rem;
}

.result_status_order .order_card_inner .order_info {
    margin: 20px 0;
    text-align: left;
}

.result_status_order .order_card_inner .order_info div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 15px;
}

.result_status_order .order_card_inner .order_status_hint {
    background: #f6fcff;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    color: #555;
    margin-bottom: 18px;
}

.result_status_order .order_card_inner .btn {
    width: 100%;
    padding-block: 0.7rem;
    font-size: 1rem;
}

/* End Result Status Order */

/* Start On The Map */

.on_the_map_area {
    position: relative;
}

.on_the_map_area #map {
    height: 84vh;
}

.on_the_map_area .on_map_info_card {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: min(92%, 520px);
    background: #fff;
    border-radius: 1rem;
    padding: 14px 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}


.on_the_map_area .on_map_info_card .arrival_timer {
    text-align: center;
    padding-top: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
}

.on_the_map_area .card_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.on_the_map_area .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.on_the_map_area .driver_info .name {
    font-weight: 600;
}

.on_the_map_area .driver_info .action_link {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--aous-aw-warning);
}

.on_the_map_area .driver_info .action_link svg {
    --aous-aw-icon-size: 1.1rem;
}

.on_the_map_area .status {
    font-size: 0.9rem;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.on_the_map_area .driver_info .dot {
    width: 8px;
    height: 8px;
    background: #16a34a;
    border-radius: 50%;
}

.on_the_map_area .price {
    font-weight: 600;
    font-size: 1.1rem;
}

.on_the_map_area .card_stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.on_the_map_area .stat {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 8px;
    text-align: center;
}

.on_the_map_area .stat .label {
    font-size: 0.75rem;
    color: #6b7280;
}

.on_the_map_area .stat .value {
    font-weight: 600;
    margin-top: 2px;
    display: block;
}

.card_actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.card_actions .btn {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
}


/* Start Shared Session Card */
.shared_session_card {
    width: min(92%, 560px) !important;
}

.shared_session_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-color);
}

.shared_session_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(31, 182, 255, 0.1);
    color: var(--main-color-secound);
    border: 1px solid rgba(31, 182, 255, 0.2);
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.shared_session_badge svg {
    --aous-aw-icon-size: 1rem;
}

.shared_session_riders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.incoming_orders_wrap {
    margin-bottom: 0.8rem;
    padding: 0.75rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(31, 182, 255, 0.08));
    border: 1px solid rgba(22, 163, 74, 0.12);
}

.incoming_orders_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--main-text);
}

.incoming_orders_count {
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #16a34a;
    color: #fff;
    font-size: 0.76rem;
}

.incoming_orders_list {
    display: grid;
    gap: 0.65rem;
}

.incoming_order_card {
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 14px;
    padding: 0.8rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.incoming_order_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.incoming_order_id {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-paragraph);
    margin-bottom: 0.2rem;
}

.incoming_order_name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--main-text);
}

.incoming_order_price {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--main-color-secound);
    white-space: nowrap;
}

.incoming_order_route {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}

.incoming_order_stop {
    position: relative;
    padding-inline-start: 1rem;
    font-size: 0.83rem;
    color: var(--main-text);
    line-height: 1.45;
}

.incoming_order_stop::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--main-color);
}

.incoming_order_stop:last-child::before {
    background: #ef4444;
}

.incoming_order_meta {
    font-size: 0.78rem;
    color: var(--text-paragraph);
    margin-bottom: 0.7rem;
}

.incoming_order_actions {
    display: flex;
    gap: 0.55rem;
}

.incoming_order_actions .btn {
    flex: 1;
    border-radius: 10px;
    font-weight: 700;
    padding: 0.6rem 0.7rem;
}

.srd_card {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
}

.srd_top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}

.srd_avatar {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.srd_info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.srd_name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--main-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srd_status {
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: 0.05rem;
}

.srd_price {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--main-color-secound);
    white-space: nowrap;
    margin-inline-start: auto;
}

.srd_actions {
    display: flex;
    gap: 0.4rem;
}

.srd_btn {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.srd_btn:hover {
    opacity: 0.82;
}

.srd_btn_way {
    background: #0ea5e9;
    color: #fff;
}

.srd_btn_arrived {
    background: #f59e0b;
    color: #fff;
}

.srd_btn_start {
    background: #16a34a;
    color: #fff;
}

.srd_btn_complete {
    background: var(--main-color);
    color: #fff;
}

.srd_btn_cancel {
    background: transparent;
    color: #ef4444;
    border: 1.5px solid #ef4444 !important;
    flex: 0 0 auto;
    padding-inline: 0.6rem;
}

.shared_session_speed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-paragraph);
}

.shared_session_speed .value {
    font-weight: 600;
    color: var(--main-text);
}

/* End Shared Session Card */

/* Start Shared Riders Panel */
.shared_riders_panel {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: min(92%, 520px);
    background: #fff;
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.shared_riders_panel .panel_header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.shared_riders_panel .panel_title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-paragraph);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shared_riders_panel .panel_count {
    background: var(--main-color);
    color: #fff;
    border-radius: 20px;
    padding: 0.05rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.shared_riders_panel .panel_list {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.shared_riders_panel .panel_list::-webkit-scrollbar {
    display: none;
}

.rider_card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-input);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    min-width: 10rem;
    flex-shrink: 0;
}

.rider_avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.rider_info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.rider_name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--main-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rider_status {
    font-size: 0.72rem;
    font-weight: 500;
}

.rider_price {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--main-color-secound);
    margin-top: 0.1rem;
}

.rider_action_btn {
    background: var(--main-color-secound);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.rider_action_btn:hover {
    opacity: 0.85;
}

.rider_action_btn.rider_action_complete {
    background: #16a34a;
}

/* End Shared Riders Panel */

/* End On The Map */

.ride_summary_card {
    max-width: 34rem;
    margin: 2rem auto;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.ride_summary_card .icon_area {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: #16a34a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ride_summary_card .icon_area svg {
    --aous-aw-icon-size: 2rem;
}

.ride_summary_card .summary_title {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.ride_summary_card .summary_section .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ride_summary_card .summary_section.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ride_summary_card .summary_section .box {
    background: var(--bg-input);
    padding: 10px;
    border-radius: 12px;
    text-align: center;
}

.ride_summary_card .summary_total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 600;
    padding-block: 0.5rem;
}

.ride_summary_card a {
    padding-block: 0.7rem !important;
    font-size: 1rem !important;
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 0.25rem;
}

/* Start Shared Ride Summary */
.shared_summary_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(31, 182, 255, 0.1);
    color: var(--main-color-secound);
    border: 1px solid rgba(31, 182, 255, 0.2);
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0.75rem auto 1.1rem;
}

.shared_summary_badge svg {
    --aous-aw-icon-size: 1rem;
}

.shared_summary_badge .badge_count {
    background: var(--main-color);
    color: #fff;
    border-radius: 20px;
    padding: 0.05rem 0.55rem;
    font-size: 0.75rem;
}

.shared_summary_passengers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.sp_card {
    background: var(--bg-input);
    border-radius: 14px;
    padding: 0.85rem 1rem;
}

.sp_card_top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.sp_avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.sp_info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sp_name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--main-text);
}

.sp_pickup {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-paragraph);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp_pickup svg {
    --aous-aw-icon-size: 0.85rem;
    flex-shrink: 0;
    color: var(--main-color);
}

.sp_price {
    text-align: end;
    flex-shrink: 0;
}

.sp_price strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--main-color-secound);
}

.sp_price span {
    font-size: 0.72rem;
    color: var(--text-paragraph);
}

.sp_stats {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--text-paragraph);
    padding: 0.3rem 0 0.4rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.sp_rate_link {
    font-size: 0.82rem !important;
    padding-block: 0.3rem !important;
    color: var(--main-color-secound) !important;
    justify-content: flex-start !important;
}

/* End Shared Ride Summary */

/* Start Manage live work */
.manage_live_work_modal .location-status {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.manage_live_work_modal .control_btn {
    width: 2.5rem;
    border-radius: 50%;
    font-size: 1.25rem;
    height: 2.5rem;
}

.manage_live_work_modal .service_type_label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-paragraph);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.manage_live_work_modal .service_type_cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.manage_live_work_modal .service_type_card.selected .option_content {
    border-color: var(--main-color);
    background: #f0fbff;
    box-shadow: 0 0 0 4px rgba(31, 182, 255, 0.1);
}

.manage_live_work_modal .service_type_card .option_content {
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    display: grid;
    grid-template-columns: 18% 1fr;
    gap: 0.5rem;
}

.manage_live_work_modal .service_type_card input[type="radio"] {
    display: none;
}

.manage_live_work_modal .service_type_card .service_card_icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    color: var(--text-paragraph);
}

.manage_live_work_modal .service_type_card .service_card_icon .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.manage_live_work_modal .service_type_card .service_card_title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--main-text);
}

.manage_live_work_modal .service_type_card .service_card_desc {
    font-size: 0.75rem;
    color: var(--text-paragraph);
    line-height: 1.4;
}

.manage_live_work_modal .service_type_card.selected .service_card_icon {
    background: var(--main-color);
    color: #fff;
}

.manage_live_work_modal .service_type_card.selected .service_card_title {
    color: var(--main-color-secound);
}

.manage_live_work_modal .shared_settings_content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.manage_live_work_modal .shared_settings_title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-paragraph);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.manage_live_work_modal .shared_counters_row {
    display: flex;
    align-items: center;
    gap: 0;
}

.manage_live_work_modal .shared_counter_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.manage_live_work_modal .shared_counter_divider {
    width: 1px;
    height: 3rem;
    background: var(--border-color);
    flex-shrink: 0;
}

.manage_live_work_modal .counter_label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-paragraph);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.manage_live_work_modal .counter_controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.manage_live_work_modal .counter_value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--main-text);
    min-width: 1.5rem;
    text-align: center;
    line-height: 1;
}

.manage_live_work_modal .counter_btn {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-body);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--main-text);
    transition: border-color 0.15s, color 0.15s;
    line-height: 1;
    padding: 0;
}

.manage_live_work_modal .counter_btn:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

/* End Manage live work */

/* Start Live service type selector */
.live_service_type_cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.live_service_card {
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-card);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

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

.live_service_card_icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-paragraph);
    transition: background 0.2s, color 0.2s;
}

.live_service_card_icon .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.live_service_card_title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--main-text);
    line-height: 1.2;
}

.live_service_card_desc {
    font-size: 0.72rem;
    color: var(--text-paragraph);
    line-height: 1.3;
    margin-top: 0.15rem;
}

.live_service_card.selected {
    border-color: var(--main-color);
    background: #f0fbff;
    box-shadow: 0 0 0 3px rgba(31, 182, 255, 0.12);
}

.seats_counter_card {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    background: var(--bg-card);
}

.seats_btn {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: none;
    background: var(--main-color);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.seats_btn:disabled {
    background: var(--border-color);
    cursor: not-allowed;
    opacity: 0.6;
}

.seats_display {
    flex: 1;
    text-align: center;
}

.seats_count {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-body);
    line-height: 1.1;
}

.seats_label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}

.live_service_card.selected .live_service_card_icon {
    background: var(--main-color);
    color: #fff;
}

.live_service_card.selected .live_service_card_title {
    color: var(--main-color-secound);
}

/* End Live service type selector */

/* Start Call to action live ride */
#call_to_action_live_ride #confirmMessage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    text-align: center;
}

#call_to_action_live_ride .reasons_options {
    margin-top: 1rem;
}

#call_to_action_live_ride .reasons_options .form-check {
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

/* End Call to action live ride */

.car_overlay {
    position: absolute;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    transition: transform 0.1s linear;
}

.car_overlay img {
    width: 100%;
    height: 100%;
}

.star_ratings_rating {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
}

.star_rating {
    cursor: pointer;
    transition: transform 0.2s ease;
    display: inline-block;
    width: 40px;
    height: 40px;
}

.star_rating:hover {
    transform: scale(1.2);
}

.star_rating svg {
    width: 100%;
    height: 100%;
    fill: #ddd;
    transition: fill 0.2s ease;
}

.star_rating.active svg,
.star_rating.filled svg {
    fill: #ffc107;
}

.star_rating:hover svg,
.star_rating.hover svg {
    fill: #ffb300;
}

.title_text {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: center;
}

/* Start Publish Ride Info Page */
.publish_info_hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 26rem;
    background: linear-gradient(135deg, #060f1c 0%, #00406c 55%, #1a5f8f 100%);
    padding-block: 5rem;
    padding-inline: var(--margin-inline);
    gap: 3rem;
}

.publish_info_hero .hero_text_col {
    display: flex;
    flex-direction: column;
}

.publish_info_hero .hero_badge_label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    width: max-content;
}

.publish_info_hero .hero_badge_label svg {
    --aous-aw-icon-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    stroke-width: 2;
}

.publish_info_hero h1 {
    font-size: 2.75rem;
    font-weight: 600;
    color: white;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.publish_info_hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.65;
    margin-bottom: 2rem;
    max-width: 36rem;
}

.publish_info_hero .btn_publish {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.75rem;
    border-radius: 14px;
    background: white;
    color: var(--main-color-secound);
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.25s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    width: max-content;
}

.publish_info_hero .btn_publish:hover {
    background: var(--main-color);
    color: white;
    box-shadow: 0 8px 24px rgba(31, 182, 255, 0.4);
    transform: translateY(-2px);
}

.publish_info_hero .btn_publish svg {
    --aous-aw-btn-icon-size: 1.15rem;
}

html[dir="rtl"] .publish_info_hero .btn_publish svg {
    rotate: 180deg;
}

.publish_info_hero .hero_image_col {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.publish_info_hero .hero_image_col img {
    max-height: 22rem;
    width: 85%;
    object-fit: contain;
    border-radius: 12px;
}

.publish_steps_area {
    margin-block: 6rem;
    margin-inline: var(--margin-inline);
}

.publish_section_header {
    text-align: center;
    margin-bottom: 3rem;
}

.publish_section_header h2 {
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--main-text);
    letter-spacing: -0.02em;
}

.publish_section_header p {
    font-size: 1rem;
    color: var(--text-paragraph);
    margin-top: 0.75rem;
    line-height: 1.65;
    max-width: 52rem;
    margin-inline: auto;
}

.publish_steps_area .steps_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.publish_steps_area .pub_step_item {
    text-align: center;
    padding: 2.5rem 1.75rem;
    border-radius: 22px;
    border: 1.5px solid var(--border-color);
    transition: all 0.25s ease;
    background: var(--bg-body);
}

.publish_steps_area .pub_step_item:hover {
    border-color: rgba(31, 182, 255, 0.4);
    box-shadow: 0 12px 40px rgba(31, 182, 255, 0.1);
    transform: translateY(-4px);
}

.publish_steps_area .pub_step_number {
    width: 36px;
    height: 36px;
    background: var(--main-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 auto 1.25rem;
}

.publish_steps_area .pub_step_icon {
    width: 60px;
    height: 60px;
    background: var(--bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.publish_steps_area .pub_step_icon svg {
    --aous-aw-icon-size: 1.75rem;
    color: var(--main-color);
    stroke-width: 2;
}

.publish_steps_area .pub_step_item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--main-text);
}

.publish_steps_area .pub_step_item p {
    font-size: 0.9rem;
    color: var(--text-paragraph);
    line-height: 1.65;
    margin: 0;
}

.publish_features_area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-block: 5rem;
    margin-inline: var(--margin-inline);
}

.publish_features_area .pub_feature_card,
.carpool_features_area .pub_feature_card {
    padding: 1.75rem 1.5rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.25s ease;
    background: var(--bg-body);
}

.publish_features_area .pub_feature_card:hover,
.carpool_features_area .pub_feature_card:hover {
    border-color: rgba(31, 182, 255, 0.35);
    box-shadow: 0 8px 32px rgba(31, 182, 255, 0.08);
    transform: translateY(-3px);
}

.publish_features_area .pub_feature_icon,
.carpool_features_area .pub_feature_icon {
    width: 62px;
    height: 62px;
    background: linear-gradient(135deg, rgba(31, 182, 255, 0.12) 0%, rgba(31, 182, 255, 0.06) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.publish_features_area .pub_feature_icon svg,
.carpool_features_area .pub_feature_icon svg {
    --aous-aw-icon-size: 1.75rem;
    stroke-width: 2;
    color: var(--main-color);
}

.publish_features_area .pub_feature_title,
.carpool_features_area .pub_feature_title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.publish_features_area .pub_feature_desc,
.carpool_features_area .pub_feature_desc {
    display: block;
    font-size: 0.9rem;
    color: var(--text-paragraph);
    line-height: 1.6;
}

.requirements_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5rem;
    margin-block: 5rem;
    margin-inline: var(--margin-inline);
    padding: 4rem;
    border-radius: 28px;
    background: linear-gradient(135deg, #f0f9ff 0%, #eaf5fb 100%);
    border: 1px solid rgba(31, 182, 255, 0.1);
}

.requirements_area .req_badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.9rem;
    border-radius: 20px;
    background: rgba(31, 182, 255, 0.1);
    color: var(--main-color);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.requirements_area h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--main-text);
    margin-bottom: 1.5rem;
    line-height: 1.25;
}

.requirements_area .req_list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.requirements_area .req_list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--main-text);
}

.requirements_area .req_list li svg {
    --aous-aw-icon-size: 1rem;
    color: var(--main-color);
    stroke-width: 2.5;
    flex-shrink: 0;
    margin-top: 2px;
}

.requirements_area .req_docs {
    border-top: 1px solid rgba(31, 182, 255, 0.15);
    padding-top: 1.5rem;
}

.requirements_area .req_docs_title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--main-text);
    margin-bottom: 0.85rem;
}

.requirements_area .docs_list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.requirements_area .docs_list li {
    font-size: 0.9rem;
    color: var(--text-paragraph);
    padding-inline-start: 1rem;
    position: relative;
}

.requirements_area .docs_list li::before {
    content: '—';
    position: absolute;
    inset-inline-start: 0;
    color: var(--main-color);
}

.requirements_area .req_docs_note {
    font-size: 0.9rem;
    color: var(--text-paragraph);
    margin: 0;
}

.requirements_area .req_image_col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.requirements_area .req_image_col img {
    width: 90%;
    object-fit: contain;
    border-radius: 20px;
}

/* End Publish Ride Info Page */

/* Start Carpool Info Page */
.carpool_info_page .carpool_info_hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding: 4rem var(--margin-inline) 3.5rem;
    background: linear-gradient(135deg, #062040 0%, #00406c 55%, #0c7ab5 100%);
    position: relative;
    overflow: hidden;
}

.carpool_info_page .carpool_info_hero::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 182, 255, 0.12) 0%, transparent 70%);
    top: -100px;
    inset-inline-end: 10%;
    pointer-events: none;
}

.carpool_info_page .carpool_info_hero .hero_badge_label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(31, 182, 255, 0.18);
    border: 1px solid rgba(31, 182, 255, 0.35);
    color: #7dd6ff;
    padding: 0.4rem 1.1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 1.25rem;
}

.carpool_info_page .carpool_info_hero .hero_badge_label svg {
    --aous-aw-icon-size: 1rem;
}

.carpool_info_page .carpool_info_hero h1.app_text {
    font-size: 2.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: white;
    line-height: 1.2;
    margin-bottom: 1.1rem;
}

.carpool_info_page .carpool_info_hero h1.app_text .word_slider {
    color: var(--main-color);
}

.carpool_info_page .carpool_info_hero p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 1.75rem;
    max-width: 34rem;
}

.carpool_info_page .carpool_info_hero .btn_find_ride {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--main-color);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.85rem 1.75rem;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 6px 24px rgba(31, 182, 255, 0.35);
}

.carpool_info_page .carpool_info_hero .btn_find_ride:hover {
    background: #0099dd;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(31, 182, 255, 0.45);
}

.carpool_info_page .carpool_info_hero .btn_find_ride svg {
    --aous-aw-icon-size: 1.1rem;
    transition: transform 0.2s;
}

.carpool_info_page .carpool_info_hero .btn_find_ride:hover svg {
    transform: translateX(4px);
}

.carpool_info_page .carpool_info_hero .hero_image_col img {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.carpool_info_page .carpool_steps_area {
    margin-top: 5rem;
    margin-inline: var(--margin-inline);
}

.carpool_info_page .carpool_steps_area .carpool_section_header {
    text-align: center;
    margin-bottom: 3rem;
}

.carpool_info_page .carpool_steps_area .carpool_section_header h2 {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--main-text);
    margin-bottom: 0.65rem;
}

.carpool_info_page .carpool_steps_area .carpool_section_header p {
    font-size: 1.05rem;
    color: var(--text-paragraph);
    margin: 0;
}

.carpool_info_page .carpool_steps_area .steps_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.carpool_info_page .carpool_steps_area .pub_step_item {
    text-align: center;
    padding: 2.5rem 1.75rem;
    border-radius: 22px;
    border: 1.5px solid var(--border-color);
    transition: all 0.25s ease;
    background: var(--bg-body);
}

.carpool_info_page .carpool_steps_area .pub_step_item:hover {
    border-color: rgba(31, 182, 255, 0.4);
    box-shadow: 0 12px 40px rgba(31, 182, 255, 0.1);
    transform: translateY(-4px);
}

.carpool_info_page .carpool_steps_area .pub_step_number {
    width: 36px;
    height: 36px;
    background: var(--main-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 auto 1.25rem;
}

.carpool_info_page .carpool_steps_area .pub_step_icon {
    width: 60px;
    height: 60px;
    background: var(--bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.carpool_info_page .carpool_steps_area .pub_step_icon svg {
    --aous-aw-icon-size: 1.75rem;
    color: var(--main-color);
}

.carpool_info_page .carpool_steps_area .pub_step_item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--main-text);
}

.carpool_info_page .carpool_steps_area .pub_step_item p {
    font-size: 0.9rem;
    color: var(--text-paragraph);
    line-height: 1.65;
    margin: 0;
}

.carpool_info_page .carpool_features_area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 5rem;
    margin-inline: var(--margin-inline);
}

.carpool_info_page .carpool_driver_cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    margin-top: 6rem;
    margin-inline: var(--margin-inline);
    background: linear-gradient(135deg, #040e1c 0%, #00406c 60%, #1a5f8f 100%);
    border-radius: 24px;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}

.carpool_info_page .carpool_driver_cta::before {
    content: '';
    position: absolute;
    inset-inline-end: -60px;
    top: -60px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 182, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.carpool_info_page .carpool_driver_cta .cta_badge {
    display: inline-flex;
    align-items: center;
    background: rgba(31, 182, 255, 0.18);
    border: 1px solid rgba(31, 182, 255, 0.3);
    color: #7dd6ff;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 1.25rem;
}

.carpool_info_page .carpool_driver_cta h2 {
    font-size: 2rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.carpool_info_page .carpool_driver_cta p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.carpool_info_page .carpool_driver_cta .cta_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: white;
    color: var(--main-color-secound);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.85rem 1.75rem;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.carpool_info_page .carpool_driver_cta .cta_btn:hover {
    background: var(--main-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(31, 182, 255, 0.3);
}

.carpool_info_page .carpool_driver_cta .cta_btn svg {
    --aous-aw-icon-size: 1.1rem;
    transition: transform 0.2s;
}

.carpool_info_page .carpool_driver_cta .cta_btn:hover svg {
    transform: translateX(4px);
}

.carpool_info_page .carpool_driver_cta .cta_image_col img {
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.35));
}

.carpool_info_page .carpool_faqs_area {
    margin-top: 6rem;
    margin-inline: var(--margin-inline);
    padding-bottom: 5rem;
}

.carpool_info_page .carpool_faqs_area .faqs_header {
    text-align: center;
    margin-bottom: 3rem;
}

.carpool_info_page .carpool_faqs_area .faqs_header h2 {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--main-text);
    margin-bottom: 0.65rem;
}

.carpool_info_page .carpool_faqs_area .faqs_header p {
    font-size: 1.05rem;
    color: var(--text-paragraph);
    margin: 0;
}

.carpool_info_page .carpool_faqs_area .question_area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.25rem;
}

.carpool_info_page .carpool_faqs_area .question_area .accordion {
    margin-bottom: 0.85rem;
}

.carpool_info_page .carpool_faqs_area .question_area .accordion-item {
    border: 1px solid #e8eef4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 64, 108, 0.05);
    transition: box-shadow 0.2s ease;
}

.carpool_info_page .carpool_faqs_area .question_area .accordion-item:hover {
    box-shadow: 0 4px 20px rgba(31, 182, 255, 0.1);
}

.carpool_info_page .carpool_faqs_area .question_area .accordion-button {
    font-weight: 600;
    font-size: 1rem;
    color: var(--main-text);
    background: white;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
}

.carpool_info_page .carpool_faqs_area .question_area .accordion-button:not(.collapsed) {
    color: var(--main-color-secound);
    background: #f0f9ff;
    box-shadow: none;
}

.carpool_info_page .carpool_faqs_area .question_area .accordion-button:focus {
    box-shadow: none;
}

.carpool_info_page .carpool_faqs_area .question_area .accordion-button::after,
.carpool_info_page .carpool_faqs_area .question_area .accordion-button:not(.collapsed)::after {
    border-radius: 50%;
    padding: 0.65rem;
    background-size: 0.85rem;
    background-position: center;
}

.carpool_info_page .carpool_faqs_area .question_area .accordion-body {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-paragraph);
    padding: 0.5rem 1.5rem 1.25rem;
    background: #f0f9ff;
}

/* End Carpool Info Page */

/* ============================================================
   Start Helper Pages (Imprint / Privacy Policy / Data Protection / Support)
   ============================================================ */

.helper_page_area {
    padding-bottom: 6rem;
}

/* --- Header --- */
.helper_page_header {
    background: linear-gradient(135deg, #f0f9ff 0%, #eaf5fb 100%);
    border-bottom: 1px solid rgba(31, 182, 255, 0.12);
    padding-block: 5rem 4rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

.helper_page_header::before {
    content: '';
    position: absolute;
    top: -8rem;
    right: -8rem;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 182, 255, 0.1) 0%, transparent 65%);
    pointer-events: none;
}

.helper_page_header_inner {
    margin-inline: var(--margin-inline);
}

.helper_page_title {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--main-text);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.helper_page_subtitle {
    font-size: 1.1rem;
    color: var(--text-paragraph);
    margin: 0;
}

.helper_page_date {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-paragraph);
    background: rgba(31, 182, 255, 0.08);
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    border: 1px solid rgba(31, 182, 255, 0.15);
}

/* --- Container --- */
.helper_page_content {
    margin-inline: var(--margin-inline);
}

.helper_page_container {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Notice Card (intro) --- */
.helper_notice_card {
    background: linear-gradient(135deg, #f0f9ff 0%, #eaf5fb 100%);
    border: 1px solid rgba(31, 182, 255, 0.2);
    border-radius: 16px;
    padding: 1.5rem 2rem;
}

.helper_notice_card p {
    margin: 0;
    font-size: 1rem;
    color: var(--main-text);
    line-height: 1.7;
}

/* --- Content Card --- */
.helper_content_card {
    background: var(--bg-body);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem 2.25rem;
    transition: box-shadow 0.2s ease;
}

.helper_content_card:hover {
    box-shadow: 0 6px 28px rgba(0, 64, 108, 0.06);
}

.helper_card_title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--main-color-secound);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1.5px solid var(--border-color);
}

.helper_card_text {
    font-size: 0.97rem;
    color: var(--text-paragraph);
    line-height: 1.75;
    margin: 0;
}

/* --- Highlight Box (inside card) --- */
.helper_highlight_box {
    margin-top: 1.25rem;
    background: rgba(31, 182, 255, 0.06);
    border-inline-start: 3px solid var(--main-color);
    border-radius: 0 10px 10px 0;
    padding: 0.85rem 1.25rem;
}

html[dir="rtl"] .helper_highlight_box {
    border-inline-start: none;
    border-inline-end: 3px solid var(--main-color);
    border-radius: 10px 0 0 10px;
}

.helper_highlight_box p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--main-color-secound);
    font-weight: 500;
}

/* --- List --- */
.helper_list {
    list-style: none;
    padding: 0;
    margin: 0.85rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.helper_list li {
    font-size: 0.95rem;
    color: var(--text-paragraph);
    padding-inline-start: 1.4rem;
    position: relative;
    line-height: 1.6;
}

.helper_list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.55rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--main-color);
}

.helper_list_checked li::before {
    content: '✓';
    width: auto;
    height: auto;
    background: transparent;
    color: var(--main-color);
    font-weight: 700;
    font-size: 0.8rem;
    top: 0.15rem;
}

/* --- Info Table (key-value rows) --- */
.helper_info_table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.helper_info_row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    align-items: start;
    border-bottom: 1px solid var(--border-color);
}

.helper_info_row:last-child {
    border-bottom: none;
}

.helper_info_row:nth-child(odd) {
    background: var(--bg-card);
}

.helper_info_label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--main-text);
}

.helper_info_value {
    font-size: 0.9rem;
    color: var(--text-paragraph);
    line-height: 1.55;
}

/* --- Links --- */
.helper_link {
    color: var(--main-color);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}

.helper_link:hover {
    color: var(--main-color-secound);
    text-decoration: underline;
}

.helper_external_link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: var(--main-color);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(31, 182, 255, 0.4);
    padding-bottom: 0.1rem;
    transition: color 0.15s, border-color 0.15s;
}

.helper_external_link:hover {
    color: var(--main-color-secound);
    border-color: var(--main-color-secound);
}

/* --- Contact Card --- */
.helper_contact_card .helper_card_title {
    color: var(--main-color-secound);
}

/* --- Rights Grid (data protection) --- */
.helper_rights_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.helper_right_item {
    padding: 1.25rem 1.4rem;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.helper_right_item:hover {
    box-shadow: 0 4px 18px rgba(31, 182, 255, 0.1);
    border-color: rgba(31, 182, 255, 0.35);
}

.helper_right_title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--main-color-secound);
    margin-bottom: 0.5rem;
}

.helper_right_text {
    font-size: 0.88rem;
    color: var(--text-paragraph);
    line-height: 1.65;
    margin: 0;
}

/* --- Section Header (support) --- */
.helper_section_header {
    text-align: center;
    margin-bottom: 2rem;
}

.helper_section_title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--main-text);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.helper_section_subtitle {
    font-size: 1rem;
    color: var(--text-paragraph);
    margin: 0;
}

/* --- Topics Grid (support) --- */
.helper_topics_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.helper_topic_card {
    padding: 1.75rem 1.5rem;
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-body);
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    cursor: default;
}

.helper_topic_card:hover {
    box-shadow: 0 6px 24px rgba(31, 182, 255, 0.12);
    border-color: rgba(31, 182, 255, 0.4);
    transform: translateY(-2px);
}

.helper_topic_icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f7ff, #d0effc);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.helper_topic_icon svg {
    --aous-aw-icon-size: 1.35rem;
    color: var(--main-color-secound);
    stroke-width: 1.8;
}

.helper_topic_title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--main-text);
    margin-bottom: 0.45rem;
}

.helper_topic_text {
    font-size: 0.88rem;
    color: var(--text-paragraph);
    line-height: 1.6;
    margin: 0;
}

/* --- FAQ (support) --- */
.helper_faq_list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.helper_faq_item {
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.helper_faq_item:hover {
    box-shadow: 0 4px 18px rgba(31, 182, 255, 0.08);
}

.helper_faq_question {
    padding: 1.1rem 1.4rem;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--main-text);
    background: var(--bg-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.helper_faq_question::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--main-color);
    line-height: 1;
    flex-shrink: 0;
    margin-inline-start: 1rem;
    transition: transform 0.2s;
}

.helper_faq_item.open .helper_faq_question::after {
    transform: rotate(45deg);
}

.helper_faq_answer {
    display: none;
    padding: 0.85rem 1.4rem 1.1rem;
    background: var(--bg-body);
    border-top: 1px solid var(--border-color);
}

.helper_faq_item.open .helper_faq_answer {
    display: block;
}

.helper_faq_answer p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-paragraph);
    line-height: 1.7;
}

/* --- Contact Options (support) --- */
.helper_contact_options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.helper_contact_option {
    padding: 1.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.helper_contact_option_title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--main-text);
    margin: 0;
}

.helper_contact_option_text {
    font-size: 0.9rem;
    color: var(--text-paragraph);
    margin: 0;
    line-height: 1.6;
}

.helper_contact_btn {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.65rem 1.35rem;
    background: var(--main-color-secound);
    color: white;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    align-self: flex-start;
}

.helper_contact_btn:hover {
    background: var(--main-color);
    color: white;
}

.helper_response_note {
    margin-top: 1.25rem;
    font-size: 0.88rem;
    color: var(--text-paragraph);
    text-align: center;
    font-style: italic;
}

/* --- CTA Card (support) --- */
.helper_cta_card {
    text-align: center;
    padding: 3.5rem 2rem;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--main-color-secound) 0%, #01304f 100%);
    color: white;
}

.helper_cta_title {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.helper_cta_text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.75rem;
}

.helper_cta_btn {
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 2.25rem;
    background: var(--main-color);
    color: white;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
}

.helper_cta_btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: white;
}

/* WhatsApp contact option */
.helper_contact_option_whatsapp {
    border-color: rgba(37, 211, 102, 0.3);
    background: #f0fff5;
}

.helper_contact_btn_whatsapp {
    background: #25D366;
}

.helper_contact_btn_whatsapp:hover {
    background: #1da851;
    color: white;
}

/* ============================================================
   End Helper Pages
   ============================================================ */