/* =====================================================
   Salon Pricing Table – Frontend Styles v1.1.1
   
   SPECIFICITY STRATEGY:
   - Layout/structure rules: normal specificity
   - Color/typography defaults: wrapped in :where() = 0 specificity
     so Elementor's generated CSS (specificity 0,1,0+) always wins
===================================================== */

/* ── Base wrapper ────────────────────────────────── */
.spt-table { font-family: inherit; box-sizing: border-box; }
.spt-table *, .spt-table *::before, .spt-table *::after { box-sizing: border-box; }

/* ── Header ──────────────────────────────────────── */
.spt-header { text-align: center; margin-bottom: 20px; }
.spt-header-image { margin-bottom: 14px; }
.spt-header-image img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; }
.spt-header-icon { margin-bottom: 8px; }
.spt-header-icon i, .spt-header-icon svg { font-size: 36px; }
.spt-header-title { margin: 0 0 6px; font-size: 1.6em; font-weight: 700; line-height: 1.2; }
.spt-header-subtitle { margin: 0; font-size: 0.85em; }

/* ── Column header row ───────────────────────────── */
.spt-col-header-row {
    display: flex; align-items: center;
    padding: 0 4px 6px; margin-bottom: 2px;
    border-bottom: 2px solid #eee;
}
.spt-col-header-row--no-border { border-bottom: none !important; }
.spt-col-header-spacer { flex: 1; }
.spt-col-header-cell {
    width: 64px; min-width: 40px; text-align: center;
    font-size: 0.78em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    flex-shrink: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* Items container */
.spt-items { display: flex; flex-direction: column; row-gap: 0; }

/* ═══════════════════════════════════════════════════
   SECTION SEPARATORS — structure only
═══════════════════════════════════════════════════ */
.spt-sep { margin: 20px 0 8px; }

.spt-sep--line_full .spt-sep-text {
    display: inline-block; font-size: 1.1em; font-weight: 700;
    padding-bottom: 6px; width: 100%;
    border-bottom: 2px solid currentColor;
}
.spt-sep--line_left .spt-sep-text {
    display: inline-block; font-size: 1.05em; font-weight: 700;
    padding-left: 12px; border-left: 4px solid currentColor;
}
.spt-sep--uppercase .spt-sep-text {
    display: inline-block; font-size: 0.78em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.spt-sep--pill { text-align: center; }
.spt-sep--pill .spt-sep-text {
    display: inline-block; font-size: 0.75em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    border-radius: 50px; padding: 4px 18px;
}
.spt-sep--boxed .spt-sep-text {
    display: block; font-size: 1em; font-weight: 700;
    padding: 8px 14px; border-radius: 6px;
    text-align: center; letter-spacing: 0.04em;
}

/* Note row — structure */
.spt-note-row { font-size: 0.8em; font-style: italic; padding: 4px 4px 10px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════
   LAYOUT MODES
═══════════════════════════════════════════════════ */
.spt-layout--grid2 .spt-items,
.spt-layout--grid3 .spt-items,
.spt-layout--cards .spt-items { display: grid; gap: 14px; }
.spt-layout--grid2 .spt-items { grid-template-columns: repeat(2, 1fr); }
.spt-layout--grid3 .spt-items { grid-template-columns: repeat(3, 1fr); }
.spt-layout--cards .spt-items { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.spt-layout--grid2 .spt-sep, .spt-layout--grid3 .spt-sep, .spt-layout--cards .spt-sep,
.spt-layout--grid2 .spt-note-row, .spt-layout--grid3 .spt-note-row,
.spt-layout--cards .spt-note-row { grid-column: 1 / -1; }

/* ── Single Item ─────────────────────────────────── */
.spt-item {
    display: flex; flex-direction: column; position: relative;
    border-bottom: 1px solid transparent; transition: background-color 0.15s;
}
.spt-has-divider.spt-divider--solid  .spt-item.has-divider { border-bottom-style: solid; }
.spt-has-divider.spt-divider--dashed .spt-item.has-divider { border-bottom-style: dashed; }
.spt-has-divider.spt-divider--dotted .spt-item.has-divider { border-bottom-style: dotted; }

.spt-layout--grid2 .spt-item,
.spt-layout--grid3 .spt-item,
.spt-layout--cards .spt-item { border-bottom: none !important; }

/* Cards media */
.spt-item-media {
    aspect-ratio: 4/3; overflow: hidden;
    border-radius: 8px 8px 0 0; margin-bottom: 8px;
    background: #f5f0f5;
    display: flex; align-items: center; justify-content: center;
}
.spt-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spt-item-icon { font-size: 2.2em; }

/* Item body */
.spt-item-body { flex: 1; display: flex; flex-direction: column; }

/* Badge — structure */
.spt-badge {
    display: inline-block;
    font-size: 0.63em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    border-radius: 50px; padding: 2px 9px;
}
.spt-badge--above { align-self: flex-start; margin-bottom: 4px; }
.spt-badge--inline { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 2px; }

/* Item info row */
.spt-item-info { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0; flex: 1; }
.spt-item-name-col { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spt-item-sub { width: 100%; display: flex; flex-direction: column; margin-top: 3px; }

.spt-item-name { font-size: 0.97em; font-weight: 600; line-height: 1.3; }
.spt-item-desc { font-size: 0.82em; margin-top: 0; line-height: 1.5; }

.spt-addons-list { margin: 4px 0 0; padding: 0; list-style: none; }
.spt-addons-list li { font-size: 0.78em; line-height: 1.6; position: relative; padding-left: 12px; }
.spt-addons-list li::before { content: '*'; position: absolute; left: 0; font-weight: 700; }

.spt-item-duration { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76em; margin-top: 4px; }
.spt-item-duration i, .spt-item-duration svg { font-size: 0.95em; }

/* ═══════════════════════════════════════════════════
   PRICE MODES
═══════════════════════════════════════════════════ */
.spt-item-pricing { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.spt-item-price { font-size: 1em; font-weight: 700; white-space: nowrap; }
.spt-price-suffix { font-size: 0.75em; font-weight: 400; }
.spt-item-original-price { font-size: 0.8em; text-decoration: line-through; white-space: nowrap; }

/* Dotted leader line */
.spt-item-info--dotted {
    display: grid !important;
    grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
    align-items: center; row-gap: 0; column-gap: 0;
}
.spt-item-info--dotted .spt-item-name-col { grid-column: 1; grid-row: 1; flex: unset; min-width: 0; align-items: center; }
.spt-item-info--dotted .spt-leader-line {
    grid-column: 2; grid-row: 1;
    display: block; align-self: center; height: 0;
    border: none; border-bottom: 1.5px dotted #ccc;
    margin: 0 8px;
}
.spt-item-info--dotted .spt-item-pricing { grid-column: 3; grid-row: 1; align-self: center; }
.spt-item-info--dotted .spt-item-sub { grid-column: 1 / -1; grid-row: 2; width: auto; }

/* Multi-column */
.spt-item-pricing.spt-pricing--multi { display: flex; flex-direction: row; align-items: center; gap: 0; flex-shrink: 0; }
.spt-item-pricing.spt-pricing--multi .spt-item-price { width: 64px; min-width: 40px; text-align: center; flex-shrink: 0; display: block; white-space: nowrap; }

/* Add-on */
.spt-pricing--addon { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 2px; }
.spt-addon-price { font-size: 0.78em; white-space: nowrap; }
.spt-pricing--addon .spt-item-price { font-size: 1.05em; }

/* Free text */
.spt-price-free { font-size: 0.9em; font-weight: 700; white-space: nowrap; }

/* Footer */
.spt-footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid #eee; text-align: center; }
.spt-footer-note { font-size: 0.82em; margin: 0 0 8px; font-style: italic; }
.spt-footer-address { font-size: 0.88em; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* CTA */
.spt-cta { margin-top: 22px; text-align: center; }
.spt-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 0.95em; text-decoration: none;
    padding: 14px 36px; border-radius: 50px;
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
    border: none; cursor: pointer;
}
.spt-cta-btn:hover { transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════
   DEFAULT COLORS — wrapped in :where() for zero specificity
   Elementor's generated CSS (any specificity > 0) always wins.
═══════════════════════════════════════════════════ */
:where(.spt-header-icon i, .spt-header-icon svg)            { color: #e91e8c; }
:where(.spt-header-title)                                    { color: #1a1a1a; }
:where(.spt-header-subtitle)                                 { color: #888888; }
:where(.spt-sep--line_full .spt-sep-text)                   { color: #e91e8c; }
:where(.spt-sep--line_left .spt-sep-text)                   { color: #e91e8c; }
:where(.spt-sep--uppercase .spt-sep-text)                   { color: #e91e8c; }
:where(.spt-sep--pill .spt-sep-text)                        { color: #ffffff; background-color: #e91e8c; }
:where(.spt-sep--boxed .spt-sep-text)                       { color: #ffffff; background-color: #1a1a1a; }
:where(.spt-note-row)                                        { color: #999999; }
:where(.spt-item.has-divider)                                { border-bottom-color: #eeeeee; }
:where(.spt-item--highlighted)                               { background-color: #fff5fb; }
:where(.spt-item-icon)                                       { color: #e91e8c; }
/* badge color/bg set by Elementor Style tab control */
:where(.spt-badge)                                           { color: #ffffff; }
:where(.spt-item-name)                                       { color: #1a1a1a; }
:where(.spt-item-desc)                                       { color: #666666; }
:where(.spt-addons-list li)                                  { color: #888888; }
:where(.spt-addons-list li::before)                          { color: #e91e8c; }
:where(.spt-item-duration)                                   { color: #aaaaaa; }
:where(.spt-item-price)                                      { color: #e91e8c; }
:where(.spt-item-original-price)                             { color: #aaaaaa; }
:where(.spt-addon-price)                                     { color: #888888; }
:where(.spt-col-header-cell)                                 { color: #888888; }
:where(.spt-leader-line)                                     { border-bottom-color: #cccccc; }
:where(.spt-footer-note)                                     { color: #888888; }
:where(.spt-footer-address)                                  { color: #555555; }
:where(.spt-footer-address i)                                { color: #e91e8c; }
:where(.spt-cta-btn)                                         { color: #ffffff; background-color: #e91e8c; }
:where(.spt-cta-btn:hover)                                   { background-color: #c2166e; box-shadow: 0 6px 20px rgba(233,30,140,0.28); }

/* Responsive */
@media (max-width: 768px) {
    .spt-layout--grid2 .spt-items,
    .spt-layout--grid3 .spt-items { grid-template-columns: 1fr; }
    .spt-layout--cards .spt-items { grid-template-columns: repeat(2, 1fr); }
    .spt-pricing--addon { align-items: flex-end; }
}
@media (max-width: 480px) {
    .spt-layout--cards .spt-items { grid-template-columns: 1fr; }
}