/* ============================================================
   Pella Windows & Doors of Virginia - Payment Portal Styles
   pay2.pella386.com
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
	  box-sizing: border-box;
	  margin: 0;
	  padding: 0;
}

html {
	  font-size: 16px;
}

body {
	  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	  background: #f0f4f8;
	  color: #1a2636;
	  min-height: 100vh;
	  display: flex;
	  align-items: flex-start;
	  justify-content: center;
	  padding: 2rem 1rem 3rem;
}

/* --- Portal wrapper --- */
.portal-wrapper {
	  width: 100%;
	  max-width: 600px;
	  text-align: center;
}

/* --- Logo --- */
.logo-wrap {
	  margin-bottom: 1.5rem;
}

.logo {
	  width: 120px;
	  height: auto;
	  display: inline-block;
	  mix-blend-mode: multiply;
}

/* --- Heading --- */
.portal-title {
	  font-size: 1.45rem;
	  font-weight: 700;
	  color: #1a2636;
	  line-height: 1.35;
	  margin-bottom: 0.75rem;
}

/* --- Intro text --- */
.portal-intro {
	  font-size: 1rem;
	  color: #4a5568;
	  margin-bottom: 2rem;
	  line-height: 1.6;
}

/* --- Payment cards container --- */
.cards {
	  display: flex;
	  flex-direction: column;
	  gap: 1rem;
	  margin-bottom: 2rem;
}

/* --- Individual card (clickable link) --- */
.card {
	  display: flex;
	  align-items: center;
	  gap: 1rem;
	  padding: 1.25rem 1.5rem;
	  background: #ffffff;
	  border: 2px solid #dde3ec;
	  border-radius: 10px;
	  text-decoration: none;
	  color: inherit;
	  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
	  cursor: pointer;
	  text-align: left;
}

.card:hover,
.card:focus {
	  border-color: #2a6db5;
	  box-shadow: 0 4px 18px rgba(42, 109, 181, 0.15);
	  transform: translateY(-2px);
	  outline: none;
}

.card:focus-visible {
	  outline: 3px solid #2a6db5;
	  outline-offset: 2px;
}

/* --- Card icon --- */
.card-icon {
	  flex-shrink: 0;
	  width: 44px;
	  height: 44px;
	  background: #e8f0fb;
	  border-radius: 8px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #2a6db5;
}

.card-icon svg {
	  width: 22px;
	  height: 22px;
}

/* --- Card text body --- */
.card-body {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  gap: 0.25rem;
}

.card-title {
	  font-size: 1.05rem;
	  font-weight: 700;
	  color: #1a2636;
}

.card-sub {
	  font-size: 0.875rem;
	  color: #5a6a7e;
	  line-height: 1.45;
}

/* --- Arrow chevron --- */
.card-arrow {
	  flex-shrink: 0;
	  font-size: 1.6rem;
	  color: #2a6db5;
	  line-height: 1;
	  margin-left: 0.25rem;
}

/* --- Trust note at bottom --- */
.trust-note {
	  font-size: 0.82rem;
	  color: #6b7a8d;
	  line-height: 1.6;
	  border-top: 1px solid #dde3ec;
	  padding-top: 1.25rem;
}

/* --- Responsive: slightly tighter on very small screens --- */
@media (max-width: 420px) {
	  .portal-title {
		      font-size: 1.2rem;
	}
	  .card {
		      padding: 1rem 1.1rem;
	}
	  .card-title {
		      font-size: 0.98rem;
	}
}