/*
 * Custom Theme Colors for Saferaahi
 * Variable-based theme system for easy customization
 */

:root {
  /* Brand Colors */
  --primary-color: #f39e2a;        /* Orange */
  --secondary-color: #b6a26d;      /* Gold */
  --accent-color: #659e4f;         /* Green */

  /* Text Colors */
  --text-dark: #002129;            /* Dark headings */
  --text-body: #454545;            /* Body text */
  --text-light: #ffffff;           /* Light text */

  /* Background Colors */
  --bg-white: #ffffff;
  --bg-light: #f5f5f5;
  --bg-dark: #000000;

  /* Gradients */
  --gradient-primary: linear-gradient(90deg, var(--primary-color) 10%, var(--secondary-color) 100%);
  --gradient-primary-reverse: linear-gradient(90deg, var(--secondary-color) 10%, var(--primary-color) 100%);
  --gradient-partner: linear-gradient(240deg, var(--secondary-color) 0%, var(--primary-color) 100%);

  /* Shadows */
  --shadow-primary: 0 5px 20px rgba(243, 158, 42, 0.15);
  --shadow-primary-light: 0 5px 20px rgba(243, 158, 42, 0.1);
  --text-shadow-dark: 2px 2px 4px rgba(0, 0, 0, 0.5);
  --text-shadow-light: 1px 1px 3px rgba(0, 0, 0, 0.5);

  /* Overlays */
  --overlay-dark: rgba(0, 0, 0, 0.4);
  --overlay-light: rgba(255, 255, 255, 0.8);

  /* Opacity */
  --opacity-high: 0.95;
  --opacity-full: 1;

  /* Borders */
  --border-light: 2px solid var(--bg-light);
  --border-primary: 2px solid var(--primary-color);

  /* Transitions */
  --transition-default: all 0.3s ease;
}

/* Background Colors */
body {
  background-color: var(--bg-white) !important;
}

.gray-bg, .gray-bg2, .gray-bg3, .gray-bg4, .gray-bg5 {
  background-color: var(--bg-white) !important;
}

/* All Section Backgrounds - White */
.sf-about,
.sf-services,
.sf-whychooseus,
.sf-faq,
.sf-testimonial,
.sf-project,
.sf-team,
.sf-blog,
.sf-partner-section.partner-style2,
.sf-contact {
  background-color: var(--bg-white) !important;
  background-image: none !important;
}

/* Banner Section - Video Background */
.sf-banner.video-banner {
  position: relative !important;
  background-color: var(--bg-dark) !important;
  background-image: none !important;
  overflow: hidden !important;
  min-height: 100vh !important;
  /* Fallback gradient if video doesn't load */
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

/* Video Background Container */
.video-background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.video-background iframe,
.video-background video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vw !important;
  height: 56.25vw !important; /* 16:9 aspect ratio */
  min-height: 100vh !important;
  min-width: 177.77vh !important; /* 16:9 aspect ratio */
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  object-fit: cover !important;
}

/* Video Overlay for better text readability */
.video-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--overlay-dark) !important;
  z-index: 1 !important;
}

/* Ensure content is above video */
.sf-banner.video-banner .container,
.sf-banner.video-banner .line-inner {
  position: relative !important;
  z-index: 2 !important;
}

/* Banner text styling for video background */
.sf-banner.video-banner .banner-content .title {
  color: var(--text-light) !important;
  text-shadow: var(--text-shadow-dark) !important;
}

.sf-banner.video-banner .banner-content .title .watermark {
  color: var(--overlay-light) !important;
}

.sf-banner.video-banner .banner-content .desc {
  color: var(--text-light) !important;
  text-shadow: var(--text-shadow-light) !important;
}

/* Mobile responsiveness */
@media only screen and (max-width: 991px) {
  .sf-banner.video-banner {
    min-height: 70vh !important;
  }

  .video-background iframe,
  .video-background video {
    height: 100vh !important;
  }
}

@media only screen and (max-width: 767px) {
  .sf-banner.video-banner {
    min-height: 60vh !important;
  }
}

/* Ensure text is dark on white backgrounds */
.sf-about .sec-title .title,
.sf-services .sec-title .title,
.sf-faq .sec-title .title,
.sf-project .sec-title .title,
.sf-team .sec-title .title,
.sf-blog .sec-title .title,
.sf-contact .sec-title .title,
.banner-content .title,
h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark) !important;
}

.sf-about .desc,
.sf-services .desc,
.sf-faq .desc,
.banner-content .desc,
p {
  color: var(--text-body) !important;
}

/* Primary Color - Orange */
a,
a:hover,
a:focus,
.sec-title .sub-text,
.sec-title .title span,
.full-width-header .sf-header .menu-area .main-menu .sf-menu ul.nav-menu li a:hover,
.full-width-header .sf-header .menu-area .main-menu .sf-menu ul.nav-menu li.current-menu-item > a,
.full-width-header .sf-header .menu-area .main-menu .sf-menu ul.sub-menu li a:hover,
.full-width-header .sf-header .menu-area .main-menu .sf-menu ul.onepage-menu li.current-menu-item > a,
.address-wrap .icon-part i,
.sf-footer.footer-style1 .footer-top .address-widget li i,
.sf-footer.footer-style1 .footer-top .site-map li a:hover,
.sf-footer.footer-style1 .footer-top .address-widget li .desc a:hover,
.sf-footer.footer-style1 .footer-bottom .copyright p a:hover,
.blog-button a:hover,
ul.listing-style li i,
ul.sf-features-list li i {
  color: var(--primary-color) !important;
}

::-moz-selection,
::selection {
  background: var(--primary-color) !important;
}

/* Primary Backgrounds */
.readon.started,
.readon.started.orange,
.submit-btn.orange,
.sf-videos .animate-border .popup-border i,
.full-width-header .sf-header .topbar-area.style1,
.full-width-header .sf-header .topbar-area.topbar-style3,
.sf-footer.footer-style1 .footer-top .footer-social li a:hover,
#scrollUp i,
.loader .loader-container {
  background: var(--primary-color) !important;
  background-image: var(--gradient-primary) !important;
  color: var(--text-light) !important;
}

.readon.started:hover,
.readon.started.orange:hover {
  background-image: var(--gradient-primary-reverse) !important;
  color: var(--text-light) !important;
}

/* Service Items - White backgrounds with colored borders/accents */
.sf-services .services-item,
.sf-services .services-item.blue-bg-style,
.sf-services .services-item.paste-bg-style,
.sf-services .services-item.pink-bg,
.sf-services .services-item.aqua-bg,
.sf-services .services-item.purple-bg,
.sf-services .services-item.green-bg {
  background: var(--bg-white) !important;
  background-image: none !important;
  border: var(--border-light) !important;
  transition: var(--transition-default) !important;
}

.sf-services .services-item:hover {
  border-color: var(--primary-color) !important;
  box-shadow: var(--shadow-primary) !important;
}

.sf-services .services-item .services-content .title a {
  color: var(--text-dark) !important;
}

.sf-services .services-item .services-desc p {
  color: var(--text-body) !important;
}

/* Testimonial - Keep gradient for center item */
.sf-testimonial.testimonial-style1 .center .testi-item {
  background: var(--primary-color) !important;
  background-image: var(--gradient-primary) !important;
}

/* Testimonial white background for non-center items */
.sf-testimonial .testi-item {
  background: var(--bg-white) !important;
}

/* Buttons */
.full-width-header .sf-header .expand-btn-inner ul .nav-link-container .nav-expander .bar span {
  background: var(--primary-color) !important;
}

/* Borders */
.sf-videos .animate-border .popup-border:before,
.sf-videos .animate-border .popup-border:after,
.full-width-header .sf-header .expand-btn-inner ul .nav-link-container {
  border-color: var(--primary-color) !important;
}

/* Service Items */
.sf-services.services-style6 .services-item.pink-bg {
  background: var(--secondary-color) !important;
}

.sf-services.services-style6 .services-item.aqua-bg {
  background: var(--accent-color) !important;
}

/* Partner Section - Keep gradient for style1, white for style2 */
.sf-partner-section.partner-style1 {
  background-image: var(--gradient-partner) !important;
}

.sf-partner-section.partner-style2 {
  background: var(--bg-white) !important;
  background-image: none !important;
}

/* Blog Categories */
.sf-blog.blog-home-style1 .blog-item .image-wrap .post-categories li a {
  background-image: var(--gradient-primary) !important;
}

.sf-blog.blog-home-style1 .blog-item .blog-content .blog-meta .date i,
.sf-blog.blog-home-style1 .blog-item .blog-content .blog-meta .admin i {
  color: var(--primary-color) !important;
}

/* Footer */
.sf-footer.footer-style1 .footer-top p input[type="submit"] {
  background-image: var(--gradient-primary) !important;
}

.sf-footer.footer-style1 .footer-top p input[type="submit"]:hover {
  background-image: var(--gradient-primary-reverse) !important;
}

.sf-footer.footer-style1 .footer-top .footer-social li a:hover {
  background: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}

/* Topbar */
.full-width-header .sf-header .topbar-area.topbar-style3 {
  background: var(--primary-color) !important;
}

/* Navigation Dots */
.full-width-header .sf-header .expand-btn-inner ul .nav-link-container .nav-expander .bar span {
  background: var(--primary-color) !important;
}

/* Scroll Up Button */
#scrollUp i:hover {
  background-image: var(--gradient-primary-reverse) !important;
}

/* Contact Section - Light background */
.sf-contact.contact-style2 {
  background: #f8f9fa !important;
  background-image: none !important;
}

.contact-wrap {
  background: #ffffff !important;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
  border-radius: 8px !important;
  padding: 40px !important;
}

/* Footer - White background with dark text */
.sf-footer.footer-style1 {
  background: #ffffff !important;
  background-image: none !important;
}

.sf-footer.footer-style1 .footer-top {
  background: transparent !important;
}

.sf-footer.footer-style1 .footer-top .widget-title {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
}

/* Footer Links - Dark text for white background */
.sf-footer.footer-style1 .footer-top .site-map li a {
  color: #454545 !important;
  opacity: 1 !important;
  transition: var(--transition-default) !important;
}

.sf-footer.footer-style1 .footer-top .site-map li a:hover {
  color: var(--primary-color) !important;
  opacity: 1 !important;
  padding-left: 5px !important;
}

.sf-footer.footer-style1 .footer-top .address-widget li .desc,
.sf-footer.footer-style1 .footer-top .address-widget li .desc a,
.sf-footer.footer-style1 .footer-top .widget-desc {
  color: #454545 !important;
  opacity: 1 !important;
}

.sf-footer.footer-style1 .footer-top .address-widget li .desc a:hover {
  color: var(--primary-color) !important;
  opacity: 1 !important;
}

.sf-footer.footer-style1 .footer-bottom .copy-right-menu li a {
  color: #454545 !important;
  opacity: 1 !important;
}

.sf-footer.footer-style1 .footer-bottom .copy-right-menu li a:hover {
  color: var(--primary-color) !important;
  opacity: 1 !important;
}

.sf-footer.footer-style1 .footer-bottom .copyright p {
  color: #454545 !important;
  opacity: 1 !important;
}

/* Footer Social Icons - Dark borders for white background */
.sf-footer.footer-style1 .footer-top .footer-social li a {
  color: #454545 !important;
  border: 1px solid #454545 !important;
}

.sf-footer.footer-style1 .footer-top .footer-social li a:hover {
  background: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  color: #ffffff !important;
}

/* Footer Address Icons */
.sf-footer.footer-style1 .footer-top .address-widget li i {
  color: var(--primary-color) !important;
}

/* Footer Bottom - Light gray background */
.sf-footer.footer-style1 .footer-bottom {
  background: #e9ecef !important;
  border-top: 1px solid #dee2e6 !important;
}

/* Blog Section - White background */
.sf-blog {
  background: var(--bg-white) !important;
}

.sf-blog .blog-item {
  background: var(--bg-white) !important;
  border: 1px solid var(--bg-light) !important;
  transition: var(--transition-default) !important;
}

.sf-blog .blog-item:hover {
  box-shadow: var(--shadow-primary-light) !important;
  border-color: var(--primary-color) !important;
}

.sf-blog .blog-item .blog-content {
  background: var(--bg-white) !important;
}

.sf-blog .blog-item .blog-content .blog-title a {
  color: var(--text-dark) !important;
}

.sf-blog .blog-item .blog-content .desc {
  color: var(--text-body) !important;
}

/* Team Section - White background */
.sf-team {
  background: var(--bg-white) !important;
}

.team-wrap {
  background: var(--bg-white) !important;
}

.team-content {
  background: var(--bg-white) !important;
}

/* Project Section - White background */
.sf-project {
  background: var(--bg-white) !important;
}

.project-item {
  background: var(--bg-white) !important;
}

/* Counter Section */
.sf-counter .counter-list {
  background: transparent !important;
}

.sf-counter .counter-list .count-number {
  color: var(--primary-color) !important;
}

/* FAQ Section - White background */
.sf-faq {
  background: var(--bg-white) !important;
}

.faq-content .card {
  background: var(--bg-white) !important;
  border: 1px solid var(--bg-light) !important;
}

.faq-content .card-header {
  background: var(--bg-white) !important;
}

.faq-content .card-header .card-title button {
  color: var(--text-dark) !important;
}

.faq-content .card-header .card-title button:hover {
  color: var(--primary-color) !important;
}

/* Product single - clean, modern layout */
.sf-single-shop .single-price-info {
  background: #fafbfc;
  border-radius: 16px;
  padding: 32px 28px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 2px 12px rgba(0, 33, 41, 0.04);
}
.sf-single-shop .images-single .product-img {
  max-width: 100%;
  height: 300px;
  object-fit: contain;
}
.sf-single-shop .product-badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  color: #fff;
}
.sf-single-shop .product-badge.product-badge-orange {
  background: linear-gradient(135deg, #f39e2a 0%, #e67e22 100%);
  box-shadow: 0 2px 8px rgba(243, 158, 42, 0.35);
}
.sf-single-shop .product-badge.product-badge-teal {
  background: linear-gradient(135deg, #4ecdc4 0%, #3dbdb4 100%);
  box-shadow: 0 2px 8px rgba(78, 205, 196, 0.35);
}
.sf-single-shop .product-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.sf-single-shop .product-subtitle {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 16px;
  font-weight: 500;
}
.sf-single-shop .single-price-info .some-text {
  color: #374151;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0;
}
.sf-single-shop .product-feature-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8ecf0;
  overflow: hidden;
}
.sf-single-shop .product-feature-item {
  padding: 14px 18px;
  border-bottom: 1px solid #e8ecf0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sf-single-shop .product-feature-item:last-child {
  border-bottom: none;
}
.sf-single-shop .product-feature-icon {
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.sf-single-shop .product-feature-icon.icon-orange { color: #f39e2a; }
.sf-single-shop .product-feature-icon.icon-teal { color: #4ecdc4; }
.sf-single-shop .product-feature-title { color: #1a1a2e; font-size: 15px; }
.sf-single-shop .product-feature-desc {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
  display: block;
  margin-top: 2px;
}

/* CTA block - prominent, no black buttons */
.sf-single-shop .product-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0 20px;
  padding: 20px 0 0;
  border-top: 1px solid #e8ecf0;
}
.sf-single-shop .product-cta-primary {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: linear-gradient(135deg, #f39e2a 0%, #e67e22 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(243, 158, 42, 0.4);
  font-family: inherit;
}
.sf-single-shop .product-cta-primary:hover {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(243, 158, 42, 0.5);
  transform: translateY(-2px);
}
.sf-single-shop .product-cta-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(243, 158, 42, 0.35);
}
.sf-single-shop .product-cta-primary i {
  font-size: 18px;
  opacity: 0.95;
}
.sf-single-shop .product-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px;
  border: 2px solid #25D366;
  color: #ffffff !important;
  background: #25D366;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sf-single-shop .product-cta-whatsapp:hover {
  background: #20bd5a;
  color: #ffffff !important;
  border-color: #20bd5a;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}
.sf-single-shop .product-cta-whatsapp i {
  font-size: 20px;
  color: #ffffff !important;
}
.sf-single-shop .product-cta-whatsapp:hover i {
  color: #ffffff !important;
}
.sf-single-shop .product-cta-note {
  width: 100%;
  margin: 12px 0 0;
  font-size: 13px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sf-single-shop .product-cta-note i {
  color: #f39e2a;
  font-size: 14px;
}
.sf-single-shop .single-price-info p.category {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8ecf0;
  font-size: 13px;
  color: #9ca3af;
}
.sf-single-shop .single-price-info p.category a {
  color: #f39e2a;
  font-weight: 600;
}
@media (max-width: 575px) {
  .sf-single-shop .single-price-info {
    padding: 24px 20px;
  }
  .sf-single-shop .product-cta-group {
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
  }
  .sf-single-shop .product-cta-primary,
  .sf-single-shop .product-cta-whatsapp {
    justify-content: center;
  }
}

/* Product Description/Reviews tab – use brand orange, override Bootstrap blue */
.sf-single-shop .tab-area ul.nav-tabs li .nav-link:hover,
.sf-single-shop .tab-area ul.nav-tabs li .nav-link.active {
  background: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* Buy product modal – trust & assurance */
#buyProductModal .buy-modal-trust {
  padding: 12px 0 0;
  border-top: 1px solid #e8ecf0;
}
#buyProductModal .buy-modal-trust li {
  padding: 4px 0;
  display: flex;
  align-items: center;
}
#buyProductModal .buy-modal-trust li i {
  flex-shrink: 0;
}