* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    font-family: Arial, Tahoma, sans-serif;

    background: #f7f8fa;

    color: #172b4d;

}



header {

    height: 80px;

    background: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 7%;

    box-shadow: 0 2px 12px rgba(0,0,0,0.08);

    position: sticky;

    top: 0;

    z-index: 100;

}



.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #0d5bd7;

}



.logo h1 {

    font-size: 30px;

}



.logo small {

    font-weight: bold;

}



.bus {

    font-size: 40px;

}



nav {

    display: flex;

    gap: 30px;

}



nav a {

    text-decoration: none;

    color: #172b4d;

    font-weight: bold;

}



nav a:hover,

nav a.active {

    color: #0d5bd7;

}



.hero {

    min-height: 530px;



    background:

        linear-gradient(

            rgba(0, 55, 120, 0.72),

            rgba(0, 40, 90, 0.82)

        ),

        linear-gradient(135deg, #1479e8, #073c82);



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    padding: 60px 20px;

    color: white;

}



.hero-text {

    text-align: center;

    margin-bottom: 40px;

}



.hero-text h2 {

    font-size: 65px;

    margin-bottom: 10px;

}



.hero-text h3 {

    font-size: 28px;

    margin-bottom: 12px;

}



.hero-text p {

    font-size: 20px;

}



.services {

    width: 100%;

    max-width: 850px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.service-card {

    min-height: 160px;

    border-radius: 22px;

    padding: 28px;



    display: flex;

    align-items: center;

    gap: 20px;



    box-shadow: 0 10px 30px rgba(0,0,0,0.2);



    transition: 0.25s;

}



.service-card:hover {

    transform: translateY(-5px);

}



.booking {

    background: linear-gradient(135deg, #0d6efd, #0750bd);

}



.package {

    background: linear-gradient(135deg, #35c75a, #14943a);

}



.service-card .icon {

    font-size: 45px;

}



.service-card div:nth-child(2) {

    flex: 1;

}



.service-card h2 {

    margin-bottom: 8px;

}



.service-card button {

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.25);

    color: white;

    font-size: 22px;

    cursor: pointer;

}



.features {

    background: white;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    padding: 30px 7%;

    gap: 20px;

}



.feature {

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 7px;

}



.feature span {

    font-size: 30px;

}



.feature strong {

    color: #173c74;

}



.feature small {

    color: #777;

}



.why {

    padding: 60px 7%;

    text-align: center;

}



.why > h2 {

    font-size: 32px;

    margin-bottom: 35px;

}



.why-grid {

    max-width: 1100px;

    margin: auto;



    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



.why-card {

    background: white;

    padding: 30px 15px;

    border-radius: 15px;

    border: 1px solid #e4e7ec;

}



.why-card span {

    font-size: 35px;

}



.why-card h3 {

    margin: 15px 0 8px;

}



.why-card p {

    color: #777;

    font-size: 14px;

}



footer {

    background: #102a50;

    color: white;

    text-align: center;

    padding: 25px;



    display: flex;

    justify-content: center;

    gap: 10px;

}



/* PHONE */



@media (max-width: 700px) {



    header {

        height: 70px;

        padding: 0 18px;

    }



    .logo h1 {

        font-size: 25px;

    }



    .bus {

        font-size: 32px;

    }



    nav {

        display: none;

    }



    .hero {

        min-height: auto;

        padding: 45px 16px;

    }



    .hero-text h2 {

        font-size: 48px;

    }



    .hero-text h3 {

        font-size: 21px;

    }



    .hero-text p {

        font-size: 16px;

    }



    .services {

        grid-template-columns: 1fr;

    }



    .service-card {

        min-height: 130px;

        padding: 22px;

    }



    .features {

        grid-template-columns: repeat(2, 1fr);

        padding: 30px 15px;

    }



    .why {

        padding: 45px 15px;

    }



    .why-grid {

        grid-template-columns: repeat(2, 1fr);

    }



}

/* ==============================

   BOOKING PAGE

================================ */



.booking-page {

    min-height: calc(100vh - 80px);

    padding: 55px 20px 70px;



    background:

        linear-gradient(

            rgba(13, 91, 215, 0.05),

            rgba(13, 91, 215, 0.01)

        ),

        #f7f8fa;

}



.booking-container {

    width: 100%;

    max-width: 850px;

    margin: auto;

}



.booking-title {

    text-align: center;

    margin-bottom: 30px;

}



.booking-icon {

    width: 75px;

    height: 75px;



    margin: 0 auto 15px;



    display: flex;

    align-items: center;

    justify-content: center;



    background: #e9f2ff;



    border-radius: 50%;



    font-size: 38px;

}



.booking-title h1 {

    font-size: 36px;

    color: #173c74;

    margin-bottom: 8px;

}



.booking-title p {

    color: #6d7785;

    font-size: 17px;

}



.booking-box {

    background: white;



    border-radius: 22px;



    padding: 35px;



    box-shadow:

        0 10px 35px rgba(0, 0, 0, 0.08);



    display: grid;



    grid-template-columns:

        1fr 70px 1fr;



    gap: 20px;



    align-items: end;

}



.form-group {

    display: flex;

    flex-direction: column;

    gap: 9px;

}



.form-group label {

    font-size: 16px;

    font-weight: bold;

    color: #173c74;

}



.form-group select,

.form-group input {

    width: 100%;

    height: 55px;



    padding: 0 15px;



    border: 1px solid #d9dee7;



    border-radius: 12px;



    background: white;



    font-size: 17px;



    color: #172b4d;



    outline: none;

}



.form-group select:focus,

.form-group input:focus {

    border-color: #0d5bd7;



    box-shadow:

        0 0 0 3px rgba(13, 91, 215, 0.10);

}



.route-switch {

    display: flex;

    justify-content: center;

    padding-bottom: 4px;

}



.route-switch button {

    width: 50px;

    height: 50px;



    border: none;



    border-radius: 50%;



    background: #0d5bd7;



    color: white;



    font-size: 24px;



    cursor: pointer;



    transition: 0.2s;

}



.route-switch button:hover {

    transform: rotate(180deg);

}



.full-width {

    grid-column: 1 / -1;

}



.route-preview {

    grid-column: 1 / -1;



    background: #f3f7fd;



    border: 1px solid #e1e9f5;



    border-radius: 14px;



    padding: 18px;



    display: flex;



    justify-content: center;



    align-items: center;



    gap: 25px;



    font-size: 21px;



    font-weight: bold;



    color: #173c74;

}



.route-arrow {

    color: #0d5bd7;

    font-size: 28px;

}



.search-button {

    grid-column: 1 / -1;



    min-height: 58px;



    border: none;



    border-radius: 14px;



    background:

        linear-gradient(

            135deg,

            #0d6efd,

            #0750bd

        );



    color: white;



    font-size: 18px;



    font-weight: bold;



    cursor: pointer;



    transition: 0.2s;

}



.search-button:hover {

    transform: translateY(-2px);



    box-shadow:

        0 7px 20px rgba(13, 91, 215, 0.25);

}



.booking-help {

    margin-top: 30px;



    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 15px;

}



.booking-help div {

    background: white;



    padding: 22px 12px;



    border-radius: 15px;



    text-align: center;



    border: 1px solid #e5e8ee;



    display: flex;



    flex-direction: column;



    gap: 6px;

}



.booking-help span {

    font-size: 28px;

}



.booking-help strong {

    color: #173c74;

}



.booking-help small {

    color: #777;

}





/* BOOKING PAGE - PHONE */



@media (max-width: 700px) {



    .booking-page {

        padding: 35px 15px 50px;

    }



    .booking-title h1 {

        font-size: 30px;

    }



    .booking-box {

        padding: 22px 18px;



        grid-template-columns:

            1fr 50px 1fr;



        gap: 10px;

    }



    .form-group select,

    .form-group input {

        font-size: 15px;

        padding: 0 8px;

    }



    .route-switch button {

        width: 42px;

        height: 42px;

        font-size: 20px;

    }



    .route-preview {

        gap: 12px;

        font-size: 18px;

    }



    .booking-help {

        grid-template-columns: 1fr;

    }

}

/* ==================================

   TRIPS PAGE

================================== */



.trips-page {

    min-height: calc(100vh - 80px);

    padding: 50px 20px 70px;

    background: #f7f8fa;

}



.trips-container {

    width: 100%;

    max-width: 1050px;

    margin: auto;

}



.trips-title {

    text-align: center;

    margin-bottom: 30px;

}



.trips-title-icon {

    display: block;

    font-size: 45px;

    margin-bottom: 10px;

}



.trips-title h1 {

    font-size: 34px;

    color: #173c74;

    margin-bottom: 7px;

}



.trips-title p {

    color: #707985;

}



.selected-route-box {

    background: #ffffff;

    border-radius: 18px;

    padding: 22px 28px;



    display: grid;

    grid-template-columns: 1fr 1fr auto;



    gap: 25px;

    align-items: center;



    margin-bottom: 25px;



    box-shadow: 0 5px 20px rgba(0,0,0,0.06);

}



.selected-route-box div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.selected-route-box small {

    color: #7a8492;

}



.selected-route-box strong {

    font-size: 19px;

    color: #173c74;

}



.selected-route-box button {

    border: 1px solid #0d5bd7;

    background: white;

    color: #0d5bd7;



    padding: 12px 20px;



    border-radius: 10px;



    font-weight: bold;

    cursor: pointer;

}



.selected-route-box button:hover {

    background: #eef5ff;

}





.trip-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}





.trip-card {

    background: white;



    border-radius: 18px;



    padding: 25px;



    display: grid;



    grid-template-columns:

        150px 1fr 170px;



    align-items: center;



    gap: 25px;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.06);



    border: 1px solid #edf0f4;



    transition: 0.2s;

}





.trip-card:hover {

    transform: translateY(-3px);



    box-shadow:

        0 10px 30px rgba(0,0,0,0.09);

}





.trip-time {

    text-align: center;



    display: flex;



    flex-direction: column;



    gap: 4px;



    border-left:

        1px solid #e5e8ec;

}





.trip-time span {

    color: #7b8490;



    font-size: 13px;

}





.trip-time strong {

    color: #173c74;



    font-size: 34px;

}





.trip-time small {

    color: #555;



    font-size: 15px;

}





.trip-details {

    padding: 5px 10px;

}





.trip-route-line {

    display: flex;



    align-items: center;



    justify-content: center;



    gap: 8px;



    margin-bottom: 25px;

}





.trip-route-line > div:first-child,

.trip-route-line > div:last-child {

    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 5px;



    min-width: 65px;

}





.route-dot {

    width: 13px;



    height: 13px;



    background: #0d5bd7;



    border-radius: 50%;



    display: block;

}





.route-dot.destination {

    background: #35b857;

}





.route-line {

    height: 2px;



    flex: 1;



    background: #d6deea;

}





.mini-bus {

    font-size: 25px;

}





.trip-info {

    display: flex;



    justify-content: center;



    gap: 25px;



    color: #606a78;



    font-size: 14px;

}





.trip-price {

    text-align: center;



    display: flex;



    flex-direction: column;



    gap: 7px;

}





.trip-price span {

    color: #777;



    font-size: 13px;

}





.trip-price strong {

    color: #173c74;



    font-size: 23px;

}





.trip-price button {

    margin-top: 5px;



    min-height: 43px;



    border: none;



    border-radius: 10px;



    background: #0d5bd7;



    color: white;



    font-weight: bold;



    cursor: pointer;

}





.trip-price button:hover {

    background: #084aad;

}





/* TRIPS - PHONE */



@media (max-width: 700px) {



    .trips-page {

        padding: 30px 14px 50px;

    }



    .selected-route-box {

        grid-template-columns: 1fr 1fr;

        padding: 18px;

        gap: 15px;

    }



    .selected-route-box button {

        grid-column: 1 / -1;

    }



    .trip-card {

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 20px;

    }



    .trip-time {

        border-left: none;



        border-bottom:

            1px solid #e5e8ec;



        padding-bottom: 15px;

    }



    .trip-route-line {

        margin-bottom: 18px;

    }



    .trip-info {

        flex-direction: column;



        align-items: center;



        gap: 8px;

    }



}

/* ==================================

   SEATS PAGE

================================== */



.seats-page {

    min-height: calc(100vh - 80px);

    padding: 45px 20px 70px;

    background: #f7f8fa;

}



.seats-container {

    width: 100%;

    max-width: 850px;

    margin: auto;

}



.seats-title {

    text-align: center;

    margin-bottom: 28px;

}



.seats-title > span {

    font-size: 45px;

}



.seats-title h1 {

    margin-top: 8px;

    margin-bottom: 7px;

    font-size: 34px;

    color: #173c74;

}



.seats-title p {

    color: #707985;

}



.seat-trip-summary {

    background: white;

    border-radius: 18px;

    padding: 22px;



    display: grid;

    grid-template-columns: repeat(4, 1fr);



    gap: 15px;

    margin-bottom: 25px;



    box-shadow: 0 5px 20px rgba(0,0,0,0.06);

}



.seat-trip-summary div {

    text-align: center;



    display: flex;

    flex-direction: column;

    gap: 6px;

}



.seat-trip-summary small {

    color: #777;

}



.seat-trip-summary strong {

    color: #173c74;

}





.vehicle-card {

    max-width: 570px;

    margin: auto;



    background: white;



    border: 3px solid #dce4ee;



    border-radius: 35px 35px 22px 22px;



    padding: 25px;



    box-shadow: 0 8px 30px rgba(0,0,0,0.08);

}



.vehicle-front {

    text-align: center;



    padding-bottom: 17px;



    margin-bottom: 18px;



    border-bottom: 2px dashed #dce4ee;

}



.vehicle-front span {

    display: block;

    font-size: 38px;

}



.vehicle-front strong {

    color: #173c74;

}



.driver-seat {

    width: 120px;



    margin-right: auto;

    margin-bottom: 25px;



    padding: 12px;



    border-radius: 12px;



    background: #eef2f7;



    text-align: center;



    display: flex;

    flex-direction: column;



    gap: 4px;



    color: #566270;

}



.driver-seat span {

    font-size: 25px;

}





.seats-grid {

    display: grid;



    grid-template-columns:

        repeat(2, minmax(80px, 130px));



    justify-content: center;



    gap: 18px 90px;



    padding: 10px 0 25px;

}





.seat {

    min-height: 65px;



    border: none;



    border-radius: 14px;



    color: white;



    font-size: 21px;



    font-weight: bold;



    cursor: pointer;



    transition: 0.2s;



    box-shadow: 0 4px 10px rgba(0,0,0,0.10);

}





.seat.available {

    background: #35b857;

}





.seat.available:hover {

    transform: translateY(-3px);

    background: #279b46;

}





.seat.selected {

    background: #0d5bd7;

    transform: scale(1.05);

}





.seat.booked {

    background: #e53935;



    cursor: not-allowed;



    opacity: 0.85;

}





.seat-legend {

    border-top: 1px solid #e4e8ed;



    padding-top: 20px;



    display: flex;



    justify-content: center;



    gap: 25px;



    flex-wrap: wrap;

}





.seat-legend div {

    display: flex;



    align-items: center;



    gap: 7px;

}





.legend-box {

    width: 18px;

    height: 18px;



    border-radius: 5px;



    display: inline-block;

}





.legend-box.available {

    background: #35b857;

}





.legend-box.selected {

    background: #0d5bd7;

}





.legend-box.booked {

    background: #e53935;

}





.selected-seat-box {

    max-width: 570px;



    margin: 25px auto 15px;



    padding: 20px 25px;



    background: white;



    border-radius: 15px;



    display: flex;



    justify-content: space-between;



    gap: 20px;



    box-shadow: 0 5px 18px rgba(0,0,0,0.06);

}





.selected-seat-box div {

    display: flex;



    flex-direction: column;



    gap: 5px;

}





.selected-seat-box small {

    color: #777;

}





.selected-seat-box strong {

    color: #173c74;



    font-size: 18px;

}





.continue-booking-button,

.back-trips-button {

    width: 100%;

    max-width: 570px;



    min-height: 55px;



    display: block;



    margin: 12px auto;



    border: none;



    border-radius: 13px;



    font-size: 17px;



    font-weight: bold;



    cursor: pointer;

}





.continue-booking-button {

    background: #0d5bd7;

    color: white;

}





.continue-booking-button:disabled {

    background: #aeb8c5;



    cursor: not-allowed;

}





.back-trips-button {

    background: white;



    color: #0d5bd7;



    border: 1px solid #0d5bd7;

}





/* SEATS PHONE */



@media (max-width: 700px) {



    .seats-page {

        padding: 30px 14px 50px;

    }



    .seat-trip-summary {

        grid-template-columns: 1fr 1fr;

    }



    .vehicle-card {

        padding: 20px 15px;

    }



    .seats-grid {

        grid-template-columns:

            repeat(2, minmax(75px, 110px));



        gap: 15px 55px;

    }



    .selected-seat-box {

        padding: 18px;

    }

}

/* ==================================

   PASSENGER PAGE

================================== */



.passenger-page {

    min-height: calc(100vh - 80px);

    padding: 45px 20px 70px;

    background: #f7f8fa;

}





.passenger-container {

    width: 100%;

    max-width: 800px;

    margin: auto;

}





.passenger-title {

    text-align: center;

    margin-bottom: 28px;

}





.passenger-title > span {

    font-size: 45px;

}





.passenger-title h1 {

    color: #173c74;

    font-size: 34px;

    margin-top: 8px;

    margin-bottom: 7px;

}





.passenger-title p {

    color: #707985;

}





.passenger-trip-summary {

    background: white;



    padding: 22px;



    border-radius: 18px;



    display: grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap: 15px;



    margin-bottom: 25px;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.06);

}





.passenger-trip-summary div {

    display: flex;



    flex-direction: column;



    text-align: center;



    gap: 5px;

}





.passenger-trip-summary small {

    color: #777;

}





.passenger-trip-summary strong {

    color: #173c74;

}





.passenger-form {

    background: white;



    padding: 32px;



    border-radius: 20px;



    box-shadow:

        0 8px 30px rgba(0,0,0,0.07);

}





.form-section-title {

    display: flex;



    align-items: center;



    gap: 14px;



    padding-bottom: 20px;



    margin-bottom: 25px;



    border-bottom:

        1px solid #e7e9ed;

}





.form-section-title > span {

    font-size: 35px;

}





.form-section-title h2 {

    color: #173c74;



    margin-bottom: 4px;

}





.form-section-title p {

    color: #777;



    font-size: 14px;

}





.passenger-field {

    margin-bottom: 20px;

}





.passenger-field input,

.passenger-field textarea {

    width: 100%;



    border: 1px solid #d9dee7;



    border-radius: 12px;



    background: white;



    color: #172b4d;



    font-family: Arial, Tahoma, sans-serif;



    font-size: 16px;



    outline: none;

}





.passenger-field input {

    height: 55px;



    padding: 0 15px;

}





.passenger-field textarea {

    min-height: 110px;



    resize: vertical;



    padding: 15px;

}





.passenger-field input:focus,

.passenger-field textarea:focus {

    border-color: #0d5bd7;



    box-shadow:

        0 0 0 3px rgba(13,91,215,0.10);

}





.optional-text {

    color: #8b929c;



    font-size: 12px;



    font-weight: normal;

}





.form-error {

    display: none;



    margin-bottom: 15px;



    padding: 12px 15px;



    border-radius: 10px;



    background: #fff0f0;



    color: #c62828;



    font-size: 14px;

}





.continue-passenger-button,

.back-seat-button {

    width: 100%;



    min-height: 55px;



    border-radius: 13px;



    font-size: 17px;



    font-weight: bold;



    cursor: pointer;

}





.continue-passenger-button {

    border: none;



    background: #0d5bd7;



    color: white;



    margin-top: 5px;

}





.continue-passenger-button:hover {

    background: #084aad;

}





.back-seat-button {

    margin-top: 12px;



    background: white;



    color: #0d5bd7;



    border: 1px solid #0d5bd7;

}





@media (max-width: 700px) {



    .passenger-page {

        padding: 30px 14px 50px;

    }





    .passenger-trip-summary {

        grid-template-columns:

            1fr 1fr;

    }





    .passenger-form {

        padding: 22px 18px;

    }





    .passenger-title h1 {

        font-size: 29px;

    }



}

/* ==================================

   CHECKOUT PAGE

================================== */



.checkout-page {

    min-height: calc(100vh - 80px);

    padding: 45px 20px 70px;

    background: #f7f8fa;

}



.checkout-container {

    width: 100%;

    max-width: 800px;

    margin: auto;

}



.checkout-title {

    text-align: center;

    margin-bottom: 30px;

}



.checkout-title > span {

    width: 65px;

    height: 65px;



    margin: auto;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    background: #e9f8ed;

    color: #28a745;



    font-size: 35px;

    font-weight: bold;

}



.checkout-title h1 {

    margin-top: 12px;

    margin-bottom: 7px;



    color: #173c74;



    font-size: 34px;

}



.checkout-title p {

    color: #707985;

}





.checkout-card {

    background: white;



    padding: 25px;



    margin-bottom: 18px;



    border-radius: 18px;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.06);

}



.checkout-card h2 {

    color: #173c74;



    font-size: 20px;



    margin-bottom: 22px;



    padding-bottom: 13px;



    border-bottom:

        1px solid #e7e9ed;

}





.checkout-grid {

    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap: 22px;

}



.checkout-grid div {

    display: flex;



    flex-direction: column;



    gap: 5px;

}



.checkout-grid small {

    color: #777;

}



.checkout-grid strong {

    color: #172b4d;

    font-size: 17px;

}





.payment-options {

    display: grid;



    grid-template-columns:

        1fr 1fr;



    gap: 15px;

}





.payment-option {

    border: 2px solid #e1e5eb;



    border-radius: 14px;



    padding: 18px;



    cursor: pointer;



    display: flex;



    align-items: center;



    gap: 12px;

}





.payment-option:has(input:checked) {

    border-color: #0d5bd7;



    background: #f2f7ff;

}





.payment-option input {

    width: 19px;

    height: 19px;



    accent-color: #0d5bd7;

}





.payment-option div {

    display: flex;



    flex-direction: column;



    gap: 5px;

}





.payment-option strong {

    color: #173c74;

}





.payment-option small {

    color: #777;

}





.checkout-total {

    background: #173c74;



    color: white;



    border-radius: 17px;



    padding: 23px 27px;



    margin: 22px 0;



    display: flex;



    align-items: center;



    justify-content: space-between;

}





.checkout-total div {

    display: flex;



    flex-direction: column;



    gap: 5px;

}





.checkout-total small {

    opacity: 0.8;

}





.checkout-total > strong {

    font-size: 28px;

}





.confirm-booking-button,

.edit-booking-button {

    width: 100%;



    min-height: 57px;



    border-radius: 13px;



    font-size: 17px;



    font-weight: bold;



    cursor: pointer;

}





.confirm-booking-button {

    border: none;



    background: #28a745;



    color: white;

}





.confirm-booking-button:hover {

    background: #218838;

}





.edit-booking-button {

    margin-top: 12px;



    background: white;



    border: 1px solid #0d5bd7;



    color: #0d5bd7;

}





@media (max-width: 700px) {



    .checkout-page {

        padding: 30px 14px 50px;

    }



    .checkout-grid {

        grid-template-columns: 1fr 1fr;

        gap: 18px 10px;

    }



    .payment-options {

        grid-template-columns: 1fr;

    }



    .checkout-card {

        padding: 20px 17px;

    }



    .checkout-title h1 {

        font-size: 29px;

    }

}

/* ==================================

   SUCCESS PAGE

================================== */



.success-page {

    min-height: calc(100vh - 80px);

    padding: 50px 20px 70px;

    background: #f7f8fa;

}





.success-container {

    width: 100%;

    max-width: 720px;

    margin: auto;

    text-align: center;

}





.success-check {

    width: 85px;

    height: 85px;



    margin: auto;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    background: #28a745;

    color: white;



    font-size: 48px;

    font-weight: bold;



    box-shadow:

        0 8px 25px rgba(40,167,69,0.25);

}





.success-container > h1 {

    margin-top: 20px;



    color: #173c74;



    font-size: 35px;

}





.success-message {

    margin-top: 8px;

    margin-bottom: 28px;



    color: #6f7884;

}





.booking-number-box {

    padding: 25px;



    margin-bottom: 22px;



    background:

        linear-gradient(

            135deg,

            #0d6efd,

            #0750bd

        );



    border-radius: 18px;



    color: white;



    display: flex;

    flex-direction: column;



    gap: 7px;



    box-shadow:

        0 8px 25px rgba(13,91,215,0.20);

}





.booking-number-box span {

    font-size: 15px;

}





.booking-number-box strong {

    font-size: 35px;

    letter-spacing: 2px;

}





.booking-number-box small {

    opacity: 0.85;

}





.success-card {

    background: white;



    border-radius: 18px;



    padding: 25px;



    margin-bottom: 18px;



    text-align: right;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.06);

}





.success-card h2 {

    color: #173c74;



    font-size: 20px;



    padding-bottom: 13px;



    margin-bottom: 20px;



    border-bottom:

        1px solid #e7e9ed;

}





.success-details {

    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap: 22px;

}





.success-details div {

    display: flex;



    flex-direction: column;



    gap: 5px;

}





.success-details small {

    color: #777;

}





.success-details strong {

    color: #172b4d;

}





.success-notice {

    background: #fff8e5;



    border: 1px solid #f1dfaa;



    padding: 16px;



    margin: 20px 0;



    border-radius: 13px;



    display: flex;



    justify-content: center;



    align-items: center;



    gap: 10px;



    color: #66531b;

}





.new-booking-button,

.home-button {

    width: 100%;



    min-height: 55px;



    border-radius: 13px;



    font-size: 17px;



    font-weight: bold;



    cursor: pointer;

}





.new-booking-button {

    background: #0d5bd7;



    border: none;



    color: white;

}





.home-button {

    margin-top: 12px;



    background: white;



    border: 1px solid #0d5bd7;



    color: #0d5bd7;

}





@media (max-width: 700px) {



    .success-page {

        padding: 35px 14px 50px;

    }





    .success-container > h1 {

        font-size: 29px;

    }





    .success-details {

        grid-template-columns:

            1fr 1fr;



        gap: 18px 10px;

    }





    .booking-number-box strong {

        font-size: 29px;

    }



}

/* ==================================

   PACKAGE PAGE

================================== */



.package-page {

    min-height: calc(100vh - 80px);

    padding: 45px 20px 70px;

    background: #f7f8fa;

}





.package-container {

    width: 100%;

    max-width: 800px;

    margin: auto;

}





.package-title {

    text-align: center;

    margin-bottom: 30px;

}





.package-title > span {

    font-size: 48px;

}





.package-title h1 {

    color: #173c74;

    font-size: 34px;

    margin: 8px 0;

}





.package-title p {

    color: #707985;

}





.package-form {

    background: white;



    padding: 32px;



    border-radius: 20px;



    box-shadow:

        0 8px 30px rgba(0,0,0,0.07);

}





.package-form h2 {

    color: #173c74;



    font-size: 19px;



    margin-top: 28px;

    margin-bottom: 18px;



    padding-bottom: 12px;



    border-bottom:

        1px solid #e7e9ed;

}





.package-form h2:first-child {

    margin-top: 0;

}





.package-route {

    display: grid;



    grid-template-columns:

        1fr 55px 1fr;



    gap: 12px;



    align-items: end;

}





.package-switch {

    width: 48px;

    height: 48px;



    margin-bottom: 4px;



    border: none;



    border-radius: 50%;



    background: #28a745;



    color: white;



    font-size: 22px;



    cursor: pointer;

}





.package-two-columns {

    display: grid;



    grid-template-columns:

        1fr 1fr;



    gap: 18px;

}





.package-form input,

.package-form select,

.package-form textarea {

    width: 100%;



    border: 1px solid #d9dee7;



    border-radius: 12px;



    background: white;



    color: #172b4d;



    font-family: Arial, Tahoma, sans-serif;



    font-size: 16px;



    outline: none;

}





.package-form input,

.package-form select {

    height: 55px;



    padding: 0 15px;

}





.package-form textarea {

    min-height: 110px;



    padding: 15px;



    resize: vertical;

}





.package-form input:focus,

.package-form select:focus,

.package-form textarea:focus {

    border-color: #28a745;



    box-shadow:

        0 0 0 3px rgba(40,167,69,0.10);

}





.package-date {

    margin-top: 20px;

}





.package-warning {

    margin-top: 20px;



    padding: 15px;



    border-radius: 12px;



    background: #fff8e5;



    border: 1px solid #f1dfaa;



    display: flex;



    align-items: center;



    gap: 10px;



    color: #66531b;

}





.package-continue-button {

    width: 100%;



    min-height: 57px;



    margin-top: 22px;



    border: none;



    border-radius: 13px;



    background: #28a745;



    color: white;



    font-size: 17px;



    font-weight: bold;



    cursor: pointer;

}





.package-continue-button:hover {

    background: #218838;

}





@media (max-width: 700px) {



    .package-page {

        padding: 30px 14px 50px;

    }





    .package-form {

        padding: 22px 18px;

    }





    .package-two-columns {

        grid-template-columns: 1fr;

    }





    .package-route {

        grid-template-columns:

            1fr 45px 1fr;



        gap: 7px;

    }





    .package-switch {

        width: 42px;

        height: 42px;

    }



}

/* ==================================

   PACKAGE TRIPS

================================== */



.package-trips-page {

    min-height: calc(100vh - 80px);

    padding: 45px 20px 70px;

    background: #f7f8fa;

}



.package-trips-container {

    width: 100%;

    max-width: 950px;

    margin: auto;

}



.package-trips-title {

    text-align: center;

    margin-bottom: 30px;

}



.package-trips-title > span {

    font-size: 48px;

}



.package-trips-title h1 {

    color: #173c74;

    font-size: 34px;

    margin: 8px 0;

}



.package-trips-title p {

    color: #707985;

}





.package-search-summary {

    background: white;



    padding: 22px;



    border-radius: 18px;



    display: grid;

    grid-template-columns: repeat(4, 1fr);



    gap: 15px;



    margin-bottom: 25px;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.06);

}



.package-search-summary div {

    display: flex;

    flex-direction: column;

    text-align: center;

    gap: 5px;

}



.package-search-summary small {

    color: #777;

}



.package-search-summary strong {

    color: #173c74;

}





.package-trip-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}





.package-trip-card {

    background: white;



    padding: 24px;



    border-radius: 18px;



    display: grid;



    grid-template-columns:

        140px 1fr 160px;



    gap: 25px;



    align-items: center;



    border: 1px solid #e9edf2;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.06);

}





.package-trip-time {

    display: flex;

    flex-direction: column;



    text-align: center;



    gap: 3px;



    border-left:

        1px solid #e4e8ed;

}



.package-trip-time small {

    color: #777;

}



.package-trip-time strong {

    color: #173c74;

    font-size: 32px;

}



.package-trip-time span {

    color: #555;

}





.package-trip-middle {

    text-align: center;

}



.package-trip-middle h3 {

    color: #173c74;

    margin-bottom: 10px;

}



.package-trip-middle p {

    font-weight: bold;

    margin-bottom: 8px;

}



.package-trip-middle small {

    color: #28a745;

}





.package-trip-action {

    display: flex;



    flex-direction: column;



    text-align: center;



    gap: 10px;

}



.package-card-price {

    color: #173c74;

    font-size: 22px;

}



.package-trip-action button {

    min-height: 45px;



    border: none;



    border-radius: 10px;



    background: #28a745;



    color: white;



    font-weight: bold;



    cursor: pointer;

}



.package-trip-action button:hover {

    background: #218838;

}





.back-package-button {

    width: 100%;



    min-height: 52px;



    margin-top: 22px;



    border: 1px solid #28a745;



    border-radius: 12px;



    background: white;



    color: #218838;



    font-size: 16px;



    font-weight: bold;



    cursor: pointer;

}





@media (max-width: 700px) {



    .package-search-summary {

        grid-template-columns:

            1fr 1fr;

    }



    .package-trip-card {

        grid-template-columns: 1fr;



        gap: 18px;



        padding: 20px;

    }



    .package-trip-time {

        border-left: none;



        border-bottom:

            1px solid #e4e8ed;



        padding-bottom: 15px;

    }

}

/* ==================================

   PACKAGE CHECKOUT

================================== */



.package-checkout-page {

    min-height: calc(100vh - 80px);

    padding: 45px 20px 70px;

    background: #f7f8fa;

}



.package-checkout-container {

    width: 100%;

    max-width: 800px;

    margin: auto;

}



.package-checkout-title {

    text-align: center;

    margin-bottom: 30px;

}



.package-checkout-title > span {

    font-size: 48px;

}



.package-checkout-title h1 {

    color: #173c74;

    font-size: 34px;

    margin: 8px 0;

}



.package-checkout-title p {

    color: #707985;

}



.package-checkout-card {

    background: white;

    padding: 25px;

    margin-bottom: 18px;



    border-radius: 18px;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.06);

}



.package-checkout-card h2 {

    color: #173c74;

    font-size: 20px;



    margin-bottom: 20px;

    padding-bottom: 12px;



    border-bottom:

        1px solid #e7e9ed;

}



.package-checkout-grid {

    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap: 22px;

}



.package-checkout-grid div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.package-checkout-grid small {

    color: #777;

}



.package-checkout-grid strong {

    color: #172b4d;

}



.package-description-review {

    grid-column: 1 / -1;

}



.package-checkout-total {

    background: #173c74;



    color: white;



    padding: 23px 27px;



    margin: 22px 0;



    border-radius: 17px;



    display: flex;



    justify-content: space-between;



    align-items: center;

}



.package-checkout-total div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.package-checkout-total small {

    opacity: 0.8;

}



.package-checkout-total > strong {

    font-size: 28px;

}



.confirm-package-button,

.edit-package-button {

    width: 100%;

    min-height: 56px;



    border-radius: 13px;



    font-size: 17px;

    font-weight: bold;



    cursor: pointer;

}



.confirm-package-button {

    border: none;



    background: #28a745;



    color: white;

}



.confirm-package-button:hover {

    background: #218838;

}



.edit-package-button {

    margin-top: 12px;



    background: white;



    color: #218838;



    border: 1px solid #28a745;

}





@media (max-width: 700px) {



    .package-checkout-page {

        padding: 30px 14px 50px;

    }



    .package-checkout-card {

        padding: 20px 17px;

    }



    .package-checkout-grid {

        grid-template-columns:

            1fr 1fr;



        gap: 18px 10px;

    }



    .package-checkout-title h1 {

        font-size: 29px;

    }

}

/* ==================================

   PACKAGE SUCCESS

================================== */



.package-success-page {

    min-height: calc(100vh - 80px);

    padding: 50px 20px 70px;

    background: #f7f8fa;

}



.package-success-container {

    width: 100%;

    max-width: 720px;

    margin: auto;

    text-align: center;

}



.package-success-icon {

    width: 85px;

    height: 85px;



    margin: auto;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    background: #28a745;

    color: white;



    font-size: 48px;

    font-weight: bold;



    box-shadow:

        0 8px 25px rgba(40,167,69,0.25);

}



.package-success-container > h1 {

    margin-top: 20px;



    color: #173c74;



    font-size: 34px;

}



.package-success-message {

    color: #707985;



    margin-top: 8px;

    margin-bottom: 28px;

}





/* PACKAGE NUMBER */



.package-number-box {

    padding: 25px;



    margin-bottom: 22px;



    border-radius: 18px;



    color: white;



    background:

        linear-gradient(

            135deg,

            #35c75a,

            #168d38

        );



    display: flex;

    flex-direction: column;



    gap: 7px;



    box-shadow:

        0 8px 25px rgba(40,167,69,0.20);

}



.package-number-box strong {

    font-size: 35px;



    letter-spacing: 2px;

}



.package-number-box small {

    opacity: 0.85;

}





/* DETAILS CARDS */



.package-success-card {

    background: white;



    padding: 25px;



    margin-bottom: 18px;



    border-radius: 18px;



    text-align: right;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.06);

}



.package-success-card h2 {

    color: #173c74;



    font-size: 20px;



    margin-bottom: 20px;



    padding-bottom: 12px;



    border-bottom:

        1px solid #e7e9ed;

}



.package-success-grid {

    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap: 22px;

}



.package-success-grid div {

    display: flex;



    flex-direction: column;



    gap: 5px;

}



.package-success-grid small {

    color: #777;

}



.package-success-grid strong {

    color: #172b4d;

}



.ps-description {

    grid-column: 1 / -1;

}





/* NOTICE */



.package-success-notice {

    margin: 20px 0;



    padding: 16px;



    background: #eef9f1;



    border: 1px solid #ccebd4;



    border-radius: 13px;



    color: #256536;



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 10px;

}





/* BUTTONS */



.new-package-button,

.package-home-button {

    width: 100%;



    min-height: 55px;



    border-radius: 13px;



    font-size: 17px;



    font-weight: bold;



    cursor: pointer;

}



.new-package-button {

    border: none;



    background: #28a745;



    color: white;

}



.new-package-button:hover {

    background: #218838;

}



.package-home-button {

    margin-top: 12px;



    background: white;



    color: #218838;



    border: 1px solid #28a745;

}





@media (max-width: 700px) {



    .package-success-page {

        padding: 35px 14px 50px;

    }



    .package-success-container > h1 {

        font-size: 28px;

    }



    .package-success-grid {

        grid-template-columns:

            1fr 1fr;



        gap: 18px 10px;

    }



    .package-number-box strong {

        font-size: 29px;

    }



}

/* ==================================

   ADMIN

================================== */



.admin-page {

    min-height: calc(100vh - 80px);

    padding: 45px 20px 70px;

    background: #f4f6f9;

}



.admin-container {

    width: 100%;

    max-width: 1150px;

    margin: auto;

}



.admin-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;



    gap: 20px;



    margin-bottom: 28px;

}



.admin-heading h1 {

    color: #173c74;

    font-size: 32px;

}



.admin-heading p {

    color: #707985;

    margin-top: 5px;

}



.add-trip-button {

    border: none;



    background: #0d5bd7;

    color: white;



    padding: 14px 22px;



    border-radius: 11px;



    font-size: 16px;

    font-weight: bold;



    cursor: pointer;

}





/* STATISTICS */



.admin-stats {

    display: grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap: 18px;



    margin-bottom: 25px;

}



.admin-stat-card {

    background: white;



    padding: 22px;



    border-radius: 16px;



    display: flex;

    align-items: center;



    gap: 15px;



    box-shadow:

        0 4px 18px rgba(0,0,0,0.05);

}



.admin-stat-card > span {

    font-size: 35px;

}



.admin-stat-card div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.admin-stat-card small {

    color: #777;

}



.admin-stat-card strong {

    color: #173c74;

    font-size: 24px;

}





/* PANELS */



.admin-panel {

    background: white;



    padding: 27px;



    border-radius: 18px;



    margin-bottom: 25px;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.05);

}



#addTripPanel {

    display: none;

}



.admin-panel-title {

    display: flex;



    align-items: center;

    justify-content: space-between;



    padding-bottom: 15px;

    margin-bottom: 22px;



    border-bottom:

        1px solid #e7e9ed;

}



.admin-panel-title h2 {

    color: #173c74;

    font-size: 21px;

}



.admin-panel-title button {

    width: 35px;

    height: 35px;



    border: none;



    border-radius: 50%;



    background: #f1f3f6;



    cursor: pointer;

}





/* ADD TRIP FORM */



.admin-trip-form {

    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 20px;

}



.admin-trip-form input,

.admin-trip-form select {

    width: 100%;

    height: 52px;



    padding: 0 13px;



    border: 1px solid #d9dee7;

    border-radius: 10px;



    background: white;



    font-size: 15px;

}



.admin-package-setting {

    display: flex;

    align-items: center;

}



.admin-package-setting label {

    display: flex;



    align-items: center;



    gap: 9px;



    cursor: pointer;

}



.admin-package-setting input {

    width: 19px;

    height: 19px;

}



.save-trip-button {

    width: 100%;



    min-height: 53px;



    margin-top: 22px;



    border: none;



    border-radius: 11px;



    background: #28a745;



    color: white;



    font-size: 16px;

    font-weight: bold;



    cursor: pointer;

}





/* TRIPS */



.admin-trips-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.admin-empty {

    padding: 40px 20px;



    text-align: center;



    color: #777;

}



.admin-empty span {

    font-size: 45px;

}



.admin-empty h3 {

    color: #173c74;



    margin: 12px 0 7px;

}





.admin-trip-item {

    padding: 20px;



    border: 1px solid #e2e6ec;



    border-radius: 14px;



    display: grid;



    grid-template-columns:

        1.2fr 1fr 1fr auto;



    gap: 18px;



    align-items: center;

}



.admin-trip-item strong {

    color: #173c74;

}



.admin-trip-item small {

    color: #777;

}



.admin-trip-info {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.admin-delete-trip {

    border: none;



    background: #fff0f0;

    color: #c62828;



    padding: 10px 14px;



    border-radius: 9px;



    cursor: pointer;

}





@media (max-width: 800px) {



    .admin-stats {

        grid-template-columns:

            repeat(2, 1fr);

    }



    .admin-trip-form {

        grid-template-columns:

            1fr 1fr;

    }



    .admin-trip-item {

        grid-template-columns:

            1fr 1fr;

    }



}





@media (max-width: 550px) {



    .admin-heading {

        align-items: stretch;

        flex-direction: column;

    }



    .admin-stats {

        grid-template-columns:

            1fr 1fr;

    }



    .admin-trip-form {

        grid-template-columns: 1fr;

    }



    .admin-trip-item {

        grid-template-columns: 1fr;

    }



}

/* ==================================

   NO AVAILABLE TRIPS

================================== */



.no-trips {

    width: 100%;



    background: white;



    padding: 55px 25px;



    border-radius: 18px;



    text-align: center;



    border: 1px solid #e4e8ed;



    box-shadow:

        0 5px 20px rgba(0,0,0,0.05);

}





.no-trips-icon {

    font-size: 55px;



    margin-bottom: 15px;

}





.no-trips h2 {

    color: #173c74;



    margin-bottom: 10px;

}





.no-trips p {

    color: #707985;



    line-height: 1.8;



    margin-bottom: 25px;

}





.no-trips button {

    border: none;



    border-radius: 11px;



    background: #0d5bd7;



    color: white;



    padding: 14px 25px;



    font-size: 16px;



    font-weight: bold;



    cursor: pointer;

}

/* =========================================

   CARGO PAGE - نقل البضائع

========================================= */



.cargo-page {

    background: #f5f7fb;

    min-height: calc(100vh - 140px);

    padding: 50px 20px;

}



.cargo-container {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

}





/* عنوان الصفحة */



.cargo-heading {

    text-align: center;

    margin-bottom: 40px;

}



.cargo-main-icon {

    font-size: 55px;

    display: block;

    margin-bottom: 10px;

}



.cargo-heading h1 {

    font-size: 34px;

    margin: 0 0 10px;

    color: #17233c;

}



.cargo-heading p {

    color: #667085;

    font-size: 17px;

    line-height: 1.8;

    margin: 0 auto;

    max-width: 650px;

}





/* الخياران الرئيسيان */



.cargo-options {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    margin-bottom: 45px;

}



.cargo-option-card {

    background: white;

    border-radius: 18px;

    padding: 35px 30px;

    text-align: center;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

    border: 1px solid #e8ecf3;

}



.cargo-option-icon {

    font-size: 55px;

    margin-bottom: 15px;

}



.cargo-option-card h2 {

    color: #17233c;

    margin: 0 0 12px;

    font-size: 23px;

}



.cargo-option-card p {

    color: #667085;

    line-height: 1.8;

    min-height: 58px;

}



.cargo-option-card button {

    border: none;

    background: #0866d9;

    color: white;

    padding: 13px 28px;

    border-radius: 10px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    margin-top: 12px;

}



.cargo-option-card button:hover {

    background: #0758ba;

}





/* لوحة السيارات والنموذج */



.cargo-panel {

    background: white;

    border-radius: 18px;

    padding: 30px;

    margin-top: 25px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);

}



.cargo-panel-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 25px;

    border-bottom: 1px solid #e8ecf3;

    padding-bottom: 18px;

}



.cargo-panel-title h2 {

    margin: 0 0 6px;

    color: #17233c;

}



.cargo-panel-title p {

    margin: 0;

    color: #667085;

}



.cargo-panel-title > button {

    border: none;

    background: #f1f3f6;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 18px;

}





/* نموذج السيارة */



.cargo-form {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}



.cargo-form .form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.cargo-form label {

    font-weight: bold;

    color: #344054;

}



.cargo-form input,

.cargo-form textarea,

.cargo-form select {

    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    border: 1px solid #d0d5dd;

    border-radius: 9px;

    font-family: inherit;

    font-size: 15px;

}



.cargo-form textarea {

    resize: vertical;

}





/* قائمة السيارات */



.cargo-vehicles-list {

    min-height: 130px;

}





/* الهاتف */



@media (max-width: 750px) {



    .cargo-options {

        grid-template-columns: 1fr;

    }



    .cargo-form {

        grid-template-columns: 1fr;

    }



    .cargo-page {

        padding: 30px 15px;

    }



    .cargo-heading h1 {

        font-size: 28px;

    }

}



/* ADMIN TABS */



.admin-tabs {

    display: flex;

    gap: 10px;

    margin: 25px 0;

    overflow-x: auto;

    padding-bottom: 5px;

}



.admin-tab {

    border: 1px solid #d0d5dd;

    background: white;

    padding: 12px 20px;

    border-radius: 10px;

    font-family: inherit;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    white-space: nowrap;

}



.admin-tab:hover {

    background: #f5f7fb;

}



.admin-tab.active {

    background: #0866d9;

    color: white;

    border-color: #0866d9;

}



@media (max-width: 750px) {



    .admin-tabs {

        gap: 7px;

    }



    .admin-tab {

        padding: 10px 14px;

        font-size: 14px;

    }

}
/* Rakaib 2026 mobile usability and parcel updates */
.rakaib-back-home{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:calc(100% - 24px);margin:12px 14px;padding:12px 20px;min-height:48px;border-radius:12px;background:#f0f7f3;color:#12513b;font-size:16px;font-weight:700;text-decoration:none;border:1px solid #c6ded0;box-sizing:border-box}
.rakaib-back-home:hover,.rakaib-back-home:focus-visible{background:#deeee3;outline:2px solid #22734f;outline-offset:2px}
.confirm-package-button,.package-continue-button,.new-package-button,.package-home-button,.rakaib-contact-button{display:flex!important;align-items:center;justify-content:center;width:100%!important;max-width:100%!important;min-height:54px!important;padding:14px 20px!important;font-size:clamp(16px,3.5vw,19px)!important;font-weight:700!important;line-height:1.5!important;box-sizing:border-box!important;white-space:normal!important;text-align:center!important;cursor:pointer}
.rakaib-contact-button{border-radius:12px;background:#167347;color:white;text-decoration:none;margin:16px 0}
.rakaib-contact-button[hidden]{display:none!important}
.rakaib-trip-points{display:flex;flex-direction:column;gap:6px;margin:10px 0;padding:10px;border-radius:10px;background:#f3f7f5;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.rakaib-trip-points a{color:#075b96;text-decoration:underline}
.rakaib-package-coordination{line-height:1.9}
@media(max-width:700px){header nav{max-width:100%;overflow-x:auto;scrollbar-width:thin}header{max-width:100%}.rakaib-back-home{position:relative;z-index:5}.admin-booking-actions button,button{min-height:42px}}

/* Rakaib: independent taxi and parcel cards on portrait phones */
.rakaib-service-link {color:inherit;text-decoration:none;cursor:pointer;min-width:0;}
.rakaib-service-link:visited {color:inherit;}
.rakaib-service-link:focus-visible {outline:3px solid #fff;outline-offset:3px;}
.rakaib-service-link .rakaib-service-arrow {display:grid;place-items:center;width:45px;height:45px;min-width:45px;border-radius:50%;background:rgba(255,255,255,.25);font-size:22px;}
@media(max-width:700px){
 .rakaib-service-link {width:100%;min-height:130px;}
 .rakaib-service-link h2 {font-size:clamp(22px,5.5vw,30px);}
 .rakaib-service-link p {overflow-wrap:anywhere;}
 .admin-booking-actions .rakaib-parcel-progress {min-height:48px;padding:12px 16px;font-size:16px;border-radius:12px;flex:1 1 135px;}
}
.admin-booking-actions .rakaib-parcel-progress:disabled {opacity:.55;cursor:not-allowed;}

/* Rakaib compact mobile administration */
.rakaib-date-toolbar{background:#f8fafc;border:1px solid #dbe4ef;border-radius:14px;padding:12px;margin:14px 0;direction:rtl}
.rakaib-date-toolbar label{display:block;font-weight:700;color:#17345c;margin-bottom:10px}
.rakaib-date-controls{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.rakaib-date-controls button,.rakaib-date-controls input{font:inherit;min-height:40px;padding:7px 10px;border-radius:9px;border:1px solid #cbd5e1;background:#fff;color:#17345c;flex:1 1 auto;max-width:100%}
.rakaib-date-controls button[aria-pressed="true"]{background:#155bd6;color:#fff;border-color:#155bd6}
.rakaib-filter-count{display:block;margin-top:8px;color:#64748b}
.rakaib-compact-card{overflow-wrap:anywhere}
.rakaib-compact-card .admin-trip-info,.rakaib-compact-card .admin-booking-actions,.rakaib-compact-card .admin-trip-actions{display:none!important}
.rakaib-compact-card.rakaib-expanded .admin-trip-info,.rakaib-compact-card.rakaib-expanded .admin-booking-actions,.rakaib-compact-card.rakaib-expanded .admin-trip-actions{display:flex!important;flex-wrap:wrap}
.rakaib-card-toggle{display:block;width:100%;min-height:40px;margin-top:10px;border:1px solid #bfd0e8;border-radius:9px;background:#eff6ff;color:#17345c;font-weight:700;cursor:pointer}
@media(max-width:650px){.rakaib-date-controls input{flex-basis:48%}.rakaib-date-controls button{flex-basis:22%}.admin-panel{min-width:0}.admin-trip-item{overflow-wrap:anywhere}.admin-stats-grid>*{min-height:unset!important}}

/* Admin: repeat journey and completion controls */
.rakaib-repeat-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px;align-items:center;direction:rtl}
.rakaib-repeat-actions button{border:0;border-radius:9px;padding:10px 14px;font-family:inherit;font-weight:700;cursor:pointer;white-space:normal}
.rakaib-repeat-button{background:#146b86;color:white}
.rakaib-complete-button{background:#e5f5ea;color:#14532d}
.rakaib-repeat-actions button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:600px){.rakaib-repeat-actions{flex-direction:column}.rakaib-repeat-actions button{width:100%}}

/* Launch fix: taxi boarding and arrival points */
.rakaib-trip-points, .rakaib-booking-points:not(:empty) {
  background: #f0f7ff; border: 1px solid #b8d5f8; border-radius: 12px;
  padding: 12px 14px; margin: 14px 0; color: #12365c;
  line-height: 1.9; font-size: 16px; overflow-wrap: anywhere;
}
.rakaib-trip-points > div + div { margin-top: 5px; }
.rakaib-trip-points a { color: #0755ba; font-weight: 700; }