/* ==========================================================================
   Sajil - car card (v2, "showroom ticket")

   Load from templates/web/includes/header.html, AFTER style.css:
       <link rel="stylesheet" href="/web/css/car-card.css" />
       <script src="/web/js/card-effects.js" defer></script>

   Styling only. The card markup is still built by car_card() in
   web_index.js (home) and fleet.js (Fleet page). Prices, the offer logic,
   the plan text, the attributes and the "Rent now" button with its id /
   reserve_type / error attributes are untouched, so booking works exactly
   as before.

   card-effects.js is optional polish: 3D tilt with a light glare, the
   "-14%" discount on offer cards and the model-year chip. Without it the
   card still looks complete.

   .car-card.car-card doubles the specificity so these rules win over the
   .car-card rules in style.css, including its media queries.
   ========================================================================== */

@property --sjc-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.car-card.car-card {
  --c-ink: #082c2b;
  --c-ink-2: #11524d;
  --c-teal: #2c5f5a;
  --c-mint: #4aaaa4;
  --c-cyan: #00efd2;
  --c-soft: #f1f8f7;
  --c-line: rgba(8, 44, 43, .08);
  --c-page: #f8f8fa;              /* page colour, used for the ticket notches */

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 0;
  overflow: hidden;
  text-align: start;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 28px;
  box-shadow:
    0 1px 2px rgba(8, 44, 43, .04),
    0 18px 40px -30px rgba(8, 44, 43, .45);
  transition: transform .5s cubic-bezier(.2, .9, .25, 1), box-shadow .5s ease, border-color .5s ease;
  animation: sjcIn .7s cubic-bezier(.2, .9, .25, 1) backwards;
}

/* rotating cyan rim, shown on hover */
.car-card.car-card::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--sjc-a),
      transparent 0deg, rgba(0, 239, 210, .95) 60deg, rgba(74, 170, 164, .9) 110deg,
      transparent 170deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

/* light glare that follows the pointer (position set by card-effects.js) */
.car-card.car-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.car-card.car-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow:
    0 2px 6px rgba(8, 44, 43, .05),
    0 34px 60px -30px rgba(8, 44, 43, .55),
    0 0 40px -18px rgba(0, 239, 210, .6);
}

.car-card.car-card:hover::before {
  opacity: 1;
  animation: sjcSpin 3.2s linear infinite;
}

.car-card.car-card:hover::after {
  opacity: 1;
}

/* cards rise in one after another whenever the list is (re)drawn */
.car-grid > .car-card:nth-child(2)  { animation-delay: .06s; }
.car-grid > .car-card:nth-child(3)  { animation-delay: .12s; }
.car-grid > .car-card:nth-child(4)  { animation-delay: .18s; }
.car-grid > .car-card:nth-child(5)  { animation-delay: .24s; }
.car-grid > .car-card:nth-child(6)  { animation-delay: .30s; }
.car-grid > .car-card:nth-child(7)  { animation-delay: .36s; }
.car-grid > .car-card:nth-child(8)  { animation-delay: .42s; }
.car-grid > .car-card:nth-child(n+9) { animation-delay: .48s; }

/* =============================================================== STAGE
   the unnamed <div> holding the photo becomes a small showroom */

.car-card.car-card > div:not([class]) {
  order: 1;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 214px;
  margin: 10px 10px 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    /* spotlight from above */
    radial-gradient(60% 55% at 50% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    /* perspective floor lines */
    repeating-linear-gradient(90deg, rgba(74, 170, 164, .07) 0 1px, transparent 1px 34px),
    /* base */
    linear-gradient(180deg, #f6fbfa 0%, #e9f6f3 58%, #d6efea 100%);
  transition: background .5s ease;
}

/* faint diagonal Sajil stripes in the top corner */
.car-card.car-card > div:not([class])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(-55deg, rgba(0, 239, 210, .1) 0 14px, transparent 14px 34px);
  -webkit-mask: radial-gradient(70% 60% at 100% 0%, #000, transparent 70%);
  mask: radial-gradient(70% 60% at 100% 0%, #000, transparent 70%);
}

[dir="rtl"] .car-card.car-card > div:not([class])::before {
  -webkit-mask: radial-gradient(70% 60% at 0% 0%, #000, transparent 70%);
  mask: radial-gradient(70% 60% at 0% 0%, #000, transparent 70%);
}

/* turntable the car stands on, with a cyan rim */
.car-card.car-card > div:not([class])::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 9%;
  right: 9%;
  bottom: 18px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(8, 44, 43, .38), rgba(8, 44, 43, .08) 70%, transparent);
  box-shadow:
    0 0 0 1px rgba(0, 239, 210, .25),
    0 0 26px -6px rgba(0, 239, 210, .55);
  transition: transform .6s cubic-bezier(.2, .9, .25, 1), box-shadow .6s ease;
}

.car-card.car-card > div:not([class]) img {
  position: relative;
  width: 94%;
  max-width: 100%;
  height: 160px;
  object-fit: contain;
  mix-blend-mode: multiply;      /* photos on a white background melt into the stage */
  transition: transform .7s cubic-bezier(.2, .9, .25, 1);
}

.car-card.car-card:hover > div:not([class]) {
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(90deg, rgba(74, 170, 164, .1) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, #f3fbf9 0%, #dcf4ef 58%, #bfeae2 100%);
}

.car-card.car-card:hover > div:not([class]) img {
  transform: translateY(-10px) scale(1.08);
}

.car-card.car-card:hover > div:not([class])::after {
  transform: scaleX(.88);
  box-shadow:
    0 0 0 1.5px rgba(0, 239, 210, .55),
    0 0 34px -4px rgba(0, 239, 210, .8);
}

/* ---- chips on the stage (added by card-effects.js) ---- */
.sjc-chip {
  position: absolute;
  z-index: 3;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.sjc-chip--year {
  inset-inline-end: 12px;
  color: var(--c-ink, #082c2b);
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 14px -8px rgba(8, 44, 43, .5), 0 0 0 1px rgba(8, 44, 43, .06);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .03em;
}

/* ---- offer badge: works with CSS alone, JS adds the "-14%" ---- */
.car-card.car-card:has(strike) > div:not([class])::before {
  content: "عرض خاص  " attr(data-sjc-off);
  z-index: 3;
  inset: 12px auto auto 12px;
  inset-inline-start: 12px;
  inset-inline-end: auto;
  width: auto;
  height: auto;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: pre;
  background: linear-gradient(135deg, #ff4d5e, #d1102e);
  box-shadow: 0 10px 20px -10px rgba(209, 16, 46, .9);
  -webkit-mask: none !important;   /* beats the stripe mask, incl. the RTL one */
  mask: none !important;
  animation: sjcPulse 2.4s ease-in-out infinite;
}

[dir="ltr"] .car-card.car-card:has(strike) > div:not([class])::before {
  content: "Offer  " attr(data-sjc-off);
}

/* =========================================================== NAME + PRICE */

.car-card.car-card .car-info {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 16px 20px 4px;
}

.car-card.car-card .car-name {
  width: auto;
  margin: 0;
  text-align: start;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;               /* two lines, so every card lines up */
}

.car-card.car-card .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 2px 8px;
}

.car-card.car-card .amount {
  order: 1;
  font-family: 'Montserrat', 'Noto Kufi Arabic', sans-serif;
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--c-ink) 20%, var(--c-mint) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* the offer price keeps its red */
.car-card.car-card .price .amount[style*="cc0021"] {
  background: none;
  -webkit-text-fill-color: #d1102e;
  color: #d1102e !important;
}

.car-card.car-card .currency {
  order: 2;
  display: inline-flex;
  align-self: center;
}

.car-card.car-card .currency img {
  width: 18px;
  height: 18px;
  opacity: .85;
}

.car-card.car-card .price strike {
  order: 3;
  color: #9aa9a8;
  text-decoration-thickness: 2px;
}

.car-card.car-card .amount-small {
  font-size: 1rem;
  font-weight: 700;
  color: #9aa9a8;
  -webkit-text-fill-color: #9aa9a8;
  background: none;
}

.car-card.car-card .period {
  order: 4;
  margin-inline-start: auto;     /* pill sits at the far end of the row */
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-cyan);
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

/* English keeps the period first ("Day/ 150") so the slash reads right */
[dir="ltr"] .car-card.car-card .period {
  order: 0;
  margin-inline-start: 0;
  margin-inline-end: 2px;
}

/* ================================================= FEATURES ("ticket") */

.car-card.car-card .car-features {
  order: 3;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 16px 20px 0;
  border-top: 2px dashed rgba(8, 44, 43, .1);
  overflow: visible;
}

/* the two half-circle notches of a ticket */
.car-card.car-card .car-features::before,
.car-card.car-card .car-features::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-page);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

.car-card.car-card .car-features::before { left: -12px; }
.car-card.car-card .car-features::after  { right: -12px; }

.car-card.car-card .feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 10px 6px;
  border-radius: 16px;
  background: var(--c-soft);
  text-align: center;
  transition: background .35s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}

.car-card.car-card .feature img {
  width: 30px !important;
  height: 30px !important;
  padding: 7px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 10px -6px rgba(8, 44, 43, .4);
  opacity: 1;
}

.car-card.car-card .feature span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-teal);
}

.car-card.car-card:hover .feature {
  background: #e4f6f2;
}

.car-card.car-card .feature:hover {
  transform: translateY(-3px);
}

/* ======================================================== BOOK BUTTON */

.car-card.car-card .book-button {
  order: 4;
  margin-top: auto;              /* buttons line up at the bottom of the row */
  padding: 16px 20px 20px;
}

.car-card.car-card .book-button .btn-main,
.car-card.car-card .book-button .car-book-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--c-ink) 0%, var(--c-ink-2) 100%) !important;
  color: var(--c-cyan) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: 0 14px 26px -16px rgba(8, 44, 43, .95), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: color .4s ease, box-shadow .4s ease, transform .2s ease;
}

/* cyan wipe that fills the button from the start side on hover */
.car-card.car-card .book-button .btn-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-mint) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2, .9, .25, 1);
}

[dir="rtl"] .car-card.car-card .book-button .btn-main::before {
  transform-origin: right center;
}

/* arrow */
.car-card.car-card .book-button .btn-main::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s cubic-bezier(.3, 1.4, .5, 1);
}

[dir="rtl"] .car-card.car-card .book-button .btn-main::after {
  transform: scaleX(-1);
}

.car-card.car-card:hover .book-button .btn-main {
  color: var(--c-ink) !important;
  box-shadow: 0 18px 30px -14px rgba(0, 239, 210, .85);
}

.car-card.car-card:hover .book-button .btn-main::before {
  transform: scaleX(1);
}

.car-card.car-card:hover .book-button .btn-main::after {
  transform: translateX(5px);
}

[dir="rtl"] .car-card.car-card:hover .book-button .btn-main::after {
  transform: scaleX(-1) translateX(5px);
}

.car-card.car-card .book-button .btn-main:active {
  transform: scale(.97);
}

/* ==================================================== FLEET PAGE (no button) */

.car-card.car-card .fleet-info {
  order: 4;
  margin-top: auto;
  padding: 16px 20px 20px;
}

.car-card.car-card .fleet-description {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 14px;
  background: #ecfaf6;
  color: #1c7a5e;
  font-size: .82rem;
  font-weight: 800;
}

.car-card.car-card .fleet-description::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c38e;
  animation: sjcDot 1.8s ease-out infinite;
}

/* ============================================================== PHONES */

@media (max-width: 600px) {
  .car-card.car-card > div:not([class]) {
    height: 220px;
  }

  .car-card.car-card > div:not([class]) img {
    height: 170px;
  }

  .car-card.car-card .car-name {
    min-height: 0;
  }

  .car-card.car-card:hover {
    transform: none;             /* no lift on touch screens */
  }
}

/* =========================================================== KEYFRAMES */

@keyframes sjcIn {
  from { opacity: 0; transform: translateY(26px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes sjcSpin {
  to { --sjc-a: 360deg; }
}

@keyframes sjcPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes sjcDot {
  0%   { box-shadow: 0 0 0 0 rgba(34, 195, 142, .55); }
  100% { box-shadow: 0 0 0 9px rgba(34, 195, 142, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .car-card.car-card,
  .car-card.car-card::before,
  .car-card.car-card > div:not([class])::before,
  .car-card.car-card .fleet-description::before {
    animation: none !important;
  }
}