/* ==========================================================================
   CUSTOM STYLES FOR CRUST PIZZA
   ========================================================================== */

/* Product Cards Alignment - Make cards stretch to full height of their column */
#menu-6 .row {
	display: flex;
	flex-wrap: wrap;
}

#menu-6 .col-sm-6,
#menu-6 .col-lg-3 {
	display: flex;
}

#menu-6 .menu-6-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#menu-6 .menu-6-txt {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: visible;
}

#menu-6 .menu-6-price {
	margin-top: auto;
	display: inline-block !important;
	width: auto !important;
	max-width: 100%;
	align-self: flex-start;
}

/* Ensure background only applies to price box, not entire card */
#menu-6 .menu-6-item.bg-white {
	background-color: #fff !important;
}

/* Force price box to maintain its natural width */
#menu-6 .menu-6-price.bg-coffee {
	display: inline-block !important;
	width: auto !important;
	flex-shrink: 0;
}

/* ==========================================================================
   STICKY HEADER IMPROVEMENTS
   ========================================================================== */

/* Header-3 specific styles */
#header-3.navik-header {
	padding-bottom: 10px;
	background: #e81b1f !important;
	padding-top: 20px;
}

/* Header transparent and opacity states */
.navik-header.header-transparent-on,
.navik-header.header-opacity-on {
	position: absolute;
	width: 100%;
	background-color: #e81b1f !important;
	padding-bottom: 20px;
	padding-top: 20px;
}

/* Ensure sticky header has proper z-index */
.navik-header.sticky {
	z-index: 9999 !important;
	top: 0;
	left: 0;
	right: 0;
	background-color: #e81b1f !important;
	padding-bottom: 20px;
	padding-top: 20px;
}

/* Header-3 sticky specific */
#header-3.navik-header.sticky {
	background-color: #e81b1f !important;
	padding-bottom: 20px;
	padding-top: 20px;
}

/* Smooth transition for sticky header */
.navik-header {
	transition: all 0.3s ease-in-out;
}

/* Logo transition when sticky */
.navik-header .logo img {
	transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
	max-width: 100%;
	height: auto;
	display: block;
}

/* Logo specific styles */
.navik-header .logo img[src$=".png"],
.navik-header .logo img[src$=".svg"],
.navik-header .logo img[src*="logo-crust"],
.navik-header .logo img[src*="crust-logo"] {
	max-width: 200px !important;
	width: auto !important;
	height: auto !important;
	max-height: 80px !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Force logo visibility */
.navik-header .logo {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.navik-header .logo img {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Mobile - Reducem zona clickabilă la dimensiunea logo-ului */
@media (max-width: 1199px) {
	.navik-header .logo {
		padding: 0 !important;
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
	}
	
	.navik-header .logo a {
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
		line-height: 0 !important;
		margin: 0 !important;
	}
	
	.navik-header .logo img {
		display: block !important;
		width: auto !important;
		height: auto !important;
		max-height: 60px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}


/* Sticky header logo sizing */
.navik-header.sticky .logo img {
	max-height: 70px;
	width: auto;
}

/* Center menu logo in sticky mode */
.navik-header.sticky .logoCenter .logo img {
	max-height: 70px;
	width: auto;
}

/* Responsive logo adjustments */
@media (max-width: 1199px) {
	.navik-header .logo img {
		max-height: 60px;
	}
	
	.navik-header.sticky .logo img {
		max-height: 60px;
	}
}

@media (max-width: 767px) {
	.navik-header .logo {
		padding: 0 !important;
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
	}
	
	.navik-header .logo a {
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
		line-height: 0 !important;
		margin: 0 !important;
	}
	
	.navik-header .logo img {
		max-height: 50px !important;
		display: block !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	.navik-header.sticky .logo img {
		max-height: 50px !important;
	}
	
	/* Ensure burger menu is visible on mobile */
	.navik-header .burger-menu {
		display: block !important;
	}
}

/* Ensure header doesn't jump when becoming sticky */
body:not(.no-sticky-body) {
	transition: padding-top 0.3s ease-in-out;
}

/* Fix for header transparent on scroll - păstrăm același background roșu */
.navik-header.header-transparent.sticky,
.navik-header.header-transparent.sticky.header-transparent-on,
.navik-header.header-opacity.sticky,
.navik-header.header-opacity.sticky.header-opacity-on {
	background-color: #e81b1f !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding-bottom: 20px !important;
	padding-top: 20px !important;
}

/* Asigurăm că sticky header păstrează background-ul roșu în toate cazurile */
.navik-header.sticky,
.navik-header.sticky.header-transparent,
.navik-header.sticky.header-opacity,
.navik-header.sticky.header-transparent-on,
.navik-header.sticky.header-opacity-on {
	background-color: #e81b1f !important;
	padding-bottom: 20px !important;
	padding-top: 20px !important;
}

/* Menținem același stil (culori) pentru meniul sticky ca și pentru header-ul inițial */
.navik-header.sticky .navik-menu > ul > li > a {
	color: #f7f7f7 !important; /* la fel ca .header-transparent-on */
}

.navik-header.sticky .navik-menu > ul > li > a .navik-menu-icon {
	color: rgba(255, 255, 255, 0.85) !important;
}

.navik-header.sticky .navik-menu > ul > li:hover > a,
.navik-header.sticky .navik-menu > ul > li.current-menu > a {
	color: #26c6da !important; /* la fel ca hover pe header transparent */
}

.navik-header.sticky .navik-menu > ul > li.dropdown_menu > a > span::before {
	border-color: #f7f7f7 !important;
}

/* Logo center responsive adjustments */
@media (max-width: 1199px) {
	.logoCenter {
		display: none !important;
	}
	
	.center-menu-1 .navik-menu > ul {
		width: 100% !important;
	}
}

/* Desktop - Logo visibility for header-3 (left aligned) */
@media (min-width: 1200px) {
	#header-3.navik-header .logo {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		float: left !important;
		position: relative !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		padding: 0 !important;
	}
	
	#header-3.navik-header .logo img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		max-width: 200px !important;
		width: auto !important;
		height: auto !important;
		max-height: 80px !important;
	}
	
	/* Meniu pe un singur rând - combinăm ambele liste */
	#header-3.navik-header .navik-menu {
		float: right !important;
		display: block !important;
	}
	
	#header-3.navik-header .navik-menu > ul {
		display: inline-block !important;
		vertical-align: top !important;
		font-size: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	#header-3.navik-header .navik-menu > ul > li {
		display: inline-block !important;
		float: none !important;
		white-space: nowrap !important;
		font-size: 15px !important;
		vertical-align: top !important;
	}
	
	/* Asigurăm că logo-ul este vizibil și poziționat corect */
	#header-3.navik-header .navik-header-container {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	
	#header-3.navik-header .logo {
		flex-shrink: 0 !important;
		margin-right: 20px !important;
	}
}

/* Single Product Page - Aliniere verticală pentru descrierea produsului */
#product-1 .row {
	display: flex !important;
	align-items: center !important;
}

#product-1 .col-lg-5 {
	display: flex !important;
	align-items: center !important;
}

#product-1 .product-description {
	width: 100% !important;
}

/* Hero Section - Font pentru titlul principal - Tilt Warp */
#hero-1 h2,
#hero-2 h2,
#hero-3 h2,
.hero-4-txt h2,
#hero-6 h2,
#hero-9 h2 {
	font-family: 'Tilt Warp', cursive !important;
	font-size: 5.5rem !important; 
}

/* Hero Section - Responsive Font Sizes */
@media (max-width: 1199px) {
	#hero-1 h2 {
		font-size: 5.5rem !important;
	}
	
	#hero-1 p {
		font-size: 1.5rem !important;
	}
}

@media (max-width: 991px) {
	#hero-1 h2 {
		font-size: 4rem !important;
	}
	
	#hero-1 p {
		font-size: 1.3rem !important;
	}
}

@media (max-width: 767px) {
	#hero-1 h2 {
		font-size: 2.5rem !important;
		letter-spacing: 0.5px !important;
		line-height: 1.2 !important;
		margin-bottom: 15px !important;
		word-wrap: break-word !important;
	}
	
	#hero-1 p {
		font-size: 1rem !important;
		line-height: 1.4 !important;
		margin-bottom: 0 !important;
	}
	
	#hero-1 .caption-txt {
		padding: 0 15px !important;
		text-align: center !important;
	}
	
	#hero-1 .title {
		margin-bottom: 10px !important;
	}
}

@media (max-width: 575px) {
	#hero-1 h2 {
		font-size: 1.8rem !important;
		letter-spacing: 0.5px !important;
		line-height: 1.2 !important;
		margin-bottom: 10px !important;
		word-wrap: break-word !important;
	}
	
	#hero-1 p {
		font-size: 0.9rem !important;
		line-height: 1.3 !important;
		margin-bottom: 0 !important;
	}
	
	#hero-1 .caption-txt {
		padding: 0 10px !important;
		text-align: center !important;
	}
	
	#hero-1 .title {
		margin-bottom: 8px !important;
	}
}

/* Promo Boxes (pb-2-1 și pb-2-2) - Responsive Font Sizes */
#pb-2-1 .pbox-2-txt h4.h4-lg,
#pb-2-1 .pbox-2-txt h4.h4-xl,
#pb-2-2 .pbox-2-txt h4.h4-lg,
#pb-2-2 .pbox-2-txt h4.h4-xl {
	transition: font-size 0.3s ease;
}

@media (max-width: 1199px) {
	#pb-2-1 .pbox-2-txt h4.h4-lg,
	#pb-2-2 .pbox-2-txt h4.h4-lg {
		font-size: 1.8rem !important;
	}
	
	#pb-2-1 .pbox-2-txt h4.h4-xl,
	#pb-2-2 .pbox-2-txt h4.h4-xl {
		font-size: 2rem !important;
	}
}

@media (max-width: 991px) {
	#pb-2-1 .pbox-2-txt h4.h4-lg,
	#pb-2-2 .pbox-2-txt h4.h4-lg {
		font-size: 1.6rem !important;
	}
	
	#pb-2-1 .pbox-2-txt h4.h4-xl,
	#pb-2-2 .pbox-2-txt h4.h4-xl {
		font-size: 1.75rem !important;
	}
}

@media (max-width: 767px) {
	#pb-2-1 .pbox-2-txt h4.h4-lg,
	#pb-2-2 .pbox-2-txt h4.h4-lg {
		font-size: 1.3rem !important;
		line-height: 1.3 !important;
		margin-bottom: 5px !important;
	}
	
	#pb-2-1 .pbox-2-txt h4.h4-xl,
	#pb-2-2 .pbox-2-txt h4.h4-xl {
		font-size: 1.4rem !important;
		line-height: 1.3 !important;
		margin-bottom: 15px !important;
	}
	
	#pb-2-1 .pbox-2,
	#pb-2-2 .pbox-2 {
		padding: 40px 20px 30px !important;
		text-align: right !important;
	}
	
	#pb-2-1 .pbox-2-txt,
	#pb-2-2 .pbox-2-txt {
		text-align: right !important;
	}
}

@media (max-width: 575px) {
	#pb-2-1 .pbox-2-txt h4.h4-lg,
	#pb-2-2 .pbox-2-txt h4.h4-lg {
		font-size: 1.1rem !important;
		line-height: 1.2 !important;
		margin-bottom: 5px !important;
	}
	
	#pb-2-1 .pbox-2-txt h4.h4-xl,
	#pb-2-2 .pbox-2-txt h4.h4-xl {
		font-size: 1.2rem !important;
		line-height: 1.2 !important;
		margin-bottom: 12px !important;
	}
	
	#pb-2-1 .pbox-2,
	#pb-2-2 .pbox-2 {
		padding: 30px 15px 25px !important;
		text-align: right !important;
	}
	
	#pb-2-1 .pbox-2-txt,
	#pb-2-2 .pbox-2-txt {
		text-align: right !important;
	}
	
	#pb-2-1 .pbox-2-txt .btn,
	#pb-2-2 .pbox-2-txt .btn {
		font-size: 0.9rem !important;
		padding: 10px 20px !important;
	}
}

/* ==========================================================================
   MOBILE CALL BAR - Click to Call
   ========================================================================== */

/* Bara de call - ascunsă pe desktop */
.mobile-call-bar {
	display: none;
}

/* Vizibil doar pe mobile */
@media (max-width: 991px) {
	.mobile-call-bar {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		background-color: #e81b1f;
		z-index: 10000;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
	}
	
	.mobile-call-bar .call-bar-link {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 25px;
		color: #ffffff;
		text-decoration: none;
		font-weight: 600;
		width: 100%;
		transition: background-color 0.3s ease;
	}
	
	.mobile-call-bar .call-bar-link:hover,
	.mobile-call-bar .call-bar-link:active {
		background-color: #c5161a;
		color: #ffffff;
		text-decoration: none;
	}
	
	.mobile-call-bar .call-icon {
		margin-right: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: vibrate 1s ease-in-out infinite;
	}
	
	.mobile-call-bar .call-icon .material-symbols-outlined {
		font-size: 32px;
		line-height: 1;
	}
	
	.mobile-call-bar .call-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		text-align: center;
	}
	
	.mobile-call-bar .call-text {
		font-size: 1.8rem;
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 3px;
	}
	
	.mobile-call-bar .call-number {
		font-size: 1.2rem;
		font-weight: 600;
		opacity: 0.95;
	}
}

/* Animație de vibrație pentru icon */
@keyframes vibrate {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-3px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(3px);
	}
}

/* Ajustare pentru ecrane foarte mici */
@media (max-width: 575px) {
	.mobile-call-bar .call-bar-link {
		padding: 18px 20px;
	}
	
	.mobile-call-bar .call-icon {
		margin-right: 12px;
	}
	
	.mobile-call-bar .call-icon .material-symbols-outlined {
		font-size: 28px;
	}
	
	.mobile-call-bar .call-text {
		font-size: 1.5rem;
	}
	
	.mobile-call-bar .call-number {
		font-size: 1rem;
	}
}

/* Adăugăm padding-bottom la body pe mobile pentru a evita suprapunerea cu bara fixă */
@media (max-width: 991px) {
	body {
		padding-bottom: 85px;
	}
}

@media (max-width: 575px) {
	body {
		padding-bottom: 80px;
	}
}

/* ==========================================================================
   SCROLL UP BUTTON - DISABLED
   ========================================================================== */

/* Ascundem complet butonul scrollUp pe toate dispozitivele */
#scrollUp {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Ascundem butonul scrollUp și pe mobile */
@media (max-width: 991px) {
	#scrollUp {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
}

@media (max-width: 767px) {
	#scrollUp {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
}

@media (max-width: 575px) {
	#scrollUp {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
}