@import url('../../theme11/css/delivery.css');

/* theme12 Checkout — paleta do protótipo checkout_easystore.html */
body.theme12-v1 {
    --dl-bg: #F7F6F3;
    --dl-surface: #FFFFFF;
    --dl-text: #1A1917;
    --dl-muted: #8A8880;
    --dl-border: rgba(26, 25, 23, 0.10);
    --dl-accent: #3C2FA0;
    --dl-accent-dark: #2A2070;
    --dl-cta: #1D9E75;
    --dl-danger: #D85A30;
    --dl-radius: 12px;
    --dl-max-w: 1040px;
}

body.theme12-v2 {
    --dl-bg: #F7F6F3;
    --dl-surface: #FFFFFF;
    --dl-text: #1A1917;
    --dl-muted: #8A8880;
    --dl-border: rgba(26, 25, 23, 0.10);
    --dl-accent: #1D9E75;
    --dl-accent-dark: #177C5C;
    --dl-cta: #3C2FA0;
    --dl-danger: #D85A30;
    --dl-radius: 12px;
    --dl-max-w: 1040px;
}

body.theme12-v3 {
    --dl-bg: #F7F6F3;
    --dl-surface: #FFFFFF;
    --dl-text: #1A1917;
    --dl-muted: #8A8880;
    --dl-border: rgba(26, 25, 23, 0.10);
    --dl-accent: #D85A30;
    --dl-accent-dark: #B84A28;
    --dl-cta: #3C2FA0;
    --dl-danger: #BA7517;
    --dl-radius: 12px;
    --dl-max-w: 1040px;
}

body.theme12-v1,
body.theme12-v2,
body.theme12-v3 {
    background: var(--dl-bg);
    color: var(--dl-text);
    padding-bottom: 90px;
}

body.theme12-v1 .dl-app,
body.theme12-v2 .dl-app,
body.theme12-v3 .dl-app {
    max-width: var(--dl-max-w);
    padding: 0 18px;
}

body.theme12-v1 .dl-header,
body.theme12-v2 .dl-header,
body.theme12-v3 .dl-header {
    background: var(--dl-surface);
    border-bottom: 1px solid var(--dl-border);
    box-shadow: 0 1px 2px rgba(26, 25, 23, 0.05);
}

body.theme12-v1 .dl-status,
body.theme12-v2 .dl-status,
body.theme12-v3 .dl-status {
    background: linear-gradient(135deg, var(--dl-accent), var(--dl-accent-dark));
    color: #fff;
}

body.theme12-v1 .dl-info__title,
body.theme12-v2 .dl-info__title,
body.theme12-v3 .dl-info__title {
    color: var(--dl-accent);
}

body.theme12-v1 .dl-cats__link.is-active,
body.theme12-v2 .dl-cats__link.is-active,
body.theme12-v3 .dl-cats__link.is-active,
body.theme12-v1 .dl-section__title,
body.theme12-v2 .dl-section__title,
body.theme12-v3 .dl-section__title {
    border-color: var(--dl-accent);
}

body.theme12-v1 .dl-cats__link.is-active,
body.theme12-v2 .dl-cats__link.is-active,
body.theme12-v3 .dl-cats__link.is-active {
    background: var(--dl-accent);
}

body.theme12-v1 .dl-btn-add,
body.theme12-v2 .dl-btn-add,
body.theme12-v3 .dl-btn-add,
body.theme12-v1 .dl-btn-buy,
body.theme12-v2 .dl-btn-buy,
body.theme12-v3 .dl-btn-buy,
body.theme12-v1 .dl-btn-primary,
body.theme12-v2 .dl-btn-primary,
body.theme12-v3 .dl-btn-primary,
body.theme12-v1 .dl-payment__submit,
body.theme12-v2 .dl-payment__submit,
body.theme12-v3 .dl-payment__submit {
    background: var(--dl-cta);
}

body.theme12-v1 .dl-btn-buy,
body.theme12-v2 .dl-btn-buy,
body.theme12-v3 .dl-btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

body.theme12-v1 .dl-btn-buy:hover,
body.theme12-v2 .dl-btn-buy:hover,
body.theme12-v3 .dl-btn-buy:hover {
    filter: brightness(0.95);
    color: #fff;
}

body.theme12-v1 .dl-item,
body.theme12-v2 .dl-item,
body.theme12-v3 .dl-item,
body.theme12-v1 .dl-payment,
body.theme12-v2 .dl-payment,
body.theme12-v3 .dl-payment {
    border-radius: var(--dl-radius);
    border: 1px solid var(--dl-border);
    box-shadow: 0 8px 30px rgba(26, 25, 23, 0.06);
}

body.theme12-v1 .dl-item__price ins,
body.theme12-v2 .dl-item__price ins,
body.theme12-v3 .dl-item__price ins {
    color: var(--dl-cta);
}

body.theme12-v1 .dl-form-group input,
body.theme12-v2 .dl-form-group input,
body.theme12-v3 .dl-form-group input,
body.theme12-v1 .dl-form-group select,
body.theme12-v2 .dl-form-group select,
body.theme12-v3 .dl-form-group select,
body.theme12-v1 .dl-form-group textarea,
body.theme12-v2 .dl-form-group textarea,
body.theme12-v3 .dl-form-group textarea {
    border-radius: 9px;
    border-color: rgba(26, 25, 23, 0.16);
}

body.theme12-v1 .dl-form-group input:focus,
body.theme12-v2 .dl-form-group input:focus,
body.theme12-v3 .dl-form-group input:focus,
body.theme12-v1 .dl-form-group select:focus,
body.theme12-v2 .dl-form-group select:focus,
body.theme12-v3 .dl-form-group select:focus,
body.theme12-v1 .dl-form-group textarea:focus,
body.theme12-v2 .dl-form-group textarea:focus,
body.theme12-v3 .dl-form-group textarea:focus {
    border-color: var(--dl-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(60, 47, 160, 0.12);
}

@media (min-width: 881px) {
    body.theme12-v1 .dl-payment,
    body.theme12-v2 .dl-payment,
    body.theme12-v3 .dl-payment {
        max-width: 720px;
        margin: 0 auto;
    }
}

/* ===== Checkout-first — protótipo checkout_easystore.html ===== */
body:has(.ck-proto) {
    background: #F7F6F3 !important;
    padding-bottom: 90px !important;
    color: #1A1917;
}
body:has(.ck-proto) .dl-app {
    max-width: none !important;
    padding: 0 !important;
}

.ck-proto {
    --bg: #F7F6F3;
    --surface: #FFFFFF;
    --bg2: #EFEEEA;
    --border: rgba(26, 25, 23, 0.10);
    --border-md: rgba(26, 25, 23, 0.16);
    --text-1: #1A1917;
    --text-2: #4A4946;
    --text-3: #8A8880;
    --text-4: #B0AEA8;
    --brand: var(--dl-accent, #3C2FA0);
    --brand-light: #EEEDFE;
    --green: #1D9E75;
    --green-dark: #177C5C;
    --green-light: #E1F5EE;
    --amber: #BA7517;
    --amber-light: #FAEEDA;
    --shadow-sm: 0 1px 2px rgba(26, 25, 23, 0.05);
    --radius-lg: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

.ck-proto .wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 28px 18px 20px;
}

.ck-proto .shop {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0 18px;
}

.ck-proto .shop-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--text-1);
}

.ck-proto .shop-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 15px;
}

.ck-proto .shop-logo-img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
}

.ck-proto .shop-name {
    font-size: 14.5px;
    font-weight: 700;
}

.ck-proto .shop-sp { flex: 1; }

.ck-proto .secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--green);
    font-weight: 650;
}

.ck-proto .cols {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 22px;
    align-items: start;
}

@media (max-width: 880px) {
    .ck-proto .cols { grid-template-columns: 1fr; }
    .ck-proto .summary { display: none; }
}

.ck-proto .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 14px;
}

.ck-proto .card-t {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ck-proto .card-t .n {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-1);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex: none;
}

.ck-proto .prod {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ck-proto .prod-img {
    width: 74px;
    height: 74px;
    border-radius: 10px;
    flex: none;
    object-fit: cover;
    background: var(--brand-light);
    display: grid;
    place-items: center;
    color: var(--brand);
    font-size: 26px;
    overflow: hidden;
}

.ck-proto .prod-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ck-proto .prod-name {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
}

.ck-proto .prod-desc {
    font-size: 12.5px;
    color: var(--text-3);
    margin-top: 5px;
    line-height: 1.5;
}

.ck-proto .prod-price {
    font-size: 19px;
    font-weight: 800;
    color: var(--green);
    margin-top: 7px;
}

.ck-proto .prod-price small {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    display: block;
    margin-top: 1px;
}

.ck-proto .f { margin-bottom: 11px; }
.ck-proto .f:last-child { margin-bottom: 0; }
.ck-proto .f label {
    display: block;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text-2);
    margin-bottom: 5px;
}
.ck-proto .f input,
.ck-proto .f select,
.ck-proto .f textarea {
    width: 100%;
    border: 1px solid var(--border-md);
    border-radius: 9px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 14px;
    background: var(--surface);
    color: var(--text-1);
    outline: none;
}
.ck-proto .f input:focus,
.ck-proto .f select:focus,
.ck-proto .f textarea:focus { border-color: var(--brand); }

.ck-proto .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 520px) {
    .ck-proto .row { grid-template-columns: 1fr; }
}

.ck-proto .phone { display: flex; gap: 0; }
.ck-proto .phone .ddd,
.ck-proto .phone .phone-dial {
    border: 1px solid var(--border-md);
    border-right: none;
    border-radius: 9px 0 0 9px;
    padding: 11px 10px;
    background: var(--bg2);
    font-size: 14px;
    font-weight: 650;
    color: var(--text-2);
    display: flex;
    align-items: center;
    flex: none;
    min-width: 72px;
    max-width: 92px;
}
.ck-proto .phone .phone-dial {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
}
.ck-proto .phone input { border-radius: 0 9px 9px 0; }

.ck-proto .pays {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.ck-proto .pay {
    border: 1.5px solid var(--border-md);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text-2);
    background: var(--surface);
    font-family: inherit;
}
.ck-proto .pay.on {
    border-color: var(--text-1);
    color: var(--text-1);
}
.ck-proto .pay i { font-size: 18px; }

.ck-proto .bump {
    border: 1.5px dashed var(--amber);
    background: var(--amber-light);
    border-radius: 11px;
    padding: 14px;
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
}
.ck-proto .bump.on {
    border-style: solid;
    background: var(--green-light);
    border-color: var(--green);
}
.ck-proto .bump .bx {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    border: 2px solid var(--green);
    background: var(--green);
    color: #fff;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 12px;
}
.ck-proto .bump-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--green-dark);
    margin-bottom: 4px;
}
.ck-proto .bump-n { font-size: 13.5px; font-weight: 700; }
.ck-proto .bump-p {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--green);
    margin-top: 6px;
}

.ck-proto .summary { position: sticky; top: 20px; }
.ck-proto .sum-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
}
.ck-proto .sum-t { font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.ck-proto .sum-l {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-2);
    padding: 6px 0;
    gap: 12px;
}
.ck-proto .sum-l.disc { color: var(--green); font-weight: 650; }
.ck-proto .sum-l b { font-weight: 650; color: var(--text-1); }
.ck-proto .sum-div {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
}
.ck-proto .sum-tot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 4px;
}
.ck-proto .sum-tot .tl { font-size: 13.5px; font-weight: 700; }
.ck-proto .sum-tot .tv {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: right;
}
.ck-proto .sum-tot .tv small {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    margin-top: 2px;
}

.ck-proto .buy {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    border: none;
    font-size: 15.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ck-proto .buy:hover { background: var(--green-dark); }
.ck-proto .buy:disabled,
.ck-proto .buy.loading { opacity: 0.7; cursor: default; }

.ck-proto .trust {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
}
.ck-proto .trust-i {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--text-3);
    font-weight: 600;
}
.ck-proto .trust-i i { color: var(--green); font-size: 14px; }

.ck-proto .foot {
    text-align: center;
    padding: 22px 0;
    font-size: 11.5px;
    color: var(--text-4);
    line-height: 1.7;
}

.ck-proto .mbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 11px 16px;
    box-shadow: 0 -4px 20px rgba(26, 25, 23, 0.08);
    align-items: center;
    gap: 12px;
}
@media (max-width: 880px) {
    .ck-proto .mbar { display: flex; }
}
.ck-proto .mbar .mv { flex: 1; min-width: 0; }
.ck-proto .mbar .ml { font-size: 11px; color: var(--text-3); font-weight: 650; }
.ck-proto .mbar .mt { font-size: 17px; font-weight: 800; }
.ck-proto .mbar .buy {
    margin-top: 0;
    width: auto;
    padding: 13px 26px;
    font-size: 14.5px;
}

.ck-proto #dl-shipping-options label,
.ck-proto #dl-shipping-options .dl-shipping-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-md);
    border-radius: 10px;
    padding: 13px 14px;
    margin-bottom: 9px;
    cursor: pointer;
}


/* ===== Credibility upgrade ===== */
.ck-proto .wrap { padding: 36px 18px 110px; }
.ck-proto .shop { padding: 4px 0 14px; }
.ck-proto .secure {
  background: #E1F5EE;
  border: 1px solid rgba(29,158,117,.22);
  border-radius: 999px;
  padding: 7px 12px;
  color: #177C5C;
}
.ck-guarantee {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .ck-guarantee { grid-template-columns: 1fr; }
}
.ck-guarantee-i {
  background: #fff;
  border: 1px solid rgba(26,25,23,.10);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 12px;
  font-weight: 650;
  color: #4A4946;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(26,25,23,.04);
}
.ck-guarantee-i i { color: #1D9E75; font-size: 15px; }
.ck-proto .card {
  box-shadow: 0 10px 28px rgba(26,25,23,.06);
  border-color: rgba(26,25,23,.08);
}
.ck-proto .prod-img {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(26,25,23,.06);
}
.ck-proto .prod-name { font-size: 16px; letter-spacing: -.2px; }
.ck-proto .prod-price { font-size: 22px; }
.ck-proto .pays-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ck-proto .pay-row {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 14px 14px;
  position: relative;
  gap: 12px;
  border-radius: 12px;
}
.ck-proto .pay-row.on {
  border-color: #3C2FA0;
  background: #EEEDFE;
  box-shadow: 0 0 0 1px rgba(60,47,160,.18);
}
.ck-proto .pay-ico {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(26,25,23,.10);
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
}
.ck-proto .pay-ico img { width: 28px; height: auto; object-fit: contain; }
.ck-proto .pay-ico.wa { color: #1D9E75; font-size: 20px; }
.ck-proto .pay-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-proto .pay-title { font-size: 14px; font-weight: 750; color: #1A1917; }
.ck-proto .pay-sub { font-size: 12px; color: #8A8880; font-weight: 550; }
.ck-proto .pay-brands { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ck-proto .pay-brands .brand {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  background: #1A1917;
  border-radius: 4px;
  padding: 3px 5px;
}
.ck-proto .pay-empty {
  margin: 0;
  color: #8A8880;
  font-size: 13px;
  line-height: 1.5;
}
.ck-proto .pay-detail {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(26,25,23,.10);
  border-radius: 12px;
  background: #FAFAF8;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ck-proto .pay-detail .fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.ck-proto .pay-detail .fld span {
  font-size: 12px;
  font-weight: 650;
  color: #5C5A52;
}
.ck-proto .pay-detail .fld input[type="text"],
.ck-proto .pay-detail .fld input[type="file"] {
  width: 100%;
  border: 1px solid rgba(26,25,23,.14);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}
.ck-proto .ck-card-el {
  padding: 12px;
  border: 1px solid rgba(26,25,23,.14);
  border-radius: 10px;
  background: #fff;
}
.ck-proto .ck-card-err {
  color: #C0392B;
  font-size: 12px;
  min-height: 1em;
}
.ck-proto .bank-info {
  font-size: 13px;
  line-height: 1.55;
  color: #1A1917;
}
.ck-proto .buy {
  background: linear-gradient(180deg, #22B885 0%, #1D9E75 100%);
  box-shadow: 0 8px 18px rgba(29,158,117,.28);
  letter-spacing: -.1px;
}
.ck-proto .buy:hover { background: #177C5C; }
.ck-proto .sum-card {
  box-shadow: 0 14px 34px rgba(26,25,23,.08);
  border: 1px solid rgba(26,25,23,.08);
}
.ck-proto .sum-tot .tv { font-size: 26px; }