/*
Theme Name: Click Box Norflo Child
Author: OpenAI for Majd
Description: Custom child theme for Norflo, prepared for Click Box branding.
Version: 1.0.0
Template: norflo
Text Domain: clickbox-norflo-child
*/

:root {
  --primaryColor: #6F3293;
  --primaryColor2: #A154E8;
  --primaryColor3: #FFBC02;
  --secondaryColor: #0A0A0A;
  --whiteColor: #ffffff;
  --blackColor: #000000;
  --paragraphColor: #BEB7C8;
  --OmparagraphColor: #D6D0DE;
  --borderColor: rgba(255,255,255,0.08);
  --primaryDiv: #A154E8;
  --goldenColor: #FFBC02;
  --gondolaColor2: #171119;
  --grayColor1: #2B2630;
  --grayColor2: #111111;
  --grayColor3: #161616;
  --grayColor4: #1D1D1D;
  --grayColor5: #0F0F10;
  --greyTeal: #6F3293;
  --silver: #BDB7C7;
  --boxShadow: 0 18px 48px rgba(0,0,0,.28);
}

html {
  scroll-behavior: smooth;
}

body {
  background: #050505;
  color: var(--whiteColor);
}

body,
.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
  color: var(--paragraphColor);
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.elementor-heading-title {
  color: var(--whiteColor);
}

a:hover,
a:focus,
.text-primary,
.elementor-icon-list-text a:hover {
  color: var(--primaryColor3);
}

/* Brand logo sizing */
.custom-logo,
.site-logo img,
.navbar-brand img,
.logo img {
  max-height: 72px;
  width: auto;
}

/* Buttons */
.btn,
.btn-primary,
.elementor-button,
.wp-block-button__link,
input[type="submit"],
button,
button[type="submit"] {
  border-radius: 14px;
}

.btn-primary,
.elementor-button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
  background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primaryColor2) 58%, var(--primaryColor3) 100%);
  border: none;
  color: #fff;
  box-shadow: 0 12px 30px rgba(111,50,147,.28);
}

.btn-primary:hover,
.elementor-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--primaryColor3) 0%, var(--primaryColor2) 50%, var(--primaryColor) 100%);
  color: #fff;
  transform: translateY(-1px);
}

/* Sections and cards */
section,
.elementor-section,
.default-bg,
.bg-color,
.pricing-area,
.features-area,
.services-area,
.footer-area,
.blog-area,
.fun-fact-area {
  background-color: transparent;
}

.elementor-section.elementor-top-section {
  position: relative;
}

.elementor-section.elementor-top-section:not(.elementor-section-stretched):not(.elementor-inner-section) {
  border-radius: 24px;
}

.service-card,
.single-services-box,
.single-pricing-box,
.pricing-card,
.single-team-box,
.single-blog-box,
.faq-item,
.accordion-item,
.counter-card,
.feature-card,
.testimonial-card,
.contact-form,
.widget,
.sidebar-item,
.woocommerce .product,
.woocommerce div.product,
.woocommerce ul.products li.product {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--boxShadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 22px;
}

/* Header / nav */
.navbar-area,
.navbar,
.mean-container .mean-bar,
.header-area,
.top-header-area,
.sticky-menu,
.is-sticky .navbar-area {
  background: rgba(8,8,10,.86) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.navbar-area a,
.navbar a,
.main-nav nav .navbar-nav .nav-item a,
.mean-container a.meanmenu-reveal,
.header-area a {
  color: #ffffff !important;
}

.main-nav nav .navbar-nav .nav-item a:hover,
.main-nav nav .navbar-nav .nav-item a.active,
.navbar-area a:hover,
.header-area a:hover {
  color: var(--primaryColor3) !important;
}

/* Hero emphasis */
.hero-area,
.banner-area,
.page-title-area,
.main-banner-area {
  background:
    radial-gradient(circle at top left, rgba(161,84,232,.18), transparent 32%),
    radial-gradient(circle at right center, rgba(255,188,2,.12), transparent 28%),
    linear-gradient(180deg, #090909 0%, #050505 100%);
}

.hero-area h1,
.banner-area h1,
.main-banner-area h1,
.page-title-area h1 {
  color: #fff;
}

.hero-area .sub-title,
.banner-area .sub-title,
.main-banner-area .sub-title,
.page-title-area .sub-title,
.hero-area p,
.banner-area p,
.main-banner-area p {
  color: #ddd6e6;
}

/* Accent highlights */
span,
.text-gradient,
.text-primary,
.icon,
.service-icon i,
.elementor-icon,
.single-pricing-box .popular,
.pricing-card .popular,
.section-title .sub-title {
  accent-color: var(--primaryColor3);
}

.section-title .sub-title,
.sub-title,
.pre-title,
.tag,
.badge,
.woocommerce span.onsale {
  background: rgba(255,188,2,.12);
  color: var(--primaryColor3);
  border-color: rgba(255,188,2,.22);
}

/* Footer */
.footer-area,
.footer-top-area,
footer {
  background: linear-gradient(180deg, #0a0a0a 0%, #060606 100%) !important;
  color: #d3cedc;
}

.footer-area a,
.footer-top-area a,
footer a {
  color: #ffffff;
}

.footer-area a:hover,
.footer-top-area a:hover,
footer a:hover {
  color: var(--primaryColor3);
}

/* Form fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  border-radius: 14px;
}

input::placeholder,
textarea::placeholder {
  color: #bfb7c7;
}

/* Floating WhatsApp */
.clickbox-whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primaryColor2) 55%, var(--primaryColor3) 100%);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.clickbox-whatsapp-float:hover {
  color: #fff !important;
  transform: translateY(-2px);
}

.clickbox-whatsapp-float__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Useful utility blocks for Elementor text widgets */
.clickbox-highlight {
  color: var(--primaryColor3);
}

.clickbox-glass-box {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  box-shadow: var(--boxShadow);
}

/* Arabic readiness */
body.rtl {
  direction: rtl;
  text-align: right;
}

body.rtl .clickbox-whatsapp-float {
  right: auto;
  left: 18px;
}

body.rtl .elementor-icon-list-items,
body.rtl ul,
body.rtl ol {
  padding-right: 1.25rem;
  padding-left: 0;
}

@media (max-width: 991px) {
  .custom-logo,
  .site-logo img,
  .navbar-brand img,
  .logo img {
    max-height: 58px;
  }

  .clickbox-whatsapp-float {
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
    font-size: 14px;
  }

  body.rtl .clickbox-whatsapp-float {
    left: 14px;
  }
}

@media (max-width: 575px) {
  .clickbox-whatsapp-float__label {
    display: none;
  }

  .clickbox-whatsapp-float {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    justify-content: center;
    padding: 0;
  }
}