/* recycling-cart-request.css — page-specific tweaks for embedded Google Form */

.cart-request-page .cart-request-intro{
  margin-bottom: 0;
}

.cart-request-page .cart-form-title{
  margin-top: 0;
}

.cart-request-page .cart-form-frame{
  border-radius: 14px;
  overflow: visible;
  border: 1px solid rgba(0,0,0,.08);
}

/* Prevent wrapper clipping */
.cart-request-page .ars-portfolio-card,
.cart-request-page .contact-card,
.cart-request-page .cart-request-card,
.cart-request-page .cart-request-content{
  height: auto !important;
  overflow: visible !important;
}

.cart-request-page .cart-form-iframe{
  border: 0;
  display: block;
  width: 100%;
  height: 1400px;     /* desktop */
}

@media (max-width: 767px){
  .cart-request-page .cart-form-iframe{
    height: 90vh;
    min-height: 1550px;
  }
}

/* Notice panel row (full-width notice block) */
.cart-request-content .cart-notice-row{
  margin-top: 18px;   /* space between the 3 panels and the notice */
}

/* 768–1199: Contact page turns .contact-panels into a 3-col grid.
   Force the NOTICE row to be single-column so it spans full width. */
@media (min-width: 768px) and (max-width: 1199px){
  .cart-request-content .cart-notice-row{
    grid-template-columns: 1fr !important;
  }
}

/* Small screens: still add some breathing room */
@media (max-width: 767px){
  .cart-request-content .cart-notice-row{
    margin-top: 14px;
  }
}

/* Notice panel title (match contact-panel-title styling) */
.cart-request-page .cart-notice-title{
  margin: 0 0 10px;
  color: rgb(160 0 0 / 85%);
  font-weight: 700;
}
/* 576–767: contact.css uses wrapping flex + reorders cards, but doesn't add row spacing.
   Add a real flex gap so vertical spacing is consistent under BOTH top cards. */
@media (min-width: 576px) and (max-width: 767px){
  .cart-request-page .contact-page-content .contact-panels{
    gap: 14px; /* adjust if you want tighter/looser */
  }
}

/* Embedded form: loading overlay */
.cart-request-page .cart-form-frame{
  position: relative;
}

.cart-request-page .cart-form-loading{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(255,255,255,.92);
  z-index: 2;
  text-align: center;
}

.cart-request-page .cart-form-loading__inner{
  max-width: 520px;
}

.cart-request-page .cart-form-loading__text{
  font-size: 16px;
  line-height: 1.35;
  color: #31373a;
}

.cart-request-page .cart-form-spinner{
  width: 34px;
  height: 34px;
  border: 4px solid rgba(37, 61, 121, .18);
  border-top-color: rgba(37, 61, 121, .85);
  border-radius: 999px;
  margin: 0 auto 12px;
  animation: arsSpin 0.9s linear infinite;
}

@keyframes arsSpin{
  to{ transform: rotate(360deg); }
}

/* When loaded, hide overlay */
.cart-request-page .cart-form-frame--loaded .cart-form-loading{
  display: none;
}