/* FPOS Empfehlungen – Frontend CSS */

/* Steps */
.fpos-steps { display:flex; gap:0; margin-bottom:32px; }
.fpos-step { flex:1; display:flex; align-items:center; gap:8px; padding:12px 16px; background:#f0ebe0; font-size:13px; font-weight:600; color:#999; border-right:2px solid #e8e0d0; }
.fpos-step:last-child { border-right:none; }
.fpos-step span { width:26px; height:26px; border-radius:50%; background:#ccc; color:white; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.fpos-step.active { color:#1d4a2e; background:#e8f5e9; }
.fpos-step.active span { background:#1d4a2e; }

/* Packages */
.fpos-packages { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.fpos-pkg-card { border:2px solid #e8e0d0; border-radius:10px; overflow:hidden; cursor:pointer; transition:.2s; position:relative; }
.fpos-pkg-card input[type=radio] { display:none; }
.fpos-pkg-card.selected, .fpos-pkg-card:hover { border-color:#1d4a2e; box-shadow:0 4px 16px rgba(29,74,46,.12); }
.fpos-pkg-header { padding:16px; text-align:center; color:white; }
.fpos-pkg-basic  { background:#888; }
.fpos-pkg-standard { background:#c9652a; }
.fpos-pkg-premium  { background:#1d4a2e; }
.fpos-pkg-name  { display:block; font-size:16px; font-weight:700; }
.fpos-pkg-price { display:block; font-size:13px; margin-top:4px; opacity:.85; }
.fpos-pkg-features { list-style:none; padding:14px 16px; margin:0; font-size:13px; line-height:2; }
.fpos-pkg-recommended { position:relative; }
.fpos-recommended-badge { position:absolute; top:-1px; right:12px; background:#c9652a; color:white; font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 10px; border-radius:0 0 6px 6px; letter-spacing:.06em; }

/* Duration */
.fpos-duration-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.fpos-dur-card { border:2px solid #e8e0d0; border-radius:8px; padding:14px; cursor:pointer; transition:.2s; }
.fpos-dur-card input { display:none; }
.fpos-dur-card:has(input:checked), .fpos-dur-card:hover { border-color:#1d4a2e; background:#e8f5e9; }
.fpos-dur-label { display:block; font-weight:700; font-size:14px; margin-bottom:8px; }
.fpos-dur-label small { font-weight:400; color:#c9652a; font-size:11px; }
.fpos-dur-prices { font-size:12px; color:#666; }
.fpos-dur-std, .fpos-dur-prem { display:block; }
.fpos-price-summary { background:#e8f5e9; border-left:4px solid #1d4a2e; padding:12px 16px; border-radius:0 8px 8px 0; margin-top:16px; font-size:15px; }

/* Form */
.fpos-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fpos-field-full { grid-column:1/-1; }
.fpos-field label { display:block; font-size:13px; font-weight:600; color:#555; margin-bottom:5px; }
.fpos-field input, .fpos-field select, .fpos-field textarea {
  width:100%; padding:10px 14px; border:1.5px solid #e8e0d0; border-radius:7px;
  font-size:14px; font-family:inherit; transition:border-color .2s; box-sizing:border-box;
}
.fpos-field input:focus, .fpos-field select:focus, .fpos-field textarea:focus { outline:none; border-color:#1d4a2e; }
.fpos-field small { font-size:11.5px; color:#aaa; }

/* Payment methods */
.fpos-payment-methods { display:flex; gap:12px; flex-wrap:wrap; }
.fpos-pm-card { border:2px solid #e8e0d0; border-radius:8px; padding:14px 20px; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; transition:.2s; }
.fpos-pm-card input { display:none; }
.fpos-pm-card:has(input:checked), .fpos-pm-card:hover { border-color:#1d4a2e; background:#e8f5e9; }
.fpos-pm-icon { font-size:22px; }

/* Summary */
.fpos-summary-box { background:#faf7f2; border:1.5px solid #e8e0d0; border-radius:10px; overflow:hidden; margin-bottom:8px; }

/* Buttons */
.fpos-btn { background:#1d4a2e; color:white; border:none; padding:13px 28px; border-radius:7px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; transition:.2s; }
.fpos-btn:hover { background:#2e6b44; }
.fpos-btn:disabled { opacity:.5; cursor:not-allowed; }
.fpos-btn-outline { background:white; color:#1d4a2e; border:2px solid #1d4a2e; }
.fpos-btn-outline:hover { background:#e8f5e9; }

/* CTA */
.fpos-listing-cta { background:#e8f5e9; border-left:4px solid #1d4a2e; padding:12px 18px; border-radius:0 8px 8px 0; margin-bottom:24px; font-size:14px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.fpos-listing-cta a { color:#1d4a2e; font-weight:700; }

/* Category filter */
.fpos-cat-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.fpos-cat-btn { background:#f0ebe0; color:#5a5247; border-radius:20px; padding:6px 16px; font-size:13px; font-weight:600; text-decoration:none; transition:.2s; }
.fpos-cat-btn.active, .fpos-cat-btn:hover { background:#1d4a2e; color:white; }

/* Listing grid */
.fpos-listing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.fpos-listing-card { background:white; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06); position:relative; transition:.2s; }
.fpos-listing-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.1); transform:translateY(-2px); }
.fpos-listing-premium { border:2px solid #1d4a2e; }
.fpos-premium-badge { position:absolute; top:0; right:12px; background:#1d4a2e; color:white; font-size:10px; font-weight:700; padding:3px 10px; border-radius:0 0 6px 6px; }
.fpos-listing-thumb img { width:100%; height:160px; object-fit:cover; }
.fpos-listing-body { padding:16px; }
.fpos-listing-cat { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#c9652a; background:#faf7f2; padding:3px 9px; border-radius:4px; }
.fpos-listing-title { font-size:15px; font-weight:700; margin:8px 0 6px; line-height:1.35; }
.fpos-listing-title a { color:#1a1a1a; text-decoration:none; }
.fpos-listing-title a:hover { color:#1d4a2e; }
.fpos-listing-adr { font-size:12.5px; color:#888; margin-bottom:8px; }
.fpos-listing-excerpt { font-size:13px; color:#666; line-height:1.6; margin-bottom:12px; }
.fpos-listing-footer { display:flex; gap:8px; flex-wrap:wrap; }
.fpos-listing-btn { font-size:12.5px; font-weight:600; color:#1d4a2e; background:#e8f5e9; padding:6px 14px; border-radius:5px; text-decoration:none; transition:.2s; }
.fpos-listing-btn:hover { background:#1d4a2e; color:white; }
.fpos-listing-btn-outline { background:white; border:1.5px solid #1d4a2e; }

/* Mobile */
@media (max-width:768px) {
  .fpos-packages { grid-template-columns:1fr; }
  .fpos-duration-grid { grid-template-columns:1fr; }
  .fpos-form-grid { grid-template-columns:1fr; }
  .fpos-listing-grid { grid-template-columns:1fr 1fr; }
  .fpos-steps { flex-direction:column; gap:4px; }
}
@media (max-width:480px) {
  .fpos-listing-grid { grid-template-columns:1fr; }
  .fpos-steps span { display:none; }
}

/* Upload zones */
.fpos-upload-zone {
  border:2px dashed #e8e0d0; border-radius:10px; padding:20px 16px;
  text-align:center; cursor:pointer; transition:.2s; background:#faf7f2;
  position:relative; overflow:hidden;
}
.fpos-upload-zone:hover, .fpos-upload-zone.drag-over { border-color:#1d4a2e; background:#e8f5e9; }
.fpos-upload-icon { font-size:28px; margin-bottom:6px; }
.fpos-upload-text { font-size:13.5px; font-weight:600; color:#555; }
.fpos-upload-text u { color:#1d4a2e; }
.fpos-upload-hint { font-size:11.5px; color:#aaa; margin-top:3px; }
.fpos-gallery-previews { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:10px; }
.fpos-gallery-previews img { border:2px solid var(--stone,#e8e0d0); }
.fpos-badge-pkg { background:#1d4a2e; color:white; font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; margin-left:6px; vertical-align:middle; }

/* Renewal */
.fpos-renewal-wrap { max-width:680px; margin:0 auto; }
.fpos-renewal-header { margin-bottom:24px; }
.fpos-renewal-header h2 { color:#1d4a2e; margin-bottom:8px; }
.fpos-renewal-status { padding:10px 16px; border-radius:7px; font-size:13.5px; margin-top:12px; }
.fpos-renewal-status-ok   { background:#e8f5e9; color:#1d4a2e; border-left:4px solid #1d4a2e; }
.fpos-renewal-status-warn { background:#fff3cd; color:#996600; border-left:4px solid #e6a817; }
.fpos-renewal-status-expired { background:#fef2f2; color:#c00; border-left:4px solid #c00; }
.fpos-renewal-pkgs { display:flex; gap:12px; }
.fpos-renewal-pkg { flex:1; border:2px solid #e8e0d0; border-radius:10px; padding:14px 16px; cursor:pointer; transition:.2s; display:flex; align-items:center; gap:10px; }
.fpos-renewal-pkg input { display:none; }
.fpos-renewal-pkg.selected,.fpos-renewal-pkg:hover { border-color:#1d4a2e; background:#e8f5e9; }
.fpos-renewal-pkg-name { font-weight:700; font-size:15px; }
.fpos-renewal-upgrade-badge { background:#c9652a; color:white; font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; }
.fpos-renewal-durations { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.fpos-renewal-dur { border:2px solid #e8e0d0; border-radius:8px; padding:12px 14px; cursor:pointer; transition:.2s; }
.fpos-renewal-dur input { display:none; }
.fpos-renewal-dur.selected,.fpos-renewal-dur:hover { border-color:#1d4a2e; background:#e8f5e9; }
.fpos-renewal-dur-prices { font-size:11.5px; color:#888; margin-top:6px; }
.rd-std,.rd-prem { display:block; }
.fpos-renewal-summary { background:#e8f5e9; border-left:4px solid #1d4a2e; padding:12px 16px; border-radius:0 8px 8px 0; margin-top:18px; font-size:15px; }
@media (max-width:600px) {
  .fpos-renewal-pkgs { flex-direction:column; }
  .fpos-renewal-durations { grid-template-columns:1fr; }
}