/* --- Elegant Theme Base --- */
:root {
    --elegant-bg: #F4F6F9;
    --elegant-surface: #FFFFFF;
    --elegant-primary: #0055D4;
    --elegant-text: #121212;
    --elegant-text-secondary: #6A737D;
    --elegant-border: #E1E4E8;
}
body.elegant-theme {
    font-family: 'Inter', sans-serif;
    background-color: var(--elegant-bg);
    color: var(--elegant-text);
}
.elegant-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.elegant-panel {
    background-color: var(--elegant-surface);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--elegant-border);
}
.panel-header h5 {
    font-weight: 600;
}
.back-link {
    font-size: 1.5rem;
    color: var(--elegant-text-secondary);
    text-decoration: none;
}
.panel-body {
    padding: 1.5rem;
}

/* --- Elegant Form Styles --- */
.form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--elegant-text-secondary);
}
.elegant-input, .elegant-input-addon {
    background-color: var(--elegant-bg);
    border: 1px solid var(--elegant-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}
.form-control.elegant-input:focus {
    background-color: #fff;
    border-color: var(--elegant-primary);
    box-shadow: 0 0 0 2px rgba(0, 85, 212, 0.2);
}
.elegant-btn {
    background-color: var(--elegant-primary);
    border: none;
    border-radius: 0.5rem;
    padding: 0.8rem;
    font-weight: 600;
}
.elegant-btn-secondary {
    background-color: var(--elegant-border);
    color: var(--elegant-text);
    border: none;
    border-radius: 0.5rem;
    padding: 0.8rem;
    font-weight: 600;
}

/* --- Transfer Hub Styles --- */
.new-transfer-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: var(--elegant-bg);
    border: 1px solid var(--elegant-border);
    text-decoration: none;
    color: var(--elegant-text);
    font-weight: 600;
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
}
.new-transfer-btn:hover {
    border-color: var(--elegant-primary);
    background-color: #E6F0FF;
}
.new-transfer-btn i {
    font-size: 1.5rem;
    color: var(--elegant-primary);
}
.beneficiary-title {
    font-size: 0.9rem;
    color: var(--elegant-text-secondary);
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
}
.beneficiary-list-elegant {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.beneficiary-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--elegant-text);
    transition: background-color 0.2s ease;
}
.beneficiary-item:hover {
    background-color: var(--elegant-bg);
}
.beneficiary-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--elegant-border);
    font-weight: 600;
    color: var(--elegant-text-secondary);
}

/* --- Transfer Form Specific --- */
.sender-info {
    background-color: var(--elegant-bg);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}
.sender-info small {
    color: var(--elegant-text-secondary);
}
.sender-info strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
}
.sender-info span {
    font-size: 0.9rem;
    color: var(--elegant-text-secondary);
}

.confirmation-details-elegant {
    /* Uses .detail-item from bca style */
}

/* --- myBCA 2025 Inspired Theme --- */
:root {
    --mybca-blue: #0060AE;
    --mybca-bg: #F0F3F7;
    --mybca-surface: #FFFFFF;
    --mybca-text: #1A1A1A;
    --mybca-text-secondary: #595959;
    --mybca-border: #E6E6E6;
}
body.mybca-theme {
    font-family: 'Inter', sans-serif;
    background-color: var(--mybca-bg);
    color: var(--mybca-text);
}
.mybca-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.mybca-panel {
    background-color: var(--mybca-surface);
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 96, 174, 0.1);
    overflow: hidden;
}
.mybca-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--mybca-border);
}
.mybca-panel .panel-header h5 {
    font-weight: 600;
}
.mybca-panel .panel-body {
    padding: 1.5rem;
}
.profile-link {
    font-size: 1.75rem;
    color: var(--mybca-text-secondary);
}

/* Balance Cards */
.mybca-balance-card {
    background: linear-gradient(135deg, #00529B, var(--mybca-blue));
    color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}
.mybca-balance-card-small {
    border: 1px solid var(--mybca-border);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}
.mybca-balance-card-small a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    color: var(--mybca-text);
}
.card-content small {
    display: block;
    color: var(--mybca-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.mybca-balance-card .card-content small {
    color: rgba(255,255,255,0.8);
}
.card-content strong {
    display: block;
    font-size: 2rem;
    font-weight: 700;
}
.card-content span {
    display: block;
    font-size: 1rem;
    font-family: monospace;
    margin-top: 0.5rem;
    opacity: 0.8;
}
.mybca-balance-card-small .card-content span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--mybca-blue);
    opacity: 1;
}

/* Action Grids */
.mybca-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.mybca-action-grid .action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--mybca-bg);
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--mybca-text);
    font-weight: 600;
    transition: background-color 0.2s;
}
.mybca-action-grid .action-item:hover {
    background-color: #e0e7ef;
}
.mybca-action-grid .action-item i {
    font-size: 1.5rem;
    color: var(--mybca-blue);
}

.mybca-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.mybca-menu-grid .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--mybca-text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    transition: background-color 0.2s;
}
.mybca-menu-grid .menu-item:hover {
    background-color: var(--mybca-bg);
    color: var(--mybca-blue);
}
.mybca-menu-grid .menu-item i {
    font-size: 2rem;
    color: var(--mybca-blue);
}

/* Transaction List */
.section-title {
    font-weight: 600;
    margin-bottom: 1rem;
}
.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.transaction-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
}
.transaction-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.transaction-icon.deposit {
    background-color: #dcfce7;
    color: #16a34a;
}
.transaction-icon.withdrawal {
    background-color: #fee2e2;
    color: #dc2626;
}
.transaction-amount {
    font-weight: 600;
}

/* Modal Inputs */
.mybca-input, .mybca-input-addon {
    background-color: var(--mybca-bg);
    border: 1px solid var(--mybca-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}
.form-control.mybca-input:focus {
    background-color: #fff;
    border-color: var(--mybca-blue);
    box-shadow: 0 0 0 2px rgba(0, 96, 174, 0.2);
}
.mybca-btn {
    background-color: var(--mybca-blue);
    border-color: var(--mybca-blue);
    border-radius: 0.5rem;
    padding: 0.8rem;
    font-weight: 600;
}

/* ... (semua style yang sudah ada) ... */

/* --- NEW: Carousel (Slideshow) Styles --- */
.carousel {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 96, 174, 0.1);
}

.carousel-item img {
    filter: brightness(0.8);
}

.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.5;
}

.carousel-indicators .active {
    opacity: 1;
}

.carousel-caption {
    bottom: 1.25rem;
    text-align: left;
    padding: 0 1.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.carousel-caption h5 {
    font-weight: 700;
}

.carousel-caption p {
    font-size: 0.9rem;
}