/*
 * ══════════════════════════════════════════════════════════════
 *  No-BS Meats – Delivery Zone Checker  |  Stylesheet v2
 * ══════════════════════════════════════════════════════════════
 *
 *  ▼  EASY CUSTOMIZATION
 *     Change ONLY the CSS variables in the :root block below.
 *     All colors, sizes, and radii are driven from those tokens.
 * ══════════════════════════════════════════════════════════════
 */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand accent (button, focus rings, active states) */
  --nbsm-primary:         #c0392b;   /* Main red                       */
  --nbsm-primary-hover:   #a93226;   /* Darker red on hover            */
  --nbsm-primary-text:    #ffffff;   /* Text on primary backgrounds    */

  /* Widget card */
  --nbsm-bg:              #ffffff;   /* Card background                */
  --nbsm-border:          #e8ddd5;   /* Card border                    */
  --nbsm-shadow:          0 4px 24px rgba(0, 0, 0, 0.09);
  --nbsm-radius:          14px;      /* Card corner radius             */
  --nbsm-padding:         32px;      /* Inner padding                  */

  /* Typography */
  --nbsm-font:            inherit;   /* Inherits your theme font       */
  --nbsm-title-color:     #1a1a1a;
  --nbsm-text-color:      #3a3a3a;
  --nbsm-subtext-color:   #6b6b6b;
  --nbsm-title-size:      1.35rem;
  --nbsm-body-size:       0.95rem;

  /* Input */
  --nbsm-input-bg:        #f9f5f2;
  --nbsm-input-border:    #d4c8bf;
  --nbsm-input-focus:     #c0392b;
  --nbsm-input-radius:    8px;
  --nbsm-input-height:    48px;

  /* Toggle buttons (inactive) */
  --nbsm-toggle-bg:       #f4eeea;
  --nbsm-toggle-border:   #d4c8bf;
  --nbsm-toggle-text:     #3a3a3a;

  /* Result – Bulk YES (green) */
  --nbsm-yes-bg:          #f0fdf4;
  --nbsm-yes-border:      #86efac;
  --nbsm-yes-badge-bg:    #16a34a;
  --nbsm-yes-badge-text:  #ffffff;

  /* Result – Bulk NO (red-tint) */
  --nbsm-no-bg:           #fef2f2;
  --nbsm-no-border:       #fca5a5;
  --nbsm-no-badge-bg:     #dc2626;
  --nbsm-no-badge-text:   #ffffff;

  /* Result – Bundles / Ships nationwide (blue) */
  --nbsm-ship-bg:         #eff6ff;
  --nbsm-ship-border:     #93c5fd;
  --nbsm-ship-badge-bg:   #2563eb;
  --nbsm-ship-badge-text: #ffffff;

  /* Result – Error */
  --nbsm-err-bg:          #fef2f2;
  --nbsm-err-border:      #fca5a5;
}


/* ── Widget Card ───────────────────────────────────────────── */
.nbsm-widget {
  font-family:   var(--nbsm-font);
  background:    var(--nbsm-bg);
  border:        1px solid var(--nbsm-border);
  border-radius: var(--nbsm-radius);
  box-shadow:    var(--nbsm-shadow);
  padding:       var(--nbsm-padding);
  max-width:     580px;
  margin:        0 auto 2rem;
  box-sizing:    border-box;
}


/* ── Header ────────────────────────────────────────────────── */
.nbsm-header {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  margin-bottom: 22px;
}

.nbsm-icon {
  font-size:  2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top:  2px;
}

.nbsm-title {
  font-size:   var(--nbsm-title-size);
  font-weight: 700;
  color:       var(--nbsm-title-color);
  margin:      0 0 4px;
  line-height: 1.2;
}

.nbsm-subtitle {
  font-size:   var(--nbsm-body-size);
  color:       var(--nbsm-subtext-color);
  margin:      0;
  line-height: 1.4;
}


/* ── Product-type toggle ───────────────────────────────────── */
.nbsm-type-toggle {
  display:       flex;
  gap:           10px;
  margin-bottom: 20px;
  flex-wrap:     wrap;
}

.nbsm-type-btn {
  flex:          1 1 160px;
  padding:       12px 18px;
  font-size:     var(--nbsm-body-size);
  font-weight:   600;
  font-family:   var(--nbsm-font);
  color:         var(--nbsm-toggle-text);
  background:    var(--nbsm-toggle-bg);
  border:        1.5px solid var(--nbsm-toggle-border);
  border-radius: var(--nbsm-input-radius);
  cursor:        pointer;
  text-align:    center;
  transition:    background 0.18s, border-color 0.18s, color 0.18s, transform 0.1s;
  line-height:   1.3;
}

.nbsm-type-btn:hover:not(.nbsm-type-btn--active) {
  background:   #ece5df;
  border-color: var(--nbsm-primary);
}

/* Active / selected state */
.nbsm-type-btn--active {
  background:   var(--nbsm-primary);
  border-color: var(--nbsm-primary);
  color:        var(--nbsm-primary-text);
  transform:    translateY(-1px);
  box-shadow:   0 3px 10px rgba(192, 57, 43, 0.25);
}


/* ── Address section (bulk only) ───────────────────────────── */
.nbsm-step-label {
  font-size:     var(--nbsm-body-size);
  color:         var(--nbsm-subtext-color);
  margin:        0 0 10px;
  font-weight:   500;
}

.nbsm-address-section {
  animation: nbsmFadeIn 0.2s ease;
}

.nbsm-input-row {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}

.nbsm-input {
  flex:          1 1 200px;
  min-width:     0;
  height:        var(--nbsm-input-height);
  padding:       0 16px;
  font-size:     var(--nbsm-body-size);
  font-family:   var(--nbsm-font);
  color:         var(--nbsm-text-color);
  background:    var(--nbsm-input-bg);
  border:        1.5px solid var(--nbsm-input-border);
  border-radius: var(--nbsm-input-radius);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
  box-sizing:    border-box;
}

.nbsm-input::placeholder { color: #aaa; }

.nbsm-input:focus {
  border-color: var(--nbsm-input-focus);
  box-shadow:   0 0 0 3px rgba(192, 57, 43, 0.12);
}


/* ── Check button ──────────────────────────────────────────── */
.nbsm-btn {
  height:        var(--nbsm-input-height);
  padding:       0 24px;
  font-size:     var(--nbsm-body-size);
  font-weight:   700;
  font-family:   var(--nbsm-font);
  color:         var(--nbsm-primary-text);
  background:    var(--nbsm-primary);
  border:        none;
  border-radius: var(--nbsm-input-radius);
  cursor:        pointer;
  white-space:   nowrap;
  flex-shrink:   0;
  transition:    background 0.2s, transform 0.1s, opacity 0.2s;
  letter-spacing: 0.02em;
}

.nbsm-btn:hover:not(:disabled) {
  background: var(--nbsm-primary-hover);
  transform:  translateY(-1px);
}

.nbsm-btn:active:not(:disabled) { transform: translateY(0); }

.nbsm-btn:disabled {
  opacity: 0.65;
  cursor:  not-allowed;
}


/* ── Result card (shared base) ─────────────────────────────── */
.nbsm-result {
  margin-top:    18px;
  border:        1.5px solid transparent;
  border-radius: 10px;
  overflow:      hidden;
  animation:     nbsmFadeIn 0.3s ease;
}

.nbsm-result-inner {
  padding: 18px 20px;
}

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

/* Badge pill */
.nbsm-zone-badge {
  display:        inline-block;
  padding:        4px 12px;
  border-radius:  99px;
  font-size:      0.78rem;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom:  10px;
}

/* Body text */
.nbsm-zone-message {
  font-size:   var(--nbsm-body-size);
  color:       var(--nbsm-text-color);
  margin:      0 0 8px;
  line-height: 1.55;
}

/* Distance line */
.nbsm-zone-distance {
  font-size: 0.87rem;
  color:     var(--nbsm-subtext-color);
  margin:    0 0 14px;
}

/* CTA button-link */
.nbsm-cta-link {
  display:         inline-block;
  padding:         9px 20px;
  background:      var(--nbsm-primary);
  color:           var(--nbsm-primary-text) !important;
  text-decoration: none !important;
  border-radius:   7px;
  font-size:       0.88rem;
  font-weight:     700;
  transition:      background 0.2s, transform 0.1s;
}

.nbsm-cta-link:hover {
  background: var(--nbsm-primary-hover);
  transform:  translateY(-1px);
}


/* ── Result colour variants ────────────────────────────────── */

/* Bulk – within range */
.nbsm-zone-yes {
  background:   var(--nbsm-yes-bg);
  border-color: var(--nbsm-yes-border);
}
.nbsm-zone-yes .nbsm-zone-badge {
  background: var(--nbsm-yes-badge-bg);
  color:      var(--nbsm-yes-badge-text);
}

/* Bulk – out of range */
.nbsm-zone-no {
  background:   var(--nbsm-no-bg);
  border-color: var(--nbsm-no-border);
}
.nbsm-zone-no .nbsm-zone-badge {
  background: var(--nbsm-no-badge-bg);
  color:      var(--nbsm-no-badge-text);
}

/* Bundles – ships everywhere */
.nbsm-zone-ship {
  background:   var(--nbsm-ship-bg);
  border-color: var(--nbsm-ship-border);
}
.nbsm-zone-ship .nbsm-zone-badge {
  background: var(--nbsm-ship-badge-bg);
  color:      var(--nbsm-ship-badge-text);
}

/* Error */
.nbsm-zone-error {
  background:   var(--nbsm-err-bg);
  border-color: var(--nbsm-err-border);
}


/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nbsm-widget {
    padding: 20px 16px;
  }

  .nbsm-type-toggle,
  .nbsm-input-row {
    flex-direction: column;
  }

  .nbsm-type-btn,
  .nbsm-btn {
    width: 100%;
  }

  .nbsm-title {
    font-size: 1.15rem;
  }
}


/* ── Dark section override ─────────────────────────────────── */
/*  Embed on a dark Elementor section?
    Add  nbsm-dark  to the section's Advanced → CSS Classes field. */
.nbsm-dark .nbsm-widget {
  --nbsm-bg:            #2a2a2a;
  --nbsm-border:        #3d3d3d;
  --nbsm-shadow:        0 4px 24px rgba(0, 0, 0, 0.40);
  --nbsm-title-color:   #f5f5f5;
  --nbsm-text-color:    #e0e0e0;
  --nbsm-subtext-color: #aaaaaa;
  --nbsm-input-bg:      #1f1f1f;
  --nbsm-input-border:  #555555;
  --nbsm-toggle-bg:     #333333;
  --nbsm-toggle-border: #555555;
  --nbsm-toggle-text:   #e0e0e0;
}