/* --- General & Root Styles --- */
:root {
    --portal-header-bg: #f26b27;
    --portal-header-text: #ffffff;
    --portal-header-subtext: #ffffff;
    --portal-header-wallet: #ffffff;
    --portal-header-icon: #ffffff;
    --portal-header-align: left;
    --portal-page-bg: #f4f7f9;
    --portal-card-bg: #ffffff;
    --portal-card-border: #e0e0e0;
    --portal-card-title: #202124;
    --portal-service-icon-bg: #e3f2fd;
    --portal-service-icon-text: #5f6368;
    --portal-service-icon-size: 60px;
    --portal-service-icon-padding: 15px;
    --portal-provider-card-width: 70px;
    --portal-provider-card-height: 70px;
    --portal-provider-logo-size: 80px;
    --portal-form-provider-logo-size: 150px;
    --portal-form-input-padding: 15px;
    --portal-form-input-icon-size: 1.2em;
    --portal-form-button-padding: 15px;
    --portal-form-btn-primary-bg: #27ae60;
    --portal-form-btn-secondary-bg: #7f8c8d;
    --portal-form-validation-margin-top: 5px;
    --portal-form-validation-margin-bottom: 5px;
    --text-primary: #202124; --text-secondary: #5f6368; --green-success: #27ae60; --red-error: #e74c3c;
}
body { margin: 0; font-family: 'Roboto', sans-serif; background-color: var(--portal-page-bg); }
.portal-container { max-width: 900px; margin: 0 auto; }
.portal-body { padding: 15px; }
.card { background: var(--portal-card-bg); border-radius: 12px; border: 1px solid var(--portal-card-border); padding: 20px; margin-bottom: 20px; }
h2.section-title { font-size: 1.1em; font-weight: 600; margin: 0 0 15px 0; color: var(--portal-card-title); }

/* --- Header --- */
.portal-header { background: var(--portal-header-bg); color: var(--portal-header-text); padding: 15px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.portal-header a.menu-btn, .portal-header button.menu-btn { color: var(--portal-header-icon); text-decoration: none; font-size: 1.5em; background: none; border: none; cursor: pointer; flex-basis: 50px; text-align: left; }
.portal-header h1 { font-size: 1.1em; margin: 0; display: flex; flex-direction: column; align-items: var(--portal-header-align); gap: 2px; color: var(--portal-header-text); text-align: var(--portal-header-align); flex-grow: 1;}
.portal-header .subtext { font-size: 0.8em; font-weight: 400; color: var(--portal-header-subtext); opacity: 0.9; }
.portal-header .balance { font-size: 1.0em; font-weight: 500; color: var(--portal-header-wallet); flex-basis: 100px; text-align: right;  }

/* --- Service & Provider Grids --- */
.service-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.service-item {text-decoration: none;}
.service-item .icon { width: var(--portal-service-icon-size); height: var(--portal-service-icon-size); padding: var(--portal-service-icon-padding); background-color: var(--portal-service-icon-bg); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 10px auto; transition: transform .2s ease; box-sizing: border-box;}
.service-item .icon img {max-width: 100%; max-height: 100%; object-fit: contain;}
.service-item span { color: var(--portal-service-icon-text); font-size: 0.9em; font-weight: 500; text-align: center; display: block;}
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; }
.provider-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: var(--portal-card-bg); border-radius: 12px; text-decoration: none; border: 1px solid var(--portal-card-border); transition: all 0.2s ease; min-width: var(--portal-provider-card-width); min-height: var(--portal-provider-card-height); box-sizing: border-box; padding: 10px; }
.provider-card-logo { height: var(--portal-provider-logo-size); width: auto; max-width: 90%; object-fit: contain; }
.provider-card-name { font-size: 0.9em; color: var(--text-secondary); line-height: 1.3; margin-top: auto; }
.provider-card-logo { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; width: 100%; }

/* ======================================================== */
/* STYLES FOR RECHARGE FORM - RESTORED */
/* ======================================================== */
.recharge-form-container { display: flex; flex-direction: column; align-items: center; }
.recharge-form-container .provider-logo { max-height: var(--portal-form-provider-logo-size); margin-bottom: 20px; }
.recharge-form { width: 100%; max-width: 400px; margin-top: 15px; }
.form-group { position: relative; margin-bottom: var(--portal-form-validation-margin-bottom); }
.form-group .icon { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; justify-content: center; width: calc(var(--portal-form-input-padding) + 25px); color: var(--text-secondary); font-size: var(--portal-form-input-icon-size); border-right: 1px solid #ccc; }
.form-group input { width: 100%; box-sizing: border-box; font-weight: 500; font-size: 1.2em; padding: var(--portal-form-input-padding); border-radius: 8px; border: 1px solid #ccc; text-align: center; padding-left: calc(var(--portal-form-input-padding) + 35px); }
.recharge-form-container .btn { border: none; cursor: pointer; width: 100%; font-size: 1.1em; font-weight: 600; padding: var(--portal-form-button-padding); border-radius: 8px; display: block; box-sizing: border-box; text-align: center; text-decoration: none; }
.btn.btn-secondary { background-color: var(--portal-form-btn-secondary-bg); color: white; margin-top: 10px;}
.btn.btn-primary { background-color: var(--portal-form-btn-primary-bg); color: white; margin-top: 10px; }
.validation-message { text-align: left; font-size: 0.85em; padding-left: 5px; height: 18px; display: block; margin-top: calc(-1 * var(--portal-form-validation-margin-bottom) + var(--portal-form-validation-margin-top)); }
.validation-error { color: var(--red-error); }
.validation-success { color: var(--green-success); }
.form-group input.invalid { border-color: var(--red-error) !important; }
.form-group input.valid { border-color: var(--green-success) !important; }

/* --- Recharge Modal Styles (RESTORED) --- */
.recharge-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 1002; }
.recharge-modal-overlay.visible { display: flex; }
.recharge-modal-content { background: #fff; padding: 30px; border-radius: 15px; text-align: center; width: 90%; max-width: 320px; position: relative; overflow: hidden; }
.recharge-modal-content .modal-provider-logo { max-height: 80px; margin-bottom: 15px; }
.recharge-modal-content .modal-amount { font-size: 2.5em; font-weight: bold; color: var(--text-primary); }
.recharge-modal-content .modal-provider-name { color: #666; margin-top: 5px; }
.recharge-modal-content .modal-number { font-size: 1.2em; color: #333; margin-top: 2px; }
.recharge-modal-content .modal-actions { display: flex; justify-content: space-around; margin-top: 25px; }
/* ======================================================== */
/* THE GUARANTEED FIX IS TO ADD THE CSS RULES BELOW         */
/* ======================================================== */

.modal-actions button {
    background: #F0F0F0;
    border: none;
    font-size: 3em; /* This creates the icon size */
    cursor: pointer;
    width: 70px;
    height: 70px;
    border-radius: 50%; /* This makes the button round */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease; /* Smooth hover effect */
}

.modal-actions button:hover {
    background-color: #FFF9C2; /* Light grey background on hover */
}

.icon-cancel::before {
    content: '×';
    color: #e74c3c; /* Red X */
}

.icon-confirm::before {
    content: '✓';
    color: #27ae60; /* Green checkmark */
}

/* ======================================================== */
/* END OF FIX                                             */
/* ======================================================== */
.modal-body-content { transition: opacity 0.3s ease, transform 0.3s ease; }
.success-animation-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transform: scale(1.3); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.recharge-modal-content.processing .modal-body-content { opacity: 0; transform: scale(0.7); }
.recharge-modal-content.processing .success-animation-container { opacity: 1; transform: scale(1); pointer-events: auto; }
.static-checkmark-circle { width: 80px; height: 80px; border-radius: 50%; background-color: #e8f5e9; display: flex; justify-content: center; align-items: center; }
.static-checkmark { width: 25px; height: 50px; border-bottom: 10px solid #27ae60; border-right: 10px solid #27ae60; transform: rotate(45deg) translate(-10px, -5px); }
.success-message { margin-top: 20px; font-size: 1.2em; font-weight: 500; color: #27ae60; }
/* ======================================================== */


/* ======================================================== */
/* NEW: Styles for the modern Sale Target Widget (V2 - Compact) */
/* ======================================================== */
.sale-target-container {
    background: var(--portal-card-bg, #fff);
    padding: 15px 20px; /* Reduced vertical padding */
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 25px;
}
.sale-target-item {
    text-align: center;
    flex: 1;
}
.sale-target-item .icon {
    width: 45px;  /* Reduced icon size */
    height: 45px; /* Reduced icon size */
    margin: 0 auto 8px auto; /* Reduced margin */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.sale-target-item .icon.green {
    background-image: url('https://payez.microparts.lk/plugins/user-portal/assets/icons/sale-target-green.png');
}
.sale-target-item .icon.red {
    background-image: url('https://payez.microparts.lk/plugins/user-portal/assets/icons/sale-target-red.png');
}
.sale-target-item .label {
    font-size: 0.55em; /* Reduced font size */
    color: var(--text-secondary, #5f6368);
    font-weight: 500;
    margin-bottom: 4px; /* Reduced margin */
}
.sale-target-item .value {
    font-size: 0.85em; /* Reduced font size */
    font-weight: 700;
    color: var(--text-primary, #202124);
}
.sale-target-refresh {
    flex-shrink: 0;
    width: 60px;  /* Reduced button size */
    height: 60px; /* Reduced button size */
    border-radius: 50%;
    background-color: #f0f2f5;
    background-image: url('https://payez.microparts.lk/plugins/user-portal/assets/icons/refresh-icon.png');
    background-size: 55%; /* Adjusted icon size inside */
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.2s;
    border: 1px solid #e0e0e0;
}
.sale-target-refresh:hover {
    transform: rotate(180deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* ======================================================== */



/* --- Recent Recharges List (Stable) --- */
.recharge-history-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--portal-card-border); }
.recharge-history-item:last-child { border-bottom: none; }
.recharge-details { font-size: 0.95em; flex-grow: 1; line-height: 1.5; }
.recharge-details strong { font-size: 1.1em; display: block; color: var(--text-primary); }
.recharge-details .info-line { color: var(--text-secondary); display: block; }
.recharge-details .timestamp { color: #7f8c8d; font-size: 0.9em; display: block; }
.trans-id-display { font-size: 0.8em; font-family: monospace; font-weight: bold; display: block; margin-top: 4px; }
.recharge-status-block { text-align: right; flex-shrink: 0; margin-left: 15px; }
.recharge-status-badge { font-size: 0.8em; font-weight: bold; padding: 5px 12px; border-radius: 15px; display: inline-block; }

/* TEXT color for the transaction ID */
.recharge-history-item.status-SUCCESS .trans-id-display { color: #2e7d32; }
.recharge-history-item.status-FAILED .trans-id-display,
.recharge-history-item.status-REFUND .trans-id-display { color: #c62828; }
.recharge-history-item.status-PENDING .trans-id-display { color: #f57f17; }

/* BACKGROUND color for the status BADGE */
.recharge-status-badge.status-SUCCESS { background-color: #e8f5e9; color: #2e7d32; }
.recharge-status-badge.status-FAILED,
.recharge-status-badge.status-REFUND { background-color: #ffebee; color: #c62828; }
.recharge-status-badge.status-PENDING { background-color: #fffde7; color: #f57f17; }