/* Common CSS Part Start */

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body
{
    max-width: 100%;
    overflow-x: hidden; overflow-y: auto;
    font-family: var(--font-family);
    background-color: var(--page-bg-color);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    font-size: 14px;
}

small, .small { font-size: 13px;}
strong { font-weight: 600; }
img { max-width: 100%; }

h1, .h1
{
  font-size: 40px;
  font-weight: 900;
  line-height: 42px;
}

h2, .h2
{
  font-size: 32px;
  font-weight: 800;
  line-height: 35px;
}

h3, .h3{
  font-size: 26px;
  font-weight: 700;
  line-height: 28px;
}

h4, .h4{
  font-size: 22px;
  font-weight: 600;
  line-height: 25px;
}

h5, .h5{
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;  
}

h6, .h6{
  font-size: 16px;
  margin-bottom: 0.5rem;
  font-weight: 400;
  color: white;
  line-height: 18px;
}

a{
  text-decoration: none;
}


.mb-1 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-5 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 2rem !important;
}

.mt-3 {
    margin-top: 0.75rem !important;
}

.mt-5 {
  margin-top: 1.5rem !important;
}

.mt-6 {
  margin-top: 2rem !important;
}

.px-2 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.align-items-center {
  align-items: center !important;
}

.text-center {
    text-align: center !important;
}

.text-right
{
    float: right;
    margin: 10px;
    text-align: right !important;
}

.text-secondary {
  color: var(--color-accent) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.muted{color:var(--muted);font-size:13px;font-weight: 500;}

/* Fixed-width mobile layout */
.mobile-frame {
  margin: 20px 0px;
  padding: 0px;
  width: 90%;
  max-width: var(--frame-max-width);
  min-height: 100vh;
  background-color: var(--profile-bg-color);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius:20px;
}

.mobile-frame::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.top {
  background:var(--coral);
  padding:50px 12px 40px;
  color:var(--theme-text-color);
  position:relative;
  text-align:center;
}

.top .right-icon{position:absolute;top:18px;display:flex;width: 40px; height: 40px; border-radius: 50%; background-color: white; opacity: 0.8; color: black; padding: 5px 12px;}
.top .right-icon i{ color: black;}
.top .right-icon{right:14px;}

.top .right-icon1{position:absolute;top:60px;display:flex;width: 40px; height: 40px; border-radius: 50%; background-color: white; opacity: 0.8; color: black; padding: 5px 12px;}
.top .right-icon1 i{ color: black;}
.top .right-icon1{right:14px;}


/* avatar */

.avatar-wrap{
  position: absolute;
  top:60px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.avatar{
  width:140px;
  height:140px;
  border-radius:50%;
  overflow:hidden;
  background:#ddd;
  display:block;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 20px rgba(0,0,0,0.12);
}

.avatar-initials {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.avatar-initials h1 {
  margin: 0;
  color: var(--coral);
  text-transform: uppercase;
  font-size: 60px; /* Adjust font size as needed */
}


.name-block{
  margin-top: 170px; /* enough to clear avatar */
  text-align:center;
}

.name-block h1{
  font-size:20px;
  line-height: 22px;
  color:var(--theme-text-color);
  font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,0.05);
}

.name-block span{
  margin:0;
  color:var(--theme-text-color);
  font-weight:500;
}

.bio {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%; /* Positioning just below the bottom of .top */
  z-index: 9;
  background: var(--white-color);
  color: var(--coral);
  border: none;
  width: 250px;
  height: 40px;
  border-radius: 28px;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  transition: transform .16s ease, box-shadow .16s ease;
  font-size: 16px;
  text-align: center;
  padding: 7px 0px;
}

/* Media query for screens 426px and below */
@media (max-width: 426px) {
  /*.bio {
    top: 330px;
    left: 50%;
    transform: translateX(-50%);
  }*/
}


.bio:active { transform:translateX(-50%) scale(.98); }
.bio.secondary { background:#fff;color:var(--accent); border:1px solid rgba(0,0,0,0.06) }

.businesscprofile
{
  background:var(--white-color);
  margin-top:10px;
  padding:20px 22px 56px;
  min-height:460px;
}

.section{
  padding:10px 0px;
  border-bottom:2px solid #f1f1f1;
}

.section:last-of-type {
  border-bottom: none;
}

.section h3
{
  margin:6px 0 8px;
  font-size:15px;
  color:#222;
}
.section p
{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  margin-bottom: 10px;
  font-weight: 500;
}

.contact-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.contact-item{display:flex;gap:12px;align-items:flex-start}
.contact-item a{text-decoration: none; color:var(--muted);}
.contact-item .icon{min-width:34px;height:34px;border-radius:5px;background:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.12);display:flex;align-items:center;justify-content:center;color:var(--coral);font-weight:700}
.contact-item:last-child{
  margin-bottom: 10px;
}

.links-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;margin-bottom: 10px;}
.link-chip{padding:8px 15px; min-width: 120px; border-radius:999px;background:#f5f5f5;color:#333;text-decoration:none;font-size:13px;font-weight: 500; display:inline-flex;align-items:center;gap:8px;margin-left: 10px;padding-left: 10px;}
.link-chip svg{width:16px;height:16px;opacity:.9}

.btnlink {
  width: 100%;
  margin-top: 20px;
  background:var(--coral);
  color:var(--theme-text-color);
  border:none;
  padding:10px;
  border-radius:28px;
  font-weight:700;
  box-shadow:0 10px 20px rgba(0,0,0,0.12);
  transition:transform .16s ease, box-shadow .16s ease;
  font-size: 16px;
  text-align: center;
  vertical-align: center;
  align-items: center;
  display: block;
}

ul.list-icon {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

ul.list-icon li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

ul.list-icon li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #f06b56;
  font-size: 12px;
}

 /* share/copy buttons row */
.actions {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin:14px 0 8px;
}
.btn {
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border: none;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  color:#fff;
  background:var(--accent);
  box-shadow:0 8px 18px rgba(247,149,30,0.16);
}
.btn.ghost {
  background:#fff;
  color:var(--primary);
  border:1px solid #eee;
  box-shadow:none;
}
.btn i { font-size:14px }

/* fallback share modal */
.share-fallback {
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(0.96);
  width:320px;
  max-width:92%;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.25);
  padding:12px;
  display:none;
  z-index:120;
}
.share-fallback.active { display:block; }
.share-fallback .row { display:flex; gap:8px; justify-content:space-between; margin:8px 0; }
.share-option {
  display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:#333; width:72px;
}
.share-option .icon {
  width:48px;height:48px;border-radius:10px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--primary);
}
.share-fallback .copy-row { display:flex; gap:8px; margin-top:10px; align-items:center; }

/* toast */
.toast {
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.85);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:200;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); pointer-events:auto; }