/* ==========================================================================
   Culinow — modal / popup action buttons
   --------------------------------------------------------------------------
   One component for every action button that appears inside a popup, so the
   modals stop each inventing their own button. The reference is the "I made
   this" upload button: full width, 48px tall, pill radius, bold.

   Scope note: these rules attach to buttons that already carry .btn (or are a
   form's submit) inside a modal container. Close "x" controls and icon-only
   buttons do not carry .btn, so they are deliberately untouched — turning a
   close icon into a full-width pink pill is exactly the kind of breakage a
   blanket "every button in a modal" selector causes.

   Opt out of any single button with class="cu-btn-plain".
   ========================================================================== */

:root{
    --cu-mbtn-h: 48px;
    --cu-mbtn-radius: 50px;
    --cu-mbtn-pad: .85rem 1.5rem;
    --cu-mbtn-font: .95rem;
    --cu-mbtn-weight: 700;
    --cu-mbtn-primary: #F43F5E;
    --cu-mbtn-primary-hover: #E11D48;
    --cu-mbtn-primary-active: #BE123C;
}

/* ---- the component ---- */
.cu-mbtn,
.modal-content .btn:not(.cu-btn-plain),
.modal-content .btn-primary:not(.cu-btn-plain),
.modal-content .btn-danger:not(.cu-btn-plain),
.modal-content form button[type="submit"]:not(.cu-btn-plain),
.app-sheet-panel .btn:not(.cu-btn-plain),
.app-sheet-panel .btn-primary:not(.cu-btn-plain),
.app-sheet-panel form button[type="submit"]:not(.cu-btn-plain),
.cwm-panel .btn:not(.cu-btn-plain){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;                       /* consistent icon/label spacing */
    width: 100%;
    min-height: var(--cu-mbtn-h);
    padding: var(--cu-mbtn-pad);
    border: none;
    border-radius: var(--cu-mbtn-radius);
    font-size: var(--cu-mbtn-font);
    font-weight: var(--cu-mbtn-weight);
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease, opacity .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Icons sit on the text baseline rather than drifting above it. */
.cu-mbtn i,
.modal-content .btn:not(.cu-btn-plain) i,
.app-sheet-panel .btn:not(.cu-btn-plain) i,
.cwm-panel .btn:not(.cu-btn-plain) i{
    font-size: .95em;
    line-height: 1;
    flex: 0 0 auto;
}

/* ---- primary ---- */
.cu-mbtn-primary,
.modal-content .btn-submit:not(.cu-btn-plain),
.modal-content .btn-primary:not(.cu-btn-plain),
.modal-content form button[type="submit"]:not(.cu-btn-plain),
.app-sheet-panel .btn-primary:not(.cu-btn-plain),
.app-sheet-panel form button[type="submit"]:not(.cu-btn-plain){
    background: var(--cu-mbtn-primary);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(244, 63, 94, .2);
}
.cu-mbtn-primary:hover,
.modal-content .btn-submit:not(.cu-btn-plain):hover,
.modal-content .btn-primary:not(.cu-btn-plain):hover,
.modal-content form button[type="submit"]:not(.cu-btn-plain):hover,
.app-sheet-panel form button[type="submit"]:not(.cu-btn-plain):hover{
    background: var(--cu-mbtn-primary-hover);
    color: #fff;
    box-shadow: 0 6px 12px -2px rgba(244, 63, 94, .3);
}
.cu-mbtn-primary:active,
.modal-content .btn-submit:not(.cu-btn-plain):active,
.modal-content form button[type="submit"]:not(.cu-btn-plain):active{
    background: var(--cu-mbtn-primary-active);
    transform: translateY(1px);
    box-shadow: 0 2px 4px -1px rgba(244, 63, 94, .25);
}

/* ---- secondary: same geometry, clearly not the main action ---- */
.cu-mbtn-secondary,
.modal-content .btn-cancel:not(.cu-btn-plain),
.modal-content .btn-secondary:not(.cu-btn-plain){
    background: #fff;
    color: #374151;
    border: 1px solid #E5E7EB;
    box-shadow: none;
}
.cu-mbtn-secondary:hover,
.modal-content .btn-cancel:not(.cu-btn-plain):hover,
.modal-content .btn-secondary:not(.cu-btn-plain):hover{
    background: #F9FAFB;
    border-color: #D1D5DB;
    color: #111827;
}
.cu-mbtn-secondary:active,
.modal-content .btn-cancel:not(.cu-btn-plain):active{
    background: #F3F4F6;
    transform: translateY(1px);
}

/* ---- disabled / busy: one look for both ---- */
.cu-mbtn:disabled,
.cu-mbtn[disabled],
.cu-mbtn.btn-disabled,
.modal-content .btn:not(.cu-btn-plain):disabled,
.modal-content .btn:not(.cu-btn-plain).btn-disabled,
.modal-content form button[type="submit"]:not(.cu-btn-plain):disabled,
.app-sheet-panel .btn:not(.cu-btn-plain):disabled{
    background: #E5E7EB;
    color: #9CA3AF;
    border-color: #E5E7EB;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .8;
    transform: none;
}

/* Keyboard focus stays visible — the buttons are pill-shaped, so the ring
   must follow the radius rather than a rectangle. */
.cu-mbtn:focus-visible,
.modal-content .btn:not(.cu-btn-plain):focus-visible,
.app-sheet-panel .btn:not(.cu-btn-plain):focus-visible{
    outline: 2px solid var(--cu-mbtn-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Geometry normalisation.

   Several modals set their own radius/padding through higher-specificity
   selectors (id-scoped rules), which would otherwise leave a 10px-radius
   "Submit" sitting next to a 50px-radius "Upload photo". Only the shape
   properties are forced here — colour is left alone so each modal can still
   express primary vs secondary.
   -------------------------------------------------------------------------- */
.modal-content .btn:not(.cu-btn-plain),
.modal-content .btn-primary:not(.cu-btn-plain),
.modal-content .btn-danger:not(.cu-btn-plain),
.modal-content form button[type="submit"]:not(.cu-btn-plain),
.modal-content .btn-cancel:not(.cu-btn-plain),
.modal-content .btn-submit:not(.cu-btn-plain),
.app-sheet-panel .btn:not(.cu-btn-plain),
.app-sheet-panel .btn-primary:not(.cu-btn-plain),
.cwm-panel .btn:not(.cu-btn-plain),
.cu-mbtn{
    min-height: var(--cu-mbtn-h) !important;
    padding: var(--cu-mbtn-pad) !important;
    border-radius: var(--cu-mbtn-radius) !important;
    font-size: var(--cu-mbtn-font) !important;
    font-weight: var(--cu-mbtn-weight) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
}

/* --------------------------------------------------------------------------
   Modal headings. Kept alongside the buttons so a popup's title and its actions
   are defined in one place rather than drifting apart per modal.
   -------------------------------------------------------------------------- */
.modal-content h2{
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

/* ---- side-by-side pairs stay side by side on desktop ---- */
.cu-mbtn-row{
    display: flex;
    gap: .6rem;
    width: 100%;
}
.cu-mbtn-row > .cu-mbtn{ flex: 1 1 0; }

/* ---- mobile: full width, stacked, thumb-sized ---- */
@media (max-width: 640px){
    :root{ --cu-mbtn-h: 50px; }
    .cu-mbtn-row{ flex-direction: column; }
    .cu-mbtn,
    .modal-content .btn:not(.cu-btn-plain),
    .app-sheet-panel .btn:not(.cu-btn-plain){
        width: 100%;
        font-size: 1rem;
    }
}

/* Respect a reduced-motion preference: keep the colour change, drop the shift. */
@media (prefers-reduced-motion: reduce){
    .cu-mbtn, .modal-content .btn, .app-sheet-panel .btn, .cwm-panel .btn{
        transition: background-color .18s ease;
    }
    .cu-mbtn:active, .modal-content .btn:active{ transform: none; }
}