/* Umrah Ride Calculator v1.3 */
/* All rules scoped to #urc-wrap to avoid theme conflicts */

#urc-wrap, #urc-wrap * { box-sizing: border-box !important; }
#urc-wrap { font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important; background: #fff; border-radius: 14px; box-shadow: 0 8px 48px rgba(0,0,0,.14); overflow: hidden; max-width: 860px; margin: 0 auto; border: 1px solid #E8E8E4; }

/* ── STEP HEADER ── */
#urc-wrap .urc-steps-header { display: flex !important; align-items: center !important; background: #071B3C !important; padding: 14px 24px !important; gap: 0 !important; }
#urc-wrap .urc-si { display: flex !important; align-items: center !important; gap: 7px !important; opacity: .3 !important; transition: opacity .3s !important; }
#urc-wrap .urc-si-active { opacity: 1 !important; }
#urc-wrap .urc-si-done   { opacity: .55 !important; }
#urc-wrap .urc-si-num { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: rgba(255,255,255,.15) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: background .3s !important; }
#urc-wrap .urc-si-active .urc-si-num { background: #2E7D32 !important; }
#urc-wrap .urc-si-done   .urc-si-num { background: #22C55E !important; }
#urc-wrap .urc-si-lbl { font-size: 11px !important; color: rgba(255,255,255,.65) !important; white-space: nowrap !important; }
#urc-wrap .urc-si-sep { flex: 1 !important; height: 1px !important; background: rgba(255,255,255,.1) !important; margin: 0 8px !important; min-width: 12px !important; }

/* ── STEPS ── */
#urc-wrap .urc-step { display: none !important; }
#urc-wrap .urc-step-active { display: block !important; }

/* ── STEP HEADER TEXT ── */
#urc-wrap .urc-sh { padding: 22px 24px 0 !important; }
#urc-wrap .urc-sh-tag { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; color: #2E7D32 !important; display: block !important; margin-bottom: 6px !important; }
#urc-wrap .urc-sh h3 { font-family: 'Playfair Display', Georgia, serif !important; font-size: 22px !important; font-weight: 700 !important; color: #111 !important; line-height: 1.25 !important; margin: 0 !important; }
#urc-wrap .urc-sh p { font-size: 13px !important; color: #666660 !important; margin: 5px 0 0 !important; }

/* ── ROUTE STEP ── */
#urc-wrap .urc-route-body { padding: 18px 24px 4px !important; }
#urc-wrap .urc-rg { margin-bottom: 16px !important; }
#urc-wrap .urc-rg-title { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; color: #AAAAA4 !important; background: #F4F4F2 !important; display: inline-block !important; padding: 3px 10px !important; border-radius: 20px !important; margin-bottom: 10px !important; }
#urc-wrap .urc-pills { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

#urc-wrap .urc-pill { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 9px 14px !important; border: 1.5px solid #E8E8E4 !important; border-radius: 24px !important; background: #fff !important; cursor: pointer !important; font-family: 'DM Sans', system-ui, sans-serif !important; transition: border-color .15s, background .15s, transform .12s !important; white-space: nowrap !important; text-align: left !important; line-height: 1 !important; }
#urc-wrap .urc-pill:hover { border-color: #2E7D32 !important; background: rgba(46,125,50,.08) !important; transform: translateY(-1px) !important; }
#urc-wrap .urc-pill-active { border-color: #2E7D32 !important; background: rgba(46,125,50,.08) !important; box-shadow: 0 0 0 3px rgba(46,125,50,.15) !important; }
#urc-wrap .urc-pill-icon { font-size: 15px !important; line-height: 1 !important; }
#urc-wrap .urc-pill-text { font-size: 13px !important; font-weight: 600 !important; color: #111 !important; }
#urc-wrap .urc-pill-time { font-size: 10px !important; color: #AAAAA4 !important; background: #F4F4F2 !important; padding: 2px 7px !important; border-radius: 10px !important; }
#urc-wrap .urc-pill-active .urc-pill-time { background: rgba(46,125,50,.15) !important; color: #2E7D32 !important; }

/* Hajj note */
#urc-wrap .urc-hajj-note { margin: 10px 24px 0 !important; background: #FFFBEB !important; border: 1.5px solid #FCD34D !important; border-radius: 8px !important; padding: 10px 14px !important; font-size: 12px !important; color: #78350F !important; display: none !important; }

/* ── NAV BAR ── */
#urc-wrap .urc-nav { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 18px 24px 22px !important; border-top: 1px solid #E8E8E4 !important; margin-top: 18px !important; }
#urc-wrap .urc-btn-back { padding: 10px 20px !important; border: 1.5px solid #E8E8E4 !important; border-radius: 24px !important; background: transparent !important; color: #666660 !important; font-family: 'DM Sans', system-ui, sans-serif !important; font-size: 13px !important; cursor: pointer !important; transition: all .15s !important; }
#urc-wrap .urc-btn-back:hover { border-color: #AAAAA4 !important; color: #111 !important; }
#urc-wrap .urc-btn-next { padding: 11px 22px !important; background: #071B3C !important; color: #fff !important; border: none !important; border-radius: 24px !important; font-family: 'DM Sans', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: background .15s, transform .12s !important; }
#urc-wrap .urc-btn-next:hover { background: #0B2858 !important; transform: translateY(-1px) !important; }
#urc-wrap .urc-btn-submit { flex: 1 !important; padding: 13px 22px !important; background: #2E7D32 !important; color: #fff !important; border: none !important; border-radius: 24px !important; font-family: 'DM Sans', system-ui, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; transition: background .15s, transform .12s !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#urc-wrap .urc-btn-submit:hover { background: #256B2A !important; transform: translateY(-1px) !important; }
#urc-wrap .urc-btn-submit:disabled { opacity: .55 !important; cursor: not-allowed !important; transform: none !important; }

/* ── VEHICLE HEADER ── */
#urc-wrap .urc-v-header { padding: 14px 24px 10px !important; border-bottom: 1px solid #E8E8E4 !important; }
#urc-wrap .urc-route-summary-bar { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(46,125,50,.08) !important; border: 1px solid rgba(46,125,50,.25) !important; border-radius: 20px !important; padding: 5px 14px !important; font-size: 13px !important; font-weight: 600 !important; color: #111 !important; }

/* ── VEHICLE GRID ── */
#urc-wrap .urc-vehicle-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 12px !important; padding: 18px 24px !important; }
#urc-wrap .urc-vc { border: 1.5px solid #E8E8E4 !important; border-radius: 12px !important; overflow: hidden !important; cursor: pointer !important; transition: border-color .15s, box-shadow .15s, transform .12s !important; position: relative !important; background: #fff !important; }
#urc-wrap .urc-vc:not(.urc-vc-na):hover { border-color: #2E7D32 !important; box-shadow: 0 4px 20px rgba(46,125,50,.15) !important; transform: translateY(-2px) !important; }
#urc-wrap .urc-vc-sel { border-color: #2E7D32 !important; background: rgba(200,164,90,.08) !important; box-shadow: 0 0 0 3px rgba(46,125,50,.15) !important; }
#urc-wrap .urc-vc-na { opacity: .4 !important; cursor: not-allowed !important; }
#urc-wrap .urc-vc-img { height: 108px !important; background: #F4F4F2 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; position: relative !important; }
#urc-wrap .urc-vc-na-tag { position: absolute !important; top: 6px !important; right: 6px !important; background: #EF4444 !important; color: #fff !important; font-size: 9px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 8px !important; }
#urc-wrap .urc-vc-tick { position: absolute !important; top: 8px !important; right: 8px !important; width: 22px !important; height: 22px !important; background: #2E7D32 !important; color: #fff !important; border-radius: 50% !important; font-size: 12px !important; font-weight: 700 !important; display: none !important; align-items: center !important; justify-content: center !important; }
#urc-wrap .urc-vc-sel .urc-vc-tick { display: flex !important; }
#urc-wrap .urc-vc-body { padding: 11px !important; }
#urc-wrap .urc-vc-name { font-size: 13px !important; font-weight: 700 !important; color: #111 !important; margin-bottom: 2px !important; }
#urc-wrap .urc-vc-sub  { font-size: 10px !important; color: #AAAAA4 !important; margin-bottom: 7px !important; line-height: 1.4 !important; }
#urc-wrap .urc-vc-specs { display: flex !important; gap: 8px !important; font-size: 11px !important; color: #666660 !important; margin-bottom: 7px !important; }
#urc-wrap .urc-vc-price { font-size: 15px !important; font-weight: 700 !important; color: #2E7D32 !important; }
#urc-wrap .urc-vc-na-price { font-size: 11px !important; color: #AAAAA4 !important; font-weight: 400 !important; }
#urc-wrap .urc-vc-pp { font-size: 10px !important; color: #AAAAA4 !important; }
#urc-wrap .urc-no-v { padding: 24px !important; text-align: center !important; color: #888 !important; font-size: 14px !important; }
#urc-wrap .urc-no-v a { color: #2E7D32 !important; font-weight: 600 !important; }

/* ── PRICE DISPLAY ── */
#urc-wrap .urc-pd-wrap { background: #071B3C !important; border-radius: 12px !important; padding: 28px !important; text-align: center !important; margin: 18px 24px 12px !important; }
#urc-wrap .urc-pd-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(255,255,255,.4) !important; margin-bottom: 10px !important; }
#urc-wrap .urc-pd-amount { font-family: 'Playfair Display', Georgia, serif !important; font-size: 68px !important; font-weight: 700 !important; color: #2E7D32 !important; line-height: 1 !important; margin-bottom: 8px !important; }
#urc-wrap .urc-pd-amount sup { font-size: 24px !important; font-weight: 400 !important; vertical-align: top !important; margin-top: 14px !important; display: inline-block !important; }
#urc-wrap .urc-pd-unit  { font-size: 13px !important; color: rgba(255,255,255,.35) !important; margin-bottom: 8px !important; }
#urc-wrap .urc-pd-pp    { font-size: 14px !important; color: rgba(255,255,255,.5) !important; margin-bottom: 12px !important; }
#urc-wrap .urc-pd-pp strong { color: rgba(255,255,255,.75) !important; }
#urc-wrap .urc-pd-vname { display: inline-block !important; background: rgba(46,125,50,.15) !important; color: #2E7D32 !important; font-size: 12px !important; font-weight: 600 !important; padding: 4px 14px !important; border-radius: 20px !important; margin-bottom: 18px !important; }
#urc-wrap .urc-pd-caps  { display: flex !important; justify-content: center !important; align-items: center !important; padding-top: 18px !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
#urc-wrap .urc-pd-cap   { flex: 1 !important; text-align: center !important; }
#urc-wrap .urc-pd-cv    { font-size: 20px !important; font-weight: 700 !important; color: #fff !important; }
#urc-wrap .urc-pd-cl    { font-size: 10px !important; color: rgba(255,255,255,.3) !important; margin-top: 3px !important; }
#urc-wrap .urc-pd-div   { width: 1px !important; height: 32px !important; background: rgba(255,255,255,.1) !important; }
#urc-wrap .urc-price-note { margin: 0 24px 12px !important; font-size: 12px !important; color: #AAAAA4 !important; text-align: center !important; background: #F4F4F2 !important; border-radius: 8px !important; padding: 9px !important; }

/* ── PAY LATER ── */
#urc-wrap .urc-pl { display: flex !important; align-items: center !important; gap: 10px !important; background: #F0FDF4 !important; border: 1.5px solid #22C55E !important; border-radius: 8px !important; padding: 11px 16px !important; margin: 0 24px 12px !important; }
#urc-wrap .urc-pl-t { font-size: 13px !important; font-weight: 700 !important; color: #16A34A !important; }
#urc-wrap .urc-pl-s { font-size: 11px !important; color: #15803D !important; }
#urc-wrap .urc-pay-later-slot { display: block !important; }

/* ── FORM ── */
#urc-wrap .urc-form-body { padding: 18px 24px 0 !important; }
#urc-wrap .urc-fg { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 13px !important; margin-bottom: 6px !important; }
#urc-wrap .urc-ff { display: flex !important; flex-direction: column !important; gap: 5px !important; }
#urc-wrap .urc-ff-full { grid-column: 1/-1 !important; }
#urc-wrap .urc-ff label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .4px !important; text-transform: uppercase !important; color: #666660 !important; display: block !important; }
#urc-wrap .urc-req { color: #EF4444 !important; }
#urc-wrap .urc-opt { color: #AAAAA4 !important; font-weight: 400 !important; text-transform: none !important; font-size: 10px !important; }
#urc-wrap .urc-ff input,
#urc-wrap .urc-ff select { border: 1.5px solid #E8E8E4 !important; border-radius: 8px !important; padding: 10px 12px !important; font-family: 'DM Sans', system-ui, sans-serif !important; font-size: 14px !important; color: #111 !important; background: #fff !important; outline: none !important; transition: border-color .15s !important; width: 100% !important; }
#urc-wrap .urc-ff input:focus,
#urc-wrap .urc-ff select:focus { border-color: #2E7D32 !important; }
#urc-wrap .urc-form-error { background: #FEE2E2 !important; border: 1px solid #FECACA !important; color: #991B1B !important; font-size: 13px !important; padding: 10px 14px !important; border-radius: 8px !important; margin: 8px 24px 0 !important; display: none !important; }

/* ── SUMMARY ── */
#urc-wrap .urc-sum-wrap { padding: 18px 24px 0 !important; }
#urc-wrap .urc-summary-card { border: 1px solid #E8E8E4 !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 12px !important; }
#urc-wrap .urc-sr { display: flex !important; justify-content: space-between !important; padding: 10px 16px !important; border-bottom: 1px solid #E8E8E4 !important; font-size: 13px !important; }
#urc-wrap .urc-sr:last-child { border-bottom: none !important; }
#urc-wrap .urc-sr-l { color: #666660 !important; }
#urc-wrap .urc-sr-v { font-weight: 600 !important; color: #111 !important; text-align: right !important; }
#urc-wrap .urc-sr-p { background: rgba(200,164,90,.08) !important; }
#urc-wrap .urc-sr-gold { color: #2E7D32 !important; font-size: 15px !important; }
#urc-wrap .urc-submit-note { text-align: center !important; font-size: 11px !important; color: #AAAAA4 !important; margin: 10px 24px 0 !important; display: block !important; }

/* ── SUCCESS ── */
#urc-wrap .urc-success-screen { text-align: center !important; padding: 52px 24px !important; }
#urc-wrap .urc-success-icon { font-size: 68px !important; margin-bottom: 18px !important; display: block !important; }
#urc-wrap .urc-success-screen h3 { font-family: 'Playfair Display', Georgia, serif !important; font-size: 28px !important; font-weight: 700 !important; color: #111 !important; margin-bottom: 12px !important; }
#urc-wrap .urc-success-screen p { font-size: 15px !important; color: #666660 !important; margin-bottom: 8px !important; line-height: 1.65 !important; }
#urc-wrap .urc-success-screen a { color: #2E7D32 !important; font-weight: 600 !important; }

/* ── RESPONSIVE ── */
@media (max-width: 620px) {
  #urc-wrap .urc-vehicle-grid { grid-template-columns: 1fr 1fr !important; padding: 14px !important; gap: 10px !important; }
  #urc-wrap .urc-vc-img { height: 80px !important; }
  #urc-wrap .urc-fg { grid-template-columns: 1fr !important; }
  #urc-wrap .urc-ff-full { grid-column: 1 !important; }
  #urc-wrap .urc-pd-amount { font-size: 50px !important; }
  #urc-wrap .urc-si-lbl { display: none !important; }
  #urc-wrap .urc-steps-header { padding: 12px 16px !important; }
  #urc-wrap .urc-sh, #urc-wrap .urc-route-body,
  #urc-wrap .urc-nav, #urc-wrap .urc-form-body,
  #urc-wrap .urc-sum-wrap, #urc-wrap .urc-pd-wrap,
  #urc-wrap .urc-pl, #urc-wrap .urc-price-note,
  #urc-wrap .urc-v-header { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 380px) {
  #urc-wrap .urc-vehicle-grid { grid-template-columns: 1fr !important; }
}