/**
 * SERP Preview - Device Frames
 *
 * Desktop browser chrome and iPhone device frame styling.
 *
 * @package AgenticWP
 */

/* ============================================
   Base Device Frame
   ============================================ */

.device-frame {
	border-radius: var(--tool-radius-lg);
	overflow: hidden;
	box-shadow: var(--tool-shadow-lg);
}

/* ============================================
   Desktop Browser Frame
   ============================================ */

.device-frame--desktop {
	width: 600px;
	background: var(--serp-viewport-bg);
	border: 1px solid var(--serp-chrome-border);
}

/* Browser Chrome Bar */
.browser-chrome {
	display: flex;
	align-items: center;
	gap: var(--tool-space-md);
	padding: 10px 16px;
	background: var(--serp-chrome-bg);
	border-bottom: 1px solid var(--serp-chrome-border);
}

.browser-dots {
	display: flex;
	gap: 6px;
}

.browser-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff5f56;
}

.browser-dot:nth-child(2) {
	background: #ffbd2e;
}

.browser-dot:nth-child(3) {
	background: #27c93f;
}

.browser-address-bar {
	flex: 1;
	padding: 6px 12px;
	background: var(--serp-address-bar-bg);
	border: 1px solid var(--serp-chrome-border);
	border-radius: 6px;
	font-size: 13px;
}

.browser-url {
	color: var(--tool-text-muted);
	user-select: none;
}

/* ============================================
   Mobile Device Frame (iPhone Style)
   ============================================ */

.device-frame--mobile {
	width: 375px;
	background: var(--serp-viewport-bg);
	border: 3px solid #1d1d1f;
	border-radius: 40px;
	position: relative;
	padding: 0;
}

/* Dynamic Island / Notch */
.mobile-notch {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 32px;
	background: #1d1d1f;
	border-radius: 16px;
	z-index: 10;
}

/* Mobile viewport padding to account for notch */
.device-frame--mobile .serp-viewport {
	padding-top: 56px;
	padding-bottom: var(--tool-space-xl);
	min-height: 300px;
}

/* Home Indicator */
.mobile-home-indicator {
	width: 134px;
	height: 5px;
	background: #1d1d1f;
	border-radius: 3px;
	margin: var(--tool-space-md) auto;
}

/* ============================================
   Dark Theme Adjustments
   ============================================ */

.serp-preview--dark .device-frame--desktop {
	border-color: #5f6368;
}

.serp-preview--dark .browser-chrome {
	background: var(--serp-chrome-bg);
	border-bottom-color: #5f6368;
}

.serp-preview--dark .browser-address-bar {
	background: var(--serp-address-bar-bg);
	border-color: #5f6368;
}

.serp-preview--dark .browser-url {
	color: #9aa0a6;
}

.serp-preview--dark .device-frame--mobile {
	border-color: #3c3c3c;
}

.serp-preview--dark .mobile-notch {
	background: #3c3c3c;
}

.serp-preview--dark .mobile-home-indicator {
	background: #5f6368;
}

/* Reduced motion styles consolidated in accessibility.css */