/* Orbizzy LinkBio - Cloudflare Pages (modular)
   CSS extracted from original single-file version.
*/
:root{
  --brand-color:#fec639;
  --brand-color-light:#fdd87a;
  --brand-color-dark:#e8b22a;
  --text-dark:#1a1a1a;
  --text-light:#666666;
  --border-color:#e0e0e0;
  --bg-color-1:#fdf5e7;
  --bg-color-2:#f4f0e9;
  --success-color:#28a745;
  --error-color:#dc3545;
  --story-gradient:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}

html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Poppins",sans-serif;
  background:linear-gradient(-45deg,var(--bg-color-1),var(--bg-color-2));
  background-size:400% 400%;
  animation:gradient-bg 15s ease infinite;
  color:var(--text-dark);
  padding:70px 15px 30px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  flex-direction:column;
  min-height:100vh;
}
@keyframes gradient-bg{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
a{text-decoration:none;color:inherit}
ul{list-style:none;padding:0;margin:0}

/* Banner topo */
.construction-banner{
  position:fixed;top:0;left:0;width:100%;
  background-color:var(--brand-color);
  color:var(--text-dark);
  text-align:center;
  padding:10px 15px;
  font-size:.9em;
  font-weight:600;
  z-index:999;
  box-shadow:0 2px 5px rgba(0,0,0,.1);
  box-sizing:border-box;
}
.verified-badge{
  color:#0095f6;
  font-size:.45em;
  vertical-align:middle;
  margin-left:5px;
  position:relative;
  top:-2px;
}

/* Loader */
#loader{
  position:fixed;inset:0;background-color:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  z-index:9999;
  transition:opacity .6s ease;
}
.dots-loader{display:flex;gap:8px}
.dots-loader span{
  width:12px;height:12px;background-color:var(--brand-color);
  border-radius:50%;
  animation:bounce 1.2s infinite ease-in-out;
}
.dots-loader span:nth-child(2){animation-delay:.2s}
.dots-loader span:nth-child(3){animation-delay:.4s}
@keyframes bounce{
  0%,80%,100%{transform:scale(1);opacity:.6}
  40%{transform:scale(1.5);opacity:1}
}
.loader-text{margin-top:20px;font-size:16px;color:#333;letter-spacing:.5px}

/* Layout */
.page-wrapper{max-width:680px;width:100%;margin:auto;position:relative;z-index:2}
.cover-banner{
  width:100%;height:200px;
  background-image:var(--cover-image, url("https://cdn-blog-backend.tiendanube.com/blogs/019/77c/f51/909711196d29b6b55295bab/covers/0198b000-d72f-7bbd-aabc-2939834ac184.jpg"));
  background-size:cover;background-position:center;
  border-radius:24px;
  box-shadow:0 8px 32px rgba(0,0,0,.1);
}
.content-card{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(25px) brightness(1.1);
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  box-shadow:0 8px 32px rgba(0,0,0,.1);
  padding:0 30px 30px;
  text-align:center;
  margin-top:-80px;
  position:relative;
  z-index:2;
}
.header{padding-top:25px;margin-bottom:30px;position:relative}
.clickable-header{cursor:pointer;display:inline-block}
.logo{
  width:120px;height:120px;border-radius:50%;
  object-fit:cover;display:block;margin:0 auto 15px;
  cursor:pointer;padding:3px;background:var(--story-gradient);
  border:3px solid #fff;
  box-shadow:0 5px 20px rgba(0,0,0,.15);
  transition:transform .2s ease;
}
.logo:active{transform:scale(.95)}
h1{font-size:2.2em;font-weight:700;margin:0;color:var(--text-dark);transition:color .3s ease}
.tagline{font-size:1.1em;color:var(--text-light);margin-top:5px;font-family:"Nunito",sans-serif}

/* Header buttons */
.header-buttons-wrapper{
  position:absolute;top:25px;left:25px;right:25px;
  display:flex;justify-content:space-between;align-items:center;
}
.create-link-button{
  background-color:var(--brand-color);color:var(--text-dark);
  padding:8px 16px;border-radius:50px;
  font-size:.9em;font-weight:600;display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition:all .3s ease;
  cursor:pointer;
}

.create-link-button.icon-only{
  padding:0;
  width:44px;height:44px;
  border-radius:999px;
  justify-content:center;
  gap:0;
}
.create-link-button.icon-only i{font-size:18px}
.create-link-button.icon-only span{display:none}
.create-link-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(254,198,57,.4)}
.language-selector{cursor:pointer;position:relative}
.language-icon{font-size:24px;color:var(--text-light);transition:color .3s ease}
.language-selector:hover .language-icon{color:var(--brand-color)}
.dropdown-content{
  display:none;position:absolute;right:0;background-color:#fff;min-width:160px;
  box-shadow:0 8px 16px rgba(0,0,0,.1);
  border-radius:8px;padding:8px 0;margin-top:10px;
  animation:fadeIn .3s ease-out;z-index:10;border:1px solid #eee;
}
.dropdown-content.show{display:block}
.dropdown-content a{
  color:var(--text-dark);
  padding:12px 16px;
  display:block;text-align:left;
  transition:background-color .2s ease;
  font-size:.9em;font-weight:500;
}
.dropdown-content a:hover{background-color:#f1f1f1}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* Social icons */
.social-icons{
  margin-top:20px;margin-bottom:25px;
  display:flex;justify-content:center;gap:12px;
  font-size:1.6em;
}
.social-icons a{
  width:45px;height:45px;border-radius:50%;
  background-color:var(--brand-color);
  color:var(--text-dark);
  display:flex;justify-content:center;align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  transition:all .2s ease;
}
.social-icons a:hover{
  background-color:var(--brand-color-dark);color:#fff;
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 5px 15px rgba(0,0,0,.2);
}

/* Links */
.links-wrapper{display:grid;gap:16px}
.link-button{
  display:flex;align-items:center;text-align:left;
  padding:15px;border-radius:12px;
  transition:all .3s cubic-bezier(.25,.8,.25,1);
  font-size:.9em;font-weight:500;
}
.link-button i{font-size:1.4em;width:30px;text-align:center;margin-right:15px}
.primary-link{
  background:linear-gradient(135deg,var(--brand-color),var(--brand-color-dark));
  box-shadow:0 4px 15px rgba(254,198,57,.4);
  color:var(--text-dark);
  font-weight:600;
}
.primary-link:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 8px 25px rgba(254,198,57,.5)}
.secondary-link{
  background-color:rgba(255,255,255,.5);
  border:1px solid var(--border-color);
  color:var(--text-light);
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.secondary-link i{color:var(--brand-color)}
.secondary-link:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  border-color:var(--brand-color-light);
  color:var(--text-dark);
}
.secondary-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Section navigation */
.hidden-section{display:none;padding-top:30px;text-align:left}
.hidden-section.active{display:block;animation:fadeIn .6s ease}
.section-header{text-align:center;margin-bottom:25px}
.section-header h2{font-size:1.8em;font-weight:700;margin:0 0 10px}
.back-to-links-btn{margin-bottom:25px !important}

.content-block{
  margin-bottom:20px;
  padding:15px;
  background:rgba(255,255,255,.7);
  border-radius:10px;
  border:1px solid var(--border-color);
}
.job-listing h4,.step-guide h3{margin-top:0;font-size:1.1em;color:var(--brand-color-dark)}
.job-tags span{
  display:inline-block;background-color:var(--bg-color-1);color:var(--text-light);
  font-size:.8em;padding:3px 8px;border-radius:5px;margin-right:8px;margin-bottom:5px;
}
.step-guide{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}
.step-guide .icon{font-size:2em;color:var(--brand-color)}

/* Offers banner */
.offer-banner-container{
  width:100%;overflow:hidden;border-radius:15px;margin-bottom:20px;position:relative;height:180px;
}
.banner-track{
  display:flex;width:300%;
  animation:slide-banners 12s infinite ease-in-out;
}
.banner-track img{width:100%;height:180px;object-fit:cover}
@keyframes slide-banners{
  0%,25%{transform:translateX(0)}
  33%,58%{transform:translateX(-33.33%)}
  66%,91%{transform:translateX(-66.66%)}
  100%{transform:translateX(0)}
}
.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:25px;
}
.category-item{text-align:center;font-size:.75em;color:var(--text-dark)}
.category-icon{
  width:50px;height:50px;background:#fff;border-radius:12px;
  display:flex;justify-content:center;align-items:center;margin:0 auto 5px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  border:1px solid #eee;
}
.promo-badge{
  background:#dc3545;color:#fff;font-size:.7em;padding:2px 8px;border-radius:50px;
  position:absolute;top:10px;left:10px;z-index:5;
}

/* Modal (wizard) */
.creation-flow-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;justify-content:center;align-items:center;
  z-index:10002;opacity:0;transition:opacity .3s ease;
}
.creation-flow-overlay.active{display:flex;opacity:1}
.creation-flow-modal{
  background:#fff;border-radius:15px;width:90%;max-width:450px;
  position:relative;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.creation-flow-modal.compact{max-width:400px;padding:15px}
.close-modal-btn{
  position:absolute;top:10px;right:10px;background:none;border:none;
  font-size:2em;cursor:pointer;color:var(--text-light);
}
.modal-steps-container{overflow:hidden;position:relative;transition:height .4s ease;min-height:400px}
.modal-step{
  position:absolute;top:0;width:100%;
  transition:transform .4s ease;padding:10px 0;box-sizing:border-box;
}
.modal-step:not(.active){opacity:0;pointer-events:none}
.modal-step.active{position:relative;transform:translateX(0);opacity:1;pointer-events:auto}

.template-grid-8{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  max-height:300px;overflow-y:auto;padding-right:5px;
}
.template-item{
  border:3px solid transparent;border-radius:10px;overflow:hidden;
  cursor:pointer;transition:border-color .2s ease, transform .2s ease;
}
.template-item:hover{border-color:var(--brand-color);transform:translateY(-3px)}
.template-item img{width:100%;height:auto;display:block}

.info-form .form-group{margin-bottom:15px;text-align:left}
.info-form label{display:block;font-weight:600;margin-bottom:5px;font-size:.9em}
.info-form input,.info-form select{
  width:100%;padding:10px;border:1px solid var(--border-color);
  border-radius:8px;box-sizing:border-box;font-size:1em;
}
.action-button{
  width:100%;padding:12px;background-color:var(--brand-color);color:var(--text-dark);
  border:none;border-radius:50px;font-size:1em;font-weight:600;cursor:pointer;
  margin-top:20px;transition:background-color .3s ease;
  display:flex;justify-content:center;align-items:center;gap:10px;
}
.action-button:hover{background-color:var(--brand-color-dark)}
.action-button.is-success{background-color:var(--success-color);color:#fff}
.back-button{
  background:none;border:none;color:var(--text-light);
  font-size:.9em;margin-top:10px;cursor:pointer;
}

/* PIX */
.pix-payment-content{text-align:center}
.order-summary{
  background:#f9f9f9;padding:15px;border-radius:10px;margin-bottom:20px;text-align:left;
}
.order-summary.highlight-orbizzy{
  background-color:var(--brand-color-light);
  border:2px solid var(--brand-color);
  padding:20px;
}
.summary-item{
  display:flex;justify-content:space-between;font-size:.9em;
  padding:5px 0;border-bottom:1px dashed #eee;
}
.summary-item:last-child{border-bottom:none}
.pix-qr-code img{width:150px;height:150px;border:1px solid var(--border-color);margin:10px auto;display:block}
.pix-copy-paste{
  background:#eee;padding:10px;border-radius:8px;margin-bottom:15px;
  overflow-wrap:break-word;font-family:"Courier New",monospace;font-size:.8em;
}
.pix-copy-paste p{margin:0;color:var(--text-dark)}
.status-box{
  padding:10px;border-radius:8px;margin-top:15px;text-align:left;
}
.status-box.warning{background:#fff3cd;color:#856404}
.status-box.success{background:#d4edda;color:#155724}

/* Stories */
#story-modal{
  display:none;position:fixed;inset:0;background:#000;z-index:10005;
  justify-content:center;align-items:center;
}
.story-container{
  width:100%;max-width:450px;height:100%;
  position:relative;background:#000;
  display:flex;flex-direction:column;
}
@media (min-width:480px){
  .story-container{height:90vh;border-radius:15px;overflow:hidden}
}
#progress-container{
  position:absolute;top:15px;left:0;width:100%;
  display:flex;gap:5px;padding:0 10px;box-sizing:border-box;z-index:100;
}
.progress-bg{flex:1;height:2px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.progress-fill{width:0%;height:100%;background:#fff}
.story-header{
  position:absolute;top:30px;left:15px;display:flex;align-items:center;gap:10px;
  z-index:100;color:#fff;
}
.story-header img{width:32px;height:32px;border-radius:50%;border:1px solid #fff}
.story-header span{font-weight:600;font-size:14px;text-shadow:1px 1px 2px rgba(0,0,0,.5)}
.story-close{
  position:absolute;top:25px;right:15px;
  color:#fff;font-size:30px;cursor:pointer;z-index:110;font-weight:bold;
  background:none;border:none;
}
#story-content{
  flex:1;width:100%;
  display:flex;align-items:center;overflow:hidden;background:#000;
}
.story-tapzones{position:absolute;inset:0;display:flex;z-index:50}
.story-tapzones button{flex:1;cursor:pointer;background:transparent;border:none}
.story-tapzones button.next{flex:2}
.story-footer{
  padding:20px;background:linear-gradient(transparent, rgba(0,0,0,.8));
  position:absolute;bottom:0;width:100%;box-sizing:border-box;z-index:100;
  display:flex;align-items:center;gap:15px;
}
.story-footer input{
  flex:1;background:transparent;border:1px solid rgba(255,255,255,.5);
  border-radius:30px;padding:8px 15px;color:#fff;outline:none;
}
.story-footer i{color:#fff;font-size:1.4em}

/* Helpers */
.link-danger{border-color:#ffcccc !important}
.link-danger i{color:#dc3545 !important}
.center{text-align:center}
.whatsapp-share{
  background-color:#25D366;color:#fff;justify-content:center;
}

/* Footer */
footer{
  padding-top:30px;font-size:.85em;color:var(--text-light);text-align:center;
  border-top:1px solid var(--border-color);
  margin-top:30px;font-family:"Nunito",sans-serif;width:100%;
}
.footer-cta{
  text-align:center;margin-bottom:25px;padding:20px;
  background:rgba(254,198,57,.1);
  border-radius:15px;border:1px dashed var(--brand-color);
}
.footer-cta p{margin-bottom:15px;font-weight:600;color:var(--text-dark)}
.footer-create-btn{justify-content:center}

/* Responsividade */
@media (max-width:480px){
  .secondary-links-grid{grid-template-columns:1fr}
  .header-buttons-wrapper{top:15px;left:15px;right:15px}
  .create-link-button{font-size:.8em;padding:6px 12px}
}
@media (min-width:481px) and (max-width:1024px){
  .content-card{margin-top:-50px}
  .header{padding-top:40px}
  .logo{width:130px;height:130px;margin-bottom:10px}
}

@media (max-width: 520px){
  .header-buttons-wrapper{top:12px;left:12px;right:12px}
  .create-link-button.icon-only{width:42px;height:42px}
}


/* Hide header action buttons when creation flow modal is open (prevents overlap on Link Bill / mobile) */
body.modal-open #main-header .header-buttons-wrapper{display:none !important;}