/*
 * P-Clips Guest Returns — front-end styling.
 * Matched to the checkout redesign: Figtree, brand blue #0b57d0, soft rounded cards,
 * labels-above-fields with a blue focus ring. Loaded on /request-a-return/.
 */

.pcgr{
  font-family:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:#0a1733;
  -webkit-font-smoothing:antialiased;
}
.pcgr *{ box-sizing:border-box; }

.pcgr__inner{
  max-width:680px;
  margin:0 auto;
  padding:.5rem 0 3rem;
}

/* ---- Headings ---- */
.pcgr__title{
  font-size:2rem!Important; font-weight:800!Important; letter-spacing:-.02em; line-height:1.1;
  color:#0a1733; margin:.25rem 0 .45rem;
}
.pcgr__lead {
    color: #5b6577;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin: 0 0 1.9rem !important;
    font-weight: 500!Important;
}
.pcgr__subtitle{
  font-size:1.15rem; font-weight:800; letter-spacing:-.01em; color:#0a1733; margin:0 0 .35rem;
}


/* ---- Cards ---- */
.pcgr__card{
  background:#fff;
  border:1px solid rgba(10,23,51,.10);
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(10,23,51,.05);
  padding:1.5rem;
  margin:0 0 1.25rem;
}
@media (max-width:600px){ .pcgr__card{ padding:1.15rem; } }

/* ---- Fields ---- */
.pcgr__field{ margin:0 0 1.1rem; }
.pcgr__field:last-child{ margin-bottom:0; }
.pcgr__field > label{
  display:block; font-size:.9rem; font-weight:700; color:#0a1733; margin:0 0 .4rem; line-height:1.35;
}

.pcgr input[type="text"],
.pcgr input[type="email"],
.pcgr input[type="password"],
.pcgr input[type="number"],
.pcgr select,
.pcgr textarea{
  width:100%;
  box-sizing:border-box;
  font-family:inherit; font-size:1rem; color:#0a1733;
  min-height:3.1rem; padding:0 .9rem;
  border:1.5px solid rgba(10,23,51,.14);
  border-radius:.6rem;
  background:#fbfcfe;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pcgr textarea{ min-height:auto; padding:.7rem .9rem; line-height:1.5; resize:vertical; }
.pcgr input[type="file"]{
  min-height:auto; padding:.65rem .9rem; font-size:.85rem; background:#fbfcfe;
  border:1.5px dashed rgba(10,23,51,.18); cursor:pointer;
}

.pcgr input:focus,
.pcgr select:focus,
.pcgr textarea:focus{
  border-color:#0b57d0;
  box-shadow:0 0 0 4px rgba(11,87,208,.12);
  background:#fff;
  outline:none;
}
.pcgr input[readonly]{ background:#f1f4f9; color:#5b6577; cursor:default; }

/* Native select with a custom chevron */
.pcgr select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%238a94a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .85rem center;
  background-size:1.15rem;
}

/* ---- Buttons ---- */
.pcgr__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:inherit; font-weight:800; font-size:.95rem; line-height:1;
  border:none; border-radius:.7rem; padding:0 1.25rem; height:3.1rem; cursor:pointer;
}
.pcgr__btn--primary{
  width:100%; background:#0b57d0; color:#fff;
  box-shadow:0 6px 16px rgba(11,87,208,.28);
  transition:background .15s ease;
}
.pcgr__btn--primary:hover{ background:#0a4cc4; color:#fff; }
.pcgr__btn--primary:disabled,
.pcgr__btn--primary[disabled]{ background:#c7ccd6; color:#fff; box-shadow:none; cursor:not-allowed; }
.pcgr__actions{ margin-top:1.4rem; }

/* Text link (start over / look up a different order) */
.pcgr__startover{ margin:.35rem 0 0; text-align:center; }
.pcgr__link{
  background:none; border:none; font-family:inherit; font-weight:700; font-size:.9rem;
  color:#0b57d0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:.5rem;
}
.pcgr__link:hover{ color:#0a4cc4; }

/* ---- Honeypot (kept off-screen; PHP also inlines this) ---- */
.pcgr__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---- Alerts ---- */
.pcgr__alert{
  border-radius:.7rem; padding:.85rem 1rem; font-size:.9rem; font-weight:600; line-height:1.45;
  margin:0 0 1.25rem;
}
.pcgr__alert--error{ background:#fdecec; color:#b42318; border:1px solid rgba(180,35,24,.18); }
.pcgr__alert--ok{ background:#E7F6EC; color:#1c7a45; border:1px solid rgba(28,122,69,.18); }

/* ---- Note / hint ---- */
.pcgr__note{
  background:rgba(11,87,208,.05); border:1px solid rgba(11,87,208,.16); color:#334155;
  border-radius:.7rem; padding:.85rem 1rem; font-size:.88rem; line-height:1.5; margin:0 0 1.25rem;
}
.pcgr__hint{ display:block; color:#8a94a6; font-size:.8rem; margin-top:.35rem; }

/* ---- Item cards ---- */
.pcgr__item{ padding:1.15rem 1.25rem; }
.pcgr__item.is-disabled{ opacity:.55; }
.pcgr__item-head{ display:flex; align-items:center; gap:.85rem; }
.pcgr__check{ display:inline-flex; align-items:center; flex-shrink:0; }
.pcgr__check input,
.pcgr__check-line input{
  width:20px; height:20px; accent-color:#0b57d0; flex-shrink:0; cursor:pointer; margin:0;
}
.pcgr__item-media{
  width:56px; height:56px; border-radius:.6rem; overflow:hidden; background:#eef1f5;
  flex-shrink:0; display:grid; place-items:center;
}
.pcgr__item-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcgr__item-info{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.pcgr__item-name{ font-weight:800; font-size:.95rem; color:#0a1733; line-height:1.3; }
.pcgr__item-meta{ font-size:.82rem; color:#5b6577; }
.pcgr__item-body{
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid rgba(10,23,51,.08);
}
.pcgr__field--qty input{ max-width:8.5rem; }

/* ---- Consents ---- */
.pcgr__consents{ display:flex; flex-direction:column; gap:.85rem; }
.pcgr__check-line{
  display:flex; align-items:flex-start; gap:.65rem; font-size:.9rem; color:#334155;
  line-height:1.45; cursor:pointer;
}
.pcgr__check-line input{ margin-top:.05rem; }

/* ---- Success ---- */
.pcgr__success{ text-align:center; }
.pcgr__success .pcgr__title{ margin-top:.3rem; }
.pcgr__success .pcgr__lead{ margin-bottom:0; }
.pcgr__success-badge{
  display:inline-block; background:#E7F6EC; color:#1c7a45;
  font-weight:800; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.4rem .95rem; border-radius:999px; margin-bottom:.9rem;
}
.pcgr__account .pcgr__lead{ margin-bottom:1.25rem; }
.pcgr__account a{ color:#0b57d0; font-weight:700; }

/* ---- Packs OR clips quantity ---- */
.pcgr__qty{ display:flex; align-items:flex-end; gap:.85rem; flex-wrap:wrap; }
.pcgr__qty-col{ display:flex; flex-direction:column; gap:.3rem; }
.pcgr__qty-sub{ font-size:.78rem; font-weight:700; color:#5b6577; }
.pcgr__qty-col input{ max-width:8rem; }
.pcgr__qty-or{ color:#8a94a6; font-weight:700; font-size:.85rem; padding-bottom:.85rem; }
@media (max-width:480px){
  .pcgr__qty{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .pcgr__qty-or{ padding:0; }
  .pcgr__qty-col input{ max-width:none; }
}

/* ---- Photos: custom picker (cap 3, thumbnails, remove) ---- */
.pcgr__photos-input--hidden{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
/* !important throughout — the theme styles bare <button>s (light text), which made this
   button's label almost invisible. */
.pcgr__photos-add{
  display:inline-flex !important; align-items:center; gap:.4rem;
  font-family:inherit !important; font-weight:800 !important; font-size:.9rem !important;
  color:#0b57d0 !important; background:#eaf1fc !important;
  border:1.5px dashed rgba(11,87,208,.55) !important; border-radius:.6rem !important;
  padding:.7rem 1.1rem !important; cursor:pointer !important;
  text-transform:none !important; letter-spacing:normal !important;
  box-shadow:none !important; text-shadow:none !important; transition:background .15s ease;
}
.pcgr__photos-add:hover{ background:#dbe8fb !important; color:#0a4cc4 !important; }
.pcgr__photos-add:disabled{ color:#8a94a6 !important; background:#f1f4f9 !important; border-color:rgba(10,23,51,.14) !important; cursor:not-allowed !important; }
.pcgr__photos-previews{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.7rem; }
.pcgr__photos-previews:empty{ margin-top:0; }
.pcgr__photo{ position:relative; width:74px; height:74px; border-radius:.6rem; overflow:hidden; border:1px solid rgba(10,23,51,.12); background:#eef1f5; }
.pcgr__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcgr__photo-remove{
  position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:999px;
  border:none; background:rgba(10,23,51,.72); color:#fff; font-size:15px; line-height:1;
  display:grid; place-items:center; cursor:pointer; padding:0;
}
.pcgr__photo-remove:hover{ background:#b42318; }
.pcgr__photos--required > label::after{ content:" — required"; color:#b42318; font-weight:600; }

/* ---- Inline validation errors ---- */
.pcgr__error-msg{ color:#b42318; font-size:.82rem; font-weight:600; margin-top:.4rem; line-height:1.4; }
.pcgr__field.is-error input,
.pcgr__field.is-error select,
.pcgr__field.is-error textarea{ border-color:#b42318 !important; box-shadow:0 0 0 4px rgba(180,35,24,.1) !important; }
.pcgr__photos.is-error .pcgr__photos-add{ border-color:#b42318 !important; color:#b42318 !important; background:rgba(180,35,24,.06) !important; }

/* "You already have an account" note card — centered and compact. */
.pcgr__account--note{ text-align:center; padding:1.15rem 1.25rem; }
.pcgr__account--note .pcgr__lead{ margin:0; }

/* ---- Password fields: show/hide eye + strength meter + confirm mismatch ---- */
.pcgr__pw-wrap{ position:relative; }
.pcgr__pw-wrap .pcgr__pw-input{ padding-right:3rem; }
.pcgr__pw-toggle{
  position:absolute !important; right:.55rem; top:50%; transform:translateY(-50%);
  width:2rem; height:2rem; display:grid !important; place-items:center;
  background:none !important; border:none !important; box-shadow:none !important;
  color:#8a94a6 !important; cursor:pointer !important; padding:0 !important;
}
.pcgr__pw-toggle:hover,
.pcgr__pw-toggle.is-on{ color:#0b57d0 !important; }

.pcgr__pw-strength{ display:flex; align-items:center; gap:.6rem; margin-top:.55rem; }
.pcgr__pw-strength[hidden]{ display:none; }
.pcgr__pw-bar{ flex:1; height:6px; border-radius:999px; background:rgba(10,23,51,.1); overflow:hidden; }
.pcgr__pw-bar > span{ display:block; height:100%; width:0; border-radius:999px; transition:width .2s ease, background .2s ease; }
.pcgr__pw-strength.is-0 .pcgr__pw-bar > span{ width:22%; background:#c7ccd6; }
.pcgr__pw-strength.is-1 .pcgr__pw-bar > span{ width:45%; background:#e0574a; }
.pcgr__pw-strength.is-2 .pcgr__pw-bar > span{ width:72%; background:#e0a23a; }
.pcgr__pw-strength.is-3 .pcgr__pw-bar > span{ width:100%; background:#1c7a45; }
.pcgr__pw-label{ font-size:.78rem; font-weight:700; color:#5b6577; min-width:4.2rem; text-align:right; }
.pcgr__pw-mismatch{ color:#b42318; font-size:.82rem; font-weight:600; margin-top:.4rem; }
.pcgr__pw-mismatch[hidden]{ display:none; }

/* ---- Submit spinner (rage-click guard) ---- */
.pcgr__btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.pcgr__btn--primary.is-loading{ background:#0b57d0 !important; }
.pcgr__btn.is-loading::after{
  content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
  border-radius:50%; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:pcgr-spin .7s linear infinite;
}
@keyframes pcgr-spin{ to{ transform:rotate(360deg); } }
.pcgr__card.is-error{ border-color:#b42318; box-shadow:0 0 0 4px rgba(180,35,24,.08); }
.pcgr__item.is-error{ border-color:#b42318; box-shadow:0 0 0 4px rgba(180,35,24,.08); }