/* =========================
   TEMP MAIL BOX (TOP AREA)
   ========================= */

.tempmail-box {
    background: var(--tm-box-bg);
    padding: 20px;
    border-radius: 10px;
    max-width: 520px;
}

.tempmail-input-wrap {
    display: flex;
    gap: 10px;
}

.tempmail-input-wrap input {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    color: var(--tm-box-text);
}

.tm-copy {
    background: var(--tm-copy-bg);
    border: none;
    padding: 12px 14px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tempmail-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.tempmail-actions button {
    flex: 1;
    padding: 10px;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.tempmail-actions button:nth-child(1) { background: var(--tm-btn-refresh); }
.tempmail-actions button:nth-child(2) { background: var(--tm-btn-change); }
.tempmail-actions button:nth-child(3) { background: var(--tm-btn-delete); }

.tempmail-box .dashicons {
    font-size: 18px;
}

.tm-copy .dashicons { color: var(--tm-icon-copy); }
.tempmail-actions button:nth-child(1) .dashicons { color: var(--tm-icon-refresh); }
.tempmail-actions button:nth-child(2) .dashicons { color: var(--tm-icon-change); }
.tempmail-actions button:nth-child(3) .dashicons { color: var(--tm-icon-delete); }

/* =========================
   INBOX CARD
   ========================= */

.tempmail-inbox-wrapper {
    max-width: 900px;
    margin: 40px auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* =========================
   SHARED GRID (HEADER + ROWS)
   ========================= */

.tempmail-inbox-header,
.tempmail-row {
    display: grid;
    grid-template-columns: 340px 1fr 120px;
    align-items: center;
}

/* =========================
   INBOX HEADER
   ========================= */

.tempmail-inbox-header {
    background: #1e293b;
    color: #ffffff;
    padding: 16px 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ensure Subject header text stays white */
.tempmail-inbox-header .tm-subject-col {
    color: #ffffff;
}

/* Equal padding INSIDE columns */
.tempmail-inbox-header > div {
    padding: 0 20px;
    text-align: center;
}

/* =========================
   INBOX BODY
   ========================= */

#tempmail-inbox {
    background: #ffffff;
    min-height: 260px;
}

/* =========================
   EMPTY STATE
   ========================= */

.tempmail-empty {
    text-align: center;
    padding: 60px 20px;
}

.tempmail-loader {
    width: 72px;
    height: 72px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    margin: 0 auto 20px;
    position: relative;
    animation: tm-spin 1.4s linear infinite;
}

.tempmail-loader .dashicons {
    font-size: 28px;
    color: #2563eb;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tempmail-empty-text strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.tempmail-empty-text span {
    font-size: 14px;
    color: #6b7280;
}

@keyframes tm-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =========================
   INBOX ROWS
   ========================= */

.tempmail-row {
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tempmail-row:nth-child(odd) {
    background: #f9fafb;
}

.tempmail-row:hover {
    background: #eef2f7;
}

/* =========================
   ROW COLUMNS
   ========================= */

/* Sender */
.tm-sender-col,
.tm-sender {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.tm-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
}

.tm-sender strong {
    display: block;
    font-size: 14px;
    color: #111827;
}

.tm-sender small {
    font-size: 12px;
    color: #6b7280;
}

/* Subject */
.tm-subject-col,
.tm-subject {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* View */
.tm-view-col,
.tm-view {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm-view .dashicons {
    color: #9ca3af;
    font-size: 20px;
}


/* ===============================
   OPEN MAIL VIEW — WRAPPER
   =============================== */

.tempmail-open-mail {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-top: 20px;
    font-family: inherit;
}

/* ===============================
   HEADER BAR
   =============================== */

.tempmail-open-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1e293b;
    color: #ffffff;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
}

.tempmail-open-header .tm-back {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #ffffff;
}

.tempmail-open-header .tm-actions {
    display: flex;
    gap: 18px;
}

.tempmail-open-header .tm-actions button {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* ===============================
   SENDER ROW
   =============================== */

.tempmail-open-sender {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
}

.tempmail-open-sender-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tempmail-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #10b981;
}

.tempmail-sender-info strong {
    display: block;
    font-size: 14px;
    color: #111827;
}

.tempmail-sender-info small {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

.tempmail-open-date {
    text-align: right;
    font-size: 12px;
    color: #6b7280;
}

.tempmail-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0 20px;
}

/* ===============================
   SUBJECT ROW
   =============================== */

.tempmail-open-subject {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    font-size: 14px;
}

.tempmail-open-subject span {
    color: #6b7280;
}

.tempmail-open-subject strong {
    color: #111827;
}

/* ===============================
   MAIL BODY
   =============================== */

.tempmail-open-body {
    padding: 20px;
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
}