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

.gladiator-funnel-wrap{
    direction:rtl;
    font-family:var(--gf-font);
    width:100%;
    max-width:var(--gf-max-width);
    margin:0 auto;
    padding:30px 0;
    box-sizing:border-box;
    color:var(--gf-input-text);
    position:relative;
}
.gladiator-funnel-wrap *,
.gladiator-funnel-wrap *::before,
.gladiator-funnel-wrap *::after{box-sizing:border-box;}

/* Force-clean focus/active — kill theme accent colors (pink etc) and use primary only */
.gladiator-funnel-wrap{
    accent-color:var(--gf-primary);
}
.gladiator-funnel-wrap ::selection{
    background-color:var(--gf-primary);
    color:var(--gf-btn-text);
}
.gladiator-funnel-wrap textarea,
.gladiator-funnel-wrap input{
    caret-color:var(--gf-primary) !important;
}
.gladiator-funnel-wrap textarea,
.gladiator-funnel-wrap textarea:focus,
.gladiator-funnel-wrap textarea:focus-visible,
.gladiator-funnel-wrap textarea:active,
.gladiator-funnel-wrap textarea:hover{
    outline:none !important;
    box-shadow:none !important;
    border:none !important;
    background:var(--gf-input-bg) !important;
    color:var(--gf-input-text) !important;
    -webkit-appearance:none;
    appearance:none;
}
.gladiator-funnel-wrap button{
    -webkit-tap-highlight-color:transparent;
}
.gladiator-funnel-wrap button:focus,
.gladiator-funnel-wrap button:focus-visible,
.gladiator-funnel-wrap button:active,
.gladiator-funnel-wrap a:focus,
.gladiator-funnel-wrap a:focus-visible,
.gladiator-funnel-wrap a:active{
    outline:none !important;
    box-shadow:none !important;
}
.gladiator-funnel-wrap input:focus,
.gladiator-funnel-wrap input:focus-visible,
.gladiator-funnel-wrap input:active{
    outline:none !important;
}
/* Lead form inputs: primary border on focus instead of theme's pink */
.gladiator-funnel-wrap .gf-step-lead input:focus,
.gladiator-funnel-wrap .gf-step-lead input:focus-visible,
.gladiator-funnel-wrap .gf-step-lead input:active{
    border-color:var(--gf-primary) !important;
    color:var(--gf-input-text) !important;
}
/* Choice buttons: primary border on focus instead of pink */
.gladiator-funnel-wrap .gf-choice-btn:focus,
.gladiator-funnel-wrap .gf-choice-btn:focus-visible,
.gladiator-funnel-wrap .gf-choice-btn:active{
    border-color:var(--gf-primary) !important;
}

/* Outer wrapper (double border) */
.gladiator-funnel-wrap.gf-double-border{
    padding:var(--gf-outer-pad);
    border:1.5px solid var(--gf-outer-border);
    border-radius:calc(var(--gf-radius) + var(--gf-outer-pad));
    background:var(--gf-gap-color);
    margin-top:30px;
    margin-bottom:30px;
}

/* Glass effect — without double border: glass on funnel */
.gladiator-funnel-wrap.gf-glass:not(.gf-double-border) .gf-funnel{
    background:var(--gf-glass-bg);
    -webkit-backdrop-filter:blur(calc(var(--gf-glass-blur) * 1px)) saturate(180%);
    backdrop-filter:blur(calc(var(--gf-glass-blur) * 1px)) saturate(180%);
    border:1.5px solid var(--gf-glass-border);
}
/* Glass + double border: glass on outer wrap (so it can blur the page bg), funnel transparent */
.gladiator-funnel-wrap.gf-glass.gf-double-border{
    background:var(--gf-glass-bg);
    -webkit-backdrop-filter:blur(calc(var(--gf-glass-blur) * 1px)) saturate(180%);
    backdrop-filter:blur(calc(var(--gf-glass-blur) * 1px)) saturate(180%);
    border-color:var(--gf-glass-border);
}
.gladiator-funnel-wrap.gf-glass.gf-double-border .gf-funnel{
    background:transparent;
    border-color:var(--gf-glass-border);
}

/* Glow */
.gladiator-funnel-wrap.gf-glow .gf-funnel{
    box-shadow:
        0 0 calc(var(--gf-glow-intensity) * 1px) calc(var(--gf-glow-intensity) * 0.15px) var(--gf-glow-color),
        0 calc(var(--gf-glow-intensity) * 0.3px) calc(var(--gf-glow-intensity) * 0.7px) var(--gf-glow-inner);
}
.gladiator-funnel-wrap.gf-double-border.gf-glow{
    box-shadow:
        0 0 calc(var(--gf-glow-intensity) * 1px) calc(var(--gf-glow-intensity) * 0.15px) var(--gf-glow-color),
        0 calc(var(--gf-glow-intensity) * 0.3px) calc(var(--gf-glow-intensity) * 0.7px) var(--gf-glow-inner);
}
.gladiator-funnel-wrap.gf-double-border.gf-glow .gf-funnel{box-shadow:none;}

/* Funnel */
.gf-funnel{
    position:relative;
    background:var(--gf-container-bg);
    border:1.5px solid var(--gf-container-border);
    border-radius:var(--gf-radius);
    padding:24px;
    display:flex;
    flex-direction:column;
    min-height:var(--gf-min-height);
    transition:border-color .2s ease;
}

/* Top bar (back + progress) */
.gf-top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    min-height:32px;
}
.gf-top:has([data-progress][style*="display:none"]):has([data-back][style*="visibility:hidden"]){
    margin-bottom:0;
    min-height:0;
}

.gf-back-btn{
    width:32px;height:32px;
    border-radius:50%;
    background:transparent;
    color:var(--gf-input-text);
    border:1.5px solid var(--gf-container-border);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    padding:0;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.gf-back-btn svg{width:18px;height:18px;}
.gf-back-btn:hover{
    background:var(--gf-hover-bg);
    color:var(--gf-hover-text);
    border-color:var(--gf-hover-bg);
}

.gf-progress{
    flex:1;
    height:5px;
    background:var(--gf-container-border);
    border-radius:999px;
    overflow:hidden;
    position:relative;
}
.gf-progress-fill{
    height:100%;
    background:var(--gf-primary);
    border-radius:999px;
    width:0%;
    transition:width .45s cubic-bezier(.4,0,.2,1);
    position:relative;
    overflow:hidden;
}
.gladiator-funnel-wrap.gf-shimmer .gf-progress-fill::after{
    content:'';
    position:absolute;
    top:0; bottom:0;
    width:50%;
    left:-50%;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    animation:gfShimmer 2.2s linear infinite;
}
@keyframes gfShimmer{
    0%{left:-50%;}
    100%{left:100%;}
}

/* Step area */
.gf-step{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:120px;
    padding:8px 4px;
    transition:opacity .25s ease, transform .25s ease;
}
.gf-step.gf-fade-out{ opacity:0; transform:translateY(-6px); }

.gf-step-question{
    font-size:20px;
    font-weight:600;
    color:var(--gf-input-text);
    line-height:1.5;
    margin-bottom:5px;
    text-align:center;
    min-height:32px;
}
.gf-step-question.gf-typewriter::after{
    content:'|';
    display:inline-block;
    margin-right:3px;
    color:var(--gf-primary);
    animation:gfBlink 1s step-end infinite;
    font-weight:400;
}
@keyframes gfBlink{
    50%{opacity:0;}
}

.gf-step-sub{
    color:var(--gf-placeholder);
    font-size:14px;
    text-align:center;
    margin-bottom:15px;
    line-height:0;
}

/* Choices */
.gf-step-choices{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-top:12px;
}
.gf-choice-btn{
    background:transparent;
    border:1.5px solid var(--gf-container-border);
    color:var(--gf-input-text);
    padding:11px 22px;
    border-radius:999px;
    cursor:pointer;
    font-family:inherit;
    font-size:15px;
    font-weight:500;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.gf-choice-btn:hover{
    background:var(--gf-hover-bg);
    color:var(--gf-hover-text);
    border-color:var(--gf-hover-bg);
    transform:translateY(-1px);
}
.gf-choice-btn.gf-selected{
    background:rgba(59,130,246,0.12);
    border-color:var(--gf-primary);
    color:var(--gf-primary);
    font-weight:600;
}
.gf-step-skip{
    text-align:center;
    margin-top:18px;
}
.gf-step-skip button,
.gf-step-skip button:hover,
.gf-step-skip button:focus,
.gf-step-skip button:active,
.gf-step-skip button:focus-visible{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    outline:none !important;
    transform:none !important;
    font-family:inherit;
    font-size:13px;
    cursor:pointer;
    text-decoration:underline;
    padding:6px 12px;
}
.gf-step-skip button{
    color:var(--gf-placeholder);
    transition:color .2s ease;
}
.gf-step-skip button:hover,
.gf-step-skip button:focus{
    color:#ffffff !important;
}

.gf-choice-btn.gf-selected::before{
    content:'';
    display:inline-block;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--gf-primary);
    margin-left:8px;
    vertical-align:middle;
}

/* Lead form */
.gf-step-lead{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:420px;
    width:100%;
    margin:8px auto 0;
}
.gf-step-lead .gf-field{display:flex;flex-direction:column;gap:6px;}
.gf-step-lead label{
    font-size:13px;
    color:var(--gf-placeholder);
    font-weight:500;
}
.gf-step-lead input{
    background:rgba(255,255,255,.05);
    border:1.5px solid var(--gf-container-border);
    color:var(--gf-input-text);
    padding:13px 16px;
    border-radius:12px;
    font-family:inherit;
    font-size:16px;
    width:100%;
}
.gf-theme-light .gf-step-lead input{ background:#fafbfc; }
.gf-step-lead input[type=tel]{direction:ltr;text-align:left;}
.gf-step-lead .gf-error{
    color:#ef4444;
    font-size:13px;
    min-height:18px;
    text-align:center;
}

/* Success */
.gf-step-success{
    text-align:center;
    padding:20px 10px;
}
.gf-success-check{
    width:72px;height:72px;
    border-radius:50%;
    background:var(--gf-primary);
    color:var(--gf-btn-text);
    display:inline-flex;align-items:center;justify-content:center;
    margin-bottom:14px;
    animation:gfPop .45s ease;
}
@keyframes gfPop{
    0%{transform:scale(0);}
    65%{transform:scale(1.15);}
    100%{transform:scale(1);}
}
.gf-step-success h3{
    margin:0 0 8px;
    color:var(--gf-input-text);
    font-size:22px;
    font-weight:700;
}
.gf-step-success p{
    margin:0;
    color:var(--gf-placeholder);
    font-size:15px;
    line-height:1.6;
}

/* Attachments */
.gf-attachments{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:6px 0 10px;
}
.gf-attachments:empty{display:none;}
.gf-attach-thumb{
    position:relative;
    width:60px;height:60px;
    border-radius:12px;
    overflow:hidden;
    background:rgba(255,255,255,.05);
    border:1px solid var(--gf-container-border);
}
.gf-attach-thumb img{width:100%;height:100%;object-fit:cover;}
.gf-attach-thumb .gf-thumb-loading{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.5);color:#fff;font-size:11px;
}
.gf-attach-thumb .gf-thumb-remove{
    position:absolute;top:3px;left:3px;
    width:20px;height:20px;border-radius:50%;
    background:rgba(0,0,0,.7);color:#fff;
    border:none;cursor:pointer;font-size:13px;line-height:1;
    display:flex;align-items:center;justify-content:center;
}

/* Input bar */
.gf-input-bar{
    margin:0;
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid var(--gf-container-border);
    display:flex;
    gap:12px;
    align-items:center;
}

.gf-input-area{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
}
.gf-input-area textarea{
    width:100%;
    border:none;
    background:var(--gf-input-bg);
    color:var(--gf-input-text);
    font-family:inherit;
    font-size:15px;
    line-height:1.5;
    padding:10px 4px;
    resize:none;
    min-height:24px;
    max-height:140px;
    overflow-y:auto;
}
.gf-input-area textarea::placeholder{color:var(--gf-placeholder);}

/* Attach (+) button */
.gf-attach-btn{
    position:relative;
    width:44px;height:44px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    color:var(--gf-input-text);
    border:1.5px solid var(--gf-container-border);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
    padding:0;
}
.gf-attach-btn svg{
    width:24px;height:24px;
    transition:transform .25s ease;
}
.gf-attach-btn:hover{
    background:var(--gf-hover-bg);
    color:var(--gf-hover-text);
    border-color:var(--gf-hover-bg);
}
.gf-attach-btn:hover svg{ transform:rotate(90deg); }
.gf-theme-light .gf-attach-btn{background:#f1f5f9;color:#475569;border-color:#e2e8f0;}

/* Tooltip (attach button) */
.gf-attach-btn[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%) translateY(4px);
    background:#1e293b;
    color:#f1f5f9;
    padding:6px 12px;
    border-radius:8px;
    font-size:13px;
    font-family:inherit;
    font-weight:500;
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    transition:opacity .2s ease, transform .2s ease;
    z-index:10;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.gf-attach-btn[data-tooltip]:hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* Rep button (link) — collapsed icon-only by default, expands on hover with label */
.gf-rep-btn{
    display:inline-flex;
    align-items:center;
    height:44px;
    width:max-content;
    max-width:44px;
    overflow:hidden;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    color:var(--gf-input-text);
    border:1.5px solid var(--gf-container-border);
    text-decoration:none;
    flex-shrink:0;
    padding:0;
    white-space:nowrap;
    transition:max-width .4s cubic-bezier(.4,0,.2,1),
               border-radius .35s ease,
               background-color .2s ease,
               color .2s ease,
               border-color .2s ease;
}
.gf-rep-icon{
    flex-shrink:0;
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
}
.gf-rep-icon svg{width:22px;height:22px;}
.gf-rep-text{
    padding-left:14px;
    padding-right:6px;
    font-size:14px;
    font-weight:500;
    opacity:0;
    transition:opacity .25s ease .05s;
}
.gf-rep-btn:hover{
    max-width:340px;
    border-radius:24px;
    background:var(--gf-hover-bg);
    color:var(--gf-hover-text);
    border-color:var(--gf-hover-bg);
}
.gf-rep-btn:hover .gf-rep-text{ opacity:1; }
.gf-theme-light .gf-rep-btn{background:#f1f5f9;color:#475569;border-color:#e2e8f0;}

/* Send button */
.gf-send-btn{
    background:var(--gf-primary);
    color:var(--gf-btn-text);
    border:none;
    padding:12px 24px;
    border-radius:999px;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    display:flex;align-items:center;gap:8px;
    flex-shrink:0;
    transition:background-color .2s ease, color .2s ease, transform .12s ease;
    height:44px;
}
.gf-send-btn:hover:not(:disabled){
    background:var(--gf-hover-bg);
    color:var(--gf-hover-text);
    transform:translateY(-1px);
}
.gf-send-btn:disabled{opacity:.5;cursor:not-allowed;}
.gf-send-btn svg{width:18px;height:18px;}

/* Lead submit */
.gf-lead-submit{
    background:var(--gf-primary);
    color:var(--gf-btn-text);
    border:none;
    padding:13px;
    border-radius:12px;
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    margin-top:6px;
    transition:background-color .2s ease, color .2s ease;
    width:100%;
}
.gf-lead-submit:hover:not(:disabled){
    background:var(--gf-hover-bg);
    color:var(--gf-hover-text);
}
.gf-lead-submit:disabled{opacity:.6;cursor:not-allowed;}

/* Mode states */
.gf-funnel.gf-mode-choice .gf-input-bar{display:none;}
.gf-funnel.gf-mode-choice .gf-step{justify-content:center;min-height:200px;}
.gf-funnel.gf-mode-lead .gf-input-bar{display:none;}
.gf-funnel.gf-mode-success .gf-input-bar{display:none;}

/* Mode: description (first screen)
   Layout: textarea pinned to top, attach + rep + send pinned to bottom corners */
.gf-funnel.gf-mode-description{padding-top:18px;}
.gf-funnel.gf-mode-description .gf-step{display:none;}
.gf-funnel.gf-mode-description .gf-top{display:none;}
.gf-funnel.gf-mode-description .gf-input-bar{
    display:grid;
    grid-template-columns:auto auto 1fr auto;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:
        "input input input input"
        ".     .   .     ."
        "attach rep . send";
    flex:1;
    margin-top:0;
    padding-top:0;
    border-top:none;
    gap:14px;
    align-items:initial;
}
.gf-funnel.gf-mode-description .gf-input-area{
    grid-area:input;
    align-self:start;
    display:block;
    width:100%;
}
.gf-funnel.gf-mode-description .gf-input-area textarea{
    font-size:19px;
    line-height:1.6;
    text-align:right;
    padding:0 4px;
    min-height:60px;
    width:100%;
    color:var(--gf-input-text);
}
.gf-funnel.gf-mode-description .gf-input-area textarea::placeholder{
    color:var(--gf-input-text);
    opacity:0.85;
    text-align:right;
}
.gf-funnel.gf-mode-description .gf-attach-btn{ grid-area:attach; align-self:end; }
.gf-funnel.gf-mode-description .gf-rep-btn{    grid-area:rep;    align-self:end; }
.gf-funnel.gf-mode-description .gf-send-btn{   grid-area:send;   align-self:end; }

/* Theme: Light */
.gf-theme-light{
    --gf-container-bg:#ffffff;
    --gf-container-border:#e2e8f0;
    --gf-input-text:#0f172a;
    --gf-placeholder:#94a3b8;
}

/* Lightbox */
.gf-lightbox{
    position:fixed;inset:0;
    background:rgba(0,0,0,.85);
    display:none;align-items:center;justify-content:center;
    z-index:99999;
    padding:20px;
}
.gf-lightbox.show{display:flex;}
.gf-lightbox img{max-width:100%;max-height:90vh;border-radius:12px;}
.gf-lightbox-close{
    position:absolute;top:20px;left:20px;
    width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,.15);
    color:#fff;border:none;cursor:pointer;
    font-size:22px;
}

/* Mobile */
@media (max-width: 640px){
    .gladiator-funnel-wrap{padding:14px 0;}
    .gladiator-funnel-wrap.gf-double-border{padding:calc(var(--gf-outer-pad) - 4px);margin-top:16px;margin-bottom:16px;}
    .gf-funnel{padding:18px;border-radius:calc(var(--gf-radius) - 4px);}
    .gf-step-question{font-size:17px;}
    .gf-step-sub{font-size:13px;}
    .gf-input-area textarea{font-size:16px;}
    .gf-step-lead input{font-size:16px;}
    .gf-input-bar{gap:8px;padding-top:14px;}
    .gf-attach-btn{width:40px;height:40px;}
    .gf-attach-btn svg{width:22px;height:22px;}
    .gf-send-btn{padding:10px 18px;font-size:14px;height:40px;}
    .gf-send-btn .gf-send-text{display:none;}
    .gf-choice-btn{font-size:14px;padding:9px 18px;}
    .gf-attach-thumb{width:54px;height:54px;}
    .gf-back-btn{width:30px;height:30px;}
    .gf-back-btn svg{width:16px;height:16px;}
}
@media (max-width: 380px){
    .gf-funnel{padding:14px;}
    .gf-input-bar{gap:6px;}
    .gf-attach-btn{width:38px;height:38px;}
    .gf-attach-btn svg{width:20px;height:20px;}
    .gf-send-btn{padding:9px 14px;}
}