/* public/css/custom.css */

/* --- Base & Typography --- */
body {
    font-family: var(--bs-body-font-family);
}

/* --- Colors & Backgrounds --- */
.bg-custom-green {
    background-color: #f2faf3;
}

@media (min-width: 992px) {
    .bg-lg-white {
        background-color: #ffffff !important;
    }
}

/* --- Utilities & Shadows --- */
.shadow-top {
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
}

.custom-underline-offset {
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: #dee2e6;
}

/* --- Icons --- */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-xl { width: 32px; height: 32px; }

/* --- Hover Effects & Animations --- */
.transition {
    transition: all 0.2s ease-in-out;
}

.transition-color {
    transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}

.custom-hover-group:hover {
    background-color: #f8f9fa !important;
}

.custom-hover-group:hover .custom-underline-offset {
    color: #00b050 !important;
    text-decoration-color: #00b050 !important;
}

.custom-hover-group:hover svg {
    color: #212529 !important;
}

.custom-card-hover {
    border-radius: 8px;
}

.custom-card-hover:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- Buttons --- */
.custom-btn-gradient {
    background: linear-gradient(to right, #8bff7a, #72f560);
    color: #000; /* Ensure text is always readable on the bright green button */
}

.custom-btn-gradient:hover {
    background: linear-gradient(to right, #7cf069, #65eb53);
}

/* Domain Search Component Styles */
.domain-search-feature {
    border: 1px solid rgba(25, 135, 84, 0.3);
    background:
        radial-gradient(circle at top right, rgba(25, 135, 84, 0.16), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 244, 0.9));
    box-shadow: 0 16px 40px rgba(25, 135, 84, 0.1);
}

.domain-search-feature-icon {
    width: 48px;
    height: 48px;
    color: #198754;
    background-color: rgba(25, 135, 84, 0.12);
    border: 1px solid rgba(25, 135, 84, 0.2);
}

.domain-search-wrapper form {
    border-width: 1px;
    border-style: solid;
}

.border-default {
    border-color: #dee2e6; /* Standard Bootstrap gray */
}

.border-theme-green {
    border-color: #00b050 !important; /* Your brand green */
    outline: 1px solid #00b050; /* Gives it that extra sharp pop on focus */
}

.domain-search-wrapper input::placeholder {
    color: #9ca3af; /* Light gray placeholder */
}

/* Override browser default focus rings */
.domain-search-wrapper input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Button hover effect */
.hover-darken:hover {
    background-color: #e2e8f0 !important;
    color: #1f2937 !important;
}

/* =========================================
   DARK MODE OVERRIDES
   ========================================= */

/* Adapt custom backgrounds */
[data-bs-theme="dark"] .bg-custom-green {
    background-color: #0b1510; /* A very deep, subtle dark green tint */
}

@media (min-width: 992px) {
    [data-bs-theme="dark"] .bg-lg-white {
        background-color: var(--bs-body-bg) !important; /* Switch to Bootstrap's standard dark body bg */
    }
}

/* Adapt borders and lines */
[data-bs-theme="dark"] .custom-underline-offset {
    text-decoration-color: #495057; /* Darker line color */
}

[data-bs-theme="dark"] .border-default {
    border-color: var(--bs-border-color); /* Let Bootstrap handle dark borders automatically */
}

[data-bs-theme="dark"] .domain-search-feature {
    background:
        radial-gradient(circle at top right, rgba(25, 135, 84, 0.2), transparent 38%),
        linear-gradient(135deg, rgba(11, 21, 16, 0.96), rgba(22, 30, 26, 0.94));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

/* Adapt hover states */
[data-bs-theme="dark"] .custom-hover-group:hover {
    background-color: var(--bs-tertiary-bg) !important; /* Subtle dark gray hover */
}

[data-bs-theme="dark"] .custom-hover-group:hover svg {
    color: var(--bs-body-color) !important; /* Keep icons readable in dark mode */
}

[data-bs-theme="dark"] .hover-darken:hover {
    background-color: #374151 !important; /* Darker gray for hover */
    color: #f9fafb !important; /* Light text on dark hover */
}

/* Adapt shadows (dark mode requires darker shadows to be visible) */
[data-bs-theme="dark"] .shadow-top {
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .custom-card-hover:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Light Mode Hover */
[data-bs-theme="light"] .custom-hover-bg:hover {
    background-color: #60ee62;
}

/* Dark Mode Hover */
[data-bs-theme="dark"] .custom-hover-bg:hover {
    background-color: #2b3035;
}