/* ==========================================================================
   LeatherTech / Leather Repair South Florida — custom additions
   - News widget photo placeholders
   - "Get a Free Quote" Step 1-2-3 band
   - Photo upload + crop modal (uses Cropper.js)
   - Instagram embeds section
   Brand red: #cc1313 / #d41010
   ========================================================================== */

/* ---------- News widget: photo-coming placeholder ---------------------- */
.news_box figure.lt-photo-pending{
  position:relative;
  min-height:220px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f3f3;
  border:2px dashed #d3d3d3;
}
.news_box figure.lt-photo-pending::after{
  content:"Photo: " attr(data-photo-label);
  color:#b11414;
  font-family:'Oswald',sans-serif;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:0 12px;
}

/* ---------- Step 1-2-3 "Get a Free Quote" band ------------------------- */
.lt-quote-band{
  background:#1a1a1a;
  color:#fff;
  padding:54px 0 60px;
  text-align:center;
}
.lt-quote-band .container{max-width:1100px;}
.lt-quote-title{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:32px;
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.lt-quote-title span{color:#e21b1b;}
.lt-quote-sub{
  font-family:'Lato',sans-serif;
  font-size:17px;
  color:#cfcfcf;
  max-width:680px;
  margin:0 auto 34px;
  line-height:1.5;
}
.lt-steps{
  display:flex;
  gap:22px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:36px;
}
.lt-step{
  flex:1 1 260px;
  max-width:320px;
  background:#262626;
  border:1px solid #383838;
  border-radius:10px;
  padding:28px 22px 24px;
  position:relative;
}
.lt-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;height:52px;
  margin-bottom:14px;
  border-radius:50%;
  background:#e21b1b;
  color:#fff;
  font-family:'Oswald',sans-serif;
  font-size:24px;
  font-weight:700;
  box-shadow:0 6px 16px rgba(226,27,27,.35);
}
.lt-step h3{
  font-family:'Oswald',sans-serif;
  font-size:19px;
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#fff;
}
.lt-step p{
  font-family:'Lato',sans-serif;
  font-size:14.5px;
  color:#bdbdbd;
  margin:0;
  line-height:1.5;
}
.lt-quote-open{
  display:inline-block;
  background:#e21b1b;
  color:#fff;
  border:0;
  border-radius:50px;
  font-family:'Oswald',sans-serif;
  font-size:19px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:16px 44px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
  box-shadow:0 10px 26px rgba(226,27,27,.4);
}
.lt-quote-open:hover{background:#c81414;transform:translateY(-2px);}
.lt-quote-open:active{transform:translateY(0);}

/* ---------- Modal ----------------------------------------------------- */
.lt-modal{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:none;
}
.lt-modal.is-open{display:block;}
.lt-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.lt-modal__dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:calc(100% - 32px);
  max-width:520px;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border-radius:14px;
  padding:26px 24px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lt-modal__close{
  position:absolute;
  top:10px;right:14px;
  background:none;border:0;
  font-size:30px;line-height:1;
  color:#999;cursor:pointer;
  padding:4px 8px;
}
.lt-modal__close:hover{color:#222;}
.lt-modal__dialog h2{
  font-family:'Oswald',sans-serif;
  font-size:25px;
  text-transform:uppercase;
  margin:0 4px 4px 0;
  color:#1a1a1a;
}
.lt-modal__lead{
  font-family:'Lato',sans-serif;
  color:#666;font-size:14.5px;
  margin:0 0 18px;
}

/* photo drop area */
.lt-photo-drop{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:150px;
  border:2px dashed #d0a3a3;
  border-radius:10px;
  background:#fdf6f6;
  cursor:pointer;
  text-align:center;
  transition:border-color .15s, background .15s;
}
.lt-photo-drop:hover,.lt-photo-drop.is-drag{border-color:#e21b1b;background:#fbeaea;}
.lt-photo-drop__text{
  font-family:'Lato',sans-serif;
  color:#a23b3b;font-size:15px;font-weight:700;
  padding:0 16px;
}

/* cropper */
.lt-crop-wrap{margin-bottom:6px;}
.lt-crop-stage{
  width:100%;
  height:300px;
  background:#111;
  border-radius:10px;
  overflow:hidden;
}
.lt-crop-stage img{max-width:100%;display:block;}
.lt-crop-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 4px;
}
.lt-crop-controls button{
  flex:0 0 auto;
  background:#efefef;
  border:1px solid #ddd;
  border-radius:7px;
  padding:8px 12px;
  font-family:'Lato',sans-serif;
  font-size:14px;font-weight:700;color:#333;
  cursor:pointer;
}
.lt-crop-controls button:hover{background:#e3e3e3;}
.lt-crop-controls #ltPhotoReset{margin-left:auto;color:#b11414;}

/* multi-photo: sub-label, add button, thumbnail gallery */
.lt-photo-drop input[type="file"]{display:none;}   /* beat Bootstrap's input[type=file]{display:block} */
.lt-photo-drop__sub{display:block;color:#b98a8a;font-size:12.5px;font-weight:600;margin-top:4px;}
.lt-add-photo{
  display:block;width:100%;margin:4px 0 2px;
  background:#1f9d55;color:#fff;border:0;border-radius:8px;
  padding:11px 14px;font-family:'Lato',sans-serif;font-size:15px;font-weight:800;cursor:pointer;
  transition:background .15s;
}
.lt-add-photo:hover{background:#188047;}
.lt-add-photo:disabled{opacity:.6;cursor:default;}
.lt-gallery{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px;}
.lt-gallery__item{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid #e2d2d2;background:#faf3f3;}
.lt-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;}
.lt-gallery__remove{
  position:absolute;top:2px;right:2px;width:22px;height:22px;line-height:1;
  border:0;border-radius:50%;background:rgba(17,17,17,.72);color:#fff;
  font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lt-gallery__remove:hover{background:#e21b1b;}
.lt-gallery-hint{font-family:'Lato',sans-serif;font-size:12.5px;font-weight:700;color:#7a7a7a;margin:0 0 6px;}

/* anti-spam honeypot — hidden from real users, visible to dumb bots */
.lt-hp{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}

/* fields */
.lt-field{margin:12px 0;}
.lt-field input{
  width:100%;
  border:1px solid #d6d6d6;
  border-radius:8px;
  padding:13px 14px;
  font-family:'Lato',sans-serif;
  font-size:16px; /* 16px avoids iOS zoom-on-focus */
  color:#222;
  background:#fff;
}
.lt-field input:focus{outline:none;border-color:#e21b1b;box-shadow:0 0 0 3px rgba(226,27,27,.15);}
.lt-field input.is-invalid{border-color:#e21b1b;background:#fff7f7;}

.lt-quote-submit{
  width:100%;
  background:#e21b1b;
  color:#fff;border:0;border-radius:50px;
  font-family:'Oswald',sans-serif;
  font-size:18px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  padding:15px 20px;margin-top:10px;cursor:pointer;
  transition:background .15s,transform .15s;
}
.lt-quote-submit:hover{background:#c81414;transform:translateY(-1px);}
.lt-quote-submit:disabled{opacity:.6;cursor:default;transform:none;}
.lt-quote-note{
  text-align:center;color:#888;font-family:'Lato',sans-serif;
  font-size:13px;margin:12px 0 0;
}
.lt-quote-msg{
  margin-top:14px;padding:12px 14px;border-radius:8px;
  font-family:'Lato',sans-serif;font-size:14.5px;display:none;
}
.lt-quote-msg.is-error{display:block;background:#fdecec;color:#b11414;border:1px solid #f3c2c2;}
.lt-quote-msg.is-success{display:block;background:#eaf7ec;color:#1d7a2e;border:1px solid #bfe6c6;}

/* ---------- Instagram section ---------------------------------------- */
.lt-ig-section{padding:60px 0;background:#fafafa;text-align:center;}
.lt-ig-section .lt-ig-head h2{
  font-family:'Oswald',sans-serif;font-size:30px;text-transform:uppercase;
  margin:0 0 6px;color:#1a1a1a;
}
.lt-ig-section .lt-ig-head h2 span{color:#e21b1b;}
.lt-ig-section .lt-ig-head p{font-family:'Lato',sans-serif;color:#777;margin:0 0 34px;}
.lt-ig-grid{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:flex-start;
  max-width:1100px;margin:0 auto;
}
.lt-ig-grid > *{flex:1 1 328px;max-width:360px;}
.lt-ig-card{display:flex;flex-direction:column;align-items:center;}
.lt-ig-card .instagram-media{margin:0 auto !important;}
.lt-ig-caption{
  font-family:'Lato',sans-serif;font-size:14px;font-weight:700;color:#333;
  margin:10px 0 0;text-align:center;line-height:1.35;
}
/* placeholder slot (kept for future ready-to-fill use) */
.lt-ig-slot{
  min-height:420px;border:2px dashed #d3d3d3;border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
}
.lt-ig-slot span{font-family:'Oswald',sans-serif;color:#b11414;font-size:14px;letter-spacing:.05em;text-transform:uppercase;}

/* ---------- Mobile tuning -------------------------------------------- */
@media (max-width:600px){
  .lt-quote-band{padding:40px 0 46px;}
  .lt-quote-title{font-size:26px;}
  .lt-quote-sub{font-size:15.5px;margin-bottom:26px;}
  .lt-steps{gap:14px;margin-bottom:28px;}
  .lt-step{padding:22px 18px;}
  .lt-modal__dialog{
    width:100%;max-width:none;height:100%;max-height:100%;
    top:0;left:0;transform:none;border-radius:0;padding:22px 18px 30px;
  }
  .lt-crop-stage{height:46vh;}
}

/* Section 6 (testimonial / couch parallax) — taller on desktop so more of the
   couch shows, and background-size:cover so the short (1970x728) couch image
   fills the taller section instead of leaving a black strip. Mobile untouched. */
@media (min-width: 768px){
  #section_6{
    background-size: cover !important;
    background-position: center center !important;
  }
  #section_6 .parallax_inner{
    padding-top: 230px;
    padding-bottom: 230px;
  }
}

/* On the 3-column desktop layout the 10th Instagram reel is orphaned alone on
   its own row. Hide it there so the grid stays even (3+3+3). Tablet/mobile
   (1- or 2-column) keep all 10, where they tile evenly. */
@media (min-width: 1060px){
  .lt-ig-grid .lt-ig-card:last-child{ display: none; }
}