/* Branding → Button Style on the Standard page layout (Modern, Classic, Blank).
 *
 * The 12 button styles in public_site_base.css (.btn-<style> .pub-btn, one
 * class deep) lost to the template skins, which load later and colour /
 * shape every button (e.g. Modern's pill hero and room buttons), so most
 * styles looked the same. Linked after the skin only when the layout is
 * standard (base.html); the other layouts draw their own buttons and the
 * editor greys out the styles they ignore (template_tiers.SKELETON_UNSUPPORTED).
 *
 * Colours come from the owner's palette. Words on a filled button use the
 * skin's "readable on primary" colour. "Ghost" buttons (the second button on
 * a hero / banner) keep the template's look and only follow the corners.
 */

body.skel-standard {
    --bs-on: var(--md-on-primary, var(--cl-on-primary, var(--bk-on-primary, #fff)));
    --bs-fill: var(--primary, #2563eb);
    --bs-fill-2: var(--secondary, #1e40af);
}

/* Every button that takes the style */
body.skel-standard .pub-btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; }

/* ── Corners ── */
body.skel-standard.btn-rounded .pub-btn { border-radius: 8px; }
body.skel-standard.btn-pill .pub-btn { border-radius: 9999px; }
body.skel-standard.btn-square .pub-btn { border-radius: 0; }
body.skel-standard.btn-outline .pub-btn { border-radius: 8px; }
body.skel-standard.btn-soft .pub-btn { border-radius: 14px; }
body.skel-standard.btn-glass .pub-btn { border-radius: 12px; }
body.skel-standard.btn-gradient .pub-btn { border-radius: 10px; }
body.skel-standard.btn-elevated .pub-btn { border-radius: 8px; }
body.skel-standard.btn-neon .pub-btn { border-radius: 8px; }
body.skel-standard.btn-underline .pub-btn { border-radius: 0; }
body.skel-standard.btn-split .pub-btn { border-radius: 8px; }
body.skel-standard.btn-minimal .pub-btn { border-radius: 6px; }

/* ── Filled styles: Rounded / Pill / Square keep the template's own colours
   (e.g. Classic's light hero button on photos) and change the corners;
   Soft and Elevated add their shadow; Glass, Gradient and Split repaint ── */
body.skel-standard.btn-soft .pub-btn:not(.pub-btn-ghost) {
    border-color: transparent;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--bs-fill) 32%, transparent), 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.skel-standard.btn-soft .pub-btn:not(.pub-btn-ghost):hover { transform: translateY(-2px); }
body.skel-standard.btn-elevated .pub-btn:not(.pub-btn-ghost) {
    box-shadow: 0 4px 0 var(--bs-fill-2), 0 6px 16px rgba(0, 0, 0, 0.14);
    margin-bottom: 4px;
}
body.skel-standard.btn-elevated .pub-btn:not(.pub-btn-ghost):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bs-fill-2); }

body.skel-standard.btn-glass .pub-btn:not(.pub-btn-ghost) {
    background: color-mix(in srgb, var(--bs-fill) 78%, transparent);
    color: var(--bs-on);
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 20px rgba(0, 0, 0, 0.14);
}
body.skel-standard.btn-gradient .pub-btn:not(.pub-btn-ghost) {
    background: linear-gradient(135deg, var(--bs-fill) 0%, var(--bs-fill-2) 100%);
    color: var(--bs-on);
    border: 1px solid transparent;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--bs-fill) 35%, transparent);
}
body.skel-standard.btn-split .pub-btn:not(.pub-btn-ghost) {
    background: linear-gradient(90deg, var(--bs-fill) 50%, var(--bs-fill-2) 50%);
    color: var(--bs-on);
    border: 1px solid transparent;
    box-shadow: none;
}

/* ── Line / text styles (links only: a form's submit button, e.g. the
   booking box on a dark card, keeps its fill and takes the corners) ── */
body.skel-standard:is(.btn-outline, .btn-neon) .pub-btn:not(.pub-btn-ghost):not(button) {
    background: transparent;
    color: var(--primary, #2563eb);
    border: 2px solid currentColor;
}
body.skel-standard.btn-outline .pub-btn:not(.pub-btn-ghost):not(button) { box-shadow: none; }
body.skel-standard:is(.btn-outline, .btn-neon) .pub-btn:not(.pub-btn-ghost):not(button):hover {
    background: var(--bs-fill);
    border-color: var(--bs-fill);
    color: var(--bs-on);
}
body.skel-standard.btn-neon .pub-btn:not(.pub-btn-ghost):not(button) {
    box-shadow: 0 0 10px color-mix(in srgb, currentColor 55%, transparent), inset 0 0 8px color-mix(in srgb, currentColor 20%, transparent);
}
body.skel-standard.btn-underline .pub-btn:not(.pub-btn-ghost):not(button) {
    background: transparent;
    color: var(--primary, #2563eb);
    border: 0;
    border-bottom: 2px solid currentColor;
    box-shadow: none;
    padding-left: 4px;
    padding-right: 4px;
}
body.skel-standard.btn-minimal .pub-btn:not(.pub-btn-ghost):not(button) {
    background: transparent;
    color: var(--primary, #2563eb);
    border: 1px solid transparent;
    box-shadow: none;
}
/* the base's short animated line is replaced by the full-width border */
body.skel-standard.btn-underline .pub-btn::after { display: none; }
body.skel-standard:is(.btn-underline, .btn-minimal) .pub-btn:not(.pub-btn-ghost):not(button):hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}
/* Dark / accent / photo sections and the hero: line and text styles turn
   white so they read on the dark surface */
body.skel-standard:is(.btn-outline, .btn-neon, .btn-underline, .btn-minimal) :is(.pub-section-hero, .pub-section-dark, .pub-section-accent, .pub-cta, .pub-section-bg-image) .pub-btn:not(.pub-btn-ghost):not(:is(.pub-room-card, .pub-card) *) {
    color: #fff;
    border-color: #fff;
}
body.skel-standard:is(.btn-underline, .btn-minimal) :is(.pub-section-hero, .pub-section-dark, .pub-section-accent, .pub-cta, .pub-section-bg-image) .pub-btn:not(.pub-btn-ghost):not(:is(.pub-room-card, .pub-card) *) {
    border-color: transparent;
    border-bottom-color: #fff;
}
body.skel-standard.btn-minimal :is(.pub-section-hero, .pub-section-dark, .pub-section-accent, .pub-cta, .pub-section-bg-image) .pub-btn:not(.pub-btn-ghost):not(:is(.pub-room-card, .pub-card) *) { border-bottom-color: transparent; }
/* Form submit buttons (booking box, contact form) stay filled with line /
   text styles: the base styles made them see-through, and on Blank the
   words were white on a white card. */
body.skel-standard:is(.btn-outline, .btn-neon, .btn-underline, .btn-minimal) button.pub-btn:not(.pub-btn-ghost) {
    background: var(--bs-fill);
    color: var(--bs-on);
    border: 2px solid var(--bs-fill);
    padding-left: 24px;
    padding-right: 24px;
}
body.skel-standard.btn-underline button.pub-btn:not(.pub-btn-ghost) { border-radius: 0; }