/* Askur Tilboð – Pizzan-style deal builder in Askur's look.
 * Font is inherited from the theme (Neuzeit Grotesk). Colours below match askurpizzeria.is. */
.askur-tilbod {
	--at-red: #8a0000;          /* Askur button colour */
	--at-red-soft: #f6e6e6;
	--at-accent: #8a0000;       /* red used for text/outlines (lighter on dark) */
	--at-ink: #000;             /* headings */
	--at-text: #666;            /* body text */
	--at-line: #e4e4e4;
	--at-bg: #fff;
	--at-muted-bg: #f6f6f6;
	--at-radius: 6px;
	--at-header: 90px;          /* Divi fixed header height */
	--at-drawer-w: 560px;

	clear: both;
	margin: 0 0 24px;
	font-family: inherit;
	color: var(--at-text);
}
.askur-tilbod *, .askur-tilbod *::before, .askur-tilbod *::after { box-sizing: border-box; }
.askur-tilbod button { font-family: inherit; }

/* Dark theme – picked automatically on dark backgrounds (the menu's Quick View popup) */
.askur-tilbod.at-dark {
	--at-ink: #fff;
	--at-text: #b1b1b1;
	--at-line: #333;
	--at-bg: #161616;
	--at-muted-bg: #262626;
	--at-red-soft: rgba(228, 103, 91, .14);
	--at-accent: #e4675b;
}
.askur-tilbod.at-dark .at-search { color-scheme: dark; }
.askur-tilbod.at-dark .at-tag { border-color: #444; }
.askur-tilbod.at-dark .at-tag--base.is-off { border-color: #444; color: #777; }
.askur-tilbod.at-dark .at-item:hover { border-color: #555; }
.askur-tilbod.at-dark .at-back::before { filter: invert(1); background-color: #d9d9d9; }
.askur-tilbod.at-dark .at-drawer { box-shadow: -12px 0 40px rgba(0, 0, 0, .6); }

/* Intro (shortcode only) */
.at-intro { margin-bottom: 20px; }
.at-intro__title { margin: 0; padding: 0 0 6px; color: var(--at-ink); }
.at-intro__desc { margin: 0; padding: 0; }

/* ---------- Rows ---------- */
.at-steps { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 14px; }
.at-step { margin: 0 !important; padding: 0 !important; list-style: none; background: var(--at-bg); border: 1px solid var(--at-line); border-radius: var(--at-radius); }
.at-step::before { display: none !important; }
.at-step fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.at-row { display: flex; align-items: center; gap: 16px; padding: 18px 18px; }
.at-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.at-row__title { color: var(--at-ink); font-weight: 700; font-size: 17px; line-height: 1.2; }
.at-row__hint { font-size: 14px; }

.at-row__pick {
	flex: 0 0 auto; min-width: 92px; padding: 12px 20px; cursor: pointer;
	background: var(--at-bg); color: var(--at-accent);
	border: 1.5px solid var(--at-accent); border-radius: var(--at-radius);
	font-size: 15px; font-weight: 700; line-height: 1;
	transition: background .15s, color .15s;
}
.at-row__pick:hover, .at-step.is-open .at-row__pick { background: var(--at-red); color: #fff; }

/* Done state */
.at-done { display: none; }
.at-step.is-done .at-row { display: none; }
.at-step.is-done .at-done { display: block; }
.at-done__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--at-line); }
.at-done__title { color: var(--at-ink); font-weight: 700; font-size: 16px; }
.at-done__edit { all: unset; cursor: pointer; color: var(--at-accent); font-weight: 700; font-size: 15px; }
.at-done__edit:hover { text-decoration: underline; }
.at-done__item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; }
.at-done__thumb { flex: 0 0 52px; height: 52px; border-radius: 50%; background: center/cover no-repeat var(--at-muted-bg); }
.at-done__name { flex: 1; color: var(--at-ink); font-weight: 700; font-size: 15px; }
.at-done__name small { display: block; margin-top: 3px; color: var(--at-text); font-weight: 400; font-size: 13px; line-height: 1.35; }
.at-done__up { flex: 0 0 auto; color: var(--at-accent); font-weight: 700; font-size: 14px; }
.at-done__up:empty { display: none; }
.at-done__arrow { width: 9px; height: 9px; border: solid var(--at-ink); border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 4px; }

.at-row__pick:focus-visible, .at-done__edit:focus-visible, .at-done__item:focus-visible { outline: 2px solid var(--at-red); outline-offset: 2px; }

/* ---------- Picker drawer (slides in from the right, like Pizzan) ---------- */
.at-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; }
.at-drawer__title { color: var(--at-ink); font-weight: 700; font-size: 20px; }
.at-drawer__close { all: unset; cursor: pointer; position: relative; width: 32px; height: 32px; border-radius: 50%; }
.at-drawer__close::before, .at-drawer__close::after { content: ""; position: absolute; left: 7px; top: 15px; width: 18px; height: 2px; background: var(--at-ink); transform: rotate(45deg); }
.at-drawer__close::after { transform: rotate(-45deg); }
.at-drawer__close:hover { background: var(--at-muted-bg); }

.at-drawer__tools { padding: 0 22px 12px; display: grid; gap: 10px; }
.at-search {
	width: 100%; height: 44px; padding: 0 14px 0 40px !important; margin: 0;
	border: 1px solid var(--at-line) !important; border-radius: var(--at-radius) !important;
	background: var(--at-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 14px center no-repeat !important;
	font: inherit; font-size: 15px; color: var(--at-ink);
}
.at-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.at-chips::-webkit-scrollbar { display: none; }
.at-chip { flex: 0 0 auto; cursor: pointer; padding: 8px 14px; border: 1px solid var(--at-line); border-radius: 999px; background: var(--at-bg); color: var(--at-ink); font-size: 14px; font-weight: 600; line-height: 1; }
.at-chip.is-active { background: var(--at-red); border-color: var(--at-red); color: #fff; }

.at-list { display: grid; gap: 12px; padding: 4px 22px 22px; }
.at-empty { padding: 0 22px 22px; margin: 0; }

.at-item {
	position: relative; display: flex; align-items: center; gap: 16px; margin: 0;
	padding: 12px 16px 12px 12px; cursor: pointer;
	background: var(--at-bg); border: 1px solid var(--at-line); border-radius: var(--at-radius);
	transition: border-color .15s, box-shadow .15s;
}
.at-item:hover { border-color: #bdbdbd; }
.at-item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.at-item:focus-within { outline: 2px solid var(--at-red); outline-offset: 2px; }
.at-item:has(input:checked) { border-color: var(--at-accent); box-shadow: inset 0 0 0 1px var(--at-accent); background: var(--at-red-soft); }
.at-item[hidden] { display: none; }
.at-item__img { flex: 0 0 96px; height: 96px; border-radius: var(--at-radius); overflow: hidden; display: block; }
.at-item__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.at-item__ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--at-muted-bg); font-size: 34px; font-weight: 700; color: #bbb; }
.at-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.at-item__name { color: var(--at-ink); font-weight: 700; font-size: 16px; line-height: 1.25; }
.at-item__desc { font-size: 14px; line-height: 1.4; }
.at-item__up { color: var(--at-accent); font-weight: 700; font-size: 15px; }

/* Without JS: pickers show inline under each row.
 * With JS: drawers are moved to <body> (.at-layer) so Divi containers can't clip them. */
.at-layer { margin: 0; }
.askur-tilbod.at-js .at-drawer {
	position: fixed; z-index: 100000; top: 0; right: 0; bottom: 0;
	width: min(var(--at-drawer-w), 100vw);
	display: flex; flex-direction: column;
	background: var(--at-bg); box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
	transform: translateX(100%); visibility: hidden;
	transition: transform .28s ease, visibility 0s linear .28s;
}
.askur-tilbod.at-js .at-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.askur-tilbod.at-js .at-drawer .at-list { overflow-y: auto; overscroll-behavior: contain; flex: 1; align-content: start; }
.askur-tilbod.at-js .at-view--custom { display: none; }
.askur-tilbod.at-js .at-drawer.is-custom .at-view--list { display: none; }
.askur-tilbod.at-js .at-drawer.is-custom .at-view--custom { display: flex; }
.askur-tilbod.at-js .at-drawer.is-open { transform: none; visibility: visible; transition: transform .28s ease; }
.askur-tilbod:not(.at-js) .at-drawer__close { display: none; }
.askur-tilbod:not(.at-js) .at-done { display: none !important; }
.askur-tilbod:not(.at-js) .at-row__pick { display: none; }

.at-backdrop { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .28s; }
.at-backdrop.is-on { opacity: 1; }
body.at-lock { overflow: hidden; }

/* ---------- Topping customizer (inside the drawer) ---------- */
.at-back { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; color: var(--at-ink); font-weight: 700; font-size: 15px; }
.at-back::before { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--at-muted-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M9 2 4 7l5 5'/%3E%3C/svg%3E") center no-repeat; }
.at-back:focus-visible { outline: 2px solid var(--at-red); outline-offset: 3px; border-radius: 4px; }

.at-custom { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px 18px; display: grid; gap: 12px; align-content: start; }
.at-custom__hero { display: flex; align-items: center; gap: 16px; padding: 4px 0 6px; }
.at-custom__hero img { flex: 0 0 110px; width: 110px; height: 110px; object-fit: contain; }
.at-custom__name { color: var(--at-ink); font-weight: 700; font-size: 22px; line-height: 1.2; }
.at-custom__desc { margin-top: 4px; font-size: 14px; line-height: 1.45; }

.at-group { border: 1px solid var(--at-line); border-radius: var(--at-radius); background: var(--at-bg); }
.at-group__head { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; }
.at-group__head--static { cursor: default; flex-wrap: wrap; }
.at-group__head:focus-visible { outline: 2px solid var(--at-red); outline-offset: -2px; border-radius: var(--at-radius); }
.at-group__name { flex: 1; color: var(--at-ink); font-weight: 700; font-size: 16px; }
.at-group__note { font-size: 13px; }
.at-group__count { color: var(--at-accent); font-weight: 700; font-size: 13px; }
.at-group__chev { width: 8px; height: 8px; border: solid var(--at-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -4px 4px 0; transition: transform .2s; }
.at-group.is-open .at-group__chev { transform: rotate(-135deg); margin-top: 4px; }
.at-group .at-tags { display: none; }
.at-group.is-open .at-tags { display: flex; }
.at-tags { flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }

.at-tag {
	cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin: 0;
	padding: 9px 12px; border: 1px solid #cfcfcf; border-radius: 4px; background: var(--at-bg);
	color: var(--at-ink); font-size: 14px; font-weight: 500; line-height: 1.1;
	transition: background .12s, border-color .12s;
}
.at-tag:hover { border-color: #999; }
.at-tag__p { color: var(--at-text); font-size: 12.5px; font-weight: 600; }
.at-tag.is-on { background: var(--at-red-soft); border-color: var(--at-accent); color: var(--at-accent); }
.at-tag.is-on .at-tag__p { color: var(--at-accent); }
.at-tag.is-on::before { content: ""; width: 10px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.at-tag--base { background: var(--at-red-soft); border-color: var(--at-accent); color: var(--at-accent); }
.at-tag--base.is-off { background: var(--at-bg); border-color: #cfcfcf; border-style: dashed; color: #999; text-decoration: line-through; }
.at-tag:focus-visible { outline: 2px solid var(--at-red); outline-offset: 2px; }

.at-custom__foot { padding: 14px 22px 18px; border-top: 1px solid var(--at-line); background: var(--at-bg); }
.at-confirm {
	all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 52px; padding: 0 22px;
	display: flex; align-items: center; justify-content: space-between;
	background: var(--at-red); color: #fff; border-radius: var(--at-radius); font-weight: 700; font-size: 17px;
}
.at-confirm:focus-visible { outline: 2px solid var(--at-ink); outline-offset: 2px; }

/* ---------- Bottom bar ---------- */
.at-bar {
	position: sticky; bottom: 0; z-index: 50;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
	margin-top: 18px; padding: 14px 0;
	background: var(--at-surface, var(--at-bg)); border-top: 1px solid var(--at-line);
}
.at-bar__qty { display: inline-flex; align-items: center; height: 52px; border: 1px solid var(--at-line); border-radius: var(--at-radius); }
.at-qty__btn { all: unset; cursor: pointer; width: 44px; height: 100%; text-align: center; font-size: 22px; line-height: 50px; color: var(--at-ink); }
.at-qty__btn:disabled { color: #ccc; cursor: default; }
.at-qty__input {
	width: 40px !important; height: 100%; padding: 0 !important; margin: 0; border: 0 !important; background: none !important;
	text-align: center; font: inherit; font-size: 16px !important; font-weight: 700; color: var(--at-ink) !important; -moz-appearance: textfield;
}
.at-qty__input::-webkit-outer-spin-button, .at-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.askur-tilbod .at-bar__btn {
	display: inline-flex !important; align-items: center; justify-content: space-between; gap: 16px;
	flex: 1 1 220px; min-width: 0; max-width: 360px; white-space: nowrap; height: 52px; margin: 0 !important; padding: 0 22px !important;
	background: var(--at-red) !important; color: #fff !important; border: 0 !important; border-radius: var(--at-radius) !important;
	font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important;
	transition: opacity .15s;
}
.askur-tilbod .at-bar__btn::after { display: none !important; } /* Divi arrow icon */
.at-bar__btn > span { white-space: nowrap; }
.askur-tilbod .at-bar__btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }

@media (max-width: 600px) {
	.at-row { padding: 16px 14px; }
	.at-row__pick { min-width: 80px; padding: 11px 16px; }
	.at-done__head, .at-done__item { padding-left: 14px; padding-right: 14px; }
	.at-drawer__head { padding: 16px 16px 12px; }
	.at-drawer__tools, .at-list { padding-left: 16px; padding-right: 16px; }
	.at-item__img { flex-basis: 76px; height: 76px; }
	.at-custom { padding: 0 16px 16px; }
	.at-custom__hero img { flex-basis: 80px; width: 80px; height: 80px; }
	.at-custom__name { font-size: 19px; }
	.at-custom__foot { padding: 12px 16px 16px; }
	.at-bar { gap: 10px; }
	.askur-tilbod .at-bar__btn { max-width: none; gap: 12px; padding: 0 16px !important; font-size: 16px !important; }
}

/* ---------- Cart, side cart & checkout: compact deal summary ---------- */
.askur-cart {
	list-style: none !important; margin: 6px 0 2px !important; padding: 0 !important;
	display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 12px;
	font-size: .92em; line-height: 1.35;
}
.askur-cart, .askur-cart * { font-style: normal !important; }
.askur-cart__line { display: contents; }
.askur-cart__line::before, .askur-cart__line::marker { content: none !important; }
.askur-cart__label { grid-column: 1; opacity: .6; font-weight: 400; }
.askur-cart__value { grid-column: 2; font-weight: 600; }
.askur-cart__mods { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: -3px; font-size: .9em; opacity: .75; }
.askur-cart__mod--rem { opacity: .8; }

/* Deal cards on the menu: open via the card / Quick View only (no Sérsníða / Bæta í körfu buttons) */
.askur-tilbod-product .button.yith-wcqv-button,
.askur-tilbod-product .add_to_cart_button { display: none !important; }

.askur-tilbod .at-bar__btn.loading { opacity: .6; pointer-events: none; }