.kba-page,
.kba-page *{
box-sizing:border-box;
}
.kba-page{
--kba-bg:#f0f2f5;
--kba-card:#ffffff;
--kba-text:#050505;
--kba-muted:#65676b;
--kba-line:#dadde1;
--kba-blue:#1877f2;
--kba-green:#16a34a;
--kba-orange:#f59e0b;
--kba-red:#dc2626;
--kba-radius:18px;
--kba-shadow:0 4px 14px rgba(0,0,0,.08);
font-family:Cairo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:var(--kba-bg);
color:var(--kba-text);
min-height:100vh;
padding:14px;
}
.kba-wrap{
max-width:1160px;
margin:0 auto;
}
.kba-hero{
background:linear-gradient(135deg,#1877f2,#0f5dcc);
color:#fff;
border-radius:24px;
padding:22px;
box-shadow:var(--kba-shadow);
margin-bottom:14px;
}
.kba-hero-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.kba-title{
display:flex;
align-items:center;
gap:12px;
}
.kba-title-icon{
width:54px;
height:54px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.16);
font-size:24px;
}
.kba-title h1{
margin:0;
font-size:clamp(1.35rem,3vw,2rem);
font-weight:900;
}
.kba-title p{
margin:5px 0 0;
color:rgba(255,255,255,.86);
line-height:1.6;
}
.kba-back{
color:#fff;
text-decoration:none;
border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.12);
padding:10px 14px;
border-radius:999px;
font-weight:900;
display:inline-flex;
align-items:center;
gap:8px;
}
.kba-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:14px;
align-items:start;
}
.kba-grid.has-selected-space{
grid-template-columns:1fr;
}
.kba-space.is-hidden-after-choice{
display:none;
}
.kba-booking-card.is-inline-booking{
margin-top:10px;
box-shadow:0 8px 22px rgba(24,119,242,.12);
border-color:#b9d6ff;
}
.kba-change-choice{
border:0;
background:#f0f2f5;
color:#1877f2;
border-radius:999px;
padding:8px 12px;
font-weight:900;
cursor:pointer;
display:none;
}
.kba-change-choice.is-visible{
display:inline-flex;
align-items:center;
gap:6px;
}
.kba-card{
background:var(--kba-card);
border:1px solid var(--kba-line);
border-radius:var(--kba-radius);
box-shadow:var(--kba-shadow);
overflow:hidden;
}
.kba-card-head{
padding:14px 16px;
border-bottom:1px solid var(--kba-line);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.kba-card-head h2{
margin:0;
font-size:1rem;
font-weight:900;
display:flex;
align-items:center;
gap:8px;
}
.kba-body{
padding:14px;
}
.kba-spaces{
display:grid;
gap:10px;
}
.kba-space{
border:1px solid var(--kba-line);
background:#fff;
border-radius:16px;
padding:12px;
display:grid;
grid-template-columns:auto 1fr auto;
gap:12px;
align-items:center;
transition:.18s;
}
.kba-space:hover{
border-color:#b9d6ff;
box-shadow:0 6px 18px rgba(24,119,242,.09);
}
.kba-space.is-selected{
background:#eaf3ff;
border-color:#1877f2;
box-shadow:0 8px 22px rgba(24,119,242,.16);
}
.kba-space.is-selected .kba-space-icon{
background:#1877f2;
color:#fff;
}
.kba-space.is-pending{
background:#fff7ed;
border-color:#fed7aa;
}
.kba-space.is-pending .kba-space-icon{
background:#ffedd5;
color:#f59e0b;
}
.kba-space.is-booked{
background:#fff1f2;
border-color:#fecdd3;
opacity:.92;
}
.kba-space.is-booked .kba-space-icon{
background:#ffe4e6;
color:#dc2626;
}
.kba-space.is-expired{
background:#f8fafc;
border-color:#cbd5e1;
}
.kba-space-icon{
width:50px;
height:50px;
border-radius:16px;
background:#e7f3ff;
color:var(--kba-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}
.kba-space-title{
font-weight:900;
margin-bottom:3px;
}
.kba-space-meta{
color:var(--kba-muted);
font-size:.87rem;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.kba-badge{
border-radius:999px;
padding:5px 9px;
font-size:.78rem;
font-weight:900;
display:inline-flex;
align-items:center;
gap:5px;
white-space:nowrap;
}
.kba-badge.is-available{
color:#166534;
background:#dcfce7;
}
.kba-badge.is-pending{
color:#92400e;
background:#fef3c7;
}
.kba-badge.is-booked{
color:#991b1b;
background:#fee2e2;
}
.kba-badge.is-expired{
color:#334155;
background:#e2e8f0;
}
.kba-badge.is-paid{color:#065f46;background:#d1fae5;}
.kba-badge.is-pay-pending{color:#92400e;background:#fef3c7;}
.kba-badge.is-pay-rejected{color:#991b1b;background:#fee2e2;}
.kba-space-stats{
margin-top:8px;
display:flex;
flex-wrap:wrap;
gap:7px;
}
.kba-stat-mini{
display:inline-flex;
align-items:center;
gap:5px;
border:1px solid #e5e7eb;
background:#f8fafc;
color:#334155;
border-radius:999px;
padding:5px 8px;
font-size:.78rem;
font-weight:900;
}
.kba-radio{
width:22px;
height:22px;
accent-color:var(--kba-blue);
}
.kba-form-row{
margin-bottom:13px;
}
.kba-label{
display:block;
margin-bottom:7px;
font-weight:900;
font-size:.92rem;
}
.kba-input,
.kba-select{
width:100%;
border:1px solid var(--kba-line);
border-radius:14px;
background:#fff;
padding:12px 13px;
font:inherit;
outline:none;
}
.kba-input:focus,
.kba-select:focus{
border-color:var(--kba-blue);
box-shadow:0 0 0 3px rgba(24,119,242,.12);
}
.kba-upload{
border:2px dashed #ccd0d5;
background:#f7f8fa;
border-radius:16px;
padding:18px;
text-align:center;
cursor:pointer;
display:block;
}
.kba-upload i{
color:var(--kba-blue);
font-size:28px;
display:block;
margin-bottom:8px;
}
.kba-upload strong{
display:block;
margin-bottom:4px;
}
.kba-upload small{
color:var(--kba-muted);
}
.kba-upload input{
display:none;
}
.kba-design{
border:1px solid #fed7aa;
background:#fff7ed;
border-radius:16px;
padding:12px;
display:flex;
gap:10px;
align-items:flex-start;
}
.kba-design input{
width:20px;
height:20px;
margin-top:2px;
accent-color:var(--kba-orange);
}
.kba-design strong{
display:block;
color:#9a3412;
margin-bottom:3px;
}
.kba-design span{
display:block;
color:#7c2d12;
font-size:.9rem;
line-height:1.5;
}
.kba-total{
background:#f0f9ff;
border:1px solid #bae6fd;
color:#075985;
border-radius:16px;
padding:12px;
font-weight:900;
display:flex;
justify-content:space-between;
gap:10px;
}
.kba-btn{
width:100%;
border:0;
border-radius:16px;
padding:13px 18px;
background:var(--kba-blue);
color:#fff;
font-weight:900;
cursor:pointer;
font:inherit;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.kba-btn:hover{
filter:brightness(.96);
}
.kba-alert{
border-radius:16px;
padding:12px 14px;
margin-bottom:12px;
font-weight:800;
line-height:1.6;
}
.kba-alert-error{
background:#fee2e2;
color:#991b1b;
border:1px solid #fecaca;
}
.kba-alert-success{
background:#dcfce7;
color:#166534;
border:1px solid #bbf7d0;
}
.kba-preview{
display:none;
margin-top:10px;
}
.kba-preview img{
max-width:100%;
max-height:160px;
border-radius:14px;
border:1px solid var(--kba-line);
object-fit:cover;
}
.kba-note{
color:var(--kba-muted);
font-size:.88rem;
line-height:1.7;
background:#f7f8fa;
border:1px solid var(--kba-line);
border-radius:16px;
padding:12px;
margin-top:12px;
}
@media(max-width:860px){
.kba-grid{
grid-template-columns:1fr;
}
}
@media(max-width:560px){
.kba-page{
padding:8px;
}
.kba-hero{
border-radius:18px;
padding:15px;
}
.kba-title-icon{
width:44px;
height:44px;
border-radius:14px;
font-size:19px;
}
.kba-back{
width:100%;
justify-content:center;
}
.kba-space{
grid-template-columns:auto 1fr;
}
.kba-space .kba-badge{
grid-column:1 / -1;
width:max-content;
}
.kba-card-head,
.kba-body{
padding:12px;
}
}