html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Typography - Global consistency for headings and body */
:root {
  --font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --heading-color: #2c3e50;
  --text-color: #212529;
}

body {
  font-family: var(--font-family-base);
  color: var(--text-color);
  line-height: 1.6;
}

h1, .display-4 {
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.02em;
}

h1, .display-4 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); }
h2 { font-size: clamp(1.5rem, 2.0vw + 0.9rem, 2rem); font-weight: 600; color: var(--heading-color); }
h3 { font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.5rem); font-weight: 600; color: var(--heading-color); }
h4, h5, h6 { color: var(--heading-color); font-weight: 600; }

.lead { font-size: 1.125rem; font-weight: 400; color: #6c757d; }

/* Section titles commonly used on portals/search pages */
.section-title {
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 0.75rem;
}

.section-subtitle {
  color: #6c757d;
  margin-bottom: 1rem;
}

/* Splash Screen Container */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* White background */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    z-index: 10000; /* Ensure it's on top of everything */
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
/* Splash Content */
.splash-content {
    text-align: center;
    color: #000; /* Black text on white background */
}

/* Logo Styling */
.splash-logo {
    width: 120px;
    height: auto;
    margin-bottom: 20px;
}

/* Title Styling */
.splash-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000; /* Black text on white background */
}

/* Loading Spinner */
.loading-spinner {
    border: 4px solid #000000; /* Black (background spinner color) */
    border-top: 4px solid #FFE000; /* Yellow (spinner's active color) */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    align-items: center; /* Center vertically */
}

/* Spinner Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* User Icon Button */
.user-icon-btn {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

.user-icon-btn i {
    font-size: 1.5rem;
}

.user-icon-btn span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hover and Focus States for Icon */
.user-icon-btn:hover,
.user-icon-btn:focus {
    background-color: #000 !important; /* Black background on hover/focus */
    color: #FFE000 !important;
}

    .user-icon-btn:hover i,
    .user-icon-btn:focus i {
        color: #FFE000 !important; /* Yellow icon on hover/focus */
    }

/* Dropdown Menu Styling */
.custom-dropdown {
    background-color: #343a40;
    border: 1px solid #454d55;
}

.custom-dropdown .dropdown-item {
    color: #FFE000;
}

.custom-dropdown .dropdown-item:hover,
.custom-dropdown .dropdown-item:focus,
.custom-dropdown .dropdown-item:active,
.custom-dropdown .dropdown-item.active {
    background-color: #454d55;
    color: #FFE000;
}

.custom-dropdown .dropdown-divider {
    border-top-color: #454d55;
}

/* Remove blue outline on focus */
.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown-toggle.show {
    background-color: transparent !important;
    color: #FFE000 !important;
    box-shadow: none !important;
}

/* Header meatball menus: remove default Bootstrap caret arrow */
.user-icon-btn.dropdown-toggle::after,
#userDropdown::after,
#adminUserDropdown::after {
  display: none !important;
}

/* Remove blue outline from dropdown items */
.dropdown-item:focus,
.dropdown-item:active {
    background-color: #454d55 !important;
    color: #FFE000 !important;
    box-shadow: none !important;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

/*Reviews*/
.star-rating .star {
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .star-rating .star:hover,
    .star-rating .star.hover,
    .star-rating .star.selected {
        color: #FFE000; /* Gold color for selected/hovered stars */
    }

.reviews-display {
    margin-top: 20px;
}

.navbar .text-light.me-auto {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .navbar .text-light.me-auto {
        font-size: 0.9rem;
        padding: 0.3rem 0.5rem;
        margin-left: 0.5rem;
    }
}

.form-label-required::after {
    content: "*";
    color: #dc3545;
    margin-left: 4px;
    font-weight: bold;
    vertical-align: middle;
}

/* Brand yellow overrides for Bootstrap "warning" variants */
:root {
  --bs-warning: #FFE000;
  --bs-warning-rgb: 255, 224, 0;
}

.text-warning {
  color: #FFE000 !important;
}

.bg-warning {
  background-color: #FFE000 !important;
}

.border-warning {
  border-color: #FFE000 !important;
}

.btn-warning {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

.btn-warning:hover {
  background-color: #FFE000 !important;
  color: #000000 !important;
  border-color: #FFE000 !important;
}

.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

.btn-warning:disabled, .btn-warning.disabled {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Global button styling - pill shape and action variants */
.btn {
  border-radius: 9999px !important; /* Pill shape */
}

/* Positive action button: white bg, black outline/text, yellow on hover */
.btn-positive {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

.btn-positive:hover {
  background-color: #FFE000 !important;
  color: #000000 !important;
  border-color: #FFE000 !important;
}

/* Keep non-hover interactive states white */
.btn-positive:focus,
.btn-positive:active,
.btn-positive.active,
.show > .btn-positive.dropdown-toggle {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

.btn-positive:disabled,
.btn-positive.disabled {
  opacity: 0.65;
}

/* Negative action button: black bg, yellow text; same on hover */
.btn-negative {
  background-color: #000000 !important;
  color: #FFE000 !important;
  border: 1px solid #000000 !important;
}

.btn-negative:hover,
.btn-negative:focus {
  background-color: #FFE000 !important;
  color: #000000 !important;
  border-color: #FFE000 !important;
}

.btn-negative:disabled,
.btn-negative.disabled {
  opacity: 0.65;
}

/* Header trade login: yellow hover with black text */
.btn-trade-login:hover,
.btn-trade-login:focus-visible {
  background-color: #FFE000 !important;
  color: #000000 !important;
  border-color: #FFE000 !important;
}

/* Auth buttons (Homeowner / Trade) - equal visual width */
.auth-btn {
  width: 280px; /* ensures equal width side-by-side */
  justify-content: center;
  text-align: center;
}

@media (max-width: 576px) {
  .auth-btn {
    width: 100%; /* full width when stacked */
    display: block;
  }
  .auth-buttons { width: 100%; }
  .auth-buttons > div { width: 100%; }
  .auth-buttons > div + div { margin-top: 8px; }
}

/* Standard icon badge for pages (yellow background, black icon, centered) */
.icon-badge {
  background-color: #FFE000 !important;
  color: #000000 !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}

.icon-badge i,
.icon-badge svg {
  color: #000000 !important;
}

/* Size variants if needed */
.icon-badge.icon-sm { width: 40px; height: 40px; }
.icon-badge.icon-md { width: 60px; height: 60px; }
.icon-badge.icon-lg { width: 80px; height: 80px; }

/* Certificate card styling */
.certificate-paper-card {
  border: 1px solid #000000 !important; /* Black outline */
}

.certificate-header {
  background-color: #000000 !important; /* Black header */
  color: #FFE000 !important; /* On-brand readable text */
  border-bottom: 1px solid #000000 !important;
}

/* Global loading states */
.btn.is-loading,
.btn[aria-busy="true"],
[data-loading-on-click].is-loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Optional small inline spinner utility if needed in markup */
.loading-inline-spinner {
  display: none;
  vertical-align: text-top;
}

.is-loading .loading-inline-spinner {
  display: inline-block;
}

/* Page-level overlay (not shown by default; can be toggled via JS if desired) */
.global-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.global-loading-overlay.active { display: flex; }

/* Brand rule: all text inside cards should be black */
.card,
.card *,
.card .card-title,
.card .card-text,
.card p,
.card li,
.card .text-muted,
.card .small,
.card small {
  color: #000000 !important;
}

/* Keep icon badge colors as defined above (yellow bg, black icon) */
.card .icon-badge { background-color: #FFE000 !important; }
.card .icon-badge i,
.card .icon-badge svg { color: #000000 !important; }

/* Exception: round dark icon containers in cards should use white icons */
.card .bg-dark.text-white,
.card .bg-dark.text-white i,
.card .bg-dark.text-white svg {
  color: #ffffff !important;
}

/* Ensure buttons inside cards keep their intended brand colors (undo the generic .card * color override) */
.card .btn-negative,
.card .btn-negative * {
  color: #FFE000 !important; /* yellow text on black */
}

/* On hover/focus, negative buttons flip to black text on yellow */
.card .btn-negative:hover,
.card .btn-negative:focus,
.card .btn-negative:hover *,
.card .btn-negative:focus * {
  color: #000000 !important;
}

.card .btn-positive,
.card .btn-positive * {
  color: #000000 !important; /* black text on white */
}

.card .btn-warning,
.card .btn-warning * {
  color: #000000 !important; /* warning variant follows positive style */
}