/* TA plugin front styles */
.ta-single-wrap {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 15px;
    font-family: inherit;
    direction: ltr
}

.ta-header {
    background: transparent;
    padding: 18px 0
}

.ta-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.ta-title h1 {
    font-size: 32px;
    margin: 0;
    color: #222
}

.ta-sub {
    color: #777;
    margin-top: 6px
}

.ta-thumb img {
    max-width: 220px;
    border-radius: 8px;
    display: block
}

/* layout */
.ta-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 26px;
    margin-top: 18px
}

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

    .ta-thumb {
        display: none
    }
}

/* cards */
.ta-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03)
}

.ta-card h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #222
}

/* info rows */
.ta-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0
}

.ta-info-row span {
    color: #666
}

.ta-info-row strong {
    color: #111
}

/* files */
.ta-file-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f7f7f7
}

.ta-file-name {
    color: #444
}

.ta-btn {
    background: #ff8a00;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none
}

/* timeline */
.ta-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 6px
}

.ta-step {
    display: flex;
    align-items: center;
    gap: 12px
}

.ta-step-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ddd;
    flex: 0 0 14px;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06)
}

.ta-step.done .ta-step-dot {
    background: #ff8a00
}

.ta-step.done .ta-step-body strong {
    color: #111
}

.ta-step.upcoming .ta-step-dot {
    background: #eee;
    opacity: 0.6
}

.ta-step-body .ta-step-date {
    font-size: 13px;
    color: #777;
    margin-top: 4px
}

/* right column */
.ta-right .ta-card h4 {
    margin: 0 0 10px 0;
    font-size: 16px
}

.ta-info-card .ta-info-row {
    border-bottom: 0;
    padding: 8px 0
}

/* logout specific style (white button with orange border) */
.ta-cta-btn[style*="background:#fff"] {
    background: #fff !important;
    color: var(--ta-accent) !important;
    border: 1px solid var(--ta-accent) !important;
    box-shadow: none !important;
}