/* Updated mobile-friendly insta-share CSS - buttons in one row, smaller QR, CTA bottom-center */

/* global */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Wrapper */
.insta-share-card-wrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px;
  background-color: #ffffff;
  border-radius: 18px;
  display: block;
  box-shadow: 0 18px 50px rgba(9,20,40,0.06);
}

/* Card */
.insta-share-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-radius: 14px;
  overflow: hidden;
  display: block;
  border: 1px solid rgba(12,45,65,0.04);
  box-shadow: 0 12px 36px rgba(9,20,40,0.06);
}

/* Header hero */
.isc-header { position: relative; height: 360px; }
.isc-image { width:100%; height:250px; background-size:cover; background-position:center; filter:saturate(1.03) contrast(1.02); }

/* Logo overlap */
.isc-logo-wrap { position:absolute; left:18px; bottom:-36px; width:96px; height:96px; display:flex; align-items:center; justify-content:center; z-index:6; pointer-events:none; }
.isc-logo { width:96px; height:96px; border-radius:18px; object-fit:cover; padding:8px; background:#fff; border:4px solid #fff; box-shadow:0 12px 30px rgba(9,20,40,0.12); }

/* Body */
.isc-card-body { padding:68px 16px 16px 16px; color:#06243a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial; }
.isc-title { font-size:22px; line-height:1.04; margin:0; font-weight:800; color:#06243a; width: 70%; }

/* Excerpt */
.isc-excerpt { margin:12px 0 8px 0; color:#4b606f; font-size:14px; line-height:1.5; min-height:44px; }

/* Meta */
.isc-meta { display:flex; gap:14px; align-items:center; margin-bottom:12px; flex-wrap:wrap; color:#0a3245; font-weight:700; font-size:14px; }

/* Bottom row */
.isc-bottom-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:8px;
  /* allow compact single-line layout */
}

/* QR - reduced size */
.isc-qr-wrap {
  min-width:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:8px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(9,20,40,0.05);
  border:1px solid rgba(12,45,65,0.04);
  flex-shrink:0;
}
.isc-qr { width:44px; height:44px; object-fit:cover; border-radius:10px; display:block; }

/* Actions - force single row and compact, buttons shrink but keep readable */
.isc-actions {
  display:flex;
  gap:6px;
  margin-left:auto;
  align-items:center;
  flex-wrap:nowrap;     /* important: prevent wrapping */
  overflow:visible;
}

/* Buttons: smaller, consistent */
.isc-btn {
  height:26px;
  padding:0 6px;
  border-radius:12px;
  border:none;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  box-shadow:0 10px 26px rgba(9,20,40,0.05);
  transition: transform .12s ease, box-shadow .12s ease;
  min-width:58px;
  justify-content:center;
  flex: 0 0 auto; /* prevents shrinking too small */
}
.isc-btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(9,20,40,0.07); }

/* Button colors */
.isc-share-btn { background: linear-gradient(90deg,#ff6b6b,#ff8e53); color:#fff; min-width:60px; }
.isc-download-btn { background:#fff; color:#06243a; border:1px solid rgba(12,45,65,0.06); min-width:45px; }
.isc-copylink-btn { display:none!important; background: linear-gradient(180deg,#eef6ff,#f4f9ff); color:#06243a; border:1px solid rgba(3,61,90,0.06); min-width:45px; }

/* Make sure buttons are vertically centered in one line on small screens */
@media (max-width:520px) {
  .insta-share-card-wrapper { padding:14px; max-width:420px; border-radius:14px; }
  .isc-header { height:300px; }
  .isc-logo-wrap { left:14px; bottom:-32px; width:84px; height:84px; }
  .isc-logo { width:84px; height:84px; padding:6px; border-radius:14px; }
  .isc-card-body { padding:60px 12px 12px 12px; }
  .isc-title { font-size:20px; width:68%; }
  .isc-excerpt { font-size:13px; min-height:40px; }
  .isc-qr { width:56px; height:56px; }
  .isc-qr-wrap { min-width:72px; padding:8px; border-radius:10px; }
  .isc-btn { height:24px; font-size:12px; padding:0 5px; border-radius:10px; min-width:54px; }
  .isc-share-btn { min-width:60px; }
  .isc-actions { gap:5px; }
}

/* Very small devices: still keep one row - allow slight horizontal scroll if impossible to fit */
@media (max-width:360px) {
  .isc-bottom-row { gap:8px; }
  .isc-actions { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
  .isc-actions .isc-btn { margin-right:8px; }
}

/* Export-only CTA overlay (bottom small) */
/* Export-specific styling for cloned DOM (only used during html2canvas onclone) */
.isc-export-cta {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  letter-spacing: 0.4px;
}

/* Ensure images/backgrounds render at natural size when captured */
.insta-share-card .isc-image,
.insta-share-card .isc-image img {
  -webkit-transform: none !important;
  transform: none !important;
  image-rendering: -webkit-optimize-contrast; /* hint for sharper rendering */
}

/* Make QR and buttons visually hidden where we want in live UI (JS hides them with visibility:hidden) */
/* Keep original classes present in CSS so layout is stable during capture */
.isc-actions, .isc-qr-wrap { visibility: visible; }

/* Improve hero image rendering (no CSS blur, crisp cropping) */
.isc-image { will-change: auto; backface-visibility: hidden; -webkit-font-smoothing: antialiased; }



/* Slightly smaller CTA on narrow clones */
@media (max-width:420px) {
  .isc-export-cta { font-size:16px; padding:7px 12px; bottom:28px; }
}

/* color/accessibility tweaks */
.isc-title, .isc-meta, .isc-btn { color: #06243a; }