/* Site footer. Every class starts with "sf-" so the site theme can not override it. */
.sf {
    --sf-bg: #1b1b1b;
    --sf-bg-2: #141414;
    --sf-text: #c9c9c9;
    --sf-muted: #9a9a9a;
    --sf-line: rgba(255, 255, 255, .12);
    --sf-accent: #fe7e00;
    background: var(--sf-bg);
    color: var(--sf-text);
    font-size: 13px;
    line-height: 1.7;
    margin-top: 32px;
}
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
.sf a { color: var(--sf-text) !important; text-decoration: none !important; transition: color .2s; }
.sf a:hover { color: var(--sf-accent) !important; }
.sf-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }

.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 28px 0; }
.sf .sf-title { color: var(--sf-accent) !important; font-size: 14px; font-weight: 700; margin: 0 0 10px; line-height: 1.4; }

.sf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sf-links li { color: var(--sf-text) !important; }

.sf-social { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sf-social a { color: #ffffff !important; display: inline-flex; }
.sf-social a:hover { color: var(--sf-accent) !important; }
.sf-social svg { width: 18px; height: 18px; }

.sf-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-store {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
    background: #000; border: 1px solid #5a5a5a; border-radius: 8px; color: #fff !important; direction: ltr;
}
.sf-store:hover { border-color: var(--sf-accent); color: #fff !important; }
.sf-store svg { width: 20px; height: 20px; flex: none; }
.sf-store span { display: flex; flex-direction: column; line-height: 1.05; font-size: 13px; font-weight: 700; text-align: left; }
.sf-store small { font-size: 8px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase; opacity: .85; }

.sf-brand { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; }
.sf-logo img { height: 48px; width: auto; display: block; filter: brightness(0) invert(1); }

.sf-bottom { background: var(--sf-bg-2); border-top: 1px solid var(--sf-accent); }
.sf-bottom__row { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; padding-bottom: 14px; text-align: center; }
.sf .sf-bottom p { margin: 0; font-size: 13px; color: var(--sf-text) !important; }
.sf-payments { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; direction: ltr; }
.sf-pay {
    height: 26px; min-width: 44px; padding: 0 8px; border-radius: 5px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; letter-spacing: .4px; color: #111;
}
.sf-pay svg { height: 18px; width: auto; }
.sf-pay--knet { color: #0a4d8c; }
.sf-pay--visa { color: #1a1f71; font-style: italic; font-size: 13px; }
.sf-pay--taly { color: #6b3df5; font-weight: 800; }

/* desktop only: on mobile the site has its own bottom navigation bar */
@media (max-width: 991.98px) {
    .sf { display: none; }
}

@media (min-width: 992px) {
    .sf-grid { grid-template-columns: auto auto auto auto 1fr; gap: 0; padding: 26px 0; }
    .sf-col { padding: 0 32px; }
    .sf-col:first-child { padding-inline-start: 0; }
    .sf-col + .sf-col:not(.sf-brand) { border-inline-start: 1px solid var(--sf-line); }
    .sf-brand { grid-column: auto; justify-content: flex-end; padding-inline-end: 0; }
    .sf-bottom__row { flex-direction: row; justify-content: space-between; text-align: start; }
}