/*!
 * MockFrame device styles
 * Adapted from Marvel devices.css (https://github.com/marvelapp/devices.css)
 * Original work Copyright (c) 2014 Marvelapp — MIT License
 * Modifications Copyright (c) 2026 Mohammed Banani — MIT License
 */
/* Trimmed for FormulaDash's site to three devices (MacBook Pro, iPad Pro, iPhone 18 Pro) from react-mockframe 1.3.0
   (https://github.com/mbdev3/react-mockframe); full licence in mockframe.LICENSE.txt. */
.mockframe{
	display: inline-block;
	position: relative;
	box-sizing: content-box !important;

	.screen {
		width: 100%;
		position: relative;
		height: 100%;
		z-index: 3;
		background: white;
		overflow: hidden;
		display: block;
		border-radius: 1px;
		box-shadow: 0 0 0 3px #111;
	}

	.top-bar, .bottom-bar {
		height: 3px;
		background: black;
		width: 100%;
		display: block;
	}

	.middle-bar {
		width: 3px;
		height: 4px;
		top: 0px;
		left: 90px;
		background: black;
		position: absolute;
	}

	&.iphone18pro {
		width: 402px;
		height: 874px;
		padding: 15.67px 15.83px;
		border-radius: 80.5px;
		background: #000;
		box-shadow:
			inset 0 0 0 0.667px var(--mf-b1),
			inset 0 0 0 1.333px var(--mf-b2),
			inset 0 0 0 2px var(--mf-b3),
			inset 0 0 0 2.667px var(--mf-b4),
			inset 0 0 0 3.333px var(--mf-b5),
			inset 0 0 0 4px var(--mf-b6),
			inset 0 0 0 4.333px var(--mf-b7),
			inset 0 0 0 4.667px var(--mf-b8),
			inset 0 0 0 5px var(--mf-b9),
			inset 0 0 0 5.333px var(--mf-b10),
			inset 0 0 0 5.667px var(--mf-b11),
			inset 0 0 0 6.333px var(--mf-b12),
			inset 0 0 3px 9.3px var(--mf-glass);

		/* Black (default) */
		--mf-b1: #141314; --mf-b2: #161516; --mf-b3: #1b191b; --mf-b4: #222022; --mf-b5: #2e2c2e; --mf-b6: #444144;
		--mf-b7: #605d60; --mf-b8: #747173; --mf-b9: #747174; --mf-b10: #4f4c4f; --mf-b11: #272527; --mf-b12: #232223;
		--mf-glass: #3d3d3d;

		.screen {
			border-radius: 63.6px;
			box-shadow: none;
		}

		.dynamic-island {
			position: absolute;
			top: 30px;
			left: 50%;
			width: 94px;
			height: 36px;
			margin-left: -47px;
			border-radius: 18px;
			background: #000;
			z-index: 10;

			.camera {
				top: 13px;
				right: 13px;
				box-shadow: 0 0 0 5.5px #080a0c;
			}
		}

		/* Earpiece slit between the band and the glass */
		&::before {
			top: 6.33px;
			width: 162px;
			height: 2.33px;
			margin-left: -81px;
			background: #020202;
		}

		.action { top: 186px; height: 41.67px; }
		.volume { top: 258.33px; height: 67.67px; }
		.sleep { top: 281.67px; height: 107px; }

		/* Silver */
		&.silver {
			--mf-b1: #727272; --mf-b2: #8c8c8c; --mf-b3: #a4a4a4; --mf-b4: #b9b9b9; --mf-b5: #c9c9c9; --mf-b6: #d7d7d7;
			--mf-b7: #e2e2e2; --mf-b8: #e8e8e8; --mf-b9: #e8e8e8; --mf-b10: #d4d4d4; --mf-b11: #aaaaaa; --mf-b12: #777777;
			--mf-glass: #3d3d3d;
		}

		/* Glacier */
		&.glacier {
			--mf-b1: #788598; --mf-b2: #8a97aa; --mf-b3: #9daabe; --mf-b4: #b0bccf; --mf-b5: #bfcada; --mf-b6: #cdd6e5;
			--mf-b7: #d9e1ed; --mf-b8: #e0e7f1; --mf-b9: #dfe6f0; --mf-b10: #cad4e2; --mf-b11: #a1adbf; --mf-b12: #6f7c8f;
			--mf-glass: #3d3d3d;
		}

		/* Burgundy */
		&.burgundy {
			--mf-b1: #341d21; --mf-b2: #392024; --mf-b3: #402529; --mf-b4: #4a2c31; --mf-b5: #58373c; --mf-b6: #70494f;
			--mf-b7: #8d6068; --mf-b8: #a3727a; --mf-b9: #a4737b; --mf-b10: #7e555c; --mf-b11: #503036; --mf-b12: #381f24;
			--mf-glass: #3d3d3d;
		}

		/* Gold: Apple's Light Gold (iPhone Air bezel) under the 18 Pro's satin lighting */
		&.gold {
			--mf-b1: #797262; --mf-b2: #948c78; --mf-b3: #aea48c; --mf-b4: #c4b99f; --mf-b5: #d3c9b1; --mf-b6: #dfd7c3;
			--mf-b7: #e8e2d4; --mf-b8: #ede8dc; --mf-b9: #ede8dc; --mf-b10: #ddd4be; --mf-b11: #b4aa91; --mf-b12: #7e7766;
			--mf-glass: #3d3d3d;
		}

		/* Natural Titanium (sampled from Apple's iPhone 16 Pro bezel) */
		&.natural-titanium {
			--mf-b1: #5e5a53; --mf-b2: #69645e; --mf-b3: #77716b; --mf-b4: #8d8780; --mf-b5: #afa89f; --mf-b6: #d0cac1;
			--mf-b7: #dfd9d0; --mf-b8: #e4ded5; --mf-b9: #dad4cb; --mf-b10: #b6afa7; --mf-b11: #7d7770; --mf-b12: #403c37;
			--mf-glass: #393939;
		}

		&.landscape {
			width: 874px;
			height: 402px;
			padding: 15.83px 15.67px;

			&::before {
				top: 50%;
				left: 6.33px;
				width: 2.33px;
				height: 162px;
				margin: -81px 0 0;
			}

			.dynamic-island {
				top: 50%;
				left: 30px;
				width: 36px;
				height: 94px;
				margin: -47px 0 0;

				.camera {
					top: 13px;
					right: auto;
					left: 13px;
				}
			}

			.action { left: 186px; width: 41.67px; }
			.volume { left: 258.33px; width: 67.67px; }
			.sleep { left: 281.67px; width: 107px; }
		}
	}

	/* Anatomy shared by iPhone 17 and iPhone 18 Pro */
	&.iphone17, &.iphone18pro {
		&::before {
			content: '';
			position: absolute;
			left: 50%;
			border-radius: 0 0 2px 2px;
		}

		&.landscape::before {
			border-radius: 0 2px 2px 0;
		}

		.dynamic-island .camera {
			position: absolute;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: radial-gradient(circle at 50% 40%, #3b3a8f 0%, #1f1c63 25%, #0d0b30 50%, #12394a 66%, #0a1118 80%, #05070a 100%);
		}

		/* Buttons: Action + volume on the left, side button on the right.
		   Camera Control sits flush with the frame, so Apple's renders omit it. */
		.action, .volume, .sleep {
			position: absolute;
			z-index: 0;
		}

		.action, .volume {
			left: -3px;
			width: 3px;
			border-radius: 1.5px 0 0 1.5px;
			box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3), inset 0 -1px 0.5px rgba(255, 255, 255, 0.3);
			background: linear-gradient(to left, var(--mf-b1) 0%, var(--mf-b3) 25%, var(--mf-b4) 50%, var(--mf-b6) 68%, var(--mf-b8) 80%, var(--mf-b10) 100%);
		}

		/* Volume down */
		.volume::before {
			content: '';
			position: absolute;
			top: 85.67px;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: inherit;
			background: inherit;
			box-shadow: inherit;
		}

		.sleep {
			right: -2.67px;
			width: 2.67px;
			border-radius: 0 1.5px 1.5px 0;
			box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3), inset 0 -1px 0.5px rgba(255, 255, 255, 0.3);
			background: linear-gradient(to right, var(--mf-b1) 0%, var(--mf-b3) 25%, var(--mf-b4) 50%, var(--mf-b6) 68%, var(--mf-b8) 80%, var(--mf-b10) 100%);
		}

		&.landscape {
			.action, .volume {
				top: auto;
				bottom: -3px;
				height: 3px;
				border-radius: 0 0 1.5px 1.5px;
				box-shadow: inset 1px 0 0.5px rgba(255, 255, 255, 0.3), inset -1px 0 0.5px rgba(255, 255, 255, 0.3);
				background: linear-gradient(to bottom, var(--mf-b1) 0%, var(--mf-b3) 25%, var(--mf-b4) 50%, var(--mf-b6) 68%, var(--mf-b8) 80%, var(--mf-b10) 100%);
			}

			.volume::before {
				top: 0;
				left: 85.67px;
			}

			.sleep {
				top: -2.67px;
				right: auto;
				height: 2.67px;
				border-radius: 1.5px 1.5px 0 0;
				box-shadow: inset 1px 0 0.5px rgba(255, 255, 255, 0.3), inset -1px 0 0.5px rgba(255, 255, 255, 0.3);
				background: linear-gradient(to top, var(--mf-b1) 0%, var(--mf-b3) 25%, var(--mf-b4) 50%, var(--mf-b6) 68%, var(--mf-b8) 80%, var(--mf-b10) 100%);
			}
		}

		& > .camera, .top-bar, .bottom-bar, .home, .sensor, .speaker, .sensors, .more-sensors, .inner, .inner-shadow {
			display: none;
		}
	}

	/* ============================================
	   			iPAD PRO
	   Apple's iPad Pro (M5) 13" bezel at 0.496 scale (1032×1376pt screen ->
	   512×683px). The front camera sits on the long edge, which is the right
	   bezel in portrait.
	   ============================================ */

	&.ipad-pro {
		width: 512px;
		height: 683px;
		padding: 22.33px;
		border-radius: 37.25px;
		background: #000;
		box-shadow:
			inset 0 0 0 0.5px var(--mf-b1),
			inset 0 0 0 1px var(--mf-b2),
			inset 0 0 0 1.75px var(--mf-b3),
			inset 0 0 0 2.5px var(--mf-b4),
			inset 0 0 1px 3px var(--mf-glass);

		/* Space Black (default) */
		--mf-b1: #4a484c; --mf-b2: #736e71; --mf-b3: #3b3739; --mf-b4: #2d2b2e; --mf-glass: #1d1d1d;
		--mf-btn: linear-gradient(to right, #413e40 0%, #2f2d30 15%, #555358 35%, #77767d 55%, #979397 78%, #333134 100%);

		.screen {
			border-radius: 14.4px;
			box-shadow: none;
		}

		/* Front camera + ambient light sensor, on the long edge */
		.camera {
			position: absolute;
			top: 47%;
			right: 9.4px;
			width: 5px;
			height: 5px;
			margin-top: -2.5px;
			border-radius: 50%;
			background: radial-gradient(circle at 50% 45%, #2b2d63 0%, #141433 40%, #0b0d12 70%, #08090b 100%);
			z-index: 10;
		}

		.sensor {
			position: absolute;
			top: 53%;
			right: 11.4px;
			width: 1.5px;
			height: 1.5px;
			border-radius: 50%;
			background: #0e0f12;
			z-index: 10;
		}

		/* Top button, on the top edge near the right corner */
		.sleep {
			position: absolute;
			top: -1.5px;
			right: 36px;
			width: 30.8px;
			height: 1.5px;
			border-radius: 1px 1px 0 0;
			background: linear-gradient(to top, #413e40 0%, #555358 30%, #979397 75%, #333134 100%);
		}

		.volume-up, .volume-down {
			position: absolute;
			right: -1.5px;
			width: 1.5px;
			height: 25.8px;
			border-radius: 0 1px 1px 0;
			background: var(--mf-btn);
		}

		.volume-up { top: 50.1px; }
		.volume-down { top: 81.4px; }

		/* Silver */
		&.silver {
			--mf-b1: #9e9fa0; --mf-b2: #cccdce; --mf-b3: #959697; --mf-b4: #818283; --mf-glass: #2e2e2e;
			--mf-btn: linear-gradient(to right, #8d8e8f 0%, #818283 15%, #b1b2b3 35%, #c0c1c2 55%, #c3c4c5 78%, #646566 100%);

			.sleep {
				background: linear-gradient(to top, #8d8e8f 0%, #b1b2b3 30%, #c3c4c5 75%, #646566 100%);
			}
		}

		/* Landscape: the camera edge goes to the top */
		&.landscape {
			width: 683px;
			height: 512px;

			.camera {
				top: 9.4px;
				left: 47%;
				right: auto;
				margin: 0 0 0 -2.5px;
			}

			.sensor {
				top: 11.4px;
				left: 53%;
				right: auto;
			}

			.sleep {
				top: 36px;
				left: -1.5px;
				right: auto;
				width: 1.5px;
				height: 30.8px;
				border-radius: 1px 0 0 1px;
				background: linear-gradient(to left, #413e40 0%, #555358 30%, #979397 75%, #333134 100%);
			}

			.volume-up, .volume-down {
				top: -1.5px;
				right: auto;
				width: 25.8px;
				height: 1.5px;
				border-radius: 1px 1px 0 0;
				background: linear-gradient(to top, #413e40 0%, #2f2d30 15%, #555358 35%, #77767d 55%, #979397 78%, #333134 100%);
			}

			.volume-up { left: 50.1px; }
			.volume-down { left: 81.4px; }

			&.silver {
				.sleep {
					background: linear-gradient(to left, #8d8e8f 0%, #b1b2b3 30%, #c3c4c5 75%, #646566 100%);
				}

				.volume-up, .volume-down {
					background: linear-gradient(to top, #8d8e8f 0%, #818283 15%, #b1b2b3 35%, #c0c1c2 55%, #c3c4c5 78%, #646566 100%);
				}
			}
		}

		.top-bar, .bottom-bar, .home, .speaker, .sensors, .more-sensors, .inner, .inner-shadow, .volume {
			display: none;
		}
	}

	/* ===========================================
	   				MacBook Pro
	   Apple's MacBook Pro (M5) 14" bezel at 0.635 scale (1512×982pt screen ->
	   960×624px): lid with notch, flat slab base with the thumb scoop, feet.
	   =========================================== */

	&.macbook-pro {
		width: 960px;
		height: 624px;
		/* The bottom 7px of the lid (and its edge rings) sit behind the base */
		padding: 17.5px 17.6px 45.4px;
		margin: 0 auto;
		border-radius: 30.3px 30.3px 0 0;
		/* Chin under the display */
		background: linear-gradient(to top, #060606 7px, #1d1d1d 34px, #000 34px);
		box-shadow:
			inset 0 0 0 0.35px var(--mf-b1),
			inset 0 0 0 0.7px var(--mf-b2),
			inset 0 0 0 1px var(--mf-b3),
			inset 0 0 0 2.5px var(--mf-b4),
			inset 0 0 0 6px #232323;

		/* Space Black (default) */
		--mf-b1: #3a383a; --mf-b2: #807e80; --mf-b3: #656366; --mf-b4: #424043;
		--mf-base: linear-gradient(to bottom, #b4b2b5 0, #686669 0.7px, #5d5b5e 20%, #5f5d60 42%, #4e4c4f 58%, #3c3a3d 68%, #2a282a 78%, #1f1d1f 86%, #2a282b 94%, #3e3c3f 100%);
		--mf-scoop: linear-gradient(to bottom, #a29fa3 0%, #8f8d90 45%, #747275 100%);
		--mf-scoop-top: #a29fa3;
		--mf-foot: linear-gradient(to bottom, #1c1a1c 0%, #3a383b 70%, #2a282b 100%);

		.screen {
			border-radius: 11.9px 11.9px 0 0;
			box-shadow: none;
		}

		/* Notch with the camera; ::before/::after are the fillets into the bezel */
		.notch {
			position: absolute;
			top: 17.5px;
			left: 50%;
			width: 118.1px;
			height: 20.3px;
			margin-left: -59.05px;
			border-radius: 0 0 6.3px 6.3px;
			background: #000;
			z-index: 4;

			&::before, &::after {
				content: '';
				position: absolute;
				top: 0;
				width: 3.2px;
				height: 3.2px;
			}

			&::before {
				left: -3.2px;
				background: radial-gradient(circle at 0 100%, transparent 3.2px, #000 3.2px);
			}

			&::after {
				right: -3.2px;
				background: radial-gradient(circle at 100% 100%, transparent 3.2px, #000 3.2px);
			}

			.camera {
				position: absolute;
				top: 5.2px;
				left: 50%;
				width: 6.3px;
				height: 6.3px;
				margin: -3.15px 0 0 -3.15px;
				border-radius: 50%;
				background: radial-gradient(circle at 50% 50%, #2f4f86 0, #1a2440 25%, #0e1012 45%);
			}
		}

		/* Base: flat slab, wider than the lid, with the thumb scoop */
		.top-bar {
			position: absolute;
			top: calc(100% - 7px);
			left: -106px;
			width: calc(100% + 212px);
			height: 42.2px;
			border-radius: 3px 3px 19px 19px;
			background: var(--mf-base);
			z-index: 5;

			/* Flared top corners of the thumb scoop */
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				width: 200px;
				height: 9px;
				margin-left: -100px;
				background:
					radial-gradient(circle at 0 100%, transparent 9px, var(--mf-scoop-top) 9.5px) left top / 9px 9px no-repeat,
					radial-gradient(circle at 100% 100%, transparent 9px, var(--mf-scoop-top) 9.5px) right top / 9px 9px no-repeat;
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				width: 182px;
				height: 14.9px;
				margin-left: -91px;
				border-radius: 0 0 9px 9px;
				background: var(--mf-scoop);
				box-shadow: inset 0 -1px 1.5px rgba(0, 0, 0, 0.18);
			}
		}

		/* Feet */
		.bottom-bar {
			position: absolute;
			top: calc(100% + 34.5px);
			left: -40px;
			width: calc(100% + 80px);
			height: 7px;
			background: none;

			&::before, &::after {
				content: '';
				position: absolute;
				top: 0;
				width: 80px;
				height: 100%;
				border-radius: 0 0 5px 5px;
				background: var(--mf-foot);
				box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.12);
			}

			&::before { left: 0; }
			&::after { right: 0; }
		}

		/* Silver */
		&.silver {
			--mf-b1: #d8d9db; --mf-b2: #b7b8ba; --mf-b3: #9a9b9d; --mf-b4: #9c9d9f;
			--mf-base: linear-gradient(to bottom, #f0f1f3 0, #d6d7d9 0.7px, #d0d1d3 20%, #cecfd1 42%, #c3c4c6 55%, #a8a9ab 64%, #8e8f91 74%, #858688 84%, #9fa0a2 92%, #c9cacc 100%);
			--mf-scoop: linear-gradient(to bottom, #e6e7e9 0%, #ebeced 50%, #f3f4f6 100%);
			--mf-scoop-top: #e6e7e9;
			--mf-foot: linear-gradient(to bottom, #6e6f71 0%, #a3a4a6 70%, #8e8f91 100%);
		}

		.home, .volume, .sleep, .sensor, .speaker, .sensors, .more-sensors, .inner-shadow, .inner, & > .camera {
			display: none;
		}
	}

	/* ===========================================
	   			GOOGLE PIXEL 10
	   412×924 CSS viewport (Chrome DevTools' Pixel 10 entry). Bezel, corner
	   radii, punch-hole and buttons follow Google's specs and product renders.
	   =========================================== */

}