@import url("https://www.continente.pt/on/demandware.static/Sites-continente-Site/-/default/v1655960413059/css/checkout/checkout.css");

/* ==========================================================
   Main Wrapper
========================================================== */

.main-wrapper {
    background-color: #f0f0f0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-wrapper #sacos-wrapper {
    background-color: #fff;
    max-width: 810px;
    width: 100%;
    margin: auto;
    padding: 70px 20px 80px;
}

/* ==========================================================
   Headings & Buttons Wrapper
========================================================== */

.main-wrapper #sacos-wrapper h1,
.main-wrapper #sacos-wrapper .btns {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}

.main-wrapper #sacos-wrapper h1 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 32px;
}

/* ==========================================================
   Options Layout
========================================================== */

.main-wrapper #sacos-wrapper h1 .options,
.main-wrapper #sacos-wrapper .btns .options {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.main-wrapper #sacos-wrapper h1 .options .option,
.main-wrapper #sacos-wrapper .btns .options .option {
    position: relative;
    margin: 0 20px;
    transition: border-color 0.7s linear;
}

/* Hidden input */

.main-wrapper #sacos-wrapper h1 .options .option input,
.main-wrapper #sacos-wrapper .btns .options .option input {
    position: absolute;
    opacity: 0;
}

/* Checked state */

.main-wrapper #sacos-wrapper h1 .options .option input:checked ~ label,
.main-wrapper #sacos-wrapper .btns .options .option input:checked ~ label {
    border: 1px solid #eb0203;
}

.main-wrapper #sacos-wrapper h1 .options .option input:checked ~ label span.bullet::after,
.main-wrapper #sacos-wrapper .btns .options .option input:checked ~ label span.bullet::after {
    background-color: #eb0203;
}

/* ==========================================================
   Labels
========================================================== */

.main-wrapper #sacos-wrapper h1 .options .option label,
.main-wrapper #sacos-wrapper .btns .options .option label {
    margin: 0;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    min-width: 130px;
}

.main-wrapper #sacos-wrapper h1 .options .option label:hover,
.main-wrapper #sacos-wrapper .btns .options .option label:hover {
    cursor: pointer;
    border: 1px solid #eb0203;
}

.main-wrapper #sacos-wrapper h1 .options .option label:hover span.bullet::after,
.main-wrapper #sacos-wrapper .btns .options .option label:hover span.bullet::after {
    background-color: #eb0203;
}

/* ==========================================================
   Bullet (Radio)
========================================================== */

.main-wrapper #sacos-wrapper h1 .options .option span.bullet,
.main-wrapper #sacos-wrapper .btns .options .option span.bullet {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e1e1e1;
    width: 19px;
    height: 19px;
    border-radius: 50%;
}

.main-wrapper #sacos-wrapper h1 .options .option span.bullet::after,
.main-wrapper #sacos-wrapper .btns .options .option span.bullet::after {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #e1e1e1;
    border-radius: 50%;
    transition: background-color 0.7s linear;
}

/* ==========================================================
   Label Text
========================================================== */

.main-wrapper #sacos-wrapper h1 .options .option span.label,
.main-wrapper #sacos-wrapper .btns .options .option span.label {
    margin-left: 7px;
}

/* ==========================================================
   Selected Class (JS fallback)
========================================================== */

.main-wrapper #sacos-wrapper h1 .options .option.selected,
.main-wrapper #sacos-wrapper .btns .options .option.selected {
    border: 1px solid #eb0203;
}

.main-wrapper #sacos-wrapper h1 .options .option.selected span.bullet::after,
.main-wrapper #sacos-wrapper .btns .options .option.selected span.bullet::after {
    background-color: #eb0203;
}

form#form-nps {
    background: #F0F0F0;
}

.ct-order-confirmation--feedback-grades-container {
    gap: 16px;
    width: 100%;
    margin-bottom: 16px;
}

@media (max-width: 599px) {
  .ct-order-confirmation--feedback-grades-container {
    justify-content: center !important;
  }
  .ct-order-confirmation--feedback-grades-container-caption {
    justify-content: space-between !important;
  }
}


.confirmation-comment-area {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.ct-order-confirmation--feedback-grades-container .ct-order-confirmation--grade-legend { font-size: 13px }

.ct-order-confirmation--feedback-input-container { width: 100%; }

.ct-textarea-scroll-up {
    position:absolute;
    top: 16px;
    right: 16px;
}

.ct-textarea-scroll-down {
    position:absolute;
    bottom: 16px;
    right: 16px;
}
.ct-order-confirmation--feedback-title {
    font-weight: bold;
    width: 100%;
}

.ct-order-confirmation--feedback-title, 
.ct-order-confirmation--feedback-subtitle {
    font-size: 15px;
}

.ct-order-confirmation--feedback-subtitle {
    margin-bottom: 24px;
}

textarea.ct-order-confirmation--feedback-input::-webkit-input-placeholder { font-size: 14px; }
textarea.ct-order-confirmation--feedback-input::-moz-placeholder { font-size: 14px; }
textarea.ct-order-confirmation--feedback-input:-ms-input-placeholder { font-size: 14px; }


/* ==========================================================
   Buttons
========================================================== */

.main-wrapper #sacos-wrapper h1 .button,
.main-wrapper #sacos-wrapper .btns .button {
    display: inline-block;
}

/* ==========================================================
   NPS / Confirmation
========================================================== */

.nps-entrega {
    background-color: #f0f0f0;
    margin: 0 auto;
    padding: 40px 15px;
}

.ct-order-confirmation--details-container {
    margin: 80px 0 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ct-order-confirmation--feedback-container {
    max-width: 600px;
    margin: 0 auto 30px;
    padding: 40px 15px;
}

.ct-order-confirmation--message-container {
    margin: 30px auto 0;
}

.confirmation-message h1 {
    font-size: 34px;
    font-weight: 700;
}

.confirmation-message p {
    font-size: 24px;
}

.confirmation-message .button {
    display: inline-block;
}

.ta-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.ta {
  width: 100%;
  box-sizing: border-box;
  padding-right: 42px; /* espaço para as setas */
  resize: vertical;
}

/* Botões (overlay à direita, dentro do wrap) */
.ta-scroll {
  position: absolute;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* Cor default (ativa) */
  color: #EB0203;
}

/* posições */
.ta-scroll--up { top: 10px; }
.ta-scroll--down { bottom: 10px; }

/* estado desativado: cinza */
.ta-scroll:disabled {
  color: #C1C1C1;
  cursor: default;
  opacity: 1; /* mantém igual, só muda cor */
}

/* opcional: hover apenas quando ativo */
.ta-scroll:not(:disabled):hover {
  filter: brightness(0.95);
}

.ct-order-confirmation--info-review {
  border-radius: 4px;
  border: 1px solid #004071;
  padding: 16px;
  color: #004071;
  font-size: 13px;
  text-align: left;
  display: flex;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 24px;
}

/* ==========================================================
   Checkout Nav
========================================================== */

.checkout-nav-wrapper {
    background: transparent;
}

.checkout-nav-wrapper .sticky-element {
    background-color: #fff;
    padding: 16px
    z-index: 5;
}

/* ==========================================================
   Veil Overlay
========================================================== */

.veil {
    position: absolute;
    z-index: 1100;
    text-align: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================
   Error Message
========================================================== */

.ct-nps-error-msg {
    text-align: center;
    margin: 20px 0 0;
    padding: 0 10px;
    color: #eb0203;
    line-height: 1.2;
}

/* ==========================================================
   Underline Button
========================================================== */

.underline_button_wrapper {
    text-align: center;
    margin: 20px auto 30px;
}

.underline_button_wrapper .underline_button {
    color: #000;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #000;
}

.underline_button_wrapper .underline_button:hover {
    border-bottom: none;
}