html, body {
    touch-action: manipulation;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background: #f9f9f9;
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 16px;
    margin-bottom: 60px;
}

/* --- Top Bar --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f9f9f9;
}

.top-left .greeting {
    font-size: 16px;
    line-height: 1.3;
}

.greeting .username {
    font-size: 20px;
    font-weight: bold;
    color: #111;
}

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

.refer-btn {
    background-color: #e53935;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

    .refer-btn img {
        width: 18px;
        height: 18px;
    }

/* Hamburger Icon */
.hamburger-icon {
    font-size: 24px;
    cursor: pointer;
    color: #000;
}
/* Wrapper */
.home-wrapper {
    max-width: 400px;
    margin: auto;
    padding-bottom: 100px;
}

/* Search Block */
.search-block {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.search-input {
    background: linear-gradient(to right, #fff8da, #fff1c1);
    border-radius: 24px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(255, 221, 124, 0.4);
    font-weight: 600;
    color: #222;
    font-size: 14px;
}

    .search-input i {
        margin-right: 8px;
        color: #444;
    }




.location-history-list {
    margin-top: 12px;
}

.location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

    .location-item:last-child {
        border-bottom: none;
    }

    .location-item i {
        color: #007bff;
        margin-right: 8px;
        font-size: 16px;
    }

.loc-title {
    font-weight: 400; /* Regular */
    font-size: 14px;
}


.loc-desc {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}




/* Push down the whole carousel + banner block */
.carousel-banner-wrapper {
    margin-top: 25px; 
}



/* Services Section */
.services-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    color: #222;
    padding-left: 16px;
    margin-top: -10px; /* ⬅️ Move section slightly up */
}

/* Centered & width controlled row */
.services-row {
    display: flex;
    justify-content: space-between;
    width: 95%;
    max-width: 500px;
    gap: 12px;
}

/* Updated card appearance */
.service-tile {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    text-align: center; /* ⬅️ Center text and image */
    flex: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* ⬅️ Center-align contents */
    gap: 8px;
}

    .service-tile:hover {
        transform: translateY(-2px);
    }

    .service-tile div {
        font-size: 13px;
        font-weight: 600;
        color: #333;
    }

    .service-tile img {
        width: 80px; /* ⬅️ Increased image size */
        height: auto;
    }

.book-ride-img {
    width: calc(100% + 24px); /* stretch image beyond padding */
    margin-top: 10px; /* space between text and image */
    margin-left: -12px;
    margin-right: -12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    object-fit: contain;
}




/* Banner adjustments */
/* Banner adjustments */
.yellow-banner {
    background: linear-gradient(45deg, #f8b133, #f7941d);
    border-radius: 20px;
    padding: 14px 18px; /* Slightly increased padding */
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #000;
    margin-bottom: 80px; /* Keeps space for bottom nav */
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    width: 95%;
    max-width: 500px;
    transform: translateY(-5px); /* Slightly above original position */
}

/* Banner text adjustments */
.banner-text {
    font-size: 13.5px; /* Slightly larger */
    font-weight: 500;
    line-height: 1.35;
    flex: 1;
    color: #1a1a1a;
}

    .banner-text b {
        font-weight: 700;
        color: #000;
    }

/* Banner image adjustments */
.banner-image img {
    width: 75px; /* Slightly bigger than before */
    height: auto;
    border-radius: 12px;
}


/* --- Bottom Navigation with Curved Center --- */
.bottom-nav-curve {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #ddd;
    max-width: 420px;
    margin: auto;
    z-index: 999;
}

    .bottom-nav-curve .nav-item {
        text-align: center;
        font-size: 12px;
        color: #777;
        flex: 1;
    }

    .bottom-nav-curve img {
        width: 24px;
        margin-bottom: 4px;
    }

    .bottom-nav-curve .active .home-circle {
        background: #fff;
        border: 4px solid #f9f9f9;
        border-radius: 50%;
        padding: 12px;
        margin-top: -30px;
        box-shadow: 0 0 8px rgba(0,0,0,0.1);
    }

    .bottom-nav-curve .active img {
        width: 28px;
    }




/* PROFILE PAGE – Clean, aligned, mobile-first UI */

/* Wrapper */
.profile-wrapper {
    width: 100%;
    margin: 0;
    padding: 20px 16px 100px;
    background: #fff;
    box-sizing: border-box;
    min-height: 100vh;
}

/* Card */
.card.profile-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* User Name & Number */
.username {
    color: #f4b601;
    word-break: break-word;
    font-weight: 600;
    font-size: 1.1rem;
}

.user-number {
    color: gray;
    font-size: 1rem;
    margin-top: 4px;
}

/* Option List */
.option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    border-bottom: 1px dashed #f4b601;
    cursor: pointer;
}

    .option:last-child {
        border-bottom: none;
    }

    .option i.bi:not(.arrow) {
        background: #f4b601;
        color: white;
        padding: 8px;
        border-radius: 50%;
        font-size: 1rem;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .option span {
        flex: 1;
        margin-left: 5px;
        font-size: 1rem;
        color: #333;
    }

    .option .arrow {
        background: none !important;
        color: #000;
        font-size: 1.2rem;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Enhanced 3D effect for profile title container only */
.card.profile-title {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* subtle 3D look */
    border: none; /* remove any borders */
}

/* Support Section */
.support-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 10px;
}

    .support-box i {
        background: #f4b601;
        color: white;
        padding: 8px;
        border-radius: 50%;
        font-size: 1rem;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Footer */
.footer {
    text-align: center;
    font-size: 0.85rem;
    color: #555;
    padding-top: 20px;
}

    .footer a {
        color: #007bff;
        text-decoration: none;
    }

/* Modal */
.custom-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.custom-modal-content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    max-width: 300px;
    width: 90%;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.modal-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    gap: 10px;
}

.modal-btn {
    padding: 10px 20px;
    min-width: 100px;
    font-size: 0.95rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

    .modal-btn.cancel {
        background: #ddd;
        color: #333;
    }

    .modal-btn.confirm {
        background: #f4b601;
        color: white;
    }


   /* //Historyindex page//*/


/* Wrapper for consistency like profile-wrapper */
.history-wrapper {
    width: 100%;
    margin: 0;
    padding: 20px 16px 100px;
    background: #fff;
    box-sizing: border-box;
    min-height: 100vh;
}

/* Ride History Header — renamed and styled */
.ride-history-header {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin: 0 0 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* Matches profile-title */
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
}

    /* Back Arrow inside Header */
    .ride-history-header i {
        background: #ffc107;
        padding: 8px;
        border-radius: 50%;
        font-size: 1rem;
        margin-right: 12px;
        cursor: pointer;
        color: #000;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Ride card (already correct) */
.ride-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* Match profile card */
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
}

.ride-row {
    display: flex;
    align-items: flex-start;
    gap: 0px;
}

.ride-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .ride-icon img {
        width: 32px;
        height: 32px;
        object-fit: contain; /* Ensure the image is visible */
        display: block; /* Prevent accidental collapse */
    }

/* === Pin + Address === */
.pin-location-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-left: 8px;
}

.pin-icon {
    width: 13px;
    height: 13px;
}

/* === Middle Info === */
.ride-info {
    flex: 1;
}

.location-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ride-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8D8D8D;
    margin-top: 4px;
    line-height: 1.31;
    font-family: 'Poppins', sans-serif;
    padding-left: 24px;
}

.ride-date-time {
    font-weight: 400 !important;
    font-size: 12px;
    color: #8D8D8D;
}

/* === Right Fare & Rebook === */
.ride-right {
    text-align: right;
    min-width: 85px;
}

.ride-fare {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.ride-status {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 4px;
}

    .ride-status.completed {
        color: green;
    }

    .ride-status.cancelled {
        color: red;
    }

.ride-rebook {
    font-size: 0.75rem;
    color: #f4b601;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.rebook-icon {
    width: 14px;
    height: 14px;
}
/* === Load More Button === */
.load-more-btn {
    background: linear-gradient(145deg, #ffd33d, #f4b601); /* Gradient background */
    color: #000; /* Black text */
    border: none; /* Remove border for cleaner look */
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Optional: subtle shadow */
}

    /* Hover and Active (Press) State */
    .load-more-btn:hover,
    .load-more-btn:active {
        background: linear-gradient(145deg, #f4b601, #ffd33d); /* Inverted gradient on hover */
        color: #000; /* Keep text black */
        transform: translateY(-2px); /* Slight lift on hover */
    }

    /* Focus State */
    .load-more-btn:focus {
        outline: none;
    }

.center-btn {
    text-align: center;
    margin-top: 12px;
}


/*// edit profile//*/

.edit-profile-wrapper {
    max-width: 420px;
    margin: 0 auto;
    padding: 20px 0 100px;
    background-color: #fff;
    box-sizing: border-box;
    min-height: 100vh;
}

/* Make header and form-box full width of wrapper */
.edit-header,
.form-box {
    width: 100%;
    box-sizing: border-box;
}

/* === Unified Header === */
.edit-header {
    padding: 12px 16px; /* horizontal + vertical padding */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    display: flex;
    align-items: center; /* vertically center icon & text */
    font-size: 1.2rem; /* slightly bigger text */
    font-weight: 600;
    color: #333;
    min-height: 60px; /* match input height visually */
    margin-bottom: 20px;
}

    .edit-header i {
        background: #f4b601;
        padding: 8px;
        border-radius: 50%;
        font-size: 1.2rem; /* slightly bigger icon */
        margin-right: 12px;
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }

/* === Form === */
.form-box {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.edit-profile-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-group:not(:last-child) {
    margin-bottom: 8px;
}

.edit-input {
    padding: 16px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    background: #fff;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.validation-msg {
    font-size: 12px;
    color: #e74c3c;
    min-height: 14px;
}

/* Updated circular gradient style for update button to match rest of UI */
.update-btn {
    width: 90%; /* Increased width */
    max-width: 340px; /* Optional cap for large screens */
    align-self: center;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 50px; /* full pill shape */
    background: linear-gradient(145deg, #ffd33d, #f4b601);
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
    margin-top: 16px;
}

    .update-btn:hover {
        background: linear-gradient(145deg, #f4b601, #e6a900);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

    .update-btn:active {
        transform: translateY(2px);
        opacity: 0.9;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

.edit-input.input-validation-error {
    border: 1px solid #ff4d4d;
    background-color: #fff6f6;
}

/* === Responsive === */
@media (max-width: 480px) {
    .edit-input,
    .update-btn {
        font-size: 14px;
    }

    .edit-header {
        font-size: 1rem;
        padding: 10px 14px;
        min-height: 50px;
    }

        .edit-header i {
            padding: 7px;
            font-size: 1rem;
            margin-right: 10px;
            width: 28px;
            height: 28px;
        }

    .form-box {
        padding: 14px;
    }
}

/* === Edit Profile Slide Button (Page-Specific) === */
.edit-profile-wrapper .slide-btn-wrapper {
    width: 100%;
    margin-top: 20px;
}

.edit-profile-wrapper .slide-button {
    position: relative;
    height: 55px;
    width: 90%; /* match previous .update-btn width */
    max-width: 340px;
    border-radius: 50px;
    overflow: hidden; /* handle fits perfectly */
    background: linear-gradient(145deg, #ffd33d, #f4b601);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    margin: 16px auto 0;
    cursor: pointer;
}

.edit-profile-wrapper .slide-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 15px;
    color: #1a1a1a;
    pointer-events: none;
}

.edit-profile-wrapper .slide-handle {
    position: absolute;
    left: 6px;
    top: 4px;
    height: 46px;
    width:46px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out;
   
}

.edit-profile-wrapper .arrow-icon {
    font-size: 18px;
    font-weight: 700;
    color: black;
    margin-left: 2px;
}

.edit-profile-wrapper .slide-button.completed .slide-handle {
    animation: none;
}

/* Slide hint animation */
@keyframes slideHint {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(12px);
    }

    60% {
        transform: translateX(0);
    }

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



/*// Change Language Wrapper //*/

.language-wrapper {
    max-width: 420px;
    margin: 0 auto;
    padding: 20px 0 100px;
    background: #fff;
    box-sizing: border-box;
    min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
}

/* === Shared Card Style === */
.language-card {
    margin: 0 16px 20px;
    padding: 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Soft but deep shadow */
    box-sizing: border-box;
}

/* === Header === */
.language-header {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0c0c0c;
}

    /* === Back Arrow === */
    .language-header i {
        background: #f4b601;
        padding: 8px;
        border-radius: 50%;
        font-size: 1.1rem;
        margin-right: 12px;
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

/* === Popup Title === */
.language-popup h4 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
}
/* === Language Options === */
.language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 15px;
    color: #333;
}

    .language-option input[type="radio"] {
        transform: scale(1.3);
        accent-color: #f4b601;
    }

/* === Buttons === */
.language-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

/* === OK Button with gradient and 3D effect === */
.lang-btn.ok {
    flex: 1;
    padding: 12px;
    background: linear-gradient(145deg, #ffd33d, #f4b601);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
}

/* === Cancel Button: outlined === */
.lang-btn.cancel {
    flex: 1;
    padding: 12px;
    background: #fff;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    border: 2px solid #f4b601;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* === Hover & Active states === */
.lang-btn.ok:hover {
    background: linear-gradient(145deg, #f4b601, #e6a900);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.lang-btn.cancel:hover {
    background: #fffaf0;
    border-color: #e6a900;
}

.lang-btn.ok.inactive {
    background: #ddd;
    color: #888;
    box-shadow: none;
    cursor: not-allowed;
}

.lang-btn.active {
    background: linear-gradient(145deg, #f4b601, #e6a900) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    color: #1a1a1a;
}

.language-option.selected {
    background-color: #fff7d1;
    border-radius: 12px;
    padding: 10px;
    box-shadow: inset 0 0 0 2px #f4b601;
    transition: background 0.2s ease;
}


/*//language modal//*/

/* ==== LANGUAGE MODAL ONLY ==== */

/* Fullscreen overlay */
.language-modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Centered white popup card */
.language-modal-popup {
    background-color: white;
    padding: 24px;
    border-radius: 12px;
    width: 320px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    text-align: left;
}

    .language-modal-popup h4 {
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: 600;
    }

    .language-modal-popup .language-option {
        margin: 10px 0;
        display: flex;
        align-items: center;
    }

    .language-modal-popup label {
        margin-left: 10px;
        font-size: 16px;
    }

    .language-modal-popup .lang-btn.ok {
        margin-top: 20px;
        padding: 12px;
        width: 100%;
        background: linear-gradient(to right, #FFD700, #FFB300);
        border: none;
        color: white;
        font-weight: bold;
        border-radius: 6px;
        cursor: pointer;
    }



/* === Responsive === */
@media (max-width: 480px) {
    .language-card {
        margin: 0 12px 16px;
        padding: 14px;
    }

    .lang-btn {
        font-size: 14px;
    }

    .language-header {
        font-size: 1rem;
    }
}


#languageSlideWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.slide-button {
    position: relative;
    border-radius: 50px;
    height: 55px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    background: linear-gradient(145deg, #ffd33d, #f4b601);
}

.slide-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
    color: #1a1a1a;
}

.slide-handle {
    position: absolute;
    left: 6px;
    top: 0;
    height: 55px;
    width: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out;
}

.arrow-icon {
    font-size: 18px;
    font-weight: 700;
    color: black;
}

.slide-button.completed .slide-handle {
    animation: none;
}

/* Cancel Button Styling */
.slide-button.back-slide {
    background: transparent;
    border: 2px solid #f9b233;
}

#cancelSlideButton .slide-text {
    color: #f9b233;
}

#cancelSlideButton .slide-handle {
    background: linear-gradient(145deg, rgba(255,255,255,0.9), #FFFBCC 80%);
    left: auto;
    right: 6px;
}

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

    30% {
        transform: translateX(12px);
    }

    60% {
        transform: translateX(0);
    }

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

/*//logout command delete//*/

/* Modal Background Overlay */
/* Modal Background Overlay */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
}

/* Modal Box */
.custom-modal-content {
    background-color: #fff;
    padding: 24px 20px;
    border-radius: 18px;
    width: 90%;
    max-width: 280px; /* modal ke andar better fit */
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-family: 'Segoe UI', sans-serif;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px; /* spacing between title, text, sliders */
}

/* Modal Title */
.modal-title {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
}

/* Confirmation Text */
.custom-modal-content p {
    font-size: 15px;
    color: #333;
    margin: 0 0 16px 0;
}

/* Action Buttons Container */
.modal-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

/* Shared Button Styles */
.modal-btn.cancel {
    flex: 1;
    padding: 12px;
    width: 100%;
    background: transparent;
    border: 2px solid #f9b233; /* back button border color */
    color: #f9b233; /* same text color */
    font-weight: bold;
    font-size: 15px;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.2s ease;
    box-shadow: none; /* outline style clean look */
}

    /* Hover effect (same as back-outline-button) */
    .modal-btn.cancel:hover {
        background: rgba(249, 178, 51, 0.15);
    }


.modal-btn.confirm {
    flex: 1;
    padding: 12px;
    background: #fff;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    border: 2px solid #ffd33d; /* slightly brighter border */
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* lighter shadow */
    transition: all 0.2s ease;
}



.modal-btn.confirm:hover {
    background: #fffaf0;
    border-color: #ffe066;
}

.modal-btn.confirm:active,
.modal-btn.cancel:active {
    transform: translateY(2px);
    opacity: 0.85;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Modal-specific sliders wrapper */
.custom-modal .slide-btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Slider base (modal only) */
.custom-modal .slide-button.otp-style {
    position: relative;
    height: 45px; /* thoda aur kam for modal */
    width: 100%;
    border-radius: 50px;
   
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    cursor: pointer;
}

    /* Slider text */
    .custom-modal .slide-button.otp-style .slide-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-weight: 600;
        font-size: 14px;
        color: black;
        pointer-events: none;
    }

/* Slider handle */
.custom-modal .otp-handle {
    position: absolute;
    left: 4px;
    top:3px;
    height:38px;
    width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    box-shadow: 0 0 0 rgba(255, 211, 74, 0.4), inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out, glowPulse 2s infinite alternate;
}

/* RTL handle for cancel/back slider */
.custom-modal .slide-button.back-slide .otp-handle {
    left: auto;
    right: 4px;
}

/* Arrow icons */
.custom-modal .arrow-icon {
    color: black;
    font-size: 18px;
    font-weight: 700;
    margin-left: 2px;
}

/* Slide hint animation */
@keyframes slideHint {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(10px);
    }

    60% {
        transform: translateX(0);
    }

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

/* Reverse animation for cancel/back slider */
.custom-modal .slide-button.back-slide .otp-handle {
    animation: slideHintReverse 1.8s infinite ease-in-out, glowPulse 2s infinite alternate;
}

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

    30% {
        transform: translateX(-10px);
    }

    60% {
        transform: translateX(0);
    }

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


/* Glow pulse animation */
@keyframes glowPulse {
    0% {
        box-shadow: 0 0 6px rgba(255, 211, 74, 0.6), inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    }

    50% {
        box-shadow: 0 0 12px rgba(255, 211, 74, 0.8), inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    }

    100% {
        box-shadow: 0 0 6px rgba(255, 211, 74, 0.6), inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    }
}

/*//ride details//*/

/* === Wrapper === */
.ride-details-wrapper {
    max-width: 400px;
    margin: auto;
    padding: 20px 16px 100px;
    background: #f9f9f9;
    box-sizing: border-box;
    min-height: 100vh;
}

.ride-details-header {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* Clean 3D subtle shadow */
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 500; /* Reduced from 600 */
    color: #333;
}

    /* === Back Icon === */
    .ride-details-header i {
        background: #f4b601;
        padding: 8px;
        border-radius: 50%;
        font-size: 1.1rem;
        margin-right: 12px;
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }

/* === Card === */
.ride-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* Consistent with header and profile card */
    font-family: 'Poppins', sans-serif;
}

/* === Padded Container === */
.padded-block {
    padding: 0;
    overflow: visible; /* Important to reveal shadows */
}

/* Summary */
.ride-summary {
    padding: 16px 0;
}

.driver-info, .booking-id {
    font-size: 16px;
    color: #333;
    margin-bottom: 6px;
}

.ride-date, .fare {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 600;
    color: #222;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
}

    .status-badge.cancelled {
        background-color: #8B0000;
        color: white;
    }

    .status-badge.completed {
        background-color: #4CAF50;
        color: white;
    }

/* Dots */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

    .dot.yellow {
        background-color: #FFB703;
    }

    .dot.orange {
        background-color: #FB8500;
    }

/* Location Section */
.location-section {
    margin-top: 16px;
}

.location-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
}

.location-left {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 14px;
    color: #444;
}

.location-time {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

/* Invoice */
.invoice {
    margin-top: 24px;
    padding: 0 4px;
}

    .invoice strong {
        display: block;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
    }

.invoice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 15px;
    color: #333;
    gap: 8px;
}

    .invoice-row span:first-child {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .invoice-row span:last-child {
        font-weight: 600;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .invoice-row.total {
        border-top: 1px dashed #ccc;
        margin-top: 12px;
        padding-top: 10px;
        font-weight: bold;
    }

/* Responsive */
@media (max-width: 480px) {
    .ride-date, .fare {
        font-size: 16px;
    }

    .invoice-row {
        font-size: 14px;
    }

    .location-time {
        font-size: 13px;
    }
}





/*//booking page//*/

.searching-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* Dark overlay */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px); /* Soft blur effect */
}

.searching-box {
    background: white;
    border-radius: 20px;
    padding: 25px 30px;
    width: 90%;
    max-width: 400px; /* More compact */
    min-height: 300px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Strong 3D effect */
    transform: perspective(800px) rotateX(0deg); /* Subtle depth */
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #555;
}

.searching-text {
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 15px;
    color: #333;
}

.vehicle-animation {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
}

    .vehicle-animation img {
        width: 100%;
        z-index: 2;
        position: relative;
    }

.pulse-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 165, 0, 0.35); /* Slightly visible orange */
    animation: pulse 1.8s ease-out infinite; /* Smoother and a bit slower */
    z-index: 1;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.3); /* Slightly smaller than before */
        opacity: 0.3;
    }

    100% {
        transform: scale(1.6); /* Final size not too large */
        opacity: 0;
    }
}




.cancel-request-btn {
    background: linear-gradient(to right, #ffa500, #ff7b00);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    width: 70%; /* Match .progress-bar width */
    max-width: 250px; /* Match .progress-bar max-width */
    transition: background 0.3s ease;
    margin: 0 auto; /* Center horizontally */
    display: block;
}


    .cancel-request-btn:hover {
        background: linear-gradient(to right, #ffb733, #ff944d);
    }

.progress-bar {
    width: 60%;
    max-width: 250px;
    height: 3px; /* Thinner bar */
    border: 1px solid #999; /* Thin grey border */
    border-radius: 6px;
    overflow: hidden;
    margin: 10px auto 20px auto;
    background: transparent; /* No background */
    position: relative;
}

.progress-fill {
    height: 100%;
    width: 0%; /* Set this dynamically with JS */
    background-color: #000; /* Black fill */
    transition: width 1s linear;
    border-radius: 6px 0 0 6px;
}




.back-arrow {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #007bff;
    cursor: pointer;
    margin: 12px 0;
}

    .back-arrow i {
        font-size: 20px;
        margin-right: 6px;
    }

.searching-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    flex-direction: column;
}

.searching-content {
    text-align: center;
}

.fare-summary {
    margin: 10px 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.book-now-btn {
    width: 100%;
    background-color: #28a745;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
}

    .book-now-btn:hover {
        background-color: #218838;
    }

.cab-popup {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    transition: bottom 0.3s ease-in-out;
    z-index: 9999;
    padding: 15px;
}

    .cab-popup.show {
        bottom: 0;
    }

.cab-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 18px;
}

.cab-popup-body {
    max-height: 250px;
    overflow-y: auto;
}



    .cab-option img {
        width: 50px;
        margin-right: 10px;
    }

  

.cab-popup-body {
    
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
} 

#fare-summary {
    margin-top: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
}

.cab-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff; /* ← changed from #fffbe6 */
    border: 1px solid #ddd; /* optional: less yellow */
    border-radius: 15px;
    padding: 12px 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    transition: border 0.2s ease;
}


    .cab-option.selected {
        border: 2px solid #FFBD31 !important;
        background-color: rgba(255, 189, 49, 0.2) !important;
    }


    .cab-option img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .cab-option .cab-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .cab-option .cab-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 2px;
        color: #333;
    }

    .cab-option .cab-meta {
        font-size: 13px;
        color: #666;
    }

    .cab-option .cab-fare {
        text-align: right;
        font-size: 15px;
        font-weight: bold;
        color: #28a745;
        white-space: nowrap;
    }

    .cab-option .cab-original-fare {
        text-decoration: line-through;
        color: #d9534f;
        font-size: 12px;
        display: block;
    }

.discount-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: rgba(255, 193, 7, 0.6); /* same yellow but faint (60% opacity) */
    color: #222;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 50px 50px 0 50px;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}





.book-now-btn {
    width: 100%;
    background: linear-gradient(to right, #fbb034, #ffdd00);
    color: black;
    font-weight: bold;
    padding: 10px;
    border: none;
    border-radius: 20px;
    margin-top: 10px;
}

 /* === Login Screen === */

/* === Login Screen === */
.login-wrapper {
    background: #fff;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}




.login-box {
    width: 100%;
    max-width: 360px;
    padding: 0 20px;
    text-align: center;
}

/* Logo */
.logo-img {
    width: 140px; /* desired width */
    height: 140px; /* desired height */
    object-fit: contain;
    margin-bottom: 24px;
}


/* Tab Switch */
.tab-switch {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.tab {
    flex: 1;
    padding: 10px 0;
    border-radius: 999px;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    color: #444;
    text-decoration: none;
    transition: all 0.3s ease;
}

.active-tab {
    border: 2px solid #f4b601;
    color: #000;
    font-weight: 600;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}

/* Label */
.login-label {
    display: block;
    text-align: left;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #222;
}

/* Input Field */
.input-field {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    outline: none;
    background-color: #fff;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
}

    .input-field:focus {
        box-shadow: 0 0 0 2px rgba(244, 182, 1, 0.3);
    }

/* Submit Button (Shared Login/Signup) */
.btn-submit {
    width: 100%;
    padding: 14px;
    border-radius: 999px;
    border: 2px solid #f4b601;
    color: #000;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    cursor: pointer;
    background: radial-gradient(circle at center, #FFBD31 0%, #f4b601 50%, #FFBD31 100%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

    .btn-submit:active,
    .btn-submit:focus {
        border: 2px solid #d3a600;
        outline: none;
    }




.input-wrapper {
    position: relative;
    margin-bottom: 24px; /* total space reserved below input */
}

.error-message {
    color: red;
    font-size: 13px;
    margin-top: 4px;
    text-align: left;
    display: none; /* hidden by default; shown by JS */
}




/* === Mobile Responsive === */
@media (max-width: 768px) {
    .login-box {
        max-width: 100%;
        padding: 0 16px;
    }

    .input-field,
    .btn-submit {
        font-size: 15px;
        padding: 12px;
    }

    .tab {
        font-size: 14px;
    }

   
    .referral-code {
        font-size: 14px;
    }

    .referral-message.success::before {
        width: 18px;
        height: 18px;
    }
}

/* Fix login position on mobile */

@media (max-width: 768px) {
    .login-wrapper {
        align-items: flex-start !important; /* top alignment */
        justify-content: flex-start !important;
        padding-top: 40px !important; /* top spacing */
        height: auto !important; /* remove forced centering */
        min-height: 100vh !important; /* fill screen */
    }
}


/* === Login Slide Button (Page-Specific) === */
.login-wrapper .slide-btn-wrapper {
    width: 100%;
    margin-top: 20px;
}

.login-wrapper .slide-button {
    position: relative;
    background: radial-gradient(circle at center, #FFBD31 0%, #f4b601 50%, #FFBD31 100%);
    border-radius: 50px;
    height: 55px; /* button height */
    width: 100%;
    overflow: hidden; /* allow handle to fit perfectly */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.login-wrapper .slide-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
}

/* Handle (Circle with Slide Hint Animation) */
.login-wrapper .slide-handle {
    position: absolute;
    left: 6px;
    top: 4px; /* start from top, same as button height */
    height: 46px; /* same as button height */
    width: 46px;
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out; /* Slide hint animation */
}

/* Arrow inside handle */
.login-wrapper .arrow-icon {
    color: black;
    font-size: 18px;
    font-weight: 700;
    margin-left: 2px;
}

/* Completed state */
.login-wrapper .slide-button.completed .slide-handle {
    animation: none; /* Stop hint when completed */
}

/* Slide hint animation */
@keyframes slideHint {
    0% { transform: translateX(0); }
    30% { transform: translateX(12px); } /* little nudge right */
    60% { transform: translateX(0); }
    100% { transform: translateX(0); }
}




/* === SIGNUP STYLING === */

/* Phone input layout */
.phone-combined {
    display: flex;
    align-items: center;
    padding: 8px 12px; /* ⬅️ Reduced from 10px to 8px */
    gap: 8px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.country-code {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    gap: 4px;
}

    .country-code.no-bg {
        background: none;
        box-shadow: none;
        padding: 0;
    }

.flag-icon {
    width: 16px; /* ↓ Slightly smaller */
    height: 12px;
    object-fit: contain;
    margin-right: 4px;
}

.dropdown-icon {
    width: 18px;
    height: 13px;
    margin-left: 4px;
    object-fit: contain;
}

.phone-input {
    flex: 1;
    padding: 8px 8px; /* ⬅️ Reduced slightly */
    border: none;
    outline: none;
    background: none;
    font-size: 15px;
    border-radius: 0 12px 12px 0;
}



/* Referral styling */
.referral-container {
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 0 12px;
    gap: 8px;
    margin-bottom: 8px;
}

.referral-code {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 0;
    font-size: 15px;
    background: none;
}

.apply-btn {
    background: none;
    border: none;
    color: #FFB300;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

/* Referral message */
.referral-message {
    font-size: 13px;
    margin-top: 4px;
    color: #28a745;
}


    .referral-message.success {
        color: #28a745;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        margin-top: 8px;
    }

        .referral-message.success::before {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #28a745;
            display: inline-block;
            mask: url('/images/check-icon.svg') no-repeat center;
            -webkit-mask: url('/images/check-icon.svg') no-repeat center;
            mask-size: 60%;
            -webkit-mask-size: 60%;
            background-size: cover;
        }

.clear-referral {
    background: none;
    border: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
}






/* Checkbox style (aligned left and neat) */
.checkbox-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #444;
    margin-bottom: 16px;
    text-align: left;
}

    .checkbox-line input[type="checkbox"] {
        transform: scale(1.2);
        margin-top: 3px;
    }

    .checkbox-line label {
        line-height: 1.4;
    }

    .checkbox-line a {
        color: #333;
        font-weight: 500;
        text-decoration: underline;
    }


.validation-error {
    font-size: 13px;
    color: red;
    margin-top: 4px;
}


.input-field.input-validation-error,
.phone-input.input-validation-error {
    border-color: red;
}

input, textarea, select, button {
    font-size: 16px !important;
}

/* Slide Button Wrapper */
#signupSlideWrapper {
    width: 100%;
    margin-top: 20px;
}

    /* Slide Button Background */
    #signupSlideWrapper .slide-button {
        position: relative;
        background: radial-gradient(circle at center, #FFBD31 0%, #f4b601 50%, #FFBD31 100%);
        border-radius: 50px;
        height: 55px;
        width: 100%;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }

    /* Slide Text */
    #signupSlideWrapper .slide-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #000;
        font-weight: 600;
        font-size: 16px;
        pointer-events: none;
    }

    /* Handle (Glossy + Animated + Left margin) */
    #signupSlideWrapper .slide-handle {
        position: absolute;
        left: 6px; /* left margin */
        top: 4px; /* start from top, same as button height */
        height: 46px; /* same as button height */
        width: 46px;
        background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
        animation: slideHint 1.8s infinite ease-in-out;
    }

    /* Arrow Black */
    #signupSlideWrapper .arrow-icon {
        color: black;
        font-size: 18px;
        font-weight: 700;
        margin-left: 2px;
    }

    /* Completed state */
    #signupSlideWrapper .slide-button.completed .slide-handle {
        animation: none;
        background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    }

/* Slide Hint Animation */
@keyframes slideHint {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(12px);
    }

    60% {
        transform: translateX(0);
    }

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


/*//cancel conformation//*/
.cancel-popup,
.cancel-success {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.cancel-card {
    background: #fff;
    color: #000;
    border-radius: 24px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.cancel-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
}

.cancel-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
}

.cancel-subtitle {
    font-size: 14px;
    color: #555;
    margin-bottom: 16px;
}

.cancel-options {
    margin-top: 16px;
    text-align: left;
}

    .cancel-options label {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid #ddd;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s ease;
    }

        .cancel-options label:hover {
            border-color: #ffc107;
            background-color: #fff8e1;
        }

    .cancel-options input[type="radio"] {
        accent-color: #ffc107;
        transform: scale(1.2);
    }

.btn-solid {
    background: linear-gradient(90deg, #ffd54f, #ffb300);
    border: none;
    color: #000;
    padding: 12px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-outline {
    background: #fff;
    color: #000;
    border: 2px solid #ffc107;
    padding: 12px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-solid:hover {
    opacity: 0.9;
}

.btn-outline:hover {
    background: #fffde7;
}

.full-width {
    width: 100%;
}

.btn-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}


.btn.go-back-btn {
    background-color: #ffc107;
    color: black;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: bold;
    flex: 1;
}

/*//ride details//*/
/* === MAP AREA === */
.map-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    margin: 0 !important;
    padding: 0 !important;
}

html, body {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
    overflow-x: hidden; /* allow vertical scroll */
    overflow-y: auto; /* allow vertical scroll */
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}


@media (max-height: 700px) {
    .ride-info-card {
        bottom: 5px; /* lower padding for very small screens */
        padding-bottom: 12px;
    }
}


.map-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/images/map-placeholder.png') no-repeat center center;
    background-size: cover;
    z-index: 1;
}



/* === Ride Info Card === */


.ride-info-card {
    position: absolute;
    bottom: 15px; /* ⬅ Increased from 25px to 50px */
    left: 8px;
    right: 8px;
    background: #fff;
    border-radius: 16px;
    /* ✅ Softer multi-layer shadow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), 0 8px 18px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.35);
    padding: 14px 16px;
    z-index: 2;
    max-width: 500px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
}




/* === Top Row === */
.ride-info-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.pill {
    background: transparent;
    border: 1px solid #ccc;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #000;
}


/*OTP=== */

.otp-box {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.otp-label {
    color: #000;
    font-weight: 500;
    font-size: 12px;
}

.otp-digits {
    display: flex;
    gap: 4px;
}

.otp-digit-box {
    width: 22px;
    height: 28px;
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 13px;
    color: #000;
}

/* === Driver Row === */
.driver-main-row {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.driver-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .driver-left img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }

.driver-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.driver-name-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.driver-name {
    font-weight: 600;
    font-size: 15px;
    color: #000;
}

.driver-rating {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 3px;
}

.vehicle-and-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    margin-top: 2px;
    color: #777;
}

.ride-details-link {
    color: #007bff;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    margin-left: auto; /* stay at the far right */
    margin-top: 22px; /* ⬅️ drag down to align with plate number */
    display: inline-block; /* ensure margin-top works as expected */
}



/* === Bottom Row === */
.driver-actions {
    display: flex;
    flex-wrap: wrap; /* ✅ Responsive */
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    gap: 12px;
}

/* ✅ Plain status text */
.status-button {
    color: #1aaa55;
    font-weight: 600;
    font-size: 15px;
    text-align: left;
}

/* ✅ Contact actions with no border box */
.contact-actions-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.contact-icon {
    width: 26px; /* Reduced from 32px */
    height: 26px; /* Reduced from 32px */
    border-radius: 50%;
    background: #FFBD31;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 14px; /* Reduced from 18px */
    flex-shrink: 0;
    overflow: visible;
    position: relative;
}

    .contact-icon i {
        color: #000 !important;
        font-size: 14px; /* Reduced from 18px */
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
    }

    .contact-icon:hover {
        background-color: #e0a800;
    }


/* Divider between icons */
.divider {
    width: 1px;
    height: 20px;
    background-color: #000;
}


/* === Map Back Button === */
.map-back-button {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    background: #f4b601;
    width: 36px; /* Smaller size */
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Center the icon */
    align-items: center;
    justify-content: center;
}

    .map-back-button i {
        color: #fff;
        font-size: 1rem; /* Slightly reduced */
    }



/* Bottom Sheet Trip Details */


#trip-details-popup {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: bottom 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0; /* ✅ Remove padding so it sits at the very bottom */
    background: transparent;
}

    #trip-details-popup.show {
        bottom: 0px;
    }




/* Driver & Vehicle */
.driver-section .driver-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.driver-name {
    font-weight: 600;
    font-size: 15px;
    color: #222;
}

.vehicle-number {
    font-size: 13px;
    color: #666;
}

.vehicle-icon {
    width: 50px;
    margin-right: 8px; /* ✅ Moved slightly left */
}

/* Route Info */
.route-section .route-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
}

.route-item i {
    font-size: 16px;
    margin-right: 8px;
}

.green-dot {
    color: #4CAF50;
}

.red-dot {
    color: #E53935;
}

.location-text {
    font-size: 14px;
    font-weight: 500;
    flex-grow: 1;
    color: #333;
}

.time-text {
    font-size: 13px;
    color: #888;
    min-width: 55px;
    text-align: right;
}

/* Fare Summary */
.fare-summary-box {
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

    .fare-summary-box .fare-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 14px;
        color: #555;
    }

        .fare-summary-box .fare-row.total {
            font-weight: 600;
            color: #000;
        }

/* Cancel Button */
.feedback-button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.feedback-btn {
    width: 100%;
    max-width: 300px;
    height: 48px;
    background: transparent; /* No fill */
    border: 2px solid #FFBD31; /* Yellow outline */
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #000; /* ✅ Black text */
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    box-shadow: none;
}

    .feedback-btn:hover {
        background: #FFBD31;
        color: #fff; /* White on hover */
    }

/* Trip Details Popup - Styled Like Safety Popup */
/* Trip Details Popup Inner Fix */
#trip-details-popup .popup-inner {
    background: #fff;
    width: 95%;
    max-width: 500px;
    margin: 0 auto 20px;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    position: relative; /* ✅ Ensure absolute children are positioned correctly */
    overflow: visible; /* ✅ Allow close button to extend outside corners */
}






/*//ride details button//*/
.ride-details-button-wrapper {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.ride-details-btn {
    background-color: #FFBD31;
    color: #09051C;
    border: none;
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

    .ride-details-btn:hover {
        background-color: #f4aa00;
        color: #fff;
    }


/* Close Button */
.popup-close {
    position: absolute;
    top: -12px; /* move above the corner */
    right: -12px; /* move outside the inner container */
    cursor: pointer;
    font-size: 20px;
    color: #666;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    z-index: 10;
}

/*   //chat//*/


/* === Chat Container === */
.chat-container {
    height: 100vh;
    background-color: #ffefc1;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom); /* for iOS safe area */
}

/* === Header === */
.chat-header {
    background-color: #ffefc1;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}

.back-btn-circle {
    width: 36px;
    height: 36px;
    background-color: #ffbd31;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    margin-right: 10px;
    font-size: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.call-icon {
    width: 36px;
    height: 36px;
    background-color: #ffbd31;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.driver-info {
    flex-grow: 1;
    margin-left: 10px;
}

.driver-name {
    font-weight: bold;
    font-size: 15px;
    color: #000;
    margin-bottom: 2px;
}

/* === Message Area === */
/* === Messages === */
.chat-messages {
    flex: 1;
    padding: 16px;
    padding-bottom: 80px; /* space for input */
    overflow-y: auto;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    word-wrap: break-word;
    position: relative;
}

.user {
    align-self: flex-end;
    background-color: #b28c56;
    color: white;
    border-bottom-right-radius: 4px;
}

.driver {
    align-self: flex-start;
    background-color: #f2f2f2;
    color: #000;
    border-bottom-left-radius: 4px;
}

.timestamp {
    font-size: 11px;
    display: block;
    text-align: right;
    opacity: 0.6;
    margin-top: 4px;
}

/* === Chat Input Fixed at Bottom === */
.chat-input-container {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: white;
    border-top: 1px solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

    .chat-input-container input {
        flex: 1;
        padding: 12px 16px;
        border-radius: 30px;
        border: 1px solid #ddd;
        font-size: 14px;
        background-color: #fff;
        outline: none;
        height: 42px;
        color: #333;
    }

    .chat-input-container button {
        position: absolute;
        right: 24px;
        background: none;
        border: none;
        color: #ffbd31;
        font-size: 20px;
        cursor: pointer;
    }

        .chat-input-container button i.bi-send {
            transform: rotate(-45deg);
        }

/* === Responsive === */
@media (max-width: 600px) {
    .chat-header {
        font-size: 16px;
        padding: 12px;
    }

    .chat-input-container input {
        font-size: 13px;
        padding: 8px 12px;
    }

    .message-bubble {
        font-size: 13px;
        padding: 8px 10px;
    }
}


/* === Responsive === */
@media (max-width: 600px) {
    .chat-header {
        font-size: 16px;
        padding: 12px;
    }

    .chat-input-container input {
        font-size: 13px;
        padding: 8px 12px;
    }

    .message-bubble {
        font-size: 13px;
        padding: 8px 10px;
    }
}


/* CAROUSEL ARROWS — Small, centered, and subtle */
#pendingRideCarousel .carousel-control-prev,
#pendingRideCarousel .carousel-control-next {
    top: 40%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    z-index: 10;
}

/* Icon styles */
#pendingRideCarousel .carousel-control-prev-icon,
#pendingRideCarousel .carousel-control-next-icon {
    background-color: #000;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#pendingRideCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#pendingRideCarousel .carousel-control-next:hover .carousel-control-next-icon {
    opacity: 0.3;
}

/* DOT INDICATORS */
#pendingRideCarousel .carousel-indicators.bottom-indicators {
    justify-content: center;
    position: static;
    margin-top: 10px;
}

    #pendingRideCarousel .carousel-indicators.bottom-indicators [data-bs-target] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #999;
        opacity: 0.4;
        margin: 0 4px;
        transition: opacity 0.3s ease;
    }

    #pendingRideCarousel .carousel-indicators.bottom-indicators .active {
        background-color: #000;
        opacity: 1;
    }

/* ✅ Animated Border for Ongoing Ride Badge */
.ongoing-badge-wrapper {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 28px;
    border-radius: 14px;
    background-color: #fff;
    overflow: visible;
}

.ongoing-badge-text {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #198754;
}

/* SVG Animated border */
.ongoing-badge-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 28px;
    z-index: 0;
}

    .ongoing-badge-border rect {
        fill: none;
        stroke: #198754;
        stroke-width: 2;
        stroke-dasharray: 200;
        stroke-dashoffset: 0;
        animation: dashBorder 2s linear infinite;
        stroke-linecap: round;
        rx: 14;
        ry: 14;
    }

@keyframes dashBorder {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -200;
    }
}



/* // rating popup styling // */
/* === RATING POPUP OVERLAY === */
.rating-popup-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* === CARD === */
.rating-card {
    background-color: #fff;
    border-radius: 24px;
    padding: 2rem 1.5rem;
    max-width: 343px;
    width: 100%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: center;
}

/* === CLOSE BUTTON === */
.btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1.2rem;
    border: none;
    background: transparent;
    color: #000;
    cursor: pointer;
}

/* === TITLES === */
.rate-title {
    font-size: 18px; /* 🔼 increased */
    font-weight: 700; /* 🔼 bolder */
    color: #1A1A1A;
    margin-bottom: 8px;
}

.fare-amount {
    font-size: 32px; /* 🔼 increased */
    font-weight: 800; /* 🔼 heavier */
    color: #1A1A1A;
}

.fare-subtext {
    font-size: 16px; /* 🔼 increased */
    font-weight: 600; /* 🔼 heavier */
    color: #4A4A4A;
    margin-bottom: 14px;
}

/* === IMAGE === */
.driver-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #E0E0E0;
}

/* === DRIVER NAME === */
.driver-name-text {
    font-size: 18px; /* 🔼 increased */
    font-weight: 700; /* 🔼 bolder */
    color: #1A1A1A;
    margin-bottom: 12px;
}

/* === RATING LABEL === */
.rating-label {
    font-size: 16px; /* 🔼 increased */
    font-weight: 600; /* 🔼 heavier */
    color: #4A4A4A;
    margin-bottom: 10px;
}

/* === STARS === */
.rating-stars .star {
    font-size: 2.2rem; /* 🔼 increased */
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s ease;
    font-weight: bold; /* ⬅ Make stars look thicker if font allows */
}

    .rating-stars .star.selected {
        color: #FECE22; /* ✅ highlighted yellow */
    }

/* === BUTTONS === */
.button-row {
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
    gap: 16px;
}

/* ✅ SKIP & SUBMIT BUTTONS */
.skip-btn,
.submit-btn {
    background-color: #FECE22;
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1rem;
    width: 140px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}

    .skip-btn:hover,
    .submit-btn:hover {
        background-color: #f4c018;
    }

/* === MOBILE RESPONSIVE === */
@media (max-width: 480px) {
    .rating-card {
        padding: 1.2rem;
    }

    .rating-stars .star {
        font-size: 2rem;
    }

    .skip-btn,
    .submit-btn {
        font-size: 15px;
        height: 50px;
    }
}

/*//schedule  ride card //*/

/* Updated Schedule Ride Popup Styles */

.book-ride-wrapper {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.map-fullscreen {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.popup-card {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px;
    z-index: 10;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.popup-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

.popup-next {
    background: linear-gradient(90deg, #FFC527, #F8A917);
    color: #000;
    border: none;
    border-radius: 25px;
    width: 100%;
    padding: 14px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 18px;
}

.form-control {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 15px;
    background: #fefefe;
}

    .form-control::placeholder {
        color: #999;
        font-size: 14px;
    }

.repeat-section {
    margin-top: 10px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-bottom: 20px;
}

.repeat-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
    color: #444;
}

.repeat-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.repeat-label {
    flex: 1 1 45%;
    background: #fff;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: all 0.2s ease-in-out;
}

    .repeat-label:hover {
        border-color: #ffc107;
        background-color: #fff8e1;
    }

    .repeat-label input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

/* AM/PM hint for time input */
.time-hint {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
    margin-left: 4px;
}

/* Success Popup */
/* Fullscreen Overlay */
/* Overlay */
.schedule-popup-active-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6); /* semi-transparent */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blur background */
.blurred {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
    opacity: 0.4;
}

/* Slide animation */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.schedule-popup.d-none {
    display: none;
}

#scheduleSuccessPopup .popup-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center vertically */
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 300px; /* Fixed width */
    height: 300px; /* Fixed height to make it square */
    text-align: center;
    animation: slideUp 0.4s ease-out;
}


.schedule-popup .msg {
    font-size: 14.5px;
    margin-bottom: 12px;
    font-weight: 500;
    color: #333;
}

.schedule-popup .auto-img {
    width: 80px;
    margin-bottom: 12px;
}

#scheduleSuccessPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

.view-ride-btn {
    background-color: #ffc107;
    color: #000;
    border: none;
    padding: 10px 22px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: background-color 0.2s ease;
}

    .view-ride-btn:hover {
        background-color: #ffb300;
    }


/* === Search Location UI - Modern & User-Friendly === */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Segoe UI', sans-serif;
    overflow: auto;
    background: #f9f9f9;
}

.map-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.back-on-map-text {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #f4b601;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.location-popup-card {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #eee;
}

.location-fields .field {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 14px;
    gap: 10px;
    background: transparent; /* 🔸 Remove background box */
    border: none; /* 🔸 Remove border lines */
    padding: 0; /* 🔸 Remove padding */
}

.autocomplete-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.location-fields input {
    flex: 1;
    padding: 10px 40px 10px 14px;
    border: none;
    border-radius: 12px;
    background: #fff;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    outline: none;
}

    .location-fields input:focus {
        outline: none;
        box-shadow: 0 0 0 2px #f4b601;
    }


    /* 🔹 Placeholder (watermark) text color */
    .location-fields input::placeholder {
        color: #b0b0b0; /* light grey */
        opacity: 1; /* ensure full color visibility */
    }

/* Autocomplete List Styles */
.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: white;
    width: 100%;
    list-style: none;
    margin-top: 2px;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

    .autocomplete-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        font-size: 0.88rem;
        color: #333;
    }

        .autocomplete-list li:last-child {
            border-bottom: none;
        }

        .autocomplete-list li:hover {
            background-color: #f8f9fa;
        }

/* Icon Style */
.autocomplete-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Text Wrapper */
.autocomplete-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}

.autocomplete-title {
    font-weight: 600;
    color: #111;
    font-size: 0.92rem;
}

.autocomplete-subtitle {
    font-size: 0.82rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;        /* ⬅️ Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}


.dot.green,
.dot.red {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}

.dot.green {
    background: green;
}

.dot.red {
    background: red;
}

.clear-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 1.2rem;
    z-index: 5;
    background: white;
    padding: 0 6px;
    border-radius: 50%;
    transition: color 0.2s;
}

    .clear-icon:hover {
        color: #000;
    }

/* Use My Location Button */
.use-location-btn {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffc107;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.95rem;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Hidden utility */
.hidden {
    display: none !important;
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
    .location-popup-card {
        width: 94%;
        top: 20px;
        padding: 14px;
    }

    .back-on-map {
        top: 14px;
        left: 14px;
    }

    .back-circle {
        font-size: 1.1rem;
        padding: 9px;
    }
}

/* 💻 Desktop Width Limit */
@media (min-width: 768px) {
    .location-popup-card,
    .use-location-btn {
        max-width: 430px;
        left: 50%;
        transform: translateX(-50%);
    }
}

#close-cab-popup {
    position: absolute;
    top: 10px; /* adjust vertical position */
    right: 10px; /* adjust horizontal position */
    border: none;
    background: none; /* no background */
    color: #333; /* normal gray cross */
    font-size: 28px !important; /* slightly smaller */
    font-weight: bold;
    cursor: pointer;
    padding: 6px 10px; 
    border-radius: 50%;
    z-index: 1000;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
}

    #close-cab-popup:hover {
        color: #000;
        background: rgba(0,0,0,0.05);
    }




/* General style for the drag label */
.info-bubble {
    font-size: 10px;
    padding: 2px 2px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
    margin: 0;
    line-height: 1.2;
    animation: bounceIn 0.6s ease;
}

    /* Pickup = bright green */
    .info-bubble.pickup {
        background-color: #28a745; /* Bootstrap-style green */
    }

    /* Drop = bright red */
    .info-bubble.dropoff {
        background-color: #dc3545; /* Bootstrap-style red */
    }

/* Remove padding and white background from InfoWindow container */
.gm-style-iw {
    background: transparent !important;
    box-shadow: none !important;
}

.gm-style-iw-d {
    padding: 0 !important;
    background: transparent !important;
}

/* Remove the close button (X) */
.gm-style-iw button[title="Close"] {
    display: none !important;
}

/* Hide InfoWindow arrow */
.gm-style .gm-style-iw-t::after {
    display: none !important;
}

/* One-time bounce animation */
@keyframes bounceIn {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    50% {
        transform: translateY(3px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
    }
}
/* Kill all background, borders, shadows forcefully */
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-d,
.gm-style .gm-style-iw {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Kill arrow (white tail under bubble) */
.gm-style .gm-style-iw-t::after,
.gm-style .gm-style-iw-t::before {
    display: none !important;
    background: transparent !important;
    border: none !important;
}

/* Hide inner unwanted remnants */
.gm-style-iw-d > div {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.timer-text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
    text-align: center;
}



#vowsAlertModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#vowsAlertModal .vows-modal-box {
    background: #fff;
    padding: 20px 16px;
    border-radius: 12px;
    max-width: 280px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.vows-modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

#vowsAlertMessage {
    font-size: 0.95rem;
    color: #000; /* Dark black */
    margin-bottom: 16px;
}


.vows-modal-btn {
    padding: 8px 20px;
    background-color: #ffc107;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

    .vows-modal-btn:hover {
        background-color: #e5ac06;
    }


   /* //location aceess//*/

.location-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.location-modal-box {
    background: white;
    padding: 24px 20px;
    border-radius: 14px;
    max-width: 320px;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

    .location-modal-box .modal-title {
        font-size: 1.2rem;
        margin-bottom: 12px;
        color: #222;
        font-weight: 600;
    }

    .location-modal-box .modal-text {
        font-size: 0.95rem;
        color: #555;
        margin-bottom: 20px;
    }

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.modal-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
}

    .modal-btn.primary {
        background-color: #f4b601;
        color: white;
    }

    .modal-btn.secondary {
        background-color: #fff;
        color: #333;
        border: 1px solid #ccc;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

        .modal-btn.secondary:hover {
            background-color: #f5f5f5;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
        }


/*//otp cshtml//*/

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: white;
    font-family: 'Poppins', sans-serif;
}

.otp-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px;
    width: 100%;
    padding: 30px;
    text-align: center;
}

.otp-header h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

.otp-header p {
    font-size: 14px;
    color: #555;
    margin-bottom: 30px;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 8px; /* Reduced gap between inputs */
    margin-bottom: 20px;
}

    .otp-inputs input {
        width: 50px;
        height: 60px;
        text-align: center;
        font-size: 24px;
        border: 1px solid #ccc;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transition: transform 0.1s ease;
    }

        .otp-inputs input:focus {
            outline: none;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
        }

.resend {
    display: block;
    font-size: 14px;
    color: #888;
    margin-bottom: 30px;
    text-decoration: none;
}

.verify-button {
    width: 100%;
    background: linear-gradient(to right, #f9b233, #f7931e);
    border: none;
    color: white;
    font-weight: bold;
    padding: 12px;o
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
}

/* BACK BUTTON (outline like verify color but not filled) */
.back-outline-button {
    width: 100%;
    background: transparent;
    border: 2px solid #f9b233; /* same color as verify gradient start */
    color: #f9b233;
    font-weight: bold;
    padding: 12px;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 15px;
    transition: 0.2s ease;
}

    /* Hover effect (light orange fill) */
    .back-outline-button:hover {
        background: rgba(249, 178, 51, 0.15);
    }
 
/* Highlight Resend OTP when timer expires */

.resend.active-resend {
    color: #f7931e; /* bright orange like verify button */
    font-weight: bold;
    text-decoration: underline;
    animation: blink 1s infinite;
}

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

@keyframes blink {
    50% {
        opacity: 0.5;
    }
}
.slide-btn-wrapper {
    width: 100%;
    margin-top: 20px;
}

.slide-button {
    position: relative;
    border-radius: 50px;
    height: 55px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.slide-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
}

.slide-handle {
    position: absolute;
    left: 6px;
    left: 6px;
    top: 4px; /* start from top, same as button height */
    height: 46px; /* same as button height */
    width: 46px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out;
}

.arrow-icon {
    font-size: 18px;
    font-weight: 700;
    margin-left: 2px;
}

/* Slide hint animation */
@keyframes slideHint {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(12px);
    }

    60% {
        transform: translateX(0);
    }

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

.slide-button.completed .slide-handle {
    animation: none;
}

/* OTP Slide Button Style */
#otpSlideWrapper .slide-button {
    background: linear-gradient(to right, #f9b233, #f7931e);
}

#otpSlideWrapper .slide-text {
    color: white;
}

#otpSlideWrapper .slide-handle {
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
}

#otpSlideWrapper .arrow-icon {
    color: black;
}

/* Back Slide Button Style */
#backSlideWrapper .slide-button.back-slide {
    background: transparent;
    border: 2px solid #f9b233; /* original outline */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#backSlideWrapper .slide-text {
    color: #f9b233; /* original text color */
}

#backSlideWrapper .slide-handle {
    background: linear-gradient(145deg, rgba(255,255,255,0.9), #FFFBCC 80%);
    right: 6px; /* start from right */
    left: auto;
}

#backSlideWrapper .arrow-icon {
    color: #f9b233; /* arrow color */
    margin-left: 0;
}



/* Shared Modal Styles */
#vowsAlertModal,
#exitConfirmModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.vows-modal-box {
    background: #fff;
    padding: 20px 24px;
    border-radius: 12px;
    width: 85%;
    max-width: 300px;
    text-align: center;
    animation: fadeIn 0.3s ease-out;
}

.vows-modal-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 12px;
}

.vows-modal-btn {
    margin-top: 12px;
    background: #f8a917;
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
}

.exit-modal-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
}

.exit-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

    .exit-btn.cancel {
        background: #ccc;
        color: #000;
    }

    .exit-btn.confirm {
        background: #ff4d4f;
        color: #fff;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*//internet offline modal//*/

/* Native focus style */
#pickup-location:focus {
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(244, 182, 1, 0.6) !important; /* softer glow */
}

/* Fallback */
#pickup-location.force-focus {
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(244, 182, 1, 0.6) !important;
}


/* Disable text selection globally except input/textarea */
/* Disable text selection globally except input/textarea */
* {
    -webkit-user-select: none;
    user-select: none;
}

input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

/*Searching Popup with Countdown cancle button*/
/* Wrapper */
.slide-cancel-wrapper {
    width: 100%;
    margin-top: 20px;
}

/* Base Button (same color as your original cancel button) */
.slide-cancel-btn {
    position: relative;
    height: 55px;
    width: 100%;
    border-radius: 50px;
    background: linear-gradient(145deg, #ffe066, #ffd33d); /* SAME COLOR */
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.slide-cancel-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 15px;
    pointer-events: none;
}


/* Handle */
.slide-cancel-handle {
    position: absolute;
    left: 6px;
    top: 4px;
    height: 42px;
    width: 42px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 8px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out;
}


/* Arrow Icon */
.arrow-icon {
    font-size: 17px;
    font-weight: 500;
    color: #1a1a1a;
}

/* Small slide hint animation */
@keyframes slideHint {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(12px);
    }

    60% {
        transform: translateX(0);
    }

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

/* BACK SLIDER BUTTON (white background + yellow border like your Back button) */
.slide-back-btn {
    position: relative;
    height: 55px;
    width: 100%;
    border-radius: 50px;
    background: transparent;
    border: 2px solid #f9b233; /* Yellow outline */
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Back text */
.slide-back-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #f9b233;
    font-weight: 600;
    font-size: 15px;
    pointer-events: none;
}

/* Handle same as login circle */
.slide-back-handle {
    position: absolute;
    right: 6px; /* start from right */
    top: 4px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* softer white-yellow gradient (back button theme) */
    background: linear-gradient(145deg, rgba(255,255,255,0.95), #FFF5C2 80%);
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.6), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHintBack 1.8s infinite ease-in-out;
}

/* Arrow */
.slide-back-btn .arrow-icon {
    font-size: 18px;
    font-weight: bold;
    color: #f9b233;
}

/* Slide hint animation (right to left) */
@keyframes slideHintBack {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(-12px);
    }
    /* nudge left */
    60% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(0);
    }
}
/* ============================
   CANCEL POPUP SLIDER
   ============================ */

.cancel-slide-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 15px;
}

.cancel-slide-btn {
    position: relative;
    width: 100%;
    height: 55px;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.cancel-slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
}

/* ========== HANDLE (OTP clone) ========== */
.cancel-slide-handle {
    position: absolute;
    top: 4px;
    left: 6px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out;
}

/* Slide hint animation (OTP same) */
@keyframes slideHint {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(12px);
    }

    60% {
        transform: translateX(0);
    }

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

.cancel-arrow {
    font-size: 18px;
    font-weight: bold;
}

/* ========== FILLED SLIDER (same as OTP Verify) ========== */
.cancel-slide-btn.filled {
    background: linear-gradient(to right, #f9b233, #f7931e);
}

    .cancel-slide-btn.filled .cancel-slide-text {
        color: white;
    }

    .cancel-slide-btn.filled .cancel-slide-handle {
        background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    }

    .cancel-slide-btn.filled .cancel-arrow {
        color: #000;
    }


/* ========== OUTLINE SLIDER (same as OTP BACK) ========== */
.cancel-slide-btn.outline {
    background: transparent;
    border: 2px solid #f9b233;
}

    .cancel-slide-btn.outline .cancel-slide-text {
        color: #f9b233;
    }

    .cancel-slide-btn.outline .cancel-slide-handle {
        background: linear-gradient(145deg, rgba(255,255,255,0.9), #FFFBCC 80%);
    }

    .cancel-slide-btn.outline .cancel-arrow {
        color: #f9b233;
    }


/* PAGE SPECIFIC – CANCEL SLIDERS */
#continueSlideWrapper .slide-button,
#doneSlideWrapper .slide-button {
    background: linear-gradient(to right, #f9b233, #f7931e);
}

#continueSlideWrapper .slide-text,
#doneSlideWrapper .slide-text {
    color: white;
}

#continueSlideWrapper .slide-handle,
#doneSlideWrapper .slide-handle {
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
}


/* ================= OTP-Style Slide Buttons for Modals ================= */

.cancel-slide-container {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* buttons ke beech gap */
}

/* Slider button base */
.cancel-slide-btn {
    position: relative;
    border-radius: 50px;
    height: 55px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    background: linear-gradient(to right, #f9b233, #f7931e); /* OTP yellow gradient */
}

/* Slider text */
.cancel-slide-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Slider handle */
.cancel-slide-handle {
    position: absolute;
    top: 4px;
    left: 6px; /* start left by default */
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out;
    transition: 0.2s ease;
}

/* Slide hint animation */
@keyframes slideHint {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(12px);
    }

    60% {
        transform: translateX(0);
    }

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

/* Stop animation when completed */
.cancel-slide-btn.completed .cancel-slide-handle {
    animation: none;
}

/* Danger slider (for cancel) */
.cancel-slide-btn.danger {
    background: linear-gradient(to right, #f9b233, #f7931e);
}

/* Back/GoBack sliders – Right to Left */
.cancel-slide-btn.back-slide {
    background: transparent;
    border: 2px solid #f9b233;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

    .cancel-slide-btn.back-slide .cancel-slide-text {
        color: #f9b233;
    }

    .cancel-slide-btn.back-slide .cancel-slide-handle {
        left: auto;
        right: 6px;
        background: linear-gradient(145deg, rgba(255,255,255,0.9), #FFFBCC 80%);
    }

.cancel-slide-btn .arrow-icon {
    font-size: 18px;
    font-weight: 700;
    color: black;
}

.cancel-slide-btn.back-slide .arrow-icon {
    margin-left: 0;
    color: #f9b233;
}


/* ================= OTP-Style Slide Button for Report Issue ================= */
#reportIssueModal .cancel-slide-container {
    width: 100%;
    margin-top: 20px;
}

#reportIssueModal .cancel-slide-btn {
    position: relative;
    border-radius: 50px;
    height: 55px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    background: linear-gradient(to right, #f9b233, #f7931e); /* OTP yellow gradient */
}

#reportIssueModal .cancel-slide-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#reportIssueModal .cancel-slide-handle {
    position: absolute;
    top: 4px;
    left: 6px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out;
    transition: 0.2s ease;
}

#reportIssueModal .cancel-slide-btn.completed .cancel-slide-handle {
    animation: none;
}

#reportIssueModal .cancel-slide-btn .arrow-icon {
    font-size: 18px;
    font-weight: 700;
    color: black; /* arrow black for submit button */
}

/* ============================================
   COMMON SLIDE STYLES FOR CAB POPUP ONLY
   (Matches OTP Page)
   ============================================ */
#cab-popup .slide-btn-wrapper {
    width: 100%;
    margin-top: 20px;
}

#cab-popup .slide-button {
    position: relative;
    border-radius: 50px;
    height: 55px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

#cab-popup .slide-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
}

#cab-popup .slide-handle {
    position: absolute;
    left: 6px;
    top: 4px;
    height: 46px;
    width: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
    animation: slideHint 1.8s infinite ease-in-out;
    transition: transform 0.2s;
}

#cab-popup .arrow-icon {
    font-size: 18px;
    font-weight: 700;
    margin-left: 2px;
}

/* Animation */
@keyframes slideHint {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(12px);
    }

    60% {
        transform: translateX(0);
    }

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

/* ============================================
   BOOK NOW SPECIFIC COLORS
   ============================================ */
#bookNowSlideWrapper .slide-button {
    background: linear-gradient(to right, #ffd33d, #f4b601);
}

#bookNowSlideWrapper .slide-text {
    color: #1a1a1a;
}

#bookNowSlideWrapper .slide-handle {
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
}

/* ============================================
   SCHEDULE RIDE SPECIFIC COLORS (WHITE + ORANGE OUTLINE)
   ============================================ */
#scheduleSlideWrapper .slide-button {
    background: white; /* white button */
    border: 2px solid #f9b233; /* orange outline */
}

#scheduleSlideWrapper .slide-text {
    color: #f9b233; /* orange text */
}

#scheduleSlideWrapper .slide-handle {
    
    background: linear-gradient(145deg, rgba(255,255,255,0.9), #FFFBCC 80%);
    border: none; /* no outline */
}

#scheduleSlideWrapper .arrow-icon {
    color: #f9b233; /* orange arrow */
}

/* Vertical stack inside popup */
#cab-popup .button-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

/* Hide original logic buttons */
#book-now-btn,
#schedule-ride-btn {
    display: none !important;
}

/* ============================================
   SCHEDULE RESERVE SLIDER (UNIQUE, NO CONFLICT)
   ============================================ */

/* Main button background (white + orange border) */
.schedule-reserve-slide {
    background: linear-gradient(to right, #ffd33d, #f4b601);
    border: 2px solid #f9b233; /* orange border */
    position: relative;
    border-radius: 50px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Slide text */
    .schedule-reserve-slide .slide-text {
        color: #1a1a1a;
        font-weight: 600;
        font-size: 16px;
        pointer-events: none;
    }

    /* Handle (circle) — pure orange, NO outline */
    .schedule-reserve-slide .slide-handle {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
        position: absolute;
        left: 4px;
        top: 2px;
        top: 2px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .schedule-reserve-slide .arrow-icon {
        color: black;
        font-size: 20px;
        font-weight: bold;
    }


/* Overlay for retry popup */
#no-driver-popup.searching-screen {
    display: none; /* hide initially */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* Dark overlay */
    z-index: 99999;
    /* Center popup flexibly */
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center; /* vertical center */
}

/* Inner retry box */
#no-driver-popup .searching-box {
    background: #fff;
    border-radius: 20px;
    padding: 25px 30px;
    width: 90%;
    max-width: 400px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center of content */
    align-items: center; /* horizontal center of content */
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    text-align: center;
}

/* Close button */
#no-driver-popup .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #555;
}

/* Slider wrapper */
#retrySlideWrapper {
    width: 100%;
    margin-top: 20px;
}

/* Main slider button */
/* Main slider button */
.retry-slide {
    background: linear-gradient(to right, #ffd33d, #f4b601);
    border: none; /* remove orange outline */
    position: relative;
    border-radius: 50px;
    height: 50px; /* height of slider */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0; /* vertical padding so handle has space top & bottom */
}

    /* Slide text */
    .retry-slide .slide-text {
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        pointer-events: none;
    }

    /* Handle (circle) */
    .retry-slide .slide-handle {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
        position: absolute;
        left: 4px;
        top: 4px;
        transform: translateY(-50%); /* vertical center */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Arrow inside handle */
    .retry-slide .arrow-icon {
        color: white;
        font-size: 20px;
        font-weight: bold;
    }

.slide-cancel-wrapper {
    width: 100%;
    margin-top: 20px;
}

.slide-cancel-btn {
    position: relative;
    border-radius: 50px;
    height: 55px;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to right, #f9b233, #f7931e);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.slide-cancel-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 16px;
    color: white;
    pointer-events: none;
}

.slide-cancel-handle {
    position: absolute;
    left: 6px; /* start from left */
    top: 4px;
    height: 46px;
    width: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFD34A, #E0A300 80%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.25);
}

    .slide-cancel-handle .arrow-icon {
        font-size: 18px;
        font-weight: 700;
    }