@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   PK GLOBAL BUTTON STYLES
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. LOGOUT BUTTON — red expanding circle ─────────────────────────── */
.pkp-logout-btn,
.pkb-signout {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 45px !important;
    height: 45px !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: width .3s, border-radius .3s !important;
    box-shadow: 2px 2px 10px rgba(0,0,0,.20) !important;
    background-color: rgb(255,65,65) !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
.pkp-logout-btn .pkp-logout-icon,
.pkb-signout .pkb-signout-icon {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width .3s;
    flex-shrink: 0;
}
.pkp-logout-btn .pkp-logout-icon svg,
.pkb-signout .pkb-signout-icon svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.pkp-logout-btn .pkp-logout-icon svg path,
.pkb-signout .pkb-signout-icon svg path { fill: white; }

.pkp-logout-btn .pkp-logout-text,
.pkb-signout .pkb-signout-text {
    position: absolute;
    right: 0;
    width: 0;
    opacity: 0;
    color: white;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    transition: opacity .3s, width .3s;
}
.pkp-logout-btn:hover,
.pkb-signout:hover {
    width: 110px !important;
    border-radius: 40px !important;
    color: #fff !important;
    text-decoration: none !important;
}
.pkp-logout-btn:hover .pkp-logout-icon,
.pkb-signout:hover .pkb-signout-icon { width: 30%; padding-left: 14px; }
.pkp-logout-btn:hover .pkp-logout-text,
.pkb-signout:hover .pkb-signout-text { opacity: 1; width: 70%; padding-right: 10px; }
.pkp-logout-btn:active,
.pkb-signout:active { transform: translate(2px, 2px); }

/* ── 2. UPLOAD PHOTOS BUTTON — green camera ──────────────────────────── */
.pkp-upload-photos-btn,
.pkb-upload-photos-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    height: 40px !important;
    border: none !important;
    background: #1FA17A !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: .3px !important;
    transition: background .2s !important;
    text-shadow: none !important;
}
.pkp-upload-photos-btn:hover,
.pkb-upload-photos-btn:hover {
    background: #15803d !important;
    color: #fff !important;
}
.pkp-upload-photos-btn:hover svg,
.pkb-upload-photos-btn:hover svg {
    animation: pkp-flicker 2s linear infinite;
}
@keyframes pkp-flicker {
    0%,50%,52%,56%,90%,94%,98%  { opacity: 1; }
    54%,92%,96%,99%,100%         { opacity: 0; }
}

/* ── 3. PRIMARY BUTTON — filled default, outline on hover ────────────── */
.pkp-btn-primary,
.pkb-btn-save,
.pkp-auth-submit,
.pkb-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 22px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all .2s ease-in !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    background: #1FA17A !important;
    color: #fff !important;
    border: 2px solid #1FA17A !important;
    text-shadow: none !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(31,161,122,.25) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: auto !important;
}
.pkp-btn-primary:hover,
.pkb-btn-save:hover,
.pkp-auth-submit:hover {
    background: transparent !important;
    color: #1FA17A !important;
    border-color: #1FA17A !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/* Full width submit buttons stay full width */
.pkp-auth-submit,
input[type="submit"].pkp-auth-submit { width: 100% !important; display: block !important; }

/* Blue variant (register button) */
.pkp-auth-submit--blue {
    background: #0972b9 !important;
    border-color: #0972b9 !important;
}
.pkp-auth-submit--blue:hover {
    background: transparent !important;
    color: #0972b9 !important;
    border-color: #0972b9 !important;
}

/* ── 4. SECONDARY BUTTON — neumorphic ripple ─────────────────────────── */
.pkp-btn-secondary,
.pkb-btn-cancel,
.pkp-btn-secondary-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all .2s ease-in !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    color: #1e293b !important;
    padding: 11px 22px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 8px !important;
    background: #e8e8e8 !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff !important;
    text-decoration: none !important;
}
.pkp-btn-secondary:active,
.pkb-btn-cancel:active {
    color: #666 !important;
    box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff !important;
}
.pkp-btn-secondary::before,
.pkb-btn-cancel::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0,0,0,.05);
    border-radius: 50%;
    display: block;
    transition: all .5s .1s cubic-bezier(.55,0,.1,1);
    z-index: -1;
}
.pkp-btn-secondary::after,
.pkb-btn-cancel::after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #0972b9;
    border-radius: 50%;
    display: block;
    transition: all .5s .1s cubic-bezier(.55,0,.1,1);
    z-index: -1;
}
.pkp-btn-secondary:hover,
.pkb-btn-cancel:hover {
    color: #ffffff !important;
    border: 1px solid #0972b9 !important;
    text-decoration: none !important;
}
.pkp-btn-secondary:hover::before,
.pkb-btn-cancel:hover::before {
    top: -35%;
    background-color: #0972b9;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
.pkp-btn-secondary:hover::after,
.pkb-btn-cancel:hover::after {
    top: -45%;
    background-color: #0972b9;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

/* ── 5. Action buttons (Flag/Resolve/Edit/Delete) ────────────────────── */
.pkp-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all .2s !important;
    min-width: 76px !important;
    height: 30px !important;
    vertical-align: middle !important;
    border: none !important;
}
.pkp-action-btn--flag    { background:#fffbeb; color:#92400e; border:1.5px solid #fef3c7 !important; }
.pkp-action-btn--flag:hover    { background:var(--pk-warning,#f59e0b); color:#fff; border-color:var(--pk-warning,#f59e0b) !important; }
.pkp-action-btn--resolve { background:#f0fdf4; color:#15803d; border:1.5px solid #bbf7d0 !important; }
.pkp-action-btn--resolve:hover { background:#1FA17A; color:#fff; border-color:#1FA17A !important; }
.pkp-action-btn--edit    { background:#eff6ff; color:#1d4ed8; border:1.5px solid #bfdbfe !important; text-decoration:none; }
.pkp-action-btn--edit:hover    { background:#0972b9; color:#fff; border-color:#0972b9 !important; text-decoration:none; }
.pkp-action-btn--delete  { background:#fef2f2; color:#ef4444; border:1.5px solid #fecaca !important; min-width:36px !important; padding:6px 8px !important; }
.pkp-action-btn--delete:hover  { background:#ef4444; color:#fff; border-color:#ef4444 !important; }


/* ── Camera upload button label ──────────────────────────────────────── */
#pkp-upload-photos, #pkb-upload-photos,
#pkb-choose-files, #pkb-edit-choose-files,
#pkb-edit-upload-photos {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    height: 40px !important;
    border: none !important;
    background: #1FA17A !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    transition: background .2s !important;
    text-shadow: none !important;
    appearance: none !important;
}
#pkp-upload-photos:hover, #pkb-upload-photos:hover,
#pkb-choose-files:hover, #pkb-edit-choose-files:hover,
#pkb-edit-upload-photos:hover {
    background: #15803d !important;
    color: #fff !important;
}
#pkp-upload-photos:hover svg, #pkb-upload-photos:hover svg,
#pkb-choose-files:hover svg, #pkb-edit-choose-files:hover svg {
    animation: pkp-flicker 2s linear infinite;
}
.pkp-upload-label { color: #fff; font-weight: 600; font-size: 14px; }

/* ── Remove all emojis from button values (handled via ::before trick) ── */
.pkp-btn-primary::before,
.pkp-btn-secondary::before { font-style: normal; }

/* ══════════════════════════════════════════════════════════════════════
   BETHANY MOBILE HEADER FIX
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pkb-header {
        display: grid !important;
        grid-template-areas:
            "logo signout"
            "msg  msg" !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        gap: 6px 12px !important;
        padding: 14px !important;
    }
    .pkb-header-left { display: contents !important; }
    .pkb-header-left img {
        grid-area: logo !important;
        height: 28px !important;
        align-self: center !important;
    }
    .pkb-header-left div {
        grid-area: msg !important;
        padding: 0 !important;
    }
    .pkb-header-left div h2 { font-size: 13px !important; margin: 0 0 1px !important; }
    .pkb-header-left div p  { font-size: 11px !important; margin: 0 !important; }
    .pkb-signout {
        grid-area: signout !important;
        align-self: center !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON BORDER-RADIUS — same everywhere
   ══════════════════════════════════════════════════════════════════════ */
.pkp-btn,
.pkp-btn-primary,
.pkp-btn-secondary,
.pkp-action-btn,
.pkp-action-btn--edit,
.pkp-action-btn--flag,
.pkp-action-btn--resolve,
.pkp-action-btn--delete,
.pkb-btn,
.pkb-btn--save,
.pkb-btn--cancel,
.pkb-btn--edit,
.pkb-btn--dl,
.pkb-btn--ml,
button.pkp-btn-primary,
a.pkp-btn-primary,
a.pkp-btn-secondary,
input[type="submit"].pkp-auth-submit {
    border-radius: 8px !important;
}

/* Upload photo buttons — keep pill shape */
#pkp-upload-photos, #pkb-upload-photos,
#pkb-choose-files, #pkb-edit-choose-files,
#pkb-edit-upload-photos,
.pkp-upload-photos-btn,
.pkb-upload-photos-btn { border-radius: 20px !important; }

/* Logout stays circular/pill */
.pkp-logout-btn, .pkb-signout { border-radius: 50% !important; }
.pkp-logout-btn:hover, .pkb-signout:hover { border-radius: 40px !important; }

/* ── Bethany upload buttons — override to camera green pill style ─────── */
#pkb-do-upload,
#pkb-edit-do-upload {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    height: 40px !important;
    border: none !important;
    background: #1FA17A !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    transition: background .2s !important;
    text-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
#pkb-do-upload:hover,
#pkb-edit-do-upload:hover {
    background: #15803d !important;
    color: #fff !important;
}
#pkb-do-upload:disabled,
#pkb-edit-do-upload:disabled {
    background: #94a3b8 !important;
    cursor: not-allowed !important;
}

/* ── Bethany pkb-btn styles match admin pkp-btn ──────────────────────── */
.pkb-btn--save {
    background: #1FA17A !important;
    color: #fff !important;
    border: 2px solid #1FA17A !important;
    box-shadow: 0 4px 12px rgba(31,161,122,.25) !important;
}
.pkb-btn--save:hover {
    background: transparent !important;
    color: #1FA17A !important;
    border-color: #1FA17A !important;
}
.pkb-btn--cancel {
    background: #e8e8e8 !important;
    color: #1e293b !important;
    border: 1px solid #e8e8e8 !important;
}