WD - Dev
180 lines
3.4 KiB
CSS
180 lines
3.4 KiB
CSS
/* ================= RESET ================= */
|
|
body{
|
|
font-family:'Inter',sans-serif;
|
|
background:#f8fafc;
|
|
font-size:14px;
|
|
color:#1e293b;
|
|
}
|
|
|
|
@media(max-width:576px){
|
|
body{font-size:12px;}
|
|
}
|
|
|
|
/* ================= LAYOUT ================= */
|
|
.container-custom{
|
|
max-width:760px;
|
|
margin:auto;
|
|
padding:16px;
|
|
}
|
|
|
|
/* ================= CARD ================= */
|
|
.card-modern{
|
|
background:#fff;
|
|
border-radius:16px;
|
|
padding:16px;
|
|
box-shadow:0 6px 20px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
/* ================= HEADER ================= */
|
|
.header-modern{
|
|
background:linear-gradient(135deg,#ff7a00,#ff9a3c);
|
|
color:#fff;
|
|
border-radius:16px;
|
|
padding:18px;
|
|
box-shadow:0 10px 25px rgba(255,122,0,0.25);
|
|
}
|
|
|
|
/* ================= TEXT ================= */
|
|
.text-orange{color:#ff7a00;}
|
|
.label-muted{color:#64748b;font-size:12px;}
|
|
|
|
/* ================= FLEX ================= */
|
|
.flex-between{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
}
|
|
|
|
/* ================= INFO ================= */
|
|
.info-item{
|
|
display:flex;
|
|
gap:6px;
|
|
align-items:flex-start;
|
|
margin-top:4px;
|
|
}
|
|
|
|
/* ================= BILL ================= */
|
|
.bill-box{
|
|
background:#fff;
|
|
border-radius:14px;
|
|
padding:14px;
|
|
border:1px solid #f1f5f9;
|
|
}
|
|
|
|
/* ================= SUMMARY ================= */
|
|
.summary-box{
|
|
background:#fff7f2;
|
|
border-radius:12px;
|
|
padding:12px;
|
|
}
|
|
|
|
/* ================= BUTTON ================= */
|
|
.btn-orange{
|
|
background:linear-gradient(135deg,#ff7a00,#ff9a3c);
|
|
color:#fff;
|
|
border:none;
|
|
border-radius:14px;
|
|
padding:10px;
|
|
font-weight:600;
|
|
transition:0.2s;
|
|
}
|
|
|
|
.btn-orange:hover{
|
|
transform:translateY(-1px);
|
|
box-shadow:0 6px 18px rgba(255,122,0,0.3);
|
|
}
|
|
|
|
/* ================= PRICE ================= */
|
|
.price{
|
|
white-space:nowrap;
|
|
font-weight:600;
|
|
}
|
|
|
|
/* ================= BADGE ================= */
|
|
.badge-soft{
|
|
background:#fff3e6;
|
|
color:#ff7a00;
|
|
padding:6px 10px;
|
|
border-radius:10px;
|
|
font-size:11px;
|
|
}
|
|
|
|
/* ================= TITLE ================= */
|
|
.section-title{
|
|
font-weight:600;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
/* ================= HISTORY ================= */
|
|
.history-item{
|
|
padding:12px 0;
|
|
border-bottom:1px solid #f1f5f9;
|
|
}
|
|
|
|
/* ================= MOBILE ================= */
|
|
@media(max-width:576px){
|
|
|
|
.header-modern{padding:14px;}
|
|
.card-modern{padding:12px;}
|
|
.bill-box{padding:12px;}
|
|
|
|
.btn-orange{
|
|
font-size:12px;
|
|
padding:10px;
|
|
}
|
|
}
|
|
|
|
/* ================= SWEETALERT MOBILE FIX ================= */
|
|
.swal2-popup {
|
|
width: 90% !important;
|
|
max-width: 320px;
|
|
border-radius: 14px !important;
|
|
padding: 18px !important;
|
|
}
|
|
|
|
.swal2-title {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.swal2-html-container {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.swal2-actions {
|
|
margin-top: 12px !important;
|
|
}
|
|
|
|
.swal2-confirm {
|
|
font-size: 13px !important;
|
|
padding: 8px 14px !important;
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
/* LOADING SIZE */
|
|
.swal2-loader {
|
|
width: 28px !important;
|
|
height: 28px !important;
|
|
}
|
|
|
|
/* ================= EXTRA MOBILE ================= */
|
|
@media (max-width: 576px){
|
|
|
|
.swal2-popup {
|
|
width: 88% !important;
|
|
padding: 14px !important;
|
|
}
|
|
|
|
.swal2-title {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.swal2-html-container {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.swal2-confirm {
|
|
font-size: 12px !important;
|
|
padding: 7px 12px !important;
|
|
}
|
|
}
|