/* ==========================================================================
   APF Frontend CSS – uses CSS custom properties set by Settings::output_custom_css
   ========================================================================== */

/* Fallback values (overridden by <style id="apf-dynamic-css">) */
:root {
  --apf-label-color:      #333333;
  --apf-label-size:       14px;
  --apf-desc-color:       #666666;
  --apf-desc-size:        13px;
  --apf-input-border:     #d0d0d0;
  --apf-input-focus:      #96588a;
  --apf-required-color:   #e53935;
  --apf-price-color:      #2e7d32;
  --apf-swatch-size:      60px;
  --apf-swatch-radius:    6px;
  --apf-swatch-sel-color: #96588a;
  --apf-swatch-sel-width: 3px;
}

/* ---- Wrapper ---- */
.apf-wrapper { margin:16px 0 20px; max-height: 100vh; overflow-y:scroll; }
.apf-group   { margin-bottom:22px; }
.apf-group-title { font-size:15px; font-weight:700; margin:0 0 14px; }

/* ---- Field ---- */
.apf-field { margin-bottom:16px; }

.apf-label {
    display:block;
    font-weight:600;
    font-size:var(--apf-label-size);
    color:var(--apf-label-color);
    margin-bottom:6px;
}
.apf-required { color:var(--apf-required-color); margin-left:2px; }
.apf-description { font-size:var(--apf-desc-size); color:var(--apf-desc-color); margin:0 0 6px; }
.apf-field-price { font-weight:600; color:var(--apf-price-color); font-size:13px; }
.apf-field-inner { display:block; }

/* ---- Inputs ---- */
.apf-input, .apf-textarea, .apf-select {
    width:100%;
    padding:9px 12px;
    border:1px solid var(--apf-input-border);
    border-radius:4px;
    font-size:14px;
    background:#fff;
    box-sizing:border-box;
    transition:border-color .18s, box-shadow .18s;
}
.apf-input:focus, .apf-textarea:focus, .apf-select:focus {
    border-color:var(--apf-input-focus);
    outline:none;
    box-shadow:0 0 0 2px color-mix(in srgb, var(--apf-input-focus) 18%, transparent);
}

/* ---- Radio / Checkbox ---- */
.apf-radio-group, .apf-checkbox-group { display:flex; flex-direction:column; gap:8px; }
.apf-radio-label, .apf-checkbox-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }

/* ---- Color picker ---- */
.apf-color { height:38px; width:60px; padding:2px 4px; border:1px solid var(--apf-input-border); border-radius:4px; cursor:pointer; }

/* ---- Heading ---- */
.apf-heading strong { font-size:16px; font-weight:700; color:var(--apf-label-color); }
.apf-heading .apf-description { margin-top:4px; }

/* ==========================================================================
   IMAGE SWATCHES
   ========================================================================== */
.apf-swatch-group {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.apf-swatch-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    cursor:pointer;
    outline:none;
}

.apf-swatch-img-wrap,
.apf-swatch-color-wrap {
    width:var(--apf-swatch-size);
    height:var(--apf-swatch-size);
    border-radius:var(--apf-swatch-radius);
    overflow:hidden;
    border:2px solid transparent;
    box-sizing:border-box;
    transition:border-color .15s, transform .1s, box-shadow .15s;
    position:relative;
}

.apf-swatch-img-wrap img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:opacity .15s;
}

.apf-swatch-item:hover .apf-swatch-img-wrap,
.apf-swatch-item:hover .apf-swatch-color-wrap {
    border-color:var(--apf-swatch-sel-color);
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.apf-swatch-item:focus .apf-swatch-img-wrap,
.apf-swatch-item:focus .apf-swatch-color-wrap {
    box-shadow:0 0 0 3px color-mix(in srgb, var(--apf-input-focus) 30%, transparent);
}

/* Selected state */
.apf-swatch-item.apf-swatch-selected .apf-swatch-img-wrap,
.apf-swatch-item.apf-swatch-selected .apf-swatch-color-wrap {
    border:var(--apf-swatch-sel-width) solid var(--apf-swatch-sel-color);
    box-shadow:0 0 0 1px var(--apf-swatch-sel-color);
}
/* Checkmark overlay */
.apf-swatch-item.apf-swatch-selected .apf-swatch-img-wrap::after,
.apf-swatch-item.apf-swatch-selected .apf-swatch-color-wrap::after {
    content:'✓';
    position:absolute;
    bottom:2px; right:3px;
    font-size:11px;
    color:#fff;
    text-shadow:0 0 3px rgba(0,0,0,.6);
    line-height:1;
}

.apf-swatch-label {
    font-size:12px;
    color:#555;
    text-align:center;
    max-width:var(--apf-swatch-size);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.apf-swatch-price { font-size:11px; color:var(--apf-price-color); font-weight:600; }

/* ---- Price summary badge ---- */
#apf-price-summary {
    display:inline-block;
    background:#f3e5f5;
    color:#4a148c;
    border:1px solid #ce93d8;
    border-radius:4px;
    padding:6px 14px;
    font-size:13px;
    margin:8px 0 12px;
}

/* ==========================================================================
   NUMBER FIELD IMPROVEMENTS
   ========================================================================== */
.apf-number-wrap {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.apf-number-wrap .apf-input { flex:1; min-width:80px; }
.apf-num-unit  { font-size:14px; color:#555; font-weight:500; white-space:nowrap; }
.apf-num-bound { font-size:12px; color:#888; white-space:nowrap; }

.apf-num-error {
    display:none; width:100%; flex-basis:100%;
    color:#e53935; font-size:12px; margin-top:4px;
    background:#fdecea; border-radius:3px; padding:4px 8px;
}
.apf-input.apf-input-error {
    border-color:#e53935 !important;
    box-shadow:0 0 0 2px rgba(229,57,53,.18) !important;
}

/* ==========================================================================
   FORMULA FIELD
   ========================================================================== */
.apf-field-type-formula .apf-field-inner { display:block; }

.apf-formula-display {
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
    padding:10px 14px;
    background:#f4f7fb;
    border:1px solid #d4dde9;
    border-radius:5px;
    min-height:42px;
}

.apf-formula-label {
    font-size:13px;
    color:#555;
    flex-shrink:0;
}

.apf-formula-result {
    font-size:20px;
    font-weight:700;
    color:#1a237e;
    letter-spacing:-.02em;
    transition:color .2s;
}
.apf-formula-result.apf-formula-updating { color:#90a4ae; }

.apf-formula-unit {
    font-size:14px;
    color:#555;
    font-weight:500;
}

.apf-formula-price-badge {
    margin-left:auto;
    font-size:13px;
    font-weight:600;
    color:var(--apf-price-color);
    background:rgba(46,125,50,.08);
    border:1px solid rgba(46,125,50,.25);
    border-radius:4px;
    padding:2px 8px;
}

.apf-formula-vars-hint {
    font-size:12px; color:#888; margin:4px 0 0; font-style:italic;
}

/* ── v1.2.0 additions ──────────────────────────────────────────────────── */
.apf-formula-price-badge {
    display: inline-block;
    margin-left: 8px;
    font-weight: 600;
    color: #059669;
    font-size: 0.95em;
}
#apf-price-summary {
    margin: 10px 0;
    padding: 8px 14px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
    font-size: 1em;
}
#apf-price-summary strong {
    color: #059669;
}
.apf-formula-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 0.95em;
}
.apf-formula-label {
    color: #6b7280;
    font-size: 0.9em;
}
.apf-formula-result {
    font-weight: 700;
    color: #111827;
}
.apf-formula-unit {
    color: #6b7280;
    font-size: 0.9em;
}


/* ==========================================================================
   Accordion steps for configurator (kroky sa dajú zbaliť/rozbaliť)
   ========================================================================== */
.apf-field.apf-accordion-item {
  margin-bottom: 10px;
  border: 1px solid var(--apf-input-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.apf-field.apf-accordion-item > .apf-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  background: #fafafa;
  transition: background .15s ease;
}

.apf-field.apf-accordion-item > .apf-accordion-header:hover {
  background: #f2f2f2;
}

.apf-field.apf-accordion-item.apf-accordion-open > .apf-accordion-header {
  background: #fff;
  border-bottom: 1px solid var(--apf-input-border);
}

.apf-accordion-summary {
  flex: 1 1 auto;
  text-align: right;
  font-weight: 400;
  font-size: 13px;
  color: var(--apf-input-focus);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 4px;
}

.apf-accordion-icon {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  color: #888;
  transition: transform .2s ease;
}

.apf-accordion-icon::before {
  content: "\25B8";
}

.apf-field.apf-accordion-item.apf-accordion-open > .apf-accordion-header .apf-accordion-icon::before {
  content: "\25BE";
}

.apf-field.apf-accordion-item > .apf-accordion-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 14px;
  transition: max-height .3s ease, padding .3s ease;
}

.apf-field.apf-accordion-item.apf-accordion-open > .apf-accordion-body {
  max-height: 3000px;
  padding: 14px;
}