/* ==========================================================================
   Coffee Calculator & Guide Plugin Styles V1.4.1 (Corresponds to V2 Spec)
   - 4-Column Form w/ border, Descriptions, Timer Top, Guide Tabs, Recipe Summary,
     Breadcrumbs below Recipe, Popup w/ Image+BuyNow, Fireworks.
   - Basic Black/White Theme.
   ========================================================================== */

/* --- Base Theme & Fonts --- */
:root {
    --coffee-text: #000000; /* Black text */
    --coffee-bg: #ffffff; /* White background */
    --coffee-border: #cccccc; /* Medium grey border */
    --coffee-border-light: #e0e0e0; /* Lighter grey border */
    --coffee-bg-alt: #f8f8f8; /* Slightly off-white background */
    --coffee-bg-subtle: #f0f4f8; /* Subtle background for descriptions */
    --coffee-icon: #333333; /* Dark grey icons */
    --coffee-primary: #000000; /* Black primary elements/buttons */
    --coffee-primary-fg: #ffffff; /* White text on primary */
    --coffee-secondary: #6c757d; /* Grey secondary buttons */
    --coffee-secondary-fg: #ffffff;
    --coffee-link: #000000;
    --coffee-link-hover: #555555;
    --coffee-active: #000000; /* Make active elements black */
    --coffee-active-fg: #ffffff;
    --coffee-completed: #bbbbbb; /* Lighter grey for completed breadcrumbs */
    --coffee-popup-overlay: rgba(0, 0, 0, 0.7);
    --coffee-error-bg: #f8d7da;
    --coffee-error-border: #f5c6cb;
    --coffee-error-text: #721c24;
}

/* --- Main Container --- */
#coffee-calculator-container {
    border: none;
    padding: 20px 25px;
    max-width: 850px;
    margin: 25px auto;
    background-color: var(--coffee-bg);
    font-family: sans-serif;
    color: var(--coffee-text);
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden;
}

/* --- V2 Header --- */
.calculator-header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--coffee-border-light); }
.calculator-header h2 { font-size: 2.2em; font-weight: 700; margin-bottom: 10px; color: var(--coffee-text); border-bottom: none; font-family: 'Playfair Display', serif; display: block; }
.calculator-header p { font-size: 1.1em; color: #555; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.6; }


/* ==========================================================================
   Form Styles (4 Columns w/ Border)
   ========================================================================== */
#coffee-calculator-container .form-input-area { border: 1px solid var(--coffee-text); padding: 25px; border-radius: 6px; margin-bottom: 25px; background-color: var(--coffee-bg); }
#coffee-calculator-container #coffee-calculator-form .form-columns { display: flex; flex-wrap: wrap; gap: 25px; margin-bottom: 0; }
#coffee-calculator-container #coffee-calculator-form .form-column { flex: 1; min-width: 170px; }
#coffee-calculator-container .calculator-field { margin-bottom: 10px; }
#coffee-calculator-container label { display: flex; align-items: center; margin-bottom: 8px; font-weight: 600; color: var(--coffee-text); font-size: 1em; }
#coffee-calculator-container label i { margin-right: 8px; color: var(--coffee-icon); font-size: 1.1em; width: 1.3em; text-align: center; flex-shrink: 0; }
#coffee-calculator-container input[type="number"],
#coffee-calculator-container select { width: 100%; padding: 12px; border: 1px solid var(--coffee-border); border-radius: 4px; box-sizing: border-box; font-size: 1em; background-color: var(--coffee-bg); color: var(--coffee-text); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
#coffee-calculator-container input[type="number"]:focus,
#coffee-calculator-container select:focus { border-color: var(--coffee-primary); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); outline: none; }
.input-description { margin-top: 10px; padding: 10px 12px; font-size: 0.85em; color: #444; background-color: var(--coffee-bg-alt); border: 1px solid var(--coffee-border-light); border-radius: 3px; line-height: 1.5; min-height: 60px; max-height: 60px; overflow-y: auto; display: none; }
.input-description-placeholder { margin-top: 10px; min-height: 82px; /* Match height inc padding/border */ }
#coffee-calculator-container .form-submit-button { margin-top: 25px; text-align: center; }
#coffee-calculator-container #calculate-coffee { padding: 12px 30px; background-color: var(--coffee-primary); color: var(--coffee-primary-fg); border: 1px solid var(--coffee-primary); border-radius: 4px; cursor: pointer; font-size: 1.15em; font-weight: bold; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease; }
#coffee-calculator-container #calculate-coffee:hover { background-color: #333; border-color: #333; color: var(--coffee-primary-fg); box-shadow: 0 2px 4px rgba(0,0,0,0.15); }

/* ==========================================================================
   Results & Guide Area (Combined)
   ========================================================================== */
#results-and-guide-area { display: none; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--coffee-border-light); }

/* Timer at Top */
#coffee-calculator-container #guide-timer-section.guide-timer-top { display: none; flex-wrap: wrap; align-items: center; gap: 15px; background-color: var(--coffee-bg-alt); border: 1px solid var(--coffee-border-light); padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; }
#coffee-calculator-container #guide-timer-section.guide-timer-top p { margin: 0; flex-grow: 1; color: var(--coffee-text); display: flex; align-items: center; font-weight: 600; }
#coffee-calculator-container #guide-timer-section.guide-timer-top p strong i { margin-right: 8px; font-size: 1.1em; color: var(--coffee-icon); }
#coffee-calculator-container #guide-timer-display { font-size: 1.8em; font-weight: bold; color: var(--coffee-primary); margin-left: 10px; font-family: monospace; }

/* Guide Container (Mainly for Tabs Now) */
#coffee-calculator-container #brew-guide-container { margin-top: 0; padding: 0; border: none; background-color: transparent; box-shadow: none; }

/* Tabs */
.tabs-container { border: 1px solid var(--coffee-border-light); border-radius: 6px; overflow: hidden; background-color: var(--coffee-bg); }
.tabs-list { display: grid; width: 100%; grid-template-columns: repeat(2, 1fr); background-color: var(--coffee-bg-alt); border-bottom: 1px solid var(--coffee-border-light); }
.tab-trigger { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 12px 15px; font-size: 1em; font-weight: 500; cursor: pointer; border: none; background-color: transparent; color: #666; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-trigger i { margin-right: 8px; }
.tab-trigger:hover { background-color: #eee; color: var(--coffee-text); }
.tab-trigger.tab-active { background-color: var(--coffee-bg); color: var(--coffee-primary); border-color: var(--coffee-primary); }
.tab-panel { padding: 25px; display: none; /* JS controls */ }
.tab-panel.panel-active { display: block; }

/* Recipe Summary */
.recipe-summary { margin-bottom: 25px; padding: 15px; background-color: var(--coffee-bg-alt); border: 1px solid var(--coffee-border-light); border-radius: 4px; }
.recipe-summary h4 { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; font-weight: 600; text-align: center; }
.recipe-columns { display: flex; flex-wrap: wrap; gap: 15px; text-align: center; font-size: 0.9em; }
.recipe-column { flex: 1; min-width: 100px; }
.recipe-column strong { display: block; font-weight: 500; color: #555; margin-bottom: 5px; }
.recipe-column span { display: block; font-weight: 600; color: var(--coffee-text); }

/* Breadcrumb Bar Container (Below Recipe) */
#guide-breadcrumb-bar-container { margin-top: 0; margin-bottom: 25px; padding-top: 15px; border-top: 1px dashed var(--coffee-border-light); }
#coffee-calculator-container .guide-step-text { margin-bottom: 10px; font-size: 0.9em; color: #555; text-align: center; }
#coffee-calculator-container #guide-breadcrumb-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 5px; flex-wrap: wrap; width: 100%; }
#coffee-calculator-container .breadcrumb-item { display: inline-block; cursor: default; }
#coffee-calculator-container .breadcrumb-item i.fa-mug-saucer { font-size: 1.4em; color: var(--coffee-border); transition: color 0.3s ease, transform 0.3s ease; }
#coffee-calculator-container .breadcrumb-item.breadcrumb-completed i.fa-mug-saucer { color: var(--coffee-completed); }
#coffee-calculator-container .breadcrumb-item.breadcrumb-active i.fa-mug-saucer { color: var(--coffee-primary); transform: scale(1.1); }

/* Step Display Area */
#brew-guide-steps .guide-section { margin-bottom: 15px; }
#brew-guide-steps #guide-step-title { display: block; margin-bottom: 10px; color: var(--coffee-text); font-size: 1.2em; font-weight: 600; }
#brew-guide-steps #guide-step-content { background-color: transparent; border: none; padding: 0 0 15px 0; min-height: 60px; line-height: 1.6; color: #333; }

/* Step Navigation Buttons */
#coffee-calculator-container #brew-guide-navigation { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--coffee-border-light); display: flex; justify-content: space-between; }
#coffee-calculator-container #brew-guide-navigation .guide-progress-center { display: none; } /* Hide old center wrapper */

/* Equipment Tab Content */
#tabpanel-equipment h4 { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; font-weight: 600;}
#coffee-calculator-container #guide-equipment-list { list-style: none; margin-left: 0; padding-left: 0; }
#coffee-calculator-container #guide-equipment-list li { margin-bottom: 8px; padding-left: 25px; position: relative; }
#coffee-calculator-container #guide-equipment-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--coffee-icon); font-size: 0.9em; }

/* Tips Section */
.tips-section { margin-top: 25px; padding-top: 20px; border-top: 1px dashed var(--coffee-border-light); }
.tips-list { list-style: disc; margin-left: 20px; padding-left: 5px; font-size: 0.9em; color: #555; line-height: 1.6; }
.tips-list li { margin-bottom: 6px; }

/* General Guide Buttons */
#coffee-calculator-container .guide-button { padding: 9px 18px; background-color: var(--coffee-primary); color: var(--coffee-primary-fg); border: 1px solid var(--coffee-primary); border-radius: 4px; cursor: pointer; font-size: 0.95em; text-align: center; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; vertical-align: middle; }
#coffee-calculator-container .guide-button i { font-size: 1em; line-height: 1; }
#coffee-calculator-container .guide-button:hover:not(:disabled) { background-color: #333; border-color: #333; color: var(--coffee-primary-fg); }
#coffee-calculator-container .guide-button:disabled { background-color: #cccccc; border-color: #cccccc; color: #777777; cursor: not-allowed; opacity: 0.7; }
#coffee-calculator-container .guide-button.guide-button-secondary { background-color: var(--coffee-secondary); border-color: var(--coffee-secondary); color: var(--coffee-secondary-fg); }
#coffee-calculator-container .guide-button.guide-button-secondary:hover:not(:disabled) { background-color: #5a6268; border-color: #5a6268; }

/* ==========================================================================
   Timer Popup Modal Styles (Black/White Theme)
   ========================================================================== */
#coffee-calculator-container .timer-popup { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1050; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease, visibility 0.3s ease; }
#coffee-calculator-container .timer-popup-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#coffee-calculator-container .timer-popup-visible { opacity: 1; visibility: visible; pointer-events: auto; }
#coffee-calculator-container .timer-popup-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--coffee-popup-overlay); cursor: pointer; z-index: 1050; }
#coffee-calculator-container .timer-popup-content { position: relative; background-color: var(--coffee-bg); color: var(--coffee-text); padding: 30px 40px; border-radius: 6px; box-shadow: 0 5px 20px rgba(0,0,0,0.35); min-width: 300px; max-width: 90%; width: 450px; text-align: center; z-index: 1051; border: 1px solid var(--coffee-text); /* Black border */}
@media (max-width: 500px) { #coffee-calculator-container .timer-popup-content { padding: 25px 20px; min-width: 280px; } }
#coffee-calculator-container .timer-popup-content h2 { margin-top: 0; margin-bottom: 15px; color: var(--coffee-text); display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Playfair Display', serif; }
#coffee-calculator-container .timer-popup-content h2 i { font-size: 1em; color: var(--coffee-primary); }
#coffee-calculator-container .timer-popup-content p { margin-bottom: 10px; font-size: 1.1em; color: var(--coffee-text); }
#coffee-calculator-container .timer-popup-content p strong { font-weight: 600; }
#coffee-calculator-container .timer-popup-close { position: absolute; top: 8px; right: 12px; font-size: 32px; font-weight: bold; color: #aaa; cursor: pointer; line-height: 1; padding: 5px; }
#coffee-calculator-container .timer-popup-close:hover { color: var(--coffee-text); }
/* Popup Product Area */
#popup-product-info { margin-top: 20px; margin-bottom: 25px; padding-top: 20px; border-top: 1px solid var(--coffee-border-light); }
#popup-product-image { max-width: 120px; height: auto; margin: 0 auto 15px auto; display: block; border: 1px solid var(--coffee-border-light); border-radius: 4px; }
#coffee-calculator-container .buy-now-button { margin-top: 0; background-color: var(--coffee-primary); color: var(--coffee-primary-fg); border-color: var(--coffee-primary); }
#coffee-calculator-container .buy-now-button:hover:not(:disabled) { background-color: #333; border-color: #333; }
/* Popup OK Button */
#coffee-calculator-container .timer-popup-ok-button { min-width: 100px; margin-top: 15px; } /* Uses secondary style by default */

/* ==========================================================================
   Fireworks CSS Effect (Keep as is)
   ========================================================================== */
#coffee-calculator-container #fireworks-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; pointer-events: none; overflow: hidden; }
#coffee-calculator-container #fireworks-container.fireworks-hidden { display: none; }
#coffee-calculator-container #fireworks-container.fireworks-active { display: block; }
#coffee-calculator-container #fireworks-container .pyro > .before, #coffee-calculator-container #fireworks-container .pyro > .after { /* ... fireworks box-shadow and animation ... */ position: absolute; width: 6px; height: 6px; border-radius: 50%; box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -53px -317.66667px #ff006e, 36px -333.66667px #ff4000, -100px -333.66667px #ff00bf, 82px -100.66667px #0400ff, 138px -347.66667px #00f6ff, 117px -192.66667px #ff004c, -57px -14.66667px #00ffd0, 218px -340.66667px #ff00d0, 141px -134.66667px #b300ff, -234px -17.66667px #00ffb3, 147px -256.66667px #006eff, -214px -328.66667px #cc00ff, -170px -155.66667px #00ff0d, -111px 58.33333px #00ffcc, -137px -320.66667px #ff0066, -208px -122.66667px #007fff, 219px -279.66667px #ccff00, 113px -8.66667px #ff0080, 143px -40.66667px #ff00ff, -18px -205.66667px #00ff04, -219px -111.66667px #00f2ff, -15px -260.66667px #9d00ff, -34px 13.33333px #ff4d00, -170px -250.66667px #0011ff; animation: 1s bang ease-out infinite backwards,  1s gravity ease-in infinite backwards,  5s position linear infinite backwards; }
#coffee-calculator-container #fireworks-container .pyro > .after { animation-delay: 1.25s, 1.25s, 1.25s; animation-duration: 1.25s, 1.25s, 6.25s; }
@keyframes bang { from { box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@keyframes gravity { to { transform: translateY(180px); opacity: 0; } }
@keyframes position { 0%, 19.9% { margin-top: 10%; margin-left: 40%; } 20%, 39.9% { margin-top: 40%; margin-left: 30%; } 40%, 59.9% { margin-top: 20%; margin-left: 70%; } 60%, 79.9% { margin-top: 30%; margin-left: 20%; } 80%, 99.9% { margin-top: 30%; margin-left: 80%; } }

/* --- Footer Note --- */
#coffee-calculator-container .plugin-footer-note { font-size: 0.85em; color: #667; margin-top: 25px; text-align: center; line-height: 1.4; }

/* --- Optional Responsiveness --- */
/* @media (max-width: 768px) { ... } */
/* @media (max-width: 480px) { ... } */