:root{ --brand:#6ee7b7; }
body{ font-family: Inter, system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

/* -------------
   General layout
   ------------- */
#servicesModal .modal-dialog{
  max-width: 1200px;
}
#servicesModal .modal-content{
  border-radius: 12px;
}
#servicesModal .modal-header{
  border-bottom: 1px solid #e5e7eb;
  padding: .75rem 1rem;
}
#servicesModal .modal-title{
  font-weight:600;
}

/* Make services modal body use most of the viewport height */
#servicesModal .modal-body{
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 1rem;
}

/* Base card style for services grid */
#rtf-services-grid .card{
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#rtf-services-grid .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(15,23,42,.1);
  border-color: #93c5fd;
}
#rtf-services-grid .card-title{
  font-weight:600;
  font-size:1rem;
}
#rtf-services-grid .card-text{
  font-size:.875rem;
  color:#4b5563;
}

/* Service detail layout (Website Generator) */

.rtf-service-detail{
  display:flex;
  flex-direction:column;
  gap: 1rem;
}

.rtf-service-hero{
  text-align:center;
}
.rtf-service-hero-img{
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
}
.rtf-service-hero-excerpt{
  max-width: 720px;
  margin: .75rem auto 0;
}

/* Two-column split inside the detail view */
.rtf-detail-layout{
  display:flex;
  flex-wrap:wrap;
}
.rtf-detail-left{
  display:flex;
}
.rtf-detail-right{
  display:flex;
  flex-direction:column;
}

/* Left column card */
.rtf-detail-left .card{
  border-radius:10px;
  border:1px solid #e5e7eb;
}
.rtf-detail-left .form-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#6b7280;
}

/* Tabs on the right column */

.rtf-tabs .nav-link{
  border-radius:999px;
  padding:.25rem .85rem;
  font-size:.875rem;
  font-weight:500;
  color:#4b5563;
  border:1px solid transparent;
}
.rtf-tabs .nav-link:not(.active):hover{
  background-color:#f3f4f6;
}
.rtf-tabs .nav-link.active{
  background:#111827;
  color:#f9fafb;
  border-color:#111827;
}

/* Gallery grid on the right */
#rtfTemplateCards .card{
  border-radius:10px;
  border:1px solid #e5e7eb;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#rtfTemplateCards .card:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 25px rgba(15,23,42,.15);
  border-color:#2563eb;
}
#rtfTemplateCards .card-title{
  font-size:.95rem;
}
#rtfTemplateCards img.card-img-top{
  border-bottom:1px solid #e5e7eb;
}

/* “Selected template” state */
.rtf-template-card.border-primary{
  box-shadow:0 0 0 2px #2563eb inset;
}

/* Builder checklist */
#rtfComponentChecklist .border{
  border-radius:8px;
  border-color:#e5e7eb !important;
}
#rtfComponentChecklist h6{
  font-size:.7rem;
}

/* Preview areas (if used) */
.rtf-preview-area{
  min-height:220px;
  background:#f9fafb;
  border-radius:8px;
}

/* Full-screen thumb preview overlay (if used) */
#rtf-thumb-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1055;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
#rtf-thumb-overlay.is-active{
  opacity:1;
  pointer-events:auto;
}
#rtf-thumb-inner{
  position:relative;
  width: min(1100px, 96vw);
  height: min(700px, 90vh);
  background:#020617;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
  display:flex;
  flex-direction:column;
}
#rtf-thumb-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem .85rem;
  background:rgba(15,23,42,.9);
  border-bottom:1px solid rgba(148,163,184,.6);
  color:#e5e7eb;
}
#rtf-thumb-bar .left,
#rtf-thumb-bar .right{
  display:flex;
  align-items:center;
  gap:.5rem;
}
#rtf-thumb-bar-title{
  font-size:.85rem;
  font-weight:500;
}
#rtf-thumb-bar-sub{
  font-size:.7rem;
  color:#9ca3af;
}
#rtf-thumb-back,
#rtf-thumb-download{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.8);
  background:transparent;
  color:#e5e7eb;
  font-size:.75rem;
  padding:.25rem .75rem;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}
#rtf-thumb-back:hover,
#rtf-thumb-download:hover{
  background:rgba(15,23,42,.9);
}
#rtf-thumb-download{
  background:#22c55e;
  border-color:#22c55e;
  color:#022c22;
  font-weight:600;
}
#rtf-thumb-download:hover{
  background:#16a34a;
  border-color:#16a34a;
  color:#e5f9f0;
}
#rtf-thumb-frame{
  flex:1;
  border:0;
  background:#0b1120;
}

/* Simple fallback overlay (used by the full-screen preview in forge.js) */
#rtf-tpl-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.92);
  z-index:1055;
  display:none;
  align-items:center;
  justify-content:center;
}
#rtf-tpl-overlay.is-active{
  display:flex;
}
#rtf-tpl-overlay-inner{
  position:relative;
  width: min(1100px, 96vw);
  height: min(700px, 90vh);
  background:#020617;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
  display:flex;
  flex-direction:column;
}
#rtf-tpl-back,
#rtf-tpl-download{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.8);
  background:transparent;
  color:#e5e7eb;
  font-size:.75rem;
  padding:.25rem .75rem;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}
#rtf-tpl-download{
  background:#22c55e;
  border-color:#22c55e;
  color:#022c22;
  font-weight:600;
}
#rtf-tpl-download:hover{
  background:#16a34a;
  border-color:#16a34a;
  color:#e5f9f0;
}
#rtf-tpl-frame{
  flex:1;
  border:0;
  background:#0b1120;
}

/* Template cards (generic) */
.rtf-template-card{
  cursor: pointer;
}

/* Duplicate rule commented out to avoid redundancy:
.rtf-template-card {
  cursor: pointer;
}
*/

/* --------
   Responsive
   -------- */
@media (max-width: 991.98px){
  #servicesModal .modal-body{
    max-height: calc(100vh - 140px);
  }
  .rtf-detail-layout{
    flex-direction:column;
  }
}

@media (max-width: 575.98px){
  #servicesModal .modal-dialog{
    margin: 0.75rem;
  }
}

/* Service detail header icon */
.rtf-header-detail .rtf-header-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
}

/* Floating back button inside service detail body */
.rtf-service-detail {
  position: relative;
}

.rtf-floating-back {
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  z-index: 5;
  box-shadow: 0 1px 4px rgba(15,23,42,0.4);
}