/* ==========================================================================
   Public CSS for Score Tank Leagues Add-on - Transfers Shortcode v1.0
   ========================================================================== */

.scoretank-transfers-wrapper {
    margin: 30px auto; /* Increased margin */
    padding: 0 15px;
    max-width: 850px; /* Slightly wider */
    font-family: 'Cairo', sans-serif; /* Example: Use a modern Arabic font */
    background-color: #f4f6f9; /* Lighter background */
    border-radius: 10px;
    padding: 25px; /* Increased padding */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
}

.transfers-main-title {
    text-align: center;
    font-size: 2em; /* Larger title */
    margin-bottom: 30px; /* Increased margin */
    color: #1a2533; /* Darker color */
    font-weight: 700;
    position: relative;
    padding-bottom: 15px;
}
/* Underline effect for title */
.transfers-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #007bff; /* Primary color */
    border-radius: 2px;
}


.transfers-list {
    margin-bottom: 30px;
}

/* --- Transfer Item Styling --- */
.transfer-item {
    background-color: #ffffff;
    border: 1px solid #e9ecef; /* Lighter border */
    border-radius: 8px; /* Slightly larger radius */
    margin-bottom: 15px;
    padding: 15px 20px; /* Adjusted padding */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px; /* Adjusted gap */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    position: relative; /* For potential future pseudo-elements */
    overflow: hidden; /* Ensure content stays within borders */
}
.transfer-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

/* Player Info */
.player-info {
    flex: 1 1 200px; /* Allow more space */
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
}
.player-info .player-img {
    width: 50px; /* Larger image */
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f0f0; /* Slightly thicker border */
    background-color: #f8f8f8; /* Placeholder bg */
}
.player-info .player-name {
    font-weight: 600;
    color: #212529; /* Bootstrap dark text color */
    font-size: 1.05em;
}

/* Transfer Details (Center) */
.transfer-details {
    flex: 2 1 320px; /* More flexible center */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 280px;
}

/* Team Info (From/To) */
.team-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #495057; /* Bootstrap secondary text */
}
.team-info.from-team { justify-content: flex-end; text-align: right; }
.team-info.to-team { justify-content: flex-start; text-align: left; }
.team-info .team-img {
    width: 30px; /* Slightly larger team logo */
    height: 30px;
    object-fit: contain;
}
.team-info .team-name {
    font-weight: 500;
}
/* RTL adjustments for image/text order */
.team-info.from-team img { order: 1; }
.team-info.from-team span { order: 0; }
.team-info.to-team img { order: 0; } /* Default order */
.team-info.to-team span { order: 1; }


/* Transfer Arrow/Icon */
.transfer-arrow {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #007bff; /* Primary color */
    padding: 0 10px; /* Add some spacing */
}
.transfer-arrow .transfer-icon {
    font-size: 1.3em;
    margin-bottom: 3px;
    opacity: 0.8;
}
.transfer-arrow .transfer-direction {
    font-size: 1.8em; /* Larger arrow */
    line-height: 1;
}

/* Transfer Meta (Date/Details) */
.transfer-meta {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em; /* Slightly larger */
    color: #6c757d; /* Bootstrap muted color */
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed #dee2e6; /* Lighter dashed line */
    flex-wrap: wrap;
    gap: 5px 15px;
}
.transfer-meta .transfer-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.transfer-meta .transfer-date i {
    opacity: 0.7;
}
.transfer-meta .transfer-deal-type {
    font-style: normal; /* Remove italic */
    background-color: #e9ecef; /* Bootstrap light gray */
    padding: 3px 8px; /* Slightly more padding */
    border-radius: 4px;
    color: #495057;
    font-weight: 500;
}


/* --- Loading / Pagination --- */
.transfer-loading, #no-more-transfers.scoretank-no-more-message {
    text-align: center;
    padding: 25px;
    color: #6c757d;
    font-size: 1.1em;
}
.transfer-loading .spinner {
    float: none; vertical-align: middle; margin-inline-end: 8px;
}
.transfers-pagination { text-align: center; margin-top: 20px; }
#load-more-transfers.scoretank-load-more-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 25px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#load-more-transfers.scoretank-load-more-button:hover:not(:disabled) {
    background-color: #0056b3;
}
#load-more-transfers.scoretank-load-more-button:disabled {
    opacity: 0.7; cursor: wait;
}
#load-more-transfers .spinner {
    visibility: hidden; opacity: 0; vertical-align: middle; margin-inline-start: 8px; width: 16px; height: 16px;
}
#load-more-transfers:disabled .spinner.is-active {
    visibility: visible; opacity: 1;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .player-info { flex-basis: 150px; min-width: 140px; } /* Adjust basis */
    .transfer-details { flex-basis: 280px; min-width: 240px; } /* Adjust basis */
    .player-info .player-name, .team-info .team-name { font-size: 0.95em; }
    .player-info .player-img { width: 40px; height: 40px; }
    .team-info .team-img { width: 25px; height: 25px; }
    .transfer-arrow .transfer-icon { font-size: 1.1em; }
    .transfer-arrow .transfer-direction { font-size: 1.5em; }
}

@media (max-width: 650px) {
    .transfer-item { flex-direction: column; align-items: stretch; gap: 12px; padding: 15px; }
    .player-info { flex-basis: auto; justify-content: center; border-bottom: 1px solid #eee; padding-bottom: 10px; min-width: unset; }
    .transfer-details { flex-basis: auto; flex-direction: column; align-items: center; min-width: unset; gap: 8px; }
    .team-info { justify-content: center !important; text-align: center !important; width: 100%; font-size: 0.95em; }
    .team-info.from-team img { order: 0; } /* Reset order for stacking */
    .team-info.from-team span { order: 1; }
    .transfer-arrow { transform: rotate(90deg); margin: 5px 0; }
    .transfer-meta { flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px;}
}

/* Add Font Awesome if not already loaded */
/* You might need to enqueue Font Awesome properly via functions.php */
/* Example basic import (consider using kit or local files) */
/* @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"); */