/* =========================================================
   MY PICKUPS
   Owns active, expired, completed, lifecycle, details dialog,
   dismiss controls, and completion-form presentation.
   ========================================================= */

/* Sections */
.ss-my-pickups-section{
  margin-top:34px;
}

.ss-my-pickups-section--expired{
  margin-top:28px;
}

.ss-my-pickups-section .ss-section-title{
  margin:0 0 16px;
  color:var(--ss-title-color);
  font-size:clamp(1.35rem,2vw,1.7rem);
}

.ss-my-pickups-section .ss-section-intro{
  margin:-8px 0 16px;
  color:var(--ss-text-soft);
  font-size:.92rem;
}

.ss-my-pickups-section .ss-list{
  display:grid;
  gap:18px;
}

/* Card shell */
.ss-pickup-card{
  overflow:hidden;
  padding:0 !important;
  border:1px solid rgba(47,93,80,.14);
  border-radius:18px !important;
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 38px rgba(28,62,53,.08);
}

.ss-pickup-card--expired,
.ss-pickup-card--completed{
  box-shadow:0 12px 30px rgba(28,62,53,.05);
}

.ss-pickup-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin:0;
  padding:16px 20px 14px;
  border-bottom:1px solid rgba(47,93,80,.1);
  background:linear-gradient(180deg,rgba(247,251,248,.98),rgba(255,255,255,.94));
}

.ss-pickup-card--expired .ss-pickup-card-head{
  background:linear-gradient(180deg,rgba(252,248,240,.98),rgba(255,255,255,.95));
}

.ss-pickup-card-title-group{
  min-width:0;
}

.ss-pickup-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.ss-pickup-card-head .ss-item-title{
  margin:0;
  color:var(--ss-title-color);
  font-size:clamp(1.2rem,2vw,1.5rem);
  line-height:1.18;
}

/* Lifecycle and status */
.ss-pickup-lifecycle-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
  color:#5f7469;
  font-size:.76rem;
  font-weight:650;
  line-height:1.35;
  letter-spacing:.02em;
}

.ss-pickup-lifecycle-line strong{
  color:#355247;
  font-size:inherit;
  font-weight:800;
  letter-spacing:.075em;
}

.ss-pickup-lifecycle-line.is-expired,
.ss-pickup-lifecycle-line.is-expired strong{
  color:#9a6423;
}

.ss-storage-pill{
  padding:5px 10px;
  font-size:.76rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.ss-status-badge{
  flex:0 0 auto;
  padding:6px 11px;
  font-size:.74rem;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.ss-status-badge--claimed{
  color:#176545;
  border-color:rgba(31,132,91,.28);
  background:rgba(69,178,126,.12);
}

.ss-status-badge--expired{
  color:#8a571c;
  border-color:rgba(173,110,35,.28);
  background:rgba(221,164,85,.15);
}

.ss-status-badge--completed{
  color:#53615c;
  border-color:rgba(83,97,92,.2);
  background:rgba(83,97,92,.08);
}

.ss-pickup-completed-date{
  display:grid;
  gap:3px;
  min-width:150px;
  text-align:right;
}

.ss-pickup-completed-date span{
  color:var(--ss-meta-muted);
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.ss-pickup-completed-date strong{
  color:var(--ss-title-color);
  font-size:.9rem;
}

/* Main body */
.ss-pickup-card-body{
  padding:18px 20px 20px;
}

.ss-pickup-card-body--active,
.ss-pickup-card-body--expired,
.ss-pickup-card-body--completed{
  display:grid !important;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.95fr) !important;
  gap:28px !important;
}

.ss-pickup-details-panel{
  padding:18px 20px;
  border:1px solid rgba(47,93,80,.1);
  border-radius:16px;
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 22px rgba(28,62,53,.045);
}

.ss-pickup-details-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
}

.ss-pickup-details-grid > div{
  display:grid;
  gap:5px;
  min-width:0;
  min-height:70px;
  padding:10px 14px 12px;
  border-bottom:1px solid rgba(47,93,80,.09);
}

.ss-pickup-details-grid > div:nth-child(odd){
  padding-left:0;
  padding-right:24px;
  border-right:1px solid rgba(47,93,80,.09);
}

.ss-pickup-details-grid > div:nth-child(even){
  padding-left:24px;
  padding-right:0;
}

.ss-pickup-details-grid > div:nth-last-child(-n+2){
  border-bottom:0;
}

.ss-pickup-detail-wide{
  grid-column:1 / -1;
  padding-left:0 !important;
  padding-right:0 !important;
  border-right:0 !important;
}

.ss-pickup-details-grid strong,
.ss-pickup-meta-grid strong,
.ss-pickup-priority-panel strong,
.ss-complete-form .ss-label{
  color:var(--ss-title-color) !important;
  font-size:.7rem;
  font-weight:750;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.ss-pickup-details-grid span,
.ss-pickup-priority-panel span{
  color:var(--ss-title-color);
  font-size:.96rem;
  line-height:1.45;
}

.ss-pickup-priority-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.ss-pickup-window,
.ss-pickup-location,
.ss-delivery-destination{
  display:grid;
  gap:5px;
  padding:13px 15px !important;
  border:1px solid rgba(47,93,80,.1);
  border-radius:12px;
  background:rgba(242,248,244,.72);
}

.ss-pickup-window{
  border-left:4px solid var(--ss-accent,#2f7d5e);
  background:rgba(224,243,232,.58);
}

.ss-pickup-window span{
  font-size:1rem;
  font-weight:700;
}

.ss-pickup-window--expired{
  border-left-color:rgba(173,110,35,.58);
  background:rgba(250,244,233,.82);
}

.ss-pickup-window--completed{
  border-left-color:rgba(83,97,92,.55);
  background:rgba(241,244,242,.78);
}

.ss-delivery-destination{
  border-left:4px solid rgba(47,125,94,.5);
}

/* Card actions */
.ss-pickup-card-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
  padding-top:4px;
}

.ss-pickup-card-actions .ss-btn{
  min-width:0;
  padding:11px 18px;
}

.ss-dismiss-pickup{
  color:#8a5c22;
  border-color:rgba(154,100,35,.24);
  background:rgba(250,244,233,.72);
}

.ss-dismiss-pickup:hover,
.ss-dismiss-pickup:focus-visible{
  color:#714814;
  border-color:rgba(154,100,35,.42);
  background:rgba(247,236,216,.92);
}

.ss-pickup-card.is-dismissed{
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease;
}

/* Completed card metadata */
.ss-pickup-card--completed .ss-pickup-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 24px;
  padding:18px 20px;
  border:1px solid rgba(47,93,80,.1);
  border-radius:16px;
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 22px rgba(28,62,53,.04);
}

.ss-pickup-card--completed .ss-pickup-meta-grid > div{
  display:grid;
  gap:5px;
  min-width:0;
}

/* Pickup information order: Food / Quantity, Prepared / Expires, then notes. */
@media (min-width:621px){
  .ss-pickup-card-body--active .ss-pickup-details-grid > div,
  .ss-pickup-card-body--expired .ss-pickup-details-grid > div,
  .ss-pickup-card-body--completed .ss-pickup-details-grid > div{
    border-right:0;
    border-bottom:0;
  }

  .ss-pickup-card-body--active .ss-pickup-details-grid > div:nth-child(1),
  .ss-pickup-card-body--expired .ss-pickup-details-grid > div:nth-child(1),
  .ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(1){
    grid-column:1;
    grid-row:1;
    border-right:1px solid rgba(47,93,80,.09);
    border-bottom:1px solid rgba(47,93,80,.09);
  }

  .ss-pickup-card-body--active .ss-pickup-details-grid > div:nth-child(3),
  .ss-pickup-card-body--expired .ss-pickup-details-grid > div:nth-child(3),
  .ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(3){
    grid-column:2;
    grid-row:1;
    border-bottom:1px solid rgba(47,93,80,.09);
  }

  .ss-pickup-card-body--active .ss-pickup-details-grid > div:nth-child(2),
  .ss-pickup-card-body--expired .ss-pickup-details-grid > div:nth-child(2),
  .ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(2){
    grid-column:1;
    grid-row:2;
    border-right:1px solid rgba(47,93,80,.09);
  }

  .ss-pickup-card-body--active .ss-pickup-details-grid > div:nth-child(4),
  .ss-pickup-card-body--expired .ss-pickup-details-grid > div:nth-child(4),
  .ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(4){
    grid-column:2;
    grid-row:2;
  }

  .ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(2),
  .ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(4){
    border-bottom:1px solid rgba(47,93,80,.09);
  }

  .ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(5){
    grid-column:1;
    grid-row:3;
    border-right:1px solid rgba(47,93,80,.09);
  }

  .ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(6){
    grid-column:2;
    grid-row:3;
  }

  /* Keep cell text inset consistent after the visual reordering. */
  .ss-pickup-card-body--active .ss-pickup-details-grid > div,
  .ss-pickup-card-body--expired .ss-pickup-details-grid > div,
  .ss-pickup-card-body--completed .ss-pickup-details-grid > div{
    padding-left:24px;
    padding-right:24px;
  }
}

/* Softly group Prepared / Expires across Active, Expired, and Completed cards. */
.ss-pickup-card-body--active .ss-pickup-details-grid > div:nth-child(2),
.ss-pickup-card-body--expired .ss-pickup-details-grid > div:nth-child(2),
.ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(2){
  background:linear-gradient(90deg,rgba(224,243,232,0),rgba(224,243,232,.22));
}

.ss-pickup-card-body--active .ss-pickup-details-grid > div:nth-child(4),
.ss-pickup-card-body--expired .ss-pickup-details-grid > div:nth-child(4),
.ss-pickup-card-body--completed .ss-pickup-details-grid > div:nth-child(4){
  background:linear-gradient(90deg,rgba(224,243,232,.22),rgba(224,243,232,0));
}

/* All three priority cards carry the same left-edge status accent. */
.ss-pickup-priority-panel .ss-pickup-window,
.ss-pickup-priority-panel .ss-pickup-location,
.ss-pickup-priority-panel .ss-delivery-destination{
  border-left:4px solid var(--ss-accent,#2f7d5e);
}

.ss-pickup-card--expired .ss-pickup-priority-panel .ss-pickup-window,
.ss-pickup-card--expired .ss-pickup-priority-panel .ss-pickup-location,
.ss-pickup-card--expired .ss-pickup-priority-panel .ss-delivery-destination{
  border-left-color:rgba(173,110,35,.58);
}

.ss-pickup-card--completed .ss-pickup-priority-panel .ss-pickup-window,
.ss-pickup-card--completed .ss-pickup-priority-panel .ss-pickup-location,
.ss-pickup-card--completed .ss-pickup-priority-panel .ss-delivery-destination{
  border-left-color:rgba(64,135,111,.55);
}

.ss-pickup-card--completed .ss-delivery-destination{
  border:1px solid rgba(47,93,80,.12);
  border-left:4px solid rgba(64,135,111,.55);
  background:rgba(238,247,242,.72);
}

/* Completion panel: one border owner, one spacing owner */
.ss-pickup-card-footer{
  display:grid;
  gap:0;
  margin:18px 20px 22px;
  padding:16px 18px 14px !important;
  border:1px solid rgba(47,93,80,.12);
  border-radius:16px;
  background:rgba(255,255,255,.64);
  box-shadow:0 10px 24px rgba(36,48,41,.05);
  box-sizing:border-box;
}

.ss-pickup-card-footer .ss-claim-box,
.ss-my-pickups-section--active .ss-claim-box,
.ss-my-pickups-section--expired .ss-claim-box{
  width:100%;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  box-sizing:border-box;
}

.ss-pickup-card-footer .ss-complete-form{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  column-gap:26px;
  row-gap:10px;
  align-items:start;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 !important;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
}

.ss-pickup-card-footer .ss-complete-form > .ss-field{
  min-width:0;
}

.ss-pickup-card-footer .ss-complete-form > .ss-actions,
.ss-pickup-card-footer .ss-complete-form > .ss-form-response{
  grid-column:1 / -1;
}

.ss-pickup-card-footer .ss-complete-form .ss-actions{
  margin-top:0;
}

.ss-pickup-card-footer .ss-select,
.ss-pickup-card-footer .ss-textarea{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.ss-pickup-card-footer .ss-textarea{
  min-height:82px;
}

/* Pickup details dialog */
.ss-pickup-details-dialog{
  width:min(680px,calc(100vw - 28px));
  max-height:calc(100dvh - 28px);
  padding:0;
  border:1px solid rgba(47,93,80,.22);
  border-radius:20px;
  background:#fbfdfb;
  color:var(--ss-title-color);
  box-shadow:0 26px 70px rgba(19,48,40,.24);
  overflow:auto;
}

.ss-pickup-details-dialog::backdrop{
  background:rgba(20,36,31,.46);
  backdrop-filter:blur(3px);
}

.ss-pickup-details-dialog-inner{
  position:relative;
  padding:28px 30px 26px;
}

.ss-pickup-details-dialog-inner > h2{
  margin:0 48px 20px 0;
  color:var(--ss-title-color);
  font-size:clamp(1.7rem,3vw,2.15rem);
  line-height:1.1;
}

.ss-pickup-details-close{
  position:absolute;
  top:18px;
  right:18px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(47,93,80,.18);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--ss-title-color);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
}

.ss-dialog-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

.ss-dialog-detail{
  display:grid;
  gap:5px;
  padding:14px 16px;
  border:1px solid rgba(47,93,80,.11);
  border-radius:13px;
  background:rgba(255,255,255,.82);
}

.ss-dialog-detail--wide{
  grid-column:1 / -1;
}

.ss-dialog-detail strong{
  color:var(--ss-title-color);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.ss-dialog-detail span{
  color:var(--ss-title-color);
  font-size:.98rem;
  line-height:1.45;
}

.ss-dialog-detail--accent{
  border-left:4px solid #32745f;
  background:rgba(232,246,238,.9);
}

.ss-dialog-detail--accent span{
  font-weight:700;
}

.ss-dialog-detail--priority{
  border-left:4px solid rgba(173,110,35,.65);
  background:rgba(250,244,233,.85);
}

.ss-pickup-details-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

/* Responsive */
@media (max-width:900px){
  .ss-pickup-card-body--active,
  .ss-pickup-card-body--expired,
  .ss-pickup-card-body--completed{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

@media (max-width:700px){
  .ss-pickup-card-head{
    flex-direction:column;
    gap:12px;
  }

  .ss-pickup-completed-date{
    min-width:0;
    text-align:left;
  }

  .ss-pickup-card-footer{
    margin:16px;
    padding:16px !important;
  }

  .ss-pickup-card-footer .ss-complete-form,
  .ss-pickup-card--completed .ss-pickup-meta-grid,
  .ss-dialog-detail-grid{
    grid-template-columns:1fr;
  }

  .ss-pickup-card-footer .ss-complete-form > .ss-actions,
  .ss-pickup-card-footer .ss-complete-form > .ss-form-response,
  .ss-dialog-detail--wide{
    grid-column:auto;
  }

  .ss-pickup-details-dialog-inner{
    padding:24px 18px 20px;
  }
}

@media (max-width:620px){
  .ss-pickup-details-grid{
    grid-template-columns:1fr;
  }

  .ss-pickup-details-grid > div,
  .ss-pickup-details-grid > div:nth-child(odd),
  .ss-pickup-details-grid > div:nth-child(even){
    min-height:0;
    padding:10px 0 12px;
    border-right:0;
    border-bottom:1px solid rgba(47,93,80,.09);
  }

  .ss-pickup-details-grid > div:last-child{
    border-bottom:0;
  }
}

@media (max-width:540px){
  .ss-pickup-title-row{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .ss-pickup-card-actions{
    display:grid !important;
    grid-template-columns:1fr;
  }

  .ss-pickup-card-actions .ss-btn{
    width:100%;
  }
}

/* Pickup Details — balanced lower information grid */

.ss-dialog-detail-grid{
  grid-auto-rows:min-content;
}

.ss-dialog-detail--phone{
  grid-column:1;
  grid-row:auto;
}

.ss-dialog-detail--storage{
  grid-column:1;
  grid-row:auto;
}

.ss-dialog-detail--donation{
  grid-column:2;
  grid-row:span 2;
  min-height:0;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:5px;
}

.ss-dialog-detail--donation strong,
.ss-dialog-detail--donation span{
  flex:0 0 auto;
  margin:0;
}

.ss-dialog-detail--donation span{
  display:block;
  font-size:1.05rem;
  font-weight:600;
}

@media (max-width:700px){
  .ss-dialog-detail--phone,
  .ss-dialog-detail--storage,
  .ss-dialog-detail--donation{
    grid-column:auto;
    grid-row:auto;
    min-height:0;
  }
}

/* =========================================================
   MY PICKUPS — CONTROL SIZING
   ========================================================= */
/* ---------- MY PICKUPS REFERENCE SIZE ---------- */
.ss-my-pickups-panel .ss-input,
.ss-my-pickups-panel .ss-select,
.ss-my-pickups-panel .ss-btn,
.ss-my-pickups-panel a.ss-btn {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
}

/* keep pill buttons pill-shaped */
.ss-my-pickups-panel .ss-btn,
.ss-my-pickups-panel a.ss-btn {
    border-radius: 999px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}


/* =========================================================
   MY PICKUPS — COMPACT TASK CARDS
   ========================================================= */
/* My Pickups: turn each active record into a compact, scannable task card. */
.ss-my-pickups-section--active .ss-item{
  padding:22px;
  border-radius:16px;
}

.ss-pickup-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.ss-pickup-card-head .ss-item-title{
  margin:0 0 8px;
  font-size:1.28rem;
  line-height:1.2;
}

.ss-storage-pill{
  display:inline-flex;
  margin:0;
}

.ss-pickup-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 28px;
  margin:0;
}

.ss-pickup-meta-grid > div{
  display:grid;
  gap:3px;
  min-width:0;
}

.ss-pickup-meta-grid strong{
  display:block;
  color:var(--ss-title-color);
  font-size:.76rem;
  line-height:1.2;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.ss-pickup-meta-grid span{
  color:var(--ss-body-color);
  line-height:1.42;
}

.ss-pickup-meta-grid .ss-pickup-meta-wide{
  grid-column:1 / -1;
}

.ss-my-pickups-section--active .ss-pickup-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(47,93,80,.1);
}

.ss-my-pickups-section--active .ss-claim-box{
  margin-top:18px;
}

@media (max-width:640px){
  .ss-pickup-card-head{
    align-items:center;
  }

  .ss-pickup-meta-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .ss-pickup-meta-grid .ss-pickup-meta-wide{
    grid-column:auto;
  }
}


/* My Pickups section heading */
.ss-my-pickups-section > .ss-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px !important;
  font-size:clamp(28px,3vw,38px);
}

/* =========================================================
   MY PICKUPS — COMMUNITY IMPACT PANEL
   Owns the impact icon, metric icons, sizing, and responsive layout.
   ========================================================= */

.ss-my-pickups-panel .ss-impact-panel{
  grid-template-columns:72px minmax(0,1fr) 210px;
}

.ss-my-pickups-panel .ss-impact-icon{
  width:64px;
  height:64px;
}

.ss-my-pickups-panel .ss-impact-icon svg,
.ss-my-pickups-panel .ss-impact-icon img{
  display:block;
  width:36px;
  height:36px;
  max-width:none;
  object-fit:contain;
}

.ss-my-pickups-panel .ss-impact-metric{
  display:grid;
  grid-template-columns:56px auto minmax(0,1fr);
  align-items:center;
  column-gap:12px;
}

.ss-my-pickups-panel .ss-impact-metric-icon{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  min-width:56px;
  color:var(--ss-accent);
  line-height:1;
}

.ss-my-pickups-panel .ss-impact-metric-icon img{
  display:block !important;
  width:56px !important;
  height:56px !important;
  min-width:56px;
  max-width:none !important;
  object-fit:contain;
  opacity:1 !important;
  visibility:visible !important;
}

@media (max-width:900px){
  .ss-my-pickups-panel .ss-impact-panel{
    grid-template-columns:72px minmax(0,1fr);
  }
}

@media (max-width:640px){
  .ss-my-pickups-panel .ss-impact-panel{
    grid-template-columns:1fr;
  }

  .ss-my-pickups-panel .ss-impact-icon{
    margin:0 auto;
  }

  .ss-my-pickups-panel .ss-impact-metric{
    grid-template-columns:56px auto minmax(0,1fr);
    text-align:left;
  }
}