/* =====================================================
   KICKWISE — GLOBAL SHARE MENU
   Reusable share trigger + modal system.

   Icon-only action trigger follows the Employer Dashboard
   Recent Applicants action-button visual language.
===================================================== */

.kw-share-menu,
.kw-share-menu * {
    box-sizing: border-box;
}

.kw-share-menu {
    position: relative;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    font-family: "Montserrat", "Manrope", "Inter", Arial, sans-serif;
}

/* =====================================================
   Shared icon button language
   Use .kw-action-icon for future icon-only buttons.
===================================================== */

.kw-action-icon,
.kw-share-menu__toggle {
    position: relative;
    flex-shrink: 0 !important;
    align-self: center !important;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 49, 114, 0.06) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(0, 49, 114, 0.06) 0%, rgba(0, 49, 114, 0.03) 100%) !important;
    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.025),
        0 0 0 1px rgba(255,255,255,0.28) inset !important;
    color: #003172 !important;
    text-decoration: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer;
    transform: none !important;
    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        color 0.18s ease !important;
}

.kw-action-icon::after,
.kw-share-menu__toggle::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    opacity: 0.42;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(193, 255, 114, 0.16) 0%, rgba(193, 255, 114, 0.06) 38%, rgba(193, 255, 114, 0) 72%);
}


.kw-action-icon::before,
.kw-share-menu__toggle::before {
    content: "";
    position: absolute;
    top: 0;
    left: -135%;
    z-index: 1;
    width: 54%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0) 28%,
        rgba(255,255,255,0.42) 49%,
        rgba(255,255,255,0.12) 57%,
        transparent 76%
    );
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}

.kw-action-icon:hover::before,
.kw-action-icon:focus-visible::before,
.kw-share-menu__toggle:hover::before,
.kw-share-menu__toggle:focus-visible::before {
    animation: kwActionIconShimmer 0.72s ease forwards;
}

@keyframes kwActionIconShimmer {
    0% { left: -135%; opacity: 0; }
    20% { opacity: 1; }
    100% { left: 145%; opacity: 0; }
}

.kw-action-icon:hover,
.kw-action-icon:focus-visible,
.kw-share-menu__toggle:hover,
.kw-share-menu__toggle:focus-visible {
    border-color: rgba(193, 255, 114, 0.34) !important;
    background: linear-gradient(180deg, rgba(193, 255, 114, 0.19) 0%, rgba(193, 255, 114, 0.08) 100%) !important;
    box-shadow:
        0 6px 14px rgba(193, 255, 114, 0.16),
        0 2px 6px rgba(0, 49, 114, 0.05) !important;
    color: #003172 !important;
    outline: none !important;
    transform: none !important;
}

.kw-action-icon svg,
.kw-action-icon i,
.kw-share-menu__toggle svg,
.kw-share-menu__toggle i {
    position: relative;
    z-index: 2;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    margin: 0 !important;
    color: #003172 !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 0.95;
    transform: none !important;
}

.kw-share-menu__toggle span,
.kw-action-icon .kw-action-icon__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.kw-share-menu--single .kw-share-menu__toggle,
.kw-share-menu--default .kw-share-menu__toggle,
.kw-share-menu--card .kw-share-menu__toggle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 9px !important;
}

/* Home latest job cards */
.kw-home-section--latest .kw-home-job-card__foot {
    align-items: center;
    justify-content: space-between;
}

.kw-home-job-card__view-link {
    margin-left: auto;
}

.kw-home-section--latest .kw-share-menu--card .kw-share-menu__toggle:hover,
.kw-home-section--latest .kw-share-menu--card .kw-share-menu__toggle:focus-visible {
    transform: none !important;
}

/* Job archive rows */
.kw-job-row .kw-job-title-link {
    color: inherit;
    text-decoration: none;
}

.kw-job-row .kw-job-title-link:hover {
    color: #003172;
}

.kw-job-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.kw-job-actions .kw-view {
    white-space: nowrap;
}

/* Employer archive cards */
.kw-employer-card-footer .kw-share-menu {
    margin-left: auto;
}

.kw-employer-card-footer .kw-employer-link {
    flex: 0 0 auto;
}

/* Single pages */
.kw-share-single-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 14px;
}

.kw-sidebar .kw-share-single-wrap {
    margin-top: 12px;
}

/* Dark mode version of the shared icon action style
   Neutral charcoal language: no green, no navy glow. */
html[data-theme="dark"] .kw-action-icon,
html[data-theme="dark"] .kw-share-menu__toggle {
    border-color: rgba(255, 255, 255, 0.085) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.072) 0%, rgba(255,255,255,0.030) 100%),
        linear-gradient(135deg, rgba(20, 24, 31, 0.98) 0%, rgba(9, 12, 18, 0.98) 100%) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(255,255,255,0.032) inset !important;
    color: rgba(241, 245, 249, 0.88) !important;
}

html[data-theme="dark"] .kw-action-icon::after,
html[data-theme="dark"] .kw-share-menu__toggle::after {
    opacity: 0.52;
    background:
        radial-gradient(circle at 72% 18%, rgba(255,255,255,0.105) 0%, rgba(255,255,255,0.030) 38%, rgba(255,255,255,0) 72%),
        radial-gradient(circle at 18% 84%, rgba(148,163,184,0.090) 0%, rgba(148,163,184,0.025) 42%, rgba(148,163,184,0) 74%);
}

html[data-theme="dark"] .kw-action-icon:hover,
html[data-theme="dark"] .kw-action-icon:focus-visible,
html[data-theme="dark"] .kw-share-menu__toggle:hover,
html[data-theme="dark"] .kw-share-menu__toggle:focus-visible {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.112) 0%, rgba(255,255,255,0.052) 100%),
        linear-gradient(135deg, rgba(28, 32, 40, 0.99) 0%, rgba(12, 15, 22, 0.99) 100%) !important;
    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255,255,255,0.052) inset,
        0 0 18px rgba(255,255,255,0.045) !important;
    color: #ffffff !important;
    outline: none !important;
}

html[data-theme="dark"] .kw-action-icon:hover::after,
html[data-theme="dark"] .kw-action-icon:focus-visible::after,
html[data-theme="dark"] .kw-share-menu__toggle:hover::after,
html[data-theme="dark"] .kw-share-menu__toggle:focus-visible::after {
    opacity: 0.78;
    background:
        radial-gradient(circle at 72% 18%, rgba(255,255,255,0.150) 0%, rgba(255,255,255,0.050) 40%, rgba(255,255,255,0) 74%),
        radial-gradient(circle at 18% 84%, rgba(203,213,225,0.105) 0%, rgba(203,213,225,0.032) 44%, rgba(203,213,225,0) 76%);
}


html[data-theme="dark"] .kw-action-icon::before,
html[data-theme="dark"] .kw-share-menu__toggle::before {
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.24) 49%,
        rgba(203,213,225,0.08) 58%,
        transparent 78%
    );
}

html[data-theme="dark"] .kw-action-icon svg,
html[data-theme="dark"] .kw-action-icon i,
html[data-theme="dark"] .kw-share-menu__toggle svg,
html[data-theme="dark"] .kw-share-menu__toggle i {
    color: rgba(241, 245, 249, 0.92) !important;
    stroke: currentColor !important;
}


/* Blog grid/date row share action
   Used by home blog module and blog archive via partials/blog-grid.blade.php. */
.kw-home-blog-card__date-share {
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.kw-home-blog-card__date-share .kw-home-blog-card__date {
    justify-self: auto !important;
    text-align: right !important;
}

.kw-home-blog-card__date-share .kw-share-menu {
    flex: 0 0 auto !important;
}

.kw-home-blog-card__date-share .kw-share-menu__toggle,
.kw-home-blog-card__date-share .kw-action-icon {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    border-radius: 9px !important;
}

.kw-home-blog-card__date-share .kw-share-menu__toggle svg,
.kw-home-blog-card__date-share .kw-action-icon svg {
    width: 11.5px !important;
    height: 11.5px !important;
    min-width: 11.5px !important;
    min-height: 11.5px !important;
}

@media (max-width: 575px) {
    .kw-home-blog-card__date-share {
        gap: 7px !important;
    }

    .kw-home-blog-card__date-share .kw-share-menu__toggle,
    .kw-home-blog-card__date-share .kw-action-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
    }
}

/* =====================================================
   Modal
===================================================== */

.kw-share-modal-root,
.kw-share-modal-root * {
    box-sizing: border-box;
}

.kw-share-modal-root {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    font-family: "Manrope", "Inter", Arial, sans-serif;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

.kw-share-modal-root.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.kw-share-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 32, .30);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.kw-share-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    max-height: min(720px, calc(100vh - 44px));
    overflow: auto;
    border: 1px solid rgba(0, 49, 114, .08);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 0%, rgba(2, 132, 199, .05), transparent 36%),
        #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .22);
    transform: translateY(12px) scale(.985);
    transition: transform .2s ease;
}

.kw-share-modal-root.is-open .kw-share-modal {
    transform: translateY(0) scale(1);
}

.kw-share-modal-inner {
    padding: 26px 28px 28px;
}

.kw-share-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.kw-share-modal-title {
    margin: 0;
    color: #111827;
    font-family: "Space Grotesk", "Manrope", "Inter", Arial, sans-serif;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.kw-share-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #111827;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.kw-share-modal-close:hover,
.kw-share-modal-close:focus-visible {
    background: rgba(0, 49, 114, .06);
    color: #003172;
    outline: none;
}

.kw-share-modal-close svg {
    width: 23px;
    height: 23px;
}

.kw-share-modal-section-title {
    margin: 0 0 14px;
    color: #111827;
    font-size: 16px;
    font-weight: 720;
    letter-spacing: -.018em;
    line-height: 1.3;
}

.kw-share-modal-platforms {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 23px;
}

.kw-share-platform {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #111827;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.kw-share-platform:focus-visible {
    outline: none;
}

.kw-share-platform-icon {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 11px;
    background: #ffffff;
    color: #ffffff;
    box-shadow: 0 9px 20px rgba(15, 23, 42, .045);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease;
}

.kw-share-platform-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,.46) 50%, rgba(255,255,255,0) 66%, transparent 100%);
    transform: translateX(-145%) skewX(-16deg);
    transition: transform .68s ease;
    pointer-events: none;
}

.kw-share-platform:hover .kw-share-platform-icon,
.kw-share-platform:focus-visible .kw-share-platform-icon {
    transform: translateY(-1px);
    border-color: rgba(0, 49, 114, .14);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .075);
    filter: saturate(1.04);
}

.kw-share-platform:hover .kw-share-platform-icon::after,
.kw-share-platform:focus-visible .kw-share-platform-icon::after {
    transform: translateX(145%) skewX(-16deg);
}

.kw-share-platform-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    color: inherit;
    background: transparent;
}

.kw-share-platform-badge svg {
    display: block;
    width: 20px;
    height: 20px;
}

.kw-share-platform--linkedin .kw-share-platform-badge svg,
.kw-share-platform--facebook .kw-share-platform-badge svg,
.kw-share-platform--telegram .kw-share-platform-badge svg {
    width: 21px;
    height: 21px;
}

.kw-share-platform--x .kw-share-platform-badge svg {
    width: 18px;
    height: 18px;
}

.kw-share-platform-label {
    max-width: 62px;
    overflow: hidden;
    color: #111827;
    font-size: 10.6px;
    font-weight: 560;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kw-share-platform--linkedin .kw-share-platform-icon { background: #0a66c2; }
.kw-share-platform--x .kw-share-platform-icon { background: #111827; }
.kw-share-platform--whatsapp .kw-share-platform-icon { background: #22c55e; }
.kw-share-platform--facebook .kw-share-platform-icon { background: #1877f2; }
.kw-share-platform--telegram .kw-share-platform-icon { background: #2aabee; }
.kw-share-platform--email .kw-share-platform-icon { background: #003172; }
.kw-share-platform--other .kw-share-platform-icon {
    background: #f3f6fa;
    color: #111827;
}

.kw-share-modal-divider {
    height: 1px;
    margin: 0 0 24px;
    background: rgba(15, 23, 42, .12);
}

.kw-share-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.kw-share-copy-input-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 48px;
    border-radius: 11px;
    background: #f1f3f5;
    color: #58606d;
    padding: 0 14px;
}

.kw-share-copy-input {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kw-share-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 11px;
    background: #f1f3f5;
    color: #4b5563;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.kw-share-copy-button:hover,
.kw-share-copy-button:focus-visible {
    background: #e8edf3;
    color: #003172;
    outline: none;
}

.kw-share-copy-button.is-copied {
    color: #16a34a;
}

.kw-share-copy-button svg {
    width: 24px;
    height: 24px;
}


html[data-theme="dark"] .kw-share-modal-backdrop {
    background: rgba(0, 0, 0, .64);
}

html[data-theme="dark"] .kw-share-modal {
    border-color: rgba(255,255,255,.085);
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.045), transparent 34%),
        linear-gradient(180deg, #14171d 0%, #0c0f14 100%);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .58),
        0 0 0 1px rgba(255,255,255,.018) inset;
}

html[data-theme="dark"] .kw-share-modal-title,
html[data-theme="dark"] .kw-share-modal-section-title,
html[data-theme="dark"] .kw-share-platform-label {
    color: rgba(248,250,252,.94);
}

html[data-theme="dark"] .kw-share-modal-close {
    color: rgba(248,250,252,.84);
}

html[data-theme="dark"] .kw-share-modal-close:hover,
html[data-theme="dark"] .kw-share-modal-close:focus-visible {
    background: rgba(255,255,255,.075);
    color: #ffffff;
}

html[data-theme="dark"] .kw-share-platform-icon {
    border-color: rgba(255,255,255,.09);
    box-shadow:
        0 8px 18px rgba(0,0,0,.20),
        0 0 0 1px rgba(255,255,255,.025) inset;
}

html[data-theme="dark"] .kw-share-platform:hover .kw-share-platform-icon,
html[data-theme="dark"] .kw-share-platform:focus-visible .kw-share-platform-icon {
    border-color: rgba(255,255,255,.17);
    box-shadow:
        0 12px 24px rgba(0,0,0,.26),
        0 0 0 1px rgba(255,255,255,.04) inset;
}

html[data-theme="dark"] .kw-share-platform--other .kw-share-platform-icon {
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
    color: #ffffff;
}

html[data-theme="dark"] .kw-share-modal-divider {
    background: rgba(255,255,255,.095);
}

html[data-theme="dark"] .kw-share-copy-input-wrap,
html[data-theme="dark"] .kw-share-copy-button {
    border: 1px solid rgba(255,255,255,.065);
    background: rgba(255,255,255,.060);
    color: rgba(226,232,240,.74);
}

html[data-theme="dark"] .kw-share-copy-button:hover,
html[data-theme="dark"] .kw-share-copy-button:focus-visible {
    background: rgba(255,255,255,.095);
    color: #ffffff;
}

@media (max-width: 680px) {
    .kw-share-modal-root {
        align-items: flex-end;
        padding: 12px;
    }

    .kw-share-modal {
        width: 100%;
        border-radius: 24px;
    }

    .kw-share-modal-inner {
        padding: 24px 20px 22px;
    }

    .kw-share-modal-platforms {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 10px;
    }

    .kw-share-platform-icon {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 420px) {
    .kw-share-modal-root {
        padding: 8px;
    }

    .kw-share-modal-inner {
        padding: 22px 16px 18px;
    }

    .kw-share-copy-row {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .kw-share-copy-input-wrap,
    .kw-share-copy-button {
        min-height: 46px;
        height: 46px;
    }
}