body{font-family:Montserrat,Arial,sans-serif;background:#f6f4f1;color:#2d2a2e;margin:0}
.wrap{max-width:1000px;margin:50px auto;padding:20px}
.card{background:#fff;padding:28px;border-radius:14px;margin-bottom:20px;box-shadow:0 2px 16px #0000000b;min-width:0}
input,textarea,select{width:100%;padding:11px 12px;margin:6px 0 14px;box-sizing:border-box;border:1px solid #d8d4d0;border-radius:7px;font:inherit;max-width:100%}
textarea{resize:vertical;min-height:100px}
label{display:block;font-weight:500;line-height:1.35}
button,.button{display:inline-block;background:#5b526f;color:#fff;padding:10px 16px;border:0;border-radius:8px;text-decoration:none;cursor:pointer;font:inherit}
button:hover,.button:hover{opacity:.92}
.muted{color:#777}.ok{padding:12px;background:#e8f5e9;border-radius:8px}.error{padding:12px;background:#ffebee;border-radius:8px}
.top{display:flex;justify-content:space-between;gap:20px;align-items:center}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid #eee;vertical-align:top}a{color:#5b526f}
.booking-area-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.booking-area-grid h3{margin-top:24px}.booking-area-grid table{margin-bottom:16px}.booking-area-grid .button{margin:4px 4px 4px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.form-grid>label{min-width:0}.form-grid .full{grid-column:1/-1}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.actions form{margin:0}
html{overflow-x:hidden}body{overflow-x:hidden;min-width:0}.wrap{min-width:0}.card h1,.card h2,.card h3{overflow-wrap:anywhere}form{max-width:100%}
@media(max-width:800px){.booking-area-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}
@media(max-width:700px){
 .wrap{width:calc(100% - 24px);margin:18px auto;padding:0}
 .card{padding:16px;border-radius:12px;margin-bottom:14px}
 .card h1{font-size:1.55rem;margin:0 0 16px}.card h2{font-size:1.22rem}.card h3{font-size:1.05rem}
 .top{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:14px}.top h1{margin:0;font-size:1.55rem}.top>div{display:flex;flex-wrap:wrap;gap:7px;width:100%}.top .button{margin:0;flex:1 1 140px;text-align:center}
 .booking-area-grid{gap:14px}.booking-area-grid .card{width:100%;overflow:hidden}.booking-area-grid .button{margin:4px 4px 4px 0;max-width:100%;white-space:normal;text-align:center}
 input,textarea,select{font-size:16px;padding:11px 12px}.actions{display:grid;grid-template-columns:1fr;align-items:stretch}.actions .button,.actions button{width:100%;text-align:center}
 table{width:100%;font-size:.9rem}
 table th,table td{padding:8px 7px}
 .responsive-table{display:block;width:100%}.responsive-table thead{display:none}.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%;box-sizing:border-box}.responsive-table tr{background:#faf9f7;border:1px solid #e7e3df;border-radius:10px;margin:0 0 10px;padding:8px}.responsive-table td{border:0;padding:5px 6px;display:grid;grid-template-columns:minmax(72px,34%) 1fr;gap:8px;white-space:normal;overflow-wrap:anywhere}.responsive-table td:before{content:attr(data-label);font-weight:600;color:#666}.responsive-table td:empty{display:none}
 .responsive-table td[data-label="Action"]{display:block}.responsive-table td[data-label="Action"]:before{display:block;margin-bottom:4px}
 .responsive-table td[data-label="Action"] form{display:block}.responsive-table td[data-label="Action"] .button,.responsive-table td[data-label="Action"] button{width:100%;margin-top:3px}
}
@media(max-width:420px){
 .wrap{width:calc(100% - 20px)}.card{padding:14px}.top .button{flex:1 1 100%;width:100%}.booking-area-grid .button{display:block;width:100%;margin:7px 0 0}.muted{overflow-wrap:anywhere}
}


/* Mobile account pages: use the actual device viewport and prevent desktop-width controls. */
.wrap{width:calc(100% - 40px);box-sizing:border-box}
.card{box-sizing:border-box}
button,.button{box-sizing:border-box}

@media(max-width:700px){
  .wrap{width:calc(100% - 24px);max-width:none;margin:16px auto;padding:0}
  .card{padding:18px 16px;border-radius:12px}
  .top{width:100%;box-sizing:border-box}
  .top>div{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .top .button{width:100%;min-width:0;margin:0}
  .booking-area-grid{grid-template-columns:1fr;gap:12px}
  .booking-area-grid .card{min-width:0}
  .booking-area-grid .button{display:block;width:100%;margin:8px 0 0;box-sizing:border-box}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  input,textarea,select{width:100%;max-width:100%;min-width:0}
  .card form{width:100%;max-width:100%}
  .card form button{width:100%}
  .responsive-table{overflow:visible}
}

@media(max-width:420px){
  .wrap{width:calc(100% - 20px);margin-top:12px}
  .card{padding:15px 13px}
  .card h1{font-size:1.4rem}
  .card h2{font-size:1.15rem}
}

/* Profile image upload/preview only; does not affect the navbar avatar. */
.profile-avatar-preview{width:72px;height:72px;display:grid;place-items:center;border:1px solid #5b526f;border-radius:50%;overflow:hidden;background:transparent;color:#5b526f;font-weight:700;font-size:24px;margin:4px 0 10px}
.profile-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-upload input[type=file]{padding:8px;background:#fff}
.avatar-upload small{display:block;color:#777;font-weight:400;margin-top:-8px;margin-bottom:14px}