/*
 * NetLynxs Digital Card - Add to Home Screen
 */

#nlx-home-screen-button,
#nlx-home-screen-banner,
#nlx-home-screen-modal,
#nlx-home-screen-modal * {
    box-sizing: border-box;
}

#nlx-home-screen-button {
    position: fixed;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 99980;

    border: 0;
    border-radius: 999px;

    min-height: 50px;
    padding: 13px 18px;

    background: #0f172a;
    color: #ffffff;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 800;

    display: flex;
    align-items: center;
    gap: 9px;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .28);
}

#nlx-home-screen-button svg {
    width: 20px;
    height: 20px;
}

#nlx-home-screen-button:active {
    transform: scale(.98);
}

#nlx-home-screen-banner {
    position: fixed;

    left: 12px;
    right: 12px;

    bottom: calc(14px + env(safe-area-inset-bottom));

    max-width: 520px;

    margin-left: auto;
    margin-right: auto;

    z-index: 99990;

    background: #ffffff;
    color: #0f172a;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    padding: 16px;

    box-shadow:
        0 16px 42px rgba(15, 23, 42, .28);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

.nlx-home-banner-title {
    margin: 0 0 4px;

    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
}

.nlx-home-banner-text {
    margin: 0 0 13px;

    color: #64748b;

    font-size: 14px;
    line-height: 1.45;
}

.nlx-home-banner-actions {
    display: flex;
    gap: 8px;
}

.nlx-home-banner-primary,
.nlx-home-banner-secondary {
    min-height: 44px;

    border-radius: 11px;

    padding: 10px 14px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.nlx-home-banner-primary {
    flex: 1;

    border: 1px solid #0f172a;

    background: #0f172a;
    color: #ffffff;
}

.nlx-home-banner-secondary {
    border: 1px solid #cbd5e1;

    background: #ffffff;
    color: #334155;
}

#nlx-home-screen-modal {
    position: fixed;

    inset: 0;

    z-index: 100000;

    background: rgba(15, 23, 42, .62);

    padding: 16px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

.nlx-home-modal-sheet {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;

    overflow-y: auto;

    background: #ffffff;
    color: #0f172a;

    border-radius: 24px;

    padding: 22px;
    padding-bottom:
        calc(22px + env(safe-area-inset-bottom));

    box-shadow:
        0 18px 60px rgba(0, 0, 0, .32);
}

.nlx-home-modal-handle {
    width: 46px;
    height: 5px;

    border-radius: 999px;

    background: #cbd5e1;

    margin: -5px auto 17px;
}

.nlx-home-modal-title {
    margin: 0 0 8px;

    text-align: center;

    font-size: 22px;
    line-height: 1.2;
    font-weight: 850;
}

.nlx-home-modal-intro {
    margin: 0 0 20px;

    text-align: center;

    color: #64748b;

    font-size: 14px;
    line-height: 1.5;
}

.nlx-home-step {
    display: flex;
    gap: 13px;

    align-items: flex-start;

    margin-bottom: 16px;
}

.nlx-home-step-number {
    width: 32px;
    height: 32px;

    min-width: 32px;

    border-radius: 50%;

    background: #0f172a;
    color: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 14px;
    font-weight: 850;
}

.nlx-home-step-text {
    padding-top: 4px;

    font-size: 15px;
    line-height: 1.45;
}

.nlx-home-step-text strong {
    font-weight: 850;
}

.nlx-home-share-icon {
    display: inline-block;

    width: 20px;
    height: 20px;

    vertical-align: -4px;
}

.nlx-home-modal-close {
    width: 100%;

    min-height: 48px;

    margin-top: 4px;

    border: 0;
    border-radius: 12px;

    background: #0f172a;
    color: #ffffff;

    font-size: 15px;
    font-weight: 850;

    cursor: pointer;
}

@media (min-width: 700px) {
    #nlx-home-screen-button {
        right: 24px;
        bottom: 24px;
    }

    #nlx-home-screen-modal {
        align-items: center;
    }
}

/* ==========================================================
   NETLYNXS_TOP_HOME_SCREEN_BUTTON
   Full-width install action beneath the hero action buttons
   ========================================================== */

#nlx-top-home-screen-wrap {
    width: 100%;
    margin-top: 10px;
}

#nlx-top-home-screen-button {
    width: 100%;
    min-height: 46px;

    border: 1px solid rgba(255,255,255,.55);
    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.10)
        );

    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 14px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12);
}

#nlx-top-home-screen-button:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.27),
            rgba(255,255,255,.14)
        );
}

#nlx-top-home-screen-button:active {
    transform: translateY(1px);
}

#nlx-top-home-screen-button svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

@media (max-width: 420px) {

    #nlx-top-home-screen-wrap {
        margin-top: 8px;
    }

    #nlx-top-home-screen-button {
        min-height: 44px;
        font-size: 12px;
        padding: 10px 12px;
    }
}

/* ==========================================================
   NETLYNXS_TOP_HOME_SCREEN_POSITION_FIX
   ========================================================== */

#nlx-top-home-screen-wrap {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    flex: 0 0 100% !important;

    clear: both !important;

    margin:
        10px
        0
        0
        0 !important;

    padding: 0 !important;

    z-index: auto !important;
}

#nlx-top-home-screen-button {
    display: flex !important;

    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 44px !important;

    margin: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    flex: none !important;

    white-space: nowrap !important;
}

/* NETLYNXS_PUBLIC_SAVE_TO_PHONE_START */

.nlx-save-phone-overlay{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:16px;
    background:rgba(4,12,22,.72);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.nlx-save-phone-sheet{
    width:100%;
    max-width:480px;
    max-height:92vh;
    overflow:auto;
    background:#ffffff;
    color:#0f172a;
    border-radius:24px;
    box-shadow:0 24px 70px rgba(0,0,0,.34);
    padding:22px 18px 18px;
}

.nlx-save-phone-title{
    margin:0;
    text-align:center;
    font-size:24px;
    line-height:1.08;
    font-weight:950;
    letter-spacing:-.02em;
    color:#0f2741;
}

.nlx-save-phone-subtitle{
    margin:8px auto 18px;
    max-width:360px;
    text-align:center;
    color:#64748b;
    font-size:14px;
    line-height:1.4;
    font-weight:700;
}

.nlx-save-phone-step{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding:13px 0;
    border-top:1px solid #e5eaf0;
}

.nlx-save-phone-step:first-of-type{
    border-top:none;
}

.nlx-save-phone-number{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#0e84bd;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    font-weight:950;
}

.nlx-save-phone-copy{
    min-width:0;
}

.nlx-save-phone-copy strong{
    display:block;
    color:#0f172a;
    font-size:16px;
    line-height:1.2;
    font-weight:950;
}

.nlx-save-phone-copy span{
    display:block;
    margin-top:3px;
    color:#64748b;
    font-size:13px;
    line-height:1.35;
    font-weight:700;
}

.nlx-save-phone-share-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:31px;
    height:31px;
    margin-left:6px;
    vertical-align:middle;
    border-radius:8px;
    background:#f1f5f9;
    color:#1473ff;
}

.nlx-save-phone-share-icon svg{
    width:20px;
    height:20px;
    display:block;
}

.nlx-save-phone-note{
    margin:13px 0 0;
    padding:11px 12px;
    border-radius:12px;
    background:#f8fafc;
    color:#475569;
    font-size:12px;
    line-height:1.4;
    font-weight:700;
}

.nlx-save-phone-safari-note{
    margin:0 0 15px;
    padding:12px 13px;
    border-radius:13px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    font-size:13px;
    line-height:1.4;
    font-weight:800;
}

.nlx-save-phone-close{
    width:100%;
    min-height:48px;
    margin-top:17px;
    border:0;
    border-radius:14px;
    background:#0f2741;
    color:#ffffff;
    font-family:inherit;
    font-size:15px;
    font-weight:950;
    cursor:pointer;
}

.nlx-save-phone-close:active{
    transform:translateY(1px);
}

.nlx-save-phone-installed{
    opacity:.88 !important;
    cursor:default !important;
}

@media(min-width:700px){
    .nlx-save-phone-overlay{
        align-items:center;
    }
}

/* NETLYNXS_PUBLIC_SAVE_TO_PHONE_END */