:root {
--mercora-primary: #0d6efd;
--mercora-secondary: #6c757d;
--mercora-success: #198754;
--mercora-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--mercora-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.225);
--logo-background-image: url('/assets/img/mercora-logo-black.png');
--bs-btn-warning-color: #000000;
--bg-step: #c9ced3;
--text-color: #595c5f;
--bg-login-image: url('/assets/img/bg-login-white.png');
--font-family-base: Verdana, 'Segoe UI', Tahoma, Geneva, sans-serif;
.form-control {background-color: #ffffff; border-color: #c0c0c0;}
.input-group-text {background-color: #e9ecef; border-color: #c0c0c0;}
--bs-body-bg:#f0f0f0;
}

[data-bs-theme="dark"] {
--mercora-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.03);
--mercora-shadow-lg: 0 1rem 3rem rgba(255, 255, 255, 0.045);
--logo-background-image: url('/assets/img/mercora-logo-first.png');
--bs-btn-warning-color: #ffc107;
--bg-step: #032830;
--txt-color: #000000;
--bg-login-image: url('/assets/img/bg-login-gray.png');
.form-control {background-color: #3c364c;border-color: #1c1b1b;}
.input-group-text {background-color: #3c364c; border-color: #1c1b1b;}
.btn-outline-secondary{--bs-btn-border-color:#1c1b1b;}
--bs-body-bg:#212529;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Verdana, 'Segoe UI', Tahoma, Geneva, sans-serif;
}
* {margin: 0;padding: 0;box-sizing: border-box;}
a{text-decoration:none;}
body {background: var(--bs-body-bg);transition: background-color 0.3s ease, color 0.3s ease;font-family: var(--font-family-base);}


.hero-section {background: #0d6efd;color: white;padding: 2rem 0;margin-bottom: 2rem;}

.card {border: none;box-shadow: var(--mercora-shadow);transition: all 0.3s ease;border-radius: 1rem;}
.card:hover {transform: translateY(-2px);box-shadow: var(--mercora-shadow-lg);}

.step-number {width: 2.5rem;height: 2.5rem;background: #0d6efd;color: white;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-weight: bold;margin-right: 0.75rem;flex-shrink: 0;}
.step-item {display: flex;align-items: flex-start;margin-bottom: 1.5rem;padding: 1rem;background: var(--bs-body-bg);border-radius: 0.75rem;border: 1px solid var(--bs-border-color);transition: all 0.3s ease;}
.step-item:hover {background: var(--bs-secondary-bg);border-color: var(--mercora-primary);}

.app-card {background: var(--bs-body-bg);border: 1px solid var(--bs-border-color);border-radius: 0.75rem;padding: 0.5rem;margin-bottom: 0.25rem;transition: all 0.3s ease;display: flex;align-items: center;justify-content: space-between;}
.app-card:hover {background: var(--bs-secondary-bg);border-color: var(--mercora-primary);transform: translateX(2px);}
.app-info {display: flex;align-items: center;gap: 0.75rem;}
.app-links {display: flex;gap: 0.5rem;}
.app-link {width: 2.5rem;height: 2.5rem;border-radius: 0.5rem;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;text-decoration: none;}
.app-link:hover {transform: scale(1.1);}

.android-link {background: #34a853;color: white;}

.ios-link {background: #007aff;color: white;}

.btn {border-radius: 0.75rem;padding: 0.75rem 1.5rem;font-weight: 500;transition: all 0.3s ease;display:block;align-items: center;gap: 0.5rem;}

/* Fix para input-group buttons manterem altura correta */
.input-group .btn {
  padding: 0.375rem 0.75rem;
}

.btn:hover {transform: translateY(-1px);}
.btn-primary {border: none;}
.btn-outline-primary {border: 2px solid var(--mercora-primary);color: var(--mercora-primary);}
.btn-outline-primary:hover {background: var(--mercora-primary);color: white;}
.btn-outline-warning{color: var(--bs-btn-warning-color);}

.theme-toggle {position: fixed;top: 0.5rem;right: 1rem;z-index: 1000;width: 3rem;height: 3rem;border-radius: 50%;border: none;background: var(--bs-body-bg);color: var(--bs-body-color);box-shadow: var(--mercora-shadow);transition: all 0.3s ease;}
.theme-toggle:hover {transform: scale(1.1);box-shadow: var(--mercora-shadow-lg);}

.dev-badge {position: fixed;top: 0rem;left: 0rem;background: var(--bs-danger);color: var(--bs-dark);padding: 0rem 0.5rem;border-radius:0.5rem;font-size: 0.75rem;font-weight: bold;z-index: 1000;}

.user-info {  background: var(--bs-success-bg-subtle);  border: 1px solid var(--bs-success-border-subtle);  border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem;}

.footer-custom {background: var(--bs-dark);color: var(--bs-light);padding: 2rem 0;margin-top: 3rem;}
.footer-custom a {color: var(--bs-light);text-decoration: none;transition: color 0.3s ease;}
.footer-custom a:hover {color: var(--mercora-primary);}


.fade-transition {transition: opacity 0.3s ease;}

.qr-placeholder {width:300px;height:300px;background: var(--bs-secondary-bg);border: 2px dashed var(--bs-border-color);border-radius: 1rem;display: flex;align-items: center;justify-content: center;margin: 1rem auto;color: var(--bs-secondary);}

.logo-mercora{background-image: var(--logo-background-image);width:187px;height:23px;background-size:100% 100%;margin-bottom:20px;}

small{font-size:0.8em}

.input-code{text-align: center;font-size: 1.5em;width: 150px;padding: 10px;margin: 10px 0px;border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204);border-image: initial;border-radius: 4px;}

.code-input-group {margin-bottom: 20px;}       
.code-input {font-size: 1.6rem;text-align: center;letter-spacing: 0.5rem;border: 2px solid #e9ecef;border-radius: 10px;padding: 10px;transition: all 0.3s ease;font-weight: 500;}
.code-input:focus {border-color: #4CAF50;box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);outline: none;}


.alert-msg{padding:10px;color:yellow;background-color:red;border-radius:5px;}

.bg-step{background-color:var(--bg-step);}

.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
/*  color: var(--bd-callout-color, inherit);*/
  border-left: .3rem solid var(--bg-step);
}

.hide{display:none;}

.bg-warning{color:var(--txt-color);}

.ln-footer{font-size:12px;}

/* Estilos para os botões de perfil */
.profile-check-icon {
  display: none;
}
.btn-check:checked + .btn .profile-check-icon {
  display: inline-block;
}

/* Reduzir altura dos botões de perfil */
#d-person .btn {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#alert-message {
  margin-bottom: 1rem;
  height: auto;
  overflow: hidden;
  transition: all 0.3s ease;
}

#alert-message:empty {
  margin: 0;
  padding: 0;
  height: 0;
  visibility: hidden;
  border: none;
  background-color: transparent;
  box-shadow: none;
  display: none;
}

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border:solid 1px var(--bs-body-bg); /* bg div macos */
}
.page-main {
  flex: 1;
  display: flex;
}
#c-login {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
  z-index: 10;
}
#bg-login {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 40%;
  height: 50vh;
  background-image: var(--bg-login-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
}

#d-welcome {
  position: absolute;
  top: 30%;
  left: 15%;
  transform: translateY(-50%);
  text-align: left;
  width: 60%;
  z-index: 1;
}

#d-welcome h1 {
  background-image: var(--logo-background-image);width:374px;height:46px;background-size:100% 100%;
  margin-left:20px;
}

#c-contacts{bottom:0px;}

/* Adicionar transição suave para o c-contacts-xs */
#c-contacts-xs {
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  bottom: 0px;
  z-index: 1;
}

#c-contacts-xs a {
  pointer-events: auto;
}

#c-contacts {
  z-index: 1;
}

@media (max-width: 992px) {
  .hero-section {padding: 1.5rem 0;}
  .step-item {flex-direction: column;text-align: center;}
  .step-number {margin-right: 0;margin-bottom: 0.5rem;}
  .app-card {flex-direction: column;text-align: center;gap: 1rem;}
  #bg-login {width: 80%;}
  #c-login {top: 30%;width:95%;}
  #c-contacts-xs{bottom:100px;}
}

@media (max-width: 768px) {
  #c-contacts-xs{bottom:80px;}
}

@media (max-width: 576px) {
  #c-contacts-xs{bottom:50px;}
  .code-input {font-size: 1.3rem;letter-spacing: 0.3rem;}
}

/* Estilos específicos para página de cadastro */
body.register-page #c-login {
  position: static;
  transform: none;
  top: auto;
  left: auto;
  max-width: 500px;
  margin: 2rem auto;
  width: 100%;
}

body.register-page #c-contacts,
body.register-page #c-contacts-xs {
  position: static;
  margin-top: 2rem;
}

#confirm-info, #info-document {
  font-family: 'Roboto Condensed', sans-serif;
}

@media (max-width: 992px) {
  body.register-page #c-login {
    width: 95%;
  }
}

.bold{font-weight: bold;}