/* cards-buttons-fix.css — for the navbar category pages:
   (1) red CTA buttons -> homepage blue (#00b3fb) pill design;
   (2) Odoo .my-card flip cards: show the hover-revealed description by default.
   Reversible: remove the <link> to this file. */

/* ===== (1) Red CTA buttons -> homepage blue pill (.nh-btn--cyan #00b3fb) =====
   Three red variants exist on these Odoo pages:
   A) inline gradient  background-image: linear-gradient(135deg,#C21C1C,#EC3636)  (rgb 194,28,28)
   B) inline solid     background-color: rgb(236,54,54) / #EC3636
   C) Odoo class       .bg-o-color-1  (theme red #D70909) */
.btn[style*="194, 28, 28"], .btn[style*="C21C1C"], .btn[style*="c21c1c"],
.btn[style*="236, 54, 54"], .btn[style*="EC3636"], .btn[style*="ec3636"],
.btn-fill-custom[style*="194, 28, 28"], .btn-fill-custom[style*="C21C1C"],
.btn-fill-custom[style*="236, 54, 54"], .btn-fill-custom[style*="EC3636"],
.btn.bg-o-color-1, .btn-fill-custom.bg-o-color-1, a.btn.bg-o-color-1 {
  background-image: none !important;
  background-color: #00b3fb !important;
  border-color: #00b3fb !important;
  color: #010202 !important;
  box-shadow: 0 8px 24px rgba(0, 179, 251, .28) !important;
}
.btn[style*="194, 28, 28"]:hover, .btn[style*="C21C1C"]:hover, .btn[style*="c21c1c"]:hover,
.btn[style*="236, 54, 54"]:hover, .btn[style*="EC3636"]:hover, .btn[style*="ec3636"]:hover,
.btn-fill-custom[style*="194, 28, 28"]:hover, .btn-fill-custom[style*="C21C1C"]:hover,
.btn-fill-custom[style*="236, 54, 54"]:hover, .btn-fill-custom[style*="EC3636"]:hover,
.btn.bg-o-color-1:hover, .btn-fill-custom.bg-o-color-1:hover {
  background-color: #27c2ff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(0, 179, 251, .4) !important;
}
/* page-specific red buttons defined by their own class */
.ebook-form__submit {
  background-image: none !important; background-color: #00b3fb !important;
  color: #010202 !important; border-color: #00b3fb !important;
  box-shadow: 0 8px 24px rgba(0, 179, 251, .28) !important;
}
.ebook-form__submit:hover {
  background-color: #27c2ff !important; box-shadow: 0 14px 32px rgba(0, 179, 251, .4) !important;
}

/* keep the label dark & readable on the blue pill (labels use light text-o-color classes) */
.btn[style*="194, 28, 28"] span, .btn[style*="194, 28, 28"] font,
.btn[style*="C21C1C"] span, .btn[style*="c21c1c"] span,
.btn[style*="236, 54, 54"] span, .btn[style*="EC3636"] span, .btn[style*="ec3636"] span,
.btn.bg-o-color-1 span, .btn.bg-o-color-1 font, .btn-fill-custom.bg-o-color-1 span,
.btn-fill-custom[style*="194, 28, 28"] span, .btn-fill-custom[style*="236, 54, 54"] span {
  color: #010202 !important; -webkit-text-fill-color: #010202 !important;
}

/* ===== (2) .my-card flip cards: reveal the description by default =====
   Front shows icon + heading; the .back-content (description) is opacity:0/height:0 until
   hover. Show it permanently and let the card grow. The red hover bg is already neutralised
   to cyan by card-nored-hover.css, so the card stays cyan with dark, readable text. */
#wrap .my-card, .my-card { height: auto !important; overflow: visible !important; }
#wrap .my-card .icon-heading-wrapper, .my-card .icon-heading-wrapper {
  height: auto !important; transform: none !important;
}
#wrap .my-card .back-content, .my-card .back-content {
  opacity: 1 !important; transform: none !important; height: auto !important;
}

/* ===== (3) Black buttons -> red (#00b3fb) pill with BLACK text =====
   Odoo dark CTAs use .bg-900/.bg-800/.bg-black (#212529) and .btn-secondary (#181818).
   The :not(#zz):not(#zz) ID-boost beats the wm-theme rule `#wrap .btn.bg-900{color:#fff}`.
   (The dark-navy gradient CTAs — hero-ai__cta--primary / ebook-cta__btn--primary,
   rgb(15,23,41)->rgb(30,41,59) — are navy, not black, and are intentionally left alone.) */
.btn.bg-900:not(#zz):not(#zz), .btn.bg-800:not(#zz):not(#zz), .btn.bg-black:not(#zz):not(#zz),
a.btn.bg-900:not(#zz):not(#zz), .btn.btn-dark:not(#zz):not(#zz), .btn-dark:not(#zz):not(#zz),
.btn-fill-custom.bg-900:not(#zz):not(#zz), .btn-fill-custom.bg-800:not(#zz):not(#zz),
.btn-fill-custom.bg-black:not(#zz):not(#zz), .btn-secondary:not(#zz):not(#zz) {
  background-image: none !important;
  background-color: #00b3fb !important;
  border-color: #00b3fb !important;
  color: #000 !important;
}
.btn.bg-900:not(#zz):not(#zz) span, .btn.bg-900:not(#zz):not(#zz) font,
.btn.bg-800:not(#zz):not(#zz) span, .btn.bg-black:not(#zz):not(#zz) span,
.btn-fill-custom.bg-900:not(#zz):not(#zz) span, .btn-fill-custom.bg-900:not(#zz):not(#zz) font,
.btn-fill-custom.bg-800:not(#zz):not(#zz) span, .btn-dark:not(#zz):not(#zz) span,
.btn-secondary:not(#zz):not(#zz) span, .btn-secondary:not(#zz):not(#zz) font {
  color: #000 !important; -webkit-text-fill-color: #000 !important;
}
.btn.bg-900:not(#zz):not(#zz):hover, .btn-fill-custom.bg-900:not(#zz):not(#zz):hover,
.btn.bg-800:not(#zz):not(#zz):hover, .btn.bg-black:not(#zz):not(#zz):hover,
.btn-dark:not(#zz):not(#zz):hover, .btn-secondary:not(#zz):not(#zz):hover {
  background-color: #27c2ff !important; transform: translateY(-2px) !important;
}