/* Salon branding v8.1: premium, large, frame-free salon identity.
   Keep this file after /assets/style.css; no database or booking logic changes. */

/* Staff sidebar: larger mark, no white tile, room for longer salon names. */
.sidebar .brand {
    min-height:132px;
    padding:21px 14px;
    gap:13px;
    align-items:center;
}
.sidebar .brand .brand-logo-wrap {
    width:84px;
    height:84px;
    flex:0 0 84px;
    display:grid;
    place-items:center;
    overflow:visible;
    background:transparent;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
}
.sidebar .brand .brand-logo {
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    border:0;
    background:transparent;
    border-radius:0;
    image-rendering:auto;
}
.sidebar .brand .brand-name {
    min-width:0;
    flex:1 1 auto;
    display:block;
}
.sidebar .brand .brand-name strong {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    white-space:normal;
    overflow:hidden;
    overflow-wrap:anywhere;
    max-width:100%;
    font-size:16px;
    font-weight:750;
    letter-spacing:-.025em;
    line-height:1.22;
    color:#fff6fb;
}
.sidebar .brand .brand-name small {
    display:block;
    font-size:9px;
    font-weight:650;
    letter-spacing:.15em;
    color:#cbb6c7;
    margin-top:8px;
    overflow-wrap:anywhere;
}

/* Larger mark on the public appointment form, with no box/canvas. */
.booking-header .booking-salon-logo {
    display:block;
    width:auto;
    height:auto;
    max-width:min(220px,74vw);
    max-height:165px;
    margin:0 auto 20px;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    object-fit:contain;
    image-rendering:auto;
}

/* Clearly branded sign-in page, without a forced white icon tile. */
.auth-card .auth-salon-logo {
    display:block;
    width:auto;
    height:auto;
    max-width:min(210px,65vw);
    max-height:145px;
    margin:0 0 23px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    object-fit:contain;
    image-rendering:auto;
}

/* Settings preview: show the brand at a useful size in its actual aspect ratio. */
.salon-branding-panel .panel-head p {
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
    margin-top:6px;
}
.salon-logo-preview {
    display:flex;
    align-items:center;
    gap:20px;
    padding:23px;
    margin:18px 0;
    background:#faf7f9;
    border:1px solid #efe6eb;
    border-radius:15px;
}
.salon-logo-preview > img {
    display:block;
    flex:0 0 auto;
    width:auto;
    height:auto;
    max-width:125px;
    max-height:115px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    object-fit:contain;
}
.salon-logo-preview .salon-logo-empty {
    display:grid;
    place-items:center;
    flex:0 0 95px;
    width:95px;
    height:90px;
    background:#f0e3eb;
    border-radius:12px;
    color:#84566f;
    font-size:28px;
}
.salon-logo-preview div {min-width:0}
.salon-logo-preview strong {display:block;font-size:15px;overflow-wrap:anywhere}
.salon-logo-preview small {display:block;color:var(--muted);margin-top:7px}
.salon-branding-form {display:flex;flex-direction:column;gap:10px}
.salon-branding-form label {font-size:12px;font-weight:750}
.salon-branding-form input[type=file] {
    width:100%;max-width:100%;background:#fff;border:1px dashed #cdb8c6;
    border-radius:10px;padding:12px;cursor:pointer;font-size:12px;
}
.salon-branding-form input::file-selector-button {
    border:0;border-radius:6px;padding:8px 10px;margin-right:12px;
    background:#f2e6ed;color:#61374f;font-weight:700;cursor:pointer;
}
.salon-branding-form small {font-size:11px;line-height:1.5;color:var(--muted)}
.salon-branding-form .btn {align-self:flex-start;margin-top:5px}
.salon-logo-remove-form {margin-top:14px}

/* Only opaque square graphics with a uniform background get a circular crop.
   Transparent PNGs and landscape wordmarks are shown in full. */
.sidebar .brand .brand-logo.salon-logo-square-opaque,
.booking-header .booking-salon-logo.salon-logo-square-opaque,
.auth-card .auth-salon-logo.salon-logo-square-opaque,
.salon-logo-preview > img.salon-logo-square-opaque {
    clip-path:circle(47.5% at 50% 50%);
}
@media (max-width:760px) {
    .sidebar .brand {min-height:120px;padding:17px 14px}
    .sidebar .brand .brand-logo-wrap {width:76px;height:76px;flex-basis:76px}
}
@media (max-width:600px) {
    .booking-header .booking-salon-logo {max-height:135px;max-width:min(195px,70vw);margin-bottom:17px}
    .auth-card .auth-salon-logo {max-height:125px}
    .salon-logo-preview {padding:15px;gap:14px}
    .salon-logo-preview > img {max-width:95px;max-height:85px}
    .salon-logo-preview .salon-logo-empty {width:80px;height:80px;flex-basis:80px}
}