/* badge.css */

/* Base container */
.badge-container {
  border-width: 2px;
  border-style: solid;
  border-color: #3b82f6;       /* default blue-500 */
  border-radius: 0.5rem;       /* rounded-lg */
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-xl */
  text-align: center;
}

/* Sizes */
.badge-small  { width: 120px; }
.badge-medium { width: 150px; }
.badge-large  { width: 180px; }

.badge-small  .badge-main { padding: 0.5rem; }
.badge-medium .badge-main { padding: 1rem; }
.badge-large  .badge-main { padding: 1.5rem; }

/* Header ribbon */
.badge-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: linear-gradient(to right, #2563eb, #3b82f6); /* from-blue-600 to-blue-500 */
  padding: 0.375rem 0.5rem;
}
.badge-header .title {
  font-size: 0.75rem;    /* text-[10px] / text-xs */
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.badge-header .icon {
  color: white;
  font-size: 0.75rem;
}

/* Main content */
.badge-main h3 {
  font-size: 0.875rem;   /* text-sm */
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
.badge-main p.category {
  font-size: 0.75rem;    /* text-xs */
  margin: 0.25rem 0 0;
  color: #374151;        /* gray-700 */
}
.badge-main .stars {
  color: #22c55e;        /* green-400 */
  margin: 0.5rem 0;
  /* font-size will be set by JS */
}
.badge-main p.location {
  font-size: 0.625rem;   /* 10px */
  font-weight: 600;
  margin: 0;
  color: #6b7280;        /* gray-500 */
}

/* Bottom bar */
.badge-footer {
  height: 0.5rem;        /* h-2 */
  background: linear-gradient(to right, #2563eb, #3b82f6);
}

/* Dark theme overrides */
.badge-dark {
    background: #111827;   /* gray-900 */
    border-color: #e5e7eb; /* gray-200 */
}
.badge-dark .badge-main h3,
.badge-dark .badge-main p.category,
.badge-dark .badge-main p.location {
  color: white;
}
.badge-dark .badge-main p.category { color: #f3f4f6; /* gray-100 */ }
.badge-dark .badge-main p.location { color: #d1d5db; /* gray-300 */ }
.badge-dark .badge-header { /* same gradient, keep text white */ }

/* Light theme default (white bg, blue border) */
.badge-light           { background: white; }

/* Smaller header text on small badges */
.badge-small .badge-header .title {
    font-size: 0.625rem; /* about 10px */
}