/**
 * Button component library, pulled from the Figma "01 - Brand & Design
 * System" file, "buttons" frame (node 6:255) - 6 types x 5 states x 3 sizes.
 * Requires variables.css to be linked first (uses its color/font tokens).
 *
 * USAGE
 * -----
 * Text-label buttons (primary/secondary/outline/text/whatsapp):
 *   <button class="btn-primary btn-md">Enquire Now</button>
 *   <a class="btn-outline btn-lg" href="...">View Floorplans</a>
 *
 * With an icon (order in the DOM decides left vs. right placement - the
 * button is a flex row with an 8px gap, so an <img class="btn-icon"> before
 * or after the label positions itself automatically):
 *   <button class="btn-primary btn-md">
 *       <img class="btn-icon" src="/assets/images/icons/icon-mail.svg" alt="" />
 *       <span class="btn-label">Send Message</span>
 *   </button>
 *
 * Icon-only buttons (square, no label):
 *   <button class="btn-icon-primary btn-md" aria-label="Next">
 *       <img class="btn-icon" src="/assets/images/icons/icon-arrow-right.svg" alt="" />
 *   </button>
 *
 * Loading state: every button that should ever show a loading state needs a
 * .btn-spinner span as its first child (hidden until .is-loading is added -
 * pure CSS can't inject it, so the markup reserves the slot up front). Wrap
 * the visible text in .btn-label so only the label dims, not the spinner:
 *   <button class="btn-primary btn-md is-loading">
 *       <span class="btn-spinner" aria-hidden="true"></span>
 *       <span class="btn-label">Enquire Now</span>
 *   </button>
 *
 * Disabled state: use the native disabled attribute on <button>, or the
 * .is-disabled class on <a> (which can't take the disabled attribute).
 */

/* ---------------------------------------------------------------------
 * Shared base - every button type gets this
 * --------------------------------------------------------------------- */

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-text,
.btn-whatsapp,
.btn-icon-primary,
.btn-icon-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.btn-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 * Sizes - combine with any text-label button type (.btn-primary etc. are
 * medium-sized by default; .btn-md is provided for explicitness).
 * --------------------------------------------------------------------- */

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-text,
.btn-whatsapp,
.btn-md {
    height: 44px;
    padding: 12px 24px;
    font-size: 14px;
}

.btn-sm {
    height: 32px;
    padding: 8px 16px;
    font-size: 12px;
}

.btn-lg {
    height: 52px;
    padding: 16px 32px;
    font-size: 15px;
}

/* Icon-only buttons are perfect squares - width follows height, no padding. */
.btn-icon-primary,
.btn-icon-outline {
    width: 44px;
    height: 44px;
    padding: 0;
}

.btn-icon-primary.btn-sm,
.btn-icon-outline.btn-sm {
    width: 32px;
    height: 32px;
}

.btn-icon-primary.btn-lg,
.btn-icon-outline.btn-lg {
    width: 52px;
    height: 52px;
}

/* ---------------------------------------------------------------------
 * 01 / Primary Button - high prominence actions
 * --------------------------------------------------------------------- */

.btn-primary,
.btn-icon-primary {
    background-color: var(--color-primary-green);
    color: var(--color-white);
}

.btn-primary:hover,
.btn-icon-primary:hover {
    background-color: #145238;
}

.btn-primary:active,
.btn-icon-primary:active {
    background-color: var(--color-dark-green);
}

.btn-primary:disabled,
.btn-primary.is-disabled,
.btn-icon-primary:disabled,
.btn-icon-primary.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * 02 / Secondary Button - refined alternative, champagne gold
 * --------------------------------------------------------------------- */

.btn-secondary {
    background-color: var(--color-champagne-gold);
    color: var(--color-primary-green);
}

.btn-secondary:hover {
    background-color: #E1B867;
}

.btn-secondary:active {
    background-color: #C4943E;
}

.btn-secondary:disabled,
.btn-secondary.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * 03 / Outline Button - secondary/quiet actions
 * --------------------------------------------------------------------- */

.btn-outline,
.btn-icon-outline {
    background-color: transparent;
    border: 1px solid var(--color-primary-green);
    color: var(--color-primary-green);
}

.btn-outline:hover,
.btn-icon-outline:hover {
    background-color: rgba(12, 59, 42, 0.08);
}

.btn-outline:active,
.btn-icon-outline:active {
    background-color: rgba(12, 59, 42, 0.15);
}

.btn-outline:disabled,
.btn-outline.is-disabled,
.btn-icon-outline:disabled,
.btn-icon-outline.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * 04 / Text Button - minimalist link-style trigger, underlines on hover only
 * --------------------------------------------------------------------- */

.btn-text {
    background-color: transparent;
    color: var(--color-primary-green);
}

.btn-text:hover {
    text-decoration: underline;
}

.btn-text:disabled,
.btn-text.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: none;
}

/* ---------------------------------------------------------------------
 * 05 / WhatsApp Button - immediate direct outreach
 * --------------------------------------------------------------------- */

.btn-whatsapp {
    background-color: #25D366;
    color: var(--color-white);
}

.btn-whatsapp:hover {
    background-color: #1EBE57;
}

.btn-whatsapp:active {
    background-color: #128C7E;
}

.btn-whatsapp:disabled,
.btn-whatsapp.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * Loading state - works the same way across every button type. The icon
 * (if any) is swapped out for the spinner; the label dims but stays
 * readable; the button background stays at full opacity (unlike disabled).
 * --------------------------------------------------------------------- */

.btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url('/assets/images/icons/icon-spinner.svg');
    mask-image: url('/assets/images/icons/icon-spinner.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.is-loading {
    pointer-events: none;
    cursor: default;
}

.is-loading .btn-spinner {
    display: inline-block;
}

.is-loading .btn-icon {
    display: none;
}

.is-loading .btn-label {
    opacity: 0.6;
}