/* Noid WPD Designer — Checkout Tip
   Same tokens as the approved mockup (tip-section-mockup.html):
   brand blue for the selected state, 8px rounded corners matching every
   other card/button in this plugin's admin pages and emails — not the
   pill shape or colors from the original inspiration screenshot. */

.noid-tip-row td { padding: 0 !important; border: none !important; }

.noid-tip-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 16px;
  margin: 10px 0;
  font-family: inherit;
}
/* Never wider than half the screen on tablet/desktop — waived on mobile
   (below 768px) where the checkout column is already narrow and a 50vw
   cap would just make the card awkwardly small with no room gained. */
@media (min-width: 768px) {
  .noid-tip-card { max-width: 50vw; }
}
.noid-tip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.noid-tip-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.noid-tip-custom-toggle {
  border: none;
  background: none;
  color: #1544B8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 2px;
}
.noid-tip-custom-toggle:hover { color: #103A99; }

.noid-tip-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.noid-tip-pill {
  border: 1.5px solid #E5E7EB;
  background: #fff;
  color: #111827;
  border-radius: 8px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.noid-tip-pill:hover { border-color: #1544B8; color: #1544B8; }
.noid-tip-pill.is-selected {
  background: #1544B8;
  border-color: #1544B8;
  color: #fff;
}
.noid-tip-pill.is-selected:hover { background: #103A99; border-color: #103A99; }

.noid-tip-custom-wrap {
  display: none;
  margin-top: 10px;
  align-items: center;
  gap: 8px;
}
.noid-tip-custom-wrap.is-visible { display: flex; }
.noid-tip-prefix { font-size: 16px; font-weight: 700; color: #6B7280; }
.noid-tip-custom-wrap input {
  flex: 1;
  border: 1.5px solid #1544B8;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  outline: none;
}

@media (max-width: 360px) {
  .noid-tip-pill { font-size: 13px; padding: 11px 0; }
}