/* ==================== WARRANTY PAGE ==================== */

/* ========== HERO ========== */

.warranty-hero {
  padding: 20px 0 0;
}

.warranty-hero__inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 20px;
}

.warranty-hero__card {
  background: linear-gradient(136.307deg, #eaeaea 1.7%, #ebe9e4 100%);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  padding: calc(var(--header-top, 40px) + var(--header-height-desktop, 60px)) 85px 60px;
  min-height: 420px;
}

/* Photo — positioned right, faded out to the left */
.warranty-hero__media {
  position: absolute;
  right: 0;
  top: 0;
  width: 850px;
  height: 100%;
  pointer-events: none;
}

.warranty-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 35%, black 70%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 35%, black 70%);
}

/* Content: breadcrumb + title + desc */
.warranty-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 788px;
}

.warranty-hero .breadcrumb__list {
  justify-content: flex-start;
}

.warranty-hero__title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.28px;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.warranty-hero__desc {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.08px;
  color: #111;
  max-width: 560px;
  margin: 0;
}

/* ========== WHY SECTION ========== */

.warranty-why {
  padding: 80px 0;
}

/* When the why-section is the FIRST section on the page (no hero
   above, e.g. /warranty-5), add extra top padding so the H2 clears
   the fixed header (which is position:fixed, top:40px, height:60px
   on desktop). */
main > .warranty-why:first-child {
  padding-top: calc(var(--header-top, 40px) + var(--header-height-desktop, 60px) + 40px);
}

.warranty-why__inner {
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.warranty-why__title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

/* --- 5 Cards --- */
.warranty-cards {
  display: flex;
  gap: 20px;
}

.warranty-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #eef0f3, #fff);
  text-align: center;
}

.warranty-card__icon {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0,0,0,0.06);
}

.warranty-card__label {
  font-size: 16px;
  font-weight: 500;
  color: #1c1c1e;
  line-height: 1.3;
  margin: 0;
}

/* --- Alert / Warning --- */
.warranty-alert {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  border-radius: 8px;
  background: rgba(252, 232, 232, 0.5);
  border: 1px solid rgba(252, 0, 8, 0.2);
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
}

.warranty-alert__icon {
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.warranty-alert__text {
  font-size: 14px;
  line-height: 1.5;
  color: #1c1c1e;
  margin: 0;
}

.warranty-alert__text strong {
  font-weight: 700;
}

/* --- Bottom info block --- */
.warranty-info {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-top: 40px;
}

.warranty-info__col {
  flex: 1;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.warranty-info__accent {
  width: 2px;
  background: var(--color-primary);
  align-self: stretch;
  flex-shrink: 0;
  border-radius: 2px;
}

.warranty-info__text {
  font-size: 16px;
  line-height: 1.6;
  color: #111;
}

.warranty-info__text p {
  margin: 0 0 10px;
}

.warranty-info__text p:last-child {
  margin-bottom: 0;
}

.warranty-info__serial {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.warranty-info__serial-img {
  width: 260px;
  flex-shrink: 0;
  border-radius: 8px;
  display: block;
}

.warranty-info__serial-text {
  font-size: 16px;
  line-height: 1.5;
  color: #111;
}

.warranty-info__serial-text p {
  margin: 0 0 6px;
}

.warranty-info__serial-text p:last-child {
  margin-bottom: 0;
}

/* ========== BANNER ========== */

.warranty-banner {
  padding: 80px 0;
}

.warranty-banner__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.warranty-banner__card {
  background: #1c1c1e url('../img/warranty/banner-bg.webp') center / cover no-repeat;
  border-radius: 16px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.warranty-banner__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 700px;
}

.warranty-banner__text {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  letter-spacing: -0.08px;
  margin: 0;
  text-align: center;
}

.warranty-banner__divider {
  display: block;
  width: 120px;
  height: 2px;
  background: var(--color-primary);
  flex-shrink: 0;
  border-radius: 2px;
  margin-top: 8px;
}

/* ========== FORM SECTION ========== */

.warranty-form-section {
  padding: 0 0 100px;
}

.warranty-form-section__inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 20px;
}

.warranty-form-card {
  background: var(--color-bg-3, #eef0f2) url('../img/warranty/form-bg.webp') center / cover no-repeat;
  border-radius: 24px;
  padding: 80px 145px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Form heading */
.warranty-form-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.warranty-form-head__title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.warranty-form-head__desc {
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}

/* Form grid */
.warranty-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.warranty-form__row {
  display: flex;
  gap: 20px;
}

.warranty-form__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.warranty-form__field--half {
  flex: 0 0 calc(50% - 10px);
  max-width: calc(50% - 10px);
}

.warranty-form__label {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  letter-spacing: 0.2px;
}

.warranty-form__input {
  height: 56px;
  padding: 0 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid transparent;
  font-size: 16px;
  font-family: inherit;
  color: #111;
  transition: border-color var(--transition), background var(--transition);
  width: 100%;
  box-sizing: border-box;
}

.warranty-form__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.warranty-form__input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.85);
}

.warranty-form__input.is-error {
  border-color: var(--color-primary);
  background: rgba(252, 0, 8, 0.04);
}

/* Date input */
.warranty-form__input--date {
  color: #111;
  cursor: pointer;
}

.warranty-form__input--date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
}

/* Bottom row: Checkbox + Submit */
.warranty-form__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Checkbox */
.warranty-form__checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.warranty-form__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.warranty-form__checkbox-box {
  width: 24px;
  height: 24px;
  border: 1px solid #e7ebf0;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition);
}

.warranty-form__checkbox-box::after {
  content: '';
  display: block;
  width: 12px;
  height: 8px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-2px);
  opacity: 0;
  transition: opacity var(--transition);
}

.warranty-form__checkbox:checked + .warranty-form__checkbox-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.warranty-form__checkbox:checked + .warranty-form__checkbox-box::after {
  opacity: 1;
}

.warranty-form__checkbox-wrap:hover .warranty-form__checkbox-box {
  border-color: #c0c8d0;
}

.warranty-form__checkbox-label {
  font-size: 14px;
  line-height: 1.4;
  color: #000;
}

/* Submit button */
.warranty-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  min-width: 320px;
  padding: 0 48px;
  background: var(--color-primary);
  border: none;
  border-radius: 8px;
  box-shadow: 0 8px 10px rgba(115, 26, 26, 0.1);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  letter-spacing: 0.32px;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
  white-space: nowrap;
  justify-content: center;
}

.warranty-form__submit:hover {
  background: var(--color-primary-hover);
}

.warranty-form__submit:active {
  background: var(--color-primary-active);
}

/* Error message */
.warranty-form__error {
  font-size: 14px;
  color: var(--color-primary);
  text-align: center;
  margin: 0;
}

.warranty-form__error[hidden] {
  display: none;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1299px) {
  .warranty-hero__title {
    font-size: 48px;
  }

  .warranty-form-card {
    padding: 60px 80px;
  }
}

@media (max-width: 1023px) {
  .warranty-hero__card {
    padding: calc(var(--header-height-mobile, 60px) + 30px) 40px 48px;
    min-height: 0;
  }

  .warranty-hero__media {
    width: 100%;
    opacity: 0.25;
  }

  .warranty-hero__title {
    font-size: 40px;
  }

  .warranty-why {
    padding: 60px 0;
  }

  main > .warranty-why:first-child {
    padding-top: calc(var(--header-height-mobile, 50px) + 30px);
  }

  .warranty-cards {
    flex-wrap: wrap;
    gap: 16px;
  }

  .warranty-card {
    flex: 0 0 calc(50% - 8px);
  }

  .warranty-info {
    flex-direction: column;
    gap: 32px;
  }

  .warranty-banner__card {
    padding: 32px 24px;
  }

  .warranty-banner__card {
    padding: 32px 20px;
  }

  .warranty-form-card {
    padding: 48px 40px;
  }

  .warranty-form__field--half {
    flex: 1;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .warranty-hero__card {
    padding: calc(var(--header-height-mobile, 60px) + 24px) 24px 32px;
    min-height: 0;
  }

  .warranty-hero__title {
    font-size: 32px;
  }

  .warranty-hero__desc {
    font-size: 15px;
  }

  .warranty-why__title {
    font-size: 28px;
  }

  .warranty-cards {
    flex-direction: column;
    gap: 12px;
  }

  .warranty-card {
    flex: none;
    flex-direction: row;
    text-align: left;
  }

  .warranty-alert {
    flex-direction: column;
    align-items: flex-start;
  }

  .warranty-info__serial {
    flex-direction: column;
  }

  .warranty-banner {
    padding: 60px 0;
  }

  .warranty-form-section {
    padding: 0 0 60px;
  }

  .warranty-form-card {
    padding: 40px 24px;
    border-radius: 16px;
  }

  .warranty-form__row {
    flex-direction: column;
    gap: 16px;
  }

  .warranty-form__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .warranty-form__submit {
    min-width: auto;
    width: 100%;
  }

  .warranty-form-head__title {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .warranty-hero__title {
    font-size: 26px;
  }

  .warranty-info__col {
    flex-direction: column;
  }

  .warranty-info__accent {
    width: 40px;
    height: 2px;
    align-self: auto;
  }
}

/* Radio group — used by the warranty_extend form (period 2/5 years). */
.sensei-form__radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: none;
}

.sensei-form__radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s, background-color 0.2s;
}

.sensei-form__radio:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.sensei-form__radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sensei-form__radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sensei-form__radio-input:checked + .sensei-form__radio-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.sensei-form__radio-input:checked ~ .sensei-form__radio-text {
  font-weight: 600;
}

.sensei-form__radio--solid .sensei-form__radio-input:checked + .sensei-form__radio-dot,
.sensei-form--contact .sensei-form__radio-input:checked + .sensei-form__radio-dot {
  color: #d10000;
}

/* /warranty-thank page reuses the .thanks-main layout (background +
   centered card) — see thanks.css for the rules.
   /warranty-extend page does not need its own outer-container styles:
   the hero / intro / form blocks each ship their own <section> with
   padding and background, exactly like the blocks on /warranty. */

/* /warranty-thank download card.
   Layout/typography reuses the thanks-card classes from thanks.css; only the
   polling spinner is warranty-specific.
*/
.warranty-download__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(252, 0, 8, 0.18);
  border-top-color: #fc0008;
  animation: warranty-download-spin 0.9s linear infinite;
}

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

/* /warranty-extend — two-column "intro + form" row.
   Page template puts the two blocks side-by-side inside this wrapper
   and adds vertical padding so the section breathes after the hero. */
.warranty-extend-row-section {
  padding: 80px 0;
  background-color: #f7f8fa;
}

.warranty-extend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  /* Keep the pair near the centre of the container instead of
     hugging both edges on very wide layouts. */
  max-width: 980px;
  margin: 0 auto;
}

.warranty-extend-row__col {
  min-width: 0;
}

/* Text column is bounded so it does not push the form card away to the
   edge on wide screens. */
.warranty-extend-row__col--text {
  flex: 0 1 440px;
  max-width: 440px;
}

/* Form card stays at a fixed comfortable width — mirrors the per-block
   card pattern used elsewhere in the theme (consultation, contact). */
.warranty-extend-row__col--form {
  flex: 0 0 460px;
  max-width: 460px;
}

@media (max-width: 1023px) {
  .warranty-extend-row-section {
    padding: 40px 0 60px;
  }
  .warranty-extend-row {
    gap: 40px;
  }
  .warranty-extend-row__col--form {
    flex: 0 0 420px;
    max-width: 420px;
  }
}

@media (max-width: 767px) {
  .warranty-extend-row-section {
    padding: 20px 0 32px;
  }
  .warranty-extend-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .warranty-extend-row__col--text,
  .warranty-extend-row__col--form {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* Inside-the-row blocks. The intro/form sections lose their own max-width
   so the flex parent gets to size them. */
.warranty-extend-intro {
  width: 100%;
  text-align: left;
}

.warranty-extend-intro__title {
  font-size: 32px;
  font-weight: 700;
  color: #0d141f;
  margin: 0 0 16px;
  line-height: 1.2;
}

.warranty-extend-intro__desc {
  color: #4d5868;
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}

.warranty-extend-form-section {
  width: 100%;
}

.warranty-extend-form-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(15, 22, 36, 0.08);
}

.warranty-extend-form__title {
  font-size: 22px;
  font-weight: 700;
  color: #0d141f;
  margin: 0 0 12px;
  text-align: center;
}

.warranty-extend-form__desc {
  color: #4d5868;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px;
  text-align: center;
}

@media (max-width: 767px) {
  .warranty-extend-intro {
    text-align: center;
  }
  .warranty-extend-intro__title {
    font-size: 22px;
    margin-bottom: 6px;
  }
  .warranty-extend-intro__desc {
    font-size: 14px;
    line-height: 1.4;
  }
  .warranty-extend-form-card {
    padding: 16px 16px 20px;
    box-shadow: 0 4px 16px rgba(15, 22, 36, 0.06);
  }
  .warranty-extend-form__title {
    font-size: 18px;
    margin-bottom: 8px;
  }
}