/* ==========================================================================
   SELF-DRIVE GRID & SEARCH RESULTS
   ========================================================================== */
.gyt-cars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.gyt-car-card { background: #fff; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #f0f0f0; transition: transform 0.3s; display: flex; flex-direction: column; }
.gyt-car-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.gyt-car-img-wrap { position: relative; height: 220px; background: #f8fafc; }
.gyt-car-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.gyt-sticker { position: absolute; top: 15px; left: 15px; background: linear-gradient(135deg, #ff8a00, #e52e71); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.gyt-car-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.gyt-car-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.gyt-car-title { font-size: 18px; font-weight: 700; color: #1a202c; margin: 0; }
.gyt-car-rating { font-size: 13px; color: #f6ad55; font-weight: bold; }
.gyt-car-specs { display: flex; gap: 15px; font-size: 13px; color: #718096; margin-bottom: 10px; }
.gyt-car-min-days { font-size: 13px; color: #718096; margin-bottom: 15px; }
.gyt-car-price-row { border-top: 1px solid #edf2f7; padding-top: 15px; margin-bottom: 20px; margin-top: auto; }
.gyt-base-price { font-size: 18px; font-weight: 700; color: #2d3748; }
.gyt-total-price { font-size: 14px; color: #1a202c; font-weight: 700; margin-top: 5px; }
.gyt-car-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gyt-action-btn { padding: 12px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; display: flex; justify-content: center; align-items: center; gap: 6px; transition: 0.2s; cursor: pointer; }
.gyt-btn-wa { background: #1ebd57; color: #fff; border: 1px solid #1ebd57; }
.gyt-btn-wa:hover { background: #128c7e; color: #fff; }
.gyt-btn-book { background: #3b71ca; color: #fff; border: 1px solid #3b71ca; }
.gyt-btn-book:hover { background: #2c5aa7; color: #fff; }

/* ==========================================================================
   SELF-DRIVE CHECKOUT PAGE
   ========================================================================== */
.gyt-chk-wrapper { max-width: 1400px; margin: 40px auto; font-family: 'inter', sans-serif; display: flex; gap: 30px; align-items: flex-start; }
.gyt-chk-left { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.gyt-chk-right { width: 360px; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; background: #fff; border-radius: 12px; padding-bottom: 12px; }
.gyt-box { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.03); padding: 25px; border-radius: 16px;}
.gyt-box-title { font-size: 18px; font-weight: 700; color: #1a202c; margin: 0 0 20px 0; border-bottom: 1px solid #edf2f7; padding-bottom: 15px; }

.gyt-car-img-box { width: 220px; flex-shrink: 0; text-align: center; }
.gyt-car-img-box img { width: 100%; object-fit: contain; min-height: 163px;}
.gyt-car-info { flex: 1; }
.gyt-trip-type { display: inline-block; background: #e0e7ff; color: #2c6df4; font-size: 11px; font-weight: 700; padding: 4px 15px; border-radius: 4px; margin-bottom: 15px;}
.gyt-route-grid { display: flex; background: #e0e7ff99; border-radius: 6px; border: 1px solid #edf2f7; padding: 15px; margin-bottom: 15px; }
.gyt-route-col { flex: 1; }
.gyt-route-col:last-child { border-left: 1px solid #edf2f7; padding-left: 20px; margin-left: 20px; }
.gyt-route-col span.lbl { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #a0aec0; margin-bottom: 5px; }
.gyt-route-col strong { display: block; font-size: 14px; color: #1a202c; margin-bottom: 5px; }
.gyt-route-col span.dt { font-size: 12px; color: #718096; }
.gyt-amenities { display: flex; flex-wrap: wrap; gap: 8px; }
.gyt-amenity { border: 1px solid #edf2f7; color: #4a5568; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; background: #aeaeae33; }

/* Checkout Form */
.gyt-form-row { display: flex; gap: 15px; margin-bottom: 15px; }
.gyt-form-group { flex: 1; display: flex; flex-direction: column; position: relative; }
.gyt-form-group label { font-size: 12px; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
.gyt-form-group input { padding: 12px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; color: #1a202c; background: #f8fafc; outline: none; width: 100%; box-sizing: border-box;}
.gyt-form-group input:focus { border-color: #3b71ca; background: #fff; }
.gyt-pwd-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.gyt-phone-wrapper { display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 4px; background: #f8fafc; overflow: hidden; }
.gyt-phone-prefix { padding: 12px; border-right: 1px solid #e2e8f0; font-size: 14px; font-weight: 600; color: #4a5568; background: #edf2f7; }
.gyt-phone-wrapper input { border: none !important; border-radius: 0 !important; background: transparent !important; flex: 1; }

/* Payment & Sidebar */
.gyt-btn-pay { background: #dbac62; color: #fff; border: none; padding: 15px; border-radius: 4px; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; transition: 0.3s; margin-bottom: 15px; }
.gyt-btn-pay:hover:not(:disabled) { background: #c79c59; }
.gyt-btn-pay:disabled { background: #a0aec0; cursor: not-allowed; }
.gyt-pay-amount-box { border: 1px solid #dbac6287; border-radius: 6px; padding: 15px; background: #fff7ed; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
.gyt-pay-amount-box div strong { display: block; font-size: 14px; color: #1a202c; margin-bottom: 3px; }
.gyt-pay-amount-box div span { font-size: 11px; color: #718096; }
.gyt-pay-amount-box .price { font-size: 16px; font-weight: 700; color: #1a202c; }
.gyt-total-row { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; color: #1a202c; margin-bottom: 5px; }

/* OTP & Gateway */
.gyt-otp-section { display: none; flex-direction: column; align-items: center; background: #fffbeb; border: 1px dashed #d97706; padding: 20px; border-radius: 8px; margin-top: 15px; margin-bottom: 15px; }
.gyt-otp-boxes { display: flex; gap: 8px; justify-content: center; margin-bottom: 15px; }
.gyt-otp-boxes input { width: 45px; height: 50px; text-align: center; font-size: 20px; font-weight: 700; border: 1px solid #cbd5e1; border-radius: 6px; outline: none; background: #fff; padding: 0 !important;}
.gyt-resend-link { font-size: 13px; color: #ea580c; cursor: pointer; font-weight: 600; }
.gyt-gateway-selectors-box { margin-bottom: 20px; border-top: 1px solid #edf2f7; padding-top: 20px; }
.gyt-gateway-label-capsule { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; }
.gyt-gateway-label-capsule.selected { border-color: #dbac62; background: #fff7ed; border-width: 1px; }

@media (max-width: 991px) {
    .gyt-chk-wrapper { flex-direction: column; }
    .gyt-chk-right { width: 100%; position: relative; top: 0; }
    .gyt-form-row { flex-direction: column; }
    .gyt-car-card { flex-direction: column; }
    .gyt-car-img-box { width: 100%; }
}


/* Car Image Badge for Checkout */
.gyt-car-badge { background: #e0e7ff; color: #4a5568; width: 100%; display: block; padding: 15px 0; border-radius: 8px; font-weight: 700; font-size: 14px; margin-top: 15px; text-transform: uppercase; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Fare Breakup Tooltip Styles */
.gyt-fare-breakup-container { position: relative; display: inline-block; width: 100%; text-align: right; margin-bottom: 20px; }
.gyt-fare-breakup { font-size: 11px; color: #3b71ca; cursor: pointer; display: inline-block; border-bottom: 1px dashed #3b71ca; }
.gyt-fare-breakup-tooltip { visibility: hidden; opacity: 0; position: absolute; top: 100%; right: 0; background-color: #2d3748; color: #fff; padding: 15px; border-radius: 6px; width: 220px; z-index: 99; text-align: left; transition: opacity 0.2s, visibility 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.15); margin-top: 8px; }
.gyt-fare-breakup-tooltip::before { content: ""; position: absolute; bottom: 100%; right: 20px; border-width: 6px; border-style: solid; border-color: transparent transparent #2d3748 transparent; }
.gyt-fare-breakup-container:hover .gyt-fare-breakup-tooltip { visibility: visible; opacity: 1; }
.gyt-tooltip-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; font-weight: normal; color: #fff; }
.gyt-tooltip-row:last-child { margin-bottom: 0; }


/* ==========================================================================
   PROCESSING LOADER OVERLAY
   ========================================================================== */
.gyt-processing-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); z-index: 9999999; display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.gyt-processing-overlay.active { opacity: 1; visibility: visible; }
.gyt-car-loader-wrap { position: relative; width: 250px; height: 120px; margin-bottom: 20px; }
.gyt-car-svg-container { width: 100%; height: 100%; overflow: visible; }
.gyt-car-body { animation: gyt-car-engine-vibrate 0.15s infinite alternate linear; transform-origin: bottom center; }
.gyt-car-wheel { animation: gyt-wheel-rotate 0.4s infinite linear; }
.gyt-wheel-back { transform-origin: 55px 76px; }
.gyt-wheel-front { transform-origin: 195px 76px; }
.gyt-road-track { position: absolute; bottom: 20px; left: 0; width: 100%; height: 4px; background: #cbd5e1; border-radius: 2px; z-index: 1; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.gyt-road-dashed { position: absolute; bottom: 12px; left: 0; width: 100%; height: 4px; background: repeating-linear-gradient(90deg, #94a3b8 0, #94a3b8 20px, transparent 20px, transparent 40px); animation: gyt-road-scroll 0.3s infinite linear; z-index: 2; }
.gyt-processing-text { font-size: 22px; font-weight: 800; color: #1a202c; margin-bottom: 10px; }
.gyt-processing-subtext { font-size: 15px; color: #718096; font-weight: 500; }

@keyframes gyt-car-engine-vibrate {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-2px); }
}
@keyframes gyt-wheel-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes gyt-road-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}