/* ==== Bike cards (normal & stolen) ==== */
.bike-card .card-text {
    margin-bottom: 3px;
}

/* Subtle 3D base shadow for bike cards */
.bike-card {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  /* Stronger 3D: inner highlights + right/bottom edges + ambient */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),   /* top highlight */
    inset 1px 0 0 rgba(255, 255, 255, 0.75),   /* left highlight */
    2px 0 0 rgba(0, 0, 0, 0.10),               /* right edge */
    0 2px 0 rgba(0, 0, 0, 0.12),               /* bottom edge */
    10px 12px 24px rgba(0, 0, 0, 0.16);        /* ambient drop */
}
/* Ensure images respect the card's rounded top corners */
.bike-card .card-img-top,
.stolen_bike-card .card-img-top {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.bike-card:hover {
  background-color: #f8f9fa;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),   /* brighter top highlight */
    inset 1px 0 0 rgba(255, 255, 255, 0.80),   /* brighter left highlight */
    3px 0 0 rgba(0, 0, 0, 0.14),               /* stronger right edge */
    0 3px 0 rgba(0, 0, 0, 0.16),               /* stronger bottom edge */
    14px 16px 28px rgba(0, 0, 0, 0.20);        /* deeper ambient */
}
.bike-card:active { transform: translateY(1px); }


.add-bike-card {
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease;
  border: 1px solid #E6EEF7;
  background-color: #F2F7FB;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 1px 0 0 rgba(255, 255, 255, 0.75),
    2px 0 0 rgba(0, 0, 0, 0.10),
    0 2px 0 rgba(0, 0, 0, 0.12),
    10px 12px 24px rgba(0, 0, 0, 0.16);
}
.add-bike-card:hover {
  background-color: #E6F0F7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 1px 0 0 rgba(255, 255, 255, 0.8),
    3px 0 0 rgba(0, 0, 0, 0.12),
    0 3px 0 rgba(0, 0, 0, 0.16),
    14px 16px 28px rgba(0, 0, 0, 0.20);
}
.add-bike-card:active {
  transform: translateY(1px);
}

.add-bike-card-icon {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.add-bike-main-icon {
  font-size: 3.5rem;
  color: #000;
}
.add-bike-plus-icon {
  font-size: 3rem;
  color: #000;
}

.stolen_bike-card {
    background-color: #fff9c4;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    /* Stronger 3D for stolen card */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 1px 0 0 rgba(255, 255, 255, 0.75),
      2px 0 0 rgba(0, 0, 0, 0.10),
      0 2px 0 rgba(0, 0, 0, 0.12),
      10px 12px 24px rgba(0, 0, 0, 0.16);
}
.stolen_bike-card .card-text {
    margin-bottom: 3px;
}
.stolen_bike-card:hover {
    background-color: #fff59d;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.90),
      inset 1px 0 0 rgba(255, 255, 255, 0.80),
      3px 0 0 rgba(0, 0, 0, 0.14),
      0 3px 0 rgba(0, 0, 0, 0.16),
      14px 16px 28px rgba(0, 0, 0, 0.20);
}

/* ==== Advertisement cards & banner areas ==== */
.ad-card .card-text {
    margin-bottom: 3px;
}

.ad-card {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  /* Stronger 3D for ads, but slightly subtler than bikes */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 1px 0 0 rgba(255, 255, 255, 0.75),
    2px 0 0 rgba(0, 0, 0, 0.08),
    0 2px 0 rgba(0, 0, 0, 0.10),
    10px 12px 24px rgba(0, 0, 0, 0.14);
}
.ad-card:hover {
  background-color: #f8f9fa;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 1px 0 0 rgba(255, 255, 255, 0.80),
    3px 0 0 rgba(0, 0, 0, 0.10),
    0 3px 0 rgba(0, 0, 0, 0.14),
    14px 16px 28px rgba(0, 0, 0, 0.18);
}
.ad-card:active { transform: translateY(1px); }

.ad-card img {
    max-width: 100%;  
    height: auto;
}
.ad-card .card-img-top {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.col-xl-1-5 {
  flex: 0 0 auto;
  width: 12.5%;
}

.ad-section-heading-top {
    background-color: black;
    color: white;
    padding: 10px;
    border-radius: 4px;
}

.ad-section-heading-bottom {
    background-color: black;
    color: white;
    padding: 10px;
    border-radius: 4px;
}

.ad-space-header,
.ad-space-footer {
    background-color: #E9F1FA;
    padding: 2rem 1rem;
    border-radius: 6px;
}

.ad-card-small {
    font-size: 0.875rem;
    height: 100%;
    max-height: 300px;
}

.ad-card-img {
  max-height: 180px;
  width: 100%;
  height: 180px; /* ensures consistent card heights */
  object-fit: contain;
}

.ad-card-small .card-img-top {
    max-height: 90px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.ad-card-small .card-body {
    padding: 0.5rem;
}

.ad-banner-bg {
    aspect-ratio: 6 / 1;
    background-color: black;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    margin: 1rem 0;
    width: 100%;
    overflow: hidden;
}

.banner-link {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

/* ==== Front page cards ==== */
.front-page-grid { /* placeholder for possible future custom spacing/width rules */ }

.front-page-card {
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease;
  border: 1px solid #E6EEF7;           /* soft cool border */
  background-color: #F2F7FB;           /* soft cool card background */
  /* Stronger 3D: inner light on top/left + deeper right/bottom shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),   /* top highlight */
    inset 1px 0 0 rgba(255, 255, 255, 0.75),   /* left highlight */
    2px 0 0 rgba(0, 0, 0, 0.10),               /* right edge */
    0 2px 0 rgba(0, 0, 0, 0.12),               /* bottom edge */
    10px 12px 24px rgba(0, 0, 0, 0.16);        /* ambient drop */
  color: #000;                         /* black text */
}
.front-page-card .card-img-top {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.front-page-card:hover {
  background-color: #E6F0F7;           /* soft cool hover background */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),    /* brighter top highlight */
    inset 1px 0 0 rgba(255, 255, 255, 0.8),    /* brighter left highlight */
    3px 0 0 rgba(0, 0, 0, 0.12),               /* stronger right edge */
    0 3px 0 rgba(0, 0, 0, 0.16),               /* stronger bottom edge */
    14px 16px 28px rgba(0, 0, 0, 0.20);        /* deeper ambient drop */
  color: #000;
}
.front-page-card:active {
  transform: translateY(1px);
}

.front-page-icon {
  font-size: 2.25rem; /* container size for icon */
  line-height: 1;
}
.front-page-icon .bi {
  font-size: 2.25rem; /* ensure the <i> scales to the same size */
  display: inline-block;
  vertical-align: middle;
}

.front-page-label {
  font-weight: 600;
  color: #000;
}