/* Modern vehicle card grid — used on select-vehicle.php and fleet.php */

.rc-vehicles-heading {
   font-size: 16px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: #1a1a1a;
   margin: 0 0 12px;
   line-height: 1.3;
}
.rc-vehicles-heading .count {
   color: #1a1a1a;
   font-weight: 800;
}

#isotope-containerx { margin: 0 -10px; }

.car-block.rc-vehicle-card {
   width: 33.333%;
   padding: 10px;
   box-sizing: border-box;
   margin: 0 0 16px;
}
@media (max-width: 992px) {
   .car-block.rc-vehicle-card { width: 50%; }
}
@media (max-width: 600px) {
   .car-block.rc-vehicle-card { width: 100%; }
}

.rc-vehicle-card-inner {
   background: #fff;
   border-radius: 14px;
   padding: 18px 0 18px;
   height: 100%;
   display: flex;
   flex-direction: column;
   transition: transform .15s ease, box-shadow .15s ease;
   overflow: hidden;
}
.rc-vehicle-card-inner > .rc-card-head,
.rc-vehicle-card-inner > .rc-card-specs,
.rc-vehicle-card-inner > .rc-card-footer { padding-left: 20px; padding-right: 20px; }
.rc-vehicle-card-inner:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.rc-card-name {
   font-size: 22px;
   font-weight: 800;
   margin: 0;
   color: #111;
   line-height: 1.2;
}
.rc-card-subtitle {
   font-size: 11px;
   color: #999;
   font-weight: 700;
   letter-spacing: 0.4px;
   margin: 4px 0 0;
   text-transform: uppercase;
}

.rc-card-specs {
   display: flex;
   gap: 6px;
   margin: 14px 0 6px;
   flex-wrap: wrap;
}
.rc-card-specs .spec {
   background: #e3e3e3;
   border-radius: 999px;
   padding: 5px 11px;
   font-size: 11px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: #555;
   white-space: nowrap;
}
.rc-card-specs .spec i {
   font-size: 13px;
   color: #777;
}

.rc-card-image {
   margin: 14px 0 18px;
   width: 100%;
   display: block;
}
.rc-card-image img {
   width: 100%;
   height: auto;
   max-height: 180px;
   object-fit: contain;
   display: block;
   cursor: pointer;
}

.rc-card-footer {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 12px;
   margin-top: auto;
}
.rc-card-price .amount {
   font-size: 26px;
   font-weight: 800;
   color: #111;
   line-height: 1;
   display: inline-block;
}
.rc-card-price .period {
   font-size: 13px;
   color: #555;
   font-weight: 500;
   margin-left: 2px;
}
.rc-card-price .total-tax {
   font-size: 11px;
   color: #888;
   margin-top: 6px;
   font-weight: 500;
   line-height: 1.3;
}

.rc-card-actions {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 6px;
}
.rc-card-select {
   background: #ed7302;
   color: #fff !important;
   border-radius: 8px;
   padding: 10px 24px;
   font-weight: 700;
   font-size: 13px;
   text-decoration: none !important;
   border: none;
   cursor: pointer;
   display: inline-block;
   white-space: nowrap;
   transition: background .15s ease;
   font-family: inherit;
}
.rc-card-select:hover {
   color: #fff !important;
}
.rc-card-quote {
   font-size: 11px;
   color: #1a1a1a;
   font-weight: 600;
   text-decoration: none;
}
.rc-card-quote:hover { text-decoration: underline; color: #1a1a1a; }

/* Hide the old inner block markup if anything remains */
.rc-vehicle-card .autoroyal-vehicle-blockx { display: none !important; }

/* =========================================================================
   Pay Now / Pay Later rate picker — radio-style selector inside vehicle cards.
   Used on the home-page search results (get-vehicles-and-rates.php AJAX).
   ========================================================================= */
.rc-rate-picker {
   margin: 12px 20px 18px;
   border: 1px solid #e2e2e2;
   border-radius: 10px;
   background: #fff;
   overflow: hidden;
}
.rc-rate-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
   border-bottom: 1px solid #f0f0f0;
   font-weight: 700;
   font-size: 14px;
   color: #111;
}
.rc-rate-head i { color: #888; font-size: 12px; }
.rc-rate-body { padding: 6px; }

.rc-rate-option {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 14px;
   border: 1.5px solid transparent;
   border-radius: 8px;
   margin: 4px 0;
   cursor: pointer;
   position: relative;
   transition: border-color .15s ease, background .15s ease;
}
.rc-rate-option:hover { background: #fafafa; }
.rc-rate-option.is-selected {
   border-color: #ed7302;
   background: #fff;
}
.rc-rate-option > input[type="radio"] {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}
.rc-rate-option .radio-mark {
   width: 18px;
   height: 18px;
   border: 2px solid #444;
   border-radius: 50%;
   flex-shrink: 0;
   position: relative;
   background: #fff;
   transition: border-color .15s ease;
}
.rc-rate-option.is-selected .radio-mark { border-color: #111; }
.rc-rate-option.is-selected .radio-mark::after {
   content: "";
   position: absolute;
   top: 3px; left: 3px;
   width: 8px; height: 8px;
   border-radius: 50%;
   background: #111;
}

.rc-rate-info { flex: 1 1 auto; min-width: 0; }
.rc-rate-info .rc-rate-title {
   display: block;
   font-size: 14px;
   font-weight: 800;
   color: #111;
   margin: 0 0 3px;
   line-height: 1.2;
}
.rc-rate-info .rc-rate-desc {
   font-size: 11.5px;
   color: #777;
   margin: 0;
   line-height: 1.4;
}

.rc-rate-price {
   text-align: right;
   flex-shrink: 0;
   white-space: nowrap;
}
.rc-rate-price .amount-line {
   font-size: 20px;
   font-weight: 800;
   color: #111;
   line-height: 1;
}
.rc-rate-price .amount-line sub {
   font-size: 12px;
   font-weight: 700;
   bottom: 0;
}
.rc-rate-price .amount-line .period {
   font-size: 11px;
   font-weight: 500;
   color: #777;
   margin-left: 2px;
}
.rc-rate-price .total-line {
   font-size: 11px;
   color: #777;
   margin-top: 4px;
   font-weight: 500;
}

.rc-rate-submit {
   display: block;
   width: calc(100% - 16px);
   margin: 6px 8px 12px;
   text-align: center;
}

@media (max-width: 480px) {
   .rc-rate-option { gap: 8px; padding: 12px 10px; }
   .rc-rate-info .rc-rate-title { font-size: 13px; }
   .rc-rate-info .rc-rate-desc { font-size: 11px; }
   .rc-rate-price .amount-line { font-size: 17px; }
}