/* 
 * Checkout Base Styles
 * Estilos compartilhados entre os temas light e dark
 */

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

 :root {
     --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --radius-sm: 0.25rem;
     --radius: 0.5rem;
     --radius-lg: 1rem;
     --anim-duration: 200ms;
 }
 
 * { 
     box-sizing: border-box; 
 }
 
 body {
     font-family: var(--font-primary);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background: var(--light-bg);
     color: var(--light-text);
     min-height: 100vh;
     margin: 0;
     padding: 0;
     line-height: 1.5;
 }
 
 html, body { 
     overscroll-behavior: none; 
 }
 
 /* Timer Bar */
 .timer-bar {
     position: relative;
     padding: 0.75rem;
     z-index: 1000;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     color: white;
     background: var(--checkout-timer-bar-color);
 }
 
 .timer-progress { 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 2px; 
     transition: width 1s linear; 
     width: 75%; 
 }
 
 .timer-content { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     gap: 1.5rem; 
     max-width: 500px; 
     margin: 0 auto; 
 }
 
 .timer-label { 
     display: flex; 
     align-items: center; 
     gap: 0.5rem; 
     font-weight: 500; 
     font-size: 0.975rem; 
 }
 
 .pulse-dot { 
     border-radius: 50%; 
     animation: pulse 2s infinite; 
 }
 
 .timer-countdown { 
     font-size: 1.125rem; 
     font-weight: 600; 
     font-variant-numeric: tabular-nums; 
 }
 
 /* Banner e Video */
 .checkout-banner { 
     max-width: 500px; 
     margin: 1rem auto; 
     border-radius: var(--radius-lg); 
     overflow: hidden; 
     box-shadow: var(--glass-shadow); 
 }
 
 .banner-image { 
     width: 100%; 
     height: auto; 
     display: block; 
 }
 
 .checkout-video {
     max-width: 500px;
     margin: 1rem auto;
     border-radius: var(--radius-lg);
     overflow: hidden;
 }
 
 .video-player {
     width: 100%;
     height: 280px;
     display: block;
     border: none;
     border-radius: var(--radius-lg);
 }
 
 /* Checkout Images */
 .checkout-images-container {
     position: relative;
 }
 
 .checkout-images-scroll-container {
     display: flex;
     gap: 1rem;
     padding: 0.25rem;
     scroll-snap-type: x mandatory;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
 }
 
 .checkout-images-scroll-container::-webkit-scrollbar {
     display: none; 
 }
 
 .checkout-images-container.stacked .checkout-images-scroll-container {
     flex-direction: column;
     align-items: center;
     overflow-x: hidden;
 }
 
 .checkout-image-item {
     flex-shrink: 0;
     scroll-snap-align: center;
     border-radius: var(--radius);
     overflow: hidden;
     width: 100%;
 }
 
 .checkout-images-container.scroll .checkout-image-item {
     width: 80%;
     max-width: 350px;
 }
 
 .checkout-image {
     width: 100%;
     height: auto;
     display: block;
 }
 
 .scroll-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     border-radius: 50%;
     width: 40px;
     height: 40px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
     transition: background-color 0.2s;
     z-index: 10;
 }
 
 .scroll-arrow.left {
     left: 10px;
 }
 
 .scroll-arrow.right {
     right: 10px;
 }
 
 .scroll-arrow svg {
     width: 24px;
     height: 24px;
 }
 
 /* Order Summary */
 .order-summary { 
     max-width: 500px; 
     margin: 1rem auto; 
     border-radius: var(--radius-lg); 
     overflow: hidden; 
     transition: all var(--anim-duration) ease; 
     border: 1px solid var(--light-border); 
     box-shadow: var(--glass-shadow); 
 }
 
 .order-summary-header { 
     padding: 1rem; 
     display: flex; 
     align-items: center; 
     justify-content: space-between; 
     cursor: pointer; 
     background: var(--light-surface); 
     border-bottom: 1px solid var(--light-border); 
 }
 
 .order-summary-header h3 { 
     margin: 0; 
     font-size: 1rem; 
     font-weight: 600; 
     color: var(--light-text);
 }
 
 .order-summary-content { 
     max-height: 0; 
     overflow: hidden; 
     transition: max-height 0.3s ease-out; 
 }
 
 .order-summary.open .order-summary-content { 
     max-height: 500px; 
 }
 
 .chevron { 
     transition: transform 0.3s ease; 
 }
 
 .order-summary.open .chevron { 
     transform: rotate(180deg); 
 }
 
 /* Product Info */
 .product-info { 
     padding: 1.5rem; 
     display: flex; 
     gap: 1rem; 
     align-items: center; 
 }
 
 .product-image { 
     width: 80px; 
     height: 80px; 
     border-radius: var(--radius); 
     overflow: hidden; 
     flex-shrink: 0; 
     border: 1px solid var(--light-border); 
 }
 
 .product-image img { 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
     display: block; 
 }
 
 .product-details h2 { 
     margin: 0 0 0.5rem; 
     font-size: 1.25rem; 
     font-weight: 600; 
     color: var(--light-text);
 }
 
 .product-price { 
     font-size: 1.25rem; 
     font-weight: 700; 
     margin: 0.5rem 0; 
     display: flex; 
     align-items: baseline; 
     gap: 0.5rem; 
     color: var(--primary);
 }
 
 .product-price small { 
     font-size: 0.875rem; 
     font-weight: 400; 
     color: var(--light-text-secondary); 
 }
 
 /* Checkout Container */
 .checkout-container { 
     max-width: 500px; 
     margin: 1rem auto; 
     padding: 2rem; 
     border-radius: var(--radius-lg); 
     box-shadow: var(--glass-shadow); 
     border: 1px solid var(--light-border); 
 }
 
 /* Form Section */
 .form-section { 
     margin-bottom: 1.5rem; 
 }
 
 .form-section-title { 
     display: flex; 
     align-items: center; 
     gap: 0.75rem; 
     font-size: 1.125rem; 
     font-weight: 600; 
     margin: 0 0 1.5rem; 
     color: var(--light-text);
 }
 
 .form-section-title svg { 
     color: var(--primary); 
 }
 
 /* Checkout Form */
 .checkout-form { 
     display: flex; 
     flex-direction: column; 
     gap: 1rem; 
 }
 
 .form-group { 
     margin: 0 0 1rem; 
 }
 
 .input-wrapper { 
     position: relative; 
     display: flex; 
     align-items: center; 
 }
 
 .input-icon { 
     position: absolute; 
     left: 0.75rem; 
     color: var(--light-text-secondary); 
     pointer-events: none; 
     transition: all var(--anim-duration) ease; 
     opacity: 0.7; 
     width: 18px; 
     height: 18px; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
 }
 
 .form-control { 
     width: 100%; 
     height: 3.5rem; 
     padding: 0 1rem 0 2.75rem; 
     font-size: 1rem; 
     background: var(--light-surface); 
     border: 1px solid var(--light-border); 
     border-radius: 10px; 
     transition: all var(--anim-duration) ease; 
     font-family: var(--font-primary); 
     color: var(--light-text);
 }
 
 .form-control { 
     border: 0.1px solid #888888; 
 }
 
 .form-control:focus { 
     border-color: #888888; 
 }
 
 .form-control:hover:not(:disabled) { 
     border-color: var(--primary); 
 }
 
 .form-control:focus { 
     outline: none; 
     border-color: var(--primary); 
     box-shadow: var(--blue-shadow); 
 }
 
 .form-control:focus + .input-icon { 
     color: var(--primary); 
     opacity: 1; 
 }
 
 .form-control::placeholder { 
     color: var(--light-text-secondary); 
     opacity: 0.5; 
 }
 
 /* Order Bumps */
 .order-bumps-section { 
     margin: 0 0 2rem 0; 
     padding: 0; 
 }
 
 .order-bump-item { 
     background: var(--light-surface); 
     border-radius: var(--radius); 
     padding: 1rem; 
     margin-bottom: 1rem; 
     border: 1px solid var(--light-border); 
     display: flex; 
     gap: 1rem; 
     align-items: center; 
     transition: all var(--anim-duration) ease; 
 }
 
 .order-bump-item:hover { 
     border-color: var(--primary); 
     transform: translateY(-1px); 
     box-shadow: var(--blue-shadow); 
 }
 
 .bump-checkbox { 
     flex-shrink: 0; 
 }
 
 .bump-checkbox-input { 
     display: none; 
 }
 
 .bump-checkbox-label { 
     display: block; 
     width: 24px; 
     height: 24px; 
     border: 2px solid var(--light-border); 
     border-radius: var(--radius-sm); 
     cursor: pointer; 
     position: relative; 
     transition: all var(--anim-duration) ease; 
 }
 
 .bump-checkbox-label:hover { 
     border-color: var(--primary); 
     box-shadow: var(--blue-shadow); 
 }
 
 .bump-checkbox-input:checked + .bump-checkbox-label { 
     background: var(--primary); 
     border-color: var(--primary); 
     box-shadow: var(--blue-shadow); 
 }
 
 .bump-checkbox-input:checked + .bump-checkbox-label::after { 
     content: ''; 
     position: absolute; 
     left: 8px; 
     top: 4px; 
     width: 5px; 
     height: 10px; 
     border-style: solid;
     border-width: 0 2px 2px 0; 
     transform: rotate(45deg); 
 }
 
 .bump-content { 
     flex: 1; 
     display: flex; 
     gap: 1rem; 
     align-items: center; 
 }
 
 .bump-image { 
     width: 60px; 
     height: 60px; 
     border-radius: var(--radius); 
     overflow: hidden; 
     flex-shrink: 0; 
     border: 1px solid var(--light-border); 
 }
 
 .bump-image img { 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
     display: block; 
 }
 
 .bump-details { 
     flex: 1; 
 }
 
 .bump-details h4 { 
     font-size: 1rem; 
     font-weight: 600; 
     color: var(--light-text); 
     margin: 0 0 0.25rem; 
 }
 
 .bump-description { 
     color: var(--light-text-secondary); 
     font-size: 0.875rem; 
     margin: 0 0 0.75rem; 
     line-height: 1.4; 
 }
 
 .bump-price { 
     display: flex; 
     align-items: center; 
     gap: 1rem; 
     flex-wrap: wrap; 
 }
 
 .original-price { 
     color: var(--light-text-secondary); 
     text-decoration: line-through; 
     font-size: 0.875rem; 
 }
 
 .final-price { 
     color: var(--primary); 
     font-weight: 600; 
     font-size: 1rem; 
 }
 
 /* Payment Section */
 .payment-section { 
     margin-top: 1rem; 
 }
 
 .payment-title { 
     font-size: 0.925rem; 
     color: var(--light-text); 
     margin: 0 0 1rem; 
     text-align: center; 
     font-weight: 500; 
 }
 
 .payment-buttons { 
     margin-top: 1.5rem; 
 }
 
 .payment-row { 
     display: grid; 
     grid-template-columns: 1fr 1fr; 
     gap: 1rem; 
     margin-bottom: 1rem; 
 }
 
 .btn { 
     position: relative; 
     display: inline-flex; 
     align-items: center; 
     justify-content: center; 
     height: 3.5rem; 
     font-size: 0.875rem; 
     font-weight: 600; 
     border: none; 
     border-radius: var(--radius); 
     cursor: pointer; 
     transition: all var(--anim-duration) ease; 
     width: 100%; 
     gap: 0.75rem; 
     text-transform: uppercase; 
     letter-spacing: 0.5px; 
     overflow: hidden; 
 }
 
 .btn-icon { 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     background: rgba(0, 0, 0, 0.1); 
     padding: 0.5rem; 
     border-radius: var(--radius-sm); 
     transition: all var(--anim-duration) ease; 
 }
 
 .btn:hover:not(:disabled) .btn-icon { 
     background: rgba(0, 0, 0, 0.2); 
     transform: scale(1.1); 
 }
 
 .btn:active:not(:disabled) { 
     transform: translateY(1px); 
 }
 
 .btn:disabled { 
     opacity: 0.7; 
     cursor: not-allowed; 
     background: var(--light-border); 
     box-shadow: none; 
 }
 
 .btn-success { 
     background: var(--success); 
     margin-top: 1.5rem; 
     border: none; 
 }
 
 .btn-success:hover:not(:disabled) { 
     filter: brightness(1.1); 
     transform: translateY(-2px); 
 }
 
 /* Payment Info & Card Form */
 .payment-info-section { 
     background: var(--light-surface); 
     border-radius: var(--radius-lg); 
     margin: 1.5rem 0; 
     border: 1px solid var(--light-border); 
     animation: slideDown 0.3s ease-out; 
 }
 
 .info-content { 
     padding: 1.5rem; 
 }
 
 .info-content h4 { 
     margin: 0 0 1rem; 
     font-size: 1rem; 
     font-weight: 600; 
     color: var(--light-text);
 }
 
 .info-list { 
     display: flex; 
     flex-direction: column; 
     gap: 1rem; 
 }
 
 .info-item { 
     display: flex; 
     align-items: flex-start; 
     gap: 1rem; 
     color: var(--light-text-secondary); 
     font-size: 0.875rem; 
     line-height: 1.5; 
 }
 
 .info-item svg { 
     flex-shrink: 0; 
     margin-top: 0.25rem; 
     color: var(--primary); 
 }
 
 .info-item.total-value { 
     margin-top: 0.5rem; 
     padding-top: 1rem; 
     border-top: 1px solid var(--light-border); 
 }
 
 .info-item.total-value strong { 
     color: var(--primary); 
     font-weight: 600; 
     margin-left: 0.25rem; 
 }
 
 .card-form { 
     background: var(--light-surface); 
     border-radius: var(--radius-lg); 
     padding: 1.5rem; 
     margin: 1.5rem 0; 
     border: 1px solid var(--light-border); 
     animation: slideDown 0.3s ease-out; 
     display: none; 
 }
 
 .form-row { 
     display: grid; 
     grid-template-columns: 1fr 1fr; 
     gap: 1rem; 
     margin-bottom: 1rem; 
 }
 
 .installments-group { 
     margin-top: 1.5rem; 
 }
 
 .installments-group label { 
     display: block; 
     font-size: 0.875rem; 
     color: var(--light-text-secondary); 
     margin-bottom: 0.5rem; 
 }
 
 select.form-control { 
     width: 100%; 
     height: 3.5rem; 
     padding: 0 2.75rem 0 1rem; 
     font-size: 1rem; 
     background: var(--light-surface); 
     border: 1px solid var(--light-border); 
     border-radius: var(--radius); 
     transition: all var(--anim-duration) ease; 
     appearance: none; 
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 
     background-repeat: no-repeat; 
     background-position: right 1rem center; 
     background-size: 1.25rem; 
     font-family: var(--font-primary); 
 }
 
 select.form-control:hover:not(:disabled) { 
     border-color: var(--primary); 
 }
 
 select.form-control:focus { 
     outline: none; 
     border-color: var(--primary); 
     box-shadow: var(--blue-shadow); 
 }
 
 /* Form Validation */
 .form-control.is-invalid { 
     border-color: var(--error); 
     background-color: rgba(239, 68, 68, 0.05); 
 }
 
 .invalid-feedback { 
     display: none; 
     color: var(--error); 
     font-size: 0.75rem; 
     margin-top: 0.5rem; 
     animation: slideDown 0.2s ease-out; 
 }
 
 .is-invalid ~ .invalid-feedback { 
     display: block; 
 }
 
 /* Secure Badge */
 .secure-badge { 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     color: var(--light-text-secondary); 
     font-size: 0.875rem; 
     margin-top: 1rem; 
     padding: 0.75rem; 
     background: var(--light-surface); 
     border-radius: var(--radius); 
     border: 1px solid var(--light-border); 
     gap: 0.5rem; 
 }
 
 .secure-badge svg { 
     color: var(--success); 
 }
 
 /* Testimonials */
 .testimonials-section { 
     max-width: 400px;     
     margin: 2rem auto; 
     padding: 0 1rem; 
 }
 
 .testimonials-section h3 { 
     text-align: center; 
     font-size: 1.25rem; 
     margin-bottom: 0.0rem; 
     font-weight: 600; 
     color: var(--light-text);
 }
 
 .testimonials-grid { 
     display: grid; 
     grid-template-columns: 1fr;  
     gap: 1rem; 
 }
 
 .testimonial-card { 
     border-radius: var(--radius-lg); 
     padding: 1rem 1.25rem; 
     border: 1px solid var(--light-border); 
     box-shadow: var(--glass-shadow); 
     display: flex; 
     flex-direction: column; 
     align-items: flex-start; 
     gap: 0.25rem; 
 }
 
 .testimonial-avatar { 
     width: 50px; 
     height: 50px; 
     border-radius: 50%; 
     overflow: hidden; 
     margin-bottom: 0.25rem; 
     border: 2px solid var(--primary); 
 }
 
 .testimonial-avatar img { 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
 }
 
 .testimonial-name { 
     font-size: 0.9rem;
     font-weight: 600; 
     color: var(--light-text); 
     margin-bottom: 0.15rem; 
 }
 
 .testimonial-rating { 
     display: flex; 
     gap: 0.15rem; 
     margin-bottom: 0.25rem; 
     color: var(--primary);
 }
 
 .star { 
     width: 15px; 
     height: 15px; 
     stroke: var(--primary);
 }
 
 .testimonial-card .star[fill*="#"] { 
     fill: var(--primary) !important; 
 }
 
 .testimonial-text { 
     color: var(--light-text-secondary); 
     font-size: 0.8rem; 
     line-height: 1.3; 
 }
 
 /* Footer */
 .checkout-footer { 
     max-width: 500px; 
     margin: 2rem auto; 
     padding: 2rem 1rem; 
     text-align: center; 
     border-top: 1px solid var(--light-border); 
 }
 
 .footer-logo { 
     margin-bottom: 1rem; 
 }
 
 .footer-logo img { 
     height: 40px; 
     border-radius: 8px; 
 }
 
 .footer-text { 
     font-size: 0.75rem; 
     color: var(--light-text-secondary); 
     margin-bottom: 1rem; 
 }
 
 .security-badges { 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     gap: 1.5rem; 
     margin-top: 1rem; 
 }
 
 .security-badge-item { 
     display: flex; 
     align-items: center; 
     gap: 0.5rem; 
     color: var(--light-text-secondary); 
     font-size: 0.75rem; 
 }
 
 .security-badge-item svg { 
     width: 16px; 
     height: 16px; 
     color: var(--success); 
 }
 
 /* Animations */
 @keyframes slideDown { 
     from { 
         opacity: 0; 
         transform: translateY(-0.5rem);
     } 
     to { 
         opacity: 1; 
         transform: translateY(0);
     } 
 }
 
 @keyframes pulse-animation {
     0%, 100% { 
         transform: scale(1); 
     }
     50% { 
         transform: scale(1.05); 
     }
 }
 
 @keyframes pulse-glow-effect {
     0% { 
         transform: scale(0.95); 
         opacity: 0.7; 
     }
     70% { 
         transform: scale(1.6); 
         opacity: 0; 
     }
     100% { 
         transform: scale(0.95); 
         opacity: 0; 
     }
 }
 
 @keyframes scanner-flow {
     0% { 
         background-position: 200% 0; 
     }
     100% { 
         background-position: -200% 0; 
     }
 }
 
 .btn-animation-pulse {
     animation: pulse-animation 1.8s infinite ease-in-out !important;
 }
 
 .btn-animation-pulse-glow {
     position: relative !important;
     z-index: 0 !important;
     overflow: visible !important;
 }
 
 .btn-animation-scanner {
     background-size: 200% 100% !important;
     animation: scanner-flow 2s linear infinite !important;
 }
 
 /* Sales Notification */
 .sales-notification {
     position: fixed;
     bottom: 20px;
     left: 20px;
     background: var(--light-surface);
     border: 1px solid var(--light-border);
     border-radius: var(--radius-lg);
     padding: 1rem 1.25rem;
     box-shadow: var(--glass-shadow);
     display: flex;
     align-items: center;
     gap: 0.75rem;
     z-index: 1000;
     opacity: 0;
     transform: translateX(-100%);
     transition: all 0.4s ease;
 }
 
 .sales-notification.show {
     opacity: 1;
     transform: translateX(0);
 }
 
 .notification-icon {
     color: var(--success);
     flex-shrink: 0;
 }
 
 .notification-text {
     color: var(--light-text);
     font-size: 0.875rem;
     line-height: 0.4;
 }
 
 .notification-text strong {
     font-weight: 600;
     color: var(--primary);
 }
 
 /* Exit Intent Popup */
 #exit-intent-popup {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2000;
     display: none; 
     align-items: center;
     justify-content: center;
 }
 
 .popup-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(5px);
 }
 
 .popup-content {
     position: relative;
     background: #fff;
     padding: 2rem;
     border-radius: var(--radius-lg);
     text-align: center;
     max-width: 400px;
     width: 90%;
     box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     animation: slideDown 0.3s ease-out;
     color: #333;
 }
 
 .popup-icon {
     margin: 0 auto 1rem;
     width: 60px;
     height: 60px;
     background: var(--primary);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .popup-content h2 {
     font-size: 1.5rem;
     font-weight: 700;
     margin: 0 0 0.5rem;
     color: var(--light-text);
 }
 
 .popup-content p {
     margin: 0 0 1.5rem;
     color: var(--light-text-secondary);
 }
 
 .coupon-code {
     background: #f1f5f9;
     border: 2px dashed #cbd5e1;
     padding: 0.75rem 1rem;
     border-radius: var(--radius);
     margin-bottom: 1.5rem;
     font-weight: 500;
 }
 
 .coupon-code strong {
     color: var(--primary);
 }
 
 #apply-coupon-btn {
     width: 100%;
     background: var(--success);
     color: white;
     border: none;
     padding: 0.8rem 1rem;
     font-size: 1rem;
     font-weight: 600;
     border-radius: var(--radius);
     cursor: pointer;
     transition: background 0.2s;
 }
 
 #apply-coupon-btn:hover {
     filter: brightness(1.1);
 }
 
 /* Responsive */
 @media (max-width: 640px) {
     .video-player { 
         height: 220px; 
     }
     
     .checkout-video { 
         padding: 0 1rem; 
     }
     
     .form-section { 
         margin-bottom: 0.3rem !important; 
     }
 
     .order-bumps-section { 
         margin-top: 0.3rem !important; 
         margin-bottom: 0.3rem !important; 
     }
 
     .checkout-form .form-section:last-of-type {
         margin-bottom: 0 !important;
     }
 }