/* =========================================================
   ZILABIZ
   Component Stylesheet
   File: assets/css/components.css
========================================================= */


/* =========================================================
   CATEGORY GRID
========================================================= */

.categories-grid {

  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 14px;

}


/* =========================================================
   CATEGORY CARD
========================================================= */

.category-card {

  position: relative;

  min-height: 130px;

  padding: 18px 12px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 9px;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 16px;

  background: var(--white);

  color: var(--gray-800);

  text-align: center;

  cursor: pointer;

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);

}


.category-card::before {

  content: "";

  position: absolute;

  width: 90px;

  height: 90px;

  top: -45px;

  right: -45px;

  border-radius: 50%;

  background:
    rgba(37, 99, 235, 0.06);

  transition:
    transform var(--transition);

}


.category-card:hover {

  transform: translateY(-5px);

  border-color:
    rgba(37, 99, 235, 0.25);

  box-shadow: var(--shadow-md);

}


.category-card:hover::before {

  transform: scale(2.2);

}


.category-card.active {

  border-color: var(--primary);

  background:
    linear-gradient(
      145deg,
      #eff6ff,
      #ffffff
    );

  box-shadow:
    0 8px 25px
    rgba(37, 99, 235, 0.12);

}


.category-icon {

  position: relative;

  z-index: 1;

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border-radius: 14px;

  background: var(--primary-light);

  color: var(--primary);

  font-size: 24px;

}


.category-icon img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.category-name {

  position: relative;

  z-index: 1;

  max-width: 100%;

  color: var(--gray-800);

  font-size: 11px;

  font-weight: 750;

  line-height: 1.35;

}


.category-count {

  position: relative;

  z-index: 1;

  color: var(--gray-400);

  font-size: 9px;

  font-weight: 600;

}


/* =========================================================
   BUSINESS GRID
========================================================= */

.business-grid {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;

}


/* =========================================================
   BUSINESS CARD
========================================================= */

.business-card {

  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background: var(--white);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);

}


.business-card:hover {

  transform: translateY(-5px);

  border-color:
    rgba(37, 99, 235, 0.2);

  box-shadow: var(--shadow-lg);

}


/* =========================================================
   BUSINESS COVER
========================================================= */

.business-cover {

  position: relative;

  height: 175px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #e2e8f0,
      #f8fafc
    );

}


.business-cover img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform 500ms ease;

}


.business-card:hover .business-cover img {

  transform: scale(1.05);

}


.business-cover-placeholder {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #eff6ff
    );

  color: var(--primary);

  font-size: 38px;

  font-weight: 900;

}


/* =========================================================
   CARD BADGES
========================================================= */

.business-badges {

  position: absolute;

  top: 10px;

  left: 10px;

  right: 10px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;

  pointer-events: none;

}


.business-badges-left {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}


.badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  min-height: 24px;

  padding: 0 8px;

  border-radius: 7px;

  background:
    rgba(255, 255, 255, 0.92);

  color: var(--gray-700);

  font-size: 9px;

  font-weight: 800;

  box-shadow:
    0 3px 10px
    rgba(15, 23, 42, 0.08);

  backdrop-filter:
    blur(8px);

}


.badge-featured {

  background:
    rgba(245, 158, 11, 0.95);

  color: #ffffff;

}


.badge-verified {

  background:
    rgba(22, 163, 74, 0.95);

  color: #ffffff;

}


.badge-open {

  background:
    rgba(22, 163, 74, 0.95);

  color: #ffffff;

}


.badge-closed {

  background:
    rgba(100, 116, 139, 0.95);

  color: #ffffff;

}


/* =========================================================
   BUSINESS LOGO
========================================================= */

.business-logo {

  position: absolute;

  left: 16px;

  bottom: -24px;

  width: 64px;

  height: 64px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border:
    4px solid var(--white);

  border-radius: 16px;

  background: var(--gray-100);

  color: var(--primary);

  font-size: 25px;

  font-weight: 900;

  box-shadow: var(--shadow-md);

}


.business-logo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


/* =========================================================
   BUSINESS CONTENT
========================================================= */

.business-content {

  padding:
    35px 17px 17px;

}


.business-category {

  margin-bottom: 5px;

  color: var(--primary);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.4px;

  text-transform: uppercase;

}


.business-name {

  overflow: hidden;

  color: var(--gray-900);

  font-size: 17px;

  font-weight: 850;

  letter-spacing: -0.3px;

  line-height: 1.3;

  text-overflow: ellipsis;

  white-space: nowrap;

}


.business-description {

  display: -webkit-box;

  min-height: 38px;

  margin-top: 7px;

  overflow: hidden;

  color: var(--gray-500);

  font-size: 11px;

  line-height: 1.55;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}


.business-meta {

  display: flex;

  flex-direction: column;

  gap: 7px;

  margin-top: 13px;

  padding-top: 12px;

  border-top:
    1px solid var(--gray-100);

}


.business-meta-row {

  display: flex;

  align-items: flex-start;

  gap: 7px;

  color: var(--gray-500);

  font-size: 10px;

  line-height: 1.4;

}


.business-meta-icon {

  width: 17px;

  flex-shrink: 0;

  text-align: center;

}


.business-meta-text {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}


/* =========================================================
   RATING
========================================================= */

.business-rating {

  display: inline-flex;

  align-items: center;

  gap: 5px;

}


.rating-stars {

  color: #f59e0b;

  font-size: 11px;

  letter-spacing: -2px;

}


.rating-value {

  color: var(--gray-700);

  font-size: 10px;

  font-weight: 800;

}


.review-count {

  color: var(--gray-400);

  font-size: 9px;

}


/* =========================================================
   BUSINESS ACTIONS
========================================================= */

.business-actions {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 8px;

  margin-top: 15px;

}


.business-action {

  min-height: 39px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  padding: 0 9px;

  border:
    1px solid var(--border);

  border-radius: 9px;

  background: var(--white);

  color: var(--gray-700);

  font-size: 10px;

  font-weight: 750;

  transition:
    all var(--transition-fast);

}


.business-action:hover {

  border-color: var(--primary);

  color: var(--primary);

  background: var(--primary-light);

}


.business-action.primary {

  border-color: var(--primary);

  background: var(--primary);

  color: var(--white);

}


.business-action.primary:hover {

  background: var(--primary-dark);

  color: var(--white);

}


/* =========================================================
   BUSINESS DETAILS
========================================================= */

.business-detail-cover {

  position: relative;

  height: 230px;

  overflow: hidden;

  margin:
    -30px -30px 0;

  background: var(--gray-100);

}


.business-detail-cover img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.business-detail-header {

  display: flex;

  align-items: flex-end;

  gap: 15px;

  margin-top: -38px;

  position: relative;

  z-index: 2;

}


.business-detail-logo {

  width: 86px;

  height: 86px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  flex-shrink: 0;

  border:
    5px solid var(--white);

  border-radius: 20px;

  background: var(--gray-100);

  color: var(--primary);

  font-size: 30px;

  font-weight: 900;

  box-shadow: var(--shadow-md);

}


.business-detail-logo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.business-detail-title {

  min-width: 0;

  padding-bottom: 7px;

}


.business-detail-title h2 {

  overflow: hidden;

  color: var(--gray-900);

  font-size: 25px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;

}


.business-detail-title p {

  margin-top: 4px;

  color: var(--gray-500);

  font-size: 11px;

}


.business-detail-info {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 12px;

  margin-top: 25px;

}


.detail-info-item {

  padding: 13px;

  border:
    1px solid var(--border);

  border-radius: 11px;

  background: var(--gray-50);

}


.detail-info-label {

  color: var(--gray-400);

  font-size: 9px;

  font-weight: 750;

  text-transform: uppercase;

}


.detail-info-value {

  margin-top: 3px;

  color: var(--gray-800);

  font-size: 12px;

  font-weight: 700;

}


.business-detail-description {

  margin-top: 22px;

}


.business-detail-description h3,
.business-products h3,
.business-services h3 {

  color: var(--gray-900);

  font-size: 17px;

  font-weight: 800;

}


.business-detail-description p {

  margin-top: 8px;

  color: var(--gray-600);

  font-size: 12px;

  line-height: 1.7;

}


/* =========================================================
   PRODUCT / SERVICE MINI CARDS
========================================================= */

.business-products,
.business-services {

  margin-top: 25px;

}


.mini-items-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;

  margin-top: 12px;

}


.mini-item {

  display: flex;

  gap: 10px;

  padding: 10px;

  border:
    1px solid var(--border);

  border-radius: 11px;

  background: var(--white);

}


.mini-item-image {

  width: 54px;

  height: 54px;

  flex-shrink: 0;

  overflow: hidden;

  border-radius: 9px;

  background: var(--gray-100);

}


.mini-item-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.mini-item-info {

  min-width: 0;

}


.mini-item-name {

  overflow: hidden;

  color: var(--gray-800);

  font-size: 11px;

  font-weight: 750;

  text-overflow: ellipsis;

  white-space: nowrap;

}


.mini-item-price {

  margin-top: 3px;

  color: var(--primary);

  font-size: 11px;

  font-weight: 800;

}


.mini-item-description {

  margin-top: 2px;

  overflow: hidden;

  color: var(--gray-400);

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;

}


/* =========================================================
   DETAIL ACTIONS
========================================================= */

.business-detail-actions {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 9px;

  margin-top: 25px;

}


.detail-action-button {

  min-height: 43px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  border:
    1px solid var(--border);

  border-radius: 10px;

  background: var(--white);

  color: var(--gray-700);

  font-size: 11px;

  font-weight: 750;

}


.detail-action-button:hover {

  border-color: var(--primary);

  background: var(--primary-light);

  color: var(--primary);

}


.detail-action-button.primary {

  border-color: var(--primary);

  background: var(--primary);

  color: var(--white);

}


.detail-action-button.primary:hover {

  background: var(--primary-dark);

  color: var(--white);

}


/* =========================================================
   SKELETON LOADING
========================================================= */

.skeleton-card {

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background: var(--white);

}


.skeleton {

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      #f1f5f9 25%,
      #e2e8f0 37%,
      #f1f5f9 63%
    );

  background-size: 400% 100%;

  animation:
    skeletonLoading 1.3s ease infinite;

}


.skeleton-cover {

  width: 100%;

  height: 175px;

}


.skeleton-content {

  padding: 35px 17px 17px;

}


.skeleton-logo {

  position: relative;

  width: 64px;

  height: 64px;

  margin-top: -67px;

  margin-bottom: 20px;

  border:
    4px solid var(--white);

  border-radius: 16px;

}


.skeleton-line {

  height: 10px;

  margin-top: 10px;

  border-radius: 5px;

}


.skeleton-line.short {

  width: 35%;

}


.skeleton-line.medium {

  width: 65%;

}


.skeleton-line.long {

  width: 90%;

}


.skeleton-buttons {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 8px;

  margin-top: 17px;

}


.skeleton-button {

  height: 39px;

  border-radius: 9px;

}


@keyframes skeletonLoading {

  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }

}


/* =========================================================
   CATEGORY SKELETON
========================================================= */

.category-skeleton {

  min-height: 130px;

  padding: 18px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border:
    1px solid var(--border);

  border-radius: 16px;

  background: var(--white);

}


.category-skeleton-icon {

  width: 50px;

  height: 50px;

  border-radius: 14px;

}


.category-skeleton-text {

  width: 65%;

  height: 9px;

  border-radius: 5px;

}


/* =========================================================
   SEARCH HIGHLIGHT
========================================================= */

.search-highlight {

  padding:
    1px 3px;

  border-radius: 3px;

  background: #dbeafe;

  color: var(--primary-dark);

}


/* =========================================================
   BUSINESS STATUS
========================================================= */

.status-dot {

  width: 7px;

  height: 7px;

  display: inline-block;

  flex-shrink: 0;

  border-radius: 50%;

}


.status-dot.open {

  background: var(--success);

  box-shadow:
    0 0 0 3px rgba(22, 163, 74, 0.1);

}


.status-dot.closed {

  background: var(--gray-400);

}


/* =========================================================
   SEARCH RESULT EMPHASIS
========================================================= */

.business-card.search-match {

  border-color:
    rgba(37, 99, 235, 0.2);

}


/* =========================================================
   NO IMAGE PLACEHOLDER
========================================================= */

.image-placeholder {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #eff6ff,
      #dbeafe
    );

  color: var(--primary);

  font-size: 28px;

}


/* =========================================================
   RESPONSIVE COMPONENT OVERRIDES
========================================================= */

@media (max-width: 1100px) {

  .categories-grid {

    grid-template-columns:
      repeat(5, minmax(0, 1fr));

  }

  .business-grid {

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

  }

}


@media (max-width: 900px) {

  .categories-grid {

    grid-template-columns:
      repeat(4, minmax(0, 1fr));

  }

  .business-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

}


@media (max-width: 650px) {

  .categories-grid {

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 9px;

  }


  .category-card {

    min-height: 110px;

    padding: 12px 7px;

    border-radius: 13px;

  }


  .category-icon {

    width: 42px;

    height: 42px;

    border-radius: 11px;

    font-size: 20px;

  }


  .business-grid {

    grid-template-columns: 1fr;

    gap: 15px;

  }


  .business-cover {

    height: 190px;

  }


  .business-detail-info {

    grid-template-columns: 1fr;

  }


  .mini-items-grid {

    grid-template-columns: 1fr;

  }


  .business-detail-actions {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 430px) {

  .categories-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }


  .category-card {

    min-height: 105px;

  }


  .business-cover {

    height: 180px;

  }


  .business-detail-cover {

    height: 190px;

  }


  .business-detail-header {

    align-items: center;

  }


  .business-detail-logo {

    width: 70px;

    height: 70px;

  }


  .business-detail-title h2 {

    font-size: 19px;

  }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

  .site-header,
  .site-footer,
  .business-actions,
  .business-detail-actions,
  .modal-overlay {

    display: none !important;

  }

}