/* ═══════════════════════════════════════════════════════════
   maximum.style · Brand Override (JeuDérm Editorial Pastel)
   Verifiziert auf jeuderm-fachseminar.web.app + Kongress-gala-site
   Scope: nur Frontend (web.assets_frontend) — Admin bleibt unverändert
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Root-Tokens (Brand-CSS-Variablen) ── */
:root {
  /* Brand Primary Pair */
  --ms-mint:              #9DCAC6;
  --ms-mint-deep:         #6e9d99;
  --ms-mint-extra-deep:   #547673;
  --ms-rose:              #F7CCE8;
  --ms-rose-deep:         #c88eaf;
  --ms-dark-teal:         #1c2a2d;
  --ms-dark-teal-hover:   #243336;

  /* Neutrals */
  --ms-bg:                #f7f7f5;
  --ms-bg-soft:           #fcfbfa;
  --ms-paper:             #ffffff;
  --ms-text:              #1f2527;
  --ms-text-soft:         #516064;
  --ms-heading:           #182022;
  --ms-line:              rgba(24, 32, 34, 0.10);
  --ms-line-strong:       rgba(24, 32, 34, 0.16);
  --ms-cream:             #f0f0ee;

  /* Radii */
  --ms-radius-sm:         14px;
  --ms-radius-md:         22px;
  --ms-radius-lg:         32px;
  --ms-pill:              9999px;

  /* Shadows */
  --ms-shadow-sm:         0 10px 30px rgba(18, 28, 31, 0.05);
  --ms-shadow-md:         0 20px 55px rgba(18, 28, 31, 0.08);
  --ms-shadow-lg:         0 30px 90px rgba(18, 28, 31, 0.10);

  /* Gradients */
  --ms-grad-primary:      linear-gradient(135deg, #F7CCE8 0%, #9DCAC6 100%);
  --ms-grad-footer:       linear-gradient(180deg, #1f2729 0%, #171d1f 100%);

  /* Override Odoo Theme Variables (greift in Bootstrap-basierten Themes) */
  --o-color-1:            #6e9d99;
  --o-color-2:            #1c2a2d;
  --o-color-3:            #c88eaf;
  --o-color-4:            #f7f7f5;
  --o-color-5:            #182022;

  --o-brand-primary:      #6e9d99;
  --o-brand-secondary:    #c88eaf;
}

/* ── Body / Frontend-Container nur ── */
body.o_website_layout,
#wrapwrap {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  color: var(--ms-text);
  background-color: var(--ms-bg);
}

#wrapwrap h1, #wrapwrap h2, #wrapwrap h3,
.s_text_block h1, .s_text_block h2, .s_text_block h3,
.oe_structure h1, .oe_structure h2, .oe_structure h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800;
  color: var(--ms-heading);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

#wrapwrap h4, #wrapwrap h5 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ── Eyebrow / Uppercase-Labels ── */
#wrapwrap .o_subtitle,
#wrapwrap .text-uppercase {
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--ms-mint-deep);
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ── Buttons (Pill mit Mint→Rose-Gradient) ── */
#wrapwrap .btn-primary,
#wrapwrap a.btn-primary,
.oe_website_login_container .btn-primary {
  background: var(--ms-grad-primary) !important;
  color: var(--ms-heading) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: var(--ms-pill) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 34px rgba(24, 32, 34, 0.08);
  transition: transform .2s, box-shadow .25s;
  padding: 12px 28px;
}
#wrapwrap .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(24, 32, 34, 0.14), 0 0 24px rgba(157, 202, 198, 0.25);
  color: var(--ms-heading) !important;
}

#wrapwrap .btn-secondary,
#wrapwrap a.btn-secondary {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--ms-heading) !important;
  border: 1px solid var(--ms-line-strong) !important;
  border-radius: var(--ms-pill) !important;
  font-weight: 600;
  padding: 12px 28px;
}
#wrapwrap .btn-secondary:hover {
  border-color: var(--ms-mint-deep) !important;
  color: var(--ms-mint-deep) !important;
}

/* Outline / Ghost Buttons */
#wrapwrap .btn-outline-primary {
  background: transparent !important;
  color: var(--ms-mint-deep) !important;
  border: 1px solid var(--ms-mint-deep) !important;
  border-radius: var(--ms-pill) !important;
}
#wrapwrap .btn-outline-primary:hover {
  background: rgba(157, 202, 198, 0.12) !important;
}

/* ── Btn-Light (Odoo Default Light-Buttons → Secondary Pill) ── */
#wrapwrap .btn-light,
#wrapwrap a.btn-light {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--ms-heading) !important;
  border: 1px solid var(--ms-line-strong) !important;
  border-radius: var(--ms-pill) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}
#wrapwrap .btn-light:hover {
  background: white !important;
  border-color: var(--ms-mint-deep) !important;
  color: var(--ms-mint-deep) !important;
}

/* ── Generischer .btn-Fallback (alle anderen Button-Varianten) ── */
#wrapwrap a.btn:not(.btn-primary):not(.btn-secondary):not(.btn-light):not(.btn-outline-primary):not(.btn-close):not(.btn-link),
#wrapwrap button.btn:not(.btn-primary):not(.btn-secondary):not(.btn-light):not(.btn-outline-primary):not(.btn-close):not(.btn-link) {
  border-radius: var(--ms-pill) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ── Header-Nav-Buttons (Odoo-Theme-Spezialklassen) ── */
#wrapwrap .o_navlink_background,
#wrapwrap a.o_navlink_background,
#wrapwrap .o_nav_link_btn,
#wrapwrap a.o_nav_link_btn,
#wrapwrap .btn.rounded-circle {
  background: var(--ms-grad-primary) !important;
  color: var(--ms-heading) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: var(--ms-pill) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 22px;
  width: auto !important;
  height: auto !important;
}
#wrapwrap .o_navlink_background:hover,
#wrapwrap a.o_navlink_background:hover,
#wrapwrap .o_nav_link_btn:hover,
#wrapwrap .btn.rounded-circle:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(24, 32, 34, 0.10), 0 0 18px rgba(157, 202, 198, 0.20);
  color: var(--ms-heading) !important;
}

/* ── Search-Button (Such-Icon in Navbar) ── */
#wrapwrap .oe_search_button,
#wrapwrap button.oe_search_button {
  background: transparent !important;
  color: var(--ms-mint-deep) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: var(--ms-pill) !important;
}
#wrapwrap .oe_search_button:hover {
  background: rgba(157, 202, 198, 0.12) !important;
  border-color: var(--ms-mint-deep) !important;
}

/* ── Accordion-Buttons (FAQ-Style-Expander) ── */
#wrapwrap .accordion-button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  color: var(--ms-heading) !important;
  background: var(--ms-paper) !important;
  letter-spacing: -0.005em;
}
#wrapwrap .accordion-button:not(.collapsed) {
  background: rgba(157, 202, 198, 0.08) !important;
  color: var(--ms-mint-deep) !important;
  box-shadow: none;
}
#wrapwrap .accordion-button:focus {
  border-color: var(--ms-mint-deep);
  box-shadow: 0 0 0 0.25rem rgba(157, 202, 198, 0.18);
}
#wrapwrap .accordion-item {
  border-radius: var(--ms-radius-md) !important;
  border: 1px solid var(--ms-line);
  overflow: hidden;
  margin-bottom: 8px;
}

/* ── Btn-Close (Modals, Pop-overs) — minimal anpassen ── */
#wrapwrap .btn-close {
  border-radius: var(--ms-pill) !important;
  opacity: 0.6;
}
#wrapwrap .btn-close:hover { opacity: 1; }

/* ── Footer-Links: Mint-deep Underline on hover (Brand-touch) ── */
#wrapwrap footer.o_footer a:not(.btn):not(.navbar-brand),
#wrapwrap footer.o_footer a:not(.btn):not(.navbar-brand) {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  transition: color .2s;
}
#wrapwrap footer.o_footer a:not(.btn):not(.navbar-brand):hover {
  color: white !important;
  text-decoration: underline;
  text-decoration-color: var(--ms-mint);
  text-underline-offset: 3px;
}

/* ── Cards (22px Radius) ── */
#wrapwrap .card,
#wrapwrap .s_card {
  border-radius: var(--ms-radius-md);
  border: 1px solid var(--ms-line);
  box-shadow: none;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
#wrapwrap .card:hover {
  transform: translateY(-4px);
  border-color: var(--ms-mint-deep);
  box-shadow: var(--ms-shadow-md);
}

/* ── Inputs / Forms (14px Radius, Mint-Focus) ── */
#wrapwrap input[type="text"],
#wrapwrap input[type="email"],
#wrapwrap input[type="password"],
#wrapwrap input[type="tel"],
#wrapwrap input[type="search"],
#wrapwrap textarea,
#wrapwrap select,
#wrapwrap .form-control {
  border-radius: var(--ms-radius-sm) !important;
  border: 1px solid var(--ms-line-strong) !important;
  font-family: 'Inter', sans-serif !important;
}
#wrapwrap input:focus,
#wrapwrap textarea:focus,
#wrapwrap select:focus,
#wrapwrap .form-control:focus {
  border-color: var(--ms-mint-deep) !important;
  box-shadow: 0 0 0 4px rgba(157, 202, 198, 0.22) !important;
  outline: none;
}

/* ── Navbar / Header ── */
#wrapwrap .navbar,
#wrapwrap header.o_header_standard {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ms-line);
}
#wrapwrap .navbar-brand,
#wrapwrap .o_navbar_brand {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ms-heading) !important;
}
#wrapwrap .navbar a.nav-link {
  color: var(--ms-text) !important;
  font-weight: 500;
}
#wrapwrap .navbar a.nav-link:hover {
  color: var(--ms-mint-deep) !important;
}

/* ── Footer (Dark-Teal-Gradient) ── */
#wrapwrap footer.o_footer {
  background: var(--ms-grad-footer) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
#wrapwrap footer.o_footer h1,
#wrapwrap footer.o_footer h2,
#wrapwrap footer.o_footer h3,
#wrapwrap footer.o_footer h4,
#wrapwrap footer.o_footer a {
  color: white !important;
}

/* ── Links ── */
#wrapwrap a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--ms-mint-deep);
  text-decoration: none;
}
#wrapwrap a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Product-Cards im Shop (eCommerce) ── */
#wrapwrap .oe_product,
#wrapwrap .oe_product_cart,
#wrapwrap .o_wsale_product_grid_wrapper .o_wsale_product_card {
  border-radius: var(--ms-radius-md);
  border: 1px solid var(--ms-line);
  background: var(--ms-paper);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
#wrapwrap .oe_product:hover,
#wrapwrap .o_wsale_product_card:hover {
  transform: translateY(-4px);
  border-color: var(--ms-mint-deep);
  box-shadow: var(--ms-shadow-md);
}

/* ── Tabellen-Headers / Eyebrow-Style ── */
#wrapwrap .table thead th {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ms-text-soft);
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ── Produktdetail: Bild zusätzlich um ~40% verkleinern ── */
/* Odoos product_page_image_width=50_pc gibt 50% Spalte;
   wir scalieren das eigentliche Bild auf 60% innerhalb dieser Spalte → ~30% Gesamtbreite. */
#wrapwrap #o_product_main .o_wsale_product_images img,
#wrapwrap .o_wsale_product_images .product_detail_img,
#wrapwrap .o_wsale_product_images .img.product_detail_img,
#wrapwrap #o_product_main img.h-auto {
  max-width: 60% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Container darum zentrieren */
#wrapwrap .o_wsale_product_images,
#wrapwrap .o_wsale_product_information .row {
  text-align: center;
}

/* ── Shop-Uebersicht: Produktkarten zentrieren + Brand-Color fuer Name + Preis hervorheben ── */
#wrapwrap .oe_product_cart .o_wsale_product_information {
  text-align: center;
  align-items: center;
}
#wrapwrap .oe_product_cart .o_wsale_product_information_text {
  width: 100%;
}
#wrapwrap .oe_product_cart .o_wsale_products_item_title,
#wrapwrap .oe_product_cart .o_wsale_products_item_title a {
  color: var(--ms-mint-deep) !important;
  font-weight: 700;
  letter-spacing: -0.005em;
}
#wrapwrap .oe_product_cart .o_wsale_products_item_title a:hover {
  color: var(--ms-mint-extra-deep) !important;
}
#wrapwrap .oe_product_cart .o_wsale_product_sub {
  justify-content: center !important;
  width: 100%;
}
#wrapwrap .oe_product_cart .product_price {
  text-align: center;
}
#wrapwrap .oe_product_cart .product_price .h6,
#wrapwrap .oe_product_cart .product_price > span:first-child {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--ms-heading);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ──────────────────────────────────────────────────────────────────────
   Bilder NIE auf opacity:0 stehen lassen, egal welche Odoo-Scroll-
   Animation der Editor anwendet. Defensive-CSS, damit verschiedene
   Designs/Snippets keine Bilder unsichtbar machen koennen.
   ────────────────────────────────────────────────────────────────────── */
#wrapwrap img.o_animate,
#wrapwrap img.o_anim_fade_in,
#wrapwrap img.o_anim_slide_in,
#wrapwrap img[class*="o_anim_"],
#wrapwrap img[class*="o_animate_"],
#wrapwrap img.o_we_custom_image {
  opacity: 1 !important;
  animation: none !important;
  animation-play-state: running !important;
  animation-fill-mode: none !important;
  visibility: visible !important;
}
/* gleiche Schutz-Regel fuer Bild-Container in Grid-Snippets */
#wrapwrap .o_grid_item_image img,
#wrapwrap .s_text_image img,
#wrapwrap .s_image_text img,
#wrapwrap .s_picture img {
  opacity: 1 !important;
  animation: none !important;
  visibility: visible !important;
}