/* ##########################################################################
   SOUVE – RETURNS UI
   Final version:
   - Returns list like screen 1
   - View Return like screen 2/3
   Scoped to: .souve-returns-app
   ########################################################################## */


/* ==========================================================================
   COMMON
   ========================================================================== */
.souve-returns-app{
  --bg: var(--e-global-color-625e4b6);
  --card: var(--e-global-color-7be7964);
  --text: var(--e-global-color-primary);
  --muted: rgba(0,0,0,.60);
  --border: var(--e-global-color-402fd8e);
  --radius: 8px;

  background: var(--bg);
  position: relative;
}

.souve-returns-app .souve-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 10px 20px;
}

.souve-returns-app.is-details .souve-tabs,
.souve-returns-app.is-details .souve-returns-tabs{
  display:none !important;
}

.souve-returns-app .souve-returns-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.65);
  border-radius: 8px;
  z-index: 60;
}

.souve-returns-app .souve-returns-spinner{
  width:38px;
  height:38px;
  border-radius:99px;
  border:3px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.65);
  animation:souveReturnsSpin .8s linear infinite;
}

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

/* tabs */
.souve-returns-app .souve-tabs,
.souve-returns-app .souve-returns-tabs{
  display:flex;
  align-items:center;
  gap:22px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  background: var(--card);
  margin-bottom:12px;
  padding:10px 15px;
  border: 1px solid var( --e-global-color-402fd8e );
  border-radius:8px;
  box-shadow:none;
}
.souve-returns-app .souve-tabs::-webkit-scrollbar,
.souve-returns-app .souve-returns-tabs::-webkit-scrollbar{
  display:none;
}

.souve-returns-app .souve-tab{
  position:relative;
  appearance:none;
  border:0;
  background:var(--card);
  box-shadow:none;
  border-radius:0;
  padding:14px 6px;
  margin:0;
  font-weight:400;
  font-size:13px;
  text-transform:capitalize;
  cursor:pointer;
  white-space:nowrap;
}

.souve-returns-app .souve-tab.is-active{
  color:rgba(0,0,0,.92);
  font-weight:700;
}

.souve-returns-app .souve-tab.is-active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:70%;
  height:2px;
  background: currentColor;
}

/* pager */
.souve-returns-app .souve-pagination,
.souve-returns-app .souve-returns-pagination{
  margin-top:12px;
}

.souve-returns-app .souve-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.souve-returns-app .souve-page-nav,
.souve-returns-app .souve-page{
  border:1px solid rgba(0,0,0,.12);
  background: var(--card);
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  cursor:pointer;
  box-shadow:none;
}

.souve-returns-app .souve-page.is-active{
  background:#000;
  color: var(--card);
  border-color:#000;
}

.souve-returns-app .souve-page-nav:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* status pills */
.souve-returns-app .souve-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

.souve-returns-app .souve-status--submitted,
.souve-returns-app .souve-status--completed,
.souve-returns-app .souve-status--approved{
  background:#e4efe5;
  color:#2f8a45;
}

.souve-returns-app .souve-status--rejected{
  background:#f3e2e2;
  color:#c33a36;
}

.souve-returns-app .souve-status--processing,
.souve-returns-app .souve-status--in-review,
.souve-returns-app .souve-status--review,
.souve-returns-app .souve-status--pending{
  background:#efe4c9;
  color:#b77900;
}

/* thumbs */
.souve-returns-app .souve-return-thumb{
  position:relative;
  background:rgba(0,0,0,.04);
  overflow:hidden;
}

.souve-returns-app .souve-return-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.souve-returns-app .souve-return-thumb__ph{
  width:100%;
  height:100%;
  background:rgba(0,0,0,.05);
}

.souve-returns-app .souve-return-thumb__badge{
  position:absolute;
  right:8px;
  bottom:8px;
  background:rgba(0,0,0,.75);
  color:#fff;
  font-weight:700;
  font-size:13px;
  line-height:1;
  padding:5px 7px;
  border-radius:6px;
}

/* ==========================================================================
   DESKTOP / TABLET
   ========================================================================== */
@media (min-width: 769px){

  /* =========================
     1) RETURNS LIST
     ========================= */
  .souve-returns-app .souve-returns-list{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .souve-returns-app .souve-return-card{
    background: var(--card);
    border-radius: 8px;
    overflow:hidden;
    box-shadow:none;
  }

  .souve-returns-app .souve-return-card__hitarea{
    width:100%;
    display:grid;
    grid-template-columns: 96px minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    padding:18px 20px;
    border: 1px solid var( --e-global-color-402fd8e );
	  border-radius: 8px;
    background:#fff;
    text-align:left;
    cursor:pointer;
    box-shadow:none;
  }

  .souve-returns-app .souve-return-card__media{
    min-width:0;
  }

  .souve-returns-app .souve-return-thumb{
    width:96px;
    height:96px;
    border-radius:16px;
  }

  .souve-returns-app .souve-return-card__body{
    min-width:0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .souve-returns-app .souve-return-card__meta{
    color:rgba(0,0,0,.55);
    font-size:12px;
    line-height:16px;
    font-weight:400;
    text-transform: none !important;
  }

  .souve-returns-app .souve-return-card__title{
    font-size:13px;
    line-height:13px;
    font-weight:600;
    color:var(--e-global-color-primary);
	margin: 0px;
  }

  .souve-returns-app .souve-return-card__summary{
    color:rgba(0,0,0,.55);
    font-size:12px;
    text-transform: none !important;
    line-height:16px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
  }

  .souve-returns-app .souve-return-card__sep{
    margin:0 8px;
    color:rgba(0,0,0,.28);
  }

  .souve-returns-app .souve-return-card__total{
    margin-left:4px;
    color:#1f1f1f;
    font-weight:600;
  }

  .souve-returns-app .souve-return-card__aside{
    display:flex;
    align-items:center;
    gap:14px;
    justify-self:end;
    margin-left:10px;
  }

  .souve-returns-app .souve-return-card__chevron{
    font-size:30px;
    line-height:1;
    color:rgba(0,0,0,.30);
  }

  /* =========================
     2) DETAILS TOPBAR
     ========================= */
  .souve-returns-app .souve-details-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
  }

  .souve-returns-app .souve-link,
  .souve-returns-app .souve-returns-back,
  .souve-returns-app .souve-back{
    border:0;
    background:transparent;
    font-weight:600;
    font-size:32px;
    line-height:1;
    cursor:pointer;
    padding:0;
    color:var(--text);
  }

  .souve-returns-app .souve-details-heading,
  .souve-returns-app .souve-returns-heading{
    font-weight:700;
    color:var(--text);
    font-size:22px;
    line-height:1.2;
  }

  .souve-returns-app .souve-details-body,
  .souve-returns-app .souve-return-details{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  /* =========================
     3) DETAILS NEW VIEW
     ========================= */
  .souve-returns-app .souve-return-view{
    display:flex;
    flex-direction:column;
    gap:15px;
  }

  .souve-returns-app .souve-return-view__summary{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:15px;
  }

  .souve-returns-app .souve-summary-card{
    background: var(--card);
    border:1px solid var(--border);
    border-radius:8px;
    padding:20px;
  }

  .souve-returns-app .souve-summary-card__label{
    color:rgba(0,0,0,.60);
    font-size:14px;
    line-height:1.35;
    margin-bottom:10px;
  }

  .souve-returns-app .souve-summary-card__value{
    color:#101820;
    font-size:18px;
    line-height:1.35;
    font-weight:700;
  }

  .souve-returns-app .souve-summary-card__value .woocommerce-Price-amount,
  .souve-returns-app .souve-summary-card__value .amount{
    font-weight:700;
  }

  .souve-returns-app .souve-return-section-card{
    background: var(--card);
    border:1px solid var(--border);
    border-radius:8px;
    padding:20px;
  }

  .souve-returns-app .souve-return-section-card__title{
    margin:0 0 10px;
    color:var(--e-global-color-primary);
    font-size:15px;
    line-height:15px;
    font-weight:700;
  }

  .souve-returns-app .souve-return-items-list{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .souve-returns-app .souve-return-item-card{
    display:grid;
    grid-template-columns: 110px minmax(0,1fr) auto;
    gap:22px;
    align-items:center;
    background:transparent;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
  }

  .souve-returns-app .souve-return-item-card__media{
    min-width:0;
  }

  .souve-returns-app .souve-return-thumb--item{
    width:110px;
    height:110px;
    border-radius:16px;
  }

  .souve-returns-app .souve-return-item-card__body{
    min-width:0;
  }

  .souve-returns-app .souve-return-item-card__title{
    margin:0 0 6px;
    color:#101820;
    font-size:18px;
    line-height:1.35;
    font-weight:700;
  }

  .souve-returns-app .souve-return-item-card__meta{
    color:rgba(0,0,0,.60);
    font-size:15px;
    line-height:1.4;
  }

  .souve-returns-app .souve-return-item-card__price{
    color:#101820;
    font-size:28px;
    line-height:1.2;
    font-weight:700;
    white-space:nowrap;
  }

  .souve-returns-app .souve-return-text-block{
    color:#101820;
    font-size:16px;
    line-height:1.7;
  }

  .souve-returns-app .souve-return-conversation-wrap{
    color:#101820;
  }

  .souve-returns-app .souve-return-conversation-wrap .souve-fs-thread-wrap{
    border:0;
    padding:0;
    line-height:1.6;
  }

  .souve-returns-app .souve-return-conversation-wrap .souve-fs-msg,
  .souve-returns-app .souve-return-conversation-wrap .fs-message,
  .souve-returns-app .souve-return-conversation-wrap .ticket-message,
  .souve-returns-app .souve-return-conversation-wrap .thread-message{
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    margin-bottom:14px;
    background:transparent;
  }

  /* fallback for raw html text blocks */
  .souve-returns-app .souve-text,
  .souve-returns-app .souve-fs-thread-wrap{
    color:rgba(0,0,0,.75);
    line-height:1.6;
  }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 768px){

  .souve-returns-app{
    border-radius:0;
  }

  .souve-returns-app .souve-returns-overlay{
    position:fixed;
    inset:0;
    border-radius:0;
    z-index:9999;
  }

  .souve-returns-app .souve-tabs,
  .souve-returns-app .souve-returns-tabs{
    padding:0 0 0 15px;
    border-radius:0;
    border-bottom:1px solid rgba(0,0,0,.12);
    margin-bottom:0;
    min-height:50px;
  }

  .souve-returns-app .souve-tab.is-active::after{
    bottom:-3px;
  }

  /* =========================
     1) RETURNS LIST
     ========================= */
  .souve-returns-app .souve-returns-list{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .souve-returns-app .souve-return-card{
    background: var(--card);
    border-radius:0;
    overflow:hidden;
    box-shadow:none;
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .souve-returns-app .souve-return-card__hitarea{
    width:100%;
    display:grid;
    grid-template-columns: 84px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:16px 18px;
    border:0;
    background:transparent;
    text-align:left;
    box-shadow:none;
    cursor:pointer;
  }

  .souve-returns-app .souve-return-thumb{
    width:84px;
    height:84px;
    border-radius:14px;
  }

  .souve-returns-app .souve-return-card__meta{
    color:rgba(0,0,0,.55);
    font-size:13px;
    line-height:1.35;
  }

  .souve-returns-app .souve-return-card__title{
    color:#1f1f1f;
    font-size:15px;
    line-height:1.35;
    font-weight:600;
  }

  .souve-returns-app .souve-return-card__summary{
    color:rgba(0,0,0,.55);
    font-size:13px;
    line-height:1.45;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
  }

  .souve-returns-app .souve-return-card__sep{
    margin:0 5px;
    color:rgba(0,0,0,.28);
  }

  .souve-returns-app .souve-return-card__total{
    margin-left:4px;
    color:#1f1f1f;
    font-weight:700;
  }

  .souve-returns-app .souve-return-card__aside{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:flex-end;
  }

  .souve-returns-app .souve-status{
    padding:8px 10px;
    border-radius:10px;
    font-size:12px;
  }

  .souve-returns-app .souve-return-card__chevron{
    display:none;
  }

  /* =========================
     2) DETAILS MOBILE SHELL
     ========================= */
  .souve-returns-app .souve-details-view{
    z-index:3;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    max-width:100vw;
    min-height:100vh;
    background: var(--card);
    overflow-y:auto;
  }

  .souve-returns-app .souve-details-topbar{
    display:grid;
    grid-template-columns: 50px 1fr 50px;
    align-items:center;
    min-height:50px;
    border-bottom:1px solid rgba(0,0,0,.12);
    background: var(--card);
    position:sticky;
    top:0;
    z-index:5;
  }

  .souve-returns-app .souve-link,
  .souve-returns-app .souve-returns-back,
  .souve-returns-app .souve-back{
    border:0;
    background:transparent;
    font-weight:400;
    cursor:pointer;
    font-size:18px;
    width:50px;
    min-height:50px;
    border-radius:0 !important;
  }

  .souve-returns-app .souve-details-heading,
  .souve-returns-app .souve-returns-heading{
    text-align:center;
    font-weight:700;
    color:var(--text);
    font-size:18px;
    line-height:1.2;
  }

  .souve-returns-app .souve-details-body,
  .souve-returns-app .souve-return-details{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:14px 14px 70px;
  }

  /* =========================
     3) DETAILS NEW VIEW
     ========================= */
  .souve-returns-app .souve-return-view{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .souve-returns-app .souve-return-view__summary{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
  }

  .souve-returns-app .souve-summary-card{
    background: var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px 18px;
    min-height:auto;
  }

  .souve-returns-app .souve-summary-card__label{
    color:rgba(0,0,0,.60);
    font-size:13px;
    line-height:1.35;
    margin-bottom:8px;
  }

  .souve-returns-app .souve-summary-card__value{
    color:#101820;
    font-size:16px;
    line-height:1.35;
    font-weight:700;
  }

  .souve-returns-app .souve-return-section-card{
    background: var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px 16px 18px;
  }

  .souve-returns-app .souve-return-section-card__title{
    margin:0 0 14px;
    color:#101820;
    font-size:16px;
    line-height:1.3;
    font-weight:700;
  }

  .souve-returns-app .souve-return-items-list{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .souve-returns-app .souve-return-item-card{
    display:grid;
    grid-template-columns: 86px minmax(0,1fr);
    gap:14px;
    align-items:center;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    background:transparent;
  }

  .souve-returns-app .souve-return-thumb--item{
    width:86px;
    height:86px;
    border-radius:12px;
  }

  .souve-returns-app .souve-return-item-card__title{
    margin:0 0 5px;
    color:#101820;
    font-size:15px;
    line-height:1.35;
    font-weight:700;
  }

  .souve-returns-app .souve-return-item-card__meta{
    color:rgba(0,0,0,.60);
    font-size:13px;
    line-height:1.4;
  }

  .souve-returns-app .souve-return-item-card__price{
    grid-column: 2;
    color:#101820;
    font-size:18px;
    line-height:1.3;
    font-weight:700;
    margin-top:6px;
  }

  .souve-returns-app .souve-return-text-block{
    color:#101820;
    font-size:14px;
    line-height:1.7;
  }

  .souve-returns-app .souve-return-conversation-wrap{
    color:#101820;
  }

  .souve-returns-app .souve-return-conversation-wrap .souve-fs-thread-wrap{
    border:0;
    padding:0;
    line-height:1.6;
  }

  .souve-returns-app .souve-return-conversation-wrap .souve-fs-msg,
  .souve-returns-app .souve-return-conversation-wrap .fs-message,
  .souve-returns-app .souve-return-conversation-wrap .ticket-message,
  .souve-returns-app .souve-return-conversation-wrap .thread-message{
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    margin-bottom:12px;
    background:transparent;
  }

  .souve-returns-app .souve-text,
  .souve-returns-app .souve-fs-thread-wrap{
    color:rgba(0,0,0,.75);
    line-height:1.6;
  }
}