/* =========================================================
   PROPERTY CARE APP COLOR THEME ONLY
   Load AFTER expat_life/css/style.css

   IMPORTANT:
   This file changes colors/backgrounds only.
   It does NOT change spacing, sizes, heights, widths,
   secure badge image size, navbar size, floating CTA size,
   or footer layout.
========================================================= */

:root {
    --pm-deep: #052e25;
    --pm-deeper: #031f1a;
    --pm-dark: #064e3b;
    --pm-teal: #0f766e;
    --pm-teal-light: #14b8a6;
    --pm-green-soft: #ecfdf5;
    --pm-green-light: #ccfbf1;
    --pm-gold: #fbbf24;
    --pm-gold-dark: #f59e0b;
    --pm-light: #f8fffc;
    --pm-soft-border: rgba(15, 118, 110, 0.16);
}

/* =========================================================
   BASE
========================================================= */

body {
    background-color: var(--pm-light);
}

/* =========================================================
   GENERAL ACCENT COLORS
========================================================= */

.section-mini-title {
    color: var(--pm-teal);
}

.section-mini-title-light {
    color: var(--pm-gold);
}

.stat-box h3,
.price-tier-item strong,
.package-price,
.package-detail-price,
.budget-label i,
.budget-value,
.info-note-box i,
.mini-info-row i,
.comparison-price,
.signup-note-box i,
.consultation-note-box i,
.contact-note-box i,
.about-note-box i,
.location-style-icon,
.about-fit-item i,
.about-value-row strong,
.dashboard-link-card i,
.success-info-box i,
.login-note-box i {
    color: var(--pm-teal);
}

/* Keep success-related icons green where meaningful */
.package-mini-list i,
.signup-info-item i,
.consultation-info-item i,
.contact-info-item i,
.about-highlight-item i {
    color: #16a34a;
}

/* =========================================================
   LIGHT BACKGROUNDS
========================================================= */

.light-section,
.final-cta-section,
.package-detail-hero,
.package-list-hero,
.signup-hero,
.consultation-hero,
.contact-hero,
.about-sl-hero,
.success-page-section,
.dashboard-hero,
.login-hero {
    background: linear-gradient(180deg, #ffffff 0%, var(--pm-light) 100%);
}

.hero-info-content,
.package-target-box,
.package-tagline-box,
.info-note-box,
.signup-note-box,
.consultation-note-box,
.contact-note-box,
.about-note-box,
.success-info-box,
.login-note-box,
.custom-check {
    background: var(--pm-green-soft);
    border-color: var(--pm-soft-border);
}

/* =========================================================
   HERO / GRADIENT AREAS
========================================================= */

.hero-section {
    background:
        linear-gradient(rgba(5, 46, 37, 0.78), rgba(5, 46, 37, 0.78)),
        url('/static/expat_life/images/property_manager_hero.webp') center/cover no-repeat;
}

.hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(15, 118, 110, 0.28),
        rgba(251, 191, 36, 0.10)
    );
}

.hero-badge {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.30);
    color: #ffffff;
}

.hero-point-box i {
    color: var(--pm-gold);
}

.gradient-section {
    background: linear-gradient(135deg, var(--pm-deep), var(--pm-teal));
}

.final-cta-box {
    background: linear-gradient(135deg, var(--pm-deeper), var(--pm-teal));
}

/* =========================================================
   ICON / PLACEHOLDER BACKGROUNDS
========================================================= */

.icon-wrap,
.location-style-icon,
.about-fit-item i {
    background: var(--pm-green-soft);
    color: var(--pm-teal);
}

.package-image-placeholder,
.package-detail-placeholder,
.about-hero-image-placeholder {
    background: linear-gradient(135deg, var(--pm-green-soft), #ffffff);
    color: var(--pm-teal);
}

.detail-feature-icon {
    background: var(--pm-green-soft);
    color: var(--pm-teal);
}

/* =========================================================
   CARDS WITH SOFT TINTS
========================================================= */

.quick-summary-card,
.total-budget-card,
.about-value-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--pm-light) 100%);
}

.comparison-highlight {
    border-color: var(--pm-gold);
    background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
}

/* =========================================================
   FORM FOCUS COLORS
========================================================= */

.signup-form-card .form-control:focus,
.signup-form-card .form-select:focus,
.consultation-form-card .form-control:focus,
.consultation-form-card .form-select:focus,
.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus,
.login-form-card .form-control:focus {
    border-color: rgba(15, 118, 110, 0.55);
    box-shadow: 0 0 0 0.18rem rgba(15, 118, 110, 0.12);
}

.custom-accordion .accordion-button:not(.collapsed) {
    background: var(--pm-green-soft);
    color: var(--pm-teal);
}

/* =========================================================
   TOP BAR
========================================================= */

.topbar {
    background: var(--pm-deeper);
    color: rgba(255, 255, 255, 0.86);
}

.topbar i {
    color: var(--pm-gold);
}

.topbar a {
    color: rgba(255, 255, 255, 0.88);
}

.topbar a:hover {
    color: #ffffff;
}

/* =========================================================
   NAVBAR COLORS ONLY
========================================================= */

.premium-navbar {
    background: rgba(248, 255, 252, 0.96);
    box-shadow: 0 8px 24px rgba(5, 46, 37, 0.08);
}

.brand-logo-circle {
    background: linear-gradient(135deg, var(--pm-teal), var(--pm-deep));
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.22);
}

.brand-title {
    color: var(--pm-deep);
}

.brand-subtitle {
    color: var(--pm-teal);
}

.premium-nav-link {
    color: #173b33;
}

.premium-nav-link:hover,
.premium-nav-link:focus {
    color: var(--pm-teal);
    background: var(--pm-green-soft);
}

.premium-navbar .dropdown-menu {
    background: #ffffff;
    border-color: var(--pm-soft-border);
}

.premium-navbar .dropdown-item {
    color: #173b33;
}

.premium-navbar .dropdown-item:hover,
.premium-navbar .dropdown-item:focus {
    color: var(--pm-teal);
    background: var(--pm-green-soft);
}

/* =========================================================
   BUTTON COLORS ONLY
========================================================= */

.btn-primary {
    background: linear-gradient(135deg, var(--pm-teal), var(--pm-dark));
    border-color: var(--pm-teal);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--pm-teal-light), var(--pm-dark));
    border-color: var(--pm-dark);
    color: #ffffff;
}

.btn-dark {
    background: linear-gradient(135deg, var(--pm-deep), var(--pm-dark));
    border-color: var(--pm-deep);
    color: #ffffff;
}

.btn-dark:hover,
.btn-dark:focus {
    background: linear-gradient(135deg, var(--pm-deeper), var(--pm-teal));
    border-color: var(--pm-teal);
    color: #ffffff;
}

.btn-warning {
    background: linear-gradient(135deg, var(--pm-gold), var(--pm-gold-dark));
    border-color: var(--pm-gold);
    color: #1f2937;
}

.btn-warning:hover,
.btn-warning:focus {
    background: linear-gradient(135deg, #facc15, var(--pm-gold-dark));
    border-color: var(--pm-gold-dark);
    color: #111827;
}

.btn-outline-primary {
    color: var(--pm-teal);
    border-color: var(--pm-teal);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--pm-teal);
    border-color: var(--pm-teal);
    color: #ffffff;
}

.btn-outline-dark {
    color: var(--pm-deep);
    border-color: var(--pm-deep);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background: var(--pm-deep);
    border-color: var(--pm-deep);
    color: #ffffff;
}

/* Specific green button from main style */
.hero-visa-btn {
    background: linear-gradient(135deg, var(--pm-teal), var(--pm-dark));
}

.hero-visa-btn:hover {
    background: linear-gradient(135deg, var(--pm-teal-light), var(--pm-dark));
}

/* =========================================================
   LABELS / SELECTED STATES
========================================================= */

.featured-label {
    background: var(--pm-gold);
    color: #1f2937;
}

.selected-label {
    background: var(--pm-teal);
    color: #ffffff;
}

.package-selected {
    border-color: var(--pm-teal);
}

.dashboard-profile-icon {
    border-color: var(--pm-teal);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.15);
}

/* =========================================================
   FLOATING CTA
   Do NOT change size or position from style.css.
   Only color.
========================================================= */

.floating-guest-btn {
    background: linear-gradient(135deg, var(--pm-gold), var(--pm-gold-dark));
    border-color: var(--pm-gold);
    color: #1f2937;
}

.floating-guest-btn:hover {
    color: #111827;
}

/* =========================================================
   PAGINATION COLORS
========================================================= */

.pagination .page-link:hover {
    background-color: var(--pm-deep);
    color: #ffffff;
    border-color: var(--pm-deep);
}

.pagination .page-item.active .page-link {
    background-color: var(--pm-teal);
    border-color: var(--pm-teal);
    color: #ffffff;
}

/* =========================================================
   FOOTER COLORS ONLY
========================================================= */

.premium-footer {
    background: var(--pm-deeper);
    color: rgba(255, 255, 255, 0.88);
}

.footer-main {
    background:
        linear-gradient(rgba(3, 31, 26, 0.96), rgba(5, 46, 37, 0.96)),
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.24), transparent 35%);
}

.footer-brand-title {
    color: #ffffff;
}

.footer-brand-subtitle {
    color: var(--pm-gold);
}

.footer-text {
    color: rgba(255, 255, 255, 0.78);
}

.footer-heading {
    color: #ffffff;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.78);
}

.footer-links a:hover {
    color: var(--pm-gold);
}

.footer-logo-circle {
    background: linear-gradient(135deg, var(--pm-teal), var(--pm-deep));
}

.footer-bottom {
    background: #020f0d;
    border-top-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.68);
}

/* =========================================================
   SECURE TRUST BADGES
   Keep image sizes from original style.css.
   Only change badge background/border.
========================================================= */

.footer-secure-trust-badge {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(15, 118, 110, 0.10)
    );
    border-color: rgba(255, 255, 255, 0.18);
}

.checkout-secure-trust-badge {
    background: linear-gradient(
        135deg,
        rgba(236, 253, 245, 0.98),
        rgba(255, 255, 255, 0.98)
    );
    border-color: rgba(15, 118, 110, 0.18);
}

.checkout-secure-trust-text strong {
    color: var(--pm-deep);
}

.checkout-heading-secure-note {
    background: rgba(236, 253, 245, 0.92);
    border-color: rgba(15, 118, 110, 0.18);
    color: var(--pm-teal);
}

/* =========================================================
   FORGOT PASSWORD LINK
========================================================= */

.forgot-password-link {
    color: #065f46;
    background: rgba(16, 185, 129, 0.12);
}

.forgot-password-link:hover {
    color: var(--pm-deep);
    background: rgba(16, 185, 129, 0.24);
}

/* =========================================================
   PROPERTY CARE HOME PAGE SPECIFIC COLOR ALIGNMENT
   These match the Property Care homepage styles you attached.
   Only colors/backgrounds are adjusted.
========================================================= */

.pm-home-hero {
    background-color: #071f1b;
}

.pm-home-hero-bg {
    background:
        linear-gradient(
            90deg,
            rgba(5, 28, 24, 0.94) 0%,
            rgba(5, 36, 31, 0.86) 38%,
            rgba(7, 48, 41, 0.70) 68%,
            rgba(7, 48, 41, 0.54) 100%
        ),
        url('/static/expat_life/images/property_manager_hero.webp') center center / cover no-repeat;
}

.pm-hero-badge,
.pm-floating-language-bar {
    background: rgba(251, 191, 36, 0.14);
    color: var(--pm-gold);
    border-color: rgba(251, 191, 36, 0.32);
}

.pm-home-hero h1,
.pm-home-dark-title {
    color: #ffffff;
}

.pm-home-hero .lead {
    color: rgba(255, 255, 255, 0.90);
}

.pm-home-hero .hero-secondary-text,
.pm-home-dark-copy {
    color: rgba(255, 255, 255, 0.82);
}

.pm-hero-btn-warning,
.pm-side-card-header,
.pm-plan-ribbon {
    background: linear-gradient(135deg, var(--pm-gold), var(--pm-gold-dark));
    color: #1f2937;
}

.pm-hero-btn-warning:hover {
    background: linear-gradient(135deg, #facc15, var(--pm-gold-dark));
    color: #111827;
}

.pm-hero-btn-outline {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.pm-hero-btn-outline:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.pm-hero-point i,
.pm-property-type-box i,
.pm-floating-language-title {
    color: var(--pm-gold);
}

.pm-mini-icon,
.pm-problem-icon,
.pm-service-icon,
.pm-plan-icon,
.pm-integration-icon {
    background: var(--pm-green-soft);
    color: var(--pm-teal);
}

.pm-stat-box h3,
.pm-section-mini-title,
.pm-cost-total .label,
.pm-custom-accordion .accordion-button:not(.collapsed) {
    color: var(--pm-teal);
}

.pm-section-mini-title {
    background: var(--pm-green-soft);
}

.pm-section-mini-title-light {
    background: rgba(255, 255, 255, 0.15);
    color: #ccfbf1;
}

.pm-section-heading h2,
.pm-problem-card h5,
.pm-service-card h5,
.pm-plan-card h5,
.pm-integration-card h5,
.pm-process-card h5,
.pm-layer-card h4,
.pm-custom-accordion .accordion-button {
    color: #0f172a;
}

.pm-section-heading p,
.pm-problem-card p,
.pm-service-card p,
.pm-plan-card p,
.pm-integration-card p,
.pm-process-card p,
.pm-layer-card p,
.pm-layer-card li,
.pm-custom-accordion .accordion-body {
    color: #64748b;
}

.pm-dark-gradient-section,
.pm-final-cta {
    background:
        radial-gradient(circle at top left, rgba(251, 191, 36, 0.14), transparent 34%),
        linear-gradient(135deg, var(--pm-deep) 0%, var(--pm-teal) 100%);
}

.pm-process-number,
.pm-layer-number {
    background: linear-gradient(135deg, var(--pm-teal), var(--pm-dark));
    color: #ffffff;
}

.pm-calculator-section {
    background:
        radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.14), transparent 32%),
        linear-gradient(135deg, #f8fafc 0%, var(--pm-green-soft) 100%);
}

.pm-cost-total {
    background: linear-gradient(135deg, var(--pm-green-soft), var(--pm-green-light));
    border-color: #99f6e4;
}

.pm-cost-total .value {
    color: var(--pm-deep);
}

.pm-note-alert {
    background: #fffbeb;
    border-left-color: var(--pm-gold-dark);
    color: #92400e;
}

.pm-plan-card.featured-plan {
    border-color: var(--pm-gold);
}

.pm-integration-section,
.pm-stat-strip {
    background: #f8fafc;
}

.pm-integration-icon.gold {
    background: #fef3c7;
    color: #b45309;
}

.pm-integration-icon.blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.pm-integration-icon.green {
    background: #dcfce7;
    color: #166534;
}

.pm-highlight-list i,
.pm-plan-list i {
    color: #16a34a;
}