/* ============================================================================
   CARDS - Content Cards & Section Titles
   ============================================================================

   CSS class equivalents for the JS-based card and title styling.
   Applied by floatingPanel.createContentCard() — base layout & typography
   live here; per-instance overrides (customStyles, backgroundColor,
   borderColor) are still emitted as inline style="" attributes in JS.

   MIGRATION STATUS: ACTIVE — classes applied by createContentCard().
   createSectionTitle() was dead code (zero call sites) and has been removed.

   Migrated from:
     - 07-panel_content/01-content_card/01-card_creation/01-content_card_creation.js
       (inline baseContainerStyles, baseTitleStyles, baseDescriptionStyles)
     - 07-panel_content/01-content_card/02-card_styles/01-standard_card_styles.js  (deleted — JSDoc only)
     - 07-panel_content/01-content_card/02-card_styles/02-styled_card_styles.js   (deleted — JSDoc only)
     - 07-panel_content/03-title/01-section_title_creation/01-section_title_creation.js (deleted — dead code)
     - 07-panel_content/03-title/02-section_title_styles/01-standard_title_style.js    (deleted — JSDoc only)
   ============================================================================ */

/* ============================================================================
   TESLA CONTENT CARD (.tesla-content-card)
   Replaces: dynamically injected #tesla-content-card-styles <style> block
   in panel_creation.js. Used as a base class by createContentCard() and
   panel_slider.js templates.
   ============================================================================ */

.tesla-content-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(var(--panel-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--panel-backdrop-blur));
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  transition: background 0.2s;
}

.tesla-content-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================================
   CONTENT CARD (.fp-card)
   Replaces: floatingPanel.createContentCard() baseContainerStyles
   Values matched pixel-for-pixel to the original JS inline styles:
     background → PANEL_COLORS.CONTENT_BG  (var(--panel-content-bg))
     padding: 15px                          (was 15px in JS, NOT 16px)
     margin-bottom: 10px                    (was 10px in JS, NOT 8px)
     border-radius: 6px                     (was 6px in JS, NOT 8px)
     width: 100%; box-sizing: border-box    (layout)
   ============================================================================ */

.fp-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(var(--panel-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--panel-backdrop-blur));
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.2s;
}

.fp-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Modifier: adds a 1px border — color set inline via borderColor option */
.fp-card--bordered {
  border-width: 1px;
  border-style: solid;
  /* border-color set inline by JS when options.borderColor is provided */
}

/* ============================================================================
   CARD TITLE (.fp-card__title)
   Replaces: baseTitleStyles in createContentCard()
   Values:
     color → PANEL_COLORS.TEXT_PRIMARY  (var(--panel-text-primary))
     margin: 0 0 8px 0
     font-size: 14px                   (was 14px in JS, NOT 1rem)
     font-weight: 500
     word-wrap: break-word
   ============================================================================ */

.fp-card__title {
  color: var(--panel-text-primary);
  margin: 0 0 8px 0;
  word-wrap: break-word;
  font-size: 14px;
  font-weight: 500;
}

/* ============================================================================
   CARD DESCRIPTION (.fp-card__description)
   Replaces: baseDescriptionStyles in createContentCard()
   Values:
     color → PANEL_COLORS.TEXT_SECONDARY (var(--panel-text-secondary))
     margin: 0
     font-size: 13px
     line-height: 1.4
     word-wrap: break-word; word-break: break-word
   ============================================================================ */

.fp-card__description {
  color: var(--panel-text-secondary);
  margin: 0;
  word-wrap: break-word;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.4;
}

/* ============================================================================
   CARD ICON (.fp-card__icon)
   Replaces: inline style="display: inline-flex; align-items: center;
   margin-right: 6px;" on the icon <span> inside the title
   ============================================================================ */

.fp-card__icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

/* ============================================================================
   SECTION TITLE (.fp-section-title)
   Retained for potential future use. createSectionTitle() was removed
   (zero call sites found in codebase audit), but these classes remain
   available if section titles are needed later.
   ============================================================================ */

.fp-section-title {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--panel-text-primary);
}

.fp-section-title__icon {
  display: flex;
  align-items: center;
  color: var(--panel-primary);
}

/* ============================================================================
   CARD MODIFIER: Section Label Title (.fp-card--section)
   Replaces: customStyles.title inline string used in createRadioGroup() and
   inline <span style="..."> used in filter_panel.js amenity card title.
   Both had identical values: uppercase, 0.5px letter-spacing, 0.8rem, 400 weight.

   Original inline values:
     text-transform: uppercase; letter-spacing: 0.5px;
     font-size: 0.8rem; font-weight: 400;

   Migrated from (Priority 7C):
     01-radio_group_create.js line 84 (customStyles.title)
     03-filter_panel.js line 109 (<span style="...">)
   ============================================================================ */

.fp-card--section .fp-card__title {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
  font-weight: 400;
}

/* ============================================================================
   REFERRAL CARD (.referral-card)
   Replaces: inline styles on referral/discount card rows in
   01-project_information.js (7 identical cards inside the "Other Ways To
   Support" content card afterContent).

   Each card is a gradient row with a title and an icon-badge link.
   The default gradient flows left (to left); the hero banner variant
   uses .referral-card--right to flow right (to right).

   Original inline values:
     wrapper:  padding: 0
     row:      background: linear-gradient(to left, #3e6ae1, rgba(20,20,20,0.9));
               border-radius: 8px; padding: 12px 16px; margin-bottom: 4px;
               display: flex; align-items: center;
               box-shadow: 0 2px 6px rgba(0,0,0,0.1)
     text:     flex: 1 1 auto
     heading:  margin: 0; color: #fff; font-size: 15px; font-weight: 400;
               letter-spacing: -0.2px
     badge:    background: rgba(0,0,0,0.35); border-radius: 6px;
               padding: 6px 10px; font-size: 11px; color: #fff;
               letter-spacing: 0.5px; font-weight: 300;
               box-shadow: 0 2px 8px rgba(0,0,0,0.15); text-align: right
     link:     text-decoration: none; color: #fff

   MIGRATION NOTE: Fixed typo "font-weight: 4o0" → "font-weight: 400"
   (was present on all 14 original card headings in both JS files).

   Migrated from:
     01-project_information.js lines 198-320 (7 cards)
     discounts-button.js lines 33-156 (7 cards — file deleted, was dead code)
   ============================================================================ */

/* Wrapper — zero padding (replaces <div style="padding: 0;">) */
.referral-card-wrapper {
  padding: 0;
}

/* Row — subtle dark background matching .evse-card style */
.referral-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.2s;
}

.referral-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Modifier: extra top margin (The Fork & Betclic had margin-top: 4px) */
.referral-card--spaced {
  margin-top: 4px;
}

/* Variant: same style, kept for backwards compatibility */
.referral-card--right {
  background: rgba(255, 255, 255, 0.03);
}

/* Text container — flex fill */
.referral-card__text {
  flex: 1 1 auto;
}

/* Heading typography */
.referral-card__heading {
  margin: 0;
  color: var(--panel-text-primary);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.2px;
}

/* Badge / icon area */
.referral-card__badge {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--panel-text-primary);
  letter-spacing: 0.5px;
  font-weight: 300;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  text-align: right;
}

/* Link — wraps the entire card when used inside a grid layout */
.referral-card__link {
  text-decoration: none;
  color: var(--panel-text-primary);
  display: block;
}

/* ============================================================================
   HERO BANNER TYPOGRAPHY (.info-hero__title, .info-hero__version)
   Used inside .info-hero-header__inner (the new header structure).
   The old .info-hero container class has been replaced by .info-hero-header.

   Original inline values:
     title:   margin: 0; color: #fff; font-size: 17px; font-weight: 500;
              letter-spacing: -0.2px
     version: margin: 5px 0 0; color: rgba(255,255,255,0.7); font-size: 12px

   Migrated from:
     01-project_information.js lines 85-95
   ============================================================================ */

.info-hero__title {
  margin: 0;
  color: var(--panel-text-primary);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.info-hero__version {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* ============================================================================
   CHANGELOG (.changelog)
   Replaces: inline styles on changelog sections in 01-project_information.js
   Original inline values:
     container: display: flex; flex-direction: column; gap: 12px
     section:   background: rgba(10,10,10,0.4); padding: 16px; border-radius: 8px
     heading:   margin: 0 0 8px
     list:      margin: 0; padding-left: 16px

   Migrated from:
     01-project_information.js lines 352-368
   ============================================================================ */

.changelog {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.changelog__section {
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  border-radius: 8px;
  transition: background 0.2s;
}

.changelog__section:hover {
  background: rgba(255, 255, 255, 0.06);
}

.changelog__heading {
  margin: 0 0 8px;
}

.changelog__list {
  margin: 0;
  padding-left: 16px;
}

/* ============================================================================
   CREDITS FOOTER (.info-credits)
   Replaces: inline styles on the credits section in 01-project_information.js
   Original inline values:
     separator: margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.08);
                padding-top: 18px
     row:       display: flex; justify-content: space-between;
                font-size: 12px; color: rgba(255,255,255,0.5)

   Migrated from:
     01-project_information.js lines 383-388
   ============================================================================ */

.info-credits {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
}

.info-credits__row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================================================
   INFO PANEL BODY (.info-panel-body)
   Wraps the main content of the project info panel, matching the
   #chargerDetailBody pattern from charger-detail.css (padding: 16px 20px).
   ============================================================================ */

.info-panel-body {
  padding: 16px 20px;
}

/* ============================================================================
   INFO HERO HEADER (.info-hero-header)
   Modelled after .charger-header-gradient — a full-bleed gradient header
   that wraps the hero banner at the top of the info panel.
   Matches: border-radius, overflow, margin, box-shadow from charger-detail.css.
   ============================================================================ */

.info-hero-header {
  /* Matches .charger-header-gradient pattern — no negative margins, sits within .fp-content padding */
  margin-bottom: 24px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px var(--cdp-shadow-strong);
  background: linear-gradient(to right, var(--panel-primary), rgba(20, 20, 20, 0.9));
  flex-shrink: 0; /* Prevent collapse in flex container */
}

/* Inner content of the hero header — padding and layout */
.info-hero-header__inner {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 60px; /* Explicit height prevents parent collapse in flex context */
}

/* ============================================================================
   REFERRAL CARD COMPACT (.referral-card--compact)
   Modifier for referral cards displayed in a 2-column grid.
   Adjusts the card layout to stack vertically (icon on top, text below)
   for narrower column widths. Matches the compact card approach from
   charger-detail.css (.fp-card--compact).
   ============================================================================ */

/* Grid-aware wrapper: fill grid cell height so cards in the same row match */
.card-grid-2col .referral-card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-grid-2col .referral-card__link {
  flex: 1;
  display: flex;
}

.card-grid-2col .referral-card {
  flex: 1;
  margin-bottom: 0; /* grid gap handles spacing */
}

/* Odd last card — span full width of both columns */
.card-grid-2col .referral-card-wrapper:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.referral-card--compact {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px;
  gap: 8px;
  min-height: 80px;
  justify-content: center;
}

.referral-card--compact .referral-card__text {
  flex: none;
}

.referral-card--compact .referral-card__heading {
  font-size: 12px;
  line-height: 1.3;
}

.referral-card--compact .referral-card__badge {
  padding: 6px 8px;
}

/* ============================================================================
   COFFEE LINK (.info-coffee-link)
   Replaces: inline style on the "Buy Us a Coffee" anchor wrapper
   Original: text-decoration: none; display: block; margin-top: 15px

   Migrated from:
     01-project_information.js line 138
   ============================================================================ */

.info-coffee-link {
  text-decoration: none;
  display: block;
  margin-top: 15px;
}