/* ================================
   Danger Button
================================ */

.danger-button {
    background: var(--danger);
    color: white;
    border: none;
    border-radius:6px;
    cursor:pointer;
}

.danger-button:hover {
    background:#a61f1f;
}

/* ================================
   Action Container
================================ */

.portal-actions {
    margin:18px 0;
}

/* ================================
   Simple List (Agents etc.)
================================ */

.portal-title {
    color:var(--text-main);
}

.portal-list {
    margin-top:20px;
}

.portal-list-item {
    display:block;
    padding:8px 12px;
    border-radius:6px;
    text-decoration:none;
    color:var(--text-main);
}

.portal-list-item:hover {
    background:var(--bg-hover);
}

.portal-list-item:hover {
    background:var(--bg-hover);
}

.portal-list-item.danger:hover {
    background: rgba(198,40,40,0.12);
}

.portal-section-header {
    margin-top:20px;
    margin-bottom:10px;
    font-weight:600;
    color:var(--text-muted);
}

.portal-interval-selector {
    display:flex;
    align-items:center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.interval-option {
    display: flex;
    align-items: center;
    gap: 6px;
}

#annual-interval {
    color: #7CFF9B;
    font-weight: 600;
}

@media (max-width: 600px) {
    .portal-interval-selector {
        flex-direction: column;
        align-items: flex-start;
    }
}

.secondary-button {
    background:var(--bg-hover);
    color:var(--text-main);
}

.secondary-button:hover {
    background:var(--border-subtle);
}

.current-plan {
    background:#4caf50;
}

.new-plan {
    background:#ff9800;
}

.plan-summary {
    border: 1px solid var(--border-subtle);
    background: var(--bg-panel);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.plan-name {
    font-weight: 600;
    color: var(--text-main);
}

.plan-price {
    color: var(--text-muted);
    margin-top: 4px;
}

.contact-banner {
    height:140px;
    background-size:cover;
    background-position:center;
}

.contact-avatar {
    width:100px;
    height:100px;
    border-radius:50%;
    background-size:cover;
    background-position:center;

    border:3px solid var(--bg-panel);
    margin:-50px auto 10px auto;
}

.contact-banner + .contact-avatar {
    margin-top:-50px;
}

.contact-layout {
    display:flex;
    flex-direction:column;
    gap:24px;
}

.contact-section h4 {
    margin-bottom:12px;
    font-weight:600;
}

.contact-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:6px 0;
    line-height:1.4;
}

.contact-row span {
    color:var(--text-main);
    overflow:hidden;
    text-overflow:ellipsis;
}

.contact-row img {
    width:18px;
    height:18px;
    opacity:0.8;
    flex-shrink:0;
}

.section-title {
    display:flex;
    align-items:center;
    gap:8px;
}

.section-subtitle {
    font-size:0.9em;
    color:var(--text-muted);
}

.contact-card {
    max-width:720px;
    margin:0 auto;
}

@media (max-width:900px) {
    .contact-layout {
        grid-template-columns:1fr;
    }
}

.contact-section {
    text-align:left;
    padding-top:6px;
}

.contact-section h4 {
    text-align:left;
}

.contact-row:hover {
    background: var(--bg-hover);
    border-radius: 6px;
}

.message-card {
    max-width:640px;
    margin:0 auto;
}

.message-row {
    display:flex;
    align-items:center;
    gap:12px;
}

.message-icon {
    width:24px;
    height:24px;
    flex-shrink:0;
}

.message-text {
    color:var(--text-main);
}