/* ═══════════════════════════════════════════
   Era21 Designs — Native App CSS
═══════════════════════════════════════════ */

/* ── Lock body in app mode ── */
body.app-mode {
  overflow: hidden !important;
  height: 100vh !important;
  position: fixed !important;
  width: 100% !important;
  background: #0d0d0d;
}

/* ── Hide website-only elements ── */
body.app-mode #nav,
body.app-mode .mob-drawer,
body.app-mode .mob-overlay,
body.app-mode footer,
body.app-mode .float-cart,
body.app-mode #ticker,
body.app-mode .hero-scroll,
body.app-mode #hero,
body.app-mode #about,
body.app-mode #testimonials,
body.app-mode #blog,
body.app-mode #review-section,
body.app-mode #process {
  display: none !important;
}

/* ══════════════════════════════
   SPLASH
══════════════════════════════ */
.app-splash {
  position: fixed; inset: 0;
  background: #1a1208;
  z-index: 99999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.5s, visibility 0.5s;
}
.app-splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.app-splash img { width: 90px; height: 90px; object-fit: contain;
  animation: spl 1.4s ease-in-out infinite alternate; }
.app-splash-title { font-family:'Cormorant Garamond',serif; font-size:34px;
  color:#c5a25d; letter-spacing:6px; margin-top:20px; }
.app-splash-sub { font-family:'Montserrat',sans-serif; font-size:9px;
  color:rgba(255,255,255,0.4); letter-spacing:4px; text-transform:uppercase; margin-top:6px; }
@keyframes spl {
  from { opacity:.6; transform:scale(.96); }
  to   { opacity:1;  transform:scale(1.04); }
}

/* ══════════════════════════════
   APP HEADER
══════════════════════════════ */
.app-header {
  position: fixed; top:0; left:0; right:0; z-index:2000;
  height: 56px; background: #1a1208;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(197,162,93,0.25);
  box-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.app-hl { display:flex; align-items:center; gap:10px; }
.app-hl img { height:28px; width:auto; }
.app-brand { display:flex; flex-direction:column; line-height:1.15; }
.app-brand .bn { font-family:'Cormorant Garamond',serif; font-size:19px;
  font-weight:600; color:#c5a25d; letter-spacing:1px; }
.app-brand .bt { font-family:'Montserrat',sans-serif; font-size:8px;
  color:rgba(255,255,255,0.4); letter-spacing:2.5px; text-transform:uppercase; }
.app-hr { display:flex; align-items:center; gap:16px; }
.app-hbtn { background:none; border:none; cursor:pointer; padding:6px;
  color:rgba(255,255,255,0.65); font-size:18px; position:relative; }
.app-hbtn .bdg {
  position:absolute; top:-2px; right:-5px;
  background:#c5a25d; color:#1a1208;
  font-size:8px; font-weight:700;
  min-width:15px; height:15px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; padding:0 2px;
}

/* ══════════════════════════════
   PAGES WRAPPER
══════════════════════════════ */
.app-pages {
  position: fixed;
  top: 56px; bottom: 62px;
  left: 0; right: 0;
  overflow: hidden;
}
.app-page {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
  background: #0d0d0d;
}
.app-page.active { transform: translateX(0); }
.app-page.behind { transform: translateX(-28%); }
.app-page.right  { transform: translateX(100%); }

/* ══════════════════════════════
   HOME SCREEN
══════════════════════════════ */
.home-screen { padding: 0 0 20px; }

/* Hero banner */
.home-banner {
  position: relative; height: 240px; overflow: hidden;
  background: linear-gradient(160deg, #2a1c0a, #1a1208);
}
.home-banner img {
  width:100%; height:100%; object-fit:cover; opacity:0.55;
}
.home-banner-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(26,18,8,0.2), rgba(26,18,8,0.85));
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end;
  padding: 20px 20px 24px;
}
.home-banner-tag {
  font-family:'Montserrat',sans-serif; font-size:9px;
  color:#c5a25d; letter-spacing:3px; text-transform:uppercase;
  margin-bottom:8px; font-weight:500;
}
.home-banner-title {
  font-family:'Cormorant Garamond',serif; font-size:28px;
  font-weight:500; color:#fff; line-height:1.2;
}
.home-banner-title em { color:#c5a25d; font-style:italic; }
.home-banner-cta {
  margin-top:14px;
  background: #c5a25d; color:#1a1208;
  border:none; border-radius:4px;
  font-family:'Montserrat',sans-serif; font-size:11px;
  font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  padding: 10px 20px; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}

/* Stats row */
.home-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(197,162,93,0.15);
  margin: 0; border-top:1px solid rgba(197,162,93,0.15);
  border-bottom:1px solid rgba(197,162,93,0.15);
}
.home-stat {
  background:#111; padding:16px 8px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
}
.home-stat-num {
  font-family:'Cormorant Garamond',serif; font-size:28px;
  font-weight:600; color:#c5a25d;
}
.home-stat-lbl {
  font-family:'Montserrat',sans-serif; font-size:9px;
  color:rgba(255,255,255,0.45); letter-spacing:1.5px; text-transform:uppercase;
}

/* Section title */
.app-sec-title {
  font-family:'Montserrat',sans-serif; font-size:10px;
  color:rgba(255,255,255,0.4); letter-spacing:3px; text-transform:uppercase;
  padding: 20px 16px 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.app-sec-title a {
  color:#c5a25d; font-size:10px; letter-spacing:1px; text-decoration:none;
}

/* Quick actions grid */
.home-actions {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; padding:0 16px;
}
.home-action-card {
  background: linear-gradient(135deg, #1e1508, #141008);
  border:1px solid rgba(197,162,93,0.2);
  border-radius:12px; padding:18px 16px;
  display:flex; flex-direction:column; gap:10px;
  cursor:pointer; transition: border-color 0.2s, transform 0.15s;
  text-decoration:none;
}
.home-action-card:active { transform:scale(0.97); border-color:#c5a25d; }
.home-action-icon {
  width:40px; height:40px; border-radius:10px;
  background:rgba(197,162,93,0.15);
  display:flex; align-items:center; justify-content:center;
  color:#c5a25d; font-size:18px;
}
.home-action-title {
  font-family:'Montserrat',sans-serif; font-size:13px;
  font-weight:600; color:#fff;
}
.home-action-desc {
  font-family:'Montserrat',sans-serif; font-size:10px;
  color:rgba(255,255,255,0.4); line-height:1.5;
}

/* Recent projects */
.home-projects { padding:0 16px; display:flex; flex-direction:column; gap:10px; }
.home-proj-card {
  border-radius:12px; overflow:hidden; position:relative;
  height:120px; cursor:pointer;
}
.home-proj-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.3s;
}
.home-proj-card:active img { transform:scale(1.04); }
.home-proj-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(26,18,8,0.85) 40%, transparent);
  display:flex; flex-direction:column; justify-content:center;
  padding:16px;
}
.home-proj-name {
  font-family:'Cormorant Garamond',serif; font-size:18px;
  font-weight:500; color:#fff;
}
.home-proj-sub {
  font-family:'Montserrat',sans-serif; font-size:9px;
  color:#c5a25d; letter-spacing:1.5px; text-transform:uppercase;
  margin-top:3px;
}

/* Consult CTA */
.home-consult {
  margin:16px; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg, #c5a25d, #a8873d);
  padding:20px; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
}
.home-consult-text h3 {
  font-family:'Cormorant Garamond',serif; font-size:20px;
  color:#1a1208; font-weight:600; margin-bottom:4px;
}
.home-consult-text p {
  font-family:'Montserrat',sans-serif; font-size:10px;
  color:rgba(26,18,8,0.7); letter-spacing:0.5px;
}
.home-consult-icon {
  width:48px; height:48px; background:rgba(26,18,8,0.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#1a1208;
}

/* ══════════════════════════════
   PORTFOLIO PAGE
══════════════════════════════ */
.app-page #portfolio { padding-top:0 !important; }
.app-page #portfolio .container { padding:0 !important; max-width:100% !important; }
.app-page #portfolio .section { padding:0 !important; }
.app-page #portfolio .port-header { padding:16px 16px 0; }
.app-page #portfolio .t-eyebrow { font-size:9px; }
.app-page #portfolio .t-display { font-size:26px; }
.app-page #portfolio .port-filters {
  display:flex; gap:8px; padding:12px 16px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.app-page #portfolio .port-filters::-webkit-scrollbar { display:none; }
.app-page #portfolio .port-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:3px; padding:0;
}
.app-page #portfolio .port-col { height:180px; }
.app-page #portfolio .port-col img { width:100%; height:100%; object-fit:cover; }

/* ══════════════════════════════
   ESTIMATE PAGE
══════════════════════════════ */
.app-page #estimate { padding-top:0 !important; }
.app-page #estimate .container { padding:12px !important; max-width:100% !important; }
.app-page #estimate .section { padding:0 !important; }
.app-page #estimate .t-eyebrow { display:none; }
.app-page #estimate .t-display { font-size:24px; margin-bottom:16px; }

/* ══════════════════════════════
   SHOP PAGE
══════════════════════════════ */
.app-page #shop { padding-top:0 !important; }
.app-page #shop .container { padding:12px !important; max-width:100% !important; }
.app-page #shop .section { padding:0 !important; }
.app-page #shop .t-eyebrow { display:none; }
.app-page #shop .t-display { font-size:24px; }

/* ══════════════════════════════
   CONTACT PAGE
══════════════════════════════ */
.app-page #services { padding-top: 8px !important; }
.app-page #services .container { padding:12px !important; max-width:100% !important; }
.app-page #services .section { padding:0 !important; }
.app-page #contact { padding-top:0 !important; }
.app-page #contact .container { padding:12px !important; max-width:100% !important; }
.app-page #contact .section { padding:0 !important; }
.app-page #faq { padding-top:0 !important; }
.app-page #faq .container { padding:12px !important; max-width:100% !important; }
.app-page #faq .section { padding:0 !important; }

/* ══════════════════════════════
   BOTTOM NAV
══════════════════════════════ */
.app-bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:2000;
  height:62px; background:#1a1208;
  border-top:1px solid rgba(197,162,93,0.2);
  display:flex; align-items:stretch;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.7);
}
.app-nav-btn {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,0.3);
  font-family:'Montserrat',sans-serif;
  font-size:9px; font-weight:500; letter-spacing:0.3px;
  transition:color 0.2s; position:relative;
}
.app-nav-btn i { font-size:20px; transition:transform 0.2s; }
.app-nav-btn.active { color:#c5a25d; }
.app-nav-btn.active i { transform:translateY(-1px); }
.app-nav-btn.active::before {
  content:''; position:absolute; top:0; left:20%; right:20%;
  height:2px; background:#c5a25d; border-radius:2px;
}

/* WhatsApp float */
body.app-mode .float-wa {
  bottom:74px !important; right:14px !important; z-index:999;
}

/* ══════════════════════════════
   PRINT OVERLAY — APP FIX
══════════════════════════════ */
body.app-mode .print-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
}
body.app-mode .print-modal {
  max-height: 90vh;
  overflow-y: auto;
  margin: 20px auto;
}
/* Hide old print button, show app share button */
body.app-mode .print-btn.primary {
  display: none !important;
}
.app-share-btn {
  width: 100%;
  background: linear-gradient(135deg, #c5a25d, #a8873d);
  color: #1a1208;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.app-share-wa {
  width: 100%;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.app-share-hint {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: rgba(0,0,0,0.4);
  padding: 4px 0 8px;
}