/* Arquivo: css/style.css */
html, body { touch-action: pan-x pan-y pinch-zoom; }
body { font-family: 'Montserrat', sans-serif; overflow: hidden; background-color: #F9F9F8; margin: 0; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

#preloader_screen { transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out; opacity: 1; visibility: visible; }

.opt-btn { font-size: 9px; padding: 10px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; color: #4A4A4A; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s; text-align: center; cursor: pointer; background: #fff; font-weight: 500; display: flex; align-items: center; justify-content: center; white-space: normal; line-height: 1.2; }
.opt-btn:hover { border-color: #121212; color: #121212; }
.opt-btn.selected { background-color: #121212; color: #fff; border-color: #121212; font-weight: 600; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }

.color-swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.color-swatch:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.color-swatch.selected { border: 2px solid #121212; transform: scale(1.15); outline: 2px solid white; outline-offset: -3px; }
.color-swatch.white-swatch.selected { border-color: #d1d5db; }
.vc-more-colors-toggle {
    flex: 0 0 100%;
    width: fit-content;
    margin-top: 3px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: rgba(18,18,18,.66);
    cursor: pointer;
    font: 600 9px/1.2 Montserrat, sans-serif;
    letter-spacing: .14em;
    padding: 5px 0 3px;
    text-transform: uppercase;
}
.vc-more-colors-toggle:hover { color: #121212; }

/* Details and women’s Dressage base use one consistent vertical rhythm.
   These sections intentionally have no divider borders: separation comes
   only from whitespace, so headings can never collide with the controls
   above them when a conditional block is shown or hidden. */
#female-dressage-back-detail-color-section,
#piping-options-section,
#female-dressage-back-detail-lines-section,
#lines-color-container,
#buttons-options-section {
    border: 0 !important;
}
#female-dressage-back-detail-color-section {
    margin-top: 0 !important;
    padding-top: 32px !important;
}
#piping-options-section {
    padding-bottom: 0 !important;
}
#female-dressage-back-detail-lines-section,
#lines-color-container,
#buttons-options-section {
    margin-top: 0 !important;
    padding-top: 32px !important;
    padding-bottom: 0 !important;
}

.img-swatch { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; background-size: contain; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); background-color: #fff; }
.img-swatch:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.25); }
.img-swatch.selected { border: 2px solid #121212; transform: scale(1.15); outline: 2px solid white; outline-offset: -3px; }

.vc-lining-preview { display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; align-items:center; margin-top:14px; padding:10px; border:1px solid rgba(18,18,18,.08); border-radius:14px; background:#f7f6f2; }
.vc-lining-preview[hidden] { display:none!important; }
.vc-lining-preview__media { position:relative; display:block; width:112px; height:82px; padding:0; overflow:hidden; border:0; border-radius:10px; background:#252525; cursor:zoom-in; }
.vc-lining-preview__image { display:block; width:112px; height:82px; object-fit:cover; border-radius:10px; background:#252525; transition:transform .25s ease; }
.vc-lining-preview__media:hover .vc-lining-preview__image { transform:scale(1.05); }
.vc-lining-preview__zoom { position:absolute; right:6px; bottom:6px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.92); color:#121212; font-size:15px; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.vc-lining-preview__image--summer { object-position:center; filter:brightness(1.06) contrast(1.02); }
.vc-lining-preview__image--winter { object-position:50% 45%; filter:brightness(1.75) contrast(.84); }
.vc-lining-preview__eyebrow { margin:0 0 3px; color:rgba(18,18,18,.48); font-size:7px; font-weight:700; letter-spacing:.15em; line-height:1.25; text-transform:uppercase; }
.vc-lining-preview__title { margin:0 0 4px; color:#121212; font-size:10px; font-weight:700; letter-spacing:.06em; line-height:1.25; text-transform:uppercase; }
.vc-lining-preview__copy { margin:0; color:rgba(18,18,18,.62); font-size:9px; line-height:1.45; }
html[dir="rtl"] .vc-lining-preview__body { text-align:right; }
.vc-lining-modal { position:fixed; z-index:12000; inset:0; display:grid; place-items:center; padding:24px; background:rgba(10,10,10,.78); opacity:0; visibility:hidden; transition:opacity .22s ease,visibility .22s ease; backdrop-filter:blur(8px); }
.vc-lining-modal.is-open { opacity:1; visibility:visible; }
.vc-lining-modal__dialog { position:relative; width:min(680px,92vw); padding:14px 14px 12px; border-radius:18px; background:#f5f4ef; box-shadow:0 28px 90px rgba(0,0,0,.4); }
.vc-lining-modal__image { display:block; width:100%; max-height:72vh; object-fit:contain; border-radius:12px; background:#1d1d1d; }
.vc-lining-modal__title { margin:10px 42px 0 4px; color:#121212; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.vc-lining-modal__close { position:absolute; z-index:1; top:24px; right:24px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.94); color:#121212; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 3px 14px rgba(0,0,0,.2); }
body.vc-lining-modal-open { overflow:hidden; }
@media (max-width:767px) {
    .vc-lining-preview { grid-template-columns:96px minmax(0,1fr); gap:10px; margin-top:12px; padding:9px; }
    .vc-lining-preview__media, .vc-lining-preview__image { width:96px; height:74px; }
    .vc-lining-preview__copy { font-size:8px; line-height:1.4; }
    .vc-lining-modal { padding:14px; }
    .vc-lining-modal__dialog { width:min(620px,96vw); padding:10px; border-radius:15px; }
    .vc-lining-modal__image { max-height:78vh; }
    .vc-lining-modal__close { top:18px; right:18px; }
}

.embroidery-toggle { appearance: none; width: 36px; height: 20px; background: #ddd; border-radius: 20px; position: relative; cursor: pointer; outline: none; transition: 0.3s; }
.embroidery-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.embroidery-toggle:checked { background: #121212; }
.embroidery-toggle:checked::after { left: 18px; }

.step-pane { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.panel-enter { animation: fadeJustIn 0.3s ease-out forwards; }
.panel-exit { animation: fadeJustOut 0.3s ease-in forwards; pointer-events: none; }
@keyframes fadeJustIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeJustOut { from { opacity: 1; } to { opacity: 0; } }

.dock-btn { transition: all 0.3s ease; }
.dock-btn:hover { background-color: rgba(0,0,0,0.05); }
.dock-btn.active { background-color: #121212; color: white; }
.dock-btn.active img, .dock-btn.active svg { filter: brightness(0) invert(1); } 
.dock-text { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s ease; margin-top: 0; }
.dock-btn:hover .dock-text, .dock-btn.active .dock-text { max-height: 15px; opacity: 1; margin-top: 4px; }

#top-menu-dropdown { transform-origin: top right; }
#ai-chat-window { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(20px); opacity: 0; pointer-events: none; }
#ai-chat-window.active { transform: translateY(0); opacity: 1; pointer-events: auto; }

.chat-bubble-ai { background: rgba(18, 18, 18, 0.05); border-radius: 15px 15px 15px 2px; padding: 10px 14px; font-size: 11px; max-width: 85%; align-self: flex-start; }
.chat-bubble-user { background: #121212; color: white; border-radius: 15px 15px 2px 15px; padding: 10px 14px; font-size: 11px; max-width: 85%; align-self: flex-end; }
#chat-messages { min-height: 0; overscroll-behavior: contain; touch-action: pan-y; }
.chat-whatsapp-action { display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:10px 14px;border-radius:999px;background:#121212;color:#fff!important;text-decoration:none;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }

html[dir="rtl"] .chat-bubble-ai { border-radius: 15px 15px 2px 15px; text-align: right; }
html[dir="rtl"] .chat-bubble-user { border-radius: 15px 15px 15px 2px; text-align: right; }
html[dir="rtl"] [data-i18n] { text-align: right; }

#tutorial-overlay { opacity: 0; transition: opacity 0.5s ease; }
@keyframes swipeAnim { 0%, 100% { transform: translateX(10px); } 50% { transform: translateX(-10px); } }
@keyframes pinchAnim { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.85); } }
@keyframes tapAnim { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(0.9) translateY(5px); } }
.icon-swipe { animation: swipeAnim 2s ease-in-out infinite; }
.icon-pinch { animation: pinchAnim 2s ease-in-out infinite; }
.icon-tap { animation: tapAnim 1.5s ease-in-out infinite; }
.tut-slide-enter { animation: fadeIn 0.4s ease-out forwards; }

/* Ajuste para o botão de AI no Mobile não ser esmagado */
@media (max-width: 768px) {
    #btn-user-profile, button[onclick="toggleTopMenu()"], button[onclick="toggleAIChat()"] {
        flex-shrink: 0 !important;
    }
}#vc-local-cart-modal{position:fixed;z-index:9999;inset:0;display:none;place-items:center;padding:22px;background:rgba(0,0,0,.68);backdrop-filter:blur(10px)}#vc-local-cart-modal.is-open{display:grid}.vc-local-cart-card{position:relative;width:min(520px,100%);padding:42px;background:#f5f3ee;color:#171717;box-shadow:0 30px 80px rgba(0,0,0,.25)}.vc-local-cart-close{position:absolute;right:18px;top:12px;border:0;background:none;font-size:30px;cursor:pointer}.vc-local-cart-kicker{font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#777}.vc-local-cart-card h3{font-size:36px;line-height:1;text-transform:uppercase;margin:28px 0 18px}.vc-local-cart-card p{font-size:13px;line-height:1.65;color:#555}.vc-local-cart-actions{display:flex;gap:10px;margin-top:28px}.vc-local-cart-actions button,.vc-local-cart-actions a{flex:1;border:1px solid #171717;padding:14px 12px;text-align:center;font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.vc-local-cart-actions a{background:#171717;color:#fff}@media(max-width:560px){.vc-local-cart-actions{flex-direction:column}.vc-local-cart-card{padding:34px 24px}.vc-local-cart-card h3{font-size:29px}}