.tampr-box{
max-width:450px;
padding:20px;
border:1px solid #ddd;
background:#f8f8f8;
font-family:Arial;
}

.tampr-box input, .tampr-box select{
width:100%;
margin-bottom:10px;
padding:8px;
}

.tampr-box button{
padding:10px;
background:#2271b1;
color:white;
border:none;
cursor:pointer;
}
.tampr-container{
max-width:520px;
margin:auto;
background:white;
padding:25px;
border-radius:8px;
box-shadow:0 3px 12px rgba(0,0,0,0.1);
font-family:Arial;
}

.tampr-container h2{
text-align:center;
margin-bottom:20px;
}

.tampr-tabs{
display:flex;
margin-bottom:20px;
}

.tampr-widget{
background:#fff;
padding:16px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
font-family:Arial;
}

.tampr-title{
text-align:center;
font-size:16px;
margin-bottom:15px;
}

/* STEPS */

.tampr-step{
margin-bottom:18px;
padding:12px;
border:1px solid #e5e5e5;
border-radius:5px;
background:#fafafa;
}

.tampr-step-title{
font-weight:bold;
font-size:13px;
margin-bottom:10px;
color:#333;
}

/* INPUTS */
.tampr-container input{
	width:100%;
padding:8px;
margin-bottom:8px;
border:1px solid #ddd;
border-radius:4px;
font-size:13px;
}
.tampr-widget input,
.tampr-widget select{
width:100%;
padding:8px;
margin-bottom:8px;
border:1px solid #ddd;
border-radius:4px;
font-size:13px;
}
#tampr-approval-form{
	display:flex;
	justify-content:center;
}
/* BUTTON */

.tampr-btn{
width:100%;
padding:10px;
background:#d8c194 !important;
border:none;
border-radius:10px;
color:white;
font-weight:bold;
cursor:pointer;
}

.tampr-btn:hover{
background:#6366f1;
}

/* LOCKED STEP */

.locked{
opacity:0.5;
pointer-events:none;
}

/* POINT BOX */

#points_required{
background:#e9f6ff;
padding:8px;
border-radius:4px;
margin-bottom:8px;
font-size:13px;
}
.ta-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: ta-spin 0.8s linear infinite;
}
.ta-center-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ta-approval-card {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(73, 64, 64, 0.08);
    text-align: center;
}
#ta-approval-response{
    color: green;
    font-weight: bold;
    font-size: 25px;
}
#approve_button{
    background:green;
    color:white;
    font-weight:bold;
    font-size:20px;
	width:200px;
}
#reject_button{
    background:orange;
    color:white;
    font-weight:bold;
    font-size:20px;
	width:200px;
}
@keyframes ta-spin {
    100% {
        transform: rotate(360deg);
    }
}
#tampr-processing{
    margin-top:15px;
    font-weight:600;
    color:#333;
}

.ta-spinner{
    display:inline-block;
    width:18px;
    height:18px;
    border:3px solid #ddd;
    border-top:3px solid #0073aa;
    border-radius:50%;
    animation: ta-spin 0.8s linear infinite;
    vertical-align:middle;
    margin-right:8px;
}

@keyframes ta-spin{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
.upload-box{
border:2px dashed #6366f1;
padding:20px;
text-align:center;
border-radius:8px;
cursor:pointer;
background:#f9fafb;
position:relative;
}

.upload-box input{
position:absolute;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
left:0;
top:0;
}

.upload-box.dragover{
background:#eef2ff;
border-color:#4f46e5;
}

#filePreview{
margin-top:10px;
font-size:13px;
color:#333;
}

.upload-progress{
width:100%;
background:#eee;
border-radius:6px;
margin-top:10px;
height:8px;
overflow:hidden;
}

.upload-bar{
height:100%;
width:0%;
background:#6366f1;
transition:width .3s;
}
.approve-btn{
background:#28a745;
color:#fff;
border:none;
padding:6px 14px;
border-radius:4px;
cursor:pointer;
font-weight:600;
margin-right:6px;
}

.approve-btn:hover{
background:#218838;
}

.reject-btn{
background:#dc3545;
color:#fff;
border:none;
padding:6px 14px;
border-radius:4px;
cursor:pointer;
font-weight:600;
}

.reject-btn:hover{
background:#c82333;
}
/* 📱 MOBILE RESPONSIVE FIX */
@media (max-width: 768px){

    /* Container full width */
    .tampr-container,
    .tampr-box,
    .tampr-widget{
        max-width: 60%;
        width: 100%;
        padding: 15px;
        margin: 0;
        box-sizing: border-box;
    }

    /* Fix form centering issue */
    #tampr-approval-form{
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
    }

    /* Inputs */
    .tampr-container input,
    .tampr-widget input,
    .tampr-widget select{
        font-size: 14px;
        padding: 10px;
    }

    /* Buttons full width */
    .tampr-btn,
    #approve_button,
    #reject_button{
        width: 100% !important;
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* Fix tabs overflow */
    .tampr-tabs{
        flex-direction: column;
        gap: 10px;
    }

    /* Cards spacing */
    .ta-approval-card{
        padding: 20px;
        margin: 10px;
    }

    /* Fix upload box */
    .upload-box{
        padding: 15px;
        font-size: 14px;
    }

    /* Table fix (important for your screenshot) */
    table{
        width: 100%;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

}

/* ── Merchant grid (from custom.css) ─────────────────────────────────────── */
.ep-merchant-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ep-favourite-tile {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
    text-align: center;
}

/* ── Redemption status badges ────────────────────────────────────────────── */
.ep-status-pending          { color:#854d0e; background:#fef9c3; padding:3px 8px; border-radius:12px; font-size:12px; }
.ep-status-member_approved  { color:#1e40af; background:#dbeafe; padding:3px 8px; border-radius:12px; font-size:12px; }
.ep-status-admin_approved   { color:#166534; background:#dcfce7; padding:3px 8px; border-radius:12px; font-size:12px; }
.ep-status-redeemed         { color:#166534; background:#dcfce7; padding:3px 8px; border-radius:12px; font-size:12px; }
.ep-status-rejected         { color:#991b1b; background:#fee2e2; padding:3px 8px; border-radius:12px; font-size:12px; }
.ep-status-cancelled        { color:#991b1b; background:#fee2e2; padding:3px 8px; border-radius:12px; font-size:12px; }
/* Main Container */
/* Main Container */


/* Top Banner - Full Width */
.top-banner{
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Cards inside banner */
.top-banner .cards{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.top-banner .card{
    background: #f8f8f8;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

/* Second Row - Charts */
.grid-3{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

/* Third Row - Table + Widget */
.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

/* Panels */
.panel,
.tampr-container{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    height: 100%;
}

/* Charts */
#piechartdiv,
#barchartdiv{
    width: 100%;
    height: 400px;
    margin-top: 0 !important;
}

/* Responsive */
@media(max-width: 992px){

    .top-banner .cards{
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3,
    .grid-2{
        grid-template-columns: 1fr;
    }
}