/* ==========================================================
   Casasoft CASAGATEWAY – Frontend Styles
   Primary: #083B2C  |  Rounded corners  |  Card grid
   ========================================================== */

:root {
  --cg-primary:        #083B2C;
  --cg-primary-light:  #0f5c44;
  --cg-primary-pale:   #e8f0ec;
  --cg-gold:           #d4a843;
  --cg-text:           #1a1a1a;
  --cg-text-muted:     #6b7280;
  --cg-border:         #e5e7eb;
  --cg-bg:             #f9fafb;
  --cg-white:          #ffffff;
  --cg-error:          #dc2626;
  --cg-success:        #16a34a;
  --cg-radius:         10px;
  --cg-radius-sm:      6px;
  --cg-radius-lg:      16px;
  --cg-shadow:         0 2px 8px rgba(0,0,0,0.08);
  --cg-shadow-hover:   0 6px 24px rgba(8,59,44,0.14);
  --cg-transition:     0.2s ease;
}

/* ---------- Filter bar ---------- */
.cg-listings-wrap {
  width: 100%;
}

.cg-filter-bar {
  margin-bottom:  24px;
  background:     var(--cg-white);
  border-radius:  var(--cg-radius-lg);
  box-shadow:     0 2px 16px rgba(8,59,44,0.10), 0 1px 3px rgba(0,0,0,0.06);
  overflow:       hidden;
  border:         1px solid rgba(8,59,44,0.10);
}

/* Header strip */
.cg-filter-header {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        11px 20px;
  background:     var(--cg-primary, #083B2C) !important;
  color:          #fff !important;
}

.cg-filter-header-icon {
  display:        flex;
  align-items:    center;
  opacity:        0.85;
  flex-shrink:    0;
}

.cg-filter-header-title {
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity:        0.9;
}

/* Right-side actions group (count pill + reset button) */
.cg-filter-header-actions {
  margin-left:    auto;
  display:        flex;
  align-items:    center;
  gap:            8px;
  flex-shrink:    0;
}

/* Result count pill — lives in the header */
.cg-filter-count {
  font-size:      12px;
  font-weight:    600;
  color:          var(--cg-primary);
  background:     var(--cg-gold);
  border-radius:  20px;
  padding:        2px 10px;
  white-space:    nowrap;
  line-height:    1.6;
  display:        none; /* shown via JS once populated */
}

.cg-filter-count:not(:empty) {
  display: inline-block;
}

/* Controls row */
.cg-filter-controls {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    flex-end;
  gap:            12px;
  padding:        16px 20px;
}

.cg-filter-group {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  min-width:      150px;
  flex:           1 1 150px;
}

.cg-filter-label {
  font-size:      10px;
  font-weight:    700;
  color:          var(--cg-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity:        0.7;
}

.cg-filter-select {
  appearance:         none;
  -webkit-appearance: none;
  background:         #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23083B2C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:             1.5px solid rgba(8,59,44,0.18);
  border-radius:      var(--cg-radius-sm);
  padding:            9px 36px 9px 13px;
  font-size:          13px;
  font-weight:        500;
  color:              var(--cg-text);
  cursor:             pointer;
  transition:         border-color var(--cg-transition), box-shadow var(--cg-transition);
  font-family:        inherit;
  width:              100%;
}

.cg-filter-select:focus {
  outline:      none;
  border-color: var(--cg-primary);
  box-shadow:   0 0 0 3px rgba(8,59,44,0.12);
}

.cg-filter-select:hover {
  border-color: var(--cg-primary);
}

.cg-filter-select.cg-filter-active {
  border-color:    var(--cg-gold);
  box-shadow:      0 0 0 2px rgba(212,168,67,0.28);
  font-weight:     600;
  background-color: rgba(212,168,67,0.05);
}

/* Reset filters button — right side of filter header */
.cg-filter-reset {
  background:      transparent;
  border:          1.5px solid var(--cg-gold);
  border-radius:   20px;
  color:           var(--cg-gold);
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  padding:         3px 12px;
  cursor:          pointer;
  white-space:     nowrap;
  line-height:     1.6;
  transition:      background var(--cg-transition), color var(--cg-transition);
  flex-shrink:     0;
}

.cg-filter-reset:hover,
.cg-filter-reset:focus {
  background: var(--cg-gold);
  color:      var(--cg-primary);
  outline:    none;
}

.cg-filter-empty {
  text-align:  center;
  padding:     48px 24px;
  color:       var(--cg-text-muted);
  font-size:   15px;
}

@media (max-width: 600px) {
  .cg-filter-header {
    padding:          10px 14px;
    background:       #083B2C !important;
    color:            #fff !important;
  }
  .cg-filter-header-title,
  .cg-filter-header-icon {
    color:            #fff !important;
  }
  .cg-filter-controls {
    display:          grid !important;
    grid-template-columns: 1fr 1fr;
    gap:              10px;
    padding:          12px 14px;
  }
  .cg-filter-group {
    min-width:        0;
    flex:             none;
    width:            100%;
  }
  .cg-filter-group:last-child {
    grid-column:      1 / -1;
  }
  .cg-filter-header-actions {
    gap:           6px;
  }
  .cg-filter-count {
    width:         auto;
    text-align:    center;
  }
  .cg-filter-reset {
    font-size:     10px;
    padding:       2px 9px;
  }
}

/* ---------- Listings Grid ---------- */
.casagateway-listings {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
.casagateway-cols-2 { grid-template-columns: repeat(2, 1fr); }
.casagateway-cols-3 { grid-template-columns: repeat(3, 1fr); }
.casagateway-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .casagateway-cols-3,
  .casagateway-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .casagateway-listings { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Compact card styles for narrow columns */
  .casagateway-card-body   { padding: 10px 12px 6px; }
  .casagateway-card-footer { padding: 8px 12px 14px; }
  .casagateway-card-title  { display: none !important; }
  .casagateway-card-category { font-size: 10px; }
  .casagateway-card-location { font-size: 11px; margin-bottom: 6px; }
  .casagateway-card-location svg { width: 11px; height: 11px; }
  .casagateway-card-price  { font-size: 14px; }
  .casagateway-meta-item   { font-size: 11px; padding: 2px 7px; gap: 3px; }
  .casagateway-meta-item svg { width: 12px; height: 12px; }
  .casagateway-card-meta   { gap: 5px; margin-bottom: 8px; }
  .casagateway-badge       { font-size: 10px; padding: 3px 7px; top: 7px; left: 7px; }
  .casagateway-btn         { padding: 9px 12px; font-size: 12px; }
  .cg-btn-long             { display: none; }
}

/* ---------- Property Card ---------- */
.casagateway-card {
  background:    var(--cg-white);
  border-radius: var(--cg-radius-lg);
  box-shadow:    var(--cg-shadow);
  overflow:      hidden;
  display:       flex;
  flex-direction:column;
  transition:    box-shadow var(--cg-transition), transform var(--cg-transition);
  text-decoration: none;
  color:           inherit;
  cursor:          pointer;
}
.casagateway-card:hover {
  box-shadow: var(--cg-shadow-hover);
  transform:  translateY(-3px);
  text-decoration: none;
  color:           inherit;
}

/* Card Image */
.casagateway-card-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cg-primary-pale);
}
.casagateway-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.4s ease;
}
.casagateway-card:hover .casagateway-card-image img {
  transform: scale(1.04);
}
.casagateway-card-image-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.casagateway-card-image-placeholder svg {
  width: 80px; height: 80px;
}

/* Badge */
.casagateway-badge {
  position:      absolute;
  top:           12px;
  left:          12px;
  padding:       4px 10px;
  border-radius: 20px;
  font-size:     12px;
  font-weight:   600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color:         var(--cg-white);
  background:    var(--cg-primary);
}
.casagateway-badge-kauf      { background: var(--cg-primary); }
.casagateway-badge-miete     { background: #1d6b4f; }
.casagateway-badge-reserviert {
  background:     #b45309;
  text-transform: uppercase;
}

/* Sold ribbon — diagonal banner across the card image */
.casagateway-sold-ribbon {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  overflow:       hidden;
  border-radius:  inherit;
  z-index:        3;
}
.casagateway-sold-ribbon span {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%) rotate(-20deg);
  width:           130%;
  text-align:      center;
  background:      linear-gradient(
                     to right,
                     rgba(8, 59, 44, 0)    0%,
                     rgba(8, 59, 44, 0.82) 25%,
                     rgba(8, 59, 44, 0.82) 75%,
                     rgba(8, 59, 44, 0)    100%
                   );
  color:           #fff;
  font-size:       1.1rem;
  font-weight:     800 !important;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  padding:         11px 0;
  text-shadow:     0 1px 4px rgba(0,0,0,0.35);
}

/* Reserved ribbon — diagonal banner across the card image (orange) */
.casagateway-reserved-ribbon {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  overflow:       hidden;
  border-radius:  inherit;
  z-index:        3;
}
.casagateway-reserved-ribbon span {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%) rotate(-20deg);
  width:           130%;
  text-align:      center;
  background:      linear-gradient(
                     to right,
                     rgba(180, 83, 9, 0)    0%,
                     rgba(180, 83, 9, 0.85) 25%,
                     rgba(180, 83, 9, 0.85) 75%,
                     rgba(180, 83, 9, 0)    100%
                   );
  color:           #fff;
  font-size:       1.1rem;
  font-weight:     800 !important;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  padding:         11px 0;
  text-shadow:     0 1px 4px rgba(0,0,0,0.35);
}

/* Card category label */
.casagateway-card-category {
  display:        inline-block;
  font-size:      11px;
  font-weight:    700;
  color:          var(--cg-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom:  4px;
  opacity:        0.75;
}

/* Card Body */
.casagateway-card-body {
  padding: 16px 20px 8px;
  flex: 1;
}
.casagateway-card-title {
  font-size:   17px;
  font-weight: 700;
  color:       var(--cg-text);
  margin:      0 0 8px;
  line-height: 1.3;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}
.casagateway-card-location {
  font-size:    13px;
  color:        var(--cg-text-muted);
  margin:       0 0 10px;
  display:      flex;
  align-items:  center;
  gap:          4px;
}
.casagateway-card-location svg {
  flex-shrink: 0;
  color: var(--cg-primary);
}

/* Meta pills */
.casagateway-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.casagateway-meta-item {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-size:     13px;
  color:         var(--cg-text-muted);
  background:    var(--cg-primary-pale);
  padding:       3px 10px;
  border-radius: 20px;
}
.casagateway-meta-item svg { color: var(--cg-primary); }

/* Price */
.casagateway-card-price {
  font-size:   20px;
  font-weight: 700;
  color:       var(--cg-primary);
}

/* Card Footer */
.casagateway-card-footer {
  padding: 12px 20px 20px;
}

/* ---------- Buttons ---------- */
.casagateway-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         11px 22px;
  border-radius:   var(--cg-radius);
  font-size:       14px;
  font-weight:     600;
  cursor:          pointer;
  border:          none;
  transition:      background var(--cg-transition), transform var(--cg-transition);
  text-decoration: none;
  white-space:     nowrap;
}
.casagateway-btn-primary {
  background: var(--cg-primary) !important;
  color:      #ffffff !important;
}
.casagateway-btn-primary:hover,
.casagateway-btn-primary:focus {
  background: #ffffff !important;
  color:      var(--cg-primary) !important;
  box-shadow: inset 0 0 0 2px var(--cg-primary), 0 0 0 4px rgba(212,168,67,0.28);
  transform:  translateY(-1px);
}
.casagateway-btn-full { width: 100%; }
.casagateway-btn-secondary {
  background: var(--cg-bg);
  color:      var(--cg-text);
  border:     1.5px solid var(--cg-border);
}
.casagateway-btn-secondary:hover { background: var(--cg-border); }
.casagateway-btn-ghost {
  background:  transparent;
  color:       var(--cg-text-muted);
  border:      1.5px solid var(--cg-border);
}
.casagateway-btn-ghost:hover { background: var(--cg-bg); }

/* ---------- Contact Form ---------- */
.casagateway-contact-form-wrap {
  font-family: inherit;
}
.casagateway-contact-form {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}
.casagateway-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .casagateway-form-row-2 { grid-template-columns: 1fr; }
}
.casagateway-form-group {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}
.casagateway-form-group label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--cg-text);
}
.casagateway-form-group label .required { color: var(--cg-error); }
.casagateway-contact-form input:not([type="checkbox"]),
.casagateway-contact-form textarea {
  padding:       10px 14px;
  border:        1.5px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
  font-size:     14px;
  color:         var(--cg-text);
  background:    var(--cg-white);
  width:         100%;
  box-sizing:    border-box;
  transition:    border-color var(--cg-transition), box-shadow var(--cg-transition);
  font-family:   inherit;
}
.casagateway-contact-form input:focus,
.casagateway-contact-form textarea:focus {
  outline:      none;
  border-color: var(--cg-primary);
  box-shadow:   0 0 0 3px rgba(8,59,44,0.12);
}
.casagateway-contact-form textarea { resize: vertical; min-height: 100px; }
.casagateway-form-notice {
  padding:       12px 16px;
  border-radius: var(--cg-radius-sm);
  font-size:     14px;
  font-weight:   500;
}
.casagateway-form-notice.success {
  background: #dcfce7;
  color:      #166534;
  border:     1px solid #bbf7d0;
}
.casagateway-form-notice.error {
  background: #fef2f2;
  color:      #991b1b;
  border:     1px solid #fecaca;
}
.casagateway-form-privacy {
  font-size:  12px;
  color:      var(--cg-text-muted);
  margin:     8px 0 0;
  line-height: 1.5;
}

/* ---------- Fieldset (Bewertung / Suchprofil) ---------- */
.casagateway-fieldset {
  border:        1.5px solid var(--cg-border);
  border-radius: var(--cg-radius);
  padding:       16px 20px;
  display:       flex;
  flex-direction: column;
  gap:           14px;
}
.casagateway-fieldset legend {
  font-size:   13px;
  font-weight: 700;
  color:       var(--cg-primary);
  padding:     0 6px;
}

/* Select inputs */
.casagateway-contact-form select {
  padding:       10px 14px;
  border:        1.5px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
  font-size:     14px;
  color:         var(--cg-text);
  background:    var(--cg-white);
  width:         100%;
  box-sizing:    border-box;
  transition:    border-color var(--cg-transition), box-shadow var(--cg-transition);
  font-family:   inherit;
  appearance:    auto;
}
.casagateway-contact-form select:focus {
  outline:      none;
  border-color: var(--cg-primary);
  box-shadow:   0 0 0 3px rgba(8,59,44,0.12);
}

/* ---------- Modal ---------- */
.casagateway-modal {
  position:   fixed;
  inset:      0;
  z-index:    99999;
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    16px;
}
.casagateway-modal-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.casagateway-modal-content {
  position:       relative;
  background:     var(--cg-white);
  border-radius:  var(--cg-radius-lg);
  padding:        32px;
  max-width:      540px;
  width:          100%;
  max-height:     90vh;
  overflow-y:     auto;
  box-shadow:     0 20px 60px rgba(0,0,0,0.2);
  animation:      cgModalIn 0.25s ease;
}
@keyframes cgModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.casagateway-modal-close {
  position:      absolute;
  top:           16px;
  right:         16px;
  background:    var(--cg-bg);
  border:        none;
  border-radius: 50%;
  width:         32px;
  height:        32px;
  font-size:     18px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--cg-text-muted);
  transition:    background var(--cg-transition);
}
.casagateway-modal-close:hover { background: var(--cg-border); }
.casagateway-modal-content h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--cg-primary);
}
.casagateway-modal-subtitle {
  font-size: 13px;
  color: var(--cg-text-muted);
  margin: 0 0 20px;
}

/* ---------- Card – photo count ---------- */
.casagateway-card-photo-count {
  position:       absolute;
  bottom:         10px;
  right:          10px;
  background:     rgba(0,0,0,0.55);
  color:          #fff;
  font-size:      12px;
  font-weight:    600;
  padding:        3px 8px;
  border-radius:  20px;
  display:        flex;
  align-items:    center;
  gap:            4px;
  backdrop-filter: blur(2px);
}

/* ============================================================
   DETAIL MODAL
   ============================================================ */
.cg-detail-modal {
  position:  fixed;
  inset:     0;
  z-index:   99999;
  display:   flex;
  align-items: flex-start;
  justify-content: center;
  padding:   24px 16px;
  overflow-y: auto;
}
.cg-detail-backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}
.cg-detail-panel {
  position:       relative;
  z-index:        1;
  background:     var(--cg-white);
  border-radius:  var(--cg-radius-lg);
  width:          100%;
  max-width:      860px;
  overflow:       hidden;
  box-shadow:     0 24px 80px rgba(0,0,0,0.22);
  animation:      cgDetailIn 0.28s ease;
  margin:         auto;
}
@keyframes cgDetailIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Close button */
.cg-detail-close {
  position:       absolute;
  top:            14px;
  right:          14px;
  z-index:        10;
  background:     rgba(255,255,255,0.92);
  border:         none;
  border-radius:  50%;
  width:          36px;
  height:         36px;
  font-size:      22px;
  line-height:    1;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content: center;
  color:          var(--cg-text);
  box-shadow:     0 2px 8px rgba(0,0,0,0.15);
  transition:     background var(--cg-transition);
}
.cg-detail-close:hover { background: var(--cg-border); }

/* Copy-link button */
.cg-detail-copy-link {
  position:       absolute;
  top:            14px;
  right:          58px;
  z-index:        10;
  background:     rgba(255,255,255,0.92);
  border:         none;
  border-radius:  18px;
  height:         36px;
  padding:        0 12px;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  gap:            6px;
  color:          var(--cg-text);
  font-size:      13px;
  font-weight:    500;
  box-shadow:     0 2px 8px rgba(0,0,0,0.15);
  transition:     background var(--cg-transition), color var(--cg-transition);
  white-space:    nowrap;
}
.cg-detail-copy-link:hover { background: var(--cg-border); }
.cg-detail-copy-link.cg-copied {
  background: var(--cg-primary, #083B2C);
  color:      #fff;
}
.cg-detail-copy-link.cg-copied svg { stroke: #fff; }

/* ---- Gallery ---- */
.cg-detail-gallery {
  background: #111;
}
.cg-detail-gallery-main {
  position:     relative;
  aspect-ratio: 16/9;
  overflow:     hidden;
  display:      flex;
  align-items:  center;
  justify-content: center;
  background:   #111;
}
#cg-detail-main-img {
  width:       100%;
  height:      100%;
  object-fit:  contain;
  object-position: center center;
  display:     block;
  transition:  opacity 0.2s ease;
  background:  #111;
}
.cg-detail-gallery-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  background:      var(--cg-primary-pale);
}
.cg-detail-gallery-placeholder svg { width: 80px; height: 80px; }

/* Arrows */
.cg-gallery-arrow {
  position:        absolute !important;
  top:             50% !important;
  transform:       translateY(-50%) !important;
  background:      rgba(0,0,0,0.52) !important;
  border:          none !important;
  border-radius:   50% !important;
  width:           44px !important;
  height:          44px !important;
  cursor:          pointer !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  box-shadow:      0 2px 10px rgba(0,0,0,0.4) !important;
  transition:      background var(--cg-transition) !important;
  color:           #ffffff !important;
  z-index:         5 !important;
}
.cg-gallery-arrow svg { stroke: #ffffff !important; }
.cg-gallery-arrow:hover { background: rgba(0,0,0,0.78) !important; }
.cg-gallery-prev { left: 12px; }
.cg-gallery-next { right: 12px; }

/* Counter */
.cg-gallery-counter {
  position:    absolute;
  bottom:      12px;
  left:        50%;
  transform:   translateX(-50%);
  background:  var(--cg-gold);
  color:       var(--cg-primary);
  font-size:   13px;
  font-weight: 700;
  padding:     3px 12px;
  border-radius: 20px;
  backdrop-filter: blur(2px);
  white-space: nowrap;
}

/* Thumbnails */
.cg-detail-gallery-thumbs {
  display:    flex;
  gap:        4px;
  padding:    6px;
  overflow-x: auto;
  background: #1a1a1a;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
.cg-detail-gallery-thumbs:empty { display: none; }
.cg-gallery-thumb {
  width:         72px;
  height:        54px;
  object-fit:    cover;
  border-radius: 5px;
  cursor:        pointer;
  opacity:       0.6;
  flex-shrink:   0;
  border:        2px solid transparent;
  transition:    opacity var(--cg-transition), border-color var(--cg-transition);
}
.cg-gallery-thumb:hover { opacity: 0.85; }
.cg-gallery-thumb.active {
  opacity:      1;
  border-color: var(--cg-primary);
}

/* ---- Lightbox ---- */
.cg-lightbox {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         999999;
  align-items:     center;
  justify-content: center;
}
.cg-lightbox.cg-lightbox-open {
  display: flex;
}
.cg-lightbox-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.92);
}
.cg-lightbox-img-wrap {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  max-width:       calc(100vw - 120px);
  max-height:      calc(100vh - 60px);
}
@media (max-width: 600px) {
  .cg-lightbox-img-wrap {
    max-width:  calc(100vw - 16px);
    max-height: calc(100vh - 100px);
  }
}
#cg-lightbox-img {
  max-width:   100%;
  max-height:  calc(100vh - 60px);
  object-fit:  contain;
  border-radius: 4px;
  box-shadow:  0 8px 48px rgba(0,0,0,0.6);
  display:     block;
  user-select: none;
}
.cg-lightbox-close {
  position:        fixed;
  top:             16px;
  right:           16px;
  z-index:         2;
  background:      rgba(255,255,255,0.12);
  border:          none;
  border-radius:   50%;
  width:           44px;
  height:          44px;
  font-size:       26px;
  line-height:     1;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #ffffff;
  transition:      background 0.2s ease;
}
.cg-lightbox-close:hover { background: rgba(255,255,255,0.25); }
.cg-lightbox-arrow {
  position:        fixed;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         2;
  background:      rgba(255,255,255,0.12);
  border:          none;
  border-radius:   50%;
  width:           52px;
  height:          52px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #ffffff;
  transition:      background 0.2s ease;
  padding:         0;
}
.cg-lightbox-arrow:hover { background: rgba(255,255,255,0.28); }
.cg-lightbox-arrow svg  { stroke: #ffffff; display: block; }
.cg-lightbox-prev { left: 16px; }
.cg-lightbox-next { right: 16px; }
@media (max-width: 600px) {
  .cg-lightbox-prev { left: 6px; }
  .cg-lightbox-next { right: 6px; }
  .cg-lightbox-arrow { width: 40px; height: 40px; }
}
.cg-lightbox-counter {
  position:    fixed;
  bottom:      20px;
  left:        50%;
  transform:   translateX(-50%);
  z-index:     2;
  background:  var(--cg-gold);
  color:       var(--cg-primary);
  font-size:   13px;
  font-weight: 700;
  padding:     4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Main gallery image: grab cursor signals swipeability; zoom-in when multiple images not present */
#cg-detail-main-img {
  cursor: grab;
}
#cg-detail-main-img:active {
  cursor: grabbing;
}

/* Mouse-drag cursor on lightbox image */
#cg-lightbox-img {
  cursor: grab;
}
#cg-lightbox-img:active {
  cursor: grabbing;
}

/* ---- Body ---- */
.cg-detail-body {
  padding: 28px 32px 36px;
}
@media (max-width: 600px) {
  .cg-detail-body { padding: 20px 18px 28px; }
}

/* Header */
.cg-detail-header { margin-bottom: 18px; }
.cg-detail-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        4px 12px;
  border-radius:  20px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom:  0;
  line-height:    1;
}
.cg-detail-badge-kauf      { background: var(--cg-primary-pale); color: var(--cg-primary); }
.cg-detail-badge-miete     { background: var(--cg-gold); color: #ffffff; }
.cg-detail-badge-reserviert { background: #fef3c7; color: #92400e; }
.cg-detail-badge-verkauft   { background: var(--cg-primary); color: #fff; }

.cg-detail-title {
  font-size:   1.7rem !important;
  font-weight: 800;
  color:       var(--cg-primary);
  margin:      0 0 6px;
  line-height: 1.2;
}
@media (max-width: 600px) { .cg-detail-title { font-size: 1.2rem !important; } }

.cg-detail-location {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   14px;
  color:       var(--cg-text-muted);
  margin:      0;
}
.cg-detail-location svg { flex-shrink: 0; color: var(--cg-primary); }

/* Facts row */
.cg-detail-facts {
  display:   flex;
  flex-wrap: wrap;
  gap:       12px;
  margin:    18px 0;
}
.cg-detail-fact {
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    var(--cg-bg);
  border:        1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  padding:       12px 16px;
  flex:          1 1 160px;
}
.cg-detail-fact-icon {
  color:       var(--cg-primary);
  flex-shrink: 0;
  display:     flex;
}
.cg-detail-fact-label {
  display:     block;
  font-size:   11px;
  color:       var(--cg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.cg-detail-fact-value {
  display:     block;
  font-size:   17px;
  font-weight: 800;
  color:       var(--cg-text);
}

/* ---- Section label (shared) ---- */
.cg-section-label {
  margin:         0 0 12px;
  font-size:      11px;
  font-weight:    800;
  color:          var(--cg-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---- Header meta: category chip + badge ---- */
.cg-detail-header-meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
  margin-bottom: 8px;
}
.cg-detail-category {
  font-size:      12px;
  font-weight:    700;
  color:          var(--cg-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:        4px 12px;
  background:     var(--cg-primary-pale);
  border-radius:  20px;
  display:        inline-flex;
  align-items:    center;
  line-height:    1;
}
/* ---- Price row (full-width, no icon) ---- */
.cg-fact-price-row {
  width:         100%;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           16px;
  background:    var(--cg-primary-pale);
  border:        1px solid #c6dbd3;
  border-left:   4px solid var(--cg-gold);
  border-radius: var(--cg-radius);
  padding:       16px 20px;
  margin-bottom: 4px;
}
.cg-detail-fact-price-val {
  display:     block;
  font-size:   26px;
  font-weight: 800;
  color:       var(--cg-primary);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

/* ---- Description ---- */
.cg-detail-description {
  margin:        20px 0;
  padding:       20px;
  background:    var(--cg-bg);
  border-radius: var(--cg-radius);
  border:        1px solid var(--cg-border);
}
.cg-detail-description-text {
  font-size:   15px;
  line-height: 1.7;
  color:       var(--cg-text);
}
.cg-detail-description-text.cg-desc-collapsed {
  display:            -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}
.cg-desc-toggle {
  display:         inline-block;
  margin-top:      12px;
  background:      var(--cg-primary);
  border:          none;
  padding:         7px 18px;
  border-radius:   6px;
  font-size:       13px;
  font-weight:     600;
  color:           #fff !important;
  cursor:          pointer;
  text-decoration: none;
  transition:      background .15s ease;
}
.cg-desc-toggle:hover { background: #0a4d38; }

/* ---- Details table ---- */
.cg-detail-table-wrap {
  margin: 20px 0;
  padding: 20px;
  background: var(--cg-bg);
  border-radius: var(--cg-radius);
  border: 1px solid var(--cg-border);
}
.cg-detail-table {
  width: 100%;
  border-collapse: collapse;
}
.cg-detail-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--cg-border);
}
.cg-dt-label, .cg-dt-value {
  padding: 8px 0;
  font-size: 14px;
  vertical-align: top;
}
.cg-dt-label {
  color:       var(--cg-text-muted);
  width:       40%;
  font-weight: 500;
  padding-right: 12px;
}
.cg-dt-value {
  color:       var(--cg-text);
  font-weight: 600;
}

/* ---- Features / Eigenschaften ---- */
.cg-detail-features {
  margin: 20px 0;
  padding: 20px;
  background: var(--cg-bg);
  border-radius: var(--cg-radius);
  border: 1px solid var(--cg-border);
}
.cg-detail-features-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cg-feature-chip {
  display:        inline-flex;
  align-items:    center;
  padding:        5px 14px;
  border-radius:  20px;
  font-size:      13px;
  font-weight:    600;
  color:          var(--cg-primary);
  background:     var(--cg-primary-pale);
  border:         1px solid #b5d5c8;
  white-space:    nowrap;
  line-height:    1.4;
}

/* ---- Contact section ---- */
.cg-detail-contact-section {
  margin-top:    28px;
  padding-top:   24px;
  border-top:    2px solid var(--cg-border);
}
/* Sold banner — prominent strip at top of detail body */
.cg-detail-sold-banner {
  display:         flex;
  align-items:     center;
  gap:             10px;
  background:      linear-gradient(135deg, var(--cg-primary) 0%, #0f5c3e 100%);
  color:           #fff;
  font-size:       1rem;
  font-weight:     700;
  letter-spacing:  0.05em;
  padding:         14px 24px;
  border-radius:   var(--cg-radius, 8px);
  margin-bottom:   20px;
}
.cg-detail-sold-banner svg {
  flex-shrink: 0;
  stroke:      #fff;
}
.cg-detail-sold-notice {
  background:    var(--cg-primary-pale, #e6ede9);
  border-left:   4px solid var(--cg-primary);
  border-radius: var(--cg-radius, 8px);
  padding:       20px 24px;
  margin-top:    28px;
}
.cg-sold-notice-text {
  margin:      0;
  color:       var(--cg-primary);
  font-size:   .95rem;
  line-height: 1.55;
}
/* Reserved banner — prominent strip at top of detail body (orange) */
.cg-detail-reserved-banner {
  display:         flex;
  align-items:     center;
  gap:             10px;
  background:      linear-gradient(135deg, #b45309 0%, #d97706 100%);
  color:           #fff;
  font-size:       1rem;
  font-weight:     700;
  letter-spacing:  0.05em;
  padding:         14px 24px;
  border-radius:   var(--cg-radius, 8px);
  margin-bottom:   20px;
}
.cg-detail-reserved-banner svg {
  flex-shrink: 0;
  stroke:      #fff;
}

.cg-detail-contact-intro {
  font-size:     14px;
  color:         var(--cg-text-muted);
  margin:        0 0 16px;
  line-height:   1.5;
}

/* ---------- State messages ---------- */
.casagateway-error,
.casagateway-empty {
  padding:       20px;
  border-radius: var(--cg-radius);
  text-align:    center;
  font-size:     15px;
}
.casagateway-error {
  background: #fef2f2;
  color:      #991b1b;
  border:     1px solid #fecaca;
}
.casagateway-empty {
  background: var(--cg-primary-pale);
  color:      var(--cg-primary);
  border:     1px solid #c6dbd3;
}

/* ==========================================================
   MULTI-STEP BEWERTUNGS-WIZARD  (Neho-inspired)
   ========================================================== */

.cg-wizard {
  font-family: inherit;
  max-width: 940px;
  margin: 0 auto;
}

.cg-wizard-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* ---- Left column (sidebar + help box as separate cards) ---- */
.cg-wizard-left {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  width:          210px;
  flex-shrink:    0;
}

/* ---- Sidebar ---- */
.cg-wizard-sidebar {
  width: 100%;
  background: var(--cg-white);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  padding: 28px 20px;
  box-shadow: var(--cg-shadow);
}

.cg-wizard-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cg-text);
  margin: 0 0 3px;
}

.cg-wizard-sidebar-sub {
  font-size: 12px;
  color: var(--cg-text-muted);
  margin: 0 0 22px;
}

.cg-wizard-steps-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cg-step-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  position: relative;
}

/* Connecting line between steps */
.cg-step-nav-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 38px;
  width: 1px;
  height: calc(100% - 16px);
  background: var(--cg-border);
}

.cg-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--cg-border);
  background: var(--cg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--cg-text-muted);
  flex-shrink: 0;
  transition: all var(--cg-transition);
  position: relative;
  z-index: 1;
}

.cg-step-nav-item.active .cg-step-num {
  background: var(--cg-primary);
  border-color: var(--cg-primary);
  color: #fff;
}

/* Completed: green circle with checkmark */
.cg-step-nav-item.completed .cg-step-num {
  background: var(--cg-success);
  border-color: var(--cg-success);
  color: #fff;
  font-size: 0;
}
.cg-step-nav-item.completed .cg-step-num::after {
  content: '✓';
  font-size: 13px;
}
.cg-step-nav-item.completed::after {
  background: var(--cg-success);
  opacity: 0.25;
}

.cg-step-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--cg-text-muted);
  transition: color var(--cg-transition);
}
.cg-step-nav-item.active   .cg-step-label { color: var(--cg-primary); font-weight: 600; }
.cg-step-nav-item.completed .cg-step-label { color: var(--cg-text); }

/* ---- Main content ---- */
.cg-wizard-main {
  flex: 1;
  min-width: 0;
}

.cg-wizard-form {
  background: var(--cg-white);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  padding: 36px 36px 0;
  box-shadow: var(--cg-shadow);
}

.cg-step-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--cg-text);
  margin: 0 0 6px;
}

.cg-step-subtitle {
  font-size: 14px;
  color: var(--cg-text-muted);
  margin: 0 0 24px;
}

/* ---- Type cards (Step 1) ---- */
.cg-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.cg-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 10px 16px;
  border: 1.5px solid var(--cg-border);
  border-radius: var(--cg-radius);
  cursor: pointer;
  transition: border-color var(--cg-transition), box-shadow var(--cg-transition);
  background: var(--cg-white);
  user-select: none;
}

.cg-type-card input[type="radio"] { display: none; }

.cg-type-card:hover {
  border-color: var(--cg-text-muted);
}

.cg-type-card.selected {
  border: 2px solid var(--cg-primary);
  box-shadow: 0 0 0 3px rgba(8,59,44,0.08);
}

.cg-type-icon {
  color: var(--cg-text);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cg-type-card.selected .cg-type-icon { color: var(--cg-primary); }

.cg-type-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-text);
  text-align: center;
}

/* ---- Input fields inside wizard ---- */
.cg-field {
  padding:       10px 14px;
  border:        1.5px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
  font-size:     14px;
  color:         var(--cg-text);
  background:    var(--cg-white);
  width:         100%;
  box-sizing:    border-box;
  font-family:   inherit;
  transition:    border-color var(--cg-transition), box-shadow var(--cg-transition);
  appearance:    auto;
}
.cg-field:focus {
  outline:      none;
  border-color: var(--cg-primary);
  box-shadow:   0 0 0 3px rgba(8,59,44,0.1);
}

/* ---- Step error ---- */
.cg-step-error {
  color:         var(--cg-error);
  font-size:     13px;
  margin-top:    4px;
  margin-bottom: 12px;
}

.cg-invalid { border-color: var(--cg-error) !important; box-shadow: 0 0 0 3px rgba(220,38,38,0.15) !important; }

/* ---- Wizard navigation bar ---- */
.cg-wizard-nav {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         18px 36px;
  border-top:      1px solid var(--cg-border);
  margin:          28px -36px 0;
  background:      var(--cg-bg);
  border-radius:   0 0 var(--cg-radius-lg) var(--cg-radius-lg);
}

/* ---- Success screen ---- */
.cg-wizard-success {
  text-align:    center;
  padding:       60px 40px;
  background:    var(--cg-white);
  border:        1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  box-shadow:    var(--cg-shadow);
}

.cg-success-icon {
  width:       64px;
  height:      64px;
  background:  var(--cg-success);
  color:       #fff;
  border-radius: 50%;
  font-size:   32px;
  line-height: 64px;
  margin:      0 auto 20px;
}

.cg-wizard-success h3 { font-size: 24px; color: var(--cg-primary); margin: 0 0 12px; }
.cg-wizard-success p  { color: var(--cg-text-muted); font-size: 15px; }

/* ---- Resume Modal ---- */
.cg-resume-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cg-resume-modal {
  background: #fff;
  border-radius: 16px;
  padding: 36px;
  max-width: 520px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: cgResumeIn 0.22s ease;
}

@keyframes cgResumeIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cg-resume-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--cg-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.cg-resume-close:hover { color: var(--cg-text); }

.cg-resume-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--cg-text);
  margin: 0 0 6px;
  padding-right: 24px;
}

.cg-resume-sub {
  font-size: 14px;
  color: var(--cg-text-muted);
  margin: 0 0 16px;
}

.cg-resume-card {
  border: 1.5px solid var(--cg-border);
  border-radius: var(--cg-radius);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.cg-resume-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--cg-border);
}

.cg-resume-type-icon {
  display: flex;
  align-items: center;
  color: var(--cg-primary);
}

.cg-resume-type-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--cg-text);
}

.cg-resume-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 13px;
  color: var(--cg-text);
}

.cg-resume-details span {
  white-space: nowrap;
}

.cg-resume-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .cg-resume-modal { padding: 24px 20px; }
  .cg-resume-actions { flex-direction: column; }
  .cg-resume-actions .casagateway-btn { width: 100%; justify-content: center; }
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .cg-wizard-layout    { flex-direction: column; }
  .cg-wizard-left      { width: 100%; }
  .cg-wizard-sidebar   { width: 100%; }
  .cg-wizard-steps-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .cg-step-nav-item::after { display: none; }
  .cg-step-label       { display: none; }
  .cg-type-grid        { grid-template-columns: repeat(2, 1fr); }
  .cg-wizard-form      { padding: 24px 16px 0; }
  .cg-wizard-nav       { padding: 16px; margin: 24px -16px 0; }
}

/* ==========================================================
   GRUNDSTÜCKGEWINNSTEUER-RECHNER
   ========================================================== */

.cg-tax-calculator {
  background: var(--cg-white);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  padding: 36px;
  box-shadow: var(--cg-shadow);
  max-width: 800px;
  margin: 0 auto;
}

.cg-tax-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--cg-primary);
  margin: 0 0 8px;
}

.cg-tax-subtitle {
  font-size: 14px;
  color: var(--cg-text-muted);
  margin: 0 0 32px;
}

.cg-tax-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Slider */
.cg-tax-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--cg-border);
  outline: none;
  margin: 8px 0 4px;
}

.cg-tax-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cg-primary);
  cursor: pointer;
}

.cg-tax-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cg-primary);
  cursor: pointer;
  border: none;
}

.cg-tax-slider-label {
  font-size: 13px;
  color: var(--cg-text-muted);
}

/* Result boxes */
.cg-tax-result {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cg-tax-result-box {
  background: var(--cg-bg);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  padding: 20px;
}

.cg-tax-result-main {
  background: var(--cg-primary-pale);
  border-color: #b5d0c5;
}

.cg-tax-result-label {
  font-size: 12px;
  color: var(--cg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}

.cg-tax-result-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--cg-primary);
  margin: 0 0 4px;
}

.cg-tax-result-rate {
  font-size: 12px;
  color: var(--cg-text-muted);
  margin: 0;
}

.cg-tax-disclaimer {
  font-size: 12px;
  color: var(--cg-text-muted);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--cg-radius-sm);
  padding: 12px;
  margin: 0;
}

.cg-tax-slider-hint {
  font-size: 12px;
  color: #d97706;
  font-weight: 600;
}

/* Abzüge accordion */
.cg-tax-abzuege {
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.cg-tax-abzuege-toggle {
  width: 100%;
  background: var(--cg-bg);
  border: none;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--cg-text);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.cg-tax-abzuege-toggle:hover { background: #e9f0ed; }

.cg-tax-abzuege-icon {
  font-size: 16px;
  color: var(--cg-primary);
  line-height: 1;
  flex-shrink: 0;
}

.cg-tax-abzuege-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--cg-text-muted);
  font-weight: 400;
  background: #e5e7eb;
  border-radius: 9999px;
  padding: 2px 10px;
}

.cg-tax-abzuege-body {
  padding: 16px;
  border-top: 1px solid var(--cg-border);
  background: var(--cg-white);
}

.cg-tax-abzuege-info {
  font-size: 12px;
  color: var(--cg-text-muted);
  margin: 0 0 12px;
}

.cg-tax-error {
  padding:       10px 14px;
  border-radius: var(--cg-radius-sm);
  font-size:     14px;
  font-weight:   500;
  background:    #fef2f2;
  color:         #991b1b;
  border:        1px solid #fecaca;
  margin-bottom: 8px;
}

/* Smaller result value */
.cg-tax-val-sm {
  font-size: 18px !important;
}

/* CTA Contact Card */
.cg-tax-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  background: var(--cg-primary);
  border-radius: var(--cg-radius-lg);
  padding: 24px 28px;
  flex-wrap: wrap;
}

.cg-tax-cta-photo {
  flex-shrink: 0;
}

.cg-tax-cta-photo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cg-tax-cta-text {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cg-tax-cta-eyebrow {
  font-size:      11px    !important;
  color:          #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cg-tax-cta-name {
  font-size:   18px    !important;
  font-weight: 700     !important;
  color:       #ffffff !important;
  line-height: 1.2;
}

.cg-tax-cta-link,
.cg-tax-cta-link:link,
.cg-tax-cta-link:visited {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       13px    !important;
  font-weight:     600     !important;
  color:           #ffffff !important;
  text-decoration: none    !important;
  transition:      color 0.15s;
}

.cg-tax-cta-link:hover,
.cg-tax-cta-link:focus {
  color:           #ffffff    !important;
  text-decoration: underline  !important;
}

.cg-tax-cta-link svg { flex-shrink: 0; }

.cg-tax-cta-action {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cg-tax-cta-action p {
  font-size: 13px    !important;
  color:     #ffffff !important;
  margin:    0;
  text-align: right;
}

.cg-tax-cta .casagateway-btn-primary {
  background: #ffffff !important;
  color: #083B2C !important;
  border-color: #ffffff;
  box-shadow: none !important;
}

.cg-tax-cta .casagateway-btn-primary:hover,
.cg-tax-cta .casagateway-btn-primary:focus {
  background: rgba(255,255,255,0.9) !important;
  color: #083B2C !important;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  .cg-tax-layout { grid-template-columns: 1fr; }
  .cg-tax-calculator { padding: 24px 16px; }
  .cg-tax-cta { flex-direction: column; align-items: flex-start; }
  .cg-tax-cta-action { align-items: flex-start; }
  .cg-tax-cta-action p { text-align: left; }
}

/* ============================================================
   HELP BOX (in wizard sidebar, below step nav)
   ============================================================ */
.cg-help-box {
  display:         flex;
  align-items:     center;
  gap:             10px;
  width:           100%;
  box-sizing:      border-box;
  background:      #083B2C;
  padding:         14px;
  border-radius:   var(--cg-radius-lg);
  box-shadow:      var(--cg-shadow);
}

.cg-help-box-photo {
  width:        60px;
  height:       60px;
  border-radius: 50%;
  object-fit:   cover;
  flex-shrink:  0;
  display:      block;
}

.cg-help-box-text {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0;
}

.cg-help-box-label {
  font-size:   11px !important;
  font-weight: 400  !important;
  color:       rgba(255,255,255,0.80) !important;
  line-height: 1.2  !important;
}

.cg-help-box-phone,
.cg-help-box-phone:link,
.cg-help-box-phone:visited {
  font-size:       13px         !important;
  font-weight:     700          !important;
  color:           #ffffff      !important;
  text-decoration: none         !important;
  line-height:     1.3          !important;
  letter-spacing:  0.01em       !important;
  word-break:      break-all;
}

.cg-help-box-phone:hover,
.cg-help-box-phone:focus {
  color:           #ffffff      !important;
  text-decoration: underline    !important;
}

/* ---- Datenschutz Checkbox wrapper (animated checkbox lives here) ---- */
.cg-datenschutz-wrap {
  position:   relative;
  width:      100%;
  margin:     14px 0 10px;
  padding-left: 2px;
  box-sizing: border-box;
}

.cg-datenschutz-wrap a {
  color:           var(--cg-primary);
  text-decoration: underline;
}

/* =============================================================
   FLOATING CTA BUTTON
   ============================================================= */
.cg-floating-cta {
  position: fixed;
  bottom:   110px;
  right:    24px;
  z-index:  9998;
}

/* Wrapper keeps pulse + badge positioned around the clipped button */
.cg-fcta-btn-wrap {
  position: relative;
  width:    64px;
  height:   64px;
}

/* Circular trigger button */
.cg-fcta-btn {
  width:               64px;
  height:              64px;
  border-radius:       50%;
  padding:             0;
  border:              3px solid #fff;
  cursor:              pointer;
  overflow:            hidden !important;
  box-shadow:          0 4px 20px rgba(0,0,0,.28);
  background-color:    var(--cg-primary);
  background-size:     cover;
  background-position: center 20%;
  background-repeat:   no-repeat;
  transition:          transform .2s ease;
  display:             block;
  box-sizing:          border-box;
}
.cg-fcta-btn:hover { transform: scale(1.07); }

/* Notification badge */
.cg-fcta-badge {
  position:       absolute;
  top:            -4px;
  right:          -4px;
  min-width:      20px;
  height:         20px;
  padding:        0 5px;
  border-radius:  10px;
  background:     #ef4444;
  color:          #fff;
  font-size:      11px;
  font-weight:    700;
  line-height:    20px;
  text-align:     center;
  border:         2px solid #fff;
  pointer-events: none;
  box-sizing:     border-box;
  z-index:        1;
}
.cg-fcta-badge[hidden] { display: none; }

/* Pulse ring */
.cg-fcta-pulse {
  position:      absolute;
  inset:         -4px;
  border-radius: 50%;
  border:        3px solid var(--cg-primary);
  opacity:       .65;
  animation:     cg-fcta-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes cg-fcta-pulse {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Popup card */
.cg-fcta-popup {
  position:       absolute;
  bottom:         80px;
  right:          0;
  width:          288px;
  background:     #fff;
  border-radius:  16px;
  box-shadow:     0 8px 36px rgba(0,0,0,.18);
  padding:        0;
  overflow:       hidden;
  transform:      translateY(10px);
  opacity:        0;
  transition:     opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.cg-fcta-popup.cg-fcta-open {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

/* Green header band */
.cg-fcta-header-wrap {
  position:      relative;
  background:    #083B2C;
  padding:       18px 16px 16px;
  border-radius: 16px 16px 0 0;
}

/* Gold accent divider */
.cg-fcta-accent-line {
  height:     2px;
  background: var(--cg-gold);
}

/* White body */
.cg-fcta-body {
  padding: 16px;
}

/* Close button */
.cg-fcta-close {
  position:    absolute;
  top:         10px;
  right:       10px;
  background:  rgba(255,255,255,0.15);
  border:      none;
  font-size:   18px;
  line-height: 1;
  color:       #fff;
  cursor:      pointer;
  padding:     2px 7px;
  border-radius: 50%;
  transition:  background .15s;
}
.cg-fcta-close:hover { background: rgba(255,255,255,0.28); }

/* Header: avatar + name/title */
.cg-fcta-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      0;
}
.cg-fcta-avatar {
  width:           48px;
  height:          48px;
  border-radius:   50%;
  object-fit:      cover;
  object-position: center 20%;
  flex-shrink:     0;
  border:          2px solid var(--cg-gold);
}
.cg-fcta-header-text strong {
  display:     block;
  font-size:   .9rem;
  font-weight: 700;
  color:       #fff;
  line-height: 1.2;
}
.cg-fcta-header-text span {
  font-size: .76rem;
  color:     rgba(255,255,255,0.72);
}

/* Greeting text */
.cg-fcta-greeting {
  font-size:   .85rem;
  color:       #374151;
  margin:      0 0 14px;
  line-height: 1.45;
}

/* Action buttons */
.cg-fcta-actions {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}
.cg-fcta-action {
  display:         flex;
  align-items:     center;
  gap:             9px;
  padding:         10px 14px;
  border-radius:   10px;
  font-size:       .84rem;
  font-weight:     600;
  text-decoration: none !important;
  transition:      background .15s, transform .1s;
  white-space:     nowrap;
}
.cg-fcta-action:hover { transform: translateY(-1px); }
.cg-fcta-phone       { background: var(--cg-primary) !important; color: #fff !important; }
.cg-fcta-phone:hover { background: #0a4d39 !important; }
.cg-fcta-email       { background: rgba(8,59,44,0.07) !important; color: #083B2C !important; }
.cg-fcta-email:hover { background: rgba(8,59,44,0.14) !important; }

@media (max-width: 480px) {
  .cg-floating-cta { bottom: 96px; right: 16px; }
  .cg-fcta-popup   { width: calc(100vw - 32px); right: -8px; }
}

/* "Send message" button inside floating popup */
.cg-fcta-write {
  background:  rgba(8,59,44,0.07) !important;
  color:       #083B2C !important;
  border:      none;
  cursor:      pointer;
  width:       100%;
  text-align:  left;
}
.cg-fcta-write:hover { background: rgba(8,59,44,0.14) !important; }

/* Form panel inside popup */
.cg-fcta-form-panel {
  margin-top: 4px;
}

/* Back link */
.cg-fcta-back {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  background:  none;
  border:      none;
  padding:     0 0 10px;
  font-size:   .78rem;
  font-weight: 600;
  color:       var(--cg-primary);
  cursor:      pointer;
  text-decoration: none;
}
.cg-fcta-back:hover { text-decoration: underline; }

/* Compact form fields */
.cg-fcta-field-group {
  margin-bottom: 8px;
}
.cg-fcta-input {
  width:         100%;
  box-sizing:    border-box;
  padding:       8px 10px;
  border:        1.5px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
  font-size:     13px;
  color:         var(--cg-text);
  background:    #fff;
  font-family:   inherit;
  transition:    border-color var(--cg-transition), box-shadow var(--cg-transition);
}
.cg-fcta-input:focus {
  outline:      none;
  border-color: var(--cg-primary);
  box-shadow:   0 0 0 3px rgba(8,59,44,0.1);
}
.cg-fcta-textarea {
  resize:     vertical;
  min-height: 72px;
}

/* Popup submit button sizing override */
.cg-fcta-form-panel .casagateway-btn {
  margin-top: 4px;
  font-size:  .84rem;
}

/* Privacy note */
.cg-fcta-privacy {
  font-size:   10px;
  color:       #9ca3af;
  margin:      8px 0 0;
  line-height: 1.4;
  text-align:  center;
}

/* Form heading shown above the popup form fields */
.cg-fcta-form-heading {
  margin:      0 0 10px;
  font-size:   .88rem;
  font-weight: 600;
  color:       var(--cg-text);
  line-height: 1.4;
}

/* Thank-you panel shown after successful form submission */
.cg-fcta-thankyou[hidden] { display: none; }
.cg-fcta-thankyou {
  padding:        4px 0 8px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            14px;
  text-align:     center;
}
.cg-fcta-thankyou-msg {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin:      0;
  font-size:   .92rem;
  font-weight: 600;
  color:       var(--cg-primary);
  line-height: 1.4;
}
.cg-fcta-thankyou-msg svg {
  flex-shrink: 0;
  color:       var(--cg-primary);
}
.cg-fcta-new-msg {
  background:    transparent;
  border:        1.5px solid var(--cg-border);
  border-radius: var(--cg-radius);
  padding:       7px 16px;
  font-size:     .82rem;
  font-weight:   600;
  color:         var(--cg-text-muted);
  cursor:        pointer;
  transition:    border-color var(--cg-transition), color var(--cg-transition), background var(--cg-transition);
}
.cg-fcta-new-msg:hover {
  border-color: var(--cg-primary);
  color:        var(--cg-primary);
  background:   var(--cg-primary-pale);
}


/* ==========================================================
   TASK #90 – Kreatives Formular-Redesign mit Animationen
   ========================================================== */

/* ---------- Floating Label ---------- */
.cg-float-group {
  position:   relative;
  margin-top: 6px;
}

.cg-float-group input:not([type="checkbox"]),
.cg-float-group select,
.cg-float-group textarea {
  width:         100%;
  padding:       34px 14px 10px;
  border:        1.5px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
  font-size:     14px;
  color:         var(--cg-text);
  background:    var(--cg-white);
  box-sizing:    border-box;
  transition:    border-color var(--cg-transition), box-shadow var(--cg-transition);
  font-family:   inherit;
  outline:       none;
}

.cg-float-group select {
  appearance:         none;
  -webkit-appearance: none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23083B2C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right 14px center;
  padding-right:      40px;
  cursor:             pointer;
}

.cg-float-group textarea {
  resize:     vertical;
  min-height: 100px;
  padding-top: 36px;
}

.cg-float-group input:focus,
.cg-float-group select:focus,
.cg-float-group textarea:focus {
  border-color: var(--cg-primary);
  box-shadow:   0 0 0 3px rgba(8,59,44,0.12);
}

.cg-float-group > label {
  position:       absolute;
  left:           14px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      14px;
  font-weight:    400;
  color:          var(--cg-text-muted);
  pointer-events: none;
  transition:     top 0.18s ease, font-size 0.18s ease, color 0.18s ease, font-weight 0.18s ease;
  background:     transparent;
  line-height:    1;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  max-width:      calc(100% - 44px);
}

.cg-float-group--textarea > label {
  top: 18px;
  transform: none;
}

/* Label floated up: input has value (not placeholder-shown) or is focused */
.cg-float-group input:focus + label,
.cg-float-group input:not(:placeholder-shown) + label,
.cg-float-group textarea:focus + label,
.cg-float-group textarea:not(:placeholder-shown) + label {
  top:         9px;
  transform:   none;
  font-size:   10px;
  font-weight: 700;
  color:       var(--cg-primary);
}

/* Select: JS adds .cg-has-value class to parent when value selected */
.cg-float-group--select > label {
  top:       50%;
  transform: translateY(-50%);
}
.cg-float-group--select.cg-has-value > label,
.cg-float-group--select select:focus + label {
  top:         9px;
  transform:   none;
  font-size:   10px;
  font-weight: 700;
  color:       var(--cg-primary);
}

/* ---------- Stagger scroll animation ---------- */
@keyframes cgFieldIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cg-float-group,
.cg-datenschutz-wrap,
.cg-form-progress-wrap {
  opacity: 0;
  transform: translateY(16px);
}

.cg-float-group.cg-field-visible,
.cg-datenschutz-wrap.cg-field-visible,
.cg-form-progress-wrap.cg-field-visible {
  animation: cgFieldIn 0.38s ease both;
  animation-delay: calc(var(--cg-i, 0) * 55ms);
}

/* Fieldset children: each .cg-float-group inside fieldset also uses --cg-i */
.casagateway-fieldset .cg-float-group {
  opacity: 0;
  transform: translateY(16px);
}
.casagateway-fieldset .cg-float-group.cg-field-visible {
  animation: cgFieldIn 0.38s ease both;
  animation-delay: calc(var(--cg-i, 0) * 55ms);
}

/* ---------- Animated Checkbox ---------- */
.cg-datenschutz-cb {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.cg-datenschutz-label {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
  font-size:   13px;
  color:       var(--cg-text);
  line-height: 1.5;
}

.cg-cb-box {
  flex-shrink:   0;
  width:         20px;
  height:        20px;
  border:        2px solid var(--cg-border);
  border-radius: 5px;
  background:    var(--cg-white);
  margin-top:    1px;
  transition:    border-color 0.2s ease, background 0.2s ease;
  position:      relative;
  display:       inline-block;
}

.cg-cb-box::after {
  content:    '';
  position:   absolute;
  left:       5px;
  top:        2px;
  width:      7px;
  height:     11px;
  border:     2.5px solid #fff;
  border-top:   none;
  border-left:  none;
  transform:    rotate(45deg) scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1) 0.03s;
}

.cg-datenschutz-cb:checked + .cg-datenschutz-label .cg-cb-box {
  background:    var(--cg-primary);
  border-color:  var(--cg-primary);
}

.cg-datenschutz-cb:checked + .cg-datenschutz-label .cg-cb-box::after {
  transform: rotate(45deg) scaleY(1);
}

.cg-datenschutz-cb:focus + .cg-datenschutz-label .cg-cb-box {
  box-shadow: 0 0 0 3px rgba(8,59,44,0.15);
}

.cg-datenschutz-cb.cg-invalid + .cg-datenschutz-label .cg-cb-box {
  border-color: var(--cg-error);
  box-shadow:   0 0 0 2px rgba(220,38,38,0.2);
}

/* ---------- Progress bar (contact form) ---------- */
.cg-form-progress-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.cg-form-progress-bar {
  flex:          1;
  height:        5px;
  background:    var(--cg-border);
  border-radius: 10px;
  overflow:      hidden;
}

.cg-form-progress-fill {
  height:        100%;
  width:         0%;
  background:    linear-gradient(90deg, var(--cg-primary), var(--cg-gold));
  border-radius: 10px;
  transition:    width 0.35s ease;
}

.cg-form-progress-label {
  font-size:  11px;
  color:      var(--cg-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Objektart Icon-Cards (Valuation) ---------- */
.casagateway-obj-type-legend {
  font-size:   13px;
  font-weight: 600;
  color:       var(--cg-text);
  margin-bottom: 8px;
  display:     block;
}
.casagateway-obj-type-legend .required { color: var(--cg-error); }

.cg-obj-cards {
  display:   grid;
  grid-template-columns: repeat(3, 1fr);
  gap:       10px;
}

.cg-obj-card {
  cursor:   pointer;
  display:  block;
}

.cg-obj-card input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.cg-obj-card-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  padding:        16px 10px;
  border:         2px solid var(--cg-border);
  border-radius:  var(--cg-radius);
  background:     var(--cg-white);
  font-size:      13px;
  font-weight:    600;
  color:          var(--cg-text-muted);
  transition:     border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  text-align:     center;
  line-height:    1.2;
}

.cg-obj-card-inner svg {
  color:      var(--cg-text-muted);
  transition: color 0.2s ease;
}

.cg-obj-card:hover .cg-obj-card-inner {
  border-color: var(--cg-primary);
  background:   var(--cg-primary-pale);
  color:        var(--cg-primary);
}

.cg-obj-card:hover .cg-obj-card-inner svg {
  color: var(--cg-primary);
}

.cg-obj-card input[type="radio"]:checked + .cg-obj-card-inner {
  border-color: var(--cg-primary);
  background:   var(--cg-primary);
  color:        #fff;
  box-shadow:   0 4px 14px rgba(8,59,44,0.25);
}

.cg-obj-card input[type="radio"]:checked + .cg-obj-card-inner svg {
  color: #fff;
}

.cg-obj-card input[type="radio"]:focus + .cg-obj-card-inner {
  box-shadow: 0 0 0 3px rgba(8,59,44,0.15);
}

@media (max-width: 400px) {
  .cg-obj-cards { grid-template-columns: 1fr; }
  .cg-obj-card-inner { flex-direction: row; padding: 12px 16px; }
}

/* ---------- Angebotsart Pill Toggle (Searchprofile) ---------- */
.cg-pill-toggle-group {
  display:       inline-flex;
  border:        2px solid var(--cg-border);
  border-radius: 10px;
  overflow:      hidden;
  background:    var(--cg-bg);
}

.cg-pill-toggle-item {
  cursor:   pointer;
  flex:     1;
  display:  block;
}

.cg-pill-toggle-item input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.cg-pill-toggle-item span {
  display:         block;
  padding:         10px 28px;
  font-size:       14px;
  font-weight:     600;
  color:           var(--cg-text-muted);
  text-align:      center;
  transition:      background 0.2s ease, color 0.2s ease;
  white-space:     nowrap;
}

.cg-pill-toggle-item:hover span {
  background: var(--cg-primary-pale);
  color:      var(--cg-primary);
}

.cg-pill-toggle-item input[type="radio"]:checked + span {
  background:  var(--cg-primary);
  color:       #fff;
}

.cg-pill-toggle-item input[type="radio"]:focus + span {
  box-shadow: inset 0 0 0 2px var(--cg-gold);
}

/* ---------- Tax slider fill ---------- */
.cg-slider-wrap {
  position: relative;
  padding:  4px 0;
}

.cg-tax-slider {
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
  height:             6px;
  border-radius:      3px;
  background:         linear-gradient(
    to right,
    var(--cg-primary) 0%,
    var(--cg-primary) var(--slider-pct, 31%),
    var(--cg-border)  var(--slider-pct, 31%),
    var(--cg-border)  100%
  );
  outline:            none;
  cursor:             pointer;
  border:             none;
}

.cg-tax-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:         none;
  width:              20px;
  height:             20px;
  border-radius:      50%;
  background:         var(--cg-primary);
  border:             3px solid #fff;
  box-shadow:         0 1px 6px rgba(8,59,44,0.35);
  cursor:             pointer;
  transition:         transform 0.15s ease, box-shadow 0.15s ease;
}

.cg-tax-slider::-webkit-slider-thumb:hover,
.cg-tax-slider:focus::-webkit-slider-thumb {
  transform:  scale(1.2);
  box-shadow: 0 2px 10px rgba(8,59,44,0.4);
}

.cg-tax-slider::-moz-range-thumb {
  width:        20px;
  height:       20px;
  border-radius: 50%;
  background:   var(--cg-primary);
  border:       3px solid #fff;
  box-shadow:   0 1px 6px rgba(8,59,44,0.35);
  cursor:       pointer;
}

/* ---------- Tax result slide-down ---------- */
@keyframes cgSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cg-tax-result.cg-result-animating {
  animation: cgSlideDown 0.35s ease both;
}

/* ---------- Ripple button effect ---------- */
.casagateway-btn {
  position: relative;
  overflow: hidden;
}

.cg-ripple {
  position:      absolute;
  border-radius: 50%;
  background:    rgba(255,255,255,0.35);
  transform:     scale(0);
  pointer-events: none;
  animation:     cgRipple 0.55s linear;
}

@keyframes cgRipple {
  to { transform: scale(4); opacity: 0; }
}

/* ---------- Submit button: spinner + success state ---------- */
@keyframes cgSpin {
  to { transform: rotate(360deg); }
}

.casagateway-btn-loading {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
}

.cg-btn-spinner {
  display:       inline-block;
  width:         16px;
  height:        16px;
  border:        2.5px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     cgSpin 0.7s linear infinite;
  flex-shrink:   0;
}

/* Success state: green background + checkmark fade-in */
.casagateway-btn.cg-btn-success {
  background:  #16a34a !important;
  color:       #fff !important;
  box-shadow:  0 4px 14px rgba(22,163,74,0.35) !important;
  transform:   none !important;
  transition:  background 0.3s ease, box-shadow 0.3s ease !important;
  pointer-events: none;
}

.casagateway-btn.cg-btn-success .casagateway-btn-text::before {
  content:      '✓ ';
  font-weight:  700;
}

/* ==========================================================
   Success Popup – Creative Two-Column Redesign (v1.5.49)
   ========================================================== */

@keyframes cgPopupSlideIn {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

@keyframes cgPopupFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Overlay */
.cg-success-popup {
  position:        fixed;
  inset:           0;
  z-index:         99999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}

.cg-success-popup[hidden] { display: none !important; }

.cg-success-popup__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(8, 30, 20, 0.72);
  backdrop-filter: blur(3px);
}

/* Box */
.cg-success-popup__box {
  position:      relative;
  z-index:       1;
  display:       grid;
  grid-template-columns: 240px 1fr;
  max-width:     760px;
  width:         100%;
  max-height:    90vh;
  overflow-y:    auto;
  border-radius: 20px;
  box-shadow:    0 24px 72px rgba(0,0,0,0.35);
  animation:     cgPopupSlideIn 0.42s cubic-bezier(0.22,1,0.36,1) both;
}

/* Close button */
.cg-success-popup__close {
  position:        absolute;
  top:             12px;
  right:           12px;
  z-index:         10;
  background:      var(--cg-primary, #083B2C);
  border:          none;
  border-radius:   50%;
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  color:           #fff;
  transition:      background 0.18s, transform 0.15s;
  box-shadow:      0 2px 8px rgba(0,0,0,0.18);
}

.cg-success-popup__close:hover,
.cg-success-popup__close:focus {
  background: #0f5c44;
  transform:  scale(1.1);
  outline:    none;
}

/* ---- Left panel (dark green branding) ---- */
.cg-popup-left {
  background:      var(--cg-primary, #083B2C);
  padding:         40px 28px 36px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  border-radius:   20px 0 0 20px;
}

.cg-popup-logo {
  max-width:    160px;
  height:       auto;
  margin-bottom: 28px;
  animation:    cgPopupFadeUp 0.5s 0.1s ease both;
}

/* Checkmark SVG */
.cg-popup-check-wrap {
  margin-bottom: 20px;
  animation:     cgPopupFadeUp 0.5s 0.2s ease both;
}

.cg-success-checkmark {
  width:  72px;
  height: 72px;
}

.cg-success-checkmark__circle {
  stroke-dasharray:  151;
  stroke-dashoffset: 151;
  animation:         cgCheckCircle 0.6s 0.3s ease forwards;
}

.cg-success-checkmark__check {
  stroke-dasharray:  30;
  stroke-dashoffset: 30;
  animation:         cgCheckMark 0.4s 0.85s ease forwards;
}

@keyframes cgCheckCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes cgCheckMark {
  to { stroke-dashoffset: 0; }
}

.cg-popup-title {
  font-size:     24px;
  font-weight:   800;
  color:         #fff;
  margin:        0 0 10px;
  line-height:   1.2;
  animation:     cgPopupFadeUp 0.5s 0.35s ease both;
}

.cg-popup-msg {
  font-size:     14px;
  color:         rgba(255,255,255,0.78);
  line-height:   1.55;
  margin:        0;
  animation:     cgPopupFadeUp 0.5s 0.45s ease both;
}

/* ---- Right panel (light) ---- */
.cg-popup-right {
  background:    #fff;
  padding:       36px 32px 32px;
  border-radius: 0 20px 20px 0;
  display:       flex;
  flex-direction: column;
  gap:           24px;
  overflow-y:    auto;
}

/* Next steps */
.cg-popup-steps__title {
  font-size:     13px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--cg-primary, #083B2C);
  margin:         0 0 14px;
  opacity:        0.7;
}

.cg-popup-steps__list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        12px;
  counter-reset: cg-step;
}

.cg-popup-step {
  display:     flex;
  align-items: center;
  gap:         12px;
  animation:   cgPopupFadeUp 0.45s ease both;
}

.cg-popup-step:nth-child(1) { animation-delay: 0.15s; }
.cg-popup-step:nth-child(2) { animation-delay: 0.25s; }
.cg-popup-step:nth-child(3) { animation-delay: 0.35s; }

.cg-popup-step__icon {
  flex-shrink:     0;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      var(--cg-primary-pale, #e8f0ec);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--cg-primary, #083B2C);
}

.cg-popup-step__text {
  font-size:   14px;
  color:       var(--cg-text, #1a1a1a);
  line-height: 1.4;
  font-weight: 500;
}

/* Blog cards */
.cg-popup-blog__title {
  font-size:     13px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--cg-primary, #083B2C);
  margin:         0 0 12px;
  opacity:        0.7;
}

.cg-popup-blog__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     10px;
}

.cg-popup-blog__card {
  display:         flex;
  flex-direction:  column;
  gap:             8px;
  text-decoration: none;
  border:          1.5px solid var(--cg-border, #e5e7eb);
  border-radius:   10px;
  overflow:        hidden;
  transition:      box-shadow 0.18s, border-color 0.18s;
  animation:       cgPopupFadeUp 0.45s 0.4s ease both;
}

.cg-popup-blog__card:hover {
  box-shadow:   0 4px 16px rgba(8,59,44,0.12);
  border-color: var(--cg-primary, #083B2C);
}

.cg-popup-blog__card-img {
  width:       100%;
  aspect-ratio: 16/9;
  object-fit:  cover;
  display:     block;
  background:  var(--cg-primary-pale, #e8f0ec);
}

.cg-popup-blog__card-img--placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--cg-primary, #083B2C);
  opacity:         0.45;
}

.cg-popup-blog__card-title {
  font-size:        13px;
  font-weight:      600;
  color:            var(--cg-text, #1a1a1a);
  line-height:      1.35;
  padding:          0 10px 10px;
  display:          -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:         hidden;
}

/* Social icons */
.cg-popup-social__label {
  font-size:     12px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--cg-text-muted, #6b7280);
  margin:         0 0 10px;
}

.cg-popup-social__icons {
  display: flex;
  gap:     10px;
}

.cg-popup-social__link {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-decoration: none;
  transition:      background 0.18s, color 0.18s, transform 0.18s;
  background:      var(--cg-primary-pale, #e8f0ec);
  color:           var(--cg-primary, #083B2C);
}

.cg-popup-social__link:hover {
  transform: translateY(-2px);
}

.cg-popup-social__link--instagram:hover {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
}

.cg-popup-social__link--facebook:hover {
  background: #1877f2;
  color:      #fff;
}

.cg-popup-social__link--linkedin:hover {
  background: #0a66c2;
  color:      #fff;
}

/* ---- Agent contact card (left panel) ---- */
.cg-popup-agent {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  margin-top:     auto;
  padding-top:    20px;
  width:          100%;
  box-sizing:     border-box;
  animation:      cgPopupFadeUp 0.5s 0.55s ease both;
}

.cg-popup-agent__divider {
  width:         40px;
  height:        1px;
  background:    rgba(255,255,255,0.25);
  margin-bottom: 14px;
}

.cg-popup-agent__label {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          rgba(255,255,255,0.5);
  margin:         0 0 10px;
}

.cg-popup-agent__photo {
  width:         60px !important;
  height:        60px !important;
  max-width:     60px !important;
  min-width:     60px !important;
  border-radius: 50% !important;
  object-fit:    cover !important;
  display:       block !important;
  margin:        0 auto 8px !important;
  border:        2px solid #d4a843 !important;
}

.cg-popup-agent__name {
  font-size:   13px;
  font-weight: 700;
  color:       #ffffff;
  margin:      0 0 8px;
  line-height: 1.2;
}

.cg-popup-agent__phone {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      #d4a843;
  color:           #083B2C;
  font-size:       13px;
  font-weight:     700;
  text-decoration: none;
  border-radius:   20px;
  padding:         7px 16px;
  transition:      background 0.18s, transform 0.15s;
  white-space:     nowrap;
}

.cg-popup-agent__phone:hover {
  background: #e8bc55;
  transform:  translateY(-1px);
  color:      #083B2C;
}

/* ---- Responsive: single column on mobile ---- */
@media (max-width: 620px) {
  .cg-success-popup__box {
    grid-template-columns: 1fr;
    max-height:            92vh;
    border-radius:         16px;
  }

  .cg-popup-left {
    padding:       28px 24px 24px;
    border-radius: 16px 16px 0 0;
  }

  .cg-popup-logo {
    max-width:    110px;
    margin-bottom: 16px;
  }

  .cg-success-checkmark {
    width:  56px;
    height: 56px;
  }

  .cg-popup-title    { font-size: 20px; }
  .cg-popup-msg      { font-size: 13px; }

  .cg-popup-right {
    padding:       24px 20px 20px;
    border-radius: 0 0 16px 16px;
    gap:           18px;
  }

  .cg-popup-blog__cards {
    grid-template-columns: 1fr;
  }

  .cg-success-popup__close {
    background: rgba(0,0,0,0.25);
  }
}



/* ==========================================================
   Referral Form v1.5.52 — Hero + List-Options redesign
   ========================================================== */

/* Wizard wrap — always visible */
.cg-ref-wizard-wrap[hidden] { display: none !important; }

/* ── Option list (category & payment) ────────────────────── */
.cg-ref-options {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  4px;
}

.cg-ref-option {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     13px 16px;
  border:      1.5px solid var(--cg-border);
  border-radius: var(--cg-radius);
  cursor:      pointer;
  transition:  border-color var(--cg-transition), background var(--cg-transition), box-shadow var(--cg-transition);
  background:  var(--cg-white);
  user-select: none;
}

.cg-ref-option input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
  pointer-events: none;
}

.cg-ref-option:hover {
  border-color: var(--cg-primary);
  background:   #f0f7f4;
}

.cg-ref-option.selected {
  border-color: var(--cg-primary);
  background:   var(--cg-primary-pale, #e8f0ec);
  box-shadow:   0 0 0 3px rgba(8,59,44,0.07);
}

.cg-ref-option__icon {
  width:           42px;
  height:          42px;
  background:      rgba(8,59,44,0.07);
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background var(--cg-transition);
}

.cg-ref-option.selected .cg-ref-option__icon {
  background: rgba(8,59,44,0.13);
}

.cg-ref-option__body {
  flex:        1;
  min-width:   0;
  display:     flex;
  flex-direction: column;
  gap:         2px;
}

.cg-ref-option__title {
  font-size:   14px;
  font-weight: 600;
  color:       var(--cg-text);
  line-height: 1.3;
}

.cg-ref-option__desc {
  font-size:   12px;
  color:       var(--cg-text-muted);
  line-height: 1.5;
}

.cg-ref-option__badge {
  font-size:     10.5px;
  font-weight:   600;
  color:         var(--cg-primary);
  background:    var(--cg-primary-pale, #e8f0ec);
  padding:       2px 10px;
  border-radius: 20px;
  white-space:   nowrap;
  flex-shrink:   0;
}

.cg-ref-option__radio {
  width:       20px;
  height:      20px;
  border:      2px solid var(--cg-border);
  border-radius: 50%;
  flex-shrink: 0;
  transition:  border-color var(--cg-transition), background var(--cg-transition), box-shadow var(--cg-transition);
}

.cg-ref-option.selected .cg-ref-option__radio {
  border-color: var(--cg-primary);
  background:   var(--cg-primary);
  box-shadow:   inset 0 0 0 4px var(--cg-white);
}

/* ── Payment options (2-col variant) ────────────────────── */
.cg-ref-pay-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     12px;
  margin-bottom: 20px;
}

.cg-ref-pay-option {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  padding:        24px 18px 20px;
  border:         2px solid var(--cg-border);
  border-radius:  var(--cg-radius);
  cursor:         pointer;
  transition:     border-color var(--cg-transition), background var(--cg-transition), box-shadow var(--cg-transition);
  background:     var(--cg-white);
  text-align:     center;
  user-select:    none;
  position:       relative;
}

.cg-ref-pay-option input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.cg-ref-pay-option:hover {
  border-color: var(--cg-primary);
  box-shadow:   var(--cg-shadow-hover);
}

.cg-ref-pay-option.selected {
  border-color: var(--cg-primary);
  background:   var(--cg-primary-pale, #e8f0ec);
  box-shadow:   0 0 0 3px rgba(8,59,44,0.08);
}

.cg-ref-pay-option__logo {
  height:  52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cg-ref-pay-img {
  display:    block;
  max-height: 44px;
  width:      auto;
  object-fit: contain;
}

.cg-ref-pay-img--bank {
  max-height: 42px;
  filter: brightness(0) saturate(100%) invert(15%) sepia(40%) saturate(1200%) hue-rotate(120deg) brightness(85%);
}

.cg-ref-pay-img--twint {
  max-height: 42px;
  border-radius: 8px;
}

.cg-ref-pay-option__body {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.cg-ref-pay-option__title {
  font-size:   15px;
  font-weight: 700;
  color:       var(--cg-text);
}

.cg-ref-pay-option__desc {
  font-size: 12px;
  color:     var(--cg-text-muted);
}

.cg-ref-pay-option__radio {
  width:        20px;
  height:       20px;
  border:       2px solid var(--cg-border);
  border-radius: 50%;
  transition:   border-color var(--cg-transition), background var(--cg-transition), box-shadow var(--cg-transition);
}

.cg-ref-pay-option.selected .cg-ref-pay-option__radio {
  border-color: var(--cg-primary);
  background:   var(--cg-primary);
  box-shadow:   inset 0 0 0 4px var(--cg-white);
}

/* ── Payment sub-form ────────────────────────────────────── */
.cg-ref-pay-detail[hidden] { display: none !important; }

.cg-ref-pay-detail-inner {
  border:        1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  padding:       20px 20px 8px;
  background:    var(--cg-bg);
  margin-bottom: 16px;
  animation:     cgRefIn 0.25s ease both;
}

.cg-ref-pay-detail-label {
  font-size:      11.5px;
  font-weight:    700;
  color:          var(--cg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin:         0 0 16px;
}

/* ── Panel slide animations ──────────────────────────────── */
.cg-ref-panel[hidden] { display: none !important; }

@keyframes cgRefIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cgRefInBack {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cg-ref-panel.cg-ref-slide-fwd  { animation: cgRefIn     0.3s cubic-bezier(0.22,1,0.36,1) both; }
.cg-ref-panel.cg-ref-slide-back { animation: cgRefInBack 0.3s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Field rows ──────────────────────────────────────────── */
.cg-ref-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
}
.cg-ref-row--3-1 { grid-template-columns: 3fr 1fr; }
.cg-ref-row--1-3 { grid-template-columns: 1fr 3fr; }
.cg-ref-nav--right { justify-content: flex-end; }

/* ── Privacy checkbox ────────────────────────────────────── */
.cg-ref-privacy-check {
  display:     flex;
  gap:         11px;
  align-items: flex-start;
  margin:      8px 0 0;
  cursor:      pointer;
}
.cg-ref-privacy-check input[type="checkbox"] {
  width:       17px;
  height:      17px;
  margin-top:  3px;
  flex-shrink: 0;
  accent-color: var(--cg-primary);
  cursor:      pointer;
}
.cg-ref-privacy-check span {
  font-size:   13px;
  color:       var(--cg-text-muted);
  line-height: 1.6;
}
.cg-ref-privacy-check a { color: var(--cg-primary); text-decoration: underline; }

/* ── Error notice ────────────────────────────────────────── */
.cg-ref-notice {
  background:    #fef2f2;
  border:        1px solid #fecaca;
  border-radius: var(--cg-radius-sm);
  padding:       11px 15px;
  font-size:     13.5px;
  color:         var(--cg-error);
  margin-bottom: 14px;
}
.cg-ref-notice[hidden] { display: none !important; }

/* ── Info box ────────────────────────────────────────────── */
.cg-ref-info-box {
  background:    var(--cg-white);
  border:        1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  padding:       20px;
  box-shadow:    var(--cg-shadow);
}
.cg-ref-info-box__title {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   13px;
  font-weight: 700;
  color:       var(--cg-primary);
  margin:      0 0 12px;
}
.cg-ref-info-box__list {
  margin:  0;
  padding: 0 0 0 16px;
  font-size:   12.5px;
  color:       var(--cg-text-muted);
  line-height: 2;
}

/* ── Privacy block below form ────────────────────────────── */
.cg-ref-privacy-block {
  display:       flex;
  gap:           12px;
  align-items:   flex-start;
  margin-top:    16px;
  padding:       16px 20px;
  background:    var(--cg-bg);
  border:        1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  font-size:     12.5px;
  color:         var(--cg-text-muted);
  line-height:   1.65;
}
.cg-ref-privacy-block svg    { flex-shrink: 0; color: var(--cg-primary); margin-top: 1px; }
.cg-ref-privacy-block strong { display: block; color: var(--cg-text); margin-bottom: 3px; font-size: 13px; }
.cg-ref-privacy-block a      { color: var(--cg-primary); text-decoration: underline; }

/* ── "Weitere Empfehlung" button in popup ────────────────── */
.cg-ref-another-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    var(--cg-primary);
  color:         #fff !important;
  font-size:     13.5px;
  font-weight:   700;
  padding:       11px 20px;
  border-radius: var(--cg-radius);
  border:        none;
  cursor:        pointer;
  margin-top:    18px;
  font-family:   inherit;
  transition:    background var(--cg-transition), transform var(--cg-transition);
  box-shadow:    none;
  text-transform: none;
  letter-spacing: 0;
}
.cg-ref-another-btn:hover {
  background:  #0a4f3a;
  transform:   translateY(-1px);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
  .cg-ref-pay-options     { grid-template-columns: 1fr; }
  .cg-ref-row,
  .cg-ref-row--3-1,
  .cg-ref-row--1-3        { grid-template-columns: 1fr; }
  .cg-ref-option__badge   { display: none; }
}

/* ============================================================
   INDEXABLE OBJECT DETAIL PAGE
   ============================================================ */
body.cg-detail-page {
  background: #f5f7f4;
}

body.cg-detail-page .cg-detail-page-wrap,
body.cg-detail-page .cg-detail-page-wrap * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.cg-detail-page-wrap {
  width: 100%;
  padding: 34px 24px 88px;
  background: #f5f7f4;
  color: var(--cg-text);
}

.cg-breadcrumbs,
.cg-detail-page-container {
  width: min(100%, 1280px);
  margin-inline: auto;
}

.cg-breadcrumbs {
  margin-bottom: 22px;
}

.cg-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #66726d;
  font-size: 13px;
  line-height: 1.45;
}

.cg-breadcrumbs__link {
  color: var(--cg-primary) !important;
  text-decoration: none !important;
  font-weight: 600;
}

.cg-breadcrumbs__link:hover,
.cg-breadcrumbs__link:focus-visible {
  text-decoration: underline !important;
}

.cg-breadcrumbs__item--current {
  color: #66726d;
}

.cg-detail-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 36px;
  align-items: start;
}

.cg-detail-page-gallery-col,
.cg-detail-page-content-col {
  min-width: 0;
}

body.cg-detail-page .cg-detail-gallery {
  overflow: hidden;
  background: #e6ece8;
  border: 1px solid rgba(8, 59, 44, .12);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(8, 59, 44, .08);
}

body.cg-detail-page .cg-detail-gallery-main {
  aspect-ratio: 4 / 3;
  background: #e6ece8;
}

body.cg-detail-page #cg-detail-main-img,
body.cg-detail-page .cg-detail-page-main-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #e6ece8 !important;
}

body.cg-detail-page .cg-detail-gallery-thumbs {
  gap: 8px;
  padding: 10px;
  background: #ffffff;
  border-top: 1px solid rgba(8, 59, 44, .1);
}

body.cg-detail-page .cg-gallery-thumb {
  width: 86px;
  height: 62px;
  border-radius: 4px;
  border-color: transparent;
}

body.cg-detail-page .cg-gallery-thumb.active {
  border-color: var(--cg-gold);
}

.cg-detail-page-content-col {
  padding: 4px 0 0;
}

body.cg-detail-page .cg-detail-body {
  padding: 0;
}

body.cg-detail-page .cg-detail-header {
  margin-bottom: 22px;
}

body.cg-detail-page .cg-detail-title {
  margin: 0 0 10px !important;
  color: var(--cg-primary) !important;
  font-family: inherit;
  font-size: 42px !important;
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

body.cg-detail-page .cg-detail-location {
  font-size: 15px;
  line-height: 1.55;
  color: #66726d;
}

body.cg-detail-page .cg-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid rgba(8, 59, 44, .16);
  border-radius: 999px;
  background: #e8f0ec;
  color: var(--cg-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

body.cg-detail-page .cg-detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 28px;
}

body.cg-detail-page .cg-detail-fact {
  min-width: 0;
  padding: 13px 15px;
  border-color: rgba(8, 59, 44, .12);
  border-radius: 6px;
  background: #ffffff;
}

body.cg-detail-page .cg-detail-fact-label {
  letter-spacing: 0;
}

body.cg-detail-page .cg-detail-fact-value {
  font-size: 16px;
}

body.cg-detail-page .cg-detail-description,
body.cg-detail-page .cg-detail-table-wrap,
body.cg-detail-page .cg-detail-features,
body.cg-detail-page .cg-detail-macro-location,
body.cg-detail-page .cg-detail-extras {
  margin: 0;
  padding: 24px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(8, 59, 44, .16);
  border-radius: 0;
}

body.cg-detail-page .cg-section-label {
  margin: 0 0 14px;
  color: var(--cg-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

body.cg-detail-page .cg-detail-description-text {
  color: #303b37;
  font-size: 15px;
  line-height: 1.72;
}

body.cg-detail-page .cg-detail-description-text > :first-child {
  margin-top: 0;
}

body.cg-detail-page .cg-detail-description-text > :last-child {
  margin-bottom: 0;
}

body.cg-detail-page .cg-detail-description-text h2,
body.cg-detail-page .cg-detail-description-text h3,
body.cg-detail-page .cg-detail-description-text h4 {
  margin: 22px 0 10px;
  color: var(--cg-primary);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

body.cg-detail-page .cg-detail-description-text p {
  margin: 0 0 14px;
}

body.cg-detail-page .cg-detail-table th,
body.cg-detail-page .cg-detail-table td {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(8, 59, 44, .1);
  color: #303b37;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

body.cg-detail-page .cg-detail-table th {
  width: 45%;
  padding-right: 16px;
  color: #66726d;
  font-weight: 500;
}

.cg-detail-contact-cta,
.cg-detail-sold-notice {
  margin-top: 8px;
  padding: 24px;
  border: 1px solid rgba(8, 59, 44, .14);
  border-radius: 6px;
  background: var(--cg-primary);
  color: #ffffff;
}

.cg-detail-contact-title {
  margin: 0 0 8px;
  color: #ffffff !important;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.cg-detail-contact-cta .cg-detail-contact-intro,
.cg-detail-sold-notice .cg-sold-notice-text {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.6;
}

.cg-detail-contact-link,
.cg-detail-permalink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
}

.cg-detail-contact-link {
  background: #ffffff;
  color: var(--cg-primary) !important;
}

.cg-detail-permalink {
  margin-top: 14px;
  min-height: 36px;
  padding: 8px 13px;
  color: var(--cg-primary) !important;
}

.cg-detail-contact-link:hover,
.cg-detail-contact-link:focus-visible,
.cg-detail-permalink:hover,
.cg-detail-permalink:focus-visible {
  background: var(--cg-gold);
  color: var(--cg-primary) !important;
}

.cg-detail-sold-banner,
.cg-detail-reserved-banner {
  width: min(100%, 1280px);
  margin: 0 auto 24px;
  border-radius: 6px;
}

.cg-detail-gone {
  min-height: 58vh;
  display: grid;
  align-items: center;
}

.cg-gone-box {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
}

.cg-gone-icon {
  color: var(--cg-primary);
}

.cg-gone-title {
  margin: 18px 0 10px;
  color: var(--cg-primary);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.15;
}

.cg-gone-text {
  margin: 0 auto 24px;
  color: #66726d;
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .cg-detail-page-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  body.cg-detail-page .cg-detail-title {
    font-size: 36px !important;
  }
}

@media (max-width: 600px) {
  .cg-detail-page-wrap {
    padding: 22px 16px 60px;
  }

  .cg-breadcrumbs {
    margin-bottom: 16px;
  }

  .cg-breadcrumbs__item--current {
    width: 100%;
  }

  body.cg-detail-page .cg-detail-gallery-main {
    aspect-ratio: 4 / 3;
  }

  body.cg-detail-page .cg-detail-title {
    font-size: 30px !important;
  }

  body.cg-detail-page .cg-detail-facts {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  body.cg-detail-page .cg-detail-fact {
    padding: 11px 12px;
  }

  body.cg-detail-page .cg-detail-fact-value {
    font-size: 14px;
  }

  body.cg-detail-page .cg-detail-description,
  body.cg-detail-page .cg-detail-table-wrap,
  body.cg-detail-page .cg-detail-features,
  body.cg-detail-page .cg-detail-macro-location,
  body.cg-detail-page .cg-detail-extras {
    padding: 20px 0;
  }

  .cg-detail-contact-cta,
  .cg-detail-sold-notice {
    padding: 20px;
  }

  .cg-gallery-arrow {
    width: 38px !important;
    height: 38px !important;
  }

  .cg-gone-title {
    font-size: 30px;
  }
}