/*
 * Ecomzly brand colours for the landlord home page only (loaded by partials/header.blade.php
 * when the page is the home page). The admin Colour Settings and every other page keep their
 * colours; this remaps the page's two brand colours to the logo's palette:
 *
 *   dark teal #0C4D54 (main colour one)  -> royal blue #0037FA
 *   lime      #92E721 (main colour two)  -> teal       #17EFD4
 *   headings                             -> navy       #06122A (the logo's wordmark)
 *
 * Most of the page reads the CSS variables below. The rest are colours hard-coded in shared
 * templates (the plan picker modal, the pricing checkmarks) or states that would hide part of the
 * logo (the scrolled navbar), overridden here
 * with one extra `html` in the selector so they beat the templates' own rules.
 */
:root {
    --ez-blue: #0037FA;
    --ez-blue-rgb: 0, 55, 250;
    --ez-teal: #17EFD4;
    --ez-navy: #06122A;

    --main-color-one: var(--ez-blue);
    --main-color-one-rgb: var(--ez-blue-rgb);
    --main-color-two: var(--ez-teal);
    --main-color-two-rgb: 23, 239, 212;
    --heading-color: var(--ez-navy);
    --accent: var(--ez-blue);
}

/* Sticky navbar once scrolled: navy rather than the blue, so the logo's blue "zly" stays visible. */
html .navbar-home #mainNav.bg-primary { background-color: var(--ez-navy); }

/* Pricing widget: selected-feature checkmarks. */
html .peer:checked ~ .peer-checked\:border-\[\#92E721\] { border-color: var(--ez-teal); }
html .peer:checked ~ .peer-checked\:bg-\[\#92E721\] { background-color: var(--ez-teal); }

/* Plan picker modal (partials/purchase-modal.blade.php). */
html .pm-feat-dot { background: var(--ez-teal); }
html .bg-\[\#92E721\]\/10 { background-color: rgba(23, 239, 212, 0.1); }

html .pm-plan-select-btn {
    color: var(--ez-blue);
    border-color: rgba(var(--ez-blue-rgb), 0.25);
    background: rgba(var(--ez-blue-rgb), 0.04);
}
html .pm-plan-card:hover .pm-plan-select-btn,
html .pm-plan-card.pm-selected .pm-plan-select-btn {
    background: var(--ez-blue);
    border-color: var(--ez-blue);
}
html .pm-plan-card.pm-selected {
    box-shadow: 0 0 0 2px var(--ez-blue), 0 8px 24px rgba(var(--ez-blue-rgb), 0.14) !important;
}
html .pm-theme-card.pm-selected {
    border-color: var(--ez-blue) !important;
    box-shadow: 0 0 0 3px rgba(var(--ez-blue-rgb), 0.1);
}
html .pm-step-item[data-completed="true"] .pm-step-bubble,
html .pm-step-item[data-active="true"] .pm-step-bubble {
    background-color: var(--ez-blue);
    border-color: var(--ez-blue);
}
html .pm-step-item[data-active="true"] .pm-step-label { color: var(--ez-blue); }
html .pm-page-btn:hover { border-color: var(--ez-blue); color: var(--ez-blue); }
html .pm-page-btn.active,
html .pm-mode-btn.active {
    background: var(--ez-blue);
    border-color: var(--ez-blue);
}
html .pm-mode-btn.active { box-shadow: 0 2px 8px rgba(var(--ez-blue-rgb), 0.18); }
/* Step connectors are coloured from JS as an inline style. */
html .pm-connector[style*="rgb(12, 77, 84)"] { background-color: var(--ez-blue) !important; }