/* Park Favorites CSS Styles */

/* Heart icon styles */
.card__heart { cursor: pointer; transition: all 0.3s ease; color: #ccc; font-size: 1.5rem; padding: 8px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.card__heart.favorited:after { opacity: 1; }
    .card__heart:hover { color: #ff6b6b; background-color: white; transform: scale(1.1); }


/* Popup overlay */
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Popup content */
.popup-content { background: white; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; animation: slideIn 0.3s ease; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-50px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Popup header */
.popup-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 16px; border-bottom: 1px solid #eee; }

    .popup-header h3 { margin: 0; color: #333; font-size: 1.25rem; font-weight: 600; }

.popup-close { background: none; border: none; font-size: 24px; color: #999; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; }

    .popup-close:hover { background-color: #f5f5f5; color: #666; }

/* Popup body */
.popup-body { padding: 24px; }

    .popup-body p { margin: 0 0 20px; color: #666; line-height: 1.5; }

/* Form styles */
.form-group { margin-bottom: 20px; }

    .form-group label { display: block; margin-bottom: 6px; color: #333; font-weight: 500; }

    .form-group input { width: 100%; padding: 12px 16px; border: 2px solid #e1e5e9; border-radius: 6px; font-size: 16px; transition: border-color 0.2s ease; box-sizing: border-box; }

        .form-group input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); }

/* Form actions */
.form-actions { display: flex; gap: 12px; margin-top: 24px; }

.btn { padding: 12px 24px; border: 1px; border-radius: 6px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 120px; border: 1px solid transparent; }

.btn-primary { background-color: #007bff; color: white; }

    .btn-primary:hover { background-color: #0056b3; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); }

.btn-secondary { background-color: #6c757d; color: white; }

    .btn-secondary:hover { background-color: #545b62; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3); }

/* Small text */
.small-text { font-size: 14px; color: #888; margin-top: 16px; text-align: center; }

    .small-text a { color: #007bff; text-decoration: none; }

        .small-text a:hover { text-decoration: underline; }

/* Message toast */
.message-toast { position: fixed; top: 20px; right: 20px; padding: 16px 20px; border-radius: 6px; color: white; font-weight: 500; z-index: 10000; max-width: 400px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); animation: slideInRight 0.3s ease; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

.message-success { background-color: #28a745; }

.message-error { background-color: #dc3545; }

.message-info { background-color: #17a2b8; }

.message-close { background: none; border: none; color: white; font-size: 18px; cursor: pointer; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: opacity 0.2s ease; }

    .message-close:hover { opacity: 1; }

/* Responsive design */
@media (max-width: 768px) {
    .popup-content { width: 95%; margin: 20px; }

    .popup-header,
    .popup-body { padding: 16px; }

    .form-actions { flex-direction: column; }

    .btn { width: 100%; }

    .message-toast { right: 10px; left: 10px; max-width: none; }
}

/* Loading state */
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn.loading { position: relative; color: transparent; }

    .btn.loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; }

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }

.modal-content { background: white; padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; }

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }

.modal-close { background: none; border: none; font-size: 3.5rem; cursor: pointer; }

.share-link-container { display: flex; gap: 0.5rem; }

    .share-link-container input { flex: 1; padding: 10px; }

@media (max-width: 768px) {
    .favorites-grid { grid-template-columns: 1fr; }

    .card-actions { flex-direction: column; }

    .share-link-container { flex-direction: column; }
}