/*
 * ==========================================================================
 * Algarve Command Centre Brand Theme for Postiz
 * ==========================================================================
 *
 * This custom stylesheet re-themes Postiz to align with the warm, high-contrast,
 * and elegant visual identity of the Algarve Command Centre.
 *
 * Design Tokens:
 *   - Eucalyptus: #3D5A5C (Primary brand color, headers, main actions, indicators)
 *   - Copper:     #B87333 (Accent brand color, hover/active states, visual highlights, tabs)
 *   - Sand:       #F5F5DC (Warm background color, card layers, light interfaces)
 *   - Shale:      #3F2A1E (Primary typography, dark high-contrast labels, rich borders)
 *
 * Base Design Principles:
 *   - Warm Light-Theme Posture: Leverages soft Sand backgrounds and Shale text for reading comfort.
 *   - Functional Glassmorphism: Semi-transparent backdrop-filtered panels (.glass-panel) for lightweight structure.
 *   - Tactile Micro-Interactions: Clear, high-contrast states on hovering, focusing, and selecting.
 * ==========================================================================
 */

/* --- Light Theme (Sand & Shale) --- */
:root,
.light,
.dark {
  /* --- Primary Backgrounds & Structure --- */
  --new-bgColor: #F5F5DC !important;               /* Sand - primary backdrop */
  --color-primary: #F5F5DC !important;             /* Sand - match backdrop */
  --new-bgColorInner: #FAF9F5 !important;          /* Soft Warm Cream - cards, panels */
  --new-back-drop: rgba(63, 42, 30, 0.45) !important; /* Shale backdrop for modals */
  --new-settings: #FAF9F5 !important;              /* Creamy background for settings */
  --new-bgLineColor: rgba(61, 90, 92, 0.12) !important; /* Grid lines */
  --new-small-strips: #FAF9F5 !important;
  --new-big-strips: #EBE8E0 !important;
  --new-col-color: #FAF9F5 !important;

  /* --- Brand Typography (Shale & Copper) --- */
  --new-textColor: 63 42 30 !important;            /* Shale as RGB digits (63 42 30) */
  --color-text: #3F2A1E !important;                /* Shale hex */
  --new-btn-text: #3F2A1E !important;              /* Default button/body text */
  --new-textItemFocused: #B87333 !important;       /* Copper for active tabs & items */
  --new-textItemBlur: #7D6B60 !important;          /* Softened Shale for inactive states */
  --color-text-muted: #7D6B60 !important;
  --color-input-text: #3F2A1E !important;

  /* --- Buttons & Brand Accents (Eucalyptus & Copper) --- */
  --new-btn-primary: #3D5A5C !important;           /* Eucalyptus - main primary button */
  --color-forth: #3D5A5C !important;               /* Eucalyptus */
  --color-seventh: #3D5A5C !important;             /* Eucalyptus */
  --new-btn-simple: #EBE8E0 !important;            /* Custom Light-Sand for secondary buttons */
  --new-ai-btn: #B87333 !important;                /* Copper - highlights AI capability premium-ness */
  --new-box-hover: rgba(184, 115, 51, 0.08) !important; /* Copper highlight on hover */
  --new-boxFocused: #FAF9F5 !important;

  /* --- Borders, Dividers & Tables --- */
  --new-sep: rgba(61, 90, 92, 0.15) !important;    /* Low-opacity Eucalyptus border */
  --new-border: rgba(61, 90, 92, 0.15) !important; /* Low-opacity Eucalyptus border */
  --color-table-border: rgba(61, 90, 92, 0.15) !important;
  --new-table-border: rgba(61, 90, 92, 0.15) !important;
  --new-blockSeparator: rgba(61, 90, 92, 0.1) !important;
  --new-table-header: #EBE8E0 !important;          /* Light sand for headers */
  --new-table-text: #7D6B60 !important;            /* Softened Shale text */
  --new-table-text-focused: #B87333 !important;    /* Copper highlight text in tables */

  /* --- Extra Utility & Highlight Colors --- */
  --border-preview: #B87333 !important;            /* Copper for active layout previews */
  --popup-color: rgba(61, 90, 92, 0.2) !important; /* Eucalyptus glow */
  --color-input: #FAF9F5 !important;               /* Soft warm input fill */
  --color-secondary: #FFFFFF !important;
  --color-third: #FFFFFF !important;
  --color-custom8: var(--new-btn-simple) !important;
  --color-custom50: #3D5A5C !important;            /* Eucalyptus for primary confirms */
  --color-custom51: #B87333 !important;            /* Copper accents */
  --color-custom52: #FAF9F5 !important;
  --color-custom53: #7D6B60 !important;
  --color-custom54: rgba(61, 90, 92, 0.15) !important;
  --color-custom55: #EBE8E0 !important;
  --menu-shadow: 0 8px 32px 0 rgba(63, 42, 30, 0.06) !important;
}

/* ==========================================================================
   Brand Logo Dynamic Swapping (CSS-driven, avoids complex HTML matches)
   ========================================================================== */

/* Hides the default 60x60 square sidebar logo paths and overlays custom logo */
svg[viewBox="0 0 60 60"] {
  display: inline-block !important;
  box-sizing: border-box !important;
  background-image: url(/custom-logo.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 44px !important;
  height: 44px !important;
  content: "" !important;
}

svg[viewBox="0 0 60 60"] * {
  display: none !important;
}

svg[viewBox="0 0 101 33"],
svg[viewBox="0 0 100 33"],
svg[class*="logo"],
[class*="logo"] svg,
[class*="Logo"] svg,
img[src*="logo.svg"],
img[src*="logo-text.svg"] {
  display: inline-block !important;
  box-sizing: border-box !important;
  background-image: url(/custom-logo.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  width: 140px !important;
  height: 40px !important;
  content: "" !important; /* Hides raw image elements from drawing */
}

/* Hide the vector paths of the inline SVGs so only our custom logo renders */
svg[viewBox="0 0 101 33"] *,
svg[viewBox="0 0 100 33"] *,
[class*="logo"] svg *,
[class*="Logo"] svg * {
  display: none !important;
}

/* ==========================================================================
   Functional Glassmorphism & Card styling overrides
   ========================================================================== */

.glass-panel,
.bg-bgColorInner,
.new-bgColorInner,
[class*="bgColorInner"],
.swal2-modal,
.dropdown-menu,
.mantine-Modal-modal,
.mantine-Paper-root {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(61, 90, 92, 0.15) !important;
  box-shadow: 0 8px 32px 0 rgba(63, 42, 30, 0.06) !important;
  color: #3F2A1E !important;
}

/* Specific button customizations to respect theme colors and hover states */
button[class*="btn-primary"],
button.bg-primary,
.bg-customColor50 {
  background-color: #3D5A5C !important;
  color: #FAF9F5 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button[class*="btn-primary"]:hover,
button.bg-primary:hover,
.bg-customColor50:hover {
  background-color: #B87333 !important; /* Transition to Copper on hover */
  color: #FFFFFF !important;
}

/* Simple/Secondary Buttons */
button[class*="btn-simple"],
button[class*="btn-secondary"] {
  background-color: #EBE8E0 !important;
  color: #3F2A1E !important;
  border: 1px solid rgba(61, 90, 92, 0.1) !important;
  transition: all 0.2s ease !important;
}

button[class*="btn-simple"]:hover,
button[class*="btn-secondary"]:hover {
  background-color: rgba(184, 115, 51, 0.1) !important; /* Soft Copper hue */
  color: #B87333 !important;
  border-color: rgba(184, 115, 51, 0.2) !important;
}

/* Base element mappings */
body {
  background: #F5F5DC !important;
  color: #3F2A1E !important;
}

/* Text selections & High-contrast elements */
::selection {
  background: rgba(184, 115, 51, 0.2) !important;
  color: #3F2A1E !important;
}

/* Focus outlines and input states */
input:focus,
textarea:focus,
select:focus {
  border-color: #B87333 !important; /* Copper focus accent */
  box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.15) !important;
  background-color: #FAF9F5 !important;
}

/* Override active navigation items */
[class*="active-item"],
[class*="focused-item"],
.is-selected {
  color: #B87333 !important;
  border-color: #B87333 !important;
}

/* ==========================================================================
   Surgical Contrast & UI Readability Fixes
   ========================================================================== */

/* 1. Left Sidebar Tidying (Remove Clunky Boxes & Borders) */
[id*="left-menu"],
[class*="Sidebar"],
[class*="sidebar"],
[class*="left-menu"] {
  background-color: #FAF9F5 !important; /* Crisp Warm Cream sidebar background */
  border-right: 1px solid rgba(61, 90, 92, 0.12) !important;
}

[class*="sidebar"] button,
[class*="sidebar"] a,
[class*="Sidebar"] button,
[class*="Sidebar"] a,
[class*="left-menu"] button,
[class*="left-menu"] a {
  border: none !important;                   /* Strip all clunky borders */
  box-shadow: none !important;               /* Remove clunky dropshadow boxes */
  background: transparent !important;        /* Pure transparent backing */
  border-radius: 8px !important;
  color: #7D6B60 !important;                  /* Muted Shale text */
  margin: 4px 8px !important;
  padding: 10px 14px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[class*="sidebar"] button:hover,
[class*="sidebar"] a:hover,
[class*="Sidebar"] button:hover,
[class*="Sidebar"] a:hover {
  background-color: rgba(61, 90, 92, 0.06) !important; /* Soft Eucalyptus glow */
  color: #3D5A5C !important;                  /* Rich Eucalyptus text */
}

/* Sidebar Active State */
[class*="sidebar"] [class*="active"],
[class*="Sidebar"] [class*="active"],
[class*="left-menu"] [class*="active"] {
  background-color: rgba(184, 115, 51, 0.08) !important; /* Subtle warm Copper backdrop */
  color: #B87333 !important;                            /* Vibrant Copper active state */
  font-weight: 700 !important;
}

/* 2. Rich Text Editor Toolbar Icons Contrast */
[class*="editor"] [class*="toolbar"],
[class*="editor"] [class*="bar"],
[class*="editor"] button,
[class*="toolbar"] button,
button[class*="editor"] {
  color: #FAF9F5 !important; /* Clean light Cream icon outlines */
}

[class*="editor"] svg,
[class*="toolbar"] svg {
  color: #FAF9F5 !important;
  stroke: #FAF9F5 !important;
}

[class*="editor"] button:hover,
[class*="toolbar"] button:hover {
  background-color: rgba(250, 249, 245, 0.15) !important;
  color: #B87333 !important; /* Copper accents on editor hover */
}

[class*="editor"] button:hover svg,
[class*="toolbar"] button:hover svg {
  stroke: #B87333 !important;
}

/* 3. Calendar Cards and Navigation Tab Contrast */
[class*="calendar"] [class*="tab"],
[class*="Calendar"] [class*="Tab"],
[class*="calendar"] button {
  color: #3F2A1E !important; /* Shale text */
}

[class*="calendar"] [class*="active"],
[class*="Calendar"] [class*="active"] {
  color: #B87333 !important; /* Copper for active navigation */
  border-bottom: 2px solid #B87333 !important;
}

/* Specific styling for social card preview text (the "Alde..." label) */
[class*="postList"] [class*="text"],
[class*="calendar"] [class*="item"] [class*="text"],
[class*="calendar"] [class*="Card"] [class*="title"],
[class*="calendar"] [class*="card"] {
  color: #FAF9F5 !important; /* Light Sand/Cream text to maintain perfect contrast on dark preview card blocks */
}

   /* 4. Total Re-Theme of Hardcoded Login & Register Dark Panels */
   div[class*="bg-[#0E0E0E]"] {
     background-color: #F5F5DC !important; /* Complete Sand body background replace */
   }

   div[class*="bg-[#1A1919]"] {
     background: rgba(255, 255, 255, 0.55) !important; /* Glassmorphic Light Cream panel */
     backdrop-filter: blur(16px) !important;
     -webkit-backdrop-filter: blur(16px) !important;
     border: 1px solid rgba(61, 90, 92, 0.15) !important;
     box-shadow: 0 12px 40px rgba(63, 42, 30, 0.08) !important;
   }

   /* Force login form elements (labels, headers, checkmarks) to high contrast Shale */
   div[class*="bg-[#1A1919]"] h1,
   div[class*="bg-[#1A1919]"] p,
   div[class*="bg-[#1A1919]"] span,
   div[class*="bg-[#1A1919]"] label,
   div[class*="bg-[#1A1919]"] div {
     color: #3F2A1E !important;
   }

   /* Login inputs styling */
   div[class*="bg-[#1A1919]"] input {
     background-color: #FAF9F5 !important;
     color: #3F2A1E !important;
     border: 1px solid rgba(61, 90, 92, 0.2) !important;
   }

   div[class*="bg-[#1A1919]"] input:focus {
     border-color: #B87333 !important;
     box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.15) !important;
   }


/* ==========================================================================
   CAD Backdrop & Advanced Glassmorphism Overrides
   ========================================================================== */

/* 1. Target the calendar pane container and apply the CAD blueprint backdrop */
div[class*="bg-newBgColorInner"][class*="flex-1"][class*="flex-col"][class*="p-"],
[class*="calendar"]:not([class*="col-calendar"]):not(.col-calendar),
[class*="Calendar"]:not([class*="col-calendar"]):not(.col-calendar),
[class*="launches"],
[class*="Launches"],
main {
  background-image: url(/cad-backdrop.png?v=18) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  border-radius: 12px !important;
  border: 1px solid rgba(61, 90, 92, 0.15) !important;
  box-shadow: 0 12px 40px rgba(63, 42, 30, 0.08) !important;
}

/* 2. Set glass effect for header blocks (Month selector, Day navigation) */
.bg-newTableHeader,
[class*="TableHeader"],
[class*="table-header"],
div[class*="bg-newTableHeader"] {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(61, 90, 92, 0.15) !important;
}

/* 3. Strip solid background colors from any direct parent wrapper of the grid */
div[class*="bg-newBgColorInner"][class*="flex-1"][class*="flex-col"] > div,
[class*="calendar"] div:not([class*="btn"]):not([class*="active"]):not([class*="active-item"]):not([class*="focused-item"]):not([class*="postList"]):not([class*="Card"]),
[class*="Calendar"] div:not([class*="btn"]):not([class*="active"]):not([class*="active-item"]):not([class*="focused-item"]):not([class*="postList"]):not([class*="Card"]) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

div[class*="bg-newBgColorInner"][class*="flex-1"][class*="flex-col"] [class*="bg-newBgColorInner"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* 4. Heavy-Duty Unmasker: Force solid Tailwind background utility classes to 20% translucency */
div[class*="bg-newBgColorInner"][class*="flex-1"][class*="flex-col"] [class*="bg-white"],
div[class*="bg-newBgColorInner"][class*="flex-1"][class*="flex-col"] [class*="bg-slate-"],
div[class*="bg-newBgColorInner"][class*="flex-1"][class*="flex-col"] [class*="bg-gray-"],
div[class*="bg-newBgColorInner"][class*="flex-1"][class*="flex-col"] [class*="bg-zinc-"],
div[class*="bg-newBgColorInner"][class*="flex-1"][class*="flex-col"] [class*="bg-[#fff]"],
div[class*="bg-newBgColorInner"][class*="flex-1"][class*="flex-col"] [class*="bg-neutral-"],
[class*="calendar"] [class*="bg-white"],
[class*="calendar"] [class*="bg-[#fff]"],
[class*="calendar"] [class*="bg-slate-"],
[class*="calendar"] [class*="bg-gray-"],
[class*="calendar"] [class*="bg-colorSecondary"],
[class*="calendar"] [class*="bg-newBgColorInner"],
[class*="calendar"] [class*="bg-newColColor"],
[class*="Calendar"] [class*="bg-white"],
[class*="Calendar"] [class*="bg-[#fff]"],
[class*="Calendar"] [class*="bg-colorSecondary"],
[class*="Calendar"] [class*="bg-newBgColorInner"],
[class*="Calendar"] [class*="bg-newColColor"],
[class*="calendar"] [class*="bg-white"],
[class*="calendar"] [class*="bg-[#fff]"],
[class*="calendar"] [class*="bg-colorSecondary"],
[class*="Calendar"] [class*="bg-white"],
[class*="Calendar"] [class*="bg-[#fff]"],
[class*="Calendar"] [class*="bg-colorSecondary"] {
  background: rgba(255, 255, 255, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(61, 90, 92, 0.08) !important;
}

/* 5. Set grid columns & cells to 30% translucency with blur */
[class*="calendar"] [class*="col"],
[class*="calendar"] [class*="row"],
[class*="calendar"] [class*="cell"],
[class*="calendar"] [class*="item"],
[class*="calendar"] [class*="day"],
[class*="Calendar"] [class*="Column"],
[class*="calendar"] [class*="bg-newColColor"],
[class*="calendar"] [class*="bg-newBgColorInner"] div[class*="flex-1"],
[class*="calendar"] div[class*="min-h-[60px]"][class*="rounded-[10px]"],
[class*="Calendar"] [class*="bg-newColColor"],
[class*="Calendar"] [class*="bg-newBgColorInner"] div[class*="flex-1"],
[class*="Calendar"] div[class*="min-h-[60px]"][class*="rounded-[10px]"] {
  background: rgba(255, 255, 255, 0.3) !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(61, 90, 92, 0.08) !important;
}

/* ==========================================================================
   High-Fidelity Glassmorphic Create Post Modal Overrides
   ========================================================================== */

/* 1. Strip the default solid background and borders from Mantine's overlay card */
.mantine-Modal-modal,
div[class*="MantineModal-modal"],
.mantine-Paper-root {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. Target the main modal card wrapper and apply 50% white glassmorphism with 12px blur */
div[class*="p-[40px]"] > div[class*="bg-newBgColorInner"] {
  background: rgba(255, 255, 255, 0.5) !important;                 /* The Glass Fill: 50% opacity */
  backdrop-filter: blur(12px) !important;                         /* The Blur: 12px backdrop blur */
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(61, 90, 92, 0.1) !important;              /* The Edge: 10% faint tint of Eucalyptus */
  box-shadow: 0 12px 40px rgba(63, 42, 30, 0.08) !important;        /* The Lift: soft diffused drop shadow */
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* 3. Make internal nested containers completely transparent so the CAD backdrop is visible through the modal */
#social-settings,
#social-empty,
[class*="Scrollable"],
div[class*="w-[580px]"],
div[class*="flex-1"][class*="bg-newBgColorInner"] {
  background: transparent !important;
}

/* 4. Target the headers (Create Post, Post Preview) and make them semi-transparent glass header bars */
div[class*="bg-newBgColor"][class*="h-[65px]"] {
  background: rgba(255, 255, 255, 0.25) !important;
  border-bottom: 1px solid rgba(61, 90, 92, 0.08) !important;
}

/* 5. Target the footer controls bar at the bottom and style it as a glass bar */
div[class*="h-[84px]"][class*="border-t"] {
  background: rgba(255, 255, 255, 0.2) !important;
  border-top: 1px solid rgba(61, 90, 92, 0.08) !important;
}

/* ==========================================================================
   Brand Alignment for Electric Highlights (No more bright pinks & purples)
   ========================================================================== */

/* 1. Mute the electric purple settings header background and transition to Eucalyptus */
.bg-\[\#612BD3\],
[class*="bg-[#612BD3]"],
[id*="social-settings"] [class*="bg-[#612BD3]"],
div[onClick*="setShowSettings"] {
  background-color: #3D5A5C !important;                            /* Muted Eucalyptus Green */
  color: #FAF9F5 !important;
}

/* 2. Overwrite the main "Update" / primary confirm buttons to follow Eucalyptus / Copper transitions */
button[class*="bg-primary"],
button[class*="bg-[#612BD3]"],
button[class*="btn-primary"],
.bg-primary,
.bg-btnPrimary {
  background-color: #3D5A5C !important;                            /* Eucalyptus */
  color: #FAF9F5 !important;
  border-radius: 8px !important;
  border: none !important;
}

button[class*="bg-primary"]:hover,
button[class*="bg-[#612BD3]"]:hover,
button[class*="btn-primary"]:hover:not(:disabled) {
  background-color: #B87333 !important;                            /* Hover transitions to beautiful Copper */
  color: #FFFFFF !important;
}

/* 3. Mute the "Delete Post" electric pink/red label and make it a gorgeous warm terracotta red */
[class*="text-[#FF3F3F]"],
.text-\[\#FF3F3F\],
button[onClick*="deletePost"] {
  color: #9C3D3A !important;                                       /* Muted Terracotta Red */
}

button[onClick*="deletePost"]:hover {
  color: #B87333 !important;                                       /* Transition to Copper on hover */
}

/* 4. Target the bright blue "API" badge and set it to a subtle Copper accent */
[class*="api-badge"],
.bg-blue-500,
span[class*="API"],
span[class*="api"],
div[class*="badge"] {
  background-color: #B87333 !important;                            /* Copper */
  color: #FAF9F5 !important;
}

/* 5. Target the thin electric-pink indicator line below the text area */
div[class*="bg-primary"][class*="h-[2px]"],
div[class*="h-[2px]"][class*="bg-"] {
  background-color: #B87333 !important;                            /* Copper active highlight line */
}

/* ==========================================================================
   Definitive Grid Parent and Cell Slot Unmasker Overrides
   ========================================================================== */

/* 1. Force the calendar grid container to be transparent to show the background */
div[class*="grid"][class*="[grid-template-columns:"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2. Target the individual hour/day cell slots inside the grid and apply frosted glass */
div[class*="grid"] > div[class*="relative"] > div,
div[class*="grid"] > div[class*="relative"] > div > div {
  background: rgba(255, 255, 255, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(61, 90, 92, 0.08) !important;
}

/* ==========================================================================
   Cleanup for Clunky Borders & Inner Lighter Box Artifacts
   ========================================================================== */

/* 1. Strip clunky borders and backgrounds from channel, integration, and account selection badges/pills */
div[class*="channel"],
div[class*="Channel"],
div[class*="integration"],
div[class*="Integration"],
div[class*="account"],
div[class*="Account"],
div[class*="badge"],
[class*="channel"] div,
[class*="Channel"] div,
[class*="integration"] div,
[class*="Integration"] div,
[class*="account"] div,
[class*="Account"] div,
[class*="badge"] div {
  border: none !important;
  box-shadow: none !important;
}

/* 2. Target specific nested boxes that have light backgrounds inside our Eucalyptus headers/bars */
div[onClick*="setShowSettings"] div,
[id*="social-settings"] [class*="bg-white"],
[id*="social-settings"] [class*="bg-colorSecondary"] {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* 3. Change "Add post in a thread" pink button to Copper with Eucalyptus hover transition */
div[class*="bg-[#D82D7E]"],
.bg-\[\#D82D7E\] {
  background-color: #B87333 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

div[class*="bg-[#D82D7E]"]:hover,
.bg-\[\#D82D7E\]:hover {
  background-color: #3D5A5C !important;
}