/* ========================================
   Sahabat Properti Syariah - Theme Override
   Green Islamic Design Theme
   ======================================== */

/* ========================================
   Color Variables Override
   ======================================== */
:root {
  --ps-primary: #2e7d32;
  --ps-primary-light: #4caf50;
  --ps-primary-dark: #1b5e20;
  --ps-accent: #81c784;
  --ps-gold: #c9a84c;
  --ps-gold-light: #e0c068;
}

/* ========================================
   Global Theme Colors
   ======================================== */

/* Override primary accent color from original template to green */
.btn-default,
.btn-highlighted,
.btn-default.btn-highlighted {
  background: linear-gradient(
    135deg,
    var(--ps-primary),
    var(--ps-primary-light)
  ) !important;
  border-color: var(--ps-primary) !important;
  color: #fff !important;
}

.btn-default:hover,
.btn-highlighted:hover {
  background: linear-gradient(
    135deg,
    var(--ps-primary-dark),
    var(--ps-primary)
  ) !important;
  border-color: var(--ps-primary-dark) !important;
}

.border-btn {
  background: transparent !important;
  border: 2px solid var(--ps-accent) !important;
  color: var(--ps-accent) !important;
}

.border-btn:hover {
  background: var(--ps-accent) !important;
  color: var(--ps-primary-dark) !important;
}

/* ========================================
   Dark Section Override
   ======================================== */
.dark-section {
  background-color: var(--ps-primary-dark) !important;
}

.hero.dark-section {
  background: linear-gradient(
    135deg,
    var(--ps-primary-dark) 0%,
    var(--ps-primary) 50%,
    var(--ps-primary-light) 100%
  ) !important;
}

/* ========================================
   Header Override
   ======================================== */
.main-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-sticky.sticky {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px);
}

.header-contact-btn .btn-default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ========================================
   Hide Template Decorative Images (supplements/herbs)
   ======================================== */
/* Hide ALL section background decorations (leaf/capsule/herb images) */
.hero::before,
.hero::after,
.about-us::before,
.about-us::after,
.why-choose-us::before,
.why-choose-us::after,
.our-products::before,
.our-products::after,
.our-key-points::before,
.our-key-points::after,
.our-faqs::before,
.our-faqs::after,
.our-blog::before,
.our-blog::after,
.our-testimonials::before,
.our-testimonials::after,
.main-footer::before,
.main-footer::after,
.cta-box::before,
.cta-box::after {
    background-image: none !important;
    display: none !important;
}

/* Override dark section background image */
.dark-section {
    background-image: none !important;
}

/* ========================================
   Hero Section Override
   ======================================== */
.hero .section-title h3 {
  color: var(--ps-accent) !important;
}

.hero .section-title h1 {
  color: #fff !important;
}

.hero .section-title h1 span {
  color: var(--ps-gold-light) !important;
}

.hero-list ul li::before {
  color: var(--ps-gold) !important;
}

/* ========================================
   Scrolling Ticker Override
   ======================================== */
.our-scrolling-ticker {
  background: var(--ps-primary) !important;
}

.scrolling-ticker-box .scrolling-content span {
  color: #fff !important;
}

/* ========================================
   About Section Override
   ======================================== */
.about-us-content .section-title h3 {
  color: var(--ps-primary) !important;
}

.about-us-content .section-title h2 span {
  color: var(--ps-primary) !important;
}

.about-us-list ul li::before {
  background: var(--ps-primary) !important;
}

.about-body-item .icon-box {
  background: linear-gradient(
    135deg,
    var(--ps-primary-light),
    var(--ps-primary)
  ) !important;
}

.about-contact-box .icon-box {
  background: linear-gradient(
    135deg,
    var(--ps-primary-light),
    var(--ps-primary)
  ) !important;
}

/* ========================================
   Why Choose Us Override
   ======================================== */
.why-choose-us .section-title h3 {
  color: var(--ps-primary) !important;
}

.why-choose-us .section-title h2 span {
  color: var(--ps-primary) !important;
}

.why-choose-item .icon-box {
  border-color: var(--ps-accent) !important;
}

/* ========================================
   Projects Section Override
   ======================================== */
.our-products .section-title h3 {
  color: var(--ps-primary) !important;
}

.our-products .section-title h2 span {
  color: var(--ps-primary) !important;
}

.product-item.project-item-card {
  border-radius: 16px;
  overflow: hidden;
}

.project-item-card .product-title h3 {
  color: var(--ps-primary) !important;
  font-weight: 700;
}

.project-location-info {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: #757575 !important;
  font-size: 0.9rem;
}

.project-location-info i {
  color: var(--ps-primary) !important;
}

.project-address-info {
  padding: 8px 20px 16px;
}

.project-address-info p {
  color: #999;
  font-size: 0.85rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-address-info i {
  color: var(--ps-primary-light);
}

.btn-sm-custom {
  padding: 6px 16px !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  border-radius: 20px !important;
}

/* Product benefits override */
.product-benefit-item .icon-box {
  background: linear-gradient(
    135deg,
    var(--ps-primary-light),
    var(--ps-primary)
  ) !important;
}

.our-product-benefits .product-benefit-item:hover {
  border-color: var(--ps-primary) !important;
}

/* ========================================
   Key Points Override
   ======================================== */
.our-key-points .section-title h3 {
  color: var(--ps-accent) !important;
}

.our-key-points .section-title h2 span {
  color: var(--ps-gold-light) !important;
}

.key-points-step-item .key-points-steo-no h3 {
  color: var(--ps-gold) !important;
}

/* ========================================
   CTA Override
   ======================================== */
.cta-box.dark-section {
  background-color: var(--ps-primary) !important;
}

.cta-content .section-title h2 span {
  color: var(--ps-gold-light) !important;
}

.cta-btn .btn-highlighted {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* ========================================
   FAQ Override
   ======================================== */
.our-faqs .section-title h3 {
  color: var(--ps-primary) !important;
}

.our-faqs .section-title h2 span {
  color: var(--ps-primary) !important;
}

.faq-accordion .accordion-item .accordion-button:not(.collapsed) {
  color: var(--ps-primary) !important;
}

.faq-accordion .accordion-item .accordion-button::after {
  background-color: var(--ps-primary) !important;
}

/* ========================================
   Blog / Articles Override
   ======================================== */
.our-blog .section-title h3 {
  color: var(--ps-primary) !important;
}

.our-blog .section-title h2 span {
  color: var(--ps-primary) !important;
}

.post-item .post-item-body .post-item-content h2 a:hover {
  color: var(--ps-primary) !important;
}

.readmore-btn {
  color: var(--ps-primary) !important;
}

.readmore-btn:hover {
  color: var(--ps-primary-dark) !important;
}

/* Post Meta Info */
.post-meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85rem;
}

.post-category-badge {
  background: linear-gradient(
    135deg,
    var(--ps-primary),
    var(--ps-primary-dark)
  );
  color: #fff;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.post-date-info {
  color: #999;
  font-size: 0.8rem;
}

/* ========================================
   Partners (Testimonials) Override
   ======================================== */
.our-testimonials.dark-section {
  background-color: var(--ps-primary-dark) !important;
}

.our-testimonials .section-title h3 {
  color: var(--ps-accent) !important;
}

.our-testimonials .section-title h2 span {
  color: var(--ps-gold-light) !important;
}

.partner-item-card .testimonial-content p {
  display: flex;
  align-items: center;
  gap: 8px;
}

.partner-item-card .testimonial-content i {
  color: var(--ps-gold);
}

.partner-wa-btn {
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border-radius: 25px !important;
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
  border-color: #25d366 !important;
  white-space: nowrap;
}

.partner-wa-btn:hover {
  background: linear-gradient(135deg, #128c7e, #075e54) !important;
  border-color: #128c7e !important;
}

.review-content ul li span {
  color: var(--ps-gold) !important;
}

/* ========================================
   Footer Override
   ======================================== */
.main-footer.dark-section {
  background: linear-gradient(
    135deg,
    var(--ps-primary-dark) 0%,
    #0d3311 100%
  ) !important;
}

.footer-social-links ul li a:hover {
  background: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
}

.footer-contact-item .icon-box {
  background: linear-gradient(
    135deg,
    var(--ps-primary-light),
    var(--ps-primary)
  ) !important;
}

.footer-links h3 {
  color: var(--ps-accent) !important;
}

/* ========================================
   Responsive Tweaks
   ======================================== */
@media (max-width: 768px) {
  .hero .section-title h1 {
    font-size: 2rem !important;
  }

  .project-location-info span {
    font-size: 0.8rem;
  }

  .post-meta-info {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .hero-btn .btn-default {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
  }
}

/* ========================================
   Selection Color
   ======================================== */
::selection {
  background-color: var(--ps-primary);
  color: #fff;
}

::-moz-selection {
  background-color: var(--ps-primary);
  color: #fff;
}

/* ========================================
   Preloader Override
   ======================================== */
.preloader .loading {
  border-color: var(--ps-primary) !important;
}

/* ========================================
   Scrollbar Override
   ======================================== */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    135deg,
    var(--ps-primary),
    var(--ps-primary-light)
  );
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ps-primary-dark);
}