/* Zippee Quick Actions – Compact One Page Layout */

.qa{
width:100%;
max-width:1200px;
margin:20px auto;
padding:0 20px;
font-family:Segoe UI, Arial, sans-serif;
}

.qa-shell{
background:#fff7ef;
border:1px solid #f2e6da;
border-radius:16px;
padding:20px;
}

/* Header */

.qa-head{
margin-bottom:14px;
}

.qa-kicker{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
color:#c05621;
margin-bottom:2px;
}

.qa h2{
font-size:22px;
margin:0;
color:#1f2937;
}

.qa-sub{
font-size:13px;
color:#6b7280;
margin-top:4px;
}

/* Grid */

.qa-grid{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:12px;
grid-template-columns:repeat(3,1fr);
}

/* Cards */

.qa-card{
display:flex;
align-items:center;
gap:10px;
padding:14px;
background:#ffffff;
border:1px solid #eceff3;
border-radius:10px;
text-decoration:none;
color:#111;
position:relative;
transition:all .2s ease;
cursor:pointer;
}

.qa-card:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,.06);
}

.qa-card:focus,
.qa-card:active{
outline:none;
}

/* Icon */

.qa-icon{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
background:#fff3ea;
border-radius:6px;
font-size:16px;
}

/* Text */

.qa-title{
display:block;
font-weight:600;
font-size:14px;
color:#1f2937;
}

.qa-desc{
display:block;
font-size:12px;
margin-top:2px;
color:#d45500;
}

/* Arrow */

.qa-arrow{
position:absolute;
right:12px;
font-size:16px;
color:#ff6a00;
}

/* Upcoming */

.qa-card--upcoming{
background:#fff8f3;
}

.qa-badge{
position:absolute;
top:6px;
right:32px;
font-size:9px;
padding:2px 6px;
background:#fff1e6;
border:1px solid #ffd7bc;
border-radius:20px;
font-weight:700;
color:#b94800;
}

/* Chat */

.qa-card--chat .qa-icon{
background:#efe8ff;
}

/* Wide card */

.qa-wide{
grid-column:1/-1;
}

/* Pincode */

.qa-pincode{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px;
border-radius:10px;
background:linear-gradient(120deg,#3d0f43,#5e1d67);
color:white;
font-weight:600;
text-decoration:none;
font-size:14px;
}

.qa-pincode:hover{
opacity:.9;
}

/* Responsive */

@media(max-width:900px){

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

}

@media(max-width:600px){

.qa-grid{
grid-template-columns:1fr;
}

}