/* Merino Color Theme */

:root {
  --color-merino: #ffffff;
  --color-rock-blue: #B0CBE7;
  --color-venice-blue: #2b475e;
}

/* 1. Lightest background for body and normal sections */
body, 
section:not(.result-section):not(.reviews-section),
main {
  background-color: var(--color-merino) !important;
}

/* 2. Venice Blue for general headings, buttons, and bold text */
h1, h2, h3, h4, h5, h6,
strong, b,
.hero-list li {
  color: var(--color-venice-blue) !important;
}

h1 .highlight, 
h2 .highlight, 
h2 .highlight-inline {
  color: var(--color-venice-blue) !important;
}

/* 3. Muted text on main backgrounds in Rock Blue */
.hero-lead, 
.brand-text span, 
.hours,
.site-footer p {
  color: var(--color-rock-blue) !important;
}

/* 4. Rock Blue backgrounds for requested plates/cards */
.doctor-card,
.cosmetology-card,
.cosmetology-services-panel,
.legal-card,
.reviews-section {
  background-color: var(--color-rock-blue) !important;
  border-color: var(--color-rock-blue) !important;
}

/* 4b. Venice Blue backgrounds for services cards and calm articles (with white text) */
.service-card,
.calm-grid article {
  background-color: var(--color-venice-blue) !important;
  border-color: var(--color-venice-blue) !important;
}

.service-card *,
.calm-grid article * {
  color: #ffffff !important;
}

/* Force icons to invert to white on dark backgrounds */
.service-card img,
.calm-grid article img {
  filter: brightness(0) invert(1) !important;
}

/* White text for result-section components to bypass wildcard specificity */
.result-section,
.result-section h2,
.result-section p,
.result-section li,
.result-section strong,
.result-section span,
.result-section .highlight {
  color: #ffffff !important;
}

/* 5. Dark slate text for readability inside Rock Blue cards */
.doctor-card *,
.cosmetology-card *,
.cosmetology-services-panel *,
.legal-card *,
.reviews-section * {
  color: #101419 !important;
}

/* 6. Buttons in Venice Blue with white text */
.btn-primary, 
.cosmetology-btn,
.slider-arrow {
  background-color: var(--color-venice-blue) !important;
  color: #ffffff !important;
  border-color: var(--color-venice-blue) !important;
}

.btn-primary:hover, 
.cosmetology-btn:hover,
.slider-arrow:hover {
  background-color: #0d3f59 !important; /* Darker Venice Blue */
  border-color: #0d3f59 !important;
  color: #ffffff !important;
}

.btn-outline,
.btn-price {
  border-color: var(--color-venice-blue) !important;
  color: var(--color-venice-blue) !important;
  background-color: transparent !important;
}

.btn-outline:hover,
.btn-price:hover {
  background-color: var(--color-venice-blue) !important;
  color: #ffffff !important;
}

/* Specific button text color overrides to bypass wildcard specificity */
.doctor-card .btn-primary,
.cosmetology-card .btn-primary,
.cosmetology-card .cosmetology-btn,
.reviews-section .slider-arrow {
  color: #ffffff !important;
}

.cosmetology-card .btn-outline,
.cosmetology-card .btn-price {
  color: var(--color-venice-blue) !important;
}

.cosmetology-card .btn-outline:hover,
.cosmetology-card .btn-price:hover {
  color: #ffffff !important;
}

.check-icon-wrap,
.check-icon-wrap * {
  color: #ffffff !important;
  background-color: var(--color-venice-blue) !important;
}

/* 7. Review cards on Merino background with Venice Blue text */
.review-card {
  background-color: var(--color-merino) !important;
  border: none !important;
  box-shadow: 0 8px 30px rgba(22, 88, 123, 0.05) !important;
}

.review-card * {
  color: var(--color-venice-blue) !important;
}

.review-avatar {
  background-color: var(--color-rock-blue) !important;
}

/* 8. Documents list style adjustments */
.doc-grid a {
  background-color: var(--color-merino) !important;
  border-color: var(--color-venice-blue) !important;
}

.doc-grid a:hover {
  background-color: var(--color-venice-blue) !important;
  color: #ffffff !important;
}

/* 9. Background under contact details (address) and menu (header) */
.site-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(43, 71, 94, 0.15) !important;
}

.site-header * {
  color: var(--color-venice-blue) !important;
}

.site-header .nav-toggle span {
  background-color: var(--color-venice-blue) !important;
}

@media (max-width: 768px) {
  .site-nav {
    background-color: #ffffff !important;
    background: #ffffff !important;
    width: 100% !important;
    height: calc(100vh - 72px) !important;
  }
}

.contact-card {
  background-color: var(--color-venice-blue) !important;
}

.contact-card * {
  color: #ffffff !important;
}

.site-footer {
  background-color: var(--color-venice-blue) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.site-footer a {
  color: #ffffff !important;
}

/* 10. SVGs, lines, and form controls */
.process-list li {
  border-left-color: var(--color-rock-blue) !important;
}

.icon-circle {
  border-color: var(--color-rock-blue) !important;
}

.hero-list li::before {
  border-color: var(--color-venice-blue) !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2316587B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>') center center / 10px no-repeat !important;
}

.appointment-form input[type="text"],
.appointment-form input[type="tel"] {
  border-bottom-color: var(--color-venice-blue) !important;
  color: var(--color-venice-blue) !important;
}

.appointment-form input::placeholder {
  color: var(--color-rock-blue) !important;
}

.signature-svg path {
  stroke: var(--color-venice-blue) !important;
}

.quote-icon-wrap {
  color: var(--color-venice-blue) !important;
}

.process-figure span {
  color: var(--color-venice-blue) !important;
}

.doctor-footer {
  border-top: none !important;
}

/* Remove blue background and text color override from the wide Organization Details card */
.legal-card--wide {
  background-color: var(--color-merino) !important;
  border-color: var(--color-line) !important;
}

.legal-card--wide h3 {
  color: var(--color-venice-blue) !important;
}

.legal-card--wide p {
  color: var(--color-muted) !important;
}

.legal-card--wide p strong {
  color: var(--color-text) !important;
}

.legal-card--wide a {
  color: var(--color-venice-blue) !important;
  text-decoration: underline;
}

/* Cookie Consent Banner styling */
.cookie-consent {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 360px;
  background-color: var(--color-merino) !important;
  border: 1px solid var(--color-line, #e2e8f0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

.cookie-consent.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cookie-consent p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text, #4a5568);
}

.cookie-consent a {
  color: var(--color-venice-blue) !important;
  text-decoration: underline;
}

.cookie-consent button {
  align-self: flex-end;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--color-venice-blue) !important;
  background-color: var(--color-venice-blue) !important;
  color: var(--color-merino) !important;
}

.cookie-consent button:hover {
  background-color: #1f3445 !important;
  border-color: #1f3445 !important;
}

@media (max-width: 480px) {
  .cookie-consent {
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}