/* Group Funding Stokvel Frontend Styles */

:root {
    --gfs-primary: #6B48FF;
    --gfs-secondary: #FF6B6B;
    --gfs-success: #4CAF50;
    --gfs-danger: #f44336;
    --gfs-warning: #ff9800;
    --gfs-info: #2196F3;
    --gfs-light: #f8f9fa;
    --gfs-dark: #343a40;
    --gfs-background: #E4EBF5;
    --gfs-shadow-light: #FFFFFF;
    --gfs-shadow-dark: #A3B1C6;
}

/* Neomorphic Base Styles */
.gfs-container {
    background-color: var(--gfs-background);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 
        8px 8px 16px var(--gfs-shadow-dark),
        -8px -8px 16px var(--gfs-shadow-light);
}

.gfs-card {
    background-color: var(--gfs-background);
    padding: 1.5rem;
    border-radius: 15px;
    margin-bottom: 1.5rem;
    box-shadow: 
        5px 5px 10px var(--gfs-shadow-dark),
        -5px -5px 10px var(--gfs-shadow-light);
    transition: transform 0.3s ease;
}

.gfs-card:hover {
    transform: translateY(-2px);
}

/* Wallet Display */
.gfs-wallet-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gfs-balance-card {
    background: linear-gradient(145deg, var(--gfs-primary), #8B6BFF);
    color: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 
        5px 5px 10px var(--gfs-shadow-dark),
        -5px -5px 10px var(--gfs-shadow-light);
}

.gfs-balance-amount {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 1rem 0;
}

/* Buttons */
.gfs-button {
    background-color: var(--gfs-background);
    color: var(--gfs-dark);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        5px 5px 10px var(--gfs-shadow-dark),
        -5px -5px 10px var(--gfs-shadow-light);
}

.gfs-button:hover {
    box-shadow: 
        3px 3px 6px var(--gfs-shadow-dark),
        -3px -3px 6px var(--gfs-shadow-light);
}

.gfs-button:active {
    box-shadow: inset 
        2px 2px 5px var(--gfs-shadow-dark),
        inset -2px -2px 5px var(--gfs-shadow-light);
}

.gfs-button-primary {
    background-color: var(--gfs-primary);
    color: white;
}

.gfs-button-secondary {
    background-color: var(--gfs-secondary);
    color: white;
}

/* Form Elements */
.gfs-input {
    background-color: var(--gfs-background);
    border: none;
    padding: 1rem;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 1rem;
    box-shadow: inset 
        2px 2px 5px var(--gfs-shadow-dark),
        inset -2px -2px 5px var(--gfs-shadow-light);
}

.gfs-input:focus {
    outline: none;
    box-shadow: inset 
        3px 3px 6px var(--gfs-shadow-dark),
        inset -3px -3px 6px var(--gfs-shadow-light);
}

/* Transactions List */
.gfs-transaction-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    background-color: var(--gfs-background);
    box-shadow: 
        3px 3px 6px var(--gfs-shadow-dark),
        -3px -3px 6px var(--gfs-shadow-light);
}

.gfs-transaction-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    background-color: var(--gfs-background);
    box-shadow: 
        2px 2px 4px var(--gfs-shadow-dark),
        -2px -2px 4px var(--gfs-shadow-light);
}

.gfs-transaction-details {
    flex-grow: 1;
}

.gfs-transaction-description {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gfs-transaction-meta {
    font-size: 0.875rem;
    color: #666;
}

.gfs-transaction-amount {
    font-weight: bold;
}

.gfs-transaction-item.credit .gfs-transaction-amount {
    color: var(--gfs-success);
}

.gfs-transaction-item.debit .gfs-transaction-amount {
    color: var(--gfs-danger);
}

/* Group Display */
.gfs-group-card {
    background-color: var(--gfs-background);
    padding: 1.5rem;
    border-radius: 15px;
    margin-bottom: 1.5rem;
    box-shadow: 
        5px 5px 10px var(--gfs-shadow-dark),
        -5px -5px 10px var(--gfs-shadow-light);
}

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

.gfs-group-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.gfs-group-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.gfs-meta-item {
    text-align: center;
    padding: 1rem;
    border-radius: 10px;
    background-color: var(--gfs-background);
    box-shadow: inset 
        2px 2px 4px var(--gfs-shadow-dark),
        inset -2px -2px 4px var(--gfs-shadow-light);
}

.gfs-meta-label {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.gfs-meta-value {
    font-weight: bold;
}

/* Rating Stars */
.gfs-rating-stars {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
}

.gfs-star {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--gfs-background);
    box-shadow: 
        2px 2px 4px var(--gfs-shadow-dark),
        -2px -2px 4px var(--gfs-shadow-light);
    transition: all 0.3s ease;
}

.gfs-star.active {
    background-color: var(--gfs-warning);
    color: white;
    box-shadow: inset 
        2px 2px 4px rgba(0, 0, 0, 0.2),
        inset -2px -2px 4px rgba(255, 255, 255, 0.1);
}

/* Notifications */
.gfs-notifications {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.gfs-notification {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    background-color: var(--gfs-background);
    box-shadow: 
        5px 5px 10px var(--gfs-shadow-dark),
        -5px -5px 10px var(--gfs-shadow-light);
    animation: slideIn 0.3s ease;
}

.gfs-notification.success {
    background-color: var(--gfs-success);
    color: white;
}

.gfs-notification.error {
    background-color: var(--gfs-danger);
    color: white;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .gfs-container {
        padding: 1rem;
    }

    .gfs-balance-amount {
        font-size: 2rem;
    }

    .gfs-group-meta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .gfs-wallet-overview {
        grid-template-columns: 1fr;
    }

    .gfs-group-meta {
        grid-template-columns: 1fr;
    }

    .gfs-transaction-item {
        flex-direction: column;
        text-align: center;
    }

    .gfs-transaction-icon {
        margin: 0 0 1rem 0;
    }

    .gfs-transaction-amount {
        margin-top: 1rem;
    }
}