:root { --official-bg: #4c51bf; --official-text-color: #ffffff; --shine-color: rgba(255, 255, 255, 0.4); --official-height: 40px; --small-btn-padding: .3rem .6rem; --small-btn-font: .8rem; --icon-size-small: 1rem; --small-logo-size: 30px; --list-padding-sm: .6rem .8rem; }
@keyframes shine-loop { 0% { left: -100%; } 100% { left: 100%; } }
.listMidmanContainerWrapper { padding: 2rem 1rem; max-width: 1400px; margin: 0 auto; }
.listMidmanHeader { text-align: center; margin-bottom: 2rem; }
.listMidmanHeader h2 { font-size: 2rem; font-weight: 700; color: var(--color-text); margin-bottom: .4rem; }
.listMidmanHeader h2 i { color: var(--color-accent); margin-left: .5rem; font-size: 1.8rem; }
.listMidmanHeader p { font-size: 1rem; color: var(--color-text-sub); }
.midmanCardsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.midmanCard { background: var(--color-card-bg); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow-light); border-top: 4px solid var(--color-primary); transition: transform var(--transition-fast), box-shadow var(--transition-fast); height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.midmanCard:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.08); }
.midmanCard h3 { font-size: 1.1rem; color: var(--color-primary); margin-bottom: .6rem; display: flex; align-items: center; gap: .6rem; }
.midmanCard h3 i { font-size: 1.2rem; }
.midmanCard p { font-size: .9rem; color: var(--color-text-sub); line-height: 1.4; flex-grow: 1; }
.reportCard { border-top-color: var(--color-danger); }
.reportCard h3 { color: var(--color-danger); }
.midmanBtn { background-color: var(--color-main); color: var(--color-text-light); border-radius: 5px; padding: var(--small-btn-padding); margin-top: .8rem; display: inline-flex; align-items: center; justify-content: center; font-size: var(--small-btn-font); font-weight: 500; transition: all var(--transition-fast); text-decoration: none; }
.midmanBtn i { margin-right: .3rem; font-size: var(--icon-size-small); }
.midmanBtn:hover { transform: translateY(-1px); }
.contactBtn { background-color: var(--color-danger); }
.contactBtn:hover { background-color: #e53e6b; }
.whatsappBtn { background: #25d366; color: white; margin-top: 0; padding: .3rem .6rem; font-size: .8rem; border-radius: 15px; }
.whatsappBtn:hover { background: #1dae52; }
.websiteBtn { background: var(--color-text-sub); color: var(--color-text-light); margin-top: 0; padding: .3rem .6rem; font-size: .8rem; border-radius: 15px; }
.websiteBtn:hover { background: #444; }
.midmanBtn.verified { border: 1px solid var(--color-verify-tick); background: rgba(99, 102, 241, 0.1); color: var(--color-verify-tick); }
.midmanBtn.verified:hover { background: rgba(99, 102, 241, 0.2); }
.midmanSearchSection { position: relative; max-width: 500px; margin: 0 auto 2rem; }
.modernSearchInput { width: 100%; padding: .8rem 3rem .8rem 1.2rem; border-radius: 25px; border: 2px solid var(--color-border); font-size: .95rem; background: var(--color-surface); color: var(--color-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.modernSearchInput:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.searchIcon { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--color-text-sub); font-size: 1rem; pointer-events: none; }
.tableResponsiveWrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--color-card-bg); border-radius: 10px; box-shadow: var(--shadow-light); padding: .5rem; margin-bottom: 1.5rem; }
.midmanListTable { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; }
.midmanListTable thead th { background-color: var(--color-primary); color: var(--color-text-light); padding: var(--list-padding-sm); text-align: left; font-weight: 600; font-size: .85rem; position: sticky; top: 0; z-index: 10; }
.midmanListTable thead th:first-child { border-top-left-radius: 6px; }
.midmanListTable thead th:last-child { border-top-right-radius: 6px; }
.midmanListTable tbody tr.midmanRow { border-bottom: 1px solid var(--color-border); transition: background-color var(--transition-fast); }
.midmanListTable tbody tr:last-of-type { border-bottom: none; }
.midmanListTable tbody tr.midmanRow:hover { background-color: rgba(99, 102, 241, 0.05); }
body.dark .midmanListTable tbody tr.midmanRow:hover { background-color: rgba(99, 102, 241, 0.1); }
.midmanListTable td { padding: var(--list-padding-sm); vertical-align: middle; font-size: .9rem; }
.midmanNameCell { font-weight: 600; }
.midmanIdentity { display: flex; align-items: center; gap: 8px; }
.midmanLogo { width: var(--small-logo-size); height: var(--small-logo-size); border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border); flex-shrink: 0; }
.midmanNameContainer { display: flex; align-items: center; gap: 4px; }
.verifiedTick { color: var(--color-verify-tick); font-size: .8rem; }
.midmanContactLinks { display: flex; gap: 6px; flex-wrap: wrap; }
.infoBtn { background: none; border: 1px solid var(--color-border); color: var(--color-text); border-radius: 50%; width: 25px; height: 25px; cursor: pointer; font-size: .6rem; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.infoBtn:hover { background: var(--color-border); }
.infoBtn[aria-expanded="true"] i { transform: rotate(180deg); }
.infoBtn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }
.infoRow { background-color: rgba(99, 102, 241, 0.05); transition: opacity var(--transition-fast) ease-in-out; }
body.dark .infoRow { background-color: rgba(99, 102, 241, 0.1); }
.infoRow.hidden { display: none; }
.additionalInfoContent { padding: .8rem 1.5rem; border-left: 4px solid var(--color-accent); display: flex; flex-direction: column; }
.additionalInfoContent h4 { font-size: .95rem; margin-bottom: .6rem; color: var(--color-accent); }
.extraSocialLinks { display: flex; flex-wrap: wrap; gap: .8rem; }
.extraLink { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--color-text-sub); transition: color var(--transition-fast), transform var(--transition-fast); }
.extraLink:hover { color: var(--color-accent); transform: translateX(2px); }
.noResultsMessage { text-align: center; padding: 1.5rem; border-top: 1px solid var(--color-border); margin-top: 1rem; }
.noResultsMessage p { font-size: 1rem; color: var(--color-text-sub); }
.official-branding-footer { margin-top: 1.5rem; text-align: center; }
.slrmyapi-footer-link { display: flex; align-items: center; justify-content: center; height: 35px; background: linear-gradient(135deg, var(--color-primary), var(--official-bg)); color: var(--official-text-color); font-size: .9rem; font-weight: 600; text-decoration: none; border-radius: 6px; overflow: hidden; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.slrmyapi-footer-link:before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, var(--shine-color), transparent); transform: skewX(-20deg); animation: shine-loop 4s infinite linear; }
.slrmyapi-footer-link:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
@media (min-width: 1400px) { .listMidmanContainerWrapper { padding: 3rem 2rem; } .midmanCardsGrid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .midmanListTable { min-width: 900px; } }
@media (max-width: 1024px) { .midmanCardsGrid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .midmanListTable { min-width: 700px; } }
@media (max-width: 768px) { .listMidmanContainerWrapper { padding: 1rem .5rem; } .listMidmanHeader { margin-bottom: 1.5rem; } .midmanCardsGrid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .reportCard { grid-column: span 2 / auto; } .tableResponsiveWrapper { padding: 0; border-radius: 0; box-shadow: none; } .midmanListTable { min-width: 550px; } .midmanListTable thead th { padding: .6rem .8rem; font-size: .8rem; } .midmanListTable thead th:first-child { border-top-left-radius: 0; } .midmanListTable thead th:last-child { border-top-right-radius: 0; } .midmanListTable td { padding: .6rem .8rem; font-size: .85rem; } .midmanContactLinks { flex-direction: column; gap: 4px; } .midmanBtn { margin-top: 0; width: 100%; padding: .4rem; font-size: .75rem; } .midmanLogo { width: 28px; height: 28px; } .infoBtn { width: 22px; height: 22px; font-size: .55rem; } }
@media (max-width: 480px) { .listMidmanHeader h2 { font-size: 1.6rem; } .midmanCardsGrid { grid-template-columns: 1fr; } .reportCard { grid-column: span 1 / auto; } .slrmyapi-footer-link { font-size: .85rem; height: 30px; } .midmanListTable { min-width: 450px; } .additionalInfoContent { padding: .8rem; } }