/* =========================================
   RESETS & BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
body, html { height: 100%; background-color: #fdfbf7; overflow: hidden; color: #333; }

/* =========================================
   TÍTULO PRINCIPAL (NOME DO CAFÉ E PREÇO)
   ========================================= */
.card-main-title { 
    position: absolute; 
    top: 10vh; 
    width: 100%; 
    text-align: center; 
    z-index: 10; 
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
    color: #121212; 
    pointer-events: none; 
}
.card-main-title h2 { 
    font-size: 2.2rem; 
    margin-bottom: 5px; 
    letter-spacing: 1px; 
    text-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}
.card-main-title p { 
    font-size: 1.2rem; 
    color: #7a6552; 
    font-weight: bold; 
}

.coffee-card:not(.active) .card-main-title { opacity: 0 !important; }

.coffee-card.is-details .card-main-title,
.coffee-card.is-categories .card-main-title,
.coffee-card.is-treats .card-main-title,
.coffee-card.is-checkout .card-main-title {
    opacity: 0;
    transform: translateY(-20px);
}

/* =========================================
   CARROSSEL E PILHA DE CAFÉS
   ========================================= */
.carousel { position: relative; height: 100vh; width: 100vw; overflow: hidden; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f4eee6 100%); }

.coffee-card { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; overflow: hidden; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease; background: transparent; }

.coffee-card.active { opacity: 1; transform: translateY(0) scale(1); z-index: 10; pointer-events: auto; }
.coffee-card.next-1 { opacity: 1; transform: translateY(-12vh) scale(0.85); z-index: 9; pointer-events: none; filter: brightness(0.8); }
.coffee-card.next-2 { opacity: 1; transform: translateY(-25vh) scale(0.7); z-index: 8; pointer-events: none; filter: brightness(0.6); }
.coffee-card.hidden-next { opacity: 0; transform: translateY(-40vh) scale(0.5); z-index: 7; pointer-events: none; }
.coffee-card.prev { opacity: 0; transform: translateY(100vh) scale(1.1); z-index: 11; pointer-events: none; }
.carousel.menu-open .coffee-card.next-1,
.carousel.menu-open .coffee-card.next-2 { opacity: 0; }

/* =========================================
   A DANÇA DO COPO E DO DOCE
   ========================================= */
.cup-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); z-index: 5; pointer-events: auto; cursor: pointer; }

.main-cup { height: 42vh; max-width: 90%; object-fit: contain; filter: drop-shadow(0px 35px 20px rgba(0,0,0,0.4)); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); transform-origin: bottom center; }

.selected-treat-img { 
    position: absolute; width: 45vw; max-width: 250px; height: auto; object-fit: contain; opacity: 0; transform: translate(50vw, 30vh) scale(0); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); filter: drop-shadow(0px 15px 10px rgba(0,0,0,0.3)); 
}

.coffee-card.is-details .cup-container { background: #fdfbf7; cursor: default; } 
.coffee-card.is-details .main-cup { transform: translate(0vw, 15vh) scale(0.65); filter: drop-shadow(0px 15px 12px rgba(0,0,0,0.3)); }

.coffee-card.is-categories .cup-container { background: #fdfbf7; cursor: default; }
.coffee-card.is-categories .main-cup { transform: translate(-18vw, 15vh) scale(0.7); filter: drop-shadow(0px 15px 15px rgba(0,0,0,0.4)); }

.coffee-card.is-treats .cup-container { background: #fdfbf7; cursor: default; }
.coffee-card.is-treats .main-cup { transform: translate(-18vw, 15vh) scale(0.7); filter: drop-shadow(0px 15px 15px rgba(0,0,0,0.4)); }

.coffee-card.is-checkout .cup-container { background: #fdfbf7; cursor: default; }
/* PRODUTOS MAIS ALTOS NA TELA DE CHECKOUT */
.coffee-card.is-checkout .main-cup { transform: translate(-18vw, 6vh) scale(0.65); }
.coffee-card.is-checkout .selected-treat-img { opacity: 1; transform: translate(18vw, 13vh) scale(1.1); }

/* =========================================
   TELA 1: DETALHES DO CAFÉ
   ========================================= */
.flow-step { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; z-index: 6; padding: 40px 20px; display: flex; flex-direction: column; }
.coffee-card.is-details .step-details { opacity: 1; pointer-events: auto; }

.btn-back-flow { background: none; border: none; font-size: 1.1rem; color: #9c7144; font-weight: bold; cursor: pointer; text-align: left; margin-bottom: 20px; width: fit-content; }

.scrollable-info { max-width: 100%; max-height: 40vh; overflow-y: visible; scrollbar-width: none; padding-right: 10px; display: flex; flex-direction: column; }
.scrollable-info::-webkit-scrollbar { display: none; }

.scrollable-info h2 { order: 1; font-size: 2.8rem; color: #1c1c1c; margin-bottom: 5px; font-weight: 900; letter-spacing: -1px; }
.subtitle { order: 2; font-style: italic; color: #4a4a4a; font-size: 1rem; margin-bottom: 15px; line-height: 1.2; }

.quick-info { display: none !important; }
.barista-tip { display: none !important; }

.recipe-grid { order: 3; display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px; margin-top: 5px; }

.recipe-column h3 { font-size: 1.1rem; color: #9c7144; margin-bottom: 2px; font-weight: 600; }
.recipe-column ul { list-style: none; font-size: 0.9rem; color: #4a4a4a; line-height: 1.4; }
.recipe-column ul li { padding: 1px 0; }

/* =========================================
   ÁREA DO PREÇO E BOTÃO AGREGAR
   ========================================= */
.action-area-left { 
    position: absolute; 
    bottom: max(80px, env(safe-area-inset-bottom) + 50px); 
    left: 0;         
    width: 100%;     
    padding: 0 20px; 
}

.main-price { 
    font-size: 2.2rem; 
    font-weight: 900; 
    color: #000; 
    display: block; 
    margin-bottom: 10px; 
    letter-spacing: -1px; 
}

.size-selector { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 15px; 
}

.size-btn { 
    width: 40px; 
    height: 40px; 
    border: 2px solid #ccc; 
    background: transparent; 
    border-radius: 8px; 
    font-weight: bold; 
    color: #333; 
    font-size: 1rem; 
    cursor: pointer; 
}

.size-btn.active { 
    background: #121212; 
    color: #fff; 
    border-color: #121212; 
}

.btn-add-cart { 
    width: 100%; 
    background: #121212; 
    color: #fff; 
    padding: 18px 20px; 
    border-radius: 15px; 
    border: none; 
    font-size: clamp(1rem, 4vw, 1.15rem); 
    font-weight: bold; 
    cursor: pointer; 
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    transition: transform 0.2s ease; 
}
.btn-add-cart:active {
    transform: scale(0.97); 
}
.btn-add-cart span { display: none; } 

/* =========================================
   TELA 1.5: ESCOLHER CATEGORIA DE ACOMPANHAMENTO
   ========================================= */
.coffee-card.is-categories .step-categories { opacity: 1; pointer-events: auto; }

.categories-panel { position: absolute; top: 5vh; right: 0; width: 55vw; height: 95vh; display: flex; flex-direction: column; padding: 40px 20px 0 10px; text-align: right; }
.category-options { display: flex; flex-direction: column; gap: 15px; margin-top: 30px; margin-bottom: 20px; }
.btn-category { background: #fff; border: 1px solid #eaeaea; border-radius: 15px; padding: 20px; font-size: 1.1rem; font-weight: bold; color: #121212; display: flex; justify-content: space-between; align-items: center; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.2s, background 0.2s; }
.btn-category:active { transform: scale(0.95); background: #f4eee6; }

/* =========================================
   TELA 2: ESCOLHER DOCES / ACOMPANHAMENTOS
   ========================================= */
.coffee-card.is-treats .step-treats { opacity: 1; pointer-events: auto; }

.treats-right-panel { position: absolute; top: 5vh; right: 0; width: 55vw; height: 95vh; display: flex; flex-direction: column; overflow: hidden;}
.treats-header-new { text-align: right; padding: 40px 20px 15px 10px; margin-bottom: 0; flex-shrink: 0; z-index: 20; position: relative; background: #fdfbf7; padding-bottom: 15px; }

.chosen-coffee-title { font-size: clamp(2rem, 6vw, 2.6rem); font-weight: 900; color: #121212; margin-bottom: 2px; letter-spacing: -1px; }
.treats-header-new p { font-size: 0.85rem; color: #7a6552; margin-bottom: 12px; line-height: 1.1; }

.btn-no-thanks { background: #121212; color: #fff; padding: 6px 14px; border-radius: 8px; border: none; font-weight: bold; font-size: 0.85rem; cursor: pointer; display: inline-block; transition: background 0.3s ease; }
.btn-no-thanks:active { background: #333; }

.treats-large-carousel { position: relative; flex-grow: 1; width: 100%; overflow: visible; }

.treat-large-item { position: absolute; top: 5vh; right: 20px; width: 100%; display: flex; flex-direction: column; align-items: flex-end; transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); }

.treat-large-item.active { opacity: 1; transform: translateY(0) scale(1); z-index: 10; pointer-events: auto; }
.treat-large-item.next-1 { opacity: 1; transform: translateY(-12vh) scale(0.85); z-index: 9; pointer-events: none; filter: brightness(0.6); }
.treat-large-item.next-2 { opacity: 1; transform: translateY(-24vh) scale(0.7); z-index: 8; pointer-events: none; filter: brightness(0.3); }
.treat-large-item.hidden-next { opacity: 0; transform: translateY(-35vh) scale(0.5); z-index: 7; pointer-events: none; }
.treat-large-item.prev { opacity: 0; transform: translateY(35vh) scale(0.8); z-index: 11; pointer-events: none; filter: brightness(0.5); }

.treat-info { text-align: right; margin-bottom: 2px; }
.treat-info .t-price { display: block; font-size: 1.8rem; font-weight: 900; color: #121212; line-height: 1; text-shadow: 0 2px 5px rgba(255,255,255,0.8); }
.treat-info .t-name { display: block; font-size: 0.85rem; color: #7a6552; margin-top: 2px; }
.treat-image-wrapper { position: relative; width: 100%; display: flex; justify-content: flex-end; }
.treat-image-wrapper img { width: 100%; max-width: 180px; object-fit: contain; filter: drop-shadow(0px 15px 20px rgba(0,0,0,0.3)); }

.btn-add-treat { position: absolute; bottom: 0px; right: 0px; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 4px 8px rgba(0,0,0,0.1); font-size: 1.5rem; color: #121212; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; z-index: 10; }
.btn-add-treat:active { transform: scale(0.9); background: #121212; color: #fff; }

/* =========================================
   TELA 3: CHECKOUT E MODAL DE RECIBO
   ========================================= */
.coffee-card.is-checkout .step-checkout { opacity: 1; pointer-events: auto; }
.checkout-header { background: transparent; width: 100%; }
.checkout-header h2 { font-size: 2rem; color: #121212; margin-bottom: 20px; }
.order-line { display: flex; justify-content: space-between; font-size: 1rem; color: #7a6552; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #eaeaea; }
.order-line.hidden { display: none; }

.checkout-footer { 
    position: absolute; 
    bottom: max(80px, env(safe-area-inset-bottom) + 50px); 
    left: 0;         
    width: 100%;     
    padding: 0 20px; 
}

.btn-checkout { 
    width: 100%; 
    background: #281a20; 
    color: #fff; 
    padding: 20px; 
    border-radius: 15px; 
    border: none; 
    font-size: clamp(1rem, 4vw, 1.2rem); 
    font-weight: bold; 
    display: flex; 
    justify-content: space-between; 
    cursor: pointer; 
    transition: transform 0.2s ease; 
}
.btn-checkout:active { transform: scale(0.97); }

.total-price { background: #4a3340; padding: 5px 10px; border-radius: 10px; }

.receipt-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 100; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.receipt-modal-overlay.show { opacity: 1; pointer-events: auto; }

.receipt-modal { background: #fdfbf7; width: 85%; max-width: 350px; border-radius: 20px; padding: 30px 20px; text-align: center; transform: translateY(50px); transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.receipt-modal-overlay.show .receipt-modal { transform: translateY(0); }

.success-icon { width: 50px; height: 50px; background: #4CAF50; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 15px auto; }
.receipt-modal h2 { font-size: 1.5rem; color: #121212; }
.receipt-modal p { color: #8b7355; font-size: 0.9rem; margin-bottom: 20px; }
.receipt-modal hr { border: none; border-top: 1px solid #e8dccb; margin: 15px 0; }
.receipt-modal .line { display: flex; justify-content: space-between; font-size: 0.9rem; color: #5a4634; margin-bottom: 8px; }
.total-line { font-weight: bold; font-size: 1.2rem !important; color: #121212 !important; margin-top: 10px; }

.btn-done { 
    width: 100%; 
    background: #121212; 
    color: #fff; 
    padding: 15px; 
    border-radius: 15px; 
    border: none; 
    font-size: clamp(1rem, 4vw, 1.1rem); 
    font-weight: bold; 
    margin-top: 20px; 
    cursor: pointer; 
    transition: background 0.3s; 
}
.btn-done:active { background: #333; }
.hidden { display: none !important; }

/* =========================================
   BOTÃO VOLTAR AO MENU PRINCIPAL
   ========================================= */
.btn-back-main, 
.btn-back-index {
    position: absolute;
    top: max(40px, env(safe-area-inset-top) + 20px);
    left: 20px;
    z-index: 100;
    text-decoration: none;
    font-size: 1.1rem;
    color: #9c7144;
    font-weight: bold;
    transition: opacity 0.5s ease;
}

.carousel.menu-open .btn-back-main,
.carousel.menu-open .btn-back-index {
    opacity: 0;
    pointer-events: none;
}