/* Small site pages (help, legal, contact, payment options, thank-you, product 404s) in the Kingdom of Pets look.
   Loaded after stdt-kit/css/kop-site.css through kop_site_start()'s 'head' option. */

/* Lists the old pages marked with their own classes */
.site-main .green-tick-list, .site-main .blue-triangle-list { list-style: none; padding-left: 0; }
.site-main .green-tick-list li, .site-main .blue-triangle-list li { position: relative; padding-left: 28px; }
.site-main .green-tick-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #2e8b3d; font: 700 18px/1.72 var(--kop-sans); }
.site-main .blue-triangle-list li::before { content: ""; position: absolute; left: 6px; top: .72em; border-left: 9px solid var(--kop-blue-deep); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.site-main .blue-triangle-list li { margin: .5em 0; }

/* Help index: each question opens its answer */
.sp-faq-section { margin: 0 0 1.6em; }
.sp-faq-section > h2 { margin: 1.4em 0 .6em; font-size: 24px; }
.sp-faq { margin: 0 0 8px; background: #fff; border: 1px solid var(--kop-line); border-radius: 10px; }
.sp-faq > summary { cursor: pointer; padding: 13px 18px; font: 600 17px/1.4 var(--kop-sans); color: var(--kop-blue-deep); list-style: none; position: relative; padding-right: 44px; }
.sp-faq > summary::-webkit-details-marker { display: none; }
.sp-faq > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 700 22px/1 var(--kop-sans); color: var(--kop-blue-deep); }
.sp-faq[open] > summary::after { content: "\2212"; }
.sp-faq[open] > summary { border-bottom: 1px solid var(--kop-line); background: var(--kop-sky-2); border-radius: 10px 10px 0 0; }
.sp-faq .sp-answer { padding: 14px 18px 4px; }
.sp-faq .sp-answer > *:last-child { margin-bottom: .7em; }
.sp-faq .sp-answer p, .sp-faq .sp-answer li { font-size: 17px; }

/* Forms rebuilt from the old table layouts */
.sp-form .sp-row { margin: 0 0 14px; }
.sp-form .sp-row > label { display: block; margin: 0 0 4px; }
.sp-form input[type=text], .sp-form input[type=email], .sp-form input[type=url], .sp-form textarea, .sp-form select { width: 100%; max-width: 560px; }
.sp-form .sp-checks label { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px 6px 0; font-weight: 400; }
.sp-form .sp-checks input { width: auto; margin: 0; }
.sp-form .sp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.site-main form.sp-form input[type=reset], .site-main form.sp-form button[type=reset] { font: 600 15px/1.2 var(--kop-sans); background: #fff; color: var(--kop-blue-deep); border: 1px solid #b6c2d4; border-radius: 40px; padding: 11px 22px; cursor: pointer; box-shadow: none; }
.sp-error, .site-main .alert { color: #b0201a; font-weight: 700; }
.sp-notice { text-align: center; padding: 12px 16px; margin: 0 0 16px; background: var(--kop-cream-2); border: 1px solid #e9e39a; border-radius: 10px; font-family: var(--kop-sans); }
.sp-note { font: 15px/1.5 var(--kop-sans); color: var(--kop-muted); }

/* Lost-page link list and product pickers */
.sp-lost-list { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 8px; }
.sp-lost-list a { display: block; padding: 12px 16px; background: #fff; border: 1px solid var(--kop-line); border-radius: 8px; text-decoration: none; font: 600 16px/1.35 var(--kop-sans); }
.sp-lost-list a:hover { background: var(--kop-sky); }
.sp-picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sp-picker select { flex: 1 1 260px; }
.site-main form.sp-picker { padding: 18px; }

/* Payment boxes and address blocks */
.site-main .sp-address { margin: 0 0 1.2em 1.2em; padding-left: 16px; border-left: 4px solid var(--kop-sky); }
.site-main .sp-paypal { text-align: center; margin: 0 0 1.4em; }
.site-main form.sp-paypal-form { background: none; border: 0; padding: 0; text-align: center; }
.site-main form.sp-paypal-form input[type=image] { border-radius: 4px; max-width: 100%; }

/* Signature and photos in thank-you pages */
.sp-sign img { display: block; margin: 0 0 6px; border-radius: 0 !important; }

/* Product tables from the old product layouts */
.sp-contact-card { background: var(--kop-sky-2); border: 1px solid var(--kop-line); border-radius: 12px; padding: 22px; margin: 0 0 1.4em; }
.sp-product-list { display: grid; gap: 22px; margin: 2em 0 0; }
.sp-product { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; align-items: start; padding: 20px; background: #fff; border: 1px solid var(--kop-line); border-radius: 12px; }
.sp-product img { width: 130px; height: auto; border-radius: 6px; }
.sp-product p { margin: 0; font-size: 17px; }
@media (max-width: 560px) { .sp-product { grid-template-columns: minmax(0, 1fr); } .sp-product img { width: 160px; } }
.sp-redeem-list td { background: var(--kop-sky); }

/* Plain buttons (e.g. the product picker on the lost page) look like the other form buttons */
.site-main form input[type=button] { font: 700 15px/1.2 var(--kop-sans); color: #fff; border: 0; border-radius: 40px; padding: 12px 24px; cursor: pointer;
  background: linear-gradient(var(--kop-red-hi), var(--kop-red) 55%, var(--kop-red-lo)); box-shadow: 0 3px 0 #7d0f00; }