/* Phone iFrame Display - Main Styles */

:root{
	--pid-bg:#0b0b0b;
	--pid-muted:#9b9b9b;
	--pid-white:#ffffff;
	--pid-shadow: 0 20px 70px rgba(0,0,0,0.55);
}

.pid-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	min-height: 400px;
	position: relative;
}

.pid-loader {
	position: absolute;
	inset: 0; /* cover the entire container */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 1200;
	transition: opacity .25s ease, visibility .25s ease;
}

.pid-spinner {
	position: relative;
	width: 50px;
	height: 50px;
}

.pid-spinner::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	border-top: 2px solid var(--pid-white);
	border-radius: 50%;
	animation: pid-spin 1s linear infinite;
	box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.pid-spinner::after {
	content: '';
	position: absolute;
	inset: 3px;
	border: 2px solid transparent;
	border-top: 2px solid rgba(255,255,255,0.4);
	border-radius: 50%;
	animation: pid-spin 1s linear infinite reverse;
}

.pid-loader.pid-hidden { opacity: 0; visibility: hidden; pointer-events: none }

@keyframes pid-spin {
	to { transform: rotate(360deg); }
}

/* Generic phone frame */
.pid-phone-frame {
	box-sizing: border-box;
	color: var(--pid-white);
	overflow: hidden;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.pid-iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/* --------------------------------------------------
   iPhone (modern - notch + gesture bar) - highly detailed
   -------------------------------------------------- */
.pid-phone-frame.pid-iphone {
	width: 390px;
	height: 844px;
	background: linear-gradient(180deg,#040404 0%, #0b0b0b 100%);
	border-radius: 47px;
	padding: 10px;
	box-shadow: 0 0 0 10px #0f0f0f, 0 0 0 13px #1a1a1a, var(--pid-shadow);
	position: relative;
}

.pid-iphone .pid-status-bar {
	height: 44px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 0 18px;
	position:relative;
	z-index: 20;
}

.pid-iphone .pid-notch {
	position:absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
	height: 34px;
	background: #000;
	border-radius: 20px;
	box-shadow: inset 0 -6px 8px rgba(255,255,255,0.02);
	z-index:25;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pid-iphone .pid-notch::before {
	content: '';
	width: 12px;
	height: 12px;
	background: #000;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}

.pid-iphone .pid-time { font-size:15px; font-weight:600; color:#fff; }
.pid-iphone .pid-status-icons{ display:flex; gap:8px; align-items:center }

.pid-iphone .pid-screen-area{
	height: calc(100% - 44px);
	background: #fff;
	overflow: hidden;
	position: relative;
	border-radius: 0 0 37px 37px;
}

.pid-iphone .pid-screen-area .pid-iframe{ background: #fff }

.pid-iphone .pid-gesture-bar{
	position:absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 134px;
	height: 5px;
	background: rgba(0,0,0,0.35);
	border-radius:100px;
	z-index:1001;
}

/* Draggable Home Button (used for classic models) */
.pid-draggable-home{ position:absolute; bottom:60px; right:30px; width:70px; height:70px; z-index:1000; cursor:move; transition: all 0.3s ease; }
.pid-home-inner{ width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,0.1);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.1); transition: all 0.15s ease; }
.pid-draggable-home:hover .pid-home-inner{ transform:scale(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.15); }
.pid-draggable-home:active .pid-home-inner{ transform:scale(0.95); transition: transform 0.1s ease; }

/* Tooltip */
.pid-home-tooltip{ position:absolute; bottom:80px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.9); color:#fff; padding:10px 14px; border-radius:10px; font-size:12px; opacity:0; visibility:hidden; transition:all .25s }
.pid-home-tooltip.pid-show{ opacity:1; visibility:visible }

/* --------------------------------------------------
   iPhone Classic (home button) - accurate proportions
   -------------------------------------------------- */
.pid-phone-frame.pid-iphone-classic{ width:375px; height:667px; background:linear-gradient(180deg,#111,#0b0b0b); border-radius:34px; padding:12px; box-shadow:0 18px 50px rgba(0,0,0,0.45) }
.pid-iphone-classic .pid-iphone-top{ height:34px; display:flex; align-items:center; justify-content:center; position:relative; background: #000; border-radius: 20px 20px 0 0; }
.pid-iphone-classic .pid-iphone-top::before{ content:''; position:absolute; top:8px; width:60px; height:6px; background: repeating-linear-gradient(90deg, #333 0px, #333 1px, transparent 1px, transparent 3px); border-radius:3px; }
.pid-iphone-classic .pid-iphone-screen{ height:calc(100% - 90px); background:#fff; border-radius:0 0 24px 24px; overflow:hidden; position:relative; }
.pid-iphone-classic .pid-iphone-home{ height:56px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #0b0b0b, #111); border-radius: 0 0 22px 22px; }
.pid-iphone-classic .pid-home-button{ width:46px; height:46px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); border:1px solid rgba(0,0,0,0.1); box-shadow: inset 0 -3px 5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1); position:relative; }
.pid-iphone-classic .pid-home-button::before{ content:''; position:absolute; inset:2px; border-radius:50%; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.05) 100%); }

/* --------------------------------------------------
   Android (modern rounded) - Samsung / Pixel styling
   -------------------------------------------------- */
.pid-phone-frame.pid-android{ width:390px; height:844px; background: linear-gradient(180deg,#0d0d0d,#141414); border-radius:30px; padding:8px; box-shadow:0 0 0 8px #151515, 0 15px 50px rgba(0,0,0,0.5); position:relative }
.pid-android .pid-android-status-bar{ height:36px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; color:#fff; font-family:'Roboto',sans-serif }
.pid-android .pid-android-time{ font-size:14px }
.pid-android .pid-android-icons{ display:flex; gap:8px; align-items:center }
.pid-android .pid-android-screen{ height: calc(100% - 100px); background:#fff; overflow:hidden; border-radius: 0 0 22px 22px; position:relative; }
.pid-android .pid-android-screen::before{ content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:8px; height:8px; background:#000; border-radius:50%; z-index:10; }
.pid-android .pid-android-navigation{ height:60px; display:flex; align-items:center; justify-content:space-around; background:transparent; position:absolute; bottom:0; left:0; right:0 }
.pid-android .pid-android-navigation button{ background:transparent; color:#fff; border:0; font-size:18px; padding:10px }

/* Pixel (clean, minimal) - Pixel 3/4/5/8 style */
.pid-phone-frame.pid-pixel{ width:412px; height:915px; background: linear-gradient(180deg,#0b0b0b,#111); border-radius:28px; padding:10px; box-shadow:0 0 0 9px #0f0f0f, 0 20px 70px rgba(0,0,0,0.55) }
.pid-pixel .pid-notch{ width:88px; height:10px; background:transparent; margin:8px auto 0; border-radius:6px }
.pid-pixel .pid-pixel-screen{ height: calc(100% - 40px); background:#fff; overflow:hidden; border-radius: 0 0 18px 18px; position:relative; }
.pid-pixel .pid-pixel-screen::before{ content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:10px; height:10px; background:#000; border-radius:50%; z-index:10; }

/* Accessibility helpers */
.pid-phone-frame[role]{ outline: none }
.pid-phone-frame:focus{ box-shadow: 0 0 0 4px rgba(66,153,225,0.6) }

/* Responsive scaling - keep frames readable on smaller screens */
@media (max-width:420px){
	.pid-phone-frame{ transform: scale(.9); transform-origin:center top }
	.pid-phone-frame.pid-pixel{ width:360px }
}

@media (max-width:360px){
	.pid-container{ padding:12px }
	.pid-phone-frame{ transform:scale(.78) }
}