/*
 * Shell PLZ Finder -- Frontend Widget Styles
 *
 * Works in two layout modes:
 *
 *  MONOLITHIC -- single [spf_partner_locator] shortcode -> #spf-partner-locator
 *  SPLIT      -- [spf_search_form] in hero section      -> #spf-search-form
 *               [spf_results]     below hero            -> #spf-results
 *
 * Theming via CSS custom properties. Override any variable on the host page
 * to match your site brand without touching this file.
 *
 * Example override (works for all modes):
 *   #spf-partner-locator,
 *   #spf-search-form,
 *   #spf-results { --spf-primary: #005f9e; }
 *
 * Partner card selection:
 *   Clicking a card adds .spf-card--active (red border) to that card and
 *   removes it from any previously selected card. The card also fires a
 *   spf:partner-selected CustomEvent with { id, email, name } in the detail.
 *   Read the selected partner e-mail via card.dataset.email.
 */

/* -- CSS custom properties (theme tokens) --------------------------------- */
#spf-partner-locator,
#spf-search-form,
#spf-results {
  --spf-primary:        #DD1D21;
  --spf-primary-hover:  #b81619;
  --spf-text:           #1d2327;
  --spf-text-muted:     #646970;
  --spf-bg:             #ffffff;
  --spf-card-bg:        #f6f7f7;
  --spf-border:         #c3c4c7;
  --spf-radius:         6px;
  --spf-shadow:         0 2px 8px rgba(0,0,0,.10);
  --spf-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --spf-gap:            20px;

  box-sizing:  border-box;
  font-family: var(--spf-font);
  color:       var(--spf-text);
}

/* Box-sizing inheritance */
#spf-partner-locator *,
#spf-partner-locator *::before,
#spf-partner-locator *::after,
#spf-search-form *,
#spf-search-form *::before,
#spf-search-form *::after,
#spf-results *,
#spf-results *::before,
#spf-results *::after {
  box-sizing: inherit;
}

/* Monolithic wrapper: constrain width and centre. */
#spf-partner-locator {
  max-width: 1100px;
  margin:    0 auto;
}

/*
 * Split-mode containers take the full width of their Elementor column.
 * Elementor controls outer padding and max-width on its own.
 * Set padding to 0 so there is no double-padding with Elementor sections.
 */
#spf-search-form .spf-search-section {
  padding: 0;
}

#spf-results.spf-results-section {
  padding: 24px 0 0;
}

/* -- Search form section -------------------------------------------------- */
.spf-search-section {
  padding:    40px 24px;
  text-align: center;
}

.spf-search-form {
  display:         flex;
  justify-content: center;
  gap:             15px;
  max-width:       600px;
  margin:          0 auto 16px;
  margin-top: 12px;
}

.spf-search-input {
  flex:          1;
  padding:       14px 18px;
  font-size:     16px;
  border:        2px solid var(--spf-border);
  border-right:  none;
  border-radius: var(--spf-radius) 0 0 var(--spf-radius);
  outline:       none;
  color:         var(--spf-text);
  background:    var(--spf-bg);
  transition:    border-color .15s;
}
.spf-search-form .spf-search-input{
  border-radius:8px;
}
.spf-search-input:focus {
  border-color: var(--spf-primary);
}

.spf-search-input.spf-input-error {
  border-color: #d63638;
}

.spf-search-btn {
  padding:       14px 28px;
  font-size:     16px;
  font-weight:   600;
  color:         #fff;
  background:    var(--spf-primary);
  border:        2px solid var(--spf-primary);
  border-radius: 0 var(--spf-radius) var(--spf-radius) 0;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background .15s, border-color .15s;
}

.spf-search-btn:hover,
.spf-search-btn:focus {
  background:   var(--spf-primary-hover);
  border-color: var(--spf-primary-hover);
  outline:      none;
}

.spf-search-btn:disabled {
  opacity: .65;
  cursor:  not-allowed;
}

.spf-input-hint {
  font-size:  13px;
  color:      #d63638;
  margin-top: 6px;
  min-height: 18px;
}

/* AT/CH link */
.spf-country-link {
  display:    block;
  margin-top: 0px;
  font-family: "Arial", Sans-serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 300;
  line-height: 26px;
  color:         #fff;
  text-shadow: 0px 2px 5px black;
}

.spf-country-link a {
  color:         #fff;
  text-decoration: underline;
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         0;
  font-family: "Arial", Sans-serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 300;
  line-height: 26px;
  text-shadow: 0px 2px 5px black;
}

.spf-country-link a:hover {
  color: var(--spf-primary-hover);
}

/* -- Loading spinner ------------------------------------------------------- */
.spf-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         40px;
  color:           var(--spf-text-muted);
  font-size:       15px;
}

.spf-spinner {
  width:            24px;
  height:           24px;
  border:           3px solid var(--spf-border);
  border-top-color: var(--spf-primary);
  border-radius:    50%;
  animation:        spf-spin .7s linear infinite;
  flex-shrink:      0;
}

@keyframes spf-spin {
  to { transform: rotate(360deg); }
}

/* -- Results section ------------------------------------------------------- */
.spf-results-section {
  padding: 0 24px 40px;
}

.spf-results-header {
  display:       flex;
  align-items:   baseline;
  gap:           12px;
  margin-bottom: 20px;
  border-bottom: 1px solid #EDEDED;
  padding-left: 43px;
  padding-bottom: 15px;
}

.spf-result-count {
  font-size:   27px;
  line-height: 36px;
  font-weight: 700;
  font-family: "ShellBold", Sans-serif;
  color:       var(--spf-primary);
}

.spf-result-subtitle {
  font-size: 14px;
  color:     var(--spf-text-muted);
  display: none;
}

/* Expanded-radius notice */
.spf-radius-banner {
  background:    #fff8e5;
  border-left:   4px solid #dba617;
  border-radius: 0 var(--spf-radius) var(--spf-radius) 0;
  padding:       10px 16px;
  font-size:     14px;
  color:         #5d4b00;
  margin-bottom: 20px;
}

/* -- Partner cards grid ---------------------------------------------------- */
.spf-cards-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(720px, 1fr));
  gap:                   var(--spf-gap);
  list-style:            none;
  margin:                0;
  padding:               0;
}

.spf-card {
    background: #EDEDED;
    border: 1px solid var(--spf-border);
    border-radius: var(--spf-radius);
    padding: 60px 90px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, border-width .15s;
    outline: none;
    padding-bottom: 40px;
    padding-left: 77px;

}

.spf-card:hover {
  box-shadow: var(--spf-shadow);
}

/*
 * .spf-card--active is added by JS when the user clicks a card.
 * It signals which partner the enquiry form will be sent to.
 * Read the partner e-mail from card.dataset.email in your JS,
 * or listen for the spf:partner-selected CustomEvent.
 */
.spf-card--active {
  border-color: var(--spf-primary);
  border-width: 2px;
  box-shadow:   var(--spf-shadow);
}

/* Logo area */
.spf-card-logo {
  background:      #fff;
  border:          1px solid var(--spf-border);
  border-radius:   4px;
  height:          115px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  padding:         17px;
}

.spf-card-logo img {
  max-width:  100%;
  max-height:  100%;
  object-fit: contain;
}

.spf-card-logo-placeholder {
  color:      var(--spf-border);
  font-size:  13px;
  text-align: center;
}

/* Card body */
.spf-card-body {
  flex: 1;
}

.spf-card-name {
  font-size:   24px;
  line-height: 28px;
  font-weight: 700;
  margin:      20px 0 13px;
  font-family: "Arial", Sans-serif;
  color:       #4A4A4A;
}

.spf-card-address {
  font-size:   24px;
  line-height: 35px;
   font-weight: 300;
  font-family: "Arial", Sans-serif;
  color:       #404040;
  margin:      0;
}

/* Distance badge */
.spf-card-distance {
  display:       inline-block;
  margin-top:    10px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--spf-primary);
  background:    rgba(221,29,33,.08);
  padding:       3px 10px;
  border-radius: 12px;
}

/* Type badge */
.spf-card-type {
  display:        inline-block;
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding:        2px 8px;
  border-radius:  3px;
  margin-left:    8px;
  vertical-align: middle;
}

.spf-type-mp  { background: #e8f4fd; color: #0a5c8a; }
.spf-type-avp { background: #f0f0f0; color: #444;    }

/* -- Shell products -------------------------------------------------------- */
.spf-card-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 25px;
    padding: 20px 0px;
    max-width: 600px;
}

.spf-product {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.spf-product img {
    object-fit: contain;
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 70px;
}

/* -- Empty and error states ------------------------------------------------ */
.spf-message-box {
  text-align: center;
  padding:    40px 24px;
  color:      var(--spf-text-muted);
}

.spf-message-box__icon {
  font-size:     40px;
  margin-bottom: 12px;
}

.spf-message-box__title {
  font-size:   18px;
  font-weight: 600;
  margin:      0 0 8px;
  color:       var(--spf-text);
}

.spf-message-box__text {
  font-size: 14px;
  margin:    0;
}

.spf-message-box--error .spf-message-box__title {
  color: #d63638;
}

/* -- Responsive ------------------------------------------------------------ */
@media (max-width: 600px) {
  .spf-search-form {
    flex-direction: column;
    gap:            8px;
  }

  .spf-search-input {
    border-right:  2px solid var(--spf-border);
    border-radius: var(--spf-radius);
  }

  .spf-search-btn {
    border-radius: var(--spf-radius);
    width:         100%;
  }

  .spf-cards-grid {
    grid-template-columns: 1fr;
  }
}