/**
 * Mobile UI/UX Styles
 * Modern mobile-first design with floating bottom navigation
 * Optimized for touch interactions and mobile experience
 */

/* ========================================
   MOBILE-ONLY STYLES (max-width: 767px)
======================================== */

@media only screen and (max-width: 767px) {

	/* ===== GLOBAL MOBILE RESETS ===== */
	/* Ram Mandir/Ayodhya Theme Colors */
	:root {
		--ram-saffron: #ff9933;
		--ram-orange: #ff6b35;
		--ram-red: #ffa24c;
		--ram-gold: #d4af37;
		--ram-temple-stone: #e8dcc4;
		--ram-sacred-yellow: #ffc107;
	}

	body {
		font-size: 14px;
		line-height: 1.6;
		-webkit-tap-highlight-color: rgba(255, 153, 51, 0.2);
		overflow-x: hidden;
		background: #fafafa;
	}

	/* Remove desktop header on mobile */
	.main-header .header-top {
		display: none !important;
	}

	/* ===== MOBILE HEADER ===== */
	.main-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background: linear-gradient(to bottom, #ffffff 0%, #fffef8 100%);
		box-shadow: 0 2px 10px rgba(255, 153, 51, 0.15);
		border-bottom: 2px solid var(--ram-saffron);
	}

	.main-header .header-upper {
		padding: 10px 0;
		background: transparent;
	}

	.main-header .header-upper .inner-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
	}

	/* Mobile Logo */
	.main-header .header-upper .logo-box {
		flex: 1;
		text-align: center;
		order: 2;
	}

	.main-header .header-upper .logo-box .logo img {
		max-height: 45px;
		width: auto;
	}

	/* Hamburger Menu */
	.nav-outer {
		order: 1;
		flex: 0 0 auto;
	}

	.nav-outer .mobile-nav-toggler {
		display: block;
		width: 40px;
		height: 40px;
		padding: 0;
		margin: 0;
		background: transparent;
		border: none;
		font-size: 24px;
		color: #222222;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.nav-outer .mobile-nav-toggler:active {
		transform: scale(0.95);
	}

	/* Support Button */
	.main-header .header-upper .right-nav {
		order: 3;
		flex: 0 0 auto;
	}

	.main-header .search-btn { 
        margin: 0 15px;;
	}

	.main-header .search-btn button.btn-support {
		padding: 8px 12px;
		font-size: 11px;
		white-space: nowrap;
		border-radius: 20px;
		background: linear-gradient(135deg, #ff6b35, #ffa24c);
		color: #ffffff;
		border: none;
		display: flex;
		align-items: center;
		gap: 4px;
		box-shadow: 0 2px 8px rgba(249, 27, 3, 0.3);
	}

	.main-header .search-btn button.btn-support img {
		height: 16px;
		width: auto;
	}

	.main-header .search-btn button.btn-support i {
		font-size: 14px;
	}

	/* Hide desktop floating new connection button on mobile */
	.new-connection-float,
	.floating-connection-btn,
	[class*="float"][class*="connection"],
	.button-5,
	.butn-sty,
	.req-callbackbtn,
	#req-callbackbtn,
	a[id*="callback"],
	a[class*="button-"] {
		display: none !important;
	}

	/* Add padding to body for fixed header */
	.page-wrapper {
		padding-top: 65px;
		padding-bottom: 70px; /* Space for floating bottom nav */
	}

	/* ===== MOBILE BANNER SECTION ===== */
	.banner-section {
		margin-bottom: 0 !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		line-height: 0 !important;
	}

	.banner-carousel {
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
	}

	.banner-carousel .owl-stage-outer {
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
	}

	.banner-carousel .owl-stage {
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
	}

	.banner-carousel .slide-item {
		margin: 0 !important;
		position: relative;
		overflow: hidden;
		line-height: 0 !important;
	}

	/* Style for banner images */
	.banner-carousel .slide-item picture {
		display: block;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
	}

	.banner-carousel .slide-item .banner-img {
		width: 100%;
		height: auto;
		display: block !important;
		object-fit: cover;
		object-position: center center;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
	}

	/* Remove any owl-carousel spacing */
	.banner-carousel .owl-item {
		line-height: 0 !important;
	}

	/* Hide old background image layer if exists */
	.banner-carousel .slide-item .image-layer {
		display: none !important;
	}

	/* Hide banner text content on mobile (image-only) */
	.banner-carousel .content-box,
	.banner-carousel .auto-container,
	.banner-carousel .content-box .content .inner {
		display: none !important;
	}

	/* Banner Navigation Dots */
	.banner-carousel .owl-dots {
		position: absolute !important;
		bottom: 15px;
		left: 0;
		right: 0;
		text-align: center;
		z-index: 10;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
	}

	/* Remove owl-nav spacing */
	.banner-carousel .owl-nav {
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
	}

	.banner-carousel .owl-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.5);
		margin: 0 4px;
		display: inline-block;
		transition: all 0.3s ease;
	}

	.banner-carousel .owl-dot.active {
		width: 24px;
		border-radius: 4px;
		background: #ffffff;
	}

	/* ===== MOBILE SECTIONS ===== */
	/* Ram Mandir Inspired Sections */
	.about-section,
	.locations-section,
	.default-bg-section,
	.testimonials-section {
		padding: 30px 0 !important;
		position: relative;
	}

	/* Add subtle temple-inspired pattern */
	.about-section::before,
	.locations-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(90deg, 
			var(--ram-saffron) 0%, 
			var(--ram-sacred-yellow) 50%, 
			var(--ram-saffron) 100%);
		opacity: 0.3;
	}

	.auto-container {
		padding: 0 15px;
	}

	/* Section Titles - Ram Mandir Style */
	.sec-title h2 {
		font-size: 18px !important;
		line-height: 1.3;
		margin-bottom: 15px;
		color: #222222;
		position: relative;
		padding-bottom: 12px;
	}

	.sec-title h2::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 60px;
		height: 3px;
		background: linear-gradient(90deg, var(--ram-saffron), var(--ram-orange));
		border-radius: 2px;
	}

	.sec-title.centered h2::after {
		left: 50%;
		transform: translateX(-50%);
	}

	.sec-title {
		margin-bottom: 25px;
	}

	/* Remove excessive spacing */
	.theme-separator {
		margin: 20px 0 !important;
		height: 2px;
		background: linear-gradient(90deg, 
			transparent 0%, 
			var(--ram-temple-stone) 50%, 
			transparent 100%);
		border: none;
	}

	/* ===== MOBILE CARDS & CONTENT ===== */
	
	/* Service/Plan Cards - Ram Mandir Inspired */
	.service-block,
	.case-block,
	.news-block {
		margin-bottom: 20px;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(255, 153, 51, 0.1);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		border-top: 3px solid var(--ram-saffron);
		background: #ffffff;
	}

	.service-block:active,
	.case-block:active {
		transform: scale(0.98);
		box-shadow: 0 4px 16px rgba(255, 153, 51, 0.2);
	}

	/* Plan/Location Cards with temple accent */
	.locations-section .case-block,
	.service-block {
		position: relative;
	}

	.locations-section .case-block::before,
	.service-block::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 4px;
		height: 100%;
		background: linear-gradient(180deg, var(--ram-saffron), var(--ram-orange));
	}

	/* About Section Mobile */
	.about-section .text-column,
	.about-section .image-column {
		margin-bottom: 20px;
	}

	/* Feature boxes in about section - Bootstrap 4 */
	.about-section .text-column .row .col-4 {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	.about-section .text-column .row .col-4 figure {
		margin-bottom: 10px !important;
	}

	.about-section .text-column .row .col-4 figure img {
		max-width: 45px;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.about-section .text-column .row .col-4 h4 {
		font-size: 10px !important;
		line-height: 1.2;
		margin: 0;
		padding: 0;
		word-wrap: break-word;
	}

	.about-section .row .col-sm-4 figure img {
		max-width: 60px;
		height: auto;
	}

	.about-section .row .col-sm-4 h4 {
		font-size: 14px;
		margin-top: 10px;
	}

	/* ===== FLOATING BOTTOM NAVIGATION ===== */
	.mobile-bottom-nav {
		display: none;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(to top, #ffffff, #fffef8);
		border-top: 2px solid var(--ram-saffron);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		padding: 5px 0 8px 0;
		height: 60px;
	}

	@media only screen and (max-width: 767px) {
		.mobile-bottom-nav {
			display: block;
		}
	}

	.mobile-bottom-nav .nav-container {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 10px;
		position: relative;
		height: 100%;
	}

	.mobile-bottom-nav .nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		text-decoration: none;
		color: #666666;
		transition: all 0.3s ease;
		padding: 5px 5px 0 5px;
		flex: 1;
		position: relative;
	}

	.mobile-bottom-nav .nav-item .nav-icon {
		font-size: 18px;
		margin-bottom: 2px;
		transition: all 0.3s ease;
	}

	.mobile-bottom-nav .nav-item .nav-text {
		font-size: 11px;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	/* Active state */
	.mobile-bottom-nav .nav-item.active {
		color: var(--ram-saffron);
	}

	.mobile-bottom-nav .nav-item.active .nav-icon {
		transform: scale(1.1);
	}

	/* Center action button (half elevated outside) */
	.mobile-bottom-nav .nav-item.center-action {
		background: linear-gradient(135deg, var(--ram-saffron), var(--ram-orange));
		color: #ffffff;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -30px;
		box-shadow: 0 4px 16px rgba(255, 153, 51, 0.5);
		flex: 0 0 60px;
		padding: 0;
		justify-content: center;
		border: 3px solid #ffffff;
	}

	.mobile-bottom-nav .nav-item.center-action .nav-icon {
		font-size: 28px;
		margin-bottom: 0;
	}

	.mobile-bottom-nav .nav-item.center-action .nav-text {
		display: none;
	}

	.mobile-bottom-nav .nav-item.center-action:active {
		transform: translateX(-50%) scale(0.95);
	}

	/* ===== MOBILE BUTTONS ===== */
	.theme-btn {
		width: 100%;
		text-align: center;
		padding: 12px 20px !important;
		border-radius: 8px;
		font-size: 14px !important;
		margin: 10px 0;
		touch-action: manipulation;
	}

	.theme-btn:active {
		transform: scale(0.98);
	}

	/* ===== MOBILE FORMS ===== */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	textarea,
	select {
		width: 100%;
		padding: 12px 15px;
		font-size: 16px; /* Prevents zoom on iOS */
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		margin-bottom: 15px;
		-webkit-appearance: none;
		appearance: none;
	}

	input:focus,
	textarea:focus,
	select:focus {
		outline: none;
		border-color: #ffa24c;
		box-shadow: 0 0 0 3px rgba(249, 27, 3, 0.1);
	}

	/* ===== MOBILE FOOTER ===== */
	.main-footer {
		padding-bottom: 40px; /* Space for floating nav */
	}

	.main-footer .widgets-section {
		padding: 40px 0 20px !important;
	}

	.main-footer .column {
		margin-bottom: 30px;
	}

	.main-footer .widget-title h4 {
		font-size: 16px;
		margin-bottom: 15px;
	}

	.main-footer .links li {
		margin-bottom: 8px;
	}

	.main-footer .links li a {
		font-size: 13px;
	}

	.footer-bottom {
		padding: 15px 0;
		font-size: 12px;
		text-align: center;
	}

	/* ===== MOBILE TOUCH IMPROVEMENTS ===== */
	
	/* Larger touch targets */
	a, button, .clickable {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Smooth scrolling */
	html {
		scroll-behavior: smooth;
	}

	/* Pull to refresh indicator space */
	body {
		overscroll-behavior-y: contain;
	}

	/* ===== MOBILE ANIMATIONS ===== */
	@keyframes slideUp {
		from {
			transform: translateY(100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.mobile-bottom-nav {
		animation: slideUp 0.3s ease-out;
	}

	/* ===== MOBILE UTILITY CLASSES ===== */
	.mobile-only {
		display: block !important;
	}

	.desktop-only {
		display: none !important;
	}

	.mobile-text-center {
		text-align: center !important;
	}

	.mobile-mb-20 {
		margin-bottom: 20px !important;
	}

	.mobile-p-15 {
		padding: 15px !important;
	}

	/* ===== MOBILE GRID SYSTEM ===== */
	.row {
		margin-left: -10px;
		margin-right: -10px;
	}

	.row > [class*="col-"] {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* ===== MOBILE IMAGES ===== */
	img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* ===== MOBILE TABLES ===== */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ===== HIDE DESKTOP ELEMENTS ===== */
	.sticky-header {
		display: none !important;
	}

	/* Hide desktop-only content on mobile */
	.desktop-only,
	.hide-mobile,
	.banner-carousel .content-box .content-image,
	.main-header .header-top .top-left,
	.main-header .header-upper .right-info {
		display: none !important;
	}

	/* Hide desktop navigation elements */
	.main-header .nav-outer .main-menu {
		display: none !important;
	}

	/* Ensure mobile nav toggler is visible */
	.nav-outer .mobile-nav-toggler {
		display: block !important;
	}

	/* ===== MOBILE SEARCH ===== */
	.search-popup .search-form fieldset input[type="search"] {
		font-size: 16px !important; /* Prevents zoom */
		padding: 15px 20px;
	}

	/* ===== MOBILE MODAL/POPUP ===== */
	.modal,
	.popup {
		padding: 15px;
	}

	.modal-content {
		border-radius: 12px;
		max-height: 90vh;
		overflow-y: auto;
	}

	/* ===== MOBILE LOADING STATES ===== */
	.loading {
		pointer-events: none;
		opacity: 0.6;
	}

	/* ===== MOBILE SAFE AREAS (iPhone X+) ===== */
	@supports (padding: max(0px)) {
		.mobile-bottom-nav {
			padding-bottom: max(8px, env(safe-area-inset-bottom));
		}

		.page-wrapper {
			padding-bottom: max(70px, calc(70px + env(safe-area-inset-bottom)));
		}
	}
}

/* ========================================
   MOBILE LANDSCAPE ADJUSTMENTS
======================================== */

@media only screen and (max-width: 767px) and (orientation: landscape) {
	.banner-carousel .content-box {
		min-height: 250px !important;
	}

	.banner-carousel .slide-item {
		min-height: 250px;
	}

	.mobile-bottom-nav {
		padding: 5px 0;
	}

	.mobile-bottom-nav .nav-item .nav-icon {
		font-size: 20px;
		margin-bottom: 2px;
	}

	.mobile-bottom-nav .nav-item {
		font-size: 10px;
	}
}