/**
 * DICE Mobility - High-Fidelity Hardware Framing
 * Apple iPhone Pro (Titanium Natural / Frosted Glass) & iPad Pro Studio Deck
 */

.device-showcase-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  padding: 20px 16px 60px 16px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  perspective: 1200px;
}

/* =======================================================
   1. IPHONE PRO HARDWARE CHASSIS (Titanium Natural / Glass)
   ======================================================= */
.phone-chassis {
  position: relative;
  width: 392px;
  height: 844px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(50px) saturate(220%);
  -webkit-backdrop-filter: blur(50px) saturate(220%);
  border-radius: 54px;
  padding: 12px;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 0 4.5px rgba(226, 232, 240, 0.65),
    0 35px 80px -15px rgba(15, 23, 42, 0.16),
    0 12px 28px -8px rgba(15, 23, 42, 0.08),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.phone-chassis::before {
  /* Subtle outer titanium metallic edge */
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 56px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(203,213,225,0.5) 50%, rgba(255,255,255,0.95) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Phone Inner Screen */
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #F8FAFC;
  border-radius: 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Screen Glass Glare */
.screen-glare {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 25%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 99;
}

/* Status Bar */
.phone-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  pointer-events: none;
  font-size: 13px;
  font-weight: 700;
  color: #1C1C1E;
  font-feature-settings: "tnum";
}

/* Dynamic Island */
.dynamic-island-wrapper {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  pointer-events: auto;
}

.dynamic-island {
  width: 132px;
  height: 34px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dynamic-island:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35), 0 0 16px rgba(0, 208, 132, 0.4);
}

.island-camera {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1E293B;
  border: 1.5px solid #334155;
}

/* Home Indicator Bar */
.phone-home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 4.5px;
  background: rgba(15, 23, 42, 0.25);
  border-radius: 4px;
  z-index: 100;
  pointer-events: none;
}

/* Phone Label Floating Badge */
.phone-label-badge {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 5px 16px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #0F172A;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06), inset 0 1px 1px #FFFFFF;
}

/* Sync Link Bridge in Dual Mode */
.sync-bridge-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: center;
  margin-top: -60px;
}

/* =======================================================
   2. IPADOS PRO STUDIO CONSOLE (Fleet Admin Native Shell)
   ======================================================= */
.ipad-pro-chassis {
  position: relative;
  width: 100%;
  max-width: 1260px;
  min-height: 820px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(50px) saturate(220%);
  -webkit-backdrop-filter: blur(50px) saturate(220%);
  border-radius: 50px;
  padding: 14px;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 0 5px rgba(226, 232, 240, 0.6),
    0 40px 90px -20px rgba(15, 23, 42, 0.16),
    0 16px 36px -8px rgba(15, 23, 42, 0.06),
    inset 0 2px 3px 0 rgba(255, 255, 255, 1);
  margin: 0 auto;
  user-select: none;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ipad-pro-screen {
  position: relative;
  width: 100%;
  min-height: 792px;
  background: rgba(248, 250, 252, 0.75);
  backdrop-filter: blur(40px) saturate(210%);
  -webkit-backdrop-filter: blur(40px) saturate(210%);
  border-radius: 38px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* iPadOS Status Bar */
.ipados-status-bar {
  height: 42px;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  font-size: 12px;
  font-weight: 700;
  color: #1C1C1E;
  z-index: 50;
}

/* Responsive adjustment */
@media (max-width: 1024px) {
  .device-showcase-container {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }
  .sync-bridge-indicator {
    margin-top: 0;
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .phone-chassis {
    width: 100%;
    max-width: 380px;
    height: 780px;
    border-radius: 38px;
    padding: 8px;
  }
  .phone-screen {
    border-radius: 30px;
  }
  .ipad-pro-chassis {
    border-radius: 28px;
    padding: 8px;
  }
  .ipad-pro-screen {
    border-radius: 22px;
  }
}