/* ============================================================
   INFO BANNER — Warm callout boxes for important information,
   tips, or status messages.

   USAGE:
   <div class="info-banner">
     <svg class="info-banner-icon">...</svg>
     <div>
       <div class="info-banner-heading">Important</div>
       <div class="info-banner-body">Your reservation includes
         complimentary breakfast for two.</div>
     </div>
   </div>

   RULES:
   - Icon style is LINE-ART. No filled icons. No emojis.
   - Accent border, warm background. NOT blue info box.
   ============================================================ */

.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-surface-warm);  /* warm — NOT blue */
  border: 1px solid var(--color-accent);    /* accent — NOT blue */
  border-radius: 0;
}

.info-banner-icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.info-banner-heading {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.info-banner-body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}