/**
 * Quote requests, in the Shivshakti idiom.
 *
 * Inherits the product page's tokens, so the form belongs to the page rather
 * than arriving from a plugin.
 */

.gms-quote { margin: 0 0 20px; }

/* ---- Above the threshold ------------------------------------------------ */

/* The buy row is hidden rather than disabled once a quote is the right answer.
   A greyed-out Add to cart beside a quote offer reads as something broken. */
.gms-pdp__buy.is-quote-only { display: none; }

.gms-quote__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 15px 16px;
  border: 1px solid rgba(250, 152, 4, .3);
  border-radius: var(--ss-r, 14px);
  background: linear-gradient(120deg, rgba(248, 248, 125, .38), rgba(250, 152, 4, .1));
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ss-ink-2, #57524a);
}

.gms-quote__trigger[hidden] { display: none; }

/* ---- The standing bulk prompt -------------------------------------------
   Deliberately quieter than the threshold nudge above. That one interrupts,
   because the customer has just done something the shop wants to respond to.
   This one sits on every product page all day and must not shout at the
   overwhelming majority of shoppers who are buying one. */

.gms-quote__bulk {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px dashed var(--ss-line, rgba(87, 82, 74, .22));
  border-radius: var(--ss-r, 14px);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ss-ink-2, #57524a);
}

.gms-quote__bulk > span { flex: 1 1 auto; min-width: 0; }

/* A ghost button here, not the solid CTA the threshold nudge uses — this must
   never compete with Add to cart for the eye of somebody buying one. */
.gms-quote__bulk .gms-quote__open {
  background: none;
  box-shadow: none;
  border: 1px solid currentColor;
  color: inherit;
}

.gms-quote__bulk .gms-quote__open:hover,
.gms-quote__bulk .gms-quote__open:focus-visible {
  background: var(--ss-ink, #2c2721);
  border-color: var(--ss-ink, #2c2721);
  color: #fff;
  transform: none;
}

/* ---- Buttons ------------------------------------------------------------- */

.gms-pdp__quote,
.gms-quote__open,
.gms-quote__send {
  border: 0;
  border-radius: var(--ss-r, 14px);
  background: linear-gradient(110deg, var(--ss-cta-a, #a83e05), var(--ss-cta-b, #b05f02));
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(244, 108, 4, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.gms-pdp__quote {
  grid-column: 1 / -1;
  min-height: 56px;
  padding: 14px 24px;
}

.gms-quote__open { padding: 11px 20px; font-size: 12px; }

.gms-pdp__quote:hover,
.gms-quote__open:hover,
.gms-quote__send:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(244, 108, 4, .3); }

/* ---- The form ------------------------------------------------------------ */

.gms-quote__form {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--ss-line, #e8e1d4);
  border-radius: var(--ss-r-lg, 22px);
  background: #fff;
}

.gms-quote__form[hidden] { display: none; }

.gms-quote__title {
  margin: 0;
  font-family: var(--ss-serif, Georgia, serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ss-ink, #151412);
}

.gms-quote__intro {
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-ink-2, #57524a);
}

/* What is being quoted for, restated inside the form. A form that does not
   say what it is about gets filled in for the wrong thing. */
.gms-quote__for {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ss-sand, #f7f2e8);
  font-size: 13px;
  color: var(--ss-ink, #151412);
}

.gms-quote__for strong { font-size: 15px; font-weight: 700; white-space: nowrap; }

.gms-quote__field { display: grid; gap: 6px; }

.gms-quote__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ss-ink-3, #6f6a61);
}

.gms-quote__label em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ss-hair, #a49c90);
}

.gms-quote__label em::before { content: ' · '; }

.gms-quote__field input,
.gms-quote__field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--ss-line-2, #ded8cd);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ss-ink, #151412);
  resize: vertical;
}

.gms-quote__field input:focus,
.gms-quote__field textarea:focus {
  outline: 2px solid var(--ss-indigo, #2408df);
  outline-offset: 1px;
  border-color: var(--ss-indigo, #2408df);
}

.gms-quote__help { font-size: 12px; line-height: 1.45; color: var(--ss-ink-3, #6f6a61); }

.gms-quote__error {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-red, #a52218);
}

.gms-quote__error[hidden] { display: none; }

.gms-quote__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gms-quote__send { min-height: 52px; padding: 14px 28px; }
.gms-quote__send:disabled { opacity: .6; cursor: wait; transform: none; }

.gms-quote__cancel {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-ink-3, #6f6a61);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Sent ---------------------------------------------------------------- */

.gms-quote__done {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border-radius: var(--ss-r-lg, 22px);
  background: rgba(23, 129, 84, .1);
  color: var(--ss-green-deep, #146f49);
}

.gms-quote__done[hidden] { display: none; }
.gms-quote__done strong { font-size: 15px; font-weight: 700; }
.gms-quote__done span { font-size: 13px; line-height: 1.5; color: var(--ss-ink-2, #57524a); }

@media (prefers-reduced-motion: reduce) {
  .gms-pdp__quote:hover,
  .gms-quote__open:hover,
  .gms-quote__send:hover { transform: none; }
}