.bbrev4-card{max-width:520px;background:#fff;border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(40,99,131,0.08);font-family:inherit;border:1px solid #eef6f9;}
.bbrev4-header{background:linear-gradient(90deg,#286383,#57A7CA);color:#fff;padding:10px;border-radius:10px;margin-bottom:10px;text-align:center;font-weight:700;}
.bbrev4-block{border:1px solid #f1f6f8;padding:10px;border-radius:10px;margin-bottom:10px;}
.bbrev4-service{width:100%;padding:8px;border-radius:8px;border:1px solid #dfeef5;margin-bottom:8px;}
.bbrev4-subs label{display:block;margin:6px 0;}
.bbrev4-area{width:100px;padding:6px;border-radius:6px;border:1px solid #dfeef5;}
.bbrev4-total{font-size:18px;font-weight:700;margin:10px 0;text-align:center;}
.bbrev4-actions{display:flex;gap:8px;justify-content:space-between;}
.btn{padding:8px 10px;border-radius:10px;border:none;cursor:pointer;}
.btn-primary{background:#286383;color:#fff;}
.btn-link{background:none;color:#286383;border:none;cursor:pointer;text-decoration:underline;}
.bbrev4-modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:9999;}
.bbrev4-inner{background:#fff;padding:18px;border-radius:12px;max-width:420px;width:94%;position:relative;}
.bbrev4-inner input{width:100%;padding:8px;margin:8px 0;border:1px solid #ddd;border-radius:6px;}
.bbrev4-close{position:absolute;right:10px;top:10px;background:#57A7CA;color:#fff;border:none;border-radius:50%;width:36px;height:36px;font-size:18px;cursor:pointer;}


/* v4.7.1 styles */
.bbrev4-header{background:linear-gradient(90deg, rgb(40,99,131), rgb(87,167,202)); color:#fff; padding:10px; border-radius:8px; text-align:center; font-weight:600; margin-bottom:10px;}
.btn-primary{background:rgb(40,99,131); color:#fff; border:none; border-radius:6px; padding:7px 10px;}
.btn-primary:hover{background:rgb(87,167,202);}
.bbrev4-subs{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
@media(min-width:900px){ .bbrev4-subs{grid-template-columns:repeat(3,1fr);} }
@media(min-width:600px) and (max-width:899px){ .bbrev4-subs{grid-template-columns:repeat(2,1fr);} }
@media(max-width:599px){ .bbrev4-subs{grid-template-columns:1fr;} }
.bbrev4-area{min-width:55px; max-width:90px; text-align:right; padding:4px 6px; border-radius:6px; border:1px solid #dfeef5;}
.bbrev4-toast{position:fixed; right:20px; bottom:20px; background:rgb(40,99,131); color:#fff; padding:10px 14px; border-radius:6px; z-index:99999;}


/* Unified UI for all users and devices */
.bbrev4-card, .bbrev4-modal, .bbrev4-body, .bbrev4-actions, .bbrev4-total {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
.bbrev4-card button.btn {
  background: #286383;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bbrev4-card button.btn:hover { background: #1e4c66; }
.bbrev4-total-value { font-weight: bold; }
.bbrev4-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0; }
/* Sub-service card box */
.bbrev4-sub-card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease-in-out;
}
.bbrev4-sub-card:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.bbrev4-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bbrev4-sub-title {
  font-weight: 500;
  color: #333;
}
.bbrev4-price {
  font-size: 14px;
  color: #286383;
  font-weight: 600;
}
.bbrev4-input-wrapper {
  display: none;
  margin-top: 10px;
}
.bbrev4-input-wrapper input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}