/**
 * ARK-SMS Landlord Frontend Override
 * Official palette: Navy #0A1A2F, Teal #2AB7CA, Charcoal #1F2A44, Light Gray #F5F7FA
 * Premium • Minimal • Calm • Controlled
 * Supports: light, dark, system (prefers-color-scheme)
 */

/* Smooth theme transitions */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.ud-hero, .ud-header, .ud-features, .ud-faq, .ud-pricing,
.ud-footer, .ud-single-feature, .ud-single-faq, .ud-single-pricing {
  transition: background-color 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Override ud-styles :root with ARK-SMS palette */
:root {
  --primary-color: #0A1A2F;
  --heading-color: #1F2A44;
  --body-color: #4B5563;
  --white: #FFFFFF;
  --arksms-navy: #0A1A2F;
  --arksms-teal: #2AB7CA;
  --arksms-charcoal: #1F2A44;
  --arksms-light-gray: #F5F7FA;
}

/* Header: Navy background, white text */
.ud-header {
  background-color: var(--arksms-navy) !important;
}

.sticky {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(10, 26, 47, 0.08);
}

/* Hero: Navy background */
.ud-hero {
  background: var(--arksms-navy) !important;
}

/* Primary buttons: Teal accent */
.ud-main-btn {
  background: var(--arksms-teal) !important;
  border-color: var(--arksms-teal) !important;
}

.ud-main-btn:hover {
  background: #2399a8 !important;
  border-color: #2399a8 !important;
  color: var(--white) !important;
}

/* Navbar login/register buttons */
.navbar-btn .ud-main-btn.ud-login-btn {
  background: var(--arksms-teal) !important;
  border-color: var(--arksms-teal) !important;
}

.navbar-btn .ud-main-btn.ud-login-btn:hover {
  background: #2399a8 !important;
  border-color: #2399a8 !important;
}

.sticky .navbar-btn .ud-main-btn.ud-login-btn {
  background: var(--arksms-teal) !important;
  color: var(--white) !important;
}

.sticky .navbar-btn .ud-main-btn.ud-login-btn:hover {
  background: #2399a8 !important;
  color: var(--white) !important;
}

/* White outline buttons on hero */
.ud-hero-buttons .ud-white-btn {
  background: var(--white) !important;
  color: var(--arksms-navy) !important;
}

.ud-hero-buttons .ud-white-btn:hover {
  background: var(--arksms-light-gray) !important;
  color: var(--arksms-navy) !important;
}

/* Link-style buttons (transparent, white text) */
.ud-hero-buttons .ud-link-btn {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.ud-hero-buttons .ud-link-btn:hover {
  color: var(--arksms-teal);
  background: rgba(42, 183, 202, 0.2);
  border-color: var(--arksms-teal);
}

/* Nav links: white on navy header */
.ud-header .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.ud-header .navbar-nav .nav-link:hover {
  color: var(--arksms-teal) !important;
}

.sticky .navbar-nav .nav-link {
  color: var(--arksms-charcoal) !important;
}

.sticky .navbar-nav .nav-link:hover {
  color: var(--arksms-teal) !important;
}

.sticky .navbar-brand img {
  filter: none;
}

/* Features section: teal accents */
.ud-single-feature .ud-feature-icon {
  color: var(--arksms-teal) !important;
}

.ud-single-feature .ud-feature-link {
  color: var(--arksms-teal) !important;
}

.ud-single-feature .ud-feature-link:hover {
  color: var(--arksms-navy) !important;
}

/* Section titles */
.ud-section-title span {
  color: var(--arksms-teal) !important;
}

/* FAQ accordion */
.ud-faq-btn:hover,
.ud-faq-btn[aria-expanded="true"] {
  color: var(--arksms-teal) !important;
}

/* Back to top */
.back-to-top {
  background: var(--arksms-teal) !important;
}

.back-to-top:hover {
  background: var(--arksms-navy) !important;
}

/* Footer */
.ud-footer {
  background-color: var(--arksms-navy) !important;
  color: rgba(255, 255, 255, 0.8);
}

.ud-footer a:hover {
  color: var(--arksms-teal) !important;
}

/* Pricing cards */
.ud-single-pricing {
  border-color: rgba(10, 26, 47, 0.15) !important;
}

.ud-single-pricing.active {
  background: linear-gradient(180deg, var(--arksms-navy) 0%, var(--arksms-charcoal) 100%) !important;
  border: none !important;
}

.ud-single-pricing .ud-pricing-header h4 {
  color: var(--arksms-teal) !important;
}

.ud-single-pricing.active .ud-pricing-header h4 {
  color: var(--white) !important;
}

.ud-single-pricing.first-item::after {
  background: var(--arksms-teal) !important;
}

.ud-single-pricing.last-item::after {
  background: var(--arksms-teal) !important;
}

.ud-single-pricing .ud-popular-tag {
  color: var(--arksms-navy) !important;
}

.ud-single-pricing .ud-border-btn {
  border-color: var(--arksms-teal) !important;
  color: var(--arksms-teal) !important;
}

.ud-single-pricing .ud-border-btn:hover {
  background: var(--arksms-teal) !important;
  border-color: var(--arksms-teal) !important;
  color: var(--white) !important;
}

.ud-single-pricing .ud-white-btn {
  color: var(--arksms-navy) !important;
}

.ud-single-pricing .ud-white-btn:hover {
  background: var(--arksms-teal) !important;
  border-color: var(--arksms-teal) !important;
  color: var(--white) !important;
}

.ud-single-pricing .ud-main-btn {
  background: var(--arksms-teal) !important;
  border-color: var(--arksms-teal) !important;
}

.ud-single-pricing .ud-main-btn:hover {
  background: #2399a8 !important;
  border-color: #2399a8 !important;
}

/* Section backgrounds: light gray for calm feel */
.ud-features {
  background-color: var(--arksms-light-gray) !important;
}

.ud-faq {
  background-color: var(--white) !important;
}

/* Login / Forgot password pages */
.ud-login {
  background-color: var(--arksms-light-gray) !important;
}

.ud-login-form .ud-form-group input:focus {
  border-color: var(--arksms-teal) !important;
}

.ud-login .forget-pass:hover,
.ud-login .signup-option a:hover {
  color: var(--arksms-teal) !important;
}

/* Footer widget titles */
.ud-footer .ud-widget-title {
  color: var(--white) !important;
}

.ud-footer .ud-widget-links a,
.ud-footer .ud-widget-links li {
  color: rgba(255, 255, 255, 0.8) !important;
}

.ud-footer .ud-widget-links a:hover {
  color: var(--arksms-teal) !important;
}

.ud-footer .ud-widget-socials a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.ud-footer .ud-widget-socials a:hover {
  color: var(--arksms-teal) !important;
}

.ud-footer-bottom .ud-footer-bottom-left a,
.ud-footer-bottom .ud-footer-bottom-right a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.ud-footer-bottom .ud-footer-bottom-left a:hover,
.ud-footer-bottom .ud-footer-bottom-right a:hover {
  color: var(--arksms-teal) !important;
}

/* ===== Dark Mode (ark_logo_full_white) ===== */
html.arksms-landlord-dark body {
  background-color: var(--arksms-navy) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-hero,
html.arksms-landlord-dark .ud-header {
  background-color: var(--arksms-navy) !important;
}

html.arksms-landlord-dark .sticky {
  background-color: rgba(10, 26, 47, 0.98) !important;
  backdrop-filter: blur(8px);
}

html.arksms-landlord-dark .sticky .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .sticky .navbar-nav .nav-link:hover {
  color: var(--arksms-teal) !important;
}

html.arksms-landlord-dark #arksms-landlord-dark-toggle {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark #arksms-landlord-dark-toggle:hover {
  color: var(--arksms-teal) !important;
}

.sticky #arksms-landlord-dark-toggle {
  color: var(--arksms-charcoal) !important;
}

.sticky #arksms-landlord-dark-toggle:hover {
  color: var(--arksms-teal) !important;
}

html.arksms-landlord-dark .sticky #arksms-landlord-dark-toggle {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-features {
  background-color: var(--arksms-charcoal) !important;
}

html.arksms-landlord-dark .ud-single-feature {
  background-color: var(--arksms-charcoal) !important;
  border-radius: var(--arksms-radius-lg, 8px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.arksms-landlord-dark .ud-single-feature .ud-feature-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-single-feature .ud-feature-link:hover {
  color: var(--arksms-teal) !important;
}

html.arksms-landlord-dark .ud-single-feature .ud-feature-title,
html.arksms-landlord-dark .ud-single-feature .ud-feature-desc {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-faq {
  background-color: var(--arksms-navy) !important;
}

html.arksms-landlord-dark .ud-section-title h2,
html.arksms-landlord-dark .ud-section-title p {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-single-faq {
  background-color: var(--arksms-charcoal) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.arksms-landlord-dark .ud-single-faq .ud-faq-body {
  color: rgba(255, 255, 255, 0.85) !important;
}

html.arksms-landlord-dark .ud-faq-btn {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-pricing {
  background-color: var(--arksms-navy) !important;
}

html.arksms-landlord-dark .ud-single-pricing {
  background-color: var(--arksms-charcoal) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.arksms-landlord-dark .ud-single-pricing .ud-pricing-header h3,
html.arksms-landlord-dark .ud-single-pricing .ud-pricing-body li {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-single-pricing.active {
  background: linear-gradient(180deg, var(--arksms-charcoal) 0%, var(--arksms-navy) 100%) !important;
}

/* About, Contact, Blog sections in dark mode */
html.arksms-landlord-dark .ud-about {
  background-color: var(--arksms-navy) !important;
}

html.arksms-landlord-dark .ud-about-wrapper {
  background-color: var(--arksms-charcoal) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.arksms-landlord-dark .ud-about-content .tag,
html.arksms-landlord-dark .ud-about-content h2,
html.arksms-landlord-dark .ud-about-content p {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-contact {
  background-color: var(--arksms-charcoal) !important;
}

html.arksms-landlord-dark .ud-contact-title span,
html.arksms-landlord-dark .ud-contact-title h2,
html.arksms-landlord-dark .ud-contact-info-wrapper .ud-info-meta h5,
html.arksms-landlord-dark .ud-contact-info-wrapper .ud-info-meta p,
html.arksms-landlord-dark .ud-contact-form-wrapper .ud-contact-form-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-contact-form-wrapper .ud-form-group input,
html.arksms-landlord-dark .ud-contact-form-wrapper .ud-form-group textarea {
  background-color: var(--arksms-navy) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--arksms-white) !important;
}

html.arksms-landlord-dark .ud-contact-form-wrapper .ud-form-group input:focus,
html.arksms-landlord-dark .ud-contact-form-wrapper .ud-form-group textarea:focus {
  border-color: var(--arksms-teal) !important;
}

html.arksms-landlord-dark .ud-blog-grids,
html.arksms-landlord-dark .ud-single-blog {
  background-color: var(--arksms-charcoal) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.arksms-landlord-dark .ud-single-blog .ud-blog-title a,
html.arksms-landlord-dark .ud-single-blog .ud-blog-desc {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-single-blog .ud-blog-title a:hover {
  color: var(--arksms-teal) !important;
}

/* Testimonials / CTA section */
html.arksms-landlord-dark .ud-testimonials {
  background-color: var(--arksms-navy) !important;
}

html.arksms-landlord-dark .ud-testimonials .ud-section-title h2,
html.arksms-landlord-dark .ud-testimonials .ud-section-title p {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .ud-single-testimonial {
  background-color: var(--arksms-charcoal) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

html.arksms-landlord-dark .ud-single-testimonial .ud-testimonial-content p {
  color: rgba(255, 255, 255, 0.85) !important;
}

html.arksms-landlord-dark .ud-single-testimonial .ud-testimonial-info h5,
html.arksms-landlord-dark .ud-single-testimonial .ud-testimonial-info span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Contact form card */
html.arksms-landlord-dark .ud-contact-form-wrapper {
  background-color: var(--arksms-charcoal) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Login/Register cards */
html.arksms-landlord-dark .ud-single-login,
html.arksms-landlord-dark .ud-single-register {
  background-color: var(--arksms-charcoal) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.arksms-landlord-dark .ud-single-login .ud-login-header h3,
html.arksms-landlord-dark .ud-single-login .ud-login-header h4,
html.arksms-landlord-dark .ud-single-login .ud-login-body li,
html.arksms-landlord-dark .ud-single-register .ud-register-header h3,
html.arksms-landlord-dark .ud-single-register .ud-register-header h4,
html.arksms-landlord-dark .ud-single-register .ud-register-body li {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Bootstrap cards used across landlord frontend */
html.arksms-landlord-dark .card {
  background-color: var(--arksms-charcoal) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .card-header {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .card-body,
html.arksms-landlord-dark .card-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.arksms-landlord-dark .card-footer {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.arksms-landlord-dark .pricing-card {
  background-color: var(--arksms-charcoal) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 404 page card */
html.arksms-landlord-dark .ud-404-wrapper {
  background-color: var(--arksms-charcoal) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* color-scheme for form controls and scrollbars in dark mode */
html.arksms-landlord-dark {
  color-scheme: dark;
}