.walker-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    min-width: 155px;
}

/* Walk request status badges — same soft-color style as admin-users.css badges */
.walk-status-cancelled { background-color: #eeeeee; color: #6b6b6b; }

.walker-avatar {
    width: 100px;
    height: 100px;
    font-size: var(--font-size-lg);
}

.walker-card:nth-child(even) .walker-avatar {
    background-color: var(--color-secondary);
}

.walker-avatar-sm {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-sm);
}

/* Dog photo on a walk-request card — full width, same 16:9 ratio as the
   "My Dogs" card photo, with the status badge overlaid on its corner
   instead of taking up its own row. */
.walk-request-dog-photo {
    width: 100%;
    position: relative;
}

.walk-request-badge-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* Bottom action strip (Accept/Decline/Mark Completed) — pinned to the
   bottom-right of the card and collapsed away entirely once emptied
   (nothing left to act on). */
.walk-request-actions-strip {
    padding: 0.65rem 0.75rem;
    margin-top: auto;
}

.walk-request-actions-strip:empty {
    display: none;
}

/* Preserve line breaks the owner typed in their walk-request message */
.walk-request-message {
    white-space: pre-line;
}

#walkRequestDetailsModal .modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.walk-request-owner-col,
.walk-request-message-col {
    min-width: 0;
}

.walk-request-owner-col .modal-detail-value {
    overflow-wrap: break-word;
}

@media (min-width: 576px) {
    .walk-request-owner-col {
        padding-right: 1rem !important;
    }

    .walk-request-message-col {
        border-left: 1px solid var(--color-border);
        padding-left: 1rem !important;
    }
}

/* Walker detail modal avatar — shared by walkers.php and index.php */
.walker-modal-avatar {
    width: 100px;
    height: 100px;
    font-size: var(--font-size-xl);
}

#modal-view-profile {
    font-size: var(--font-size-sm);
}

.walker-card-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
}

.walker-card-rating {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-heading);
}

.walker-card-reviews {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
}

.walker-card-walks {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
}

/* Walker detail modal — shared by walkers.php and index.php */
.modal-stars {
    color: var(--color-primary);
    font-size: var(--font-size-base);
    white-space: nowrap;
}

.modal-rating-score {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-heading);
    white-space: nowrap;
}

.modal-stat-sm {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    white-space: nowrap;
}

.walker-modal-stats-row {
    flex-wrap: wrap;
    row-gap: 0.35rem;
}

.modal-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-body);
}

.modal-detail-row:last-child {
    margin-bottom: 0 !important;
}

.modal-detail-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    margin-bottom: 0.25rem;
}

.modal-detail-label i {
    width: 16px;
    text-align: center;
}

.modal-detail-value {
    color: var(--color-text-body);
    padding-left: calc(16px + 0.5rem);
}

.walker-profile-columns > *,
.walker-reviews-grid > * {
    min-width: 0;
}

@media (min-width: 768px) {
    .walker-col-divider {
        border-left: 1px solid var(--color-border);
        padding-left: 2rem;
    }
}

.review-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

.review-card-name {
    font-size: var(--font-size-base);
    color: var(--color-text-heading);
}

.review-card-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-body);
}

.review-card-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
}

@media (max-width: 575.98px) {
    .modal-header:has(.walker-modal-header-info) {
        position: relative;
    }

    .modal-header:has(.walker-modal-header-info) .btn-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .walker-modal-header-info {
        flex-direction: column;
        width: 100%;
        text-align: center;
        gap: 0.5rem;
    }
}