/*
 * AlMaqam Packages Plugin — Front-end Styles
 * These styles extend the theme's card system for package-specific elements.
 * Safe to use standalone (without the AlMaqam theme) as all variables have fallbacks.
 */

:root {
  --green: var(--green, #0c4b3c);
  --gold: var(--gold, #c99b45);
  --muted: var(--muted, #68766f);
  --wa: var(--wa, #25d366);
  --border: var(--border, rgba(12, 75, 60, 0.12));
  --shadow: var(--shadow, 0 24px 70px rgba(12, 75, 60, 0.12));
}

/* Package grid defaults if theme not active */
.grid2, .grid3, .grid4, .grid5 {
  display: grid;
  gap: 16px;
}
.grid2 { grid-template-columns: repeat(2, 1fr); }
.grid3 { grid-template-columns: repeat(3, 1fr); }
.grid4 { grid-template-columns: repeat(4, 1fr); }
.grid5 { grid-template-columns: repeat(5, 1fr); }

/* Package card overrides */
.popular-grid {
  align-items: stretch;
}
.popular-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 24px;
  box-shadow: 0 14px 40px rgba(12, 75, 60, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}
.popular-grid .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.popular-grid .badge {
  align-self: flex-start;
  display: inline-flex;
  background: rgba(12, 75, 60, 0.08);
  color: #0c4b3c;
  font-weight: 900;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  margin-bottom: 15px;
}
.popular-grid h3 {
  color: #0c4b3c;
  font-size: 22px;
  margin-bottom: 10px;
  letter-spacing: -0.04em;
  line-height: 1.2;
}
.popular-grid p {
  color: #68766f;
  font-size: 15px;
  line-height: 1.6;
}
.popular-grid .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
  align-content: flex-start;
}
.popular-grid .meta span {
  font-size: 13px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(12, 75, 60, 0.08);
  color: #0c4b3c;
}
.popular-grid .price {
  color: #68766f;
  margin-top: auto;
  padding-top: 14px;
}
.popular-grid .price strong {
  display: block;
  font-size: 28px;
  color: #0c4b3c;
  letter-spacing: -0.04em;
}
.popular-grid .icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #fffaf1;
  display: grid;
  place-items: center;
  font-size: 25px;
  margin-bottom: 18px;
}
.popular-grid .btn {
  margin-top: 14px;
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  min-height: 46px;
  font-size: 14px;
  padding: 13px 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 900;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s;
}
.popular-grid .btn:hover { transform: translateY(-2px); }
.popular-grid .btn-wa, .popular-grid .btn.btn-wa {
  background: #25d366;
  color: #07351c;
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.24);
}
.popular-grid .btn-primary, .popular-grid .btn.btn-primary {
  background: #0c4b3c;
  color: #fff;
  box-shadow: 0 14px 30px rgba(12, 75, 60, 0.22);
}

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(18px); transition: 0.7s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 1080px) {
  .grid4, .grid5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .grid2, .grid3, .grid4, .grid5 { grid-template-columns: 1fr; }
}

/* ── Two-button row ─────────────────────────────────────────── */
.pkg-card {
  display: flex;
  flex-direction: column;
}

.pkg-excerpt {
  flex: 1; /* push buttons to bottom of card */
}

.pkg-btn-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

/* "View Details" — outlined green */
.btn-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 15px;
  font-family: inherit;
  text-decoration: none;
  border: 2px solid var(--green, #0c4b3c);
  background: transparent;
  color: var(--green, #0c4b3c);
  transition: background .2s, color .2s, transform .2s;
  cursor: pointer;
}

.btn-details:hover {
  background: var(--green, #0c4b3c);
  color: #fff;
  transform: translateY(-2px);
}

/* "Ask on WhatsApp" — solid green (WhatsApp) */
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 15px;
  font-family: inherit;
  text-decoration: none;
  background: #25d366;
  color: #07351c;
  border: none;
  box-shadow: 0 10px 28px rgba(37,211,102,.28);
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}

.btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(37,211,102,.38);
}

/* WhatsApp icon inline (optional — pulls SVG via CSS) */
.btn-wa::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307351c'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 2.125.558 4.122 1.533 5.858L.054 23.293a.75.75 0 0 0 .916.916l5.435-1.479A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.713 9.713 0 0 1-4.951-1.355l-.355-.21-3.676.999 1.018-3.567-.23-.368A9.718 9.718 0 0 1 2.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* Responsive: side-by-side on wider cards */
@media (min-width: 480px) and (max-width: 767px) {
  .pkg-btn-row {
    flex-direction: row;
  }
  .btn-details,
  .btn-wa {
    flex: 1;
  }
}

/* ── Card image (homepage grid) ─────────────────────────────── */
.pkg-card-img {
  display: block;
  width: calc(100% + 48px); /* bleed to card edges */
  margin: -24px -24px 18px;
  height: 180px;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(180deg,rgba(12,75,60,.04),rgba(12,75,60,.32)) center/cover no-repeat;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  transition: opacity .2s;
}

.pkg-card-img:hover {
  opacity: .9;
}

/* ── Excerpt clamp — max 3 lines ────────────────────────────── */
.pkg-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #68766f;
  flex: unset; /* remove stretch, buttons sit right below */
}

/* tighten card internal spacing */
.pkg-card .meta      { margin: 12px 0 10px; }
.pkg-card .price     { margin-top: 10px; padding-top: 10px; }
.pkg-card h3         { font-size: 19px; margin-bottom: 8px; line-height: 1.2; }
.pkg-btn-row         { margin-top: 14px; }

/* ── Compressed card — no excerpt, tight spacing ────────────── */
/* Remove any leftover excerpt space */
.pkg-excerpt { display: none !important; }

/* Card padding tighter */
.popular-grid .card { padding: 18px; }

/* Image bleed adjusted for new padding */
.pkg-card-img {
  margin: -18px -18px 14px;
  width: calc(100% + 36px);
  height: 160px;
}

/* Badge closer to title */
.popular-grid .badge { margin-bottom: 8px; }

/* Title tighter */
.pkg-card h3 { font-size: 18px; margin-bottom: 0; }

/* Chips tighter */
.pkg-card .meta { margin: 10px 0 8px; }
.popular-grid .meta span { padding: 5px 9px; font-size: 12px; }

/* Price tighter */
.pkg-card .price { margin-top: 8px; padding-top: 0; }
.popular-grid .price strong { font-size: 24px; }

/* Buttons tighter */
.pkg-btn-row { margin-top: 12px; gap: 8px; }
.btn-details, .btn-wa { padding: 11px 16px; font-size: 14px; }

/* ── Kill the auto margin that creates the big gap ──────────── */
.popular-grid .price { margin-top: 0 !important; padding-top: 0 !important; }

/* ── View More button ────────────────────────────────────────── */
.almaqam-view-more {
  text-align: center;
  margin-top: 36px;
}
.btn-view-more {
  background: transparent;
  border: 2px solid #0c4b3c;
  color: #0c4b3c;
  padding: 14px 36px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, color .2s;
}
.btn-view-more:hover {
  background: #0c4b3c;
  color: #fff;
}

/* ── Category page pkg-card link fix ───────────────────────── */
.almaqam-pkg-item {
  display: contents; /* pass-through for grid */
}

/* ── v5: Seats urgency badge ──────────────────────────────────── */
.pkg-seats-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 6px 0 2px;
  letter-spacing: .03em;
}
.pkg-seats-soldout {
  background: #fde8e8;
  color: #c00;
  border: 1px solid #f5c0c0;
}
.pkg-seats-urgent {
  background: #fff3cd;
  color: #92600a;
  border: 1px solid #f5d87a;
  animation: almaqam-pulse 2s ease-in-out infinite;
}
.pkg-seats-low {
  background: #fff8e6;
  color: #92600a;
  border: 1px solid #f5d87a;
}
@keyframes almaqam-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .7; }
}