/* ================================================================
   manual-payments.css — AirGSM
   Colocar en: /www/wwwroot/server-airgsm.com/media/manual-payments.css
   ================================================================ */
.mp-container { max-width: 1200px; margin: auto; padding: 1.5rem; font-family: 'Inter', sans-serif; }
.mp-marquee { background-color: #f3f6f9; border-radius: 0.75rem; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.08); padding: 0.625rem; margin-bottom: 1.25rem; text-align: center; }
.mp-marquee marquee { display: block; padding: 0.625rem; color: #3f51b5; font-size: 1.25rem; font-weight: bold; }
.mp-section { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 0.625rem; box-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.05); padding: 1.5625rem; margin-bottom: 1.875rem; }
.mp-section h2 { color: #3f51b5; border-bottom: 2px solid #3f51b5; padding-bottom: 0.625rem; margin: 0 0 1.25rem; font-size: 1.8em; font-weight: 600; display: flex; align-items: center; }
.mp-section h2 img { margin-right: 0.9375rem; width: 4rem; height: 4rem; object-fit: contain; }
.mp-section ul { list-style: none; padding: 0; margin-top: 0.9375rem; }
.mp-section ul li { margin-bottom: 0.625rem; padding-left: 1.5625rem; position: relative; font-size: 1.1em; line-height: 1.5; display: flex; align-items: baseline; flex-wrap: wrap; }
.mp-section ul li:before { content: '\2713'; color: #8A2BE2; position: absolute; left: 0; font-weight: bold; }
.mp-section ul li.mp-inst { font-style: italic; font-size: 0.95em; color: #607d8b; }
.mp-section ul li.mp-inst:before { content: '\2139\FE0F'; color: #607d8b; font-weight: normal; }
.mp-sensitive { font-family: 'Courier New', monospace; background-color: #f0f0f0; padding: 0.25rem 0.5rem; border-radius: 0.25rem; color: #333; border: 1px solid #e0e0e0; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-copy-btn { margin-left: 0.625rem; padding: 0.375rem 0.75rem; background-color: #8A2BE2; color: white; border: none; border-radius: 0.3125rem; cursor: pointer; font-size: 0.9em; transition: background-color 0.3s, transform 0.1s; display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem; }
.mp-copy-btn:hover { background-color: #7A1AD2; transform: translateY(-1px); }
.mp-toggle-btn { margin-left: 0.625rem; padding: 0.375rem 0.75rem; background-color: #007bff; color: white; border: none; border-radius: 0.3125rem; cursor: pointer; font-size: 0.9em; transition: background-color 0.3s; display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem; }
.mp-toggle-btn:hover { background-color: #0056b3; }
.mp-qr-btn { margin-left: 0.625rem; padding: 0.375rem 0.75rem; background-color: #6c757d; color: white; border: none; border-radius: 0.3125rem; cursor: pointer; font-size: 0.9em; display: inline-flex; align-items: center; }
.mp-qr-btn:hover { background-color: #5a6268; }
.mp-wa-btn { background-color: #25D366; margin-left: 0.625rem; padding: 0.375rem 0.75rem; color: white; border: none; border-radius: 0.3125rem; cursor: pointer; font-size: 1em; display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
.mp-wa-btn:hover { background-color: #1DA851; }
.mp-video { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; margin: 1.5rem 0; border-radius: 0.5rem; box-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.1); }
.mp-video iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; border: none; }
.mp-whatsapp-cta { text-align: center; margin: 3rem 0; padding: 2rem; background-color: #e6f7ff; border: 1px solid #91d5ff; border-radius: 0.75rem; }
.mp-whatsapp-cta p { font-size: 1.2em; color: #0056b3; margin-bottom: 1.5rem; font-weight: 500; }
.mp-whatsapp-cta a { background-color: #25D366; color: white; padding: 1rem 2rem; border-radius: 0.75rem; font-size: 1.2em; font-weight: bold; display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2); }
.mp-whatsapp-cta a:hover { background-color: #1DA851; }
.mp-post-info { background-color: #e0f2f7; border: 1px solid #b3e0ed; border-radius: 0.625rem; padding: 1.5rem; margin-top: 2rem; text-align: center; font-size: 1.1em; color: #007bff; font-weight: 600; }
.mp-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.mp-modal-overlay.active { opacity: 1; visibility: visible; }
.mp-modal-box { background-color: #fff; padding: 2rem; border-radius: 0.625rem; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.3); max-width: 90%; max-height: 90%; overflow-y: auto; position: relative; transform: scale(0.9); transition: transform 0.3s; }
.mp-modal-overlay.active .mp-modal-box { transform: scale(1); }
.mp-modal-close { position: absolute; top: 1rem; right: 1rem; background-color: #dc3545; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 1.2em; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.mp-modal-close:hover { background-color: #c82333; }
@media (max-width: 768px) {
    .mp-container { padding: 1rem; }
    .mp-section h2 { font-size: 1.5em; }
    .mp-section h2 img { width: 30px; height: 30px; }
    .mp-section ul li { font-size: 1em; padding-left: 20px; }
    .mp-copy-btn, .mp-wa-btn, .mp-toggle-btn, .mp-qr-btn { padding: 0.25rem 0.5rem; font-size: 0.75em; min-width: unset; }
}