/* Paragraph Type Coupon */
/* Coupon Card Node */
.coupon-card {
  border: 1px solid #ccc;
  border-radius: 5px;
  max-width: 350px;
  width: 100%;
  margin: 1rem auto;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-family: 'Arial', 'Helvetica', sans-serif;
  text-align: center;
}

.coupon-image img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eee;
}

.coupon-content {
  padding: 1rem;
}

.coupon-type {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700 !important; /* Bold with override */
  line-height: 1.2;
  color: #d9534f !important; /* Force color */
  font-family: 'Georgia', serif;
  text-transform: uppercase;
  text-align: center;
}

.coupon-category {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700 !important; /* Bold with override */
  line-height: 1.4;
  color: black !important; /* Force color */
  text-align: center;
}

.coupon-duration {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700 !important; /* Bold with override */
  line-height: 1.3;
  color: black !important; /* Force color */
  font-family: 'Arial', sans-serif;
  text-align: center;
}

.coupon-code img {
  width: 100px;
  height: 100px;
  margin: 0 auto 5px;
  display: block;
}

.coupon-code {
  margin-bottom: 0.5rem;
  font-weight: 700 !important; /* Bold with override */
}

.coupon-pdf a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #07f80b;
  color: black;
  text-decoration: none;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  font-family: 'Arial', sans-serif;
  text-align: center;
  width: 50%;
  margin: 5px auto;
}

/* Responsive Grid Styling */
.views-view-responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  padding: 0 1rem;
}

.views-col {
  display: flex;
  justify-content: center;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .coupon-card {
    max-width: 100%;
    margin: 0.5rem auto;
  }
  .coupon-type {
    font-size: 1.1rem;
  }
  .coupon-category {
    font-size: 0.9rem;
  }
  .coupon-duration {
    font-size: 0.8rem;
  }
  .coupon-pdf a {
    width: 90%;
    padding: 0.4rem 0.8rem;
  }
  .views-view-responsive-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
}

/* Bold field labels */
.field__label {
  font-weight: bold;
}

/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/
.banner-wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
}
.banner-list {
  list-style: none; /* Remove bullets */
  margin: 0;
  padding: 0;
}
.banner-row {
  background-color: #f5f5f5; /* Or background-image */
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* Adjust as needed */
  width: 100%;
}
.field-banner {
  max-height: 100%;
  width: auto;
}
.field-title {
  font-size: 24px;
  margin-left: 20px;
  color: #333;
}

/* Style exposed filters form */
.views-exposed-form .form-row {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  justify-content: space-between; /* Space filters evenly */
  gap: 10px; /* Small gap between fields */
}
.views-exposed-form .form-item {
  flex: 1; /* Equal width for each field */
  max-width: 300px; /* Cap width at 200px */
}
.views-exposed-form .form-item input[type="text"] {
  width: 100%; /* Fill container */
  max-width: 180px; /* Slightly smaller than container */
}


/* Menu Item Node */
.node--type-menu-item {
  border: 1px solid var(--r-br, #ccc) !important;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
  margin: 1rem auto;
  background: var(--r-bg, #fff);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-family: 'Arial', 'Helvetica', sans-serif;
  text-align: center;
}

/* Support for different view modes */
.node--type-menu-item.node--view-mode-default,
.node--type-menu-item.node--view-mode-teaser {
  border: 1px solid var(--r-br, #ccc) !important;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
  margin: 1rem auto;
  background: var(--r-bg, #fff);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-family: 'Arial', 'Helvetica', sans-serif;
  text-align: center;
}

/* Image (centered, max-width 400px) */
.node--type-menu-item .field--name-field-item-image {
  display: flex;
  justify-content: center;
  margin: 0;
}

.node--type-menu-item .field--name-field-item-image img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eee;
}

/* Content Wrapper */
.node--type-menu-item .node__content {
  padding: 1rem;
}

/* Price (like coupon-type, centered, US dollars) */
.node--type-menu-item .field--name-field-item-price {
  text-align: center;
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--r-h1, #d9534f) !important;
  font-family: 'Georgia', serif;
  text-transform: uppercase;
}

/* Description (like coupon-category, centered) */
.node--type-menu-item .field--name-field-item-short-description {
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.4;
  color: var(--r-tx, #000) !important;
}

/* Menu Link (like coupon-pdf, centered) */
.node--type-menu-item .field--name-field-menu-link {
  text-align: center;
}

.node--type-menu-item .field--name-field-menu-link a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--r-bg-bt, #07f80b);
  color: var(--r-tx-bt, #000);
  text-decoration: none;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  font-family: 'Arial', 'Helvetica', sans-serif;
  width: 50%;
  margin: 5px auto;
}

.node--type-menu-item .field--name-field-menu-link a:hover {
  background: var(--r-bg-bt-h, #05c409);
}

/* Hide Secondary Fields */
.node--type-menu-item .field--name-langcode {
  font-size: 0.85rem;
  color: #888;
  margin-top: 1rem;
}

.node--type-menu-item .field--name-entity-print-view-pdf,
.node--type-menu-item .field--name-entity-print-view-epub,
.node--type-menu-item .field--name-entity-print-view-word-docx {
  display: none;
}

/* Ensure Hidden Labels */
.node--type-menu-item .field--label-hidden .field__label {
  display: none;
}

/* Views Support (e.g., Kiosk or similar) */
.views-view-responsive-grid .node--type-menu-item,
.view .views-row .node--type-menu-item {
  border: 1px solid var(--r-br, #ccc) !important;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
  margin: 1rem auto;
  background: var(--r-bg, #fff);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-family: 'Arial', 'Helvetica', sans-serif;
  text-align: center;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .node--type-menu-item,
  .views-view-responsive-grid .node--type-menu-item,
  .view .views-row .node--type-menu-item {
    max-width: 100%;
    margin: 0.5rem auto;
  }
  .node--type-menu-item .field--name-field-item-image img {
    max-width: 100%;
  }
  .node--type-menu-item .field--name-field-item-price {
    font-size: 1.1rem;
  }
  .node--type-menu-item .field--name-field-item-short-description {
    font-size: 0.9rem;
  }
  .node--type-menu-item .field--name-field-menu-link a {
    width: 90%;
    padding: 0.4rem 0.8rem;
  }
}

/* Public Menu View Grid */
.public-menu-grid.views-view-responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  padding: 0 1rem;
}

/* Coupon Card Node */
.public-menu-grid .node--type-coupon-card.node--view-mode-public-menu-grid.coupon-card {
  border: 1px solid #ccc !important; /* Match .coupon-card */
  border-radius: 5px !important;
  max-width: 350px !important; /* Match .coupon-card */
  width: 100%;
  margin: 1rem auto;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  font-family: 'Arial', 'Helvetica', sans-serif;
  text-align: center;
  padding: 0; /* Remove padding to match .coupon-card */
}

/* Coupon Image */
.public-menu-grid .node--type-coupon-card.node--view-mode-public-menu-grid .coupon-image img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eee !important; /* Match .coupon-card */
  margin: 0;
}

/* Title (like .coupon-type) */
.public-menu-grid .coupon-card .coupon-type,
.views-view-responsive-grid[data-view-dom-id*="public_menu"] .coupon-card .coupon-type,
.views-view-responsive-grid.view-public-menu .coupon-card .coupon-type,
.public-menu-grid .coupon-card-content .field--name-title,
.views-view-responsive-grid[data-view-dom-id*="public_menu"] .coupon-card-content .field--name-title,
.views-view-responsive-grid.view-public-menu .coupon-card-content .field--name-title,
.views-view-responsive-grid .coupon-type,
.views-view-responsive-grid .coupon-type a {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700 !important;
  line-height: 1.2;
  color: #0a0a0a !important;
  font-family: 'Georgia', serif;
  text-transform: uppercase;
  text-align: center;
}

/* Button Url (like .button-urly) */
.public-menu-grid .node--type-coupon-card.node--view-mode-public-menu-grid .button-url {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700 !important;
  line-height: 1.4;
  color: #f11010 !important;
  text-align: center;
}

/* Short Description (like .coupon-category) */
.public-menu-grid .node--type-coupon-card.node--view-mode-public-menu-grid .coupon-category {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700 !important;
  line-height: 1.4;
  color: #0b0b0b !important;
  text-align: center;
}

/* Price (like .coupon-duration) */
.public-menu-grid .node--type-coupon-card.node--view-mode-public-menu-grid .coupon-duration {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700 !important;
  line-height: 1.3;
  color: #000 !important;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

/* Points */
.public-menu-grid .node--type-coupon-card.node--view-mode-public-menu-grid .coupon-points {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700 !important;
  line-height: 1.3;
  color: #000 !important;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

/* Purchase Points */
.public-menu-grid .node--type-coupon-card.node--view-mode-public-menu-grid .coupon-purchase-points {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700 !important;
  line-height: 1.3;
  color: #000 !important;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

/* Content Wrapper */
.public-menu-grid .node--type-coupon-card.node--view-mode-public-menu-grid .coupon-content {
  padding: 1rem !important; /* Match .coupon-card */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .public-menu-grid.views-view-responsive-grid {
    grid-template-columns: 1fr;
  }
  .public-menu-grid .node--type-coupon-card.node--view-mode-public-menu-grid.coupon-card {
    max-width: 100% !important;
    margin: 0.5rem auto;
  }
}

.coupon-tracker-spend-points-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.coupon-tracker-spend-points-form .form-item {
  margin-bottom: 1rem;
}
.coupon-tracker-spend-points-form .form-submit {
  background: #d9534f;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
}

/* Button URL */
.public-menu-grid .coupon-card .button-url,
.views-view-responsive-grid[data-view-dom-id*="public_menu"] .coupon-card .button-url,
.views-view-responsive-grid.view-public-menu .coupon-card .button-url,
.coupon-card .button-url {
  margin-bottom: 0.5rem;
  text-align: center;
}

.public-menu-grid .coupon-card .button-url .redeem-button,
.views-view-responsive-grid[data-view-dom-id*="public_menu"] .coupon-card .button-url .redeem-button,
.views-view-responsive-grid.view-public-menu .coupon-card .button-url .redeem-button,
.coupon-card .button-url .redeem-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff !important;
  background: #17f707 !important;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s;
}

.public-menu-grid .coupon-card .button-url .redeem-button:hover,
.views-view-responsive-grid[data-view-dom-id*="public_menu"] .coupon-card .button-url .redeem-button:hover,
.views-view-responsive-grid.view-public-menu .coupon-card .button-url .redeem-button:hover,
.coupon-card .button-url .redeem-button:hover {
  background: #ebeb76 !important;
}

/* Debug */
.public-menu-grid .coupon-card .button-url-debug,
.views-view-responsive-grid[data-view-dom-id*="my_menu"] .coupon-card .button-url-debug,
.views-view-responsive-grid.view-public-menu .coupon-card .button-url-debug,
.coupon-card .button-url-debug {
  color: red;
  font-style: italic;
  text-align: center;
}