/* Glassmorphism Theme for PPDB Form */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --glass-bg: rgba(255, 255, 255, 0.12);
    /* Matching banner transparency */
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    --accent-color: #ff8c00;
    --accent-gradient: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.85);
}

.home-content {
    font-family: 'Outfit', sans-serif;
    background-color: #2d5a27;
    /* Soft Deep Green */
    background-image:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 40%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.05), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(200, 255, 200, 0.03), transparent 60%);
    background-size: cover;
    background-attachment: fixed;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

/* Redesign the Card for Soft Glassmorphism */
/* General Glass Theme Card - Targeted globally for Banner & Content */
.card.glass-theme {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 30px !important;
    box-shadow: var(--glass-shadow) !important;
    overflow: hidden;
    transition: all 0.5s ease;
}

.card.glass-theme:hover {
    transform: translateY(-5px);
}

/* Card Header */
.glass-theme .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    box-shadow: none !important;
}

.glass-theme .card-header h4,
.glass-theme .card-header h5 {
    color: #ffffff !important;
    margin: 0;
    font-weight: 600 !important;
    text-align: center;
}

/* Inputs - Soft Translucent */
.glass-theme .form-control {
    background: rgba(0, 0, 0, 0.2) !important;
    /* Slightly darker for text labels */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    height: auto !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important;
    /* Clean white text */
    font-weight: 500;
}

.glass-theme .form-control:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--accent-color) !important;
}

.glass-theme .form-group label {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* Form Group with Icon Branding */
.form-group-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.form-group-with-icon .fas,
.form-group-with-icon .fa {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 5;
    width: 20px;
    text-align: center;
}

.form-group-with-icon .form-control {
    padding-left: 48px !important;
}

.form-group-with-icon .form-control:focus+.fas,
.form-group-with-icon .form-control:focus+.fa,
.form-group-with-icon .form-control:focus~.fas,
.form-group-with-icon .form-control:focus~.fa {
    color: var(--accent-color);
    transform: translateY(-50%) scale(1.1);
}

.glass-theme .form-control[readonly] {
    background: rgba(0, 0, 0, 0.1) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Select */
.glass-theme select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2332642d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* Footer & Buttons */
.glass-theme .card-footer {
    background: rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid var(--glass-border) !important;
    padding: 24px !important;
    display: flex;
    justify-content: flex-end;
}

#btnsimpan.glass-btn {
    background: var(--accent-gradient) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 16px 32px !important;
    font-weight: 700 !important;
    color: white !important;
    letter-spacing: 0.5px;
    text-transform: none;
    box-shadow: 0 10px 25px -5px rgba(255, 140, 0, 0.4) !important;
    transition: all 0.3s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#btnsimpan.glass-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -10px rgba(50, 100, 45, 0.6) !important;
}

#btnsimpan.glass-btn:active {
    transform: translateY(0);
}

/* Section Dividers / Subtitles */
#divRowWali, #divWali {
    position: relative;
    padding-top: 20px;
    margin-top: 20px;
}

#divRowWali::before {
    content: "DATA WALI";
    position: absolute;
    top: -10px;
    left: 15px;
    background: var(--accent-color);
    color: white;
    padding: 2px 12px;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 20px;
    z-index: 1;
}

/* Smooth Scroll Appearance */
.animated.bounceInLeft {
    animation-duration: 1.2s;
}

/* Validation Styling */
.was-validated .form-control:invalid {
    border-color: #ef4444 !important;
    background-image: none !important;
}

.invalid-feedback {
    font-size: 0.75rem;
    font-weight: 500;
    color: #ef4444;
    margin-top: 4px;
    margin-left: 4px;
}

/* Fix Icons in Login Form */
.glass-theme .form-group {
    position: relative;
    margin-bottom: 20px;
}

.glass-theme .form-group .fa,
.glass-theme .form-group .fas {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-color);
    z-index: 10;
    pointer-events: none;
    opacity: 0.7;
}

.glass-theme .form-group .form-control {
    padding-left: 45px !important;
    /* Make room for icon */
}

/* Banner Enhancements */
.home-banner {
    padding-bottom: 60px;
    z-index: 10;
}

.home-banner h5 {
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    line-height: 1.2 !important;
}

.home-banner p {
    font-size: 1.1rem !important;
    opacity: 0.9;
    font-weight: 400;
}

.home-banner ul li {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 20px 12px 50px !important;
    transition: all 0.3s ease;
}

.home-banner ul li:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(10px);
}

.home-banner ul li::before {
    background: var(--accent-gradient) !important;
    box-shadow: 0 4px 10px rgba(50, 100, 45, 0.3) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 10px !important;
}

/* Activities / Bubbles Glass Styling */
.glass-theme .activities .activity {
    position: relative;
    padding-bottom: 20px;
}

.glass-theme .activities .activity:before {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.glass-theme .activities .activity .activity-icon {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-theme .activities .activity .activity-detail {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

.glass-theme .activities .activity .activity-detail h5 {
    color: #ffffff !important;
    font-weight: 600;
}

.glass-theme .activities .activity .activity-detail:before {
    display: none !important;
    /* Hide the arrow if it's ugly */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .home-content section .card.glass-theme {
        border-radius: 16px !important;
    }

    .home-content section .glass-theme .card-header {
        padding: 16px !important;
    }

    .home-banner h5 {
        font-size: 1.8rem !important;
    }

    .home-content {
        padding-top: 80px !important;
    }
}