/**
 * I Am Super Mom - Additional Components
 * Extra UI components and enhancements
 */

/* ============================================
   SEARCH SUGGESTIONS
   ============================================ */
.sm-search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--sm-white); border-radius: var(--sm-radius-lg); box-shadow: var(--sm-shadow-2xl); overflow: hidden; z-index: 9990; max-height: 400px; overflow-y: auto; }
.sm-search-suggestions-list { list-style: none; margin: 0; padding: 0; }
.sm-search-suggestions-list li { border-bottom: 1px solid var(--sm-cloud); }
.sm-search-suggestions-list li:last-child { border-bottom: none; }
.sm-search-suggestions-list a { display: flex; align-items: center; gap: var(--sm-sp-4); padding: var(--sm-sp-4); color: var(--sm-charcoal); transition: background var(--sm-transition-fast); text-decoration: none; }
.sm-search-suggestions-list a:hover { background: var(--sm-cream); }
.sm-search-suggestions-list img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--sm-radius-sm); flex-shrink: 0; }
.sm-search-result-content { flex: 1; min-width: 0; }
.sm-search-result-title { display: block; font-family: var(--sm-font-display); font-size: var(--sm-text-base); font-weight: 700; line-height: 1.3; margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-search-result-meta { display: block; font-size: var(--sm-text-xs); color: var(--sm-slate); }
.sm-search-loading { padding: var(--sm-sp-8); text-align: center; color: var(--sm-slate); }
.sm-search-no-results { padding: var(--sm-sp-8); text-align: center; color: var(--sm-slate); font-size: var(--sm-text-sm); margin: 0; }

/* ============================================
   MOBILE NAVIGATION
   ============================================ */
.sm-mobile-nav { position: fixed; top: 0; right: -320px; width: 320px; max-width: 85vw; height: 100vh; background: var(--sm-white); z-index: 9999; transition: right 400ms var(--sm-ease-out); overflow-y: auto; box-shadow: -8px 0 40px rgba(0,0,0,0.15); padding: var(--sm-sp-6); }
.sm-mobile-nav.active { right: 0; }
.sm-mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms ease; }
.sm-mobile-nav-overlay.active { opacity: 1; visibility: visible; }
.sm-mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sm-sp-4); margin-bottom: var(--sm-sp-4); border-bottom: 1px solid var(--sm-mist); }
.sm-mobile-nav-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 1.5px solid var(--sm-mist); border-radius: 50%; cursor: pointer; font-size: 20px; color: var(--sm-graphite); transition: all var(--sm-transition-fast); }
.sm-mobile-nav-close:hover { border-color: var(--sm-coral); color: var(--sm-coral); }
.sm-mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.sm-mobile-nav ul li a { display: flex; align-items: center; gap: 10px; padding: 14px 0; font-size: var(--sm-text-base); font-weight: 500; color: var(--sm-charcoal); border-bottom: 1px solid var(--sm-cloud); transition: color var(--sm-transition-fast); text-decoration: none; }
.sm-mobile-nav ul li a:hover { color: var(--sm-coral); }
.sm-mobile-nav-social { display: flex; gap: 12px; margin-top: var(--sm-sp-6); padding-top: var(--sm-sp-6); border-top: 1px solid var(--sm-mist); }
.sm-mobile-nav-social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--sm-cream); border-radius: 50%; color: var(--sm-slate); transition: all var(--sm-transition-base); }
.sm-mobile-nav-social a:hover { background: var(--sm-coral); color: var(--sm-white); }

/* Hamburger animation */
.sm-hamburger { display: none; flex-direction: column; gap: 5px; width: 28px; cursor: pointer; padding: 8px; background: none; border: none; }
.sm-hamburger span { display: block; width: 100%; height: 2px; background: var(--sm-charcoal); border-radius: 1px; transition: all 300ms var(--sm-ease-out); }
.sm-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.sm-hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.sm-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
body.sm-mobile-menu-open { overflow: hidden; }
@media (max-width: 1024px) { .sm-hamburger { display: flex; } }

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.sm-back-to-top { position: fixed; bottom: 90px; right: 24px; width: 44px; height: 44px; background: var(--sm-white); border: 1.5px solid var(--sm-mist); border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: var(--sm-z-sticky); transition: all var(--sm-transition-base); box-shadow: var(--sm-shadow-sm); color: var(--sm-graphite); }
.sm-back-to-top:hover { border-color: var(--sm-coral); color: var(--sm-coral); transform: translateY(-2px); box-shadow: var(--sm-shadow-md); }
.sm-back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .sm-back-to-top { bottom: 80px; right: 16px; width: 40px; height: 40px; } }

/* ============================================
   SKIP LINK (ACCESSIBILITY)
   ============================================ */
.sm-skip-link { position: absolute; top: -100px; left: 0; background: var(--sm-coral); color: var(--sm-white); padding: 12px 24px; z-index: 99999; font-weight: 600; font-size: var(--sm-text-sm); text-decoration: none; border-radius: 0 0 var(--sm-radius-md) 0; transition: top 200ms ease; }
.sm-skip-link:focus { top: 0; outline: 2px solid var(--sm-coral-dark); outline-offset: 2px; }
.sm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================
   VIDEO EMBED
   ============================================ */
.sm-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--sm-radius-xl); margin: var(--sm-sp-6) 0; box-shadow: var(--sm-shadow-md); background: var(--sm-charcoal); }
.sm-video-container iframe, .sm-video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.sm-video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all var(--sm-transition-base); box-shadow: var(--sm-shadow-lg); }
.sm-video-play-btn:hover { background: var(--sm-white); transform: translate(-50%, -50%) scale(1.1); }
.sm-video-play-btn svg { width: 28px; height: 28px; margin-left: 4px; color: var(--sm-coral); }

/* ============================================
   BADGES (Extended)
   ============================================ */
.sm-badge-new { background: var(--sm-coral-pale); color: var(--sm-coral-dark); }
.sm-badge-popular { background: var(--sm-gold-light); color: #8B6914; }
.sm-badge-quick { background: var(--sm-forest-pale); color: var(--sm-forest-dark); }
.sm-badge-featured { background: var(--sm-blush); color: var(--sm-coral-dark); }
.sm-badge-high-protein { background: var(--sm-coral-pale); color: var(--sm-coral-dark); font-weight: 700; }

/* ============================================
   LOAD MORE WRAPPER (Extended)
   ============================================ */
.sm-load-more-wrapper { text-align: center; margin-top: var(--sm-sp-10); padding: var(--sm-sp-4) 0; }
.sm-load-more-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--sm-mist); border-top-color: var(--sm-coral); border-radius: 50%; animation: sm-spin 0.6s linear infinite; margin-right: 8px; vertical-align: middle; }

/* ============================================
   SHARE BUTTONS
   ============================================ */
.sm-share-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sm-share-label { font-size: var(--sm-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sm-slate); margin-right: 4px; }
.sm-share-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--sm-mist); background: var(--sm-white); color: var(--sm-slate); cursor: pointer; transition: all var(--sm-transition-base); text-decoration: none; }
.sm-share-btn:hover { transform: translateY(-2px); box-shadow: var(--sm-shadow-md); }
.sm-share-btn svg { width: 18px; height: 18px; }
.sm-share-btn-pinterest:hover { background: #E60023; color: #fff; border-color: #E60023; }
.sm-share-btn-facebook:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.sm-share-btn-twitter:hover { background: #1DA1F2; color: #fff; border-color: #1DA1F2; }
.sm-share-btn-email:hover { background: var(--sm-charcoal); color: #fff; border-color: var(--sm-charcoal); }
.sm-share-btn-copy:hover { background: var(--sm-forest); color: #fff; border-color: var(--sm-forest); }
.sm-share-btn-whatsapp:hover { background: #25D366; color: #fff; border-color: #25D366; }

/* ============================================
   AUTHOR BOX
   ============================================ */
.sm-author-box { display: flex; gap: var(--sm-sp-6); padding: var(--sm-sp-8); background: var(--sm-cream); border-radius: var(--sm-radius-xl); margin: var(--sm-sp-10) 0; align-items: start; }
.sm-author-box-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid var(--sm-white); box-shadow: var(--sm-shadow-sm); }
.sm-author-box-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sm-author-box-content { flex: 1; }
.sm-author-box-name { font-family: var(--sm-font-display); font-size: var(--sm-text-xl); font-weight: 700; margin-bottom: 4px; }
.sm-author-box-bio { font-size: var(--sm-text-sm); color: var(--sm-slate); line-height: 1.6; margin-bottom: var(--sm-sp-3); }
.sm-author-box-link { font-size: var(--sm-text-sm); font-weight: 600; color: var(--sm-coral); }
@media (max-width: 640px) { .sm-author-box { flex-direction: column; align-items: center; text-align: center; } }

/* ============================================
   SIDEBAR RECIPES (Mini Cards)
   ============================================ */
.sm-sidebar-recipe { display: flex; gap: var(--sm-sp-3); padding: var(--sm-sp-3) 0; border-bottom: 1px solid var(--sm-cloud); text-decoration: none; color: inherit; transition: opacity var(--sm-transition-fast); }
.sm-sidebar-recipe:last-child { border-bottom: none; }
.sm-sidebar-recipe:hover { opacity: 0.8; }
.sm-sidebar-recipe-thumb { width: 70px; height: 70px; border-radius: var(--sm-radius-sm); overflow: hidden; flex-shrink: 0; }
.sm-sidebar-recipe-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sm-sidebar-recipe-info { display: flex; flex-direction: column; justify-content: center; }
.sm-sidebar-recipe-title { font-size: var(--sm-text-sm); font-weight: 600; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sm-sidebar-recipe-meta { font-size: var(--sm-text-xs); color: var(--sm-slate); }

/* ============================================
   NO RECIPES MESSAGE
   ============================================ */
.sm-no-recipes-icon { width: 80px; height: 80px; margin: 0 auto var(--sm-sp-6); background: var(--sm-cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sm-silver); }
.sm-no-recipes-icon svg { width: 36px; height: 36px; }

/* ============================================
   PAGINATION
   ============================================ */
.sm-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--sm-sp-10); padding: var(--sm-sp-6) 0; }
.sm-pagination a, .sm-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; font-size: var(--sm-text-sm); font-weight: 500; border-radius: var(--sm-radius-md); text-decoration: none; transition: all var(--sm-transition-fast); }
.sm-pagination a { color: var(--sm-graphite); background: var(--sm-white); border: 1.5px solid var(--sm-mist); }
.sm-pagination a:hover { border-color: var(--sm-coral); color: var(--sm-coral); background: var(--sm-coral-pale); }
.sm-pagination span.current { background: var(--sm-coral); color: var(--sm-white); border: 1.5px solid var(--sm-coral); }
.sm-pagination .dots { color: var(--sm-silver); border: none; background: none; min-width: auto; padding: 0 4px; }
@media (max-width: 640px) { .sm-pagination a, .sm-pagination span { min-width: 36px; height: 36px; font-size: var(--sm-text-xs); } }

/* ============================================
   FORM STYLES (Extended)
   ============================================ */
.sm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .sm-form-row { grid-template-columns: 1fr; } }
.sm-form-note { font-size: var(--sm-text-xs); color: var(--sm-slate); margin-top: var(--sm-sp-3); }
.sm-form-submit { width: 100%; margin-top: var(--sm-sp-2); }
.sm-form-success { padding: var(--sm-sp-4); background: var(--sm-forest-pale); color: var(--sm-forest-dark); border-radius: var(--sm-radius-md); font-size: var(--sm-text-sm); font-weight: 500; text-align: center; }
.sm-form-error { padding: var(--sm-sp-4); background: #FCEBEB; color: #A32D2D; border-radius: var(--sm-radius-md); font-size: var(--sm-text-sm); font-weight: 500; text-align: center; }

/* ============================================
   NUTRITION LABEL
   ============================================ */
.sm-nutrition-label { background: var(--sm-white); border: 2px solid var(--sm-charcoal); border-radius: var(--sm-radius-lg); padding: var(--sm-sp-5); max-width: 300px; margin: var(--sm-sp-6) 0; }
.sm-nutrition-label-header { font-family: var(--sm-font-display); font-size: var(--sm-text-2xl); font-weight: 700; border-bottom: 8px solid var(--sm-charcoal); padding-bottom: var(--sm-sp-2); margin-bottom: var(--sm-sp-2); }
.sm-nutrition-label-servings { font-size: var(--sm-text-sm); color: var(--sm-graphite); padding-bottom: var(--sm-sp-3); border-bottom: 1px solid var(--sm-mist); margin-bottom: var(--sm-sp-3); }
.sm-nutrition-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--sm-text-sm); border-bottom: 1px solid var(--sm-cloud); }
.sm-nutrition-row:last-child { border-bottom: none; }
.sm-nutrition-row.bold { font-weight: 700; border-bottom: 4px solid var(--sm-charcoal); padding: 6px 0; }
.sm-nutrition-row.sub { padding-left: var(--sm-sp-4); }
@media (max-width: 640px) { .sm-nutrition-label { max-width: 100%; } }

/* ============================================
   SIDEBAR AUTHOR CARD
   ============================================ */
.sm-sidebar-author { text-align: center; padding: var(--sm-sp-6); background: var(--sm-cream); border-radius: var(--sm-radius-xl); }
.sm-sidebar-author-avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto var(--sm-sp-4); border: 3px solid var(--sm-white); box-shadow: var(--sm-shadow-sm); }
.sm-sidebar-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sm-sidebar-author-name { font-family: var(--sm-font-display); font-size: var(--sm-text-lg); font-weight: 700; margin-bottom: 4px; }
.sm-sidebar-author-bio { font-size: var(--sm-text-sm); color: var(--sm-slate); line-height: 1.6; margin-bottom: var(--sm-sp-4); }
.sm-sidebar-author-social { display: flex; gap: 8px; justify-content: center; }
.sm-sidebar-author-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--sm-white); border-radius: 50%; color: var(--sm-slate); transition: all var(--sm-transition-base); }
.sm-sidebar-author-social a:hover { background: var(--sm-coral); color: var(--sm-white); }

/* ============================================
   WP BLOCK OVERRIDES
   ============================================ */
.wp-block-image img { border-radius: var(--sm-radius-lg); }
.wp-block-image figcaption { font-size: var(--sm-text-xs); color: var(--sm-slate); text-align: center; margin-top: var(--sm-sp-2); font-style: italic; }
.wp-block-quote { border-left: 4px solid var(--sm-coral); padding: var(--sm-sp-4) var(--sm-sp-6); margin: var(--sm-sp-6) 0; background: var(--sm-coral-pale); border-radius: 0 var(--sm-radius-md) var(--sm-radius-md) 0; font-family: var(--sm-font-display); font-style: italic; font-size: var(--sm-text-lg); }
.wp-block-quote cite { display: block; font-family: var(--sm-font-body); font-style: normal; font-size: var(--sm-text-sm); color: var(--sm-slate); margin-top: var(--sm-sp-2); }
.wp-block-separator { border: none; height: 2px; background: var(--sm-mist); margin: var(--sm-sp-8) 0; }
.wp-block-separator.is-style-dots { background: none; text-align: center; height: auto; }
.wp-block-separator.is-style-dots::before { content: '· · ·'; color: var(--sm-silver); font-size: var(--sm-text-xl); letter-spacing: 1em; }
.wp-block-table { width: 100%; margin: var(--sm-sp-6) 0; border-collapse: collapse; font-size: var(--sm-text-sm); }
.wp-block-table td, .wp-block-table th { padding: 10px 14px; border: 1px solid var(--sm-mist); text-align: left; }
.wp-block-table th { background: var(--sm-cream); font-weight: 600; }
.wp-block-table tr:nth-child(even) td { background: var(--sm-snow); }
.wp-block-gallery .wp-block-image img { border-radius: var(--sm-radius-md); }
.wp-block-embed-youtube, .wp-block-embed-vimeo { border-radius: var(--sm-radius-xl); overflow: hidden; margin: var(--sm-sp-6) 0; }
.wp-block-buttons .wp-block-button__link { font-family: var(--sm-font-body); border-radius: var(--sm-radius-full); }
.wp-block-code { background: var(--sm-charcoal); color: #f5f5f5; padding: var(--sm-sp-5); border-radius: var(--sm-radius-md); font-family: var(--sm-font-mono); font-size: var(--sm-text-sm); overflow-x: auto; }

/* ============================================
   RECIPE CONTENT STYLES
   ============================================ */
.sm-recipe-main-content .entry-content h2 { font-size: var(--sm-text-3xl); margin: var(--sm-sp-10) 0 var(--sm-sp-4); }
.sm-recipe-main-content .entry-content h3 { font-size: var(--sm-text-xl); margin: var(--sm-sp-8) 0 var(--sm-sp-3); }
.sm-recipe-main-content .entry-content h4 { font-size: var(--sm-text-lg); margin: var(--sm-sp-6) 0 var(--sm-sp-2); }
.sm-recipe-main-content .entry-content p { margin-bottom: var(--sm-sp-4); }
.sm-recipe-main-content .entry-content ul, .sm-recipe-main-content .entry-content ol { padding-left: var(--sm-sp-6); margin: var(--sm-sp-4) 0; }
.sm-recipe-main-content .entry-content li { margin-bottom: var(--sm-sp-2); line-height: 1.7; }
.sm-recipe-main-content .entry-content a { color: var(--sm-coral); text-decoration: underline; text-decoration-color: var(--sm-coral-light); text-underline-offset: 3px; }
.sm-recipe-main-content .entry-content a:hover { text-decoration-color: var(--sm-coral); }
.sm-recipe-main-content .entry-content img { border-radius: var(--sm-radius-lg); margin: var(--sm-sp-6) 0; }

/* ============================================
   COMMENTS
   ============================================ */
.comments-area { margin-top: var(--sm-sp-10); padding-top: var(--sm-sp-10); border-top: 1px solid var(--sm-mist); }
.comments-area .comments-title { font-family: var(--sm-font-display); font-size: var(--sm-text-2xl); margin-bottom: var(--sm-sp-6); }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: var(--sm-sp-6); margin-bottom: var(--sm-sp-4); background: var(--sm-white); border-radius: var(--sm-radius-lg); border: 1px solid var(--sm-cloud); }
.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sm-sp-3); }
.comment-author img { border-radius: 50%; width: 40px; height: 40px; }
.comment-author .fn { font-weight: 600; font-size: var(--sm-text-sm); }
.comment-metadata { font-size: var(--sm-text-xs); color: var(--sm-slate); margin-bottom: var(--sm-sp-3); }
.comment-content { font-size: var(--sm-text-sm); line-height: 1.7; }
.comment-reply-link { font-size: var(--sm-text-sm); font-weight: 600; color: var(--sm-coral); text-decoration: none; }
.comment-reply-link:hover { text-decoration: underline; }
.comment-respond { margin-top: var(--sm-sp-8); }
.comment-respond .comment-reply-title { font-family: var(--sm-font-display); font-size: var(--sm-text-xl); margin-bottom: var(--sm-sp-4); }
.comment-form textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--sm-mist); border-radius: var(--sm-radius-md); font-family: var(--sm-font-body); font-size: var(--sm-text-base); min-height: 120px; resize: vertical; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { width: 100%; padding: 10px 16px; border: 1.5px solid var(--sm-mist); border-radius: var(--sm-radius-md); font-family: var(--sm-font-body); font-size: var(--sm-text-base); }
.comment-form .form-submit input { background: var(--sm-coral); color: var(--sm-white); border: none; padding: 12px 28px; border-radius: var(--sm-radius-full); font-weight: 600; font-size: var(--sm-text-sm); cursor: pointer; transition: background var(--sm-transition-fast); }
.comment-form .form-submit input:hover { background: var(--sm-coral-dark); }

/* ============================================
   WP RECIPE MAKER COMPATIBILITY
   ============================================ */
.wprm-recipe-container { border-radius: var(--sm-radius-xl) !important; overflow: hidden; box-shadow: var(--sm-shadow-card); margin: var(--sm-sp-8) 0; border: 1px solid var(--sm-mist) !important; }
.wprm-recipe { font-family: var(--sm-font-body) !important; }
.wprm-recipe .wprm-recipe-name { font-family: var(--sm-font-display) !important; }

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 640px) {
    .sm-share-buttons { justify-content: center; }
    .sm-share-btn { width: 36px; height: 36px; }
    .sm-video-play-btn { width: 56px; height: 56px; }
    .sm-sidebar-recipe-thumb { width: 60px; height: 60px; }
}