/*!
 * 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
 */
.mockframe {
  transition: all .5s cubic-bezier(.075, .82, .165, 1);
  display: inline-block;
  position: relative;
  box-sizing: content-box !important;
}

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

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

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

.mockframe.ipad {
  background: #242324;
  border-radius: 44px;
  width: 576px;
  height: 768px;
  padding: 90px 25px;
}

.mockframe.ipad:before {
  content: "";
  background: #1e1e1e;
  border-radius: 40px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
}

.mockframe.ipad .camera {
  background: #3c3d3d;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  position: absolute;
  top: 44px;
  left: 50%;
}

.mockframe.ipad .top-bar, .mockframe.ipad .bottom-bar {
  display: none;
}

.mockframe.ipad .home {
  background: #242324;
  border-radius: 36px;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  position: absolute;
  bottom: 22px;
  left: 50%;
}

.mockframe.ipad .home:after {
  content: "";
  border: 1px solid #ffffff1a;
  border-radius: 4px;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}

.mockframe.ipad.landscape {
  width: 768px;
  height: 576px;
  padding: 25px 90px;
}

.mockframe.ipad.landscape .camera {
  margin-top: -5px;
  margin-left: 0;
  top: 50%;
  left: calc(100% - 44px);
}

.mockframe.ipad.landscape .home {
  margin-top: -25px;
  margin-left: 0;
  top: 50%;
  left: 22px;
}

.mockframe.ipad.silver {
  background: #bcbcbc;
}

.mockframe.ipad.silver:before {
  background: #fcfcfc;
}

.mockframe.ipad.silver .home {
  background: #fcfcfc;
  box-shadow: inset 0 0 0 1px #bcbcbc;
}

.mockframe.ipad.silver .home:after {
  border: 1px solid #0003;
}

.mockframe.ipad-pro {
  background: linear-gradient(145deg, #3a3a3a 0%, #2a2a2a 15%, #1e1e1e 50%, #2a2a2a 85%, #3a3a3a 100%);
  border-radius: 36px;
  width: 512px;
  height: 683px;
  padding: 18px;
  position: relative;
  box-shadow: inset 0 0 0 1px #ffffff26, inset 0 1px #fff3, 0 40px 80px -20px #00000080, 0 0 0 1px #0000004d;
}

.mockframe.ipad-pro:before {
  content: "";
  z-index: 1;
  background: linear-gradient(145deg, #1a1a1a 0%, #111 100%);
  border-radius: 33px;
  position: absolute;
  inset: 4px;
}

.mockframe.ipad-pro:after {
  content: "";
  z-index: 2;
  background: #000;
  border-radius: 26px;
  position: absolute;
  inset: 14px;
}

.mockframe.ipad-pro .camera {
  z-index: 10;
  background: radial-gradient(circle at 35% 35%, #2a2a3a 0%, #1a1a25 50%, #0a0a10 100%);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 2px #000c, 0 0 0 1px #32323c66;
}

.mockframe.ipad-pro .camera:before {
  content: "";
  background: #64649666;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  position: absolute;
  top: 1px;
  left: 2px;
}

.mockframe.ipad-pro .sleep {
  z-index: 4;
  background: linear-gradient(to right, #4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 2px 2px 0 0;
  width: 50px;
  height: 3px;
  position: absolute;
  top: -3px;
  right: 80px;
}

.mockframe.ipad-pro .volume-up {
  z-index: 4;
  background: linear-gradient(#4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 45px;
  position: absolute;
  top: 80px;
  right: -3px;
}

.mockframe.ipad-pro .volume-down {
  z-index: 4;
  background: linear-gradient(#4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 45px;
  position: absolute;
  top: 135px;
  right: -3px;
}

.mockframe.ipad-pro .corner-highlight {
  z-index: 1;
  pointer-events: none;
  width: 50px;
  height: 50px;
  position: absolute;
}

.mockframe.ipad-pro .corner-highlight.tl {
  background: radial-gradient(at 100% 100%, #ffffff1f 0%, #ffffff0a 40%, #0000 70%);
  border-radius: 30px 0 0;
  top: 8px;
  left: 8px;
}

.mockframe.ipad-pro .corner-highlight.tr {
  background: radial-gradient(at 0 100%, #ffffff1f 0%, #ffffff0a 40%, #0000 70%);
  border-radius: 0 30px 0 0;
  top: 8px;
  right: 8px;
}

.mockframe.ipad-pro .corner-highlight.bl {
  background: radial-gradient(at 100% 0, #ffffff14 0%, #ffffff08 40%, #0000 70%);
  border-radius: 0 0 0 30px;
  bottom: 8px;
  left: 8px;
}

.mockframe.ipad-pro .corner-highlight.br {
  background: radial-gradient(at 0 0, #ffffff14 0%, #ffffff08 40%, #0000 70%);
  border-radius: 0 0 30px;
  bottom: 8px;
  right: 8px;
}

.mockframe.ipad-pro .inner-edge {
  z-index: 1;
  pointer-events: none;
  border: 1px solid #46464666;
  border-radius: 27px;
  position: absolute;
  inset: 13px;
}

.mockframe.ipad-pro .screen {
  z-index: 3;
  background: #fff;
  border-radius: 22px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 2px #000;
}

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

.mockframe.ipad-pro.silver {
  background: linear-gradient(145deg, #e8e8e8 0%, #d0d0d0 15%, silver 50%, #d0d0d0 85%, #e8e8e8 100%);
  box-shadow: inset 0 0 0 1px #ffffffe6, inset 0 1px #fff, 0 40px 80px -20px #00000040, 0 0 0 1px #00000014;
}

.mockframe.ipad-pro.silver:before {
  background: linear-gradient(145deg, #b8b8b8 0%, #a8a8a8 100%);
}

.mockframe.ipad-pro.silver .corner-highlight.tl, .mockframe.ipad-pro.silver .corner-highlight.tr {
  background: radial-gradient(at 50% 100%, #ffffffb3 0%, #fff3 50%, #0000 80%);
}

.mockframe.ipad-pro.silver .corner-highlight.bl, .mockframe.ipad-pro.silver .corner-highlight.br {
  background: radial-gradient(at 50% 0, #ffffff80 0%, #ffffff26 50%, #0000 80%);
}

.mockframe.ipad-pro.silver .inner-edge {
  border-color: #a0a0a080;
}

.mockframe.ipad-pro.silver .sleep {
  background: linear-gradient(to right, #e0e0e0 0%, #c8c8c8 10%, #b8b8b8 50%, #c8c8c8 90%, #e0e0e0 100%);
}

.mockframe.ipad-pro.silver .volume-up, .mockframe.ipad-pro.silver .volume-down {
  background: linear-gradient(#e0e0e0 0%, #c8c8c8 10%, #b8b8b8 50%, #c8c8c8 90%, #e0e0e0 100%);
}

.mockframe.ipad-pro.landscape {
  width: 683px;
  height: 512px;
}

.mockframe.ipad-pro.landscape .camera {
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
}

.mockframe.ipad-pro.landscape .sleep {
  background: linear-gradient(#4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 50px;
  top: 80px;
  left: auto;
  right: -3px;
}

.mockframe.ipad-pro.landscape .volume-up {
  background: linear-gradient(to right, #4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 2px 2px 0 0;
  width: 45px;
  height: 3px;
  top: -3px;
  left: 80px;
  right: auto;
}

.mockframe.ipad-pro.landscape .volume-down {
  background: linear-gradient(to right, #4a4a4a 0%, #3a3a3a 10%, #2a2a2a 50%, #3a3a3a 90%, #4a4a4a 100%);
  border-radius: 2px 2px 0 0;
  width: 45px;
  height: 3px;
  top: -3px;
  left: 135px;
  right: auto;
}

.mockframe.ipad-pro.landscape.silver .sleep {
  background: linear-gradient(#e0e0e0 0%, #c8c8c8 10%, #b8b8b8 50%, #c8c8c8 90%, #e0e0e0 100%);
}

.mockframe.ipad-pro.landscape.silver .volume-up, .mockframe.ipad-pro.landscape.silver .volume-down {
  background: linear-gradient(to right, #e0e0e0 0%, #c8c8c8 10%, #b8b8b8 50%, #c8c8c8 90%, #e0e0e0 100%);
}