/* HandAgeCheck Partner Websites Billing Foundation v1 */
.hpw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin:22px 0}.hpw-card{display:grid;gap:14px}.hpw-card.active{border-color:rgba(46,204,113,.55);box-shadow:0 0 0 2px rgba(46,204,113,.10)}.hpw-card.pending{border-color:rgba(255,194,87,.42)}.hpw-card-head{display:flex;justify-content:space-between;gap:18px;align-items:start}.hpw-card-head h2{margin:.25rem 0}.hpw-card-head span{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;opacity:.7}.hpw-card-head strong{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem;white-space:nowrap}.hpw-card dl{display:grid;gap:8px}.hpw-card dt{font-size:.78rem;font-weight:800;opacity:.7;text-transform:uppercase;letter-spacing:.06em}.hpw-card dd{margin:0;overflow-wrap:anywhere}.hpw-actions,.hpw-prime-form{display:flex;flex-wrap:wrap;gap:10px}.hpw-add form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hpw-add button{justify-self:start}.hpw-add h2{grid-column:1/-1}@media(max-width:760px){.hpw-card-head{display:grid}.hpw-add form{grid-template-columns:1fr}.hpw-actions,.hpw-prime-form{display:grid}}

/* HAC Prime Layout Fix v1 */
.hpw-prime-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}

.hpw-prime-grid .hpw-card{
  min-width:0;
}

.hpw-prime-grid .hpw-prime-form{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}

.hpw-prime-grid .hpw-prime-form .button{
  width:100%;
  min-width:0;
  min-height:58px;
  height:auto;
  padding:10px 12px;
  white-space:normal;
  text-align:center;
  line-height:1.25;
}

@media(max-width:1120px){
  .hpw-prime-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .hpw-prime-grid .hpw-prime-form{
    grid-template-columns:1fr;
  }
}

/* HAC Website Editor v1 */
.hpw-edit-box{
  margin-top:4px;
  padding:18px;
  border:1px solid rgba(157,92,255,.34);
  border-radius:16px;
  background:rgba(157,92,255,.055)
}

.hpw-edit-box h3{
  margin:0 0 16px;
  font-size:1.25rem
}

.hpw-edit-locked{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px
}

.hpw-edit-locked>div{
  min-width:0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.025)
}

.hpw-edit-locked span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:800
}

.hpw-edit-locked strong,
.hpw-edit-locked code{
  overflow-wrap:anywhere
}

.hpw-edit-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px
}

.hpw-edit-form label{
  display:grid;
  align-content:start;
  gap:7px
}

.hpw-edit-form label>span{
  font-weight:800;
  font-size:.86rem
}

.hpw-edit-form input{
  width:100%;
  min-width:0;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:#0d0c16;
  color:#fff;
  font:inherit
}

.hpw-edit-form input:focus{
  outline:none;
  border-color:rgba(157,92,255,.72);
  box-shadow:0 0 0 3px rgba(157,92,255,.10)
}

.hpw-edit-form small{
  color:var(--muted);
  line-height:1.4
}

.hpw-edit-form .wide{
  grid-column:1/-1
}

.hpw-edit-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:3px
}

@media(max-width:760px){
  .hpw-edit-locked,
  .hpw-edit-form{
    grid-template-columns:1fr
  }

  .hpw-edit-form .wide{
    grid-column:auto
  }
}

/* HAC Per-Website Header Logo v1 */
.hpw-site-logo-editor{
  display:grid;
  gap:12px;
  margin:4px 0 18px;
  padding:15px;
  border:1px solid rgba(157,92,255,.28);
  border-radius:14px;
  background:rgba(157,92,255,.04)
}

.hpw-site-logo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}

.hpw-site-logo-head>div:first-child{
  display:grid;
  gap:5px
}

.hpw-site-logo-head small{
  max-width:680px;
  color:var(--muted);
  line-height:1.45
}

.hpw-site-logo-preview{
  flex:0 0 auto;
  width:120px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0d0c16
}

.hpw-site-logo-preview img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain
}

.hpw-site-logo-upload{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px
}

.hpw-site-logo-upload input[type=file]{
  flex:1 1 280px;
  min-width:0;
  padding:10px;
  border:1px dashed rgba(157,92,255,.42);
  border-radius:12px;
  background:#0d0c16;
  color:var(--muted)
}

.hpw-site-logo-remove{
  margin:0
}

@media(max-width:620px){
  .hpw-site-logo-head{
    align-items:flex-start;
    flex-direction:column
  }

  .hpw-site-logo-preview{
    width:100%;
    height:64px
  }

  .hpw-site-logo-upload{
    display:grid
  }
}


/* ============================================================
   HAC Website Editor Full Width UI v1
   Selected website spans the portal grid.
   Summary left, editor right.
   ============================================================ */

.hpw-grid{
  align-items:start;
}

.hpw-card{
  min-width:0;
}

/* Only the selected website grows. Normal website cards stay compact. */
.hpw-card.is-editing{
  grid-column:1 / -1;

  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  grid-template-areas:
    "head editor"
    "meta editor"
    "actions editor";

  column-gap:28px;
  row-gap:16px;
  align-items:start;

  width:100%;
  min-width:0;
}

/* ------------------------------------------------------------
   LEFT: compact website summary
   ------------------------------------------------------------ */

.hpw-card.is-editing > .hpw-card-head{
  grid-area:head;

  min-width:0;
  margin-bottom:0;
}

.hpw-card.is-editing > .hpw-card-head > div{
  min-width:0;
}

.hpw-card.is-editing > .hpw-card-head strong{
  flex:0 0 auto;
  max-width:100%;
  text-align:left;
}

.hpw-card.is-editing > dl{
  grid-area:meta;

  min-width:0;
  margin:0;
  grid-template-columns:1fr;
  gap:5px;
}

.hpw-card.is-editing > dl dt{
  margin-top:7px;
}

.hpw-card.is-editing > dl dd{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.hpw-card.is-editing > dl code{
  display:block;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-all;
}

.hpw-card.is-editing > .hpw-actions{
  grid-area:actions;

  align-self:start;
  min-width:0;
}

/* ------------------------------------------------------------
   RIGHT: real editor workspace
   ------------------------------------------------------------ */

.hpw-card.is-editing > .hpw-edit-box{
  grid-area:editor;

  width:100%;
  max-width:none;
  min-width:0;

  margin:0;
  padding:24px;

  border:1px solid rgba(157,92,255,.34);
  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      rgba(157,92,255,.065),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 18px 50px rgba(0,0,0,.16);
}

.hpw-card.is-editing > .hpw-edit-box > h3{
  margin:0 0 18px;

  font-size:1.35rem;
  letter-spacing:-.025em;
}

/* Locked Domain + Client ID */

.hpw-card.is-editing .hpw-edit-locked{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;

  margin:0 0 18px;
}

.hpw-card.is-editing .hpw-edit-locked > div{
  min-width:0;

  padding:14px 16px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;

  background:rgba(255,255,255,.025);
}

.hpw-card.is-editing .hpw-edit-locked span{
  display:block;

  margin-bottom:7px;

  color:var(--muted);
  font-size:.76rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.hpw-card.is-editing .hpw-edit-locked strong,
.hpw-card.is-editing .hpw-edit-locked code{
  display:block;

  min-width:0;
  max-width:100%;

  color:#fff;

  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Website logo block */

.hpw-card.is-editing .hpw-site-logo-editor{
  width:100%;
  min-width:0;

  margin:0 0 20px;
  padding:18px;
}

.hpw-card.is-editing .hpw-site-logo-head{
  min-width:0;
}

.hpw-card.is-editing .hpw-site-logo-head > div:first-child{
  min-width:0;
}

.hpw-card.is-editing .hpw-site-logo-preview{
  flex:0 0 150px;

  width:150px;
  height:70px;
}

.hpw-card.is-editing .hpw-site-logo-upload{
  width:100%;
}

.hpw-card.is-editing .hpw-site-logo-upload input[type=file]{
  min-width:260px;
}

/* Main website settings form.
   It is the direct form child of the edit box;
   logo forms are nested inside the logo section and remain untouched.
*/

.hpw-card.is-editing > .hpw-edit-box > form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 18px;

  width:100%;
  min-width:0;
}

.hpw-card.is-editing > .hpw-edit-box > form label{
  min-width:0;
}

.hpw-card.is-editing > .hpw-edit-box > form label span{
  display:block;
  margin-bottom:7px;
}

.hpw-card.is-editing > .hpw-edit-box > form input,
.hpw-card.is-editing > .hpw-edit-box > form select,
.hpw-card.is-editing > .hpw-edit-box > form textarea{
  display:block;

  width:100%;
  min-width:0;
  max-width:100%;

  box-sizing:border-box;
}

.hpw-card.is-editing > .hpw-edit-box > form .wide{
  grid-column:1 / -1;
}

.hpw-card.is-editing > .hpw-edit-box > form > .button,
.hpw-card.is-editing > .hpw-edit-box > form > button{
  justify-self:start;
}

/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media(max-width:1040px){

  .hpw-card.is-editing{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "meta"
      "actions"
      "editor";

    gap:18px;
  }

  .hpw-card.is-editing > dl{
    grid-template-columns:150px minmax(0,1fr);
  }

}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media(max-width:700px){

  .hpw-card.is-editing{
    padding:16px;
  }

  .hpw-card.is-editing > dl{
    grid-template-columns:1fr;
  }

  .hpw-card.is-editing > .hpw-edit-box{
    padding:17px;
  }

  .hpw-card.is-editing .hpw-edit-locked{
    grid-template-columns:1fr;
  }

  .hpw-card.is-editing > .hpw-edit-box > form{
    grid-template-columns:1fr;
  }

  .hpw-card.is-editing > .hpw-edit-box > form .wide{
    grid-column:auto;
  }

  .hpw-card.is-editing .hpw-site-logo-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .hpw-card.is-editing .hpw-site-logo-preview{
    width:100%;
    max-width:none;
    height:68px;
    flex-basis:auto;
  }

  .hpw-card.is-editing .hpw-site-logo-upload{
    display:grid;
    grid-template-columns:1fr;
  }

  .hpw-card.is-editing .hpw-site-logo-upload input[type=file]{
    min-width:0;
    width:100%;
  }

}