diff --git a/dog-food-calculator-widget.js b/dog-food-calculator-widget.js
index 15f26e9..0c296d1 100644
--- a/dog-food-calculator-widget.js
+++ b/dog-food-calculator-widget.js
@@ -619,6 +619,185 @@
                 color: #7fa464;
             }
         }
+
+        /* Modal Styles */
+        .dog-calc-modal {
+            display: none;
+            position: fixed;
+            z-index: 10000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            animation: fadeIn 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .dog-calc-modal-content {
+            position: relative;
+            background-color: #ffffff;
+            margin: 5% auto;
+            padding: 30px;
+            border: 1px solid #e8e3ed;
+            border-radius: 12px;
+            width: 90%;
+            max-width: 500px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+            animation: slideIn 0.3s ease;
+        }
+
+        .dog-calc-modal-embed {
+            max-width: 700px;
+        }
+
+        @keyframes slideIn {
+            from { 
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to { 
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .dog-calc-modal-close {
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            font-size: 28px;
+            font-weight: 300;
+            color: #6f3f6d;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .dog-calc-modal-close:hover {
+            color: #f19a5f;
+        }
+
+        .dog-calc-modal h3 {
+            margin: 0 0 24px 0;
+            color: #6f3f6d;
+            font-size: 1.5rem;
+        }
+
+        /* Share Modal */
+        .dog-calc-share-buttons {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 12px;
+            margin-bottom: 20px;
+        }
+
+        .dog-calc-share-btn {
+            padding: 12px 16px;
+            border: none;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: white;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-family: inherit;
+        }
+
+        .dog-calc-share-facebook { background: #1877f2; }
+        .dog-calc-share-facebook:hover { background: #1664d1; transform: translateY(-1px); }
+        .dog-calc-share-twitter { background: #1da1f2; }
+        .dog-calc-share-twitter:hover { background: #1991da; transform: translateY(-1px); }
+        .dog-calc-share-linkedin { background: #0a66c2; }
+        .dog-calc-share-linkedin:hover { background: #084d95; transform: translateY(-1px); }
+        .dog-calc-share-email { background: #6f3f6d; }
+        .dog-calc-share-email:hover { background: #5a3357; transform: translateY(-1px); }
+        .dog-calc-share-copy { background: #f19a5f; }
+        .dog-calc-share-copy:hover { background: #e87741; transform: translateY(-1px); }
+
+        .dog-calc-share-url input {
+            flex: 1;
+            padding: 10px 16px;
+            border: 1px solid #e8e3ed;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            font-family: monospace;
+            background: #f8f5fa;
+            color: #6f3f6d;
+        }
+
+        /* Embed Modal */
+        .dog-calc-embed-options {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        .dog-calc-embed-option {
+            border: 1px solid #e8e3ed;
+            border-radius: 8px;
+            padding: 20px;
+            background: #fcfafd;
+        }
+
+        .dog-calc-embed-option h4 {
+            margin: 0 0 8px 0;
+            color: #6f3f6d;
+            font-size: 1.1rem;
+        }
+
+        .dog-calc-embed-option p {
+            margin: 0 0 16px 0;
+            color: #635870;
+            font-size: 0.9rem;
+        }
+
+        .dog-calc-code-container {
+            position: relative;
+            background: #312b3b;
+            border-radius: 6px;
+            overflow: hidden;
+        }
+
+        .dog-calc-code-container pre {
+            margin: 0;
+            padding: 16px;
+            overflow-x: auto;
+        }
+
+        .dog-calc-code-container code {
+            color: #f5f3f7;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+            font-size: 0.85rem;
+            line-height: 1.4;
+        }
+
+        .dog-calc-copy-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            padding: 6px 12px;
+            background: #f19a5f;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-family: inherit;
+        }
+
+        .dog-calc-copy-btn:hover { background: #e87741; }
+        .dog-calc-copy-btn.copied { background: #7fa464; }
+        .dog-calc-copy-btn.copied:hover { background: #7fa464; }
     `;
 
     // Widget HTML template
@@ -718,10 +897,10 @@
             </div>
 
             <div class="dog-calc-action-buttons">
-                <button class="dog-calc-btn dog-calc-btn-share" onclick="alert('Share functionality not available in widget mode')">
+                <button class="dog-calc-btn dog-calc-btn-share" id="shareBtn">
                     Share
                 </button>
-                <button class="dog-calc-btn dog-calc-btn-embed" onclick="alert('Embed functionality not available in widget mode')">
+                <button class="dog-calc-btn dog-calc-btn-embed" id="embedBtn">
                     Embed
                 </button>
             </div>
@@ -732,6 +911,66 @@
                 </a>
             </div>
         </div>
+
+        <!-- Share Modal -->
+        <div id="shareModal" class="dog-calc-modal" style="display: none;">
+            <div class="dog-calc-modal-content">
+                <span class="dog-calc-modal-close" id="shareModalClose">&times;</span>
+                <h3>Share Calculator</h3>
+                <div class="dog-calc-share-buttons">
+                    <button class="dog-calc-share-btn dog-calc-share-facebook" id="shareFacebook">
+                        Facebook
+                    </button>
+                    <button class="dog-calc-share-btn dog-calc-share-twitter" id="shareTwitter">
+                        Twitter
+                    </button>
+                    <button class="dog-calc-share-btn dog-calc-share-linkedin" id="shareLinkedIn">
+                        LinkedIn
+                    </button>
+                    <button class="dog-calc-share-btn dog-calc-share-email" id="shareEmail">
+                        Email
+                    </button>
+                    <button class="dog-calc-share-btn dog-calc-share-copy" id="shareCopy">
+                        Copy Link
+                    </button>
+                </div>
+                <div class="dog-calc-share-url">
+                    <input type="text" id="shareUrl" readonly>
+                </div>
+            </div>
+        </div>
+
+        <!-- Embed Modal -->
+        <div id="embedModal" class="dog-calc-modal" style="display: none;">
+            <div class="dog-calc-modal-content dog-calc-modal-embed">
+                <span class="dog-calc-modal-close" id="embedModalClose">&times;</span>
+                <h3>Embed Calculator</h3>
+                
+                <div class="dog-calc-embed-options">
+                    <div class="dog-calc-embed-option">
+                        <h4>JavaScript Widget (Recommended)</h4>
+                        <p>SEO-friendly, responsive, integrates with your site's design</p>
+                        <div class="dog-calc-code-container">
+                            <pre><code id="widgetCode"></code></pre>
+                            <button class="dog-calc-copy-btn" id="copyWidget">
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="dog-calc-embed-option">
+                        <h4>iframe Embed (Brand Protected)</h4>
+                        <p>Complete style isolation, your branding stays intact</p>
+                        <div class="dog-calc-code-container">
+                            <pre><code id="iframeCode"></code></pre>
+                            <button class="dog-calc-copy-btn" id="copyIframe">
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     `;
 
     // Calculator class
@@ -804,6 +1043,53 @@
             if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations());
             
             if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits());
+
+            // Modal event listeners
+            const shareBtn = this.container.querySelector('#shareBtn');
+            const embedBtn = this.container.querySelector('#embedBtn');
+            const shareModalClose = this.container.querySelector('#shareModalClose');
+            const embedModalClose = this.container.querySelector('#embedModalClose');
+
+            if (shareBtn) shareBtn.addEventListener('click', () => this.showShareModal());
+            if (embedBtn) embedBtn.addEventListener('click', () => this.showEmbedModal());
+            if (shareModalClose) shareModalClose.addEventListener('click', () => this.hideShareModal());
+            if (embedModalClose) embedModalClose.addEventListener('click', () => this.hideEmbedModal());
+
+            // Share buttons
+            const shareFacebook = this.container.querySelector('#shareFacebook');
+            const shareTwitter = this.container.querySelector('#shareTwitter');
+            const shareLinkedIn = this.container.querySelector('#shareLinkedIn');
+            const shareEmail = this.container.querySelector('#shareEmail');
+            const shareCopy = this.container.querySelector('#shareCopy');
+
+            if (shareFacebook) shareFacebook.addEventListener('click', () => this.shareToFacebook());
+            if (shareTwitter) shareTwitter.addEventListener('click', () => this.shareToTwitter());
+            if (shareLinkedIn) shareLinkedIn.addEventListener('click', () => this.shareToLinkedIn());
+            if (shareEmail) shareEmail.addEventListener('click', () => this.shareViaEmail());
+            if (shareCopy) shareCopy.addEventListener('click', () => this.copyShareLink());
+
+            // Copy buttons
+            const copyWidget = this.container.querySelector('#copyWidget');
+            const copyIframe = this.container.querySelector('#copyIframe');
+
+            if (copyWidget) copyWidget.addEventListener('click', () => this.copyEmbedCode('widget'));
+            if (copyIframe) copyIframe.addEventListener('click', () => this.copyEmbedCode('iframe'));
+
+            // Close modals on outside click
+            const shareModal = this.container.querySelector('#shareModal');
+            const embedModal = this.container.querySelector('#embedModal');
+
+            if (shareModal) {
+                shareModal.addEventListener('click', (e) => {
+                    if (e.target === shareModal) this.hideShareModal();
+                });
+            }
+
+            if (embedModal) {
+                embedModal.addEventListener('click', (e) => {
+                    if (e.target === embedModal) this.hideEmbedModal();
+                });
+            }
         }
 
         toggleUnits() {
@@ -957,6 +1243,9 @@
         }
 
         formatNumber(num, decimals = 0) {
+            if (decimals === 0) {
+                return Math.round(num).toString();
+            }
             return num.toFixed(decimals).replace(/\.?0+$/, '');
         }
 
@@ -1076,6 +1365,115 @@
             
             totalFoodDisplay.value = this.formatNumber(convertedAmount, decimals) + ' ' + unitLabel;
         }
+
+        // Modal functionality
+        showShareModal() {
+            const modal = this.container.querySelector('#shareModal');
+            const shareUrl = this.container.querySelector('#shareUrl');
+            if (modal && shareUrl) {
+                shareUrl.value = window.location.href;
+                modal.style.display = 'block';
+            }
+        }
+
+        hideShareModal() {
+            const modal = this.container.querySelector('#shareModal');
+            if (modal) modal.style.display = 'none';
+        }
+
+        showEmbedModal() {
+            const modal = this.container.querySelector('#embedModal');
+            const widgetCode = this.container.querySelector('#widgetCode');
+            const iframeCode = this.container.querySelector('#iframeCode');
+            
+            if (modal && widgetCode && iframeCode) {
+                const baseUrl = window.location.origin;
+                const theme = this.theme !== 'system' ? ` data-theme="${this.theme}"` : '';
+                
+                widgetCode.textContent = `<script src="${baseUrl}/dog-calculator-widget.js"></script>
+<div id="dog-calorie-calculator"${theme}></div>`;
+                
+                iframeCode.textContent = `<iframe src="${baseUrl}/iframe.html${this.theme !== 'system' ? '?theme=' + this.theme : ''}" 
+        width="100%" height="600" 
+        frameborder="0" 
+        title="Dog Calorie Calculator">
+</iframe>`;
+                
+                modal.style.display = 'block';
+            }
+        }
+
+        hideEmbedModal() {
+            const modal = this.container.querySelector('#embedModal');
+            if (modal) modal.style.display = 'none';
+        }
+
+        shareToFacebook() {
+            const url = encodeURIComponent(window.location.href);
+            window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
+        }
+
+        shareToTwitter() {
+            const url = encodeURIComponent(window.location.href);
+            const text = encodeURIComponent('Check out this useful dog calorie calculator!');
+            window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
+        }
+
+        shareToLinkedIn() {
+            const url = encodeURIComponent(window.location.href);
+            window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'width=600,height=400');
+        }
+
+        shareViaEmail() {
+            const subject = encodeURIComponent('Dog Calorie Calculator');
+            const body = encodeURIComponent(`Check out this useful dog calorie calculator: ${window.location.href}`);
+            window.location.href = `mailto:?subject=${subject}&body=${body}`;
+        }
+
+        async copyShareLink() {
+            const shareUrl = this.container.querySelector('#shareUrl');
+            const copyBtn = this.container.querySelector('#shareCopy');
+            
+            if (shareUrl && copyBtn) {
+                try {
+                    await navigator.clipboard.writeText(shareUrl.value);
+                    const originalText = copyBtn.textContent;
+                    copyBtn.textContent = 'Copied!';
+                    copyBtn.classList.add('copied');
+                    
+                    setTimeout(() => {
+                        copyBtn.textContent = originalText;
+                        copyBtn.classList.remove('copied');
+                    }, 2000);
+                } catch (err) {
+                    // Fallback for older browsers
+                    shareUrl.select();
+                    document.execCommand('copy');
+                }
+            }
+        }
+
+        async copyEmbedCode(type) {
+            const codeElement = this.container.querySelector(type === 'widget' ? '#widgetCode' : '#iframeCode');
+            const copyBtn = this.container.querySelector(type === 'widget' ? '#copyWidget' : '#copyIframe');
+            
+            if (codeElement && copyBtn) {
+                try {
+                    await navigator.clipboard.writeText(codeElement.textContent);
+                    const originalText = copyBtn.textContent;
+                    copyBtn.textContent = 'Copied!';
+                    copyBtn.classList.add('copied');
+                    
+                    setTimeout(() => {
+                        copyBtn.textContent = originalText;
+                        copyBtn.classList.remove('copied');
+                    }, 2000);
+                } catch (err) {
+                    // Fallback for older browsers
+                    console.log('Copy fallback needed');
+                }
+            }
+        }
     }
 
     // Auto-initialize widget
diff --git a/iframe.html b/iframe.html
index a0d1703..07d9028 100644
--- a/iframe.html
+++ b/iframe.html
@@ -4,43 +4,639 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dog Calorie Calculator - Canine Nutrition and Wellness</title>
-    <link rel="stylesheet" href="styles.css">
     <style>
-        /* iframe-specific optimizations */
+        /* Dog Calorie Calculator Styles */
+        /* Using Canine Nutrition and Wellness brand colors and design system */
+
         body {
             margin: 0;
             padding: 0;
             background: transparent;
             overflow-x: hidden;
+            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.5;
+            color: #6f3f6d;
         }
-        
-        .dog-calculator-container {
-            margin: 0;
-            max-width: none;
-            padding: 16px;
-        }
-        
-        /* Ensure proper sizing for iframe */
-        html, body {
-            height: auto;
-            min-height: 100%;
-        }
-        
-        /* iframe communication styles */
+
         .dog-calculator-container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 24px;
+            box-sizing: border-box;
             opacity: 0;
             transition: opacity 0.3s ease;
         }
-        
+
         .dog-calculator-container.loaded {
             opacity: 1;
         }
+
+        .dog-calculator-container *,
+        .dog-calculator-container *::before,
+        .dog-calculator-container *::after {
+            box-sizing: border-box;
+        }
+
+        .dog-calculator-section {
+            background: #fdfcfe;
+            border: 1px solid #e8e3ed;
+            border-radius: 8px 8px 0 0;
+            padding: 24px;
+            margin-bottom: 0;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 24px;
+            flex-wrap: wrap;
+            gap: 16px;
+        }
+
+        .dog-calculator-section h2 {
+            margin: 0;
+            color: #6f3f6d;
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        /* Unit Switch */
+        .dog-calculator-unit-switch {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .dog-calculator-unit-label {
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: #635870;
+            transition: color 0.2s ease;
+        }
+
+        .dog-calculator-unit-label.active {
+            color: #6f3f6d;
+            font-weight: 600;
+        }
+
+        .dog-calculator-switch {
+            position: relative;
+            display: inline-block;
+            width: 48px;
+            height: 24px;
+        }
+
+        .dog-calculator-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .dog-calculator-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #e8e3ed;
+            transition: 0.3s;
+            border-radius: 24px;
+        }
+
+        .dog-calculator-slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+
+        .dog-calculator-switch input:checked + .dog-calculator-slider {
+            background-color: #f19a5f;
+        }
+
+        .dog-calculator-switch input:checked + .dog-calculator-slider:before {
+            transform: translateX(24px);
+        }
+
+        .dog-calculator-form-group {
+            margin-bottom: 20px;
+        }
+
+        .dog-calculator-form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: #6f3f6d;
+            font-size: 1rem;
+        }
+
+        .dog-calculator-form-group select,
+        .dog-calculator-form-group input[type="number"],
+        .dog-calculator-form-group input[type="text"] {
+            width: 100%;
+            padding: 12px 16px;
+            border: 1px solid #e8e3ed;
+            border-radius: 6px;
+            font-size: 1rem;
+            font-family: inherit;
+            background-color: #ffffff;
+            color: #6f3f6d;
+            transition: all 0.2s ease;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f3f6d' 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 12px center;
+            background-size: 20px;
+            padding-right: 40px;
+        }
+
+        .dog-calculator-form-group select option {
+            background-color: #ffffff;
+            color: #6f3f6d;
+        }
+
+        .dog-calculator-form-group input[type="number"],
+        .dog-calculator-form-group input[type="text"] {
+            background-image: none;
+            padding-right: 16px;
+        }
+
+        .dog-calculator-form-group select:focus,
+        .dog-calculator-form-group input[type="number"]:focus,
+        .dog-calculator-form-group input[type="text"]:focus {
+            outline: none;
+            border-color: #f19a5f;
+            background-color: #ffffff;
+            box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
+        }
+
+        .dog-calculator-form-group input[readonly] {
+            background-color: #f8f5fa;
+            cursor: not-allowed;
+            color: #635870;
+        }
+
+        .dog-calculator-results {
+            background: linear-gradient(135deg, rgba(241, 154, 95, 0.08) 0%, rgba(241, 154, 95, 0.04) 100%);
+            border: 1px solid rgba(241, 154, 95, 0.2);
+            border-radius: 6px;
+            padding: 20px;
+            margin-top: 24px;
+        }
+
+        .dog-calculator-result-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .dog-calculator-result-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .dog-calculator-result-label {
+            font-weight: 500;
+            color: #6f3f6d;
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-result-value {
+            font-weight: 600;
+            color: #6f3f6d;
+            font-size: 1.1rem;
+            padding: 4px 12px;
+            background: rgba(241, 154, 95, 0.15);
+            border-radius: 4px;
+        }
+
+        .dog-calculator-collapsible {
+            background: #ffffff;
+            border: 1px solid #e8e3ed;
+            border-top: none;
+            margin-bottom: 0;
+            overflow: hidden;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-collapsible-header {
+            background: #f8f5fa;
+            padding: 20px 24px;
+            border-bottom: 1px solid #e8e3ed;
+        }
+
+        .dog-calculator-collapsible-header h3 {
+            margin: 0;
+            font-size: 1.25rem;
+            color: #6f3f6d;
+            font-weight: 600;
+        }
+
+        .dog-calculator-collapsible-content {
+            display: block;
+        }
+
+        .dog-calculator-collapsible-inner {
+            padding: 24px;
+        }
+
+        .dog-calculator-input-group {
+            display: flex;
+            gap: 16px;
+            align-items: flex-end;
+        }
+
+        .dog-calculator-input-group .dog-calculator-form-group {
+            flex: 1;
+            margin-bottom: 0;
+        }
+
+        .dog-calculator-unit-select {
+            min-width: 120px;
+        }
+
+        .dog-calculator-error {
+            color: #e87159;
+            font-size: 0.875rem;
+            margin-top: 6px;
+            font-weight: 500;
+        }
+
+        .dog-calculator-hidden {
+            display: none;
+        }
+
+        /* Action Buttons */
+        .dog-calculator-action-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            padding: 20px;
+            background: #f8f5fa;
+            border-left: 1px solid #e8e3ed;
+            border-right: 1px solid #e8e3ed;
+            margin-top: -1px;
+        }
+
+        .dog-calculator-btn {
+            padding: 8px 16px;
+            border: 1px solid #e8e3ed;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            font-family: inherit;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: white;
+            color: #6f3f6d;
+        }
+
+        .dog-calculator-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .dog-calculator-btn-share:hover {
+            border-color: #9f5999;
+            color: #9f5999;
+        }
+
+        .dog-calculator-btn-embed:hover {
+            border-color: #7fa464;
+            color: #7fa464;
+        }
+
+        .dog-calculator-footer {
+            text-align: center;
+            padding: 20px;
+            background: #fdfcfe;
+            border: 1px solid #e8e3ed;
+            border-radius: 0 0 8px 8px;
+            border-top: none;
+            margin-top: -1px;
+        }
+
+        .dog-calculator-footer a {
+            color: #9f5999;
+            text-decoration: none;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: color 0.2s ease;
+        }
+
+        .dog-calculator-footer a:hover {
+            color: #f19a5f;
+            text-decoration: underline;
+        }
+
+        /* Mobile Responsive Design */
+        @media (max-width: 576px) {
+            .dog-calculator-container {
+                padding: 16px;
+            }
+
+            .dog-calculator-section,
+            .dog-calculator-collapsible-inner {
+                padding: 20px;
+            }
+
+            .dog-calculator-section h2,
+            .dog-calculator-collapsible-header h3 {
+                font-size: 1.3rem;
+            }
+
+            .dog-calculator-section-header {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 12px;
+            }
+
+            .dog-calculator-section h2 {
+                text-align: center;
+            }
+
+            .dog-calculator-unit-switch {
+                justify-content: center;
+            }
+
+            .dog-calculator-action-buttons {
+                flex-direction: column;
+                padding: 16px;
+            }
+
+            .dog-calculator-btn {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .dog-calculator-input-group {
+                flex-direction: column;
+                gap: 20px;
+            }
+
+            .dog-calculator-input-group .dog-calculator-form-group {
+                margin-bottom: 20px;
+            }
+
+            .dog-calculator-result-item {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 8px;
+            }
+
+            .dog-calculator-result-value {
+                align-self: stretch;
+                text-align: center;
+            }
+
+            .dog-calculator-collapsible-header {
+                padding: 16px 20px;
+            }
+        }
+
+        /* Dark theme - manual override */
+        .dog-calculator-container.theme-dark {
+            color: #f5f3f7;
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-section,
+        .dog-calculator-container.theme-dark .dog-calculator-collapsible {
+            background: #24202d;
+            border-color: #433c4f;
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-collapsible-header {
+            background: #312b3b;
+            border-color: #433c4f;
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-collapsible-header:hover {
+            background: #3a3446;
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-section h2,
+        .dog-calculator-container.theme-dark .dog-calculator-collapsible-header h3,
+        .dog-calculator-container.theme-dark .dog-calculator-form-group label,
+        .dog-calculator-container.theme-dark .dog-calculator-result-label {
+            color: #f5f3f7;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-label {
+            color: #b8b0c2;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-label.active {
+            color: #f5f3f7;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-slider {
+            background-color: #433c4f;
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-form-group select,
+        .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"],
+        .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"] {
+            background-color: #312b3b;
+            border-color: #433c4f;
+            color: #f5f3f7;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' 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");
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-form-group select option {
+            background-color: #312b3b;
+            color: #f5f3f7;
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-form-group select:focus,
+        .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"]:focus,
+        .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"]:focus {
+            background-color: #312b3b;
+            border-color: #f19a5f;
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-form-group input[readonly] {
+            background-color: #433c4f;
+            color: #b8b0c2;
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-results {
+            background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
+            border-color: rgba(241, 154, 95, 0.3);
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-result-value {
+            color: #f5f3f7;
+            background: rgba(241, 154, 95, 0.2);
+        }
+            
+        .dog-calculator-container.theme-dark .dog-calculator-footer {
+            background: #24202d;
+            border-color: #433c4f;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-action-buttons {
+            background: #312b3b;
+            border-color: #433c4f;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-btn {
+            background: #433c4f;
+            border-color: #433c4f;
+            color: #f5f3f7;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-btn:hover {
+            background: #524a5f;
+            border-color: #524a5f;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-btn-share:hover {
+            border-color: #9f5999;
+            color: #f19a5f;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-btn-embed:hover {
+            border-color: #7fa464;
+            color: #7fa464;
+        }
+
+        /* System theme - follows user's OS preference */
+        @media (prefers-color-scheme: dark) {
+            .dog-calculator-container.theme-system {
+                color: #f5f3f7;
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-section,
+            .dog-calculator-container.theme-system .dog-calculator-collapsible {
+                background: #24202d;
+                border-color: #433c4f;
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-collapsible-header {
+                background: #312b3b;
+                border-color: #433c4f;
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-collapsible-header:hover {
+                background: #3a3446;
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-section h2,
+            .dog-calculator-container.theme-system .dog-calculator-collapsible-header h3,
+            .dog-calculator-container.theme-system .dog-calculator-form-group label,
+            .dog-calculator-container.theme-system .dog-calculator-result-label {
+                color: #f5f3f7;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-label {
+                color: #b8b0c2;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-label.active {
+                color: #f5f3f7;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-slider {
+                background-color: #433c4f;
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-form-group select,
+            .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"],
+            .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"] {
+                background-color: #312b3b;
+                border-color: #433c4f;
+                color: #f5f3f7;
+                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' 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");
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-form-group select option {
+                background-color: #312b3b;
+                color: #f5f3f7;
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-form-group select:focus,
+            .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"]:focus,
+            .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"]:focus {
+                background-color: #312b3b;
+                border-color: #f19a5f;
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-form-group input[readonly] {
+                background-color: #433c4f;
+                color: #b8b0c2;
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-results {
+                background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
+                border-color: rgba(241, 154, 95, 0.3);
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-result-value {
+                color: #f5f3f7;
+                background: rgba(241, 154, 95, 0.2);
+            }
+            
+            .dog-calculator-container.theme-system .dog-calculator-footer {
+                background: #24202d;
+                border-color: #433c4f;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-action-buttons {
+                background: #312b3b;
+                border-color: #433c4f;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-btn {
+                background: #433c4f;
+                border-color: #433c4f;
+                color: #f5f3f7;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-btn:hover {
+                background: #524a5f;
+                border-color: #524a5f;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-btn-share:hover {
+                border-color: #9f5999;
+                color: #f19a5f;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-btn-embed:hover {
+                border-color: #7fa464;
+                color: #7fa464;
+            }
+        }
     </style>
 </head>
 <body>
     <div class="dog-calculator-container" id="dogCalculator">
         <div class="dog-calculator-section">
-            <h2>Dog's Characteristics</h2>
+            <div class="dog-calculator-section-header">
+                <h2>Dog's Characteristics</h2>
+                <div class="dog-calculator-unit-switch">
+                    <span class="dog-calculator-unit-label active" id="metricLabel">Metric</span>
+                    <label class="dog-calculator-switch">
+                        <input type="checkbox" id="unitToggle">
+                        <span class="dog-calculator-slider"></span>
+                    </label>
+                    <span class="dog-calculator-unit-label" id="imperialLabel">Imperial</span>
+                </div>
+            </div>
             
             <div class="dog-calculator-form-group">
                 <label for="dogType">Dog Type / Activity Level:</label>
@@ -61,7 +657,7 @@
             </div>
 
             <div class="dog-calculator-form-group">
-                <label for="weight">Dog's Weight (kg):</label>
+                <label for="weight" id="weightLabel">Dog's Weight (kg):</label>
                 <input type="number" id="weight" min="0.1" step="0.1" placeholder="Enter weight in kg" aria-describedby="weightHelp">
                 <div id="weightError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid weight (minimum 0.1 kg)</div>
             </div>
@@ -78,15 +674,14 @@
             </div>
         </div>
 
-        <div class="dog-calculator-collapsible" id="foodCalculator">
-            <div class="dog-calculator-collapsible-header" onclick="toggleCollapsible('foodCalculator')">
-                <h3>How much food is that?</h3>
-                <span class="dog-calculator-collapsible-arrow">▼</span>
+        <div class="dog-calculator-collapsible active" id="foodCalculator">
+            <div class="dog-calculator-collapsible-header">
+                <h3>How much should I feed?</h3>
             </div>
             <div class="dog-calculator-collapsible-content">
                 <div class="dog-calculator-collapsible-inner">
                     <div class="dog-calculator-form-group">
-                        <label for="foodEnergy">Food Energy Content (kcal/100g):</label>
+                        <label for="foodEnergy" id="foodEnergyLabel">Food Energy Content (kcal/100g):</label>
                         <input type="number" id="foodEnergy" min="1" step="1" placeholder="Enter kcal per 100g" aria-describedby="foodEnergyHelp">
                         <div id="foodEnergyError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content (minimum 1 kcal/100g)</div>
                     </div>
@@ -123,6 +718,15 @@
             </div>
         </div>
 
+        <div class="dog-calculator-action-buttons">
+            <button class="dog-calculator-btn dog-calculator-btn-share" onclick="alert('Share functionality not available in iframe mode')">
+                Share
+            </button>
+            <button class="dog-calculator-btn dog-calculator-btn-embed" onclick="alert('Embed functionality not available in iframe mode')">
+                Embed
+            </button>
+        </div>
+
         <div class="dog-calculator-footer">
             <a href="https://caninenutritionandwellness.com" target="_blank" rel="noopener noreferrer">
                 by caninenutritionandwellness.com
@@ -130,50 +734,388 @@
         </div>
     </div>
 
-    <script src="calculator.js"></script>
     <script>
-        // iframe auto-resize functionality
-        function sendHeightToParent() {
-            const height = document.body.scrollHeight;
-            if (window.parent && window.parent !== window) {
-                window.parent.postMessage({
-                    type: 'dogCalculatorResize',
-                    height: height
-                }, '*');
+        /**
+         * Dog Calorie Calculator - iframe version
+         * by Canine Nutrition and Wellness
+         */
+
+        class DogCalorieCalculator {
+            constructor() {
+                this.currentMER = 0;
+                this.isImperial = false;
+                this.theme = this.getThemeFromURL() || 'system';
+                this.init();
+            }
+
+            init() {
+                this.applyTheme();
+                this.bindEvents();
+                this.updateUnitLabels();
+                this.setupIframeResize();
+                
+                // Show the calculator with fade-in
+                const container = document.getElementById('dogCalculator');
+                container.classList.add('loaded');
+            }
+
+            getThemeFromURL() {
+                const urlParams = new URLSearchParams(window.location.search);
+                const theme = urlParams.get('theme');
+                return ['light', 'dark', 'system'].includes(theme) ? theme : null;
+            }
+
+            applyTheme() {
+                const container = document.getElementById('dogCalculator');
+                container.classList.remove('theme-light', 'theme-dark', 'theme-system');
+                container.classList.add(`theme-${this.theme}`);
+            }
+
+            bindEvents() {
+                const weightInput = document.getElementById('weight');
+                const dogTypeSelect = document.getElementById('dogType');
+                const foodEnergyInput = document.getElementById('foodEnergy');
+                const daysInput = document.getElementById('days');
+                const unitSelect = document.getElementById('unit');
+                const unitToggle = document.getElementById('unitToggle');
+
+                if (weightInput) {
+                    weightInput.addEventListener('input', () => this.updateCalorieCalculations());
+                    weightInput.addEventListener('blur', () => this.validateWeight());
+                }
+                
+                if (dogTypeSelect) dogTypeSelect.addEventListener('change', () => this.updateCalorieCalculations());
+                
+                if (foodEnergyInput) {
+                    foodEnergyInput.addEventListener('input', () => this.updateFoodCalculations());
+                    foodEnergyInput.addEventListener('blur', () => this.validateFoodEnergy());
+                }
+                
+                if (daysInput) {
+                    daysInput.addEventListener('input', () => this.updateFoodCalculations());
+                    daysInput.addEventListener('blur', () => this.validateDays());
+                }
+                
+                if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations());
+                
+                if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits());
+            }
+
+            toggleUnits() {
+                const toggle = document.getElementById('unitToggle');
+                this.isImperial = toggle.checked;
+                
+                this.updateUnitLabels();
+                this.convertExistingValues();
+                this.updateCalorieCalculations();
+            }
+
+            updateUnitLabels() {
+                const metricLabel = document.getElementById('metricLabel');
+                const imperialLabel = document.getElementById('imperialLabel');
+                const weightLabel = document.getElementById('weightLabel');
+                const foodEnergyLabel = document.getElementById('foodEnergyLabel');
+                const weightInput = document.getElementById('weight');
+                const foodEnergyInput = document.getElementById('foodEnergy');
+                const unitSelect = document.getElementById('unit');
+
+                if (metricLabel && imperialLabel) {
+                    metricLabel.classList.toggle('active', !this.isImperial);
+                    imperialLabel.classList.toggle('active', this.isImperial);
+                }
+
+                if (this.isImperial) {
+                    if (weightLabel) weightLabel.textContent = "Dog's Weight (lbs):";
+                    if (weightInput) {
+                        weightInput.placeholder = "Enter weight in lbs";
+                        weightInput.min = "0.2";
+                        weightInput.step = "0.1";
+                    }
+                    if (foodEnergyLabel) foodEnergyLabel.textContent = "Food Energy Content (kcal/oz):";
+                    if (foodEnergyInput) {
+                        foodEnergyInput.placeholder = "Enter kcal per oz";
+                        foodEnergyInput.min = "0.03";
+                        foodEnergyInput.step = "0.01";
+                    }
+                    if (unitSelect) {
+                        unitSelect.innerHTML = `
+                            <option value="oz">ounces (oz)</option>
+                            <option value="lb">pounds (lb)</option>
+                            <option value="g">grams (g)</option>
+                            <option value="kg">kilograms (kg)</option>
+                        `;
+                    }
+                } else {
+                    if (weightLabel) weightLabel.textContent = "Dog's Weight (kg):";
+                    if (weightInput) {
+                        weightInput.placeholder = "Enter weight in kg";
+                        weightInput.min = "0.1";
+                        weightInput.step = "0.1";
+                    }
+                    if (foodEnergyLabel) foodEnergyLabel.textContent = "Food Energy Content (kcal/100g):";
+                    if (foodEnergyInput) {
+                        foodEnergyInput.placeholder = "Enter kcal per 100g";
+                        foodEnergyInput.min = "1";
+                        foodEnergyInput.step = "1";
+                    }
+                    if (unitSelect) {
+                        unitSelect.innerHTML = `
+                            <option value="g">grams (g)</option>
+                            <option value="kg">kilograms (kg)</option>
+                            <option value="oz">ounces (oz)</option>
+                            <option value="lb">pounds (lb)</option>
+                        `;
+                    }
+                }
+            }
+
+            convertExistingValues() {
+                const weightInput = document.getElementById('weight');
+                const foodEnergyInput = document.getElementById('foodEnergy');
+
+                if (weightInput && weightInput.value) {
+                    const currentWeight = parseFloat(weightInput.value);
+                    if (!isNaN(currentWeight)) {
+                        if (this.isImperial) {
+                            weightInput.value = this.formatNumber(currentWeight * 2.20462, 1);
+                        } else {
+                            weightInput.value = this.formatNumber(currentWeight / 2.20462, 1);
+                        }
+                    }
+                }
+
+                if (foodEnergyInput && foodEnergyInput.value) {
+                    const currentEnergy = parseFloat(foodEnergyInput.value);
+                    if (!isNaN(currentEnergy)) {
+                        if (this.isImperial) {
+                            foodEnergyInput.value = this.formatNumber(currentEnergy / 3.52739, 2);
+                        } else {
+                            foodEnergyInput.value = this.formatNumber(currentEnergy * 3.52739, 0);
+                        }
+                    }
+                }
+            }
+
+            getWeightInKg() {
+                const weightInput = document.getElementById('weight');
+                if (!weightInput || !weightInput.value) return null;
+                
+                const weight = parseFloat(weightInput.value);
+                if (isNaN(weight)) return null;
+                
+                return this.isImperial ? weight / 2.20462 : weight;
+            }
+
+            getFoodEnergyPer100g() {
+                const foodEnergyInput = document.getElementById('foodEnergy');
+                if (!foodEnergyInput || !foodEnergyInput.value) return null;
+                
+                const energy = parseFloat(foodEnergyInput.value);
+                if (isNaN(energy)) return null;
+                
+                return this.isImperial ? energy * 3.52739 : energy;
+            }
+
+            calculateRER(weightKg) {
+                return 70 * Math.pow(weightKg, 0.75);
+            }
+
+            calculateMER(rer, factor) {
+                return rer * factor;
+            }
+
+            validateInput(value, min = 0, isInteger = false) {
+                const num = parseFloat(value);
+                if (isNaN(num) || num < min) return false;
+                if (isInteger && !Number.isInteger(num)) return false;
+                return true;
+            }
+
+            showError(elementId, show = true) {
+                const errorElement = document.getElementById(elementId);
+                if (errorElement) {
+                    if (show) {
+                        errorElement.classList.remove('dog-calculator-hidden');
+                    } else {
+                        errorElement.classList.add('dog-calculator-hidden');
+                    }
+                }
+            }
+
+            convertUnits(grams, unit) {
+                switch (unit) {
+                    case 'kg':
+                        return grams / 1000;
+                    case 'oz':
+                        return grams / 28.3495;
+                    case 'lb':
+                        return grams / 453.592;
+                    default:
+                        return grams;
+                }
+            }
+
+            formatNumber(num, decimals = 0) {
+                if (decimals === 0) {
+                    return Math.round(num).toString();
+                }
+                return num.toFixed(decimals).replace(/\.?0+$/, '');
+            }
+
+            validateWeight() {
+                const weightKg = this.getWeightInKg();
+                if (weightKg !== null && weightKg < 0.1) {
+                    this.showError('weightError', true);
+                } else {
+                    this.showError('weightError', false);
+                }
+            }
+
+            validateFoodEnergy() {
+                const energyPer100g = this.getFoodEnergyPer100g();
+                if (energyPer100g !== null && energyPer100g < 1) {
+                    this.showError('foodEnergyError', true);
+                } else {
+                    this.showError('foodEnergyError', false);
+                }
+            }
+
+            validateDays() {
+                const days = document.getElementById('days')?.value;
+                if (days && !this.validateInput(days, 1, true)) {
+                    this.showError('daysError', true);
+                } else {
+                    this.showError('daysError', false);
+                }
+            }
+
+            updateCalorieCalculations() {
+                const dogTypeSelect = document.getElementById('dogType');
+                const calorieResults = document.getElementById('calorieResults');
+                const rerValue = document.getElementById('rerValue');
+                const merValue = document.getElementById('merValue');
+
+                if (!dogTypeSelect || !calorieResults || !rerValue || !merValue) {
+                    return;
+                }
+
+                const weightKg = this.getWeightInKg();
+                const dogTypeFactor = dogTypeSelect.value;
+                
+                this.showError('weightError', false);
+                
+                if (!weightKg || weightKg < 0.1) {
+                    const weightInput = document.getElementById('weight');
+                    if (weightInput && weightInput.value) this.showError('weightError', true);
+                    calorieResults.style.display = 'none';
+                    return;
+                }
+
+                if (!dogTypeFactor) {
+                    calorieResults.style.display = 'none';
+                    return;
+                }
+
+                const factor = parseFloat(dogTypeFactor);
+                
+                const rer = this.calculateRER(weightKg);
+                const mer = this.calculateMER(rer, factor);
+                
+                this.currentMER = mer;
+                
+                rerValue.textContent = this.formatNumber(rer, 0) + ' cal/day';
+                merValue.textContent = this.formatNumber(mer, 0) + ' cal/day';
+                calorieResults.style.display = 'block';
+                
+                this.updateFoodCalculations();
+                this.sendHeightToParent();
+            }
+
+            updateFoodCalculations() {
+                if (this.currentMER === 0) return;
+                
+                const daysInput = document.getElementById('days');
+                const unitSelect = document.getElementById('unit');
+                const dailyFoodResults = document.getElementById('dailyFoodResults');
+                const dailyFoodValue = document.getElementById('dailyFoodValue');
+                const totalFoodDisplay = document.getElementById('totalFoodDisplay');
+
+                if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !totalFoodDisplay) {
+                    return;
+                }
+
+                const energyPer100g = this.getFoodEnergyPer100g();
+                const days = daysInput.value;
+                const unit = unitSelect.value;
+                
+                this.showError('foodEnergyError', false);
+                this.showError('daysError', false);
+                
+                if (!energyPer100g || energyPer100g < 1) {
+                    const foodEnergyInput = document.getElementById('foodEnergy');
+                    if (foodEnergyInput && foodEnergyInput.value) this.showError('foodEnergyError', true);
+                    dailyFoodResults.style.display = 'none';
+                    totalFoodDisplay.value = '';
+                    return;
+                }
+
+                if (!days || !this.validateInput(days, 1, true)) {
+                    if (days) this.showError('daysError', true);
+                    totalFoodDisplay.value = '';
+                    return;
+                }
+
+                const numDays = parseInt(days);
+                
+                const dailyFoodGrams = (this.currentMER / energyPer100g) * 100;
+                const totalFoodGrams = dailyFoodGrams * numDays;
+                
+                dailyFoodValue.textContent = this.formatNumber(dailyFoodGrams, 1) + ' g/day';
+                dailyFoodResults.style.display = 'block';
+                
+                const convertedAmount = this.convertUnits(totalFoodGrams, unit);
+                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
+                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+                
+                totalFoodDisplay.value = this.formatNumber(convertedAmount, decimals) + ' ' + unitLabel;
+                
+                this.sendHeightToParent();
+            }
+
+            setupIframeResize() {
+                // Send height to parent window for iframe auto-resize
+                this.sendHeightToParent();
+                
+                // Monitor for content changes that might affect height
+                const observer = new MutationObserver(() => {
+                    setTimeout(() => this.sendHeightToParent(), 100);
+                });
+                
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true
+                });
+                
+                // Send height on window resize
+                window.addEventListener('resize', () => this.sendHeightToParent());
+            }
+
+            sendHeightToParent() {
+                const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+                if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({
+                        type: 'dogCalculatorResize',
+                        height: height
+                    }, '*');
+                }
             }
         }
 
-        // Send initial height
+        // Initialize calculator when DOM is ready
         document.addEventListener('DOMContentLoaded', function() {
-            const container = document.getElementById('dogCalculator');
-            container.classList.add('loaded');
-            
-            // Send height after animations complete
-            setTimeout(() => {
-                sendHeightToParent();
-            }, 100);
-            
-            // Monitor for content changes that might affect height
-            const observer = new MutationObserver(() => {
-                setTimeout(sendHeightToParent, 100);
-            });
-            
-            observer.observe(document.body, {
-                childList: true,
-                subtree: true,
-                attributes: true
-            });
-            
-            // Send height on window resize
-            window.addEventListener('resize', sendHeightToParent);
+            new DogCalorieCalculator();
         });
-
-        // Override the toggleCollapsible function to handle resize
-        const originalToggleCollapsible = window.toggleCollapsible;
-        window.toggleCollapsible = function(id) {
-            originalToggleCollapsible(id);
-            setTimeout(sendHeightToParent, 350); // Wait for animation
-        };
     </script>
 </body>
 </html>
\ No newline at end of file