/**
 * Stylesheet for the Floating Contact Sidebar.
 *
 * @package MinimeditecProductPage
 */

/* Style 1, Style 2, and bottom sheet are hidden on desktop viewports by default */
.mmpp-floating-sidebar,
.mmpp-bottom-nav-bar,
.mmpp-filter-sheet-overlay,
.mmpp-filter-sheet {
	display: none !important;
}

/* Mobile-Only Layouts & Animations (max-width: 768px) */
@media (max-width: 768px) {
	
	/* Prevent horizontal scroll/overflow on mobile viewports */
	html, body {
		overflow-x: hidden !important;
	}
	
	/* ==========================================================================
	   STYLE 1: SIDE DRAWER
	   ========================================================================== */
	.mmpp-floating-sidebar {
		position: fixed;
		top: 50%;
		z-index: 9999999;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		padding: 20px 10px;
		gap: 16px;
		background-color: var(--mmpp-bg-rgba, rgba(26, 10, 0, 0.8));
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		border: none;
		transition: transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1.15);
	}

	/* Position: Right Side (Closed with 20px bleed) */
	.mmpp-floating-sidebar.mmpp-position-right {
		right: -20px;
		padding-right: 30px;
		border-radius: 24px 0 0 24px;
		box-shadow: -6px 5px 25px rgba(0, 0, 0, 0.22);
		transform: translate3d(calc(100% - 20px), -50%, 0);
	}

	/* Position: Right Side (Expanded state) */
	.mmpp-floating-sidebar.mmpp-position-right.mmpp-expanded {
		transform: translate3d(0, -50%, 0);
		transition: transform 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	/* Position: Left Side (Closed with 20px bleed) */
	.mmpp-floating-sidebar.mmpp-position-left {
		left: -20px;
		padding-left: 30px;
		border-radius: 0 24px 24px 0;
		box-shadow: 6px 5px 25px rgba(0, 0, 0, 0.22);
		transform: translate3d(calc(-100% + 20px), -50%, 0);
	}

	/* Position: Left Side (Expanded state) */
	.mmpp-floating-sidebar.mmpp-position-left.mmpp-expanded {
		transform: translate3d(0, -50%, 0);
		transition: transform 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	/* Sidebar Content Inner container */
	.mmpp-sidebar-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}

	/* Toggle Tab Pull-out Trigger */
	.mmpp-sidebar-toggle-tab {
		position: absolute;
		top: 50%;
		width: 32px;
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--mmpp-bg-rgba, rgba(26, 10, 0, 0.8)) !important;
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		border: none;
		cursor: pointer;
		color: #F5EDD8 !important;
		padding: 0;
		z-index: 10;
		outline: none;
	}

	.mmpp-sidebar-toggle-tab:hover,
	.mmpp-sidebar-toggle-tab:focus,
	.mmpp-sidebar-toggle-tab:active {
		background-color: var(--mmpp-bg-rgba, rgba(26, 10, 0, 0.8)) !important;
		color: #F5EDD8 !important;
	}

	/* Toggle Tab - Right aligned layout */
	.mmpp-position-right .mmpp-sidebar-toggle-tab {
		right: calc(100% - 0.5px);
		transform: translateY(-50%);
		border-radius: 24px 0 0 24px;
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.08);
		transform-origin: right center;
	}

	/* Toggle Tab - Left aligned layout */
	.mmpp-position-left .mmpp-sidebar-toggle-tab {
		left: calc(100% - 0.5px);
		transform: translateY(-50%);
		border-radius: 0 24px 24px 0;
		box-shadow: 5px 0 15px rgba(0, 0, 0, 0.08);
		transform-origin: left center;
	}

	/* Toggle Arrow Icons styling */
	.mmpp-toggle-arrow {
		width: 20px;
		height: 20px;
		opacity: 0.85;
		transition: transform 0.3s ease;
	}

	/* Arrow flips 180 deg when expanded */
	.mmpp-expanded .mmpp-toggle-arrow {
		transform: rotate(180deg);
	}

	/* Sidebar Contact Items buttons */
	.mmpp-sidebar-item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		color: #F5EDD8;
		background-color: rgba(201, 168, 76, 0.06);
		text-decoration: none;
		cursor: pointer;
	}

	.mmpp-sidebar-item svg {
		width: 20px;
		height: 20px;
	}

	/* Disable Tooltips on mobile to prevent overlay hover issues */
	.mmpp-sidebar-tooltip {
		display: none !important;
	}

	/* ==========================================================================
	   STYLE 2: BOTTOM FLOATING BAR
	   ========================================================================== */
	.mmpp-bottom-nav-bar {
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translate3d(-50%, 0, 0);
		width: calc(100% - 32px);
		max-width: 420px;
		height: 58px;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		background-color: var(--mmpp-bg-rgba, rgba(26, 10, 0, 0.8));
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		border-radius: 30px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
		z-index: 9999999;
		overflow: hidden;
		transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
		box-sizing: border-box;
	}

	.mmpp-bottom-bar-socials,
	.mmpp-bottom-bar-actions {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.mmpp-bottom-bar-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		color: #F5EDD8 !important;
		background-color: rgba(201, 168, 76, 0.06);
		border: none;
		text-decoration: none;
		cursor: pointer;
		padding: 0;
		outline: none;
	}

	.mmpp-bottom-bar-item svg {
		width: 18px;
		height: 18px;
	}

	.mmpp-bottom-bar-separator {
		width: 1px;
		height: 24px;
		background-color: rgba(201, 168, 76, 0.22);
		margin: 0 4px;
	}

	/* ==========================================================================
	   STYLE 2: BOTTOM SHEET DRAWER
	   ========================================================================== */
	.mmpp-filter-sheet-overlay {
		display: block !important;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		z-index: 9999998;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
	}

	.mmpp-filter-sheet-overlay.mmpp-sheet-active {
		opacity: 1;
		pointer-events: auto;
	}

	.mmpp-filter-sheet {
		display: block !important;
		position: fixed;
		bottom: -50px; /* Bleed below the screen bottom to mask bounce gaps */
		left: 0;
		right: 0;
		background: rgba(26, 10, 0, 0.95);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 30px 30px 0 0;
		z-index: 9999999;
		padding: 20px 24px 85px; /* Offset the 50px bleed */
		box-sizing: border-box;
		transform: translate3d(0, 100%, 0);
		transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.25), bottom 0.3s ease;
		max-height: calc(85vh + 50px);
		overflow-y: auto;
	}

	.mmpp-filter-sheet.mmpp-sheet-active {
		transform: translate3d(0, 0, 0);
	}

	.mmpp-filter-sheet-handle {
		width: 40px;
		height: 5px;
		background: rgba(245, 237, 216, 0.15);
		border-radius: 3px;
		margin: 0 auto 15px;
	}

	.mmpp-filter-sheet-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.mmpp-filter-sheet-header h2 {
		font-family: 'Lato', sans-serif;
		font-size: 16px;
		font-weight: 700;
		color: #F5EDD8;
		margin: 0;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.mmpp-filter-sheet-close {
		background: transparent !important;
		border: none !important;
		color: #F5EDD8 !important;
		padding: 5px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		outline: none !important;
	}

	.mmpp-filter-sheet-close svg {
		width: 20px;
		height: 20px;
	}

	.mmpp-filter-section {
		margin-bottom: 22px;
	}

	.mmpp-filter-section h3 {
		font-family: 'Lato', sans-serif;
		font-size: 12px;
		font-weight: 700;
		color: #C9A84C;
		margin: 0 0 10px;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	/* Search Input inside Sheet */
	.mmpp-search-input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
	}

	.mmpp-sheet-search-input {
		width: 100%;
		height: 46px;
		background: rgba(255, 255, 255, 0.04) !important;
		border: 1px solid rgba(201, 168, 76, 0.12) !important;
		border-radius: 12px !important;
		padding: 0 16px 0 42px !important;
		color: #F5EDD8 !important;
		font-size: 16px !important; /* Prevents auto-zoom */
		outline: none !important;
		box-shadow: none !important;
		transition: all 0.3s ease;
		box-sizing: border-box;
	}

	.mmpp-sheet-search-input:focus {
		border-color: #C9A84C !important;
		background: rgba(255, 255, 255, 0.08) !important;
	}

	.mmpp-search-icon-inside {
		position: absolute;
		left: 14px;
		color: rgba(245, 237, 216, 0.45);
		pointer-events: none;
	}

	/* Category Pills (horizontal scrolling) */
	.mmpp-filter-categories-pills {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.mmpp-filter-categories-pills::-webkit-scrollbar {
		display: none;
	}

	.mmpp-category-pill {
		cursor: pointer;
	}

	.mmpp-category-pill input {
		display: none !important;
	}

	.mmpp-category-pill span {
		display: inline-block;
		padding: 8px 14px;
		border-radius: 18px;
		font-size: 13px;
		font-weight: 500;
		color: rgba(245, 237, 216, 0.7);
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid transparent;
		transition: all 0.25s ease;
		white-space: nowrap;
	}

	.mmpp-category-pill input:checked + span {
		background: rgba(201, 168, 76, 0.15);
		border-color: #C9A84C;
		color: #C9A84C;
		font-weight: 600;
	}

	/* Price Range inputs */
	.mmpp-filter-price-inputs {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.mmpp-price-input {
		flex-grow: 1;
		height: 42px;
		background: rgba(255, 255, 255, 0.04) !important;
		border: 1px solid rgba(201, 168, 76, 0.12) !important;
		border-radius: 12px !important;
		padding: 0 12px !important;
		color: #F5EDD8 !important;
		font-size: 14px !important;
		text-align: center !important;
		outline: none !important;
		box-shadow: none !important;
		box-sizing: border-box;
		-moz-appearance: textfield;
	}

	.mmpp-price-input::-webkit-outer-spin-button,
	.mmpp-price-input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.mmpp-price-input:focus {
		border-color: #C9A84C !important;
	}

	.mmpp-price-range-separator {
		color: rgba(245, 237, 216, 0.4);
		font-size: 13px;
		font-weight: 500;
	}

	/* Submit button */
	.mmpp-filter-sheet-submit {
		width: 100%;
		height: 48px;
		background: #C9A84C !important;
		color: #1a0a00 !important;
		border: none !important;
		border-radius: 12px !important;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		transition: all 0.3s ease;
		margin-top: 10px;
		outline: none !important;
		box-shadow: 0 4px 10px rgba(201, 168, 76, 0.15);
	}

	.mmpp-filter-sheet-submit:active {
		background: #d9bd6a !important;
	}
}