/* =====================================
   MEMORA CREATIONS PROFILE PAGE
===================================== */


.profile-body{
  min-height:100vh;
  position:relative;

  background:
    linear-gradient(
      180deg,
      #faf8f5,
      #fffdfb
    );
}


.profile-watermark{
  position:fixed;

  left:50%;
  top:55%;

  transform:
    translate(-50%,-50%)
    rotate(-22deg);

  width:100%;

  text-align:center;

  white-space:nowrap;

  color:
    rgba(138,90,59,.035);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(55px,10vw,150px);

  font-weight:900;

  letter-spacing:.12em;

  pointer-events:none;

  user-select:none;

  z-index:0;
}


.profile-page{
  position:relative;

  z-index:1;

  padding:
    24px 0 55px;
}


/* HERO */

.profile-hero{
  margin-bottom:26px;

  padding:
    clamp(34px,5vw,56px);

  border:
    1px solid #e8ddd3;

  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      rgba(242,227,213,.97),
      rgba(255,251,247,.97)
    );

  box-shadow:
    0 18px 44px
    rgba(61,39,23,.06);
}


.profile-eyebrow{
  margin-bottom:8px;

  color:#9b613c;

  font-size:10px;

  font-weight:900;

  letter-spacing:.23em;
}


.profile-hero h1{
  margin:0;

  color:#2b1b12;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(44px,6vw,68px);

  line-height:.98;
}


.profile-hero p{
  max-width:600px;

  margin:
    15px 0 0;

  color:#746a63;

  font-size:15px;

  line-height:1.6;
}


/* LAYOUT */

.profile-layout{
  display:grid;

  grid-template-columns:
    minmax(300px,.75fr)
    minmax(0,1.25fr);

  gap:22px;

  align-items:start;
}


/* CARD */

.profile-card,
.profile-support-card{
  margin-bottom:20px;

  padding:22px;

  border:
    1px solid #e7dbd1;

  border-radius:22px;

  background:
    rgba(255,255,255,.97);

  box-shadow:
    0 12px 30px
    rgba(61,39,23,.055);
}


.profile-card-heading{
  margin-bottom:19px;
}


.profile-card-heading span,
.profile-support-heading > span{
  display:block;

  margin-bottom:5px;

  color:#9b613c;

  font-size:9px;

  font-weight:900;

  letter-spacing:.20em;
}


.profile-card-heading h2,
.profile-support-heading h2{
  margin:0;

  color:#302119;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:27px;
}


/* FIELD */

.profile-field{
  margin-bottom:14px;
}


.profile-field label{
  display:block;

  margin-bottom:7px;

  color:#47362c;

  font-size:12px;

  font-weight:800;
}


.profile-input{
  width:100%;

  min-height:52px;

  padding:
    0 14px;

  border:
    1px solid #e3d7cd;

  border-radius:13px;

  background:#fffdfa;

  color:#2c2019;

  font:inherit;

  outline:none;
}


.profile-input:focus{
  border-color:#b7835d;

  box-shadow:
    0 0 0 4px
    rgba(183,131,93,.10);
}


.profile-disabled{
  background:#f5f1ed;

  color:#8c8179;
}


.profile-textarea{
  min-height:100px;

  padding:13px;

  resize:vertical;
}


/* BUTTON */

.profile-save-btn,
.profile-logout-btn{
  width:100%;

  min-height:50px;

  border-radius:13px;

  font:inherit;

  font-size:13px;

  font-weight:900;

  cursor:pointer;
}


.profile-save-btn{
  border:0;

  background:
    linear-gradient(
      180deg,
      #9b613c,
      #7e492a
    );

  color:#fff;

  box-shadow:
    0 10px 22px
    rgba(138,90,59,.20);
}


.profile-logout-btn{
  margin-top:10px;

  border:
    1px solid #f0cfcc;

  background:#fff2f1;

  color:#ad3026;
}


/* CUSTOMER CARE */

.profile-support-heading p{
  margin:
    9px 0 17px;

  color:#786e67;

  font-size:12px;

  line-height:1.6;
}


.profile-support-link{
  margin-bottom:10px;

  padding:13px;

  border:
    1px solid #e8ddd4;

  border-radius:15px;

  display:grid;

  grid-template-columns:
    44px 1fr auto;

  gap:11px;

  align-items:center;

  background:#fffdfa;
}


.profile-support-link:last-child{
  margin-bottom:0;
}


.support-icon{
  width:44px;
  height:44px;

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;
}


.support-icon.whatsapp{
  background:#eaf8ef;
}


.support-icon.email{
  background:#f3e7dc;
}


.profile-support-link strong{
  display:block;

  margin-bottom:3px;

  color:#36261d;

  font-size:12px;
}


.profile-support-link span{
  display:block;

  color:#81766e;

  font-size:10px;

  word-break:break-word;
}


/* ADDRESS */

.address-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    0 13px;
}


.address-grid .full{
  grid-column:
    1 / -1;
}


.default-address-check{
  margin:
    3px 0 18px;

  padding:12px;

  border:
    1px solid #e7ddd4;

  border-radius:13px;

  background:#fbf7f3;

  display:flex;

  gap:9px;

  align-items:flex-start;

  color:#5f554e;

  font-size:11px;

  line-height:1.5;
}


.default-address-check input{
  accent-color:#8a5a3b;
}


/* ADDRESS CARD GENERATED BY JS */

.saved-address-card{
  margin-bottom:11px;

  padding:16px;

  border:
    1px solid #e7ddd4;

  border-radius:17px;

  background:#fffdfa;
}


.saved-address-top{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-bottom:9px;
}


.saved-address-title{
  color:#34251c;

  font-size:14px;

  font-weight:900;
}


.default-badge{
  padding:
    5px 8px;

  border-radius:999px;

  background:#f3e5d9;

  color:#8a5a3b;

  font-size:9px;

  font-weight:900;
}


.saved-address-card p{
  margin:
    0 0 13px;

  color:#756b64;

  font-size:11px;

  line-height:1.7;
}


.saved-address-actions{
  display:flex;

  gap:7px;

  flex-wrap:wrap;
}


.saved-address-actions button{
  min-height:38px;

  padding:
    0 12px;

  border-radius:10px;

  font:inherit;

  font-size:10px;

  font-weight:900;

  cursor:pointer;
}


.edit-address{
  border:
    1px solid #ded2c8;

  background:#f5eee8;

  color:#38281f;
}


.delete-address{
  border:
    1px solid #f0cfcc;

  background:#fff2f1;

  color:#ad3026;
}


.profile-loading,
.profile-empty{
  padding:35px 15px;

  border:
    1px dashed #d9cabd;

  border-radius:16px;

  text-align:center;

  color:#81766e;

  font-size:12px;
}


/* EDIT DIALOG */

.profile-dialog-overlay{
  position:fixed;

  inset:0;

  z-index:9999;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;

  background:
    rgba(24,15,10,.68);

  backdrop-filter:
    blur(5px);
}


.profile-dialog{
  width:
    min(560px,96vw);

  max-height:90vh;

  overflow:auto;

  padding:23px;

  border-radius:22px;

  background:#fffaf6;

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.26);
}


.profile-dialog h2{
  margin:
    0 0 18px;

  color:#302119;

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


.profile-dialog-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;

  margin-top:18px;
}


.profile-dialog-actions button{
  min-height:46px;

  border-radius:12px;

  font:inherit;

  font-size:12px;

  font-weight:900;

  cursor:pointer;
}


.dialog-cancel{
  border:
    1px solid #ded2c8;

  background:#f5eee8;

  color:#38281f;
}


.dialog-save{
  border:0;

  background:#8a5a3b;

  color:#fff;
}


/* FOOTER */

.profile-footer{
  position:relative;
  z-index:2;

  margin-top:35px;

  padding:
    35px 15px 105px;

  background:#21160f;

  color:#b8aca4;

  text-align:center;
}


.profile-footer strong{
  display:block;

  margin-bottom:7px;

  color:#fff;

  font-size:15px;

  letter-spacing:.09em;
}


.profile-footer p{
  margin:0;

  font-size:12px;
}


/* TABLET */

@media(max-width:900px){

  .profile-layout{
    grid-template-columns:1fr;
  }

}


/* MOBILE */

@media(max-width:600px){

  .profile-page{
    padding-top:12px;
  }


  .profile-hero{
    padding:
      31px 20px;

    border-radius:21px;
  }


  .profile-hero h1{
    font-size:42px;
  }


  .profile-card,
  .profile-support-card{
    padding:16px;

    border-radius:18px;
  }


  .address-grid{
    grid-template-columns:1fr;
  }


  .address-grid .full{
    grid-column:auto;
  }


  .profile-dialog-actions{
    grid-template-columns:1fr;
  }


  .profile-watermark{
    font-size:
      clamp(42px,15vw,80px);

    color:
      rgba(138,90,59,.03);
  }

}