/*
Theme Name:   SpanishEnglishNet
Description:  A modern, responsive translator theme for Spanish ↔ English.
Version:      1.1
Text Domain:  spanishenglishnet
*/

.nav-menu .sub-menu li a, .nav-menu a, .site-title-link { color: #fff; text-decoration: none; }
.panel, .site-header { box-shadow: var(--shadow); position: relative; }
.custom-content ul li, .nav-menu li, .panel, .site-header { position: relative; }
:root { --primary-bg-start: #6dd5ed; --primary-bg-end: #2193b0; --header-bg: #af5d9b; --nav-bg: #00509d; --panel-bg-start: #ffffff; --panel-bg-end: #e0eafc; --accent-color: #ff6f61; --text-color: #333333; --border-color: #ddd; --font-family: "Montserrat", sans-serif; --base-font-size: 16px; --shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
*, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; }
body, html { font: var(--base-font-size)/1.6 var(--font-family); color: var(--text-color); background: linear-gradient(135deg, var(--primary-bg-start), var(--primary-bg-end)); }
.site-header { background: var(--header-bg); padding: 8px 0; }
.header-inner { width: 100%; max-width: none; margin: 0; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; }
#cont, .menu-icon { display: none; }
.site-title-link { font-size: 1.25rem; margin-right: auto; }
.site-title-left, .site-title-right { font-size: 24px; }
.site-title-left { color: #00ff2d; }
.site-title-right { color: #00ceff; }
.lang-row, .main-navigation, .nav-menu, .panel, .panel-footer, .panels, .tts-panel-footer, .zoom-overlay { display: flex; }
.nav-menu { list-style: none; gap: 1rem; }
.nav-menu a { padding: 0.5rem 1rem; transition: background 0.2s; }
.nav-menu .sub-menu li a:hover, .nav-menu a:hover { background: var(--accent-color); }
.nav-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #a18cd1; list-style: none; margin: 0; padding: 0.5rem 0; min-width: 180px; z-index: 1000; }
.nav-menu li:hover > .sub-menu { display: block; }
.nav-menu .sub-menu li a { display: block; padding: 0.5rem 0.1rem 1rem 0.5rem; }
.translate-page-wrapper { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
.entry-title, .translate-page-title { text-align: center; margin-bottom: 1rem; font-size: 2rem; color: var(--header-bg); }
.lang-row { align-items: center; justify-content: center; gap: 0.1rem; overflow-x: auto; }
.lang-row select { flex: 1 1 auto; min-width: 120px; padding: 0.6rem; font-size: 1rem; border: 1px solid var(--border-color); border-radius: 4px; background: #fff; }
.refresh-icon, .svg-icon { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.refresh-icon { width: 40px; height: 40px; background: #fff; border-radius: 2px; }
.panel-footer svg, .refresh-icon svg, .svg-icon { width: 24px; height: 24px; }
.refresh-icon svg { stroke: var(--text-color); stroke-width: 2; }
.svg-icon { stroke-width: 3; animation: 6s linear infinite colorCycle, 2s ease-in-out infinite pulse; }
#cont, .zoom-overlay { width: 100%; height: 100%; }
.svg-icon.icon-refresh { animation-delay: 0s, 0s; }
.svg-icon.icon-trash { animation-delay: 1s, 1s; }
.svg-icon.icon-search { animation-delay: 2s, 2s; }
.svg-icon.icon-download { animation-delay: 3s, 3s; }
.svg-icon.icon-clipboard { animation-delay: 5s, 5s; }
.svg-icon use { stroke: currentColor; fill: currentColor; }
.panels { gap: 1rem; }
.panel { flex: 1; background: linear-gradient(135deg, var(--panel-bg-start), var(--panel-bg-end)); padding: 1rem; border-radius: 8px; flex-direction: column; }
.input-group, .target-display { flex: 1; position: relative; }
#source-textarea, .target-display { width: 100%; min-height: 300px; padding: 1rem; border: 1px solid var(--border-color); border-radius: 4px; background: #fff; resize: none; font-size: 19px; }
.target-display:empty::before { content: attr(data-placeholder); color: #777; }
.counter-label { position: absolute; bottom: 0.6rem; right: 12px; background: rgba(255,255,255,0.9); padding: 0.2rem 0.5rem; font-size: 0.9rem; color: #333; border-radius: 3px; }
.custom-content, .site-footer { background: var(--panel-bg-start); }
.panels .panel:last-of-type .counter-label { bottom: 0.3rem; right: 9px; }
.custom-content { color: var(--text-color); padding: 18px; line-height: 2; text-align: justify; }
.custom-content ul { list-style: none; margin: 1em 0; padding-left: 0; }
.custom-content ul li { margin: 0.5em 0; padding-left: 1.5em; line-height: 1.4; }
.custom-content ul li::before { content: "•"; position: absolute; left: 0; top: 0.2em; font-size: 1.2em; color: var(--accent-color); }
.panel-footer { gap: 9rem; margin-top: 0.1rem; }
.panel-footer span { display: inline-flex; align-items: center; cursor: pointer; }
.panel-footer svg { fill: none; stroke: currentColor; stroke-width: 2; transition: stroke 0.2s, transform 0.2s; }
.panel-footer span:hover svg { stroke: var(--accent-color); transform: scale(1.2); }
.tts-panel-footer { gap: 34rem; margin-top: -4px; }
#cont { position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 9999; overflow: hidden; }
.zoom-overlay { justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; }
.span_text { display: inline-block; font-size: clamp(96px,8vw,160px); max-width: 90vw; max-height: 80vh; line-height: 1.2; color: #fff; text-align: center; white-space: pre-wrap; overflow: auto; word-wrap: break-word; }
#closebtn { position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 23px; }
.site-footer { text-align: center; padding: 1rem; color: #666; border-top: 1px solid var(--border-color); font-size: 0.9rem; }
@media (min-width: 769px) { #tts-listen-btn, .translate-btn-inside { position: absolute; top: 8px; right: 12px; display: inline-block; background: #08f; color: #fff; border: none; padding: 0.8rem 3.5rem; border-radius: 25px; font-weight: 600; font-size: 19px; } #tts-listen-btn { padding: 0 6rem 1rem!important; } #tts-source-counter { position: absolute; bottom: 2.5rem; right: 0.5rem; } }
@media (max-width: 1024px) { .main-navigation.open-menu, .nav-menu a { display: block; } 
.menu-icon { display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 44px; height: 38px; background: none; border: none; padding: 4px; cursor: pointer; z-index: 1002; } 
.menu-icon span { display: block; width: 26px; height: 3px; background-color: #fff; border-radius: 2px; } 
.site-header { z-index: 1001; } .main-navigation { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--nav-bg); z-index: 1000; } .nav-menu { flex-direction: column; padding: 1rem; gap: 1.1rem; } .nav-menu a { width: 100%; padding: 0.75rem 0.5rem; color: #007160; text-align: left; font-size: 16px; border: 1px solid #cfa025; background: #fff; } .nav-menu a:hover { background: rgba(255,255,255,0.2); color: #fff; box-shadow: none; } .panels { flex-direction: column; } #source-textarea, .ads-mobile-container, .lang-row, .panel, .panels, .smart-banner-1, .smart-banner-2, .smart-banner-3, .target-display, .translate-page-title, .translate-page-wrapper { margin: 0!important; padding: 0!important; gap: 0!important; } #source-textarea, .target-display { padding: 56px 16px!important; margin-top: -8px!important; min-height: 200px; } .target-display { margin-top: 3px!important; } .lang-row select { height: 40px; padding: 0 0.75rem; margin: 0; line-height: normal; } .header-inner { padding: 0 1rem; } #tts-source-counter { position: absolute; bottom: 2.5rem; right: 1.5rem; } #tts-listen-btn, .translate-btn-inside { position: absolute; top: -3%; right: 0; background: #0b2b58; color: #fff; border: none; font-size: 15px; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0.6rem 0; } .tts-panel-footer { gap: 10.9rem; } }
@media (max-width: 1024px) { .entry-title, .translate-page-title { display: none; } .translate-page-wrapper { padding: 0; margin: 0 auto; width: 100%; } .lang-row { justify-content: flex-start; } .panels { flex-direction: column; gap: 0; } .panel { width: 100%; margin: 0; } .panel-footer, .tts-panel-footer { justify-content: space-between; gap: 0; padding: 0 0.9rem; } #target_display, .target-panel { order: 2; } }
.smart-banner-1, .smart-banner-2, .smart-banner-3 { width: 100%; margin: 0; padding: 0; }
.smart-banner-1 { min-height: 50px; }
@media (min-width: 412px) { .smart-banner-1 { min-height: 60px; } }
@media (min-width: 768px) { .smart-banner-1 { min-height: 90px; } }
@media (min-width: 1024px) { .smart-banner-1 { min-height: 100px; } }
.smart-banner-2 { min-height: 100px; }
.smart-banner-3 { min-height: 300px; }
@media (min-width: 360px) and (max-width: 393px) and (min-height: 660px) and (max-height: 681px) { #source-textarea, .target-display { min-height: 198px; } }
@media (min-width: 360px) and (max-width: 393px) and (min-height: 682px) and (max-height: 700px) { #source-textarea, .target-display { min-height: 208px; } }
@media (min-width: 360px) and (max-width: 393px) and (min-height: 701px) and (max-height: 761px) { #source-textarea, .target-display { min-height: 225px; } }
@media (min-width: 360px) and (max-width: 393px) and (min-height: 762px) { #source-textarea, .target-display { min-height: 248px; } }
@media (min-width: 394px) and (max-width: 413px) and (min-height: 737px) { #source-textarea, .target-display { min-height: 226px; } }
@media (min-width: 414px) and (max-width: 430px) and (min-height: 714px) and (max-height: 714px) { #source-textarea, .target-display { min-height: 214px; } }
@media (min-width: 414px) and (max-width: 430px) and (min-height: 715px) and (max-height: 736px) { #source-textarea, .target-display { min-height: 217px; } }
@media (min-width: 414px) and (max-width: 430px) and (min-height: 737px) { #source-textarea, .target-display { min-height: 225px; } }
@media (min-width: 430px) and (min-height: 731px) and (max-height: 765px) { #source-textarea, .target-display { min-height: 222px; } }
@media (min-width: 430px) and (min-height: 766px) { #source-textarea, .target-display { min-height: 240px; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes colorCycle { 0% { color: #ff007f; } 20% { color: #ff7f00; } 40% { color: #ff0; } 60% { color: #0f0; } 80% { color: #007fff; } 100% { color: #7f00ff; } }