/* Phone App System - White & Red Theme for Five Plus Pay */

:root {
    --bg-light: #f6f8fa;
    --panel-light: #ffffff;
    --border-light: #e3e8ee;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --accent: #e50914;
    /* Pure Solid Red - Krot Plus */
    --accent-hover: #b70710;
    --success: #2e7d32;
    --error: #c62828;
    --accent-light: rgba(229, 9, 20, 0.08);
    --accent-border: rgba(229, 9, 20, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "flat-jooza", sans-serif !important;
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

input,
button,
select,
textarea,
label,
span,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "flat-jooza", sans-serif !important;
}


body {
    background-color: #f1f5f9;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    direction: rtl;
    overflow: hidden;
}

/* Web App Responsive Container */
.web-app-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.app-main-container {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    background-color: var(--bg-light);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

@media (max-width: 480px) {
    .app-main-container {
        max-width: 100%;
        box-shadow: none;
    }
}

/* Fixed Top App Header (With thin white bottom border line) */
.app-header-fixed {
    height: 56px;
    background: linear-gradient(135deg, var(--accent) 0%, #c60812 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 120;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: #ffffff;
    padding: 0;
}

.header-default-view {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
}

.header-search-view {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    animation: fadeIn 0.2s ease-out;
}

.header-search-box {
    flex: 1;
    height: 38px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px !important;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
    transition: all 0.2s ease;
}

.header-search-box:focus-within {
    background: rgba(255, 255, 255, 0.28);
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

.header-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
}

.header-search-box input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.header-side-start,
.header-side-end {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 70px;
}

.header-side-end {
    justify-content: flex-end;
}

.header-center {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.header-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    max-width: 160px;
    flex: 1;
    min-width: 0;
}

.header-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 5px !important;
    background-color: transparent;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s, transform 0.1s;
}

.header-icon-btn * {
    pointer-events: none;
}

.header-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.header-icon-btn:active {
    transform: scale(0.92);
    background-color: rgba(255, 255, 255, 0.25);
}

.transparent-btn,
#home-notif-btn,
#search-toggle-btn,
#back-btn,
#header-user-avatar {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.header-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.2s ease;
}

.header-avatar-btn:hover .header-avatar-circle {
    background-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

.header-user-avatar {
    cursor: pointer;
    flex-shrink: 0;
}

.header-user-avatar:active {
    transform: scale(0.92);
}

.header-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notif-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Search Panel Overlay */
.search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: var(--accent);
    display: none;
    align-items: center;
    padding: 0 16px;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.search-overlay.active {
    display: flex;
}

.search-bar {
    display: flex;
    width: 100%;
    gap: 12px;
}

.search-bar input {
    flex: 1;
    height: 38px;
    border-radius: 8px;
    border: none;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 0 16px;
    outline: none;
    font-size: 0.85rem;
}

.search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.search-bar button {
    border: none;
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Screens Container (Navigation Manager - Fixed Viewport with Internal Scrolling) */
.screens-container {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* App Screen base styling */
.app-screen {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    background-color: var(--bg-light);
    overflow: hidden;
}

/* Screen active */
.app-screen.active {
    display: flex;
    flex: 1;
    min-height: 0;
}

#screen-categories,
#screen-all-categories {
    flex-direction: column;
}

#screen-categories {
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#screen-categories.active {
    display: flex;
}

.home-fixed-balance-section {
    flex: 0 0 auto;
    width: 100%;
    z-index: 10;
}

/* Home screen: scrollable container for balance, offers & services */
.home-scroll-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
}

.screen-content {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 28px 14px;
    box-sizing: border-box;
}

.section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-right: 6px;
    border-right: 3px solid var(--accent);
    flex-shrink: 0;
}

/* Welcome Banner (Enlarged Unified Balance Card Integrated Seamlessly with Top Bar) */
.welcome-banner {
    background: linear-gradient(180deg, #c60812 0%, #b91c1c 100%);
    padding: 10px 16px 16px 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 24px rgba(229, 9, 20, 0.2);
    margin: 0;
}

.welcome-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.welcome-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.welcome-avatar-mini {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.welcome-text h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.welcome-text span {
    font-size: 0.75rem;
    opacity: 0.9;
    font-weight: 600;
}

/* Balance & Deposit Section */
.welcome-balance-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
}

.balance-top-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.balance-label {
    font-size: 0.72rem;
    opacity: 0.9;
    font-weight: 600;
}

.toggle-balance-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    width: 24px;
    height: 24px;
    border-radius: 5px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-balance-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.balance-amount {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 110px;
    height: 1.6rem;
    line-height: 1.6rem;
    overflow: hidden;
    white-space: nowrap;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Balance blur overlay when hidden */
.balance-blur {
    filter: blur(7px);
    opacity: 0.6;
    user-select: none;
    pointer-events: none;
}

/* Quick Actions Grid Integrated Inside Balance Card */
.balance-actions-grid.integrated-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    width: 100%;
}

.integrated-grid .quick-action-btn {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
    border-radius: 5px !important;
    padding: 8px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.integrated-grid .quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-2px);
}

.integrated-grid .quick-action-btn:active {
    transform: scale(0.95);
}

.integrated-grid .quick-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.integrated-grid .quick-action-btn span {
    font-size: 0.76rem;
    font-weight: 700;
    color: #ffffff;
}

/* Categories Grid (Home) - 4 Columns */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 8px;
    padding: 4px 2px 14px 2px;
    width: 100%;
    box-sizing: border-box;
}

/* Category Watermark Card (Centered Text + 30% Opacity Large Tilted Background Icon) */
.category-watermark-card {
    background: linear-gradient(135deg, var(--accent) 0%, #b91c1c 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px !important;
    min-height: 72px;
    padding: 10px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease, background 0.22s ease;
}

.category-watermark-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(229, 9, 20, 0.35);
    background: linear-gradient(135deg, #ff1723 0%, #c60812 100%);
}

.category-watermark-card:active {
    transform: scale(0.95);
}

/* Text in the exact Center */
.category-card-center-text {
    font-size: 0.76rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    text-align: center;
    width: 100%;
    z-index: 2;
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    padding: 0 4px;
    word-break: break-word;
}

/* Large 30% Opacity Tilted Background Watermark Graphic */
.category-watermark-icon {
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 56px;
    height: 56px;
    opacity: 0.3;
    /* Exactly 30% transparency as requested */
    transform: rotate(-18deg);
    /* Tilted/slanted decorative watermark */
    color: #ffffff;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-watermark-card:hover .category-watermark-icon {
    opacity: 0.45;
    transform: rotate(-10deg) scale(1.1);
}

.category-watermark-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

/* Providers List Screen */
.providers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.provider-row {
    background-color: var(--panel-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
}

.provider-row:active {
    background-color: var(--accent-light);
    border-color: var(--accent-border);
}

.provider-row-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Cut service/provider logo slightly rounded */
.provider-row-logo {
    width: 46px;
    height: 46px;
    background-color: var(--bg-light);
    border-radius: 8px;
    /* Dairiy Baseet men Al-Otraf */
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.provider-row-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.provider-row-name h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.provider-row-name span {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Services List Screen */
.services-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-row {
    background-color: var(--panel-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.service-row:active {
    background-color: var(--accent-light);
    border-color: var(--accent-border);
}

.service-row-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-active {
    background-color: var(--success);
    box-shadow: 0 0 6px var(--success);
}

.status-stopped {
    background-color: var(--error);
    box-shadow: 0 0 6px var(--error);
}

/* Service Profit Badge in List */
.service-profit-tag {
    background-color: rgba(34, 197, 94, 0.08);
    color: #16a34a;
    font-size: 0.62rem !important;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(34, 197, 94, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Service Profit Banner in Payment Form (Small, discrete upfront banner) */
.service-profit-banner {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-right: 3px solid #16a34a;
    border-radius: 4px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.profit-badge-icon {
    width: 24px;
    height: 24px;
    border-radius: 0px !important;
    background-color: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profit-banner-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.profit-label {
    font-size: 0.62rem !important;
    color: var(--text-secondary);
}

.profit-value {
    font-size: 0.72rem !important;
    font-weight: 700;
    color: #16a34a;
}

/* Form screen styling */
.payment-form-container {
    background-color: var(--panel-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01);
}

.payment-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-input {
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background-color: var(--bg-light);
    color: var(--text-primary);
    padding: 0 14px;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
}

.form-input:focus {
    border-color: var(--accent);
    background-color: #fff;
    box-shadow: 0 0 8px rgba(211, 47, 47, 0.08);
}

.validation-hint {
    font-size: 0.72rem;
    color: var(--error);
    display: none;
    margin-top: 2px;
    font-weight: 600;
}

.validation-hint.error-active {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* Detected Governorate & Network Tag */
.detected-info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.detected-info-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(2, 132, 199, 0.08);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.25);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    animation: fadeIn 0.2s ease;
}

.detected-info-tag.network-tag {
    background-color: rgba(22, 163, 74, 0.08);
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.25);
}

.inline-info-banner {
    width: 100%;
    animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.btn-primary {
    height: 46px;
    background: linear-gradient(135deg, var(--accent), #ff5252);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.25);
    margin-top: 8px;
}

.btn-primary:active {
    transform: scale(0.98);
}

/* Receipt Card */
.receipt-card {
    background-color: rgba(46, 125, 50, 0.04);
    border: 1px solid rgba(46, 125, 50, 0.15);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.receipt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success);
    font-weight: 700;
    font-size: 0.9rem;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    border-bottom: 1px dashed var(--border-light);
    padding-bottom: 6px;
}

.update-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.update-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.update-loader-box {
    background-color: #ffffff;
    padding: 24px 20px;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    width: 80%;
    max-width: 280px;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.update-modal-overlay.active .update-loader-box {
    transform: scale(1);
}

.spinner-ring {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(211, 47, 47, 0.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spinSpinner 0.8s linear infinite;
}

@keyframes spinSpinner {
    to {
        transform: rotate(360deg);
    }
}

.update-status-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.update-subtext {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Floating Toast Notification at bottom */
.toast-notification {
    position: absolute;
    bottom: 76px;
    left: 20px;
    right: 20px;
    background-color: #000000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 250;
    animation: toastSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-icon {
    width: 22px;
    height: 22px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-message {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

@keyframes toastSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast-icon-error {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Inline Error Card */
.inline-error-card {
    background-color: var(--panel-light);
    border: 1.5px solid var(--accent-border);
    border-right: 4px solid var(--accent);
    border-radius: 8px;
    padding: 16px;
    margin-top: 18px;
    /* animation removed */
}

.inline-error-card .error-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 8px;
}

.inline-error-card .error-body {
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Cash Masr POS & Reports Styles */
.pos-status-box {
    background-color: var(--panel-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 0.75rem;
}

.pos-status-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

.status-badge-secure {
    background-color: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.reports-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-card {
    background-color: var(--panel-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report-service-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.report-status-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}

.report-status-success {
    background-color: rgba(46, 125, 50, 0.1);
    color: var(--success);
}

.report-status-failed {
    background-color: rgba(229,9,20,0.1);
    color: #c0392b;
}

.report-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.report-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-light);
}

.report-btn-action {
    flex: 1;
    background-color: var(--bg-light);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-btn-action:hover {
    background-color: var(--accent-light);
    border-color: var(--accent-border);
    color: var(--accent);
}


/* ==========================================================
   Account Profile, Notifications & POS Reports Styles
   ========================================================== */

/* Account Profile Screen */
.account-details-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-card {
    background-color: var(--panel-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.25);
}

.profile-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.profile-role {
    font-size: 0.75rem;
    color: var(--accent);
    background-color: var(--accent-light);
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 700;
    border: 1px solid var(--accent-border);
}

.info-list {
    background-color: var(--panel-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 4px 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 0.8rem;
}

.info-item:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
}

.info-item span {
    color: var(--text-secondary);
}

.info-item strong {
    color: var(--text-primary);
}

/* Notifications Center */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-item {
    background-color: var(--panel-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.notification-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.notification-body {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ==========================================
   Premium Mockup UI Elements (Cash Misr)
   ========================================== */

/* 1. Custom Header for Home Screen */
.home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    background-color: var(--panel-light);
    border-bottom: 1px solid var(--border-light);
    padding: 0 16px;
    z-index: 10;
    position: relative;
}

.home-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-avatar-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(229, 9, 20, 0.15);
    background-color: var(--bg-light);
}

.home-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-greeting {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.greeting-subtitle {
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin-bottom: 1px;
}

.greeting-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.home-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: var(--bg-light);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.home-icon-btn:active {
    transform: scale(0.95);
}

.notif-badge {
    width: 7px;
    height: 7px;
    background-color: var(--accent);
    border-radius: 50%;
    position: absolute;
    top: 9px;
    right: 10px;
    border: 1.5px solid #fff;
}

.home-brand-logo {
    width: 36px;
    height: 36px;
    background-color: rgba(229, 9, 20, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Premium Balance Card (Red Gradient) */
.premium-balance-card {
    background: linear-gradient(135deg, #880004 0%, #db0812 60%, #ff4b4b 100%);
    border-radius: 20px;
    margin: 16px 14px 8px 14px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(219, 8, 18, 0.18);
    color: #fff;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.premium-balance-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(219, 8, 18, 0.25);
}

.card-bg-graphics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.card-arrow-btn {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.2s, transform 0.2s;
}

.card-arrow-btn:hover {
    background-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

.card-top-info {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
    z-index: 2;
    position: relative;
}

.card-number-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.copy-card-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.copy-card-btn:hover {
    color: #fff;
}

.card-middle-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    margin-bottom: 4px;
    z-index: 2;
    position: relative;
}

.card-account-type {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.card-toggle-balance {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.card-toggle-balance:hover {
    color: #fff;
}

.card-bottom-info {
    z-index: 2;
    position: relative;
}

.card-balance-amount {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.card-balance-amount .currency {
    font-size: 1rem;
    font-weight: 600;
    margin-right: 3px;
}

/* 3. Top Services Grid Section */
.top-services-section {
    width: 100%;
    padding: 0 14px;
    margin-top: 14px;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.section-header-premium {
    margin-bottom: 12px;
    padding: 0 2px;
}

.section-title-premium {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-primary);
    border-right: 3px solid var(--accent);
    padding-right: 8px;
}

.top-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.service-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-grid-item:hover {
    transform: translateY(-2px);
}

.service-grid-item:active {
    transform: scale(0.95);
}

.service-icon-box {
    width: 52px;
    height: 52px;
    background-color: var(--panel-light);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-light);
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.service-icon-box svg {
    width: 22px;
    height: 22px;
}

.service-grid-item:hover .service-icon-box {
    background-color: rgba(229, 9, 20, 0.04);
    box-shadow: 0 6px 16px rgba(229, 9, 20, 0.08);
    border-color: rgba(229, 9, 20, 0.15);
}

.service-grid-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.service-grid-item:hover .service-grid-label {
    color: var(--text-primary);
}

/* 4. Quick Transfer Beneficiaries Scroll Section */
.beneficiary-section {
    width: 100%;
    padding: 0 14px;
    margin-top: 14px;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.beneficiaries-list-wrapper {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 2px 10px 2px;
    scrollbar-width: none;
    /* Firefox */
    -webkit-overflow-scrolling: touch;
}

.beneficiaries-list-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.beneficiary-avatar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.beneficiary-avatar-card:hover {
    transform: scale(1.03);
}

.beneficiary-avatar-card:active {
    transform: scale(0.95);
}

.avatar-circle-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    border: 1.5px solid var(--border-light);
    padding: 1.5px;
    background-color: var(--panel-light);
}

.avatar-circle-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.provider-badge {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: -1px;
    left: -1px;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Operators Badges Solid Colors */
.badge-vodafone {
    background-color: #e50914;
}

.badge-etisalat {
    background-color: #7ab800;
}

.badge-orange {
    background-color: #ff6600;
}

.badge-we {
    background-color: #5c2d91;
}

.beneficiary-name {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* 5. Recent Transactions Section */
.recent-transactions-section {
    margin: 14px 14px 24px 14px;
}

.recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 2px;
}

.see-all-link {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.see-all-link svg {
    transform: rotate(180deg);
}

.see-all-link:hover {
    opacity: 0.85;
}

.recent-transactions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--panel-light);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.transaction-item:hover {
    background-color: #fafafa;
    transform: scale(1.005);
}

.tx-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transaction-item.tx-success .tx-icon-box {
    background-color: rgba(46, 125, 50, 0.08);
    color: #2e7d32;
}

.transaction-item.tx-failed .tx-icon-box {
    background-color: rgba(198, 40, 40, 0.08);
    color: #c62828;
}

.tx-icon-box svg {
    width: 18px;
    height: 18px;
}

.tx-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.tx-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.tx-time {
    font-size: 0.62rem;
    color: var(--text-secondary);
}

.tx-amount {
    font-size: 0.82rem;
    font-weight: 800;
}

.tx-success-text {
    color: #2e7d32;
}

.tx-failed-text {
    color: #c62828;
}

/* 6. Modern Footer Navigation Bar */
.app-footer-nav {
    height: 64px;
    /* Safe area for iPhone notch/home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    background-color: var(--panel-light);
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: stretch;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.nav-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 8px 4px;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.nav-tab-btn.active {
    color: var(--accent);
}

/* Center deposit button — larger and distinct */
#nav-home {
    position: relative;
}

#nav-home .nav-tab-icon {
    width: 28px;
    height: 28px;
    background: var(--primary, #e50914);
    border-radius: 50%;
    padding: 6px;
    color: #fff;
    stroke: #fff;
    box-shadow: 0 3px 10px rgba(229, 9, 20, 0.35);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    box-sizing: content-box;
}

#nav-home:active .nav-tab-icon {
    transform: scale(0.92);
}

#nav-home span {
    color: var(--primary, #e50914);
    font-weight: 800;
}

.nav-tab-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.nav-tab-btn.active .nav-tab-icon {
    transform: scale(1.12);
}

.nav-tab-btn span {
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Unified Premium Header Styles */
.app-header-premium {
    height: 64px;
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 150;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
}

.header-profile-section {
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fadeIn 0.2s ease;
}

.header-back-section {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: fadeIn 0.2s ease;
}

.header-screen-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.header-actions-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Hide original app-bar replace with unified premium header */
header.app-bar {
    display: none !important;
}

/* Sharp Square Enforcement for All Company & Service Images */
.provider-logo,
.category-card-icon,
.category-icon-box,
.service-icon,
.company-logo,
.provider-item img,
.category-item img,
img.company-img,
img.service-img {
    border-radius: 0px !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Bottom nav is visible — mobile optimized */

.screens-container,
.app-main-container,
.app-screen {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* All Application Buttons Rounded 5px */
button,
.btn,
.btn-primary,
.btn-secondary,
.quick-action-btn,
.header-btn,
.back-btn,
.search-btn,
.request-service-btn,
.submit-request-btn,
.action-btn,
.toggle-balance-btn,
.filter-tab-btn,
.tab-btn,
.print-btn,
.qr-btn,
.share-btn,
.header-btn-circle,
input[type="button"],
input[type="submit"] {
    border-radius: 5px !important;
}

/* ── NFC Card Tap UI ─────────────────────────────── */
.nfc-tap-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 24px;
    margin: 8px 0 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    border: 2px dashed #90bfef;
    text-align: center;
    transition: background 0.4s, border-color 0.4s;
    overflow: hidden;
    position: relative;
}

.nfc-tap-block.nfc-success {
    background: linear-gradient(135deg, #edfaf3 0%, #d4f5e5 100%);
    border-color: #52c27e;
    border-style: solid;
}

.nfc-tap-block.nfc-error {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe4e4 100%);
    border-color: #f87171;
    border-style: solid;
}

.nfc-tap-block.nfc-error .nfc-anim-ring {
    background: rgba(229, 9, 20, 0.06);
    animation: none;
}

.nfc-tap-block.nfc-error .nfc-anim-ring::before,
.nfc-tap-block.nfc-error .nfc-anim-ring::after {
    display: none;
}

.nfc-tap-block.nfc-error .nfc-anim-ring-inner {
    color: #e50914;
    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.18);
}

.nfc-status-dot.error {
    background: #e50914;
    animation: none;
}

.nfc-error-msg {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: #c0392b;
    font-weight: 700;
    line-height: 1.6;
    max-width: 260px;
}

/* Animated ring */
.nfc-anim-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 16px;
    background: rgba(229, 9, 20, 0.07);
    animation: nfc-ring-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.nfc-anim-ring::before,
.nfc-anim-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(229, 9, 20, 0.25);
    animation: nfc-ripple 2s ease-out infinite;
}

.nfc-anim-ring::before {
    width: 120%;
    height: 120%;
    animation-delay: 0s;
}

.nfc-anim-ring::after {
    width: 145%;
    height: 145%;
    animation-delay: 0.5s;
}

.nfc-tap-block.nfc-success .nfc-anim-ring {
    background: rgba(82, 194, 126, 0.12);
    animation: none;
}

.nfc-tap-block.nfc-success .nfc-anim-ring::before,
.nfc-tap-block.nfc-success .nfc-anim-ring::after {
    display: none;
}

.nfc-anim-ring-inner {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.15);
    color: var(--primary, #e50914);
    z-index: 1;
}

.nfc-tap-block.nfc-success .nfc-anim-ring-inner {
    color: #52c27e;
    box-shadow: 0 4px 16px rgba(82, 194, 126, 0.2);
}

@keyframes nfc-ripple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes nfc-ring-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.15);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(229, 9, 20, 0);
    }
}

.nfc-tap-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 6px;
}

.nfc-tap-subtitle {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
    max-width: 260px;
}

.nfc-status-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.nfc-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}

.nfc-status-dot.pulsing {
    background: var(--primary, #e50914);
    animation: nfc-dot-blink 0.8s ease-in-out infinite;
}

.nfc-status-dot.success {
    background: #52c27e;
    animation: none;
}

@keyframes nfc-dot-blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

/* Simulate / demo button */
.nfc-simulate-btn {
    margin-top: 18px;
    padding: 9px 20px;
    border-radius: 5px !important;
    border: 1.5px solid var(--primary, #e50914);
    background: transparent;
    color: var(--primary, #e50914);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.nfc-simulate-btn:hover:not(:disabled) {
    background: var(--primary, #e50914);
    color: white;
}

.nfc-simulate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Amount field that appears after NFC read */
.nfc-amount-group {
    animation: slide-down 0.35s ease;
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* POS request button — used in NFC block and payment error card */
.pos-request-btn {
    margin-top: 14px;
    padding: 9px 22px;
    border-radius: 5px !important;
    border: 1.5px solid var(--primary, #e50914);
    background: var(--primary, #e50914);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    width: 100%;
}

.pos-request-btn:hover:not(:disabled) {
    opacity: 0.88;
}

.pos-request-btn:disabled {
    background: #94a3b8;
    border-color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Inline payment error card */
.inline-error-card {
    border-radius: 10px;
    border: 1.5px solid #fca5a5;
    overflow: hidden;
    background: #fff5f5;
}

.inline-error-header {
    background: #fee2e2;
    color: #b91c1c;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.9rem;
}

.inline-error-body {
    padding: 12px 14px;
    color: #7f1d1d;
    position: relative;
    margin-bottom: 16px;
    background: rgba(229, 9, 20, 0.07);
    animation: nfc-ring-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.nfc-anim-ring::before,
.nfc-anim-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(229, 9, 20, 0.25);
    animation: nfc-ripple 2s ease-out infinite;
}

.nfc-anim-ring::before {
    width: 120%;
    height: 120%;
    animation-delay: 0s;
}

.nfc-anim-ring::after {
    width: 145%;
    height: 145%;
    animation-delay: 0.5s;
}

.nfc-tap-block.nfc-success .nfc-anim-ring {
    background: rgba(82, 194, 126, 0.12);
    animation: none;
}

.nfc-tap-block.nfc-success .nfc-anim-ring::before,
.nfc-tap-block.nfc-success .nfc-anim-ring::after {
    display: none;
}

.nfc-anim-ring-inner {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.15);
    color: var(--primary, #e50914);
    z-index: 1;
}

.nfc-tap-block.nfc-success .nfc-anim-ring-inner {
    color: #52c27e;
    box-shadow: 0 4px 16px rgba(82, 194, 126, 0.2);
}

@keyframes nfc-ripple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes nfc-ring-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.15);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(229, 9, 20, 0);
    }
}

.nfc-tap-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 6px;
}

.nfc-tap-subtitle {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
    max-width: 260px;
}

.nfc-status-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.nfc-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}

.nfc-status-dot.pulsing {
    background: var(--primary, #e50914);
    animation: nfc-dot-blink 0.8s ease-in-out infinite;
}

.nfc-status-dot.success {
    background: #52c27e;
    animation: none;
}

@keyframes nfc-dot-blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

/* Simulate / demo button */
.nfc-simulate-btn {
    margin-top: 18px;
    padding: 9px 20px;
    border-radius: 5px !important;
    border: 1.5px solid var(--primary, #e50914);
    background: transparent;
    color: var(--primary, #e50914);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.nfc-simulate-btn:hover:not(:disabled) {
    background: var(--primary, #e50914);
    color: white;
}

.nfc-simulate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Amount field that appears after NFC read */
.nfc-amount-group {
    animation: slide-down 0.35s ease;
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* POS request button — used in NFC block and payment error card */
.pos-request-btn {
    margin-top: 14px;
    padding: 9px 22px;
    border-radius: 5px !important;
    border: 1.5px solid var(--primary, #e50914);
    background: var(--primary, #e50914);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    width: 100%;
}

.pos-request-btn:hover:not(:disabled) {
    opacity: 0.88;
}

.pos-request-btn:disabled {
    background: #94a3b8;
    border-color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Inline payment error card */
.inline-error-card {
    border-radius: 10px;
    border: 1.5px solid #fca5a5;
    overflow: hidden;
    background: #fff5f5;
}

.inline-error-header {
    background: #fee2e2;
    color: #b91c1c;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.9rem;
}

.inline-error-body {
    padding: 12px 14px;
    color: #7f1d1d;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.65;
}

.inline-error-body+.pos-request-btn {
    margin: 0 14px 14px;
    width: calc(100% - 28px);
}

/* Home Inline Search Input & Results */
.home-search-box {
    width: 100%;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-box-icon {
    position: absolute;
    right: 14px;
    pointer-events: none;
}

.home-search-input {
    width: 100%;
    height: 46px;
    padding: 0 42px 0 16px;
    border-radius: 10px;
    border: 1.5px solid var(--border-light);
    background: #ffffff;
    font-size: 0.86rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.home-search-input:focus {
    border-color: var(--primary, #e50914);
    box-shadow: 0 3px 12px rgba(229, 9, 20, 0.12);
}

.home-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-service-row {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.search-service-row:hover,
.search-service-row:active {
    background: #f8fafc;
    border-color: var(--primary, #e50914);
    transform: translateY(-1px);
}

.search-service-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-service-code {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary, #e50914);
    background: rgba(229, 9, 20, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    width: fit-content;
}

.search-service-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 2px;
}

.search-service-prov {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* No Service Result & Request Card */
.no-service-card {
    background: #ffffff;
    border: 1.5px dashed var(--border-light);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.no-service-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
}

.no-service-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.btn-request-service {
    margin-top: 6px;
    width: 100%;
    padding: 11px;
    border-radius: 8px;
    border: none;
    background: var(--primary, #e50914);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-request-service:active {
    opacity: 0.9;
}

/* Account Panel Quick Action Buttons */
.acc-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: #f8fafc;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
    outline: none;
}

.acc-action-btn:hover,
.acc-action-btn:active {
    background: #ffffff;
    border-color: var(--primary, #e50914);
    color: var(--primary, #e50914);
    transform: translateY(-1px);
}

.acc-btn-logout {
    background: #fff5f5;
    border-color: #fca5a5;
    color: #dc2626;
}

.acc-btn-logout:hover,
.acc-btn-logout:active {
    background: #fee2e2;
    border-color: #f87171;
    color: #b91c1c;
}

/* Clear Search Icon Button */
.search-clear-icon-btn {
    position: absolute;
    left: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    padding: 0;
    outline: none;
}

.search-clear-icon-btn:hover,
.search-clear-icon-btn:active {
    background: var(--primary, #e50914);
    color: #ffffff;
}

/* Account Info & Password Edit Form Boxes */
.acc-section-box {
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 14px;
}

.acc-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-light);
}

.acc-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acc-field-group label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.acc-form-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: #ffffff;
    font-size: 0.84rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.acc-form-input:focus {
    border-color: var(--primary, #e50914);
}

.btn-acc-save {
    margin-top: 6px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: #1e293b;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-acc-save:hover,
.btn-acc-save:active {
    background: #0f172a;
}

.btn-acc-change-pwd {
    background: #0284c7;
}

.btn-acc-change-pwd:hover,
.btn-acc-change-pwd:active {
    background: #0369a1;
}

/* Red Brand Theme Action Buttons Palette */
.color-btn-deposit,
.color-btn-withdraw,
.color-btn-reports,
.color-btn-salafny,
.color-btn-shajarati,
.color-btn-wakeely {
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.25) !important;
}

.color-btn-logout {
    background: linear-gradient(135deg, #7f1d1d 0%, #450a0a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(127, 29, 29, 0.25) !important;
}

border: none !important;
color: #ffffff !important;
box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
}

.acc-action-btn[class*="color-btn-"]:hover,
.acc-action-btn[class*="color-btn-"]:active {
    opacity: 0.92;
    transform: translateY(-2px);
}

/* Red Spacing Gap above Balance Card */
.home-top-red-gap {
    width: 100%;
    height: 14px;
    background: #c60812;
}

/* Horizontal Offers Banner Slider (Full Width + Auto Slide) */
.home-offers-section {
    padding: 10px 14px;
    width: 100%;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    box-sizing: border-box;
}

.offers-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Firefox */
    border-radius: 14px;
}

.offers-carousel::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.offer-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-height: 115px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 14px;
    padding: 18px 20px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Dots Indicators */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background 0.3s, width 0.3s;
}

.carousel-dot.active {
    background: var(--primary, #e50914);
    width: 18px;
    border-radius: 10px;
}

.offer-card-1 {
    background: linear-gradient(135deg, #e50914 0%, #99000d 100%);
}

.offer-card-2 {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.offer-card-3 {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.offer-badge {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(4px);
    padding: 3px 10px;
    border-radius: 20px;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.offer-badge.badge-nfc {
    background: rgba(82, 194, 126, 0.3);
    color: #52c27e;
}

.offer-badge.badge-gold {
    background: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.offer-title {
    font-size: 0.96rem;
    font-weight: 900;
    margin-top: 2px;
}

.offer-subtitle {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    line-height: 1.4;
}

.offer-action-text {
    font-size: 0.75rem;
    font-weight: 800;
    margin-top: 6px;
    color: #ffffff;
    opacity: 0.9;
}

/* Distinct White "عرض الكل" Show All Card Style */
.category-show-all-card {
    background: #ffffff !important;
    border: 2px solid var(--primary, #e50914) !important;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.12) !important;
}

.category-show-all-card .category-card-center-text {
    color: var(--primary, #e50914) !important;
    font-weight: 800 !important;
    font-size: 0.76rem !important;
    white-space: nowrap !important;
    word-break: normal !important;
    text-shadow: none !important;
}

.category-show-all-card .category-watermark-icon {
    color: rgba(229, 9, 20, 0.18) !important;
}

.category-show-all-card:hover,
.category-show-all-card:active {
    background: #fff5f5 !important;
    transform: translateY(-2px);
}

/* Header Bar Spinner Loader */
.header-title-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: header-spin 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes header-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Pull to Refresh Indicator Area */
.ptr-indicator {
    width: 100%;
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: height 0.2s ease;
}

.ptr-indicator.active {
    height: 40px;
}

.ptr-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(229, 9, 20, 0.2);
    border-radius: 50%;
    border-top-color: var(--primary, #e50914);
    animation: header-spin 0.6s linear infinite;
}

/* Deposit & Withdraw Option Cards */
.deposit-option-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.deposit-option-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary, #e50914);
    box-shadow: 0 6px 16px rgba(229, 9, 20, 0.1);
}

.deposit-option-card:active {
    transform: scale(0.98);
}

.dep-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dep-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dep-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary);
}

.dep-sub {
    font-size: 0.76rem;
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1.3;
}

/* Paymob Checkout & Success Custom Styles */
.checkout-focus:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    background-color: #ffffff !important;
}

@keyframes scale-up-success {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.checkout-card input {
    transition: all 0.2s ease-in-out;
}







width: 100%;







padding: 0 14px;







margin-top: 14px;







margin-bottom: 6px;







box-sizing: border-box;







}















.beneficiaries-list-wrapper {







    display: flex;







    gap: 12px;







    overflow-x: auto;







    padding: 6px 2px 10px 2px;







    scrollbar-width: none;
    /* Firefox */







    -webkit-overflow-scrolling: touch;







}















.beneficiaries-list-wrapper::-webkit-scrollbar {







    display: none;
    /* Chrome/Safari */







}















.beneficiary-avatar-card {







    display: flex;







    flex-direction: column;







    align-items: center;







    gap: 6px;







    flex-shrink: 0;







    cursor: pointer;







    transition: transform 0.2s ease;







}















.beneficiary-avatar-card:hover {







    transform: scale(1.03);







}















.beneficiary-avatar-card:active {







    transform: scale(0.95);







}















.avatar-circle-wrapper {







    width: 48px;







    height: 48px;







    border-radius: 50%;







    position: relative;







    border: 1.5px solid var(--border-light);







    padding: 1.5px;







    background-color: var(--panel-light);







}















.avatar-circle-wrapper img {







    width: 100%;







    height: 100%;







    border-radius: 50%;







    object-fit: cover;







}















.provider-badge {







    width: 15px;







    height: 15px;







    border-radius: 50%;







    position: absolute;







    bottom: -1px;







    left: -1px;







    border: 1.5px solid #fff;







    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);







}















/* Operators Badges Solid Colors */







.badge-vodafone {







    background-color: #e50914;







}















.badge-etisalat {







    background-color: #7ab800;







}















.badge-orange {







    background-color: #ff6600;







}















.badge-we {







    background-color: #5c2d91;







}















.beneficiary-name {







    font-size: 0.68rem;







    font-weight: 700;







    color: var(--text-primary);







}















/* 5. Recent Transactions Section */







.recent-transactions-section {







    margin: 14px 14px 24px 14px;







}















.recent-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: 12px;







    padding: 0 2px;







}















.see-all-link {







    font-size: 0.72rem;







    font-weight: 700;







    color: var(--accent);







    background: transparent;







    border: none;







    display: flex;







    align-items: center;







    gap: 4px;







    cursor: pointer;







}















.see-all-link svg {







    transform: rotate(180deg);







}















.see-all-link:hover {







    opacity: 0.85;







}















.recent-transactions-list {







    display: flex;







    flex-direction: column;







    gap: 8px;







}















.transaction-item {







    display: flex;







    align-items: center;







    gap: 12px;







    background-color: var(--panel-light);







    padding: 10px 12px;







    border-radius: 12px;







    border: 1px solid var(--border-light);







    transition: background-color 0.2s ease, transform 0.2s ease;







}















.transaction-item:hover {







    background-color: #fafafa;







    transform: scale(1.005);







}















.tx-icon-box {







    width: 36px;







    height: 36px;







    border-radius: 10px;







    display: flex;







    align-items: center;







    justify-content: center;







}















.transaction-item.tx-success .tx-icon-box {







    background-color: rgba(46, 125, 50, 0.08);







    color: #2e7d32;







}















.transaction-item.tx-failed .tx-icon-box {







    background-color: rgba(198, 40, 40, 0.08);







    color: #c62828;







}















.tx-icon-box svg {







    width: 18px;







    height: 18px;







}















.tx-details {







    flex: 1;







    display: flex;







    flex-direction: column;







    text-align: right;







}















.tx-title {







    font-size: 0.78rem;







    font-weight: 700;







    color: var(--text-primary);







    margin-bottom: 2px;







}















.tx-time {







    font-size: 0.62rem;







    color: var(--text-secondary);







}















.tx-amount {







    font-size: 0.82rem;







    font-weight: 800;







}















.tx-success-text {







    color: #2e7d32;







}















.tx-failed-text {







    color: #c62828;







}















/* 6. Modern Footer Navigation Bar */







.app-footer-nav {







    height: 64px;







    /* Safe area for iPhone notch/home indicator */







    padding-bottom: env(safe-area-inset-bottom, 0px);







    height: calc(64px + env(safe-area-inset-bottom, 0px));







    background-color: var(--panel-light);







    border-top: 1px solid var(--border-light);







    display: flex;







    align-items: stretch;







    position: sticky;







    bottom: 0;







    left: 0;







    right: 0;







    z-index: 100;







    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);







    flex-shrink: 0;







}















.nav-tab-btn {







    flex: 1;







    background: transparent;







    border: none;







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    gap: 4px;







    color: var(--text-secondary);







    cursor: pointer;







    transition: color 0.2s ease;







    padding: 8px 4px;







    min-width: 0;







    -webkit-tap-highlight-color: transparent;







    touch-action: manipulation;







}















.nav-tab-btn.active {







    color: var(--accent);







}















/* Center deposit button — larger and distinct */







#nav-home {







    position: relative;







}















#nav-home .nav-tab-icon {







    width: 28px;







    height: 28px;







    background: var(--primary, #e50914);







    border-radius: 50%;







    padding: 6px;







    color: #fff;







    stroke: #fff;







    box-shadow: 0 3px 10px rgba(229, 9, 20, 0.35);







    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;







    box-sizing: content-box;







}















#nav-home:active .nav-tab-icon {







    transform: scale(0.92);







}















#nav-home span {







    color: var(--primary, #e50914);







    font-weight: 800;







}















.nav-tab-icon {







    width: 24px;







    height: 24px;







    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);







    flex-shrink: 0;







}















.nav-tab-btn.active .nav-tab-icon {







    transform: scale(1.12);







}















.nav-tab-btn span {







    font-size: 0.68rem;







    font-weight: 700;







    white-space: nowrap;







    overflow: hidden;







    text-overflow: ellipsis;







    max-width: 100%;







}















/* Unified Premium Header Styles */







.app-header-premium {







    height: 64px;







    background-color: rgba(255, 255, 255, 0.88);







    backdrop-filter: blur(14px);







    -webkit-backdrop-filter: blur(14px);







    border-bottom: 1px solid rgba(0, 0, 0, 0.06);







    display: flex;







    align-items: center;







    justify-content: space-between;







    padding: 0 16px;







    position: sticky;







    top: 0;







    z-index: 150;







    width: 100%;







    box-sizing: border-box;







    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);







}















.header-profile-section {







    display: flex;







    align-items: center;







    gap: 10px;







    animation: fadeIn 0.2s ease;







}















.header-back-section {







    display: flex;







    align-items: center;







    gap: 12px;







    animation: fadeIn 0.2s ease;







}















.header-screen-title {







    font-size: 0.95rem;







    font-weight: 800;







    color: var(--text-primary);







    margin: 0;







}















.header-actions-section {







    display: flex;







    align-items: center;







    gap: 10px;







}















/* Hide original app-bar replace with unified premium header */







header.app-bar {







    display: none !important;







}















/* Sharp Square Enforcement for All Company & Service Images */







.provider-logo,







.category-card-icon,







.category-icon-box,







.service-icon,







.company-logo,







.provider-item img,







.category-item img,







img.company-img,







img.service-img {







    border-radius: 0px !important;







    aspect-ratio: 1 / 1;







    object-fit: contain;







}















/* Bottom nav is visible — mobile optimized */















.screens-container,







.app-main-container,







.app-screen {







    padding-bottom: 0 !important;







    margin-bottom: 0 !important;







}















/* All Application Buttons Rounded 5px */







button,







.btn,







.btn-primary,







.btn-secondary,







.quick-action-btn,







.header-btn,







.back-btn,







.search-btn,







.request-service-btn,







.submit-request-btn,







.action-btn,







.toggle-balance-btn,







.filter-tab-btn,







.tab-btn,







.print-btn,







.qr-btn,







.share-btn,







.header-btn-circle,







input[type="button"],







input[type="submit"] {







    border-radius: 5px !important;







}















/* ── NFC Card Tap UI ─────────────────────────────── */







.nfc-tap-block {







    display: flex;







    flex-direction: column;







    align-items: center;







    padding: 32px 20px 24px;







    margin: 8px 0 12px;







    border-radius: 16px;







    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);







    border: 2px dashed #90bfef;







    text-align: center;







    transition: background 0.4s, border-color 0.4s;







    overflow: hidden;







    position: relative;







}















.nfc-tap-block.nfc-success {







    background: linear-gradient(135deg, #edfaf3 0%, #d4f5e5 100%);







    border-color: #52c27e;







    border-style: solid;







}















.nfc-tap-block.nfc-error {







    background: linear-gradient(135deg, #fff5f5 0%, #ffe4e4 100%);







    border-color: #f87171;







    border-style: solid;







}















.nfc-tap-block.nfc-error .nfc-anim-ring {







    background: rgba(229, 9, 20, 0.06);







    animation: none;







}















.nfc-tap-block.nfc-error .nfc-anim-ring::before,







.nfc-tap-block.nfc-error .nfc-anim-ring::after {







    display: none;







}















.nfc-tap-block.nfc-error .nfc-anim-ring-inner {







    color: #e50914;







    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.18);







}















.nfc-status-dot.error {







    background: #e50914;







    animation: none;







}















.nfc-error-msg {







    display: block;







    margin-top: 6px;







    font-size: 0.82rem;







    color: #c0392b;







    font-weight: 700;







    line-height: 1.6;







    max-width: 260px;







}















/* Animated ring */







.nfc-anim-ring {







    width: 100px;







    height: 100px;







    border-radius: 50%;







    display: flex;







    align-items: center;







    justify-content: center;







    position: relative;







    margin-bottom: 16px;







    background: rgba(229, 9, 20, 0.07);







    animation: nfc-ring-pulse 2s ease-in-out infinite;







    flex-shrink: 0;







}















.nfc-anim-ring::before,







.nfc-anim-ring::after {







    content: '';







    position: absolute;







    border-radius: 50%;







    border: 2px solid rgba(229, 9, 20, 0.25);







    animation: nfc-ripple 2s ease-out infinite;







}















.nfc-anim-ring::before {







    width: 120%;







    height: 120%;







    animation-delay: 0s;







}















.nfc-anim-ring::after {







    width: 145%;







    height: 145%;







    animation-delay: 0.5s;







}















.nfc-tap-block.nfc-success .nfc-anim-ring {







    background: rgba(82, 194, 126, 0.12);







    animation: none;







}















.nfc-tap-block.nfc-success .nfc-anim-ring::before,







.nfc-tap-block.nfc-success .nfc-anim-ring::after {







    display: none;







}















.nfc-anim-ring-inner {







    width: 70px;







    height: 70px;







    border-radius: 50%;







    background: white;







    display: flex;







    align-items: center;







    justify-content: center;







    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.15);







    color: var(--primary, #e50914);







    z-index: 1;







}















.nfc-tap-block.nfc-success .nfc-anim-ring-inner {







    color: #52c27e;







    box-shadow: 0 4px 16px rgba(82, 194, 126, 0.2);







}















@keyframes nfc-ripple {







    0% {
        transform: scale(1);
        opacity: 0.6;
    }







    100% {
        transform: scale(1.3);
        opacity: 0;
    }







}















@keyframes nfc-ring-pulse {







    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.15);
    }







    50% {
        box-shadow: 0 0 0 10px rgba(229, 9, 20, 0);
    }







}















.nfc-tap-title {







    font-size: 1.05rem;







    font-weight: 800;







    color: #1a202c;







    margin-bottom: 6px;







}















.nfc-tap-subtitle {







    font-size: 0.82rem;







    color: #64748b;







    line-height: 1.5;







    max-width: 260px;







}















.nfc-status-label {







    display: flex;







    align-items: center;







    gap: 7px;







    margin-top: 14px;







    font-size: 0.82rem;







    color: #64748b;







    font-weight: 600;







}















.nfc-status-dot {







    width: 9px;







    height: 9px;







    border-radius: 50%;







    background: #94a3b8;







    flex-shrink: 0;







}















.nfc-status-dot.pulsing {







    background: var(--primary, #e50914);







    animation: nfc-dot-blink 0.8s ease-in-out infinite;







}















.nfc-status-dot.success {







    background: #52c27e;







    animation: none;







}















@keyframes nfc-dot-blink {







    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }







    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }







}















/* Simulate / demo button */







.nfc-simulate-btn {







    margin-top: 18px;







    padding: 9px 20px;







    border-radius: 5px !important;







    border: 1.5px solid var(--primary, #e50914);







    background: transparent;







    color: var(--primary, #e50914);







    font-size: 0.82rem;







    font-weight: 700;







    cursor: pointer;







    transition: background 0.2s, color 0.2s;







}















.nfc-simulate-btn:hover:not(:disabled) {







    background: var(--primary, #e50914);







    color: white;







}















.nfc-simulate-btn:disabled {







    opacity: 0.5;







    cursor: not-allowed;







}















/* Amount field that appears after NFC read */







.nfc-amount-group {







    animation: slide-down 0.35s ease;







}















@keyframes slide-down {







    from {
        opacity: 0;
        transform: translateY(-10px);
    }







    to {
        opacity: 1;
        transform: translateY(0);
    }







}















/* POS request button — used in NFC block and payment error card */







.pos-request-btn {







    margin-top: 14px;







    padding: 9px 22px;







    border-radius: 5px !important;







    border: 1.5px solid var(--primary, #e50914);







    background: var(--primary, #e50914);







    color: #fff;







    font-size: 0.84rem;







    font-weight: 700;







    cursor: pointer;







    transition: opacity 0.2s;







    width: 100%;







}















.pos-request-btn:hover:not(:disabled) {







    opacity: 0.88;







}















.pos-request-btn:disabled {







    background: #94a3b8;







    border-color: #94a3b8;







    cursor: not-allowed;







    opacity: 0.8;







}















/* Inline payment error card */







.inline-error-card {







    border-radius: 10px;







    border: 1.5px solid #fca5a5;







    overflow: hidden;







    background: #fff5f5;







}















.inline-error-header {







    background: #fee2e2;







    color: #b91c1c;







    padding: 11px 14px;







    display: flex;







    align-items: center;







    gap: 8px;







    font-weight: 800;







    font-size: 0.9rem;







}















.inline-error-body {







    padding: 12px 14px;







    color: #7f1d1d;







    font-size: 0.88rem;







    font-weight: 600;







    line-height: 1.65;







}















.nfc-anim-ring::before,







.nfc-tap-block.nfc-error .nfc-anim-ring::after {







    display: none;







}















.nfc-tap-block.nfc-error .nfc-anim-ring-inner {







    color: #e50914;







    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.18);







}















.nfc-status-dot.error {







    background: #e50914;







    animation: none;







}















.nfc-error-msg {







    display: block;







    margin-top: 6px;







    font-size: 0.82rem;







    color: #c0392b;







    font-weight: 700;







    line-height: 1.6;







    max-width: 260px;







}















/* Animated ring */







.nfc-anim-ring {







    width: 100px;







    height: 100px;







    border-radius: 50%;







    display: flex;







    align-items: center;







    justify-content: center;







    position: relative;







    margin-bottom: 16px;







    background: rgba(229, 9, 20, 0.07);







    animation: nfc-ring-pulse 2s ease-in-out infinite;







    flex-shrink: 0;







}















.nfc-anim-ring::before,







.nfc-anim-ring::after {







    content: '';







    position: absolute;







    border-radius: 50%;







    border: 2px solid rgba(229, 9, 20, 0.25);







    animation: nfc-ripple 2s ease-out infinite;







}















.nfc-anim-ring::before {







    width: 120%;







    height: 120%;







    animation-delay: 0s;







}















.nfc-anim-ring::after {







    width: 145%;







    height: 145%;







    animation-delay: 0.5s;







}















.nfc-tap-block.nfc-success .nfc-anim-ring {







    background: rgba(82, 194, 126, 0.12);







    animation: none;







}















.nfc-tap-block.nfc-success .nfc-anim-ring::before,







.nfc-tap-block.nfc-success .nfc-anim-ring::after {







    display: none;







}















.nfc-anim-ring-inner {







    width: 70px;







    height: 70px;







    border-radius: 50%;







    background: white;







    display: flex;







    align-items: center;







    justify-content: center;







    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.15);







    color: var(--primary, #e50914);







    z-index: 1;







}















.nfc-tap-block.nfc-success .nfc-anim-ring-inner {







    color: #52c27e;







    box-shadow: 0 4px 16px rgba(82, 194, 126, 0.2);







}















@keyframes nfc-ripple {







    0% {
        transform: scale(1);
        opacity: 0.6;
    }







    100% {
        transform: scale(1.3);
        opacity: 0;
    }







}















@keyframes nfc-ring-pulse {







    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.15);
    }







    50% {
        box-shadow: 0 0 0 10px rgba(229, 9, 20, 0);
    }







}















.nfc-tap-title {







    font-size: 1.05rem;







    font-weight: 800;







    color: #1a202c;







    margin-bottom: 6px;







}















.nfc-tap-subtitle {







    font-size: 0.82rem;







    color: #64748b;







    line-height: 1.5;







    max-width: 260px;







}















.nfc-status-label {







    display: flex;







    align-items: center;







    gap: 7px;







    margin-top: 14px;







    font-size: 0.82rem;







    color: #64748b;







    font-weight: 600;







}















.nfc-status-dot {







    width: 9px;







    height: 9px;







    border-radius: 50%;







    background: #94a3b8;







    flex-shrink: 0;







}















.nfc-status-dot.pulsing {







    background: var(--primary, #e50914);







    animation: nfc-dot-blink 0.8s ease-in-out infinite;







}















.nfc-status-dot.success {







    background: #52c27e;







    animation: none;







}















@keyframes nfc-dot-blink {







    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }







    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }







}















/* Simulate / demo button */







.nfc-simulate-btn {







    margin-top: 18px;







    padding: 9px 20px;







    border-radius: 5px !important;







    border: 1.5px solid var(--primary, #e50914);







    background: transparent;







    color: var(--primary, #e50914);







    font-size: 0.82rem;







    font-weight: 700;







    cursor: pointer;







    transition: background 0.2s, color 0.2s;







}















.nfc-simulate-btn:hover:not(:disabled) {







    background: var(--primary, #e50914);







    color: white;







}















.nfc-simulate-btn:disabled {







    opacity: 0.5;







    cursor: not-allowed;







}















/* Amount field that appears after NFC read */







.nfc-amount-group {







    animation: slide-down 0.35s ease;







}















@keyframes slide-down {







    from {
        opacity: 0;
        transform: translateY(-10px);
    }







    to {
        opacity: 1;
        transform: translateY(0);
    }







}















/* POS request button — used in NFC block and payment error card */







.pos-request-btn {







    margin-top: 14px;







    padding: 9px 22px;







    border-radius: 5px !important;







    border: 1.5px solid var(--primary, #e50914);







    background: var(--primary, #e50914);







    color: #fff;







    font-size: 0.84rem;







    font-weight: 700;







    cursor: pointer;







    transition: opacity 0.2s;







    width: 100%;







}















.pos-request-btn:hover:not(:disabled) {







    .nfc-tap-block.nfc-error .nfc-anim-ring::after {







        display: none;







    }















    .nfc-tap-block.nfc-error .nfc-anim-ring-inner {







        color: #e50914;







        box-shadow: 0 4px 16px rgba(229, 9, 20, 0.18);







    }















    .nfc-status-dot.error {







        background: #e50914;







        animation: none;







    }















    .nfc-error-msg {







        display: block;







        margin-top: 6px;







        font-size: 0.82rem;







        color: #c0392b;







        font-weight: 700;







        line-height: 1.6;







        max-width: 260px;







    }















    /* Animated ring */







    .nfc-anim-ring {







        width: 100px;







        height: 100px;







        border-radius: 50%;







        display: flex;







        align-items: center;







        justify-content: center;







        position: relative;







        margin-bottom: 16px;







        background: rgba(229, 9, 20, 0.07);







        animation: nfc-ring-pulse 2s ease-in-out infinite;







        flex-shrink: 0;







    }















    .nfc-anim-ring::before,







    .nfc-anim-ring::after {







        content: '';







        position: absolute;







        border-radius: 50%;







        border: 2px solid rgba(229, 9, 20, 0.25);







        animation: nfc-ripple 2s ease-out infinite;







    }















    .nfc-anim-ring::before {







        width: 120%;







        height: 120%;







        animation-delay: 0s;







    }















    .nfc-anim-ring::after {







        width: 145%;







        height: 145%;







        animation-delay: 0.5s;







    }















    .nfc-tap-block.nfc-success .nfc-anim-ring {







        background: rgba(82, 194, 126, 0.12);







        animation: none;







    }















    .nfc-tap-block.nfc-success .nfc-anim-ring::before,







    .nfc-tap-block.nfc-success .nfc-anim-ring::after {







        display: none;







    }















    .nfc-anim-ring-inner {







        width: 70px;







        height: 70px;







        border-radius: 50%;







        background: white;







        display: flex;







        align-items: center;







        justify-content: center;







        box-shadow: 0 4px 16px rgba(229, 9, 20, 0.15);







        color: var(--primary, #e50914);







        z-index: 1;







    }















    .nfc-tap-block.nfc-success .nfc-anim-ring-inner {







        color: #52c27e;







        box-shadow: 0 4px 16px rgba(82, 194, 126, 0.2);







    }















    @keyframes nfc-ripple {







        0% {
            transform: scale(1);
            opacity: 0.6;
        }







        100% {
            transform: scale(1.3);
            opacity: 0;
        }







    }















    @keyframes nfc-ring-pulse {







        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.15);
        }







        50% {
            box-shadow: 0 0 0 10px rgba(229, 9, 20, 0);
        }







    }















    .nfc-tap-title {







        font-size: 1.05rem;







        font-weight: 800;







        color: #1a202c;







        margin-bottom: 6px;







    }















    .nfc-tap-subtitle {







        font-size: 0.82rem;







        color: #64748b;







        line-height: 1.5;







        max-width: 260px;







    }















    .nfc-status-label {







        display: flex;







        align-items: center;







        gap: 7px;







        margin-top: 14px;







        font-size: 0.82rem;







        color: #64748b;







        font-weight: 600;







    }















    .nfc-status-dot {







        width: 9px;







        height: 9px;







        border-radius: 50%;







        background: #94a3b8;







        flex-shrink: 0;







    }















    .nfc-status-dot.pulsing {







        background: var(--primary, #e50914);







        animation: nfc-dot-blink 0.8s ease-in-out infinite;







    }















    .nfc-status-dot.success {







        background: #52c27e;







        animation: none;







    }















    @keyframes nfc-dot-blink {







        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }







        50% {
            opacity: 0.4;
            transform: scale(0.7);
        }







    }















    /* Simulate / demo button */







    .nfc-simulate-btn {







        margin-top: 18px;







        padding: 9px 20px;







        border-radius: 5px !important;







        border: 1.5px solid var(--primary, #e50914);







        background: transparent;







        color: var(--primary, #e50914);







        font-size: 0.82rem;







        font-weight: 700;







        cursor: pointer;







        transition: background 0.2s, color 0.2s;







    }















    .nfc-simulate-btn:hover:not(:disabled) {







        background: var(--primary, #e50914);







        color: white;







    }















    .nfc-simulate-btn:disabled {







        opacity: 0.5;







        cursor: not-allowed;







    }















    /* Amount field that appears after NFC read */







    .nfc-amount-group {







        animation: slide-down 0.35s ease;







    }















    @keyframes slide-down {







        from {
            opacity: 0;
            transform: translateY(-10px);
        }







        to {
            opacity: 1;
            transform: translateY(0);
        }







    }















    /* POS request button — used in NFC block and payment error card */







    .pos-request-btn {







        margin-top: 14px;







        padding: 9px 22px;







        border-radius: 5px !important;







        border: 1.5px solid var(--primary, #e50914);







        background: var(--primary, #e50914);







        color: #fff;







        font-size: 0.84rem;







        font-weight: 700;







        cursor: pointer;







        transition: opacity 0.2s;







        width: 100%;







    }















    .pos-request-btn:hover:not(:disabled) {







        opacity: 0.88;







    }















    .pos-request-btn:disabled {







        background: #94a3b8;







        border-color: #94a3b8;







        cursor: not-allowed;







        opacity: 0.8;







    }















    /* Inline payment error card */







    .inline-error-card {







        border-radius: 10px;







        border: 1.5px solid #fca5a5;







        overflow: hidden;







        background: #fff5f5;







    }















    .inline-error-header {







        background: #fee2e2;







        color: #b91c1c;







        padding: 11px 14px;







        display: flex;







        align-items: center;







        gap: 8px;







        font-weight: 800;







        font-size: 0.9rem;







    }















    .inline-error-body {







        padding: 12px 14px;







        color: #7f1d1d;







        font-size: 0.88rem;







        font-weight: 600;







        line-height: 1.65;







    }















    .inline-error-body+.pos-request-btn {







        margin: 0 14px 14px;







        width: calc(100% - 28px);







    }















    /* Home Inline Search Input & Results */







    .home-search-box {







        width: 100%;







    }















    .search-input-wrapper {







        position: relative;







        display: flex;







        align-items: center;







        width: 100%;







    }















    .search-box-icon {







        position: absolute;







        right: 14px;







        pointer-events: none;







    }















    .home-search-input {







        width: 100%;







        height: 46px;







        padding: 0 42px 0 16px;







        border-radius: 10px;







        border: 1.5px solid var(--border-light);







        background: #ffffff;







        font-size: 0.86rem;







        font-family: inherit;







        font-weight: 600;







        color: var(--text-primary);







        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);







        outline: none;







        transition: border-color 0.2s, box-shadow 0.2s;







        box-sizing: border-box;







    }















    .home-search-input:focus {







        border-color: var(--primary, #e50914);







        box-shadow: 0 3px 12px rgba(229, 9, 20, 0.12);







    }















    .home-search-results-list {







        display: flex;







        flex-direction: column;







        gap: 10px;







    }















    .search-service-row {







        background: #ffffff;







        border: 1px solid var(--border-light);







        border-radius: 10px;







        padding: 12px 14px;







        display: flex;







        align-items: center;







        justify-content: space-between;







        cursor: pointer;







        transition: background 0.2s, border-color 0.2s, transform 0.15s;







        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);







    }















    .search-service-row:hover,







    .search-service-row:active {







        background: #f8fafc;







        border-color: var(--primary, #e50914);







        transform: translateY(-1px);







    }















    .search-service-info {







        display: flex;







        flex-direction: column;







        gap: 2px;







    }















    .search-service-code {







        font-size: 0.72rem;







        font-weight: 700;







        color: var(--primary, #e50914);







        background: rgba(229, 9, 20, 0.08);







        padding: 2px 8px;







        border-radius: 4px;







        width: fit-content;







    }















    .search-service-name {







        font-size: 0.88rem;







        font-weight: 800;







        color: var(--text-primary);







        margin-top: 2px;







    }















    .search-service-prov {







        font-size: 0.75rem;







        color: var(--text-secondary);







        font-weight: 600;







    }















    /* No Service Result & Request Card */







    .no-service-card {







        background: #ffffff;







        border: 1.5px dashed var(--border-light);







        border-radius: 12px;







        padding: 20px 16px;







        text-align: center;







        display: flex;







        flex-direction: column;







        align-items: center;







        gap: 10px;







        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);







    }















    .no-service-header {







        display: flex;







        align-items: center;







        gap: 8px;







        font-size: 0.95rem;







        font-weight: 800;







        color: var(--text-primary);







    }















    .no-service-desc {







        font-size: 0.82rem;







        color: var(--text-secondary);







        line-height: 1.5;







        margin: 0;







    }















    .btn-request-service {







        margin-top: 6px;







        width: 100%;







        padding: 11px;







        border-radius: 8px;







        border: none;







        background: var(--primary, #e50914);







        color: #ffffff;







        font-size: 0.85rem;







        font-weight: 800;







        cursor: pointer;







        transition: opacity 0.2s;







    }















    .btn-request-service:active {







        opacity: 0.9;







    }















    /* Account Panel Quick Action Buttons */







    .acc-action-btn {







        display: flex;







        align-items: center;







        justify-content: center;







        gap: 8px;







        padding: 12px 10px;







        border-radius: 8px;







        border: 1px solid var(--border-light);







        background: #f8fafc;







        color: var(--text-primary);







        font-size: 0.84rem;







        font-weight: 700;







        cursor: pointer;







        transition: background 0.2s, border-color 0.2s, transform 0.1s;







        outline: none;







    }



    .acc-action-btn:disabled {

        background: #cbd5e1 !important;

        border-color: #cbd5e1 !important;

        color: #94a3b8 !important;

        cursor: not-allowed !important;

        opacity: 0.7 !important;

        transform: none !important;

        box-shadow: none !important;

    }















    .acc-action-btn:hover,







    .acc-action-btn:active {







        background: #ffffff;







        border-color: var(--primary, #e50914);







        color: var(--primary, #e50914);







        transform: translateY(-1px);







    }















    .acc-btn-logout {







        background: #fff5f5;







        border-color: #fca5a5;







        color: #dc2626;







    }















    .acc-btn-logout:hover,







    .acc-btn-logout:active {







        background: #fee2e2;







        border-color: #f87171;







        color: #b91c1c;







    }















    /* Clear Search Icon Button */







    .search-clear-icon-btn {







        position: absolute;







        left: 10px;







        width: 26px;







        height: 26px;







        border-radius: 50%;







        border: none;







        background: #e2e8f0;







        color: #64748b;







        display: flex;







        align-items: center;







        justify-content: center;







        cursor: pointer;







        transition: background 0.2s, color 0.2s;







        padding: 0;







        outline: none;







    }















    .search-clear-icon-btn:hover,







    .search-clear-icon-btn:active {







        background: var(--primary, #e50914);







        color: #ffffff;







    }















    /* Account Info & Password Edit Form Boxes */







    .acc-section-box {







        background: #f8fafc;







        border: 1px solid var(--border-light);







        border-radius: 10px;







        padding: 14px;







    }















    .acc-section-title {







        display: flex;







        align-items: center;







        gap: 8px;







        font-size: 0.9rem;







        font-weight: 800;







        color: var(--text-primary);







        padding-bottom: 8px;







        border-bottom: 1px dashed var(--border-light);







    }















    .acc-field-group {







        display: flex;







        flex-direction: column;







        gap: 4px;







    }















    .acc-field-group label {







        font-size: 0.76rem;







        font-weight: 700;







        color: var(--text-secondary);







    }















    .acc-form-input {







        width: 100%;







        height: 40px;







        padding: 0 12px;







        border-radius: 8px;







        border: 1px solid var(--border-light);







        background: #ffffff;







        font-size: 0.84rem;







        font-weight: 600;







        font-family: inherit;







        color: var(--text-primary);







        outline: none;







        box-sizing: border-box;







        transition: border-color 0.2s;







    }















    .acc-form-input:focus {







        border-color: var(--primary, #e50914);







    }















    .btn-acc-save {







        margin-top: 6px;







        height: 40px;







        border-radius: 8px;







        border: none;







        background: #1e293b;







        color: #ffffff;







        font-size: 0.82rem;







        font-weight: 800;







        font-family: inherit;







        cursor: pointer;







        transition: background 0.2s;







    }















    .btn-acc-save:hover,







    .btn-acc-save:active {







        background: #0f172a;







    }















    .btn-acc-change-pwd {







        background: #0284c7;







    }















    .btn-acc-change-pwd:hover,







    .btn-acc-change-pwd:active {







        background: #0369a1;







    }















    /* Red Brand Theme Action Buttons Palette */







    .color-btn-deposit,







    .color-btn-withdraw,







    .color-btn-reports,







    .color-btn-salafny,







    .color-btn-shajarati,







    .color-btn-wakeely {







        background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%) !important;







        border: none !important;







        color: #ffffff !important;







        box-shadow: 0 4px 12px rgba(229, 9, 20, 0.25) !important;







    }















    .color-btn-logout {







        background: linear-gradient(135deg, #7f1d1d 0%, #450a0a 100%) !important;







        border: 1px solid rgba(255, 255, 255, 0.1) !important;







        color: #ffffff !important;







        box-shadow: 0 4px 12px rgba(127, 29, 29, 0.25) !important;







    }







    border: none !important;







    color: #ffffff !important;







    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);







}















.acc-action-btn[class*="color-btn-"]:hover,







.acc-action-btn[class*="color-btn-"]:active {







    opacity: 0.92;







    transform: translateY(-2px);







}















/* Red Spacing Gap above Balance Card */







.home-top-red-gap {







    width: 100%;







    height: 14px;







    background: #c60812;







}















/* Horizontal Offers Banner Slider (Full Width + Auto Slide) */







.home-offers-section {







    padding: 10px 14px;







    width: 100%;







    position: relative;







    z-index: 2;







    flex-shrink: 0;







    box-sizing: border-box;







}















.offers-carousel {







    display: flex;







    gap: 10px;







    overflow-x: auto;







    scroll-snap-type: x mandatory;







    scroll-behavior: smooth;







    -webkit-overflow-scrolling: touch;







    overscroll-behavior-x: contain;







    scrollbar-width: none;
    /* Firefox */







    border-radius: 14px;







}















.offers-carousel::-webkit-scrollbar {







    display: none;
    /* Chrome/Safari */







}















.offer-card {







    flex: 0 0 100%;







    width: 100%;







    max-width: 100%;







    min-height: 115px;







    scroll-snap-align: start;







    scroll-snap-stop: always;







    border-radius: 14px;







    padding: 18px 20px;







    color: #ffffff;







    display: flex;







    flex-direction: column;







    gap: 6px;







    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);







    position: relative;







    overflow: hidden;







    box-sizing: border-box;







}















/* Dots Indicators */







.carousel-dots {







    display: flex;







    justify-content: center;







    align-items: center;







    gap: 6px;







    margin-top: 8px;







}















.carousel-dot {







    width: 7px;







    height: 7px;







    border-radius: 50%;







    background: #cbd5e1;







    transition: background 0.3s, width 0.3s;







}















.carousel-dot.active {







    background: var(--primary, #e50914);







    width: 18px;







    border-radius: 10px;







}















.offer-card-1 {







    background: linear-gradient(135deg, #e50914 0%, #99000d 100%);







}















.offer-card-2 {







    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);







    border: 1px solid rgba(255, 255, 255, 0.1);







}















.offer-card-3 {







    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);







}















.offer-badge {







    align-self: flex-start;







    font-size: 0.68rem;







    font-weight: 800;







    background: rgba(255, 255, 255, 0.22);







    backdrop-filter: blur(4px);







    padding: 3px 10px;







    border-radius: 20px;







    color: #ffffff;







    letter-spacing: 0.3px;







}















.offer-badge.badge-nfc {







    background: rgba(82, 194, 126, 0.3);







    color: #52c27e;







}















.offer-badge.badge-gold {







    background: rgba(245, 158, 11, 0.3);







    color: #fbbf24;







}















.offer-title {







    font-size: 0.96rem;







    font-weight: 900;







    margin-top: 2px;







}















.offer-subtitle {







    font-size: 0.78rem;







    color: rgba(255, 255, 255, 0.88);







    font-weight: 600;







    line-height: 1.4;







}















.offer-action-text {







    font-size: 0.75rem;







    font-weight: 800;







    margin-top: 6px;







    color: #ffffff;







    opacity: 0.9;







}















/* Distinct White "عرض الكل" Show All Card Style */







.category-show-all-card {







    background: #ffffff !important;







    border: 2px solid var(--primary, #e50914) !important;







    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.12) !important;







}















.category-show-all-card .category-card-center-text {







    color: var(--primary, #e50914) !important;







    font-weight: 800 !important;







    font-size: 0.76rem !important;







    white-space: nowrap !important;







    word-break: normal !important;







    text-shadow: none !important;







}















.category-show-all-card .category-watermark-icon {







    color: rgba(229, 9, 20, 0.18) !important;







}















.category-show-all-card:hover,







.category-show-all-card:active {







    background: #fff5f5 !important;







    transform: translateY(-2px);







}















/* Header Bar Spinner Loader */







.header-title-spinner {







    display: inline-block;







    width: 20px;







    height: 20px;







    border: 2.5px solid rgba(255, 255, 255, 0.3);







    border-radius: 50%;







    border-top-color: #ffffff;







    animation: header-spin 0.7s linear infinite;







    vertical-align: middle;







}















@keyframes header-spin {







    to {
        transform: rotate(360deg);
    }







}















/* Pull to Refresh Indicator Area */







.ptr-indicator {







    width: 100%;







    height: 0;







    overflow: hidden;







    display: flex;







    align-items: center;







    justify-content: center;







    background: transparent;







    transition: height 0.2s ease;







}















.ptr-indicator.active {







    height: 40px;







}















.ptr-spinner {







    width: 18px;







    height: 18px;







    border: 2px solid rgba(229, 9, 20, 0.2);







    border-radius: 50%;







    border-top-color: var(--primary, #e50914);







    animation: header-spin 0.6s linear infinite;







}















/* Deposit & Withdraw Option Cards */







.deposit-option-card {







    background: #ffffff;







    border: 1px solid var(--border-light);







    border-radius: 12px;







    padding: 16px;







    display: flex;







    align-items: center;







    gap: 14px;







    cursor: pointer;







    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);







    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;







}















.deposit-option-card:hover {







    transform: translateY(-2px);







    border-color: var(--primary, #e50914);







    box-shadow: 0 6px 16px rgba(229, 9, 20, 0.1);







}















.deposit-option-card:active {







    transform: scale(0.98);







}















.dep-icon-box {







    width: 44px;







    height: 44px;







    border-radius: 12px;







    display: flex;







    align-items: center;







    justify-content: center;







    flex-shrink: 0;







}















.dep-info {







    display: flex;







    flex-direction: column;







    gap: 3px;







}















.dep-title {







    font-size: 0.92rem;







    font-weight: 800;







    color: var(--text-primary);







}















.dep-sub {







    font-size: 0.76rem;







    color: var(--text-secondary);







    font-weight: 600;







    line-height: 1.3;







}















/* Paymob Checkout & Success Custom Styles */







.checkout-focus:focus {







    border-color: #3b82f6 !important;







    outline: none !important;







    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;







    background-color: #ffffff !important;







}















@keyframes scale-up-success {







    0% {







        transform: scale(0.6);







        opacity: 0;







    }







    100% {







        transform: scale(1);







        opacity: 1;







    }







}















.checkout-card input {







    transition: all 0.2s ease-in-out;







}







/* ==========================================
   Splash Onboarding Style - Red & White Theme
   ========================================== */
.splash-onboarding {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--panel-light);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 24px;
    box-sizing: border-box;
    animation: fadeIn 0.4s ease-out;
}

.splash-skip-btn {
    align-self: flex-start;
    background: rgba(229, 9, 20, 0.05);
    border: none;
    color: var(--accent);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.splash-skip-btn:hover {
    background: rgba(229, 9, 20, 0.1);
}

.splash-slides-container {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin: 20px 0;
}

.splash-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.splash-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.splash-slide.exit-left {
    opacity: 0;
    transform: translateX(-100px);
}

.splash-ill {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: bounceIn 0.8s ease-out;
}

.splash-ill svg {
    filter: drop-shadow(0 10px 20px rgba(229, 9, 20, 0.05));
}

.splash-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.splash-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 0 16px;
    max-width: 320px;
}

.splash-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.splash-dots {
    display: flex;
    gap: 8px;
}

.splash-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.splash-dot.active {
    width: 24px;
    border-radius: 4px;
    background-color: var(--accent);
}

.splash-next-btn {
    background: linear-gradient(135deg, var(--accent) 0%, #b91c1c 100%);
    border: none;
    color: #ffffff;
    padding: 12px 36px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.25);
    transition: all 0.2s ease;
}

.splash-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(229, 9, 20, 0.3);
}

.splash-next-btn:active {
    transform: translateY(0);
}

/* Animations */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Activation Notice Banner styling */
.activation-notice-banner {
    background-color: rgba(229, 9, 20, 0.08);
    border: 1px solid rgba(229, 9, 20, 0.2);
    color: var(--accent);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: bold;
    margin: 12px 14px 2px;
    text-align: center;
    line-height: 1.4;
    animation: fadeIn 0.3s ease-out;
}