#cheader {
    position: fixed;
    margin: auto;
    display: flex;
    width: 100%;
    background: white;
    padding: .5em 4%;
    box-shadow: 0 6px 6px -4px rgba(0, 0, 0, 0.15);
    z-index: 997;
}

#chholder {
    height: 0em;
}

.Car-Container {
    margin: auto;
    margin-top: 0.5em;
    width: 92%;
    user-select: none;
}

#CarContainer2 {
    display: none;
}

.cc-header-section {
    margin: auto;
    font-size: 1.2em;
    width: calc(33.33% - 4px);
    height: 2em;
    text-align: center;
    background: #222a35;
    color: #e6e6e6;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    transform: translateX(3px);
}

#cheader .cc-header-section:first-child {
    color: #040911;
    background: #e6e6e6;
    font-weight: bold;
}


.container-search-option .cc-header-section {
    height: 3em;
    font-weight: unset;
    transform: unset;
}

.cc-header-section select {
    width: 90%;
    color: white;
    background: #222a35;
}

#Content_CmbSort {
    margin-top: .8em;
    font-size: .84em;
}

.cc-header-section select option {
    background: white;
    color: black;
    font-weight: normal;
}

.section-last {
    margin-top: .4em;
}

    .section-last label {
        color: white;
    }

    .section-last input {
        width: 1em;
        height: 1em;
        margin-right: .5em;
        transform: translateY(.1em);
    }

.Car-List {
    margin: 1em auto 2em;
}

.listitem-container {
    margin: 1em 1em;
    width: calc(33.33% - 4px - 2em);
    height: 35.5em;
    border: thin solid #929292;
    box-shadow: -4px 4px 6px -4px rgba(0, 0, 0, 0.3), /* Left */
    4px 4px 6px -4px rgba(0, 0, 0, 0.3), /* Right */
    0 6px 6px -4px rgba(0, 0, 0, 0.3);
    border-radius: .5em;
    display: inline-block;
    vertical-align: top;
    padding: 0 1em;
}

.promotion {
    margin: auto;
    background: #0e2d4b;
    width: fit-content;
    padding: 0 1em;
    color: #5eadf8;
    clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
    box-shadow: 2px 4px 8px red;
    transform: translateY(-50%);
    animation: 1s animatepromo ease-out infinite;
}

@keyframes animatepromo {
    0% {
        color: white;
    }

    100% {
        color: #fba4a4;
    }
}

.cartype-name, .carkind-name {
    font-size: 1.6em;
    font-weight: bold;
    color: #0e64b7;
    text-align: right;
    text-shadow: 0 0 3px rgb(209 209 209), 0 0 5px rgb(209 209 209), 0 0 10px rgb(209 209 209);
}

.cartype-name {
    margin-top: -0.5em;
}

.carkind-name {
    color: black;
    font-size: .8em;
    font-weight: unset;
}

    .carkind-name small {
        color: red;
        margin-right: 2em;
    }

.car-img {
    width: 90%;
    margin: 1em;
    height: 9em;
    object-fit: contain;
}

.car-details {
    direction: ltr;
}

.car-specs {
    display: inline-block;
    vertical-align: top;
    width: calc(16.66% - 4px);
    text-align: center;
}

.carspecs-lbl {
    font-size: .8em;
    color: #808080;
}

.car-price-section {
    margin: 1em 0;
}

.price-section-part {
    display: inline-block;
    vertical-align: top;
    height: 8em;
    width: calc(50% - 4px);
    border: none;
    border-radius: 1em;
}

    .price-section-part:first-child {
        transform: translateX(-3px);
        border-left: 1px solid #929292;
    }

    .price-section-part:last-child {
        transform: translateX(2px);
        border-right: 1px solid #929292
    }

.price-item {
    position: relative;
    margin: auto;
    width: fit-content;
    font-size: .9em;
    text-shadow: 0 0 5px #929292;
}

    .price-item:nth-child(1) {
        color: #222a35;
    }

    .price-item:nth-child(2) {
        color: red;
        font-weight: unset;
        transform-style: preserve-3d;
    }

.price-old {
    font-size: 1.2em;
}

.price-new {
    font-size: 1.3em;
    color: #0e64b7;
    font-weight: bold;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
}

.price-item:nth-child(3) {
    color: #929292;
    font-size: .8em;
}

.price-item:nth-child(4) {
    margin-top: .5em;
}

.fancy-line {
    top: 1.1em;
    width: 3.5em;
    height: .25em;
    position: absolute;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    z-index: 1;
    transform-style: preserve-3d;
    transform: rotateZ(-5deg);
}

small {
    font-size: .8em;
    margin-right: .3em;
    transform: translateY(-.2em);
}

.price-section-part:last-child .price-item:nth-child(3) {
    color: #0e64b7;
    margin-top: .5em;
    font-weight: bolder;
}

.Select-Car {
    height: 2em;
    width: 70%;
    background: #222a35;
    text-align: center;
    margin: auto;
    font-weight: bold;
    font-size: 1.5em;
    border-radius: 3em;
    color: #1485f2;
    box-shadow: 0 0 3px 3px #929292;
    cursor: pointer;
}

    .Select-Car:hover {
        background: #1485f2;
        color: #222a35;
    }

.unavailable {
    background: #929292;
    color: #0e2d4b;
    pointer-events: none;
}

.hidepromo {
    visibility: hidden;
}

.booklayout {
    display: inline-block;
    vertical-align: top;
    padding: 0 0.5em;
}

    .booklayout:first-child {
        width: calc(30% - 4px);
    }

    .booklayout:nth-child(2) {
        width: calc(70% - 4px);
    }

.book-section {
    width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 1em;
    padding: .5em 1em;
    margin-bottom: 1em;
}

.book-section-carname {
    font-size: 1.5em;
    font-weight: bold;
    color: #0e64b7;
}

.book-section-address {
    font-size: 0.9em;
}

.book-section-img {
    width: 95%;
    margin: 1em auto 0;
}

.book-section-logbtn {
    color: #1485f2;
    display: inline-block;
    vertical-align: top;
    margin-left: 1em;
    cursor: pointer;
}

    .book-section-logbtn:hover {
        color: #0e64b7;
    }

.book-section-date {
    vertical-align: top;
}
    .book-section-date small {
        display: inline-block;
        vertical-align:top;
        width: 3em;
    }

        .book-section-date span {
            color:#0e64b7;
            display:inline-block;
            vertical-align:top;
            font-weight:unset;
            transform:translateY(-.2em);
        }
            .book-section-date span:hover {
                text-decoration:unset;
            }
            .book-section-date small, .book-section-header {
                font-size: 1em;
                font-weight: bold;
                margin-left: 1em;
            }

.book-section-tprice {
    font-size: 1.7em;
    font-weight: bold;
    color: #0e64b7;
}

.book-section-price-detail {
    font-size: .8em;
}

li {
    font-size: 0.9em;
}

    li:nth-child(2) {
        color: #0e64b7;
    }

.book-txt-block {
    margin: auto;
    width: fit-content;
    display: inline-block;
    vertical-align: top;
}


:root {
    --opjwidth: 14em;
}

.book-section input,
.book-section select {
    text-align: right;
    outline: none;
    width: var(--opjwidth);
    border: 1px solid transparent;
    border-bottom-color: #22303a;
    transition: 500ms;
    border-radius: 2em;
    padding: 0 .7em;
    transform: translateY(-.5em);
    color:#144ff2;
}

    .book-section input:focus,
    .book-section select:focus {
        border-bottom-color: #ff6a00;
        border-radius: 0;
    }

    .book-section input:hover, .book-section select:hover {
        border-bottom-color: #ff6a00;
    }


.txt-block-lbl {
    font-size: .95em;
}

.mobile-block {
    white-space: nowrap;
}

.txt-left {
    direction: ltr;
    text-align: left;
}

.country-list {
    position: absolute;
    background: white;
    box-shadow: 1px 2px 5px 2px #808080;
    transition: 4s;
    min-width: 12em;
    overflow-y: scroll;
    max-height: 10em;
    border-radius: 0 .2em .2em 0;
    z-index: 2;
}

.country-block {
    white-space: nowrap;
    font-size: .8em;
    cursor: pointer;
    user-select: none;
}

.country-list .country-block {
    padding: .3em .6em .6em;
}

    .country-list .country-block:first-child {
        margin-top: .5em;
    }

    .country-list .country-block:hover {
        background: #496579;
        color: white;
    }

.country-flag {
    width: 1.5em;
}

.country-flag, .country-name, .country-zipcode {
    display: inline-block;
    vertical-align: middle;
}

.country-name {
    margin-right: .3em;
}

.country-section, #Content_mobile {
    display: inline-block;
    vertical-align: top;
}

.country-section {
    width: 10em;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.book-section input[type=radio],
.check-block input[type=checkbox] {
    width: fit-content;
    vertical-align: bottom;
}

.check-block input[type=checkbox] {
    zoom: 1.7;
    margin: .7em .3em 0;
}

span {
    color: #0e64b7;
    cursor: pointer;
    font-weight: bold;
}

    span:hover {
        text-decoration: underline;
        text-underline-offset: 0.5em;
    }

.iol-container {
    width: 80%;
    height: 80%;
    transform:translateY(-2em);
    background: white;
    box-shadow: 0 6px 6px -4px rgba(0, 0, 0, 0.15);
}

.iol-header {
    width: 100%;
    background: rgb(209 209 209);
}

    .iol-header div, .iol-header img {
        display: inline-block;
        vertical-align: top;
    }

    .iol-header div {
        width: calc(100% - 2em - 4px);
        text-align: center;
    }

    .iol-header img {
        width: 2em;
        cursor: pointer;
        transition: 1s;
    }

        .iol-header img:hover {
            transform: rotateZ(90deg);
        }

h3 {
    color: #007b5e;
}

p, li {
    line-height: 1.8;
}

ul {
    margin-right: 1em;
    padding-right: 1em;
}

.highlight {
    font-weight: bold;
    color: red;
}

.box {
    background: #fff;
    padding: 1em 2em;
    height: 100%; /* ارتفاع ثابت */
    overflow-y: auto; /* سكرول عمودي */
    direction: rtl; /* تأكيد الاتجاه */
}

.check-block {
    background: #a9d3fb;
    border-radius: .5em;
    width: 100%;
    padding-top: .6em;
    padding-right: .3em;
    cursor: pointer;
    margin-top: .5em;
}

    .check-block:hover {
        background: #70a1d0;
    }

    .check-block label {
        display: inline-block;
        width: calc(100% - 7.5em - 4px);
    }

.check-value {
    display: inline-block;
    vertical-align: top;
    margin-top: .2em;
    width: calc(3.5em - 4px);
    text-align: left;
}

.Car-Container-price {
    left: 0;
    height: 7em;
    width: 100%;
    background: #293b4d;
    position: fixed;
    bottom: 0;
    z-index: 998;
    padding: .5em;
    color: white;
    white-space: nowrap;
}

.ccprice-panel {
    display: inline-block;
    vertical-align: top;
    padding: .5em 1em;
    height: 100%;
    border-left: 1px solid white;
}

.ccprice-panel-value {
    font-size: 2em;
    font-weight: bold;
}

    .ccprice-panel-value small {
        font-size: .5em;
        margin-left: .5em;
    }

.ccprice-panel-box div {
    display: inline-block;
    vertical-align: top;
}

    .ccprice-panel-box div:first-child {
        min-width: 5em;
        text-align: right;
        direction: ltr;
        color: #1485f2;
    }

    .ccprice-panel-box div:last-child {
        width: 10em;
    }

.ccprice-panel-detail {
    display: grid;
    grid-auto-flow: column; /* fill vertically, then next column */
    grid-template-rows: repeat(3, 2em); /* 3 rows per column */
    column-gap: 2em;
    font-size: .9em;
}

.ccprice-panel:last-child {
    border: none;
    float: left;
    padding: 1em;
}

.cpanel-continue {
    text-align: center;
    display: block;
    background: #1485f2;
    height: 100%;
    padding: 0.8em 5em;
    font-size: 1.2em;
    cursor: pointer;
    box-shadow: 0 0 5px 1px white;
    font-weight: bold;
}

    .cpanel-continue:hover {
        background: #0e64b7;
    }

.alert-msg {
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.56);
    align-items: center;
    justify-content: center;
    z-index: 999;
    user-select: none;
}

.msg-container {
    margin: auto;
    width: 50%;
    background: red;
    color: white;
    box-shadow: 0 6px 6px -4px rgba(0, 0, 0, 0.15);
    padding: 1em;
    border-radius: 0 0 1em 1em;
    animation: borderAnimation 1s alternate ease-in infinite;
}

@keyframes borderAnimation {
    0% {
        background: #cf0909;
    }

    50% {
        background: #0f4509;
    }

    100% {
        background: red;
    }
}

.close-ico, .caution-msg {
    display: inline-block;
    vertical-align: top;
}

.caution-msg {
    width: calc(100% - 1.8em);
    padding-right: 1em;
}

.close-ico {
    float: left;
    font-size: 1.8em;
    transition: 500ms;
    cursor: pointer;
}

    .close-ico:hover {
        transform: rotateZ(90deg);
    }