/* Titkos fiók – 2. kampány, menta / türkiz / korall. A betűtípus a webshopé. */
.sg-modal, .sg-ribbon, .sg-product, .sg-page {
    --sg-ink: #124e50;
    --sg-mint: #dcede3;
    --sg-coral: #f18470;
    --sg-cream: #fff0c9;
    font-family: inherit;
}
.sg-modal .modal-dialog { max-width: 1040px; }
.sg-modal .sg-shell {
    display: grid;
    grid-template-columns: 46% 54%;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: #fcfdf9;
    color: var(--sg-ink);
    box-shadow: 0 24px 90px #123f4138;
}
.sg-modal h2, .sg-modal input, .sg-modal button, .sg-page h1 { font-family: inherit; }
.sg-modal .sg-close {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--sg-mint);
    color: var(--sg-ink);
    font-size: 28px;
    line-height: 1;
}
.sg-form-panel { padding: 26px 36px 28px; }
.sg-brand { margin: 0 0 14px; }
.sg-brand img { display: block; width: 84px; height: 84px; object-fit: contain; }
.sg-eyebrow, .sg-promo-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sg-modal h2 { margin: 8px 0 12px; font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--sg-ink); }
.sg-intro { margin: 0 0 16px; font-size: 16px; line-height: 1.45; }
.sg-period {
    margin: 0 0 20px;
    padding: 10px 13px;
    border-left: 3px solid var(--sg-coral);
    border-radius: 0 8px 8px 0;
    background: #edf5ee;
    font-size: 12px;
    line-height: 1.55;
}
.sg-period time { white-space: nowrap; }
#sg-form > label:first-of-type { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
#sg-email {
    display: block;
    width: 100%;
    height: 48px;
    padding: 10px 14px;
    border: 1px solid #96b8ae;
    border-radius: 10px;
    background: #fff;
    color: var(--sg-ink);
    font-size: 16px;
}
.sg-consent { display: flex; gap: 10px; margin: 15px 0; font-size: 12px; line-height: 1.5; }
.sg-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--sg-ink); }
.sg-modal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sg-submit, .sg-ribbon-cta, .sg-product-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 12px;
    padding: 14px 18px;
    background: var(--sg-coral);
    color: var(--sg-ink);
    font-family: inherit;
    font-weight: 800;
    line-height: 1.25;
    transition: background .2s, transform .2s;
}
.sg-submit { width: 100%; font-size: 20px; }
.sg-submit:hover, .sg-ribbon a:hover .sg-ribbon-cta, .sg-product:hover .sg-product-cta { background: #f49b84; }
.sg-submit:disabled { opacity: .65; cursor: wait; }
.sg-caption { margin: 9px 0 18px; text-align: center; font-size: 12px; }
.sg-terms { padding-top: 14px; border-top: 1px solid #d5e5da; font-size: 11px; line-height: 1.55; color: #486761; }
.sg-links { margin-top: 10px; font-size: 11px; }
.sg-feedback { padding: 20px; margin: 14px 0 22px; border-radius: 14px; background: var(--sg-mint); border: 1px solid #9bbbae; font-weight: 700; line-height: 1.5; }
.sg-feedback.sg-error { background: #ffede5; border-color: #ce7259; color: #7d2f21; }
.sg-modal [hidden] { display: none !important; }
.sg-modal :focus-visible, .sg-ribbon a:focus-visible, .sg-product:focus-visible, .sg-page button:focus-visible { outline: 3px solid #176567; outline-offset: 4px; }

/* A sorsolási érték HTML-ből jön: az illusztráció nem tartalmaz beégetett számot. */
.sd-scene { display: flex; flex-direction: column; justify-content: center; padding: 36px 12px 28px; overflow: hidden; background: var(--sg-mint); }
.sd-scene-title { position: relative; z-index: 2; margin: 0 30px 12px; max-width: 360px; color: var(--sg-ink); font-size: 40px; font-weight: 800; line-height: 1.04; letter-spacing: -.025em; }
.sd-art { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; }
.sd-room { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .55s; }
.sd-room-open { position: absolute; inset: 0; opacity: 0; }
.sd-ticket {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 9%;
    width: 66%;
    padding: 14px 18px 18px;
    border-radius: 15px;
    background: var(--sg-cream);
    color: var(--sg-ink);
    text-align: center;
    box-shadow: -6px 7px 0 var(--sg-coral), 0 12px 20px #124e5020;
    transform: rotate(-7deg);
    transition: transform .65s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}
.sd-ticket::before, .sd-ticket::after { content: ''; position: absolute; top: 49%; width: 18px; height: 18px; border-radius: 50%; background: var(--sg-mint); }
.sd-ticket::before { left: -9px; }
.sd-ticket::after { right: -9px; }
.sd-prize { display: block; padding-bottom: 6px; border-bottom: 2px dashed var(--sg-coral); font-size: clamp(32px, 5vw, 66px); font-weight: 800; line-height: 1.08; overflow-wrap: anywhere; }
.sd-ticket-before, .sd-ticket-after { display: block; margin-top: 9px; font-size: 23px; font-weight: 800; line-height: 1.08; }
.sd-ticket-after { display: none; }
.sd-ticket-empty { visibility: hidden; }
.sd-pull { position: absolute; z-index: 3; left: 24%; top: 38%; width: 43%; height: 20%; border: 0; border-radius: 18px; background: transparent; cursor: grab; touch-action: none; }
.sd-pull:active { cursor: grabbing; }
.sd-pull:disabled { cursor: default; }
.sd-hint { margin: 4px 20px 0; text-align: center; font-size: 13px; font-weight: 600; }
.sd-open .sd-room:not(.sd-room-open) { opacity: 0; }
.sd-open .sd-room-open { opacity: 1; }
.sd-open .sd-ticket { visibility: visible; transform: translateY(-8px) rotate(-4deg) scale(1.04); }
.sd-open .sd-ticket-before { display: none; }
.sd-open .sd-ticket-after { display: block; }
.sg-loading .sd-ticket { animation: sg-wait 1s ease-in-out infinite alternate; }
@keyframes sg-wait { to { transform: translateY(-5px) rotate(-5deg); } }

/* Navbar alatti ajánló; a configból adott teljes képes banner is használható. */
.sg-ribbon { overflow: hidden; }
.sg-ribbon > a { display: block; color: inherit; text-decoration: none; }
.sg-ribbon picture, .sg-ribbon picture img { display: block; width: 100%; }
.sg-ribbon-rich > a { display: grid; grid-template-columns: 140px minmax(220px, 1fr) 165px 230px; align-items: center; gap: 24px; max-width: 1320px; min-height: 174px; margin: 0 auto; padding: 14px 28px; }
.sg-ribbon-rich picture { width: 140px; height: 140px; }
.sg-ribbon-rich picture img { height: 100%; object-fit: contain; }
.sg-promo-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg-ribbon-copy { font-size: 25px; font-weight: 800; line-height: 1.12; }
.sg-promo-description { max-width: 440px; font-size: 13px; line-height: 1.4; }
.sg-promo-reward { display: block; padding: 16px 8px; border-radius: 14px; background: var(--sg-cream); color: var(--sg-ink); text-align: center; transform: rotate(-4deg); box-shadow: -4px 5px 0 var(--sg-coral); }
.sg-promo-reward strong { display: block; padding-bottom: 4px; border-bottom: 2px dashed var(--sg-coral); font-size: 38px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.sg-promo-reward > span { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; }
.sg-promo-action { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.sg-ribbon-cta { font-size: 16px; padding: 14px 12px; }
.sg-promo-fineprint { font-size: 10px; line-height: 1.3; }
.sg-ribbon-no-image > a { grid-template-columns: minmax(220px, 1fr) 165px 230px; }
.sg-ribbon-no-reward > a { grid-template-columns: 140px minmax(220px, 1fr) 230px; }
.sg-ribbon-no-image.sg-ribbon-no-reward > a { grid-template-columns: minmax(220px, 1fr) 230px; }

/* Termékoldali ajánló: ugyanaz a komód és kupon, olvasható HTML szöveggel. */
.sg-product-promo { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid #c6dfd2; border-radius: 18px; background: var(--sg-mint); color: var(--sg-ink); text-decoration: none; }
.sg-product-promo:hover { color: var(--sg-ink); text-decoration: none; }
.sg-product-art { position: relative; align-self: stretch; min-height: 200px; }
.sg-product-art img { display: block; width: 100%; height: 100%; max-height: 260px; object-fit: contain; }
.sg-product-prize { position: absolute; left: 10%; top: 15px; width: 83%; padding: 8px 5px; border-radius: 9px; transform: rotate(-7deg); background: var(--sg-cream); box-shadow: -3px 3px 0 var(--sg-coral); text-align: center; color: var(--sg-ink); font-size: 28px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.sg-product-prize small { display: block; margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--sg-coral); font-size: 11px; font-weight: 700; }
.sg-product-copy { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 20px 18px 16px 8px; }
.sg-product-copy > strong { font-size: 23px; line-height: 1.1; font-weight: 800; }
.sg-product-copy .sg-promo-kicker { font-size: 10px; }
.sg-product-description { font-size: 12px; line-height: 1.4; }
.sg-product-cta { grid-column: 1 / -1; margin: 0 18px; font-size: 17px; }
.sg-product-conditions { grid-column: 1 / -1; padding: 10px 18px 15px; font-size: 10px; line-height: 1.45; text-align: center; }
.sg-page { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 36px; gap: 30px; border-radius: 24px; background: var(--sg-mint); color: var(--sg-ink); }
.sg-page h1 { color: inherit; font-weight: 800; }
.sg-page > img { width: 100%; height: auto; max-height: 430px; object-fit: contain; }
.sg-page .sg-submit { max-width: 330px; margin-top: 24px; }

@media (max-width: 1100px) {
    .sg-ribbon-rich > a { grid-template-columns: 110px minmax(180px, 1fr) 140px 190px; gap: 16px; padding: 12px 18px; }
    .sg-ribbon-rich picture { width: 110px; height: 130px; }
    .sg-ribbon-copy { font-size: 21px; }
    .sg-promo-reward strong { font-size: 32px; }
    .sg-ribbon-no-image > a { grid-template-columns: minmax(180px, 1fr) 140px 190px; }
    .sg-ribbon-no-reward > a { grid-template-columns: 110px minmax(180px, 1fr) 190px; }
    .sg-ribbon-no-image.sg-ribbon-no-reward > a { grid-template-columns: minmax(180px, 1fr) 190px; }
}
@media (max-width: 767px) {
    .sg-modal .modal-dialog { margin: 12px; }
    .sg-modal .sg-shell { display: block; border-radius: 18px; }
    .sd-scene { position: relative; height: 280px; min-height: 0; padding: 18px; justify-content: flex-start; }
    .sd-scene-title { width: calc(100% - 35px); max-width: 300px; margin: 5px 0 0; font-size: 26px; }
    .sd-art { position: absolute; width: 230px; height: 230px; right: -8px; bottom: -8px; }
    .sd-ticket { left: 4%; top: 17%; width: 58%; padding: 9px 11px; border-radius: 10px; }
    .sd-prize { font-size: 32px; }
    .sd-ticket-before, .sd-ticket-after { font-size: 15px; margin-top: 5px; }
    .sd-ticket::before, .sd-ticket::after { width: 12px; height: 12px; }
    .sd-ticket::before { left: -6px; }
    .sd-ticket::after { right: -6px; }
    .sd-hint { position: absolute; left: 18px; bottom: 22px; width: 26%; margin: 0; font-size: 11px; text-align: left; }
    .sg-form-panel { padding: 22px 24px 24px; }
    .sg-brand { float: right; margin: 0 0 8px 12px; }
    .sg-brand img { width: 62px; height: 62px; }
    .sg-modal h2 { font-size: 26px; }
    .sg-intro { font-size: 14px; clear: both; }
    .sg-period { margin-bottom: 16px; font-size: 11px; }
    .sg-ribbon-rich > a { grid-template-columns: 90px minmax(0, 1fr); gap: 12px 16px; padding: 14px 18px; }
    .sg-ribbon-rich picture { grid-row: 1; width: 90px; height: 100px; }
    .sg-ribbon-copy { font-size: 20px; }
    .sg-promo-kicker { font-size: 10px; }
    .sg-promo-description { font-size: 12px; }
    .sg-promo-reward { padding: 10px 5px; }
    .sg-promo-reward strong { font-size: 24px; }
    .sg-promo-reward > span { font-size: 9px; }
    .sg-ribbon-cta { padding: 12px 8px; font-size: 14px; }
    .sg-ribbon-no-image .sg-promo-copy { grid-column: 1 / -1; }
    .sg-ribbon-no-reward .sg-promo-action { grid-column: 1 / -1; }
    .sg-ribbon-no-image.sg-ribbon-no-reward > a { grid-template-columns: 1fr; }
    .sg-product-copy > strong { font-size: 21px; }
    .sg-page { grid-template-columns: 1fr; padding: 24px; gap: 8px; }
    .sg-page > img { max-height: 260px; }
}
@media (max-width: 374px) {
    .sd-scene-title { font-size: 25px; }
    .sd-art { width: 220px; height: 220px; right: -20px; }
    .sd-prize { font-size: 27px; }
    .sg-form-panel { padding: 20px; }
    .sg-product-copy > strong { font-size: 19px; }
    .sg-product-prize { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .sg-modal *, .sg-ribbon *, .sg-product * { animation: none !important; transition: none !important; }
}