/* REACH Shortcodes Styles */

/* === Compare Table === */
.mediaio-compare-wrap{overflow-x:auto;margin:24px 0;-webkit-overflow-scrolling:touch}
.mediaio-compare-table{width:100%;min-width:500px;border-collapse:collapse;font-size:14px}
.mediaio-compare-table th{background:var(--mediaio-main);color:#fff;padding:10px 12px;text-align:center;font-size:13px;white-space:nowrap}
.mediaio-compare-table td{padding:10px 12px;border-bottom:1px solid #e5e5e5;text-align:center;vertical-align:middle}
.mediaio-compare-table tr:hover{background:var(--mediaio-sub-bg)}
.mediaio-compare-name{text-align:left;font-weight:700;white-space:nowrap}
.mediaio-compare-rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--mediaio-accent);color:#fff;font-size:12px;font-weight:700;margin-right:8px}
.mediaio-compare-btn{display:inline-block;padding:6px 16px;background:var(--mediaio-cta);color:var(--mediaio-cta-text);border-radius:4px;font-size:13px;font-weight:700;white-space:nowrap;text-decoration:none}
.mediaio-compare-btn:hover{background:var(--mediaio-cta-hover);color:var(--mediaio-cta-text)}
.mediaio-stars{color:#ffc107;font-size:14px;letter-spacing:1px}
.star.half{opacity:.5}
.star.empty{color:#ddd}
.mediaio-rating-num{display:block;font-size:13px;color:var(--mediaio-sub-text);margin-top:2px}

/* === Box === */
.mediaio-box{margin:24px 0;border-radius:8px;overflow:hidden}
.mediaio-box-title{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:15px;font-weight:700}
.mediaio-box-icon{flex-shrink:0}
.mediaio-box-body{padding:16px;font-size:15px}
.mediaio-box-body p:last-child{margin-bottom:0}

.mediaio-box-merit{border:1px solid #4caf50;background:#f9fff9}
.mediaio-box-merit .mediaio-box-title{background:#4caf50;color:#fff}
.mediaio-box-demerit{border:1px solid #f44336;background:#fff9f9}
.mediaio-box-demerit .mediaio-box-title{background:#f44336;color:#fff}
.mediaio-box-point{border:1px solid var(--mediaio-main);background:var(--mediaio-sub-bg)}
.mediaio-box-point .mediaio-box-title{background:var(--mediaio-main);color:#fff}
.mediaio-box-warning{border:1px solid #ff9800;background:#fffbf5}
.mediaio-box-warning .mediaio-box-title{background:#ff9800;color:#fff}
.mediaio-box-definition{border:1px solid #e5e5e5;background:var(--mediaio-sub-bg)}
.mediaio-box-definition .mediaio-box-title{background:#e5e5e5;color:var(--mediaio-text)}

/* === Balloon === */
.mediaio-balloon{display:flex;gap:12px;margin:24px 0;align-items:flex-start}
.mediaio-balloon-right{flex-direction:row-reverse}
.mediaio-balloon-icon{flex-shrink:0;text-align:center;width:60px}
.mediaio-balloon-icon img{width:50px;height:50px;border-radius:50%;object-fit:cover;margin:0 auto}
.mediaio-balloon-name{font-size:11px;color:var(--mediaio-sub-text);margin-top:4px}
.mediaio-balloon-text{background:var(--mediaio-sub-bg);border-radius:12px;padding:14px 18px;flex:1;position:relative;font-size:15px}
.mediaio-balloon-left .mediaio-balloon-text::before{content:'';position:absolute;left:-8px;top:16px;border:6px solid transparent;border-right-color:var(--mediaio-sub-bg)}
.mediaio-balloon-right .mediaio-balloon-text::before{content:'';position:absolute;right:-8px;top:16px;border:6px solid transparent;border-left-color:var(--mediaio-sub-bg)}
.mediaio-balloon-text p:last-child{margin-bottom:0}

/* === FAQ === */
.mediaio-faq-section{margin:32px 0}
.mediaio-faq-heading{font-size:20px;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--mediaio-main)}
.mediaio-faq-item{border:1px solid #e5e5e5;border-radius:6px;margin-bottom:8px;overflow:hidden}
.mediaio-faq-q{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;background:#fff;transition:background .2s ease}
.mediaio-faq-q:hover{background:var(--mediaio-sub-bg)}
.mediaio-faq-label{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--mediaio-accent);color:#fff;font-size:14px;font-weight:700;flex-shrink:0}
.mediaio-faq-label-a{background:var(--mediaio-main)}
.mediaio-faq-question{flex:1;font-size:15px;font-weight:700}
.mediaio-faq-toggle::after{content:"▼";font-size:10px;color:var(--mediaio-sub-text);transition:transform .3s ease}
.mediaio-faq-item.is-open .mediaio-faq-toggle::after{transform:rotate(180deg)}
.mediaio-faq-a{display:none;padding:14px 16px 14px 54px;background:var(--mediaio-sub-bg);border-top:1px solid #e5e5e5}
.mediaio-faq-item.is-open .mediaio-faq-a{display:flex;gap:10px}
.mediaio-faq-answer{flex:1;font-size:15px}
.mediaio-faq-answer p:last-child{margin-bottom:0}