/* ==========================================================================
   احسبلي ناو (Ehsebly Now) - Mobile & Tablet Responsive Stylesheet
   Designed for all screens < 992px, < 768px, < 480px, < 360px
   Mobile-First & Touch-Optimized
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL & CONTAINER ADJUSTMENTS FOR MOBILE & TABLETS (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
    scroll-padding-top: 80px;
  }

  .container {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------------------
     2. HEADER & NAVIGATION
     ------------------------------------------------------------------------ */
  .main-header {
    height: 76px !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--border-light) !important;
    z-index: 1000 !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
    overflow: hidden !important;
  }

  .main-site-logo {
    height: 52px !important;
    max-height: 52px !important;
    width: auto !important;
    display: block !important;
  }

  .main-header::before {
    content: "" !important;
    position: absolute !important;
    top: -20px !important;
    right: -30px !important;
    width: 280px !important;
    height: 120px !important;
    background: radial-gradient(circle at 60% 40%, rgba(224, 83, 0, 0.35) 0%, rgba(224, 83, 0, 0.12) 50%, transparent 75%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .main-header.header-hidden {
    transform: translateY(-100%) !important;
    box-shadow: none !important;
  }

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100% !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .header-container .system-switcher-wrapper {
    display: none !important;
  }

  .desktop-nav,
  .header-cta {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 1100 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.25s ease !important;
  }

  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:active {
    background: var(--primary-light) !important;
    border-color: var(--primary) !important;
  }

  .mobile-menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    background-color: var(--text-main) !important;
    border-radius: 3px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center center !important;
  }

  .mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg) !important;
  }

  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }

  .mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg) !important;
  }

  /* Mobile Drawer Overlay Backdrop */
  .mobile-nav-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1098 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s !important;
  }

  .mobile-nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Mobile Drawer */
  .mobile-nav-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #FFFFFF !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.2) !important;
    z-index: 1099 !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
  }

  .mobile-nav-drawer.active {
    right: 0 !important;
  }

  .drawer-close-btn {
    background: none !important;
    border: none !important;
    font-size: 32px !important;
    line-height: 1 !important;
    color: var(--text-main) !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    font-weight: 400 !important;
  }

  .mobile-switcher-wrapper {
    margin: 16px 0 24px 0;
  }

  .mobile-switcher-wrapper .system-switcher {
    display: flex;
    width: 100%;
    background: var(--bg-alt);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    gap: 4px;
  }

  .mobile-switcher-wrapper .switcher-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mobile-switcher-wrapper .switcher-btn.active {
    background: var(--primary);
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(224, 83, 0, 0.3);
  }

  .mobile-nav ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
  }

  .mobile-nav-link {
    display: block;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    border-radius: 8px;
    transition: background 0.2s ease;
  }

  .mobile-nav-link:hover {
    background: var(--primary-light);
    color: var(--primary);
  }

  .mobile-cta {
    margin-top: 16px;
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
  }

  /* ------------------------------------------------------------------------
     3. HERO SECTION RESPONSIVE (User Specification Redesign)
     ------------------------------------------------------------------------ */
  .hero-section {
    padding: 95px 0 35px 0 !important;
    text-align: right !important;
  }

  .hero-container {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: right !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
  }

  .hero-tagline {
    font-size: 12.5px !important;
    padding: 6px 12px !important;
    line-height: 1.5;
    margin-bottom: 12px !important;
    align-self: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Header & Large Visual on Mobile: Title full-width, Mockup 3.5x bigger below it */
  .hero-mobile-header-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    text-align: right !important;
  }

  .hero-title-group {
    width: 100% !important;
    margin-bottom: 14px !important;
    text-align: right !important;
  }

  .hero-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin-bottom: 6px !important;
    text-align: right !important;
  }

  .hero-title-prefix {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    line-height: 1.2 !important;
  }

  .hero-title-main {
    display: block !important;
    font-size: clamp(21px, 5.5vw, 25px) !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    line-height: 1.25 !important;
  }

  .hero-accent-sub {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    margin-bottom: 0 !important;
    text-align: right !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
  }

  /* Mockup Box on Mobile - Enlarged 3.5x times, full-width, crisp & beautiful */
  .hero-mini-mockup-box {
    display: block !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 4px auto 16px auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    flex: none !important;
  }

  .hero-mini-thumb {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 14px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.22)) drop-shadow(0 4px 12px rgba(224, 83, 0, 0.18)) !important;
  }

  /* Hide the large desktop hero-media on mobile to prevent clutter */
  .hero-media {
    display: none !important;
  }

  .geo-entity-summary {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    text-align: right !important;
    margin-bottom: 12px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
  }

  .geo-entity-summary strong {
    color: var(--primary) !important;
    font-weight: 700 !important;
    display: inline !important;
  }

  .hero-subtitle {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    min-height: auto !important;
    margin-bottom: 16px !important;
    text-align: right !important;
    width: 100% !important;
  }

  /* CTA Buttons: Guaranteed 2 Buttons side-by-side in one single row (Grid) */
  .hero-cta-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 10px 0 0 0 !important;
  }

  .hero-cta-wrapper .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .btn-text-full {
    display: none !important;
  }

  .btn-text-mobile {
    display: inline !important;
    font-weight: 700 !important;
  }

  /* Floating Badges Mobile Adaption */
  .hero-floating-badge {
    position: static !important;
    animation: none !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 8px auto !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--bg-main) !important;
    border: 1px solid var(--border-light) !important;
  }

  .badge-icon {
    font-size: 18px !important;
  }

  .badge-text strong {
    font-size: 13px !important;
  }

  .badge-text small {
    font-size: 11px !important;
  }

  /* ------------------------------------------------------------------------
     4. SOCIAL PROOF COUNTER BAR (Pyramid Layout on Mobile)
     ------------------------------------------------------------------------ */
  .social-proof-bar {
    padding: 20px 0 !important;
  }

  .social-proof-container {
    width: 100% !important;
    padding: 0 12px !important;
  }

  .proof-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .proof-divider {
    display: none !important;
  }

  .proof-item {
    background: var(--bg-main) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Completely hide 3rd item on mobile as requested */
  .proof-item:nth-of-type(3),
  .proof-item-hide-mobile {
    display: none !important;
  }

  /* Two items strictly side-by-side on mobile */
  .proof-item:first-child,
  .proof-item:nth-of-type(2) {
    grid-column: span 1 !important;
    padding: 10px 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .proof-item:first-child .proof-number,
  .proof-item:nth-of-type(2) .proof-number {
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }

  .proof-item:first-child .proof-label,
  .proof-item:nth-of-type(2) .proof-label {
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
  }

  /* ------------------------------------------------------------------------
     5. PROBLEMS & SOLUTIONS SECTION
     ------------------------------------------------------------------------ */
  .problems-section {
    padding: 60px 0 !important;
  }

  .section-header {
    text-align: center;
    margin-bottom: 36px !important;
  }

  .section-tagline {
    font-size: 13px !important;
    padding: 5px 12px !important;
    margin-bottom: 10px !important;
  }

  .section-title {
    font-size: clamp(18px, 4.6vw, 21.5px) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }

  .section-desc {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    padding: 0 8px;
  }

  .problems-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .problem-card {
    padding: 20px !important;
    min-height: auto !important;
    border-radius: 14px !important;
    gap: 16px;
  }

  .problem-side,
  .solution-side {
    width: 100%;
  }

  .problem-side h3,
  .solution-side h3 {
    font-size: 16px !important;
    margin: 8px 0 !important;
  }

  .problem-side p,
  .solution-side p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  .card-badge {
    font-size: 12px !important;
    padding: 4px 10px !important;
    display: inline-block;
  }

  .problems-separator {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     6. FEATURES TABS & BROWSER MOCKUP (TOUCH-FRIENDLY TABS)
     ------------------------------------------------------------------------ */
  .features-section {
    padding: 60px 0 !important;
  }

  .features-tabs-wrapper {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Features Tabs Navigation: Side-by-side 2-column Grid */
  .features-tabs-nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
    padding: 0 !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .tab-btn {
    flex: 1 1 0 !important;
    width: 100% !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    gap: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: right !important;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    box-shadow: none;
    transition: all 0.2s ease;
  }

  .tab-btn.active {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(224, 83, 0, 0.25) !important;
  }

  .tab-btn.active .tab-icon {
    stroke: #FFFFFF !important;
  }

  .tab-btn.active .tab-label {
    color: #FFFFFF !important;
  }

  .tab-icon-wrapper {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
    border-radius: 6px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tab-icon {
    width: 15px !important;
    height: 15px !important;
  }

  .tab-label {
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: right !important;
    flex: 1 !important;
    font-weight: 600 !important;
  }

  .browser-mockup {
    border-radius: 14px !important;
    overflow: hidden;
  }

  .browser-header {
    padding: 10px 14px !important;
  }

  .address-bar {
    font-size: 11.5px !important;
    padding: 4px 10px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
  }

  .browser-content {
    padding: 20px 16px !important;
    min-height: auto !important;
  }

  .tab-content-item h3 {
    font-size: 17px !important;
    margin: 10px 0 !important;
    line-height: 1.4 !important;
  }

  .feature-bullets {
    gap: 10px !important;
  }

  .feature-bullets li {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  /* ------------------------------------------------------------------------
     7. HOW IT WORKS SECTION (STEPS)
     ------------------------------------------------------------------------ */
  .how-it-works-section {
    padding: 60px 0 !important;
  }

  .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .step-card {
    padding: 24px 18px !important;
    text-align: center;
    border-radius: 14px;
  }

  .step-number {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    margin: 0 auto 14px auto !important;
  }

  .step-card h3 {
    font-size: 16.5px !important;
    margin-bottom: 8px !important;
  }

  .step-card p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  /* ------------------------------------------------------------------------
     8. COMPATIBILITY SECTION
     ------------------------------------------------------------------------ */
  .compatibility-section {
    padding: 60px 0 !important;
  }

  .comp-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .comp-card {
    padding: 20px 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
    border-radius: 14px;
  }

  .comp-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
  }

  .comp-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .comp-info h3 {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .comp-info p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  /* ------------------------------------------------------------------------
     9. FAQ ACCORDION SECTION
     ------------------------------------------------------------------------ */
  .faq-section {
    padding: 60px 0 !important;
  }

  .faq-accordion {
    max-width: 100% !important;
    gap: 12px !important;
  }

  .accordion-item {
    border-radius: 12px !important;
    overflow: hidden;
  }

  .accordion-header {
    padding: 14px 16px !important;
    min-height: 52px;
    font-size: 14.5px !important;
  }

  .question-text {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .accordion-icon {
    font-size: 20px !important;
    width: 24px;
    height: 24px;
  }

  .accordion-body {
    padding: 14px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }

  /* ------------------------------------------------------------------------
     10. FINAL CTA & FOOTER
     ------------------------------------------------------------------------ */
  .final-cta-section {
    padding: 50px 0 !important;
  }

  .final-cta-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 32px 18px !important;
    gap: 24px !important;
    border-radius: 18px !important;
  }

  .final-cta-info {
    text-align: center !important;
  }

  .final-cta-info .cta-title {
    font-size: clamp(20px, 5vw, 24px) !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  .final-cta-info .cta-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }

  .cta-meta-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .cta-badge-item {
    font-size: 12px !important;
    padding: 6px 12px !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }

  .final-cta-action {
    width: 100% !important;
  }

  .final-cta-action .btn {
    width: 100% !important;
    max-width: 320px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    min-height: 50px;
    margin: 0 auto;
  }

  .main-footer {
    padding: 48px 0 24px 0 !important;
  }

  .footer-container {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 28px !important;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-tagline {
    font-size: 13.5px !important;
    max-width: 340px;
    margin: 0 auto;
  }

  .footer-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .footer-contact p {
    font-size: 13.5px !important;
    margin-bottom: 6px;
  }

  .footer-bottom-container {
    flex-direction: column !important;
    text-align: center;
    gap: 10px !important;
  }

  .copyright, .made-with {
    font-size: 12.5px !important;
  }

  /* ------------------------------------------------------------------------
     11. FLOATING WHATSAPP BUTTON (SAFE MOBILE POSITION)
     ------------------------------------------------------------------------ */
  .whatsapp-float-widget {
    bottom: 30px !important;
    right: 16px !important;
    left: auto !important;
    gap: 8px !important;
  }

  .whatsapp-bubble-pill {
    padding: 8px 12px !important;
    font-size: 12px !important;
    width: 215px !important;
    max-width: 220px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .whatsapp-float {
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
  }

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

/* --------------------------------------------------------------------------
   SMALL PHONES (Screen width <= 400px)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .hero-mini-mockup-box {
    width: 100% !important;
    max-width: 320px !important;
    margin: 4px auto 14px auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex: none !important;
  }

  .hero-title-main {
    font-size: 18px !important;
  }

  .hero-accent-sub {
    font-size: 13px !important;
  }

  .hero-cta-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .hero-cta-wrapper .btn {
    padding: 10px 2px !important;
    font-size: 11.5px !important;
  }

  .hero-tagline {
    font-size: 11.5px !important;
  }

  .tab-label {
    font-size: 11.5px !important;
  }
}