/*
Theme Name: Let's Join Quran
Theme URI: https://www.letsjoinquran.com
Author: Antigravity
Author URI: 
Description: Custom classic theme converted from Next.js project.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lets-join-quran
*/

/* 
 * Note: All styling is powered by Tailwind CSS compiled into assets/css/main.css
 * This file is required by WordPress to recognize the theme.
 */

:root {
  --font-sans: "Plus Jakarta Sans", sans-serif;
}
body {
  font-family: var(--font-sans);
}

/* Floating WhatsApp Button */
.ljq-whatsapp-float {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  top: auto !important;
  left: auto !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  border-radius: 999px !important;
  background: #25D366 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.35) !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.ljq-whatsapp-float svg {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  display: block !important;
  fill: currentColor !important;
}

@media (max-width: 768px) {
  .ljq-whatsapp-float {
    right: 18px !important;
    bottom: 18px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
  }

  .ljq-whatsapp-float svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Intl-Tel-Input Overrides for Premium Theme */
.iti { width: 100%; display: block; }
.iti__flag-container { z-index: 20; }
.iti__selected-flag { 
  background-color: transparent !important; 
  padding: 0 16px !important; 
  border-right: 1px solid #e2e8f0; 
  border-radius: 0.75rem 0 0 0.75rem;
}
.iti__dropdown-content { 
  border-radius: 1rem !important; 
  box-shadow: 0 20px 50px rgba(8,26,51,0.1) !important; 
  border: 1px solid #e2e8f0 !important; 
  margin-top: 8px !important;
  overflow: hidden !important;
  font-family: inherit;
}
.iti__search-input {
  padding: 12px 16px !important;
  border-radius: 0.75rem !important;
  margin: 8px !important;
  width: calc(100% - 16px) !important;
  border: 1px solid #e2e8f0 !important;
  outline: none;
}
.iti__search-input:focus {
  border-color: #14b8a6 !important;
  box-shadow: 0 0 0 1px #14b8a6 !important;
}
.iti__country-list {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.iti__country {
  padding: 10px 16px !important;
}
.iti__country:hover {
  background-color: #f0fdfa !important;
  color: #0d9488 !important;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 20px;
}