/* Extracted from resources/views/front/pages/city_route_page.blade.php
 * Block #2. Content is verbatim - no rules were added,
 * removed or reordered, so rendering is unchanged.
 */

.rtcard-wrapper {
          position: relative;
          display: flex;
          align-items: center;
          gap: 18px;
          padding: 26px 60px;
          background:
            radial-gradient(circle at 20% 0%, #2f9bff 0%, transparent 60%),
            linear-gradient(135deg, #1f8df0 0%, #1666c9 100%);
          /* faint "+" texture like the original */
          background-image:
            radial-gradient(circle at 20% 0%, #2f9bff 0%, transparent 60%),
            linear-gradient(135deg, #1f8df0 0%, #1666c9 100%),
            repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
            repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
          overflow: hidden;
          font-family: "Segoe UI", system-ui, sans-serif;
        }
        
        .rtcard-track {
          display: flex;
          gap: 22px;
          flex: 1;
        }
        
        .rtcard-item {
          flex: 1;
          padding: 22px 26px;
          border-radius: 16px;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.18);
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
        }
        
        .rtcard-label {
          display: inline-block;
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 1.5px;
          color: rgba(255, 255, 255, 0.85);
          margin-bottom: 8px;
        }
        
        /* the highlighted "DISTANCE" chip on the first card */
        .rtcard-label-hl {
          background: rgba(255, 255, 255, 0.22);
          padding: 2px 6px;
          border-radius: 4px;
        }
        
        .rtcard-value {
          margin: 0 0 10px;
          font-size: 34px;
          font-weight: 800;
          line-height: 1.05;
          color: #ffffff;
        }
        
        .rtcard-sub {
          margin: 0;
          font-size: 15px;
          color: rgba(255, 255, 255, 0.7);
        }
        
        /* circular navigation buttons */
        .rtcard-nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 38px;
          height: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 50%;
          background: #1c2330;
          color: #ffffff;
          cursor: pointer;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
          transition: background 0.2s ease, transform 0.2s ease;
          z-index: 2;
        }
        
        .rtcard-nav:hover { background: #2a3344; }
        .rtcard-nav:active { transform: translateY(-50%) scale(0.92); }
        
        .rtcard-nav--prev { left: 14px; }
        .rtcard-nav--next { right: 14px; }
        
        /* responsive: stack cards on small screens */
        @media (max-width: 720px) {
          .rtcard-track { flex-direction: column; }
          .rtcard-wrapper { padding: 22px 50px; }
        }