/* =========================================================
   penguin-app.css
   Penguin Auto Specialists Mobile App Prototype
   Tablet / iPad Style Display
   ========================================================= */

/* ------------------------------
   Banner / Intro
-------------------------------- */

.penguin-page .pengapp-banner{
  padding:1.25rem 0 1rem;
  text-align:center;
}

.penguin-page .pengapp-sub{
  max-width:72ch;
  margin:.35rem auto 0;
  opacity:.92;
  line-height:1.6;
  text-align:center;
}

/* ------------------------------
   CENTER THE DEVICE
-------------------------------- */

.penguin-page .pengapp-shell{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:2.5rem 0 3rem;
}

/* ------------------------------
   iPad Device Frame
-------------------------------- */

.penguin-page .pengapp-phone{

  width:min(880px,100%);
  padding:22px;
  border-radius:40px;

  background:
  linear-gradient(145deg,#1c2138,#0f1326);

  box-shadow:
  0 40px 80px rgba(0,0,0,.55),
  0 0 0 2px rgba(255,255,255,.05),
  inset 0 0 0 1px rgba(255,255,255,.04);

  position:relative;
}

/* Camera dot */

.penguin-page .pengapp-phone::before{
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:#0c1020;
}

/* ------------------------------
   Tablet Screen
-------------------------------- */

.penguin-page .pengapp-screen{

  border-radius:26px;
  overflow:hidden;
  background:#f5f7fb;
  min-height:720px;

}

/* ------------------------------
   Status Bar
-------------------------------- */

.penguin-page .pengapp-statusbar{

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:14px 18px 10px;

  font-size:.92rem;

  color:rgba(255,255,255,.95);

  background:
  linear-gradient(180deg,#162849,#10203d);

}

/* ------------------------------
   App Header
-------------------------------- */

.penguin-page .pengapp-header{

  padding:16px 18px 14px;

  background:
  linear-gradient(180deg,#17315a,#112442);

  border-bottom:1px solid rgba(255,255,255,.10);

}

.penguin-page .pengapp-brand-row{

  display:flex;
  align-items:center;
  gap:.9rem;

}

.penguin-page .pengapp-logo{

  width:56px;
  height:56px;

  object-fit:contain;

  border-radius:12px;
  background:#fff;

  padding:.35rem;

}

.penguin-page .pengapp-brand{

  font-weight:900;
  font-size:1rem;
  color:#fff;

}

.penguin-page .pengapp-brand-sub{

  font-size:.85rem;
  color:rgba(255,255,255,.75);

}

/* ------------------------------
   App Content Area
-------------------------------- */

.penguin-page .pengapp-content{

  background:
  radial-gradient(circle at 30% 0%, #ffffff, #f4f7fb);

  color:#16181d;
  min-height:650px;

}

/* Padding for panels */

.penguin-page .pengapp-content > .pengapp-tab{

  padding:22px 22px 110px;

}

/* ------------------------------
   Tabs Visibility
-------------------------------- */

.penguin-page .pengapp-tab{
  display:none;
}

.penguin-page .pengapp-tab.is-active{
  display:block;
}

/* ------------------------------
   Typography
-------------------------------- */

.penguin-page .pengapp-h2{

  font-size:1.45rem;
  margin:.35rem 0 .7rem;

  color:#16325b;

}

.penguin-page .pengapp-h2--hero{

  font-size:2.1rem;
  line-height:1.25;

}

.penguin-page .pengapp-h3{

  margin:1rem 0 .65rem;

  font-size:1.1rem;
  color:#16325b;

}

.penguin-page .pengapp-muted{

  opacity:.92;
  line-height:1.6;

  color:#364152;

}

/* ------------------------------
   Cards
-------------------------------- */

.penguin-page .pengapp-home-hero,
.penguin-page .pengapp-card{

  border:1px solid rgba(22,50,91,.09);

  background:#fff;

  border-radius:20px;

  padding:1.1rem;

  box-shadow:
  0 14px 30px rgba(15,39,71,.07);

}

/* ------------------------------
   Buttons
-------------------------------- */

.penguin-page .pengapp-btn{

  border:1px solid rgba(22,50,91,.10);

  background:#2f5d95;

  color:#fff;

  border-radius:999px;

  padding:.65rem 1.1rem;

  font-weight:800;

  cursor:pointer;

}

.penguin-page .pengapp-btn--ghost{

  background:#fff;
  color:#16325b;

}

/* ------------------------------
   Action Tiles
-------------------------------- */

.penguin-page .pengapp-actions{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:1rem;

}

.penguin-page .pengapp-tile{

  border-radius:18px;

  padding:1rem;

  display:grid;

  place-items:center;

  background:#fff;

  border:1px solid rgba(22,50,91,.10);

}

.penguin-page .pengapp-tile-ico{

  font-size:1.35rem;

}

.penguin-page .pengapp-tile-text{

  font-size:.95rem;

  font-weight:900;

}

/* ------------------------------
   Bottom Navigation
-------------------------------- */

.penguin-page .pengapp-nav{

  position:sticky;

  bottom:0;

  width:100%;

  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:8px;

  padding:12px;

  background:#fff;

  border-top:1px solid rgba(22,50,91,.10);

}

.penguin-page .pengapp-navbtn{

  border:1px solid rgba(22,50,91,.10);

  background:#fff;

  color:#16325b;

  border-radius:14px;

  padding:.55rem;

  display:grid;

  place-items:center;

  font-weight:900;

}

.penguin-page .pengapp-navbtn.is-active{

  background:#eef4fb;

}

/* ------------------------------
   Toast Notification
-------------------------------- */

.penguin-page .pengapp-toast{

  position:absolute;

  left:50%;

  bottom:96px;

  transform:translateX(-50%);

  min-width:240px;

  padding:.7rem .9rem;

  border-radius:14px;

  background:#112442;

  color:#fff;

  opacity:0;

  transition:opacity .2s ease;

}

.penguin-page .pengapp-toast.show{

  opacity:1;

}

/* ------------------------------
   Mobile Fallback
-------------------------------- */

@media (max-width:520px){

  .penguin-page .pengapp-phone{

    width:100%;

    border-radius:28px;

  }

  .penguin-page .pengapp-actions{

    grid-template-columns:repeat(2,1fr);

  }

}