/* Responsive Media Queries */
@media screen and (min-width: 1025px) {
	header #menu-open-btn,
	#search-bar-btn,
	nav,
	nav #menu-close-btn,
	main .movie-show-close,
	nav .nav-menu h3,
	nav .nav-menu .nav-menu-title,
	nav .nav-menu #accordion p,
	nav .nav-menu #accordion p i,
	main .m-con2 .sel-date input[type='button'],
	main .m-con3 .sel-date input[type='button'] {
		transition: all 0.2s;
	}

	header #menu-open-btn:active {
		background: rgba(139, 92, 246, 0.4);
		border-radius: 50%;
	}

	#search-bar-btn:active {
		background: rgba(139, 92, 246, 0.4);
		color: #ffffff;
	}

	nav #menu-close-btn:active,
	main .movie-show-close:active {
		background: rgba(139, 92, 246, 0.4);
		border-radius: 50%;
	}

	nav {
		width: 400px;
	}
}

@media screen and (max-width: 1599px) {
	nav {
		width: 400px;
	}
}

/* Tablet & Smaller Devices */
@media screen and (max-width: 1024px) {
	main .subtitle h1,
	main .subtitle h2 {
		font-size: 1.7rem !important;
	}

	main .subtitle h1 .h1-date {
		font-size: 1.7rem !important;
	}

	nav {
		width: 100% !important;
	}

	.rbox1-top, .rbox2-top, .rbox3-top, .s-top {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px;
	}

	main .rbox {
		padding: 16px;
	}

	main .rbox .rbox-poster {
		max-height: 360px;
	}

	main .rbox .rbox-poster-img {
		max-height: 360px;
		object-fit: cover;
	}

	main .rbox .rbox-rank {
		width: auto;
		height: auto;
		top: 16px;
		left: 8px;
		border-radius: 0;
	}

	main .rbox .rbox-rank-p {
		font-size: 1.8rem;
		transform: none;
	}
}

/* Mobile Devices */
@media screen and (max-width: 640px) {
	.subtitle-header {
		justify-content: center !important;
		text-align: center !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
	}

	main .subtitle h1,
	main .subtitle h2 {
		font-size: 1.7rem !important;
		line-height: 1.4 !important;
		letter-spacing: -0.3px !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		text-align: center !important;
		margin: 0 auto !important;
		word-break: keep-all !important;
	}

	main .subtitle h1 .h1-main-text {
		display: inline-block !important;
		text-align: center !important;
		width: 100% !important;
	}

	main .subtitle h1 .h1-date {
		font-size: 1.7rem !important;
		color: inherit !important;
		font-weight: inherit !important;
		margin-left: 5px !important;
		white-space: nowrap !important;
		display: inline !important;
	}

	nav {
		width: 100% !important;
	}

	.rbox1-top, .rbox2-top, .rbox3-top, .s-top {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}

	main .sel-date {
		width: 100%;
		margin-top: 8px;
		display: flex;
		justify-content: center;
	}

	main .single-date-selector {
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
	}

	main .single-date-selector .selected-date-text {
		flex: 1;
		text-align: center;
	}

	main .rbox {
		padding: 14px 16px;
		border-radius: 18px;
	}

	main .rbox .rbox-poster {
		max-height: 220px;
		width: 100%;
		aspect-ratio: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.04);
		margin-bottom: 10px;
	}

	main .rbox .rbox-poster-img {
		max-height: 220px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		margin: 0 auto;
	}

	main .rbox .rbox-rank {
		width: auto;
		height: auto;
		top: 16px;
		left: 8px;
		border-radius: 0;
	}

	main .rbox .rbox-rank-p {
		font-size: 1.6rem;
		transform: none;
	}

	main .rbox .rbox-title {
		font-size: 1.5rem;
		height: auto;
		max-height: 2.8em;
		margin-bottom: 8px;
	}

	main .rbox .rbox-num .audi-item {
		font-size: 1.15rem;
		gap: 6px;
	}

	main .rbox .rbox-date {
		font-size: 1.15rem;
	}

	main .rbox-rank-gap {
		font-size: 1.15rem;
	}
}

/* Small Mobile Screens */
@media screen and (max-width: 480px) {
	main .subtitle h1,
	main .subtitle h2 {
		font-size: 1.7rem !important;
		line-height: 1.4 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
		width: 100% !important;
		margin: 0 auto !important;
	}

	main .subtitle h1 .h1-main-text {
		display: inline-block !important;
		text-align: center !important;
		width: 100% !important;
	}

	main .subtitle h1 .h1-date {
		font-size: 1.7rem !important;
		margin-left: 4px !important;
	}

	main .rbox .rbox-rank {
		width: auto;
		height: auto;
		top: 15px;
		left: 6px;
		border-radius: 0;
	}

	main .rbox .rbox-rank-p {
		font-size: 1.25rem;
		transform: none;
	}

	main .rbox .rbox-num .audi-item {
		font-size: 1.05rem;
	}
}

/* Responsive Split Layout & Table */
@media screen and (max-width: 960px) {
	.bottom-split-section {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.bottom-ad-sidebar {
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width: 640px) {
	.simple-rank-card {
		padding: 16px 14px !important;
		border-radius: 14px !important;
	}

	.simple-rank-title-group h2 {
		font-size: 1.4rem !important;
	}

	.simple-movie-table {
		font-size: 1.15rem !important;
	}

	.simple-movie-table th {
		font-size: 1.15rem !important;
	}

	.simple-movie-table td {
		font-size: 1.15rem !important;
		padding: 5px 6px !important;
	}

	.simple-movie-table .td-title strong {
		font-size: 1.15rem !important;
	}

	.table-rank-badge {
		width: 20px !important;
		height: 20px !important;
		font-size: 1.05rem !important;
	}
}