/* Referral Hub front office
 * 0.1.8: theme-safe palette. Surfaces are intentionally neutral/translucent
 * so the module remains readable on both light and dark PrestaShop themes.
 */
.rh-front{
  --rh-border:rgba(127,127,127,.34);
  --rh-border-soft:rgba(127,127,127,.22);
  --rh-surface:rgba(127,127,127,.10);
  --rh-surface-strong:rgba(127,127,127,.16);
  --rh-surface-hover:rgba(127,127,127,.22);
  --rh-muted-opacity:.72;
  color:inherit;
}

.rh-front,
.rh-front h1,
.rh-front h2,
.rh-front h3,
.rh-front h4,
.rh-front h5,
.rh-front h6,
.rh-front p,
.rh-front label,
.rh-front small,
.rh-front span,
.rh-front strong{
  color:inherit;
}

.rh-front-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}
.rh-front-head h2{margin:0 0 4px}
.rh-front-head p{margin-bottom:0;opacity:var(--rh-muted-opacity)}

.rh-code-chip{
  padding:12px 18px;
  border:1px solid var(--rh-border);
  border-radius:12px;
  background:var(--rh-surface-strong);
  color:inherit;
  display:flex;
  flex-direction:column;
}
.rh-code-chip small{opacity:var(--rh-muted-opacity)}
.rh-code-chip strong{font-size:20px;color:inherit}

.rh-front-tabs{display:flex;gap:6px;overflow:auto;border-bottom:1px solid var(--rh-border);margin-bottom:20px}
.rh-front-tabs a{padding:10px 12px;white-space:nowrap;color:inherit!important;opacity:.78;text-decoration:none}
.rh-front-tabs a:hover{color:inherit!important;opacity:1;background:var(--rh-surface);text-decoration:none}
.rh-front-tabs a.active{font-weight:700;border-bottom:3px solid currentColor;opacity:1}

.rh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.rh-card,.rh-panel,.rh-share-box{
  border:1px solid var(--rh-border);
  border-radius:12px;
  background:var(--rh-surface);
  color:inherit;
  padding:18px;
}
.rh-card span,.rh-card strong{display:block;color:inherit}
.rh-card span{opacity:var(--rh-muted-opacity)}
.rh-card strong{font-size:24px;margin-top:5px}
.rh-panel{margin-bottom:18px}
.rh-panel>h3:first-child{margin-top:0}

.rh-share-box{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:22px;margin-bottom:18px}
.rh-share-box>div:first-child{display:flex;flex-direction:column;gap:5px}
.rh-share-box small{opacity:var(--rh-muted-opacity)}
.rh-share-box strong{font-size:28px;color:inherit}
.rh-share-main label{color:inherit}

.rh-copy-row{display:flex;gap:8px}
.rh-front .rh-copy-row input,
.rh-front .rh-application-form .form-control,
.rh-front .rh-application-form input,
.rh-front .rh-application-form textarea,
.rh-front .rh-application-form select{
  min-width:0;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  caret-color:currentColor;
  background-color:var(--rh-surface)!important;
  border:1px solid var(--rh-border)!important;
  box-shadow:none!important;
  opacity:1!important;
}
.rh-copy-row input{flex:1;border-radius:8px;padding:10px}
.rh-front .rh-copy-row input:focus,
.rh-front .rh-application-form .form-control:focus,
.rh-front .rh-application-form input:focus,
.rh-front .rh-application-form textarea:focus,
.rh-front .rh-application-form select:focus{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  background-color:var(--rh-surface-strong)!important;
  border-color:currentColor!important;
  outline:none;
}
.rh-front .rh-application-form textarea::placeholder,
.rh-front .rh-application-form input::placeholder,
.rh-front .rh-copy-row input::placeholder{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:.52!important;
}

.rh-copy-row button{
  border:1px solid var(--rh-border)!important;
  background:var(--rh-surface-strong)!important;
  color:inherit!important;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
}
.rh-copy-row button:hover{background:var(--rh-surface-hover)!important;color:inherit!important}

.rh-levels{display:flex;flex-wrap:wrap;gap:10px}
.rh-levels>div{background:var(--rh-surface-strong);border:1px solid var(--rh-border-soft);border-radius:8px;padding:10px 14px;color:inherit}
.rh-levels span,.rh-levels strong{display:block;color:inherit}
.rh-levels span{opacity:var(--rh-muted-opacity)}

.rh-tree{list-style:none;margin:8px 0 8px 18px;padding-left:16px;border-left:1px solid var(--rh-border)}
.rh-tree>li{margin:9px 0;position:relative;color:inherit}
.rh-tree-node{display:inline-block;padding:7px 10px;background:var(--rh-surface-strong);border:1px solid var(--rh-border-soft);border-radius:8px;color:inherit}

.rh-qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.rh-qr-card{border:1px solid var(--rh-border);border-radius:12px;background:var(--rh-surface);color:inherit;padding:14px;text-align:center;display:flex;flex-direction:column;gap:5px}
.rh-qr-card strong,.rh-qr-card span,.rh-qr-card small{color:inherit}
.rh-qr-card small{opacity:var(--rh-muted-opacity)}
.rh-qr-card img{width:100%;max-width:220px;margin:auto;background:#fff;border-radius:8px;padding:8px}
.rh-links-panel label{display:block;margin-top:16px;font-weight:600;color:inherit}

/* Bootstrap tables often hard-code a light-theme text color. Force only the
   tables inside Referral Hub to inherit the active storefront palette. */
.rh-front .table,
.rh-front table.table{
  color:inherit!important;
  background:transparent!important;
}
.rh-front .table thead th,
.rh-front .table tbody td,
.rh-front .table tbody th,
.rh-front .table tfoot td,
.rh-front .table tfoot th{
  color:inherit!important;
  background:transparent!important;
  border-color:var(--rh-border)!important;
}
.rh-front .table thead th{opacity:.82}
.rh-front .table tbody tr:hover td{background:var(--rh-surface)!important}
.rh-front .table small{color:inherit!important;opacity:var(--rh-muted-opacity)}

/* Affiliate application */
.rh-application-page{max-width:980px;margin:0 auto 2rem;color:inherit}
.rh-application-page .rh-page-head{margin-bottom:1.25rem}
.rh-application-page .rh-eyebrow{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.65;margin-bottom:.3rem}
.rh-application-page .rh-card{background:var(--rh-surface);border:1px solid var(--rh-border);border-radius:8px;padding:1.5rem;margin-bottom:1rem;color:inherit}
.rh-identity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0 1.5rem}
.rh-identity-grid>div{padding:1rem;background:var(--rh-surface);border:1px solid var(--rh-border-soft);border-radius:6px;color:inherit}
.rh-identity-grid span{display:block;font-size:.82rem;opacity:.65;margin-bottom:.25rem;color:inherit}
.rh-request-message{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--rh-border-soft)}
.rh-preline{white-space:pre-line}

/* Preserve PrestaShop's semantic button/alert palettes. For neutral secondary
   QR download buttons, only guarantee readable contrast against custom themes. */
.rh-front .rh-qr-card .btn-secondary{border-color:var(--rh-border)}

@media(max-width:767px){.rh-identity-grid{grid-template-columns:1fr}}
@media(max-width:700px){.rh-share-box{grid-template-columns:1fr}.rh-front-head{align-items:flex-start;flex-direction:column}.rh-copy-row{flex-wrap:wrap}.rh-copy-row input{flex-basis:100%}}

/* Extra dark-mode tuning for browsers/OSes that expose the preference. The
   base rules above already work without this media query. */
@media (prefers-color-scheme: dark){
  .rh-front{
    --rh-border:rgba(255,255,255,.22);
    --rh-border-soft:rgba(255,255,255,.14);
    --rh-surface:rgba(255,255,255,.055);
    --rh-surface-strong:rgba(255,255,255,.095);
    --rh-surface-hover:rgba(255,255,255,.14);
  }
}