/* ISTT | Contul meu * Totul e sub #istt-cont: specificitatea ID-ului bate stilurile Elementor/Woo fara !important. * Singurul !important: [hidden], ca filtrele sa ascunda sigur elementele. */ #istt-cont { --p: #1b6a63; --p-h: #15544f; --p-t: #e6f0ee; --p-on: #cfe3df; --card: #fff; --sec: #efece3; --br: #e3dfd3; --in: #cfcab9; --tx: #1d1d1b; --mu: #5c5b55; --red: #8e191c; --red-t: #f8e9e9; --amb: #7a5200; --amb-t: #fbefd5; --amb-br: #eed9a8; --blue: #3f6670; --blue-t: #e5eef0; --done: #22603b; --done-t: #e3efe9; --r: 16px; --r-s: 10px; --font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif; max-width: 1200px; margin: 0 auto; padding: 40px 0 72px; color: var(--tx); font-family: var(--font); font-size: 16px; line-height: 1.5; } #istt-cont *, #istt-cont *::before, #istt-cont *::after { box-sizing: border-box; } #istt-cont [hidden] { display: none !important; } #istt-cont :is(h1, h2, h3, p, ul, dl, dd, figure) { margin: 0; } #istt-cont :is(h1, h2, h3) { font-family: var(--font); color: var(--tx); letter-spacing: 0; text-transform: none; } #istt-cont ul { list-style: none; padding: 0; } #istt-cont a { color: var(--p); text-decoration: none; } #istt-cont a:hover { color: var(--p-h); } #istt-cont p a, #istt-cont dd a { text-decoration: underline; text-underline-offset: 2px; } #istt-cont img { display: block; max-width: 100%; height: auto; } #istt-cont :focus-visible { outline: 2px solid var(--p); outline-offset: 2px; } #istt-cont .istt-i { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; } #istt-cont .istt-muted { color: var(--mu); font-size: 15px; } #istt-cont .istt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } #istt-cont .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Antet si grila ---------- */ #istt-cont .istt-acc__head { margin-bottom: 32px; } #istt-cont .istt-acc__crumb { font-size: 14px; color: var(--mu); margin-bottom: 8px; } #istt-cont .istt-acc__crumb a { color: var(--mu); text-decoration: none; } #istt-cont .istt-acc__crumb a:hover { color: var(--p); } #istt-cont .istt-acc__title { font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; } #istt-cont .istt-acc__sub { margin-top: 6px; font-size: 16px; color: var(--mu); } #istt-cont .istt-acc__grid { display: flex; gap: 32px; align-items: flex-start; } #istt-cont .istt-acc__side { width: 288px; flex-shrink: 0; position: sticky; top: 24px; } #istt-cont .istt-acc__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; } /* ---------- Meniu ---------- */ #istt-cont .istt-nav { background: var(--card); border: 1px solid var(--br); border-radius: var(--r); padding: 16px 12px; } #istt-cont .istt-nav__user { display: flex; align-items: center; gap: 12px; padding: 4px 6px 16px; } #istt-cont .istt-nav__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--p); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; flex-shrink: 0; } #istt-cont .istt-nav__who { min-width: 0; display: flex; flex-direction: column; } #istt-cont .istt-nav__name { font-weight: 700; font-size: 15px; } #istt-cont .istt-nav__email { font-size: 13px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #istt-cont .istt-nav__list { display: flex; flex-direction: column; gap: 2px; } #istt-cont .istt-nav__out { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--br); } #istt-cont .istt-nav__link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: var(--r-s); font-size: 15px; font-weight: 500; color: var(--tx); transition: background-color .15s; } #istt-cont .istt-nav__link .istt-i { color: var(--mu); } #istt-cont .istt-nav__link:hover { background: var(--sec); color: var(--tx); } #istt-cont .istt-nav__link.is-active { background: var(--p-t); color: var(--p-h); font-weight: 700; } #istt-cont .istt-nav__link.is-active .istt-i { color: var(--p); } #istt-cont .istt-nav__link--out, #istt-cont .istt-nav__link--out .istt-i { color: var(--red); } #istt-cont .istt-nav__link--out:hover { background: var(--red-t); color: var(--red); } /* ---------- Butoane ---------- */ #istt-cont .istt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r-s); border: 1px solid var(--p); background: var(--p); color: #fff; font: 600 15px/1.2 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } #istt-cont .istt-btn:hover { background: var(--p-h); border-color: var(--p-h); color: #fff; } #istt-cont .istt-btn .istt-i { width: 18px; height: 18px; } #istt-cont .istt-btn--sm { min-height: 40px; padding: 0 16px; } #istt-cont .istt-btn--sec { background: var(--card); color: var(--p); border-color: #b9d1cc; } #istt-cont .istt-btn--sec:hover { background: var(--p-t); color: var(--p-h); border-color: var(--p); } #istt-cont .istt-btn--ghost { background: transparent; color: var(--p); border-color: transparent; } #istt-cont .istt-btn--ghost:hover { background: var(--p-t); color: var(--p-h); border-color: transparent; } #istt-cont .istt-btn--light { background: #fff; color: var(--p-h); border-color: #fff; } #istt-cont .istt-btn--light:hover { background: var(--p-t); color: var(--p-h); border-color: var(--p-t); } #istt-cont .istt-btn--onp { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } #istt-cont .istt-btn--onp:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; } #istt-cont .istt-actions { display: flex; flex-wrap: wrap; gap: 12px; } #istt-cont .istt-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; } #istt-cont .istt-more .istt-i { width: 16px; height: 16px; } /* ---------- Badge-uri ---------- */ #istt-cont .istt-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--sec); color: var(--mu); } #istt-cont .istt-badge .istt-i { width: 14px; height: 14px; } #istt-cont .istt-badge--ok { background: var(--p-t); color: var(--p); } #istt-cont .istt-badge--wait { background: var(--amb-t); color: var(--amb); } #istt-cont .istt-badge--bad { background: var(--red-t); color: var(--red); } #istt-cont .istt-badge--info { background: var(--blue-t); color: var(--blue); } #istt-cont .istt-badge--done { background: var(--done-t); color: var(--done); } #istt-cont .istt-badges { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- Carduri ---------- */ #istt-cont .istt-card { background: var(--card); border: 1px solid var(--br); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 16px; } #istt-cont .istt-card--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; } #istt-cont .istt-card__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } #istt-cont .istt-card__head--top { align-items: flex-start; } #istt-cont .istt-card__head--top .istt-muted { margin-top: 4px; } #istt-cont .istt-card__text { font-size: 16px; } #istt-cont .istt-card__intro { display: flex; gap: 16px; align-items: flex-start; } #istt-cont .istt-card__intro .istt-muted { margin-top: 4px; } #istt-cont .istt-card__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--p-t); color: var(--p); display: grid; place-items: center; flex-shrink: 0; } #istt-cont .istt-card__ic .istt-i { width: 22px; height: 22px; } #istt-cont .istt-h2 { font-size: 22px; line-height: 1.25; font-weight: 700; } #istt-cont .istt-h3 { font-size: 17px; line-height: 1.3; font-weight: 700; } #istt-cont .istt-note { font-size: 14px; color: var(--mu); } #istt-cont .istt-empty { background: var(--card); border: 1px dashed var(--in); border-radius: var(--r); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: var(--mu); } #istt-cont .istt-guest { max-width: 560px; } #istt-cont .istt-info { display: flex; align-items: center; gap: 14px; background: var(--sec); border-radius: var(--r); padding: 18px 22px; font-size: 15px; } #istt-cont .istt-info--row { background: var(--p-t); border: 1px solid #cfe1dd; } #istt-cont .istt-info__ic { width: 40px; height: 40px; border-radius: var(--r-s); background: #fff; color: var(--p); display: grid; place-items: center; flex-shrink: 0; } #istt-cont .istt-info__text { flex: 1; } #istt-cont .istt-info__text strong { display: block; } /* ---------- Meta, data, progres ---------- */ #istt-cont .istt-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--mu); } #istt-cont .istt-meta--sm { font-size: 13px; gap: 6px 16px; } #istt-cont .istt-meta__i { display: inline-flex; align-items: center; gap: 6px; } #istt-cont .istt-meta__i .istt-i { width: 16px; height: 16px; } #istt-cont .istt-date { width: 64px; height: 68px; border-radius: 12px; background: var(--p-t); color: var(--p-h); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } #istt-cont .istt-date__d { font-size: 24px; font-weight: 700; line-height: 1; } #istt-cont .istt-date__m { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } #istt-cont .istt-date--dark { width: 72px; height: 76px; background: rgba(255, 255, 255, .14); color: #fff; } #istt-cont .istt-date--dark .istt-date__d { font-size: 28px; } #istt-cont .istt-date--dark .istt-date__m { font-size: 13px; } #istt-cont .istt-prog { display: flex; flex-direction: column; gap: 8px; } #istt-cont .istt-prog__top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--mu); } #istt-cont .istt-prog__top strong { color: var(--tx); font-weight: 600; } #istt-cont .istt-prog__bar { height: 8px; border-radius: 999px; background: var(--sec); overflow: hidden; } #istt-cont .istt-prog__bar span { display: block; height: 100%; border-radius: 999px; background: var(--p); } /* ---------- Filtre ---------- */ #istt-cont .istt-tabs { display: flex; flex-wrap: wrap; gap: 8px; } #istt-cont .istt-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--br); background: var(--card); color: var(--tx); font: 600 14px/1 var(--font); cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; } #istt-cont .istt-tab:hover { border-color: var(--p); color: var(--p); background: var(--card); } #istt-cont .istt-tab__n { font-size: 13px; padding: 3px 8px; border-radius: 999px; background: var(--sec); } #istt-cont .istt-tab.is-active { background: var(--p); border-color: var(--p); color: #fff; } #istt-cont .istt-tab.is-active .istt-tab__n { background: rgba(255, 255, 255, .2); } #istt-cont .istt-panel { display: flex; flex-direction: column; gap: 24px; } /* ---------- Panou ---------- */ #istt-cont .istt-hero { background: var(--p); color: #fff; border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 24px; } #istt-cont .istt-hero__top { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--p-on); } #istt-cont .istt-hero__label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } #istt-cont .istt-hero__body { display: flex; gap: 24px; align-items: center; } #istt-cont .istt-hero__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; } #istt-cont .istt-hero__title { font-size: 26px; line-height: 1.25; font-weight: 700; color: #fff; } #istt-cont .istt-hero .istt-meta { color: #e4f0ed; font-size: 15px; } #istt-cont .istt-alert { display: flex; align-items: center; gap: 16px; background: var(--amb-t); border: 1px solid var(--amb-br); border-radius: var(--r); padding: 20px 24px; } #istt-cont .istt-alert__ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--amb); display: grid; place-items: center; flex-shrink: 0; } #istt-cont .istt-alert__ic .istt-i { width: 22px; height: 22px; } #istt-cont .istt-alert__text { flex: 1; font-size: 14px; color: #4d3b12; } #istt-cont .istt-alert__title { font-size: 16px; font-weight: 700; color: var(--tx); margin-bottom: 2px; } #istt-cont .istt-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; } #istt-cont .istt-minis { display: flex; flex-direction: column; gap: 12px; } #istt-cont .istt-mini { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 12px; background: var(--sec); } #istt-cont .istt-mini__img { width: 88px; height: 64px; border-radius: var(--r-s); background: #d7e6e3; color: var(--p); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; } #istt-cont .istt-mini__img img { width: 100%; height: 100%; object-fit: cover; } #istt-cont .istt-mini__img .istt-i { width: 26px; height: 26px; } #istt-cont .istt-mini__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } #istt-cont .istt-mini__title { font-weight: 700; font-size: 15px; color: var(--tx); } #istt-cont .istt-rows { display: flex; flex-direction: column; } #istt-cont .istt-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--br); } #istt-cont .istt-row__main { flex: 1; display: flex; flex-direction: column; color: var(--tx); } #istt-cont .istt-row__main strong { font-size: 15px; } #istt-cont .istt-row__main span { font-size: 13px; color: var(--mu); } #istt-cont .istt-row__total { font-weight: 700; font-size: 15px; min-width: 84px; text-align: right; } #istt-cont .istt-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } #istt-cont .istt-quick__item { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--br); color: var(--tx); transition: border-color .15s; } #istt-cont .istt-quick__item:hover { border-color: var(--p); color: var(--tx); } #istt-cont .istt-quick__ic { width: 40px; height: 40px; border-radius: var(--r-s); background: var(--p-t); color: var(--p); display: grid; place-items: center; margin-bottom: 8px; } #istt-cont .istt-quick__title { font-weight: 700; font-size: 15px; } #istt-cont .istt-quick__sub { font-size: 13px; color: var(--mu); } /* ---------- Tabel comenzi ---------- */ #istt-cont .istt-table-wrap { background: var(--card); border: 1px solid var(--br); border-radius: var(--r); overflow: hidden; } #istt-cont .istt-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 15px; background: none; } #istt-cont .istt-table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--mu); padding: 14px 16px; background: var(--sec); border: 0; letter-spacing: .02em; } #istt-cont .istt-table td { padding: 18px 16px; border: 0; border-top: 1px solid var(--br); vertical-align: middle; background: none; } #istt-cont .istt-table tbody tr:first-child td { border-top: 0; } #istt-cont .istt-table__id a { font-weight: 700; color: var(--tx); text-decoration: none; } #istt-cont .istt-table__muted { color: var(--mu); white-space: nowrap; } #istt-cont .istt-table__title { display: block; font-weight: 600; } #istt-cont .istt-table__sub { display: block; font-size: 13px; color: var(--mu); margin-top: 2px; } #istt-cont .istt-table__total { font-weight: 700; white-space: nowrap; } #istt-cont .istt-table__acts { text-align: right; } #istt-cont .istt-table__acts .istt-btn { margin-left: 8px; } /* ---------- Comanda ---------- */ #istt-cont .istt-ord-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; } #istt-cont .istt-ord-head__text { display: flex; flex-direction: column; gap: 6px; } #istt-cont .istt-ord-head__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #istt-cont .istt-ord-head__title { font-size: 24px; font-weight: 700; } #istt-cont .istt-ord-head__sub { font-size: 15px; color: var(--mu); } #istt-cont .istt-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } #istt-cont .istt-split__main, #istt-cont .istt-split__side { display: flex; flex-direction: column; gap: 24px; } #istt-cont .istt-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--br); font-size: 15px; } #istt-cont .istt-kv > div:first-child { border-top: 0; padding-top: 0; } #istt-cont .istt-kv dt { color: var(--mu); font-weight: 400; } #istt-cont .istt-kv dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; } #istt-cont .istt-kv .istt-kv__total { padding-top: 14px; font-size: 18px; } #istt-cont .istt-kv .istt-kv__total dt { color: var(--tx); font-weight: 700; } #istt-cont .istt-kv .istt-kv__total dd { font-weight: 700; } #istt-cont .istt-pay { display: flex; gap: 12px; align-items: center; font-size: 15px; } #istt-cont .istt-pay__ic { width: 40px; height: 40px; border-radius: var(--r-s); background: var(--p-t); color: var(--p); display: grid; place-items: center; flex-shrink: 0; } /* Iesirea Event Tickets (PDF / Wallet) in cardul Bilete */ #istt-cont .istt-ext { scroll-margin-top: 24px; } #istt-cont .istt-ext :is(h2, h3, header) { font-size: 15px; font-weight: 700; margin: 8px 0; } #istt-cont .istt-ext :is(table, ul) { width: 100%; margin: 0; border: 0; } #istt-cont .istt-ext :is(td, th, li) { padding: 10px 0; border: 0; border-top: 1px solid var(--br); background: none; } #istt-cont .istt-ext a:not(.istt-btn) { font-weight: 600; } /* ---------- Evenimente ---------- */ #istt-cont .istt-month { display: flex; flex-direction: column; gap: 12px; } #istt-cont .istt-month__label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } #istt-cont .istt-list { display: flex; flex-direction: column; gap: 12px; } #istt-cont .istt-ev { display: flex; align-items: center; gap: 20px; background: var(--card); border: 1px solid var(--br); border-radius: var(--r); padding: 20px 24px; } #istt-cont .istt-ev__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } #istt-cont .istt-ev__title { font-size: 17px; font-weight: 700; color: var(--tx); } #istt-cont .istt-ev__title:hover { color: var(--p); } #istt-cont .istt-ev__side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } #istt-cont .istt-ev--past .istt-ev__title { color: var(--mu); } #istt-cont .istt-ev--past .istt-date { background: var(--sec); color: var(--mu); } /* ---------- Bilete ---------- */ #istt-cont .istt-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } #istt-cont .istt-tk { background: var(--card); border: 1px solid var(--br); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; } #istt-cont .istt-tk__top { background: var(--p); color: #fff; padding: 20px 22px; display: flex; gap: 16px; align-items: center; } #istt-cont .istt-tk__top .istt-date { width: 56px; height: 60px; border-radius: var(--r-s); } #istt-cont .istt-tk__top .istt-date__d { font-size: 22px; } #istt-cont .istt-tk__top .istt-date__m { font-size: 12px; } #istt-cont .istt-tk__title { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.3; } #istt-cont .istt-tk__title:hover { color: var(--p-on); } #istt-cont .istt-tk__body { margin: 0 18px; padding: 16px 4px; border-top: 2px dashed var(--br); display: flex; flex-direction: column; gap: 10px; font-size: 14px; } #istt-cont .istt-tk__body > div { display: flex; justify-content: space-between; gap: 16px; } #istt-cont .istt-tk__body dt { color: var(--mu); } #istt-cont .istt-tk__body dd { font-weight: 700; text-align: right; overflow-wrap: anywhere; } #istt-cont .istt-tk__acts { margin-top: auto; padding: 0 22px 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #istt-cont .istt-tk--past .istt-tk__top { background: #8c8a82; } /* ---------- Cursuri ---------- */ #istt-cont .istt-courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } #istt-cont .istt-co { background: var(--card); border: 1px solid var(--br); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; } #istt-cont .istt-co__img { position: relative; display: block; aspect-ratio: 16 / 9; background: #d7e6e3; } #istt-cont .istt-co__img img { width: 100%; height: 100%; object-fit: cover; } #istt-cont .istt-co__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--p); } #istt-cont .istt-co__ph .istt-i { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: #fff; } #istt-cont .istt-co__img .istt-badge { position: absolute; top: 14px; left: 14px; } #istt-cont .istt-co__body { flex: 1; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px; } #istt-cont .istt-co__title { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--tx); } #istt-cont .istt-co__title:hover { color: var(--p); } #istt-cont .istt-co__cta { margin-top: auto; } /* ---------- Adresa ---------- */ #istt-cont .istt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #istt-cont .istt-field { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--sec); } #istt-cont .istt-field--wide { grid-column: 1 / -1; } #istt-cont .istt-field dt { font-size: 13px; color: var(--mu); font-weight: 500; } #istt-cont .istt-field dd { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } /* ---------- Formulare (Detalii cont + editare adresa Woo) ---------- */ #istt-cont .istt-form { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } #istt-cont .istt-form__grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #istt-cont .istt-form__row { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; } #istt-cont .istt-form__row--wide { grid-column: 1 / -1; } #istt-cont .istt-form__hint { font-size: 13px; color: var(--mu); } #istt-cont label { font-size: 14px; font-weight: 600; color: var(--tx); line-height: 1.4; } #istt-cont .istt-input, #istt-cont .istt-acc__main > form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]), #istt-cont .istt-acc__main > form select, #istt-cont .istt-acc__main > form textarea { width: 100%; min-height: 48px; padding: 0 14px; margin: 0; border: 1px solid var(--in); border-radius: var(--r-s); background: #fff; color: var(--tx); font: 400 15px/1.4 var(--font); box-shadow: none; } #istt-cont .istt-acc__main > form textarea { padding: 12px 14px; min-height: 96px; } #istt-cont .istt-input:focus, #istt-cont .istt-acc__main > form :is(input, select, textarea):focus { border-color: var(--p); outline: 2px solid var(--p-t); outline-offset: 0; } /* Formularul Woo de editare adresa, in cardul ISTT */ #istt-cont .istt-acc__main > form { background: var(--card); border: 1px solid var(--br); border-radius: var(--r); padding: 28px; } #istt-cont .istt-acc__main > form > h2, #istt-cont .istt-acc__main > form > h3 { font-size: 22px; font-weight: 700; margin-bottom: 20px; } #istt-cont .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #istt-cont .woocommerce-address-fields__field-wrapper .form-row { width: auto; float: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #istt-cont .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; } #istt-cont .woocommerce-address-fields .required { color: var(--red); text-decoration: none; border: 0; } #istt-cont .woocommerce-address-fields .optional { color: var(--mu); font-weight: 400; } #istt-cont .woocommerce-address-fields > p { margin-top: 24px; } #istt-cont .woocommerce-address-fields .button, #istt-cont .istt-acc__main > form button[type="submit"]:not(.istt-btn) { min-height: 44px; padding: 0 20px; border-radius: var(--r-s); border: 1px solid var(--p); background: var(--p); color: #fff; font: 600 15px/1.2 var(--font); cursor: pointer; } #istt-cont .woocommerce-address-fields .button:hover, #istt-cont .istt-acc__main > form button[type="submit"]:not(.istt-btn):hover { background: var(--p-h); border-color: var(--p-h); } #istt-cont .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--in); border-radius: var(--r-s); } #istt-cont .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 14px; color: var(--tx); } #istt-cont .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; } /* Notificari Woo in stilul ISTT */ #istt-cont :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { margin: 0; padding: 16px 20px; border: 1px solid var(--br); border-radius: var(--r); background: var(--card); color: var(--tx); font-size: 15px; list-style: none; } #istt-cont :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { display: none; } #istt-cont .woocommerce-message { background: var(--p-t); border-color: #cfe1dd; } #istt-cont .woocommerce-error { background: var(--red-t); border-color: #ebc8c9; color: var(--red); } /* ---------- Tableta (sub 1025px): meniu orizontal ---------- */ @media (max-width: 1024px) { #istt-cont { padding: 32px 24px 56px; } #istt-cont .istt-acc__grid { flex-direction: column; align-items: stretch; gap: 24px; } #istt-cont .istt-acc__side { width: 100%; position: static; } #istt-cont .istt-nav { background: none; border: 0; padding: 0; } #istt-cont .istt-nav__user { display: none; } #istt-cont .istt-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } #istt-cont .istt-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } #istt-cont .istt-split { grid-template-columns: minmax(0, 1fr); } } /* ---------- Mobil (sub 768px) ---------- */ @media (max-width: 767px) { #istt-cont { padding: 24px 16px 48px; } #istt-cont .istt-acc__head { margin-bottom: 20px; } #istt-cont .istt-acc__title { font-size: 28px; } #istt-cont .istt-acc__main { gap: 16px; } #istt-cont .istt-card { padding: 20px; } #istt-cont .istt-card--row, #istt-cont .istt-ord-head, #istt-cont .istt-alert, #istt-cont .istt-info--row { flex-direction: column; align-items: stretch; } #istt-cont .istt-card__head { flex-wrap: wrap; align-items: center; } #istt-cont .istt-hero { padding: 22px; gap: 18px; border-radius: 18px; } #istt-cont .istt-hero__body { align-items: flex-start; gap: 16px; } #istt-cont .istt-hero__title { font-size: 20px; } #istt-cont .istt-hero .istt-meta { flex-direction: column; font-size: 14px; } #istt-cont .istt-hero__top .istt-hero__when { display: none; } #istt-cont .istt-actions { flex-direction: column; } #istt-cont .istt-actions .istt-btn, #istt-cont .istt-alert .istt-btn, #istt-cont .istt-card--row .istt-btn, #istt-cont .istt-info--row .istt-btn { width: 100%; min-height: 48px; } #istt-cont .istt-cols, #istt-cont .istt-tickets, #istt-cont .istt-courses, #istt-cont .istt-fields, #istt-cont .istt-form__grid, #istt-cont .woocommerce-address-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); } #istt-cont .istt-field--wide, #istt-cont .istt-form__row--wide { grid-column: auto; } #istt-cont .istt-form .istt-btn { width: 100%; min-height: 48px; } #istt-cont .istt-quick__item { padding: 16px; } #istt-cont .istt-mini { padding: 12px; gap: 12px; } #istt-cont .istt-mini__img { width: 64px; height: 56px; } #istt-cont .istt-row { flex-wrap: wrap; gap: 8px 12px; } #istt-cont .istt-row__main { flex-basis: 100%; } #istt-cont .istt-row__total { margin-left: auto; } #istt-cont .istt-ev { flex-wrap: wrap; padding: 16px; gap: 14px; } #istt-cont .istt-ev__body { flex-basis: calc(100% - 84px); } #istt-cont .istt-ev__side { flex-basis: 100%; align-items: stretch; } #istt-cont .istt-ev__side .istt-badge { align-self: flex-start; } #istt-cont .istt-ev__side .istt-btn { width: 100%; min-height: 48px; } #istt-cont .istt-tk__acts .istt-btn { flex: 1 1 100%; min-height: 48px; } #istt-cont .istt-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #istt-cont .istt-tab { flex-shrink: 0; } /* Tabelul de comenzi devine carduri */ #istt-cont .istt-table-wrap { background: none; border: 0; border-radius: 0; overflow: visible; } #istt-cont .istt-table thead { display: none; } #istt-cont .istt-table, #istt-cont .istt-table tbody { display: block; } #istt-cont .istt-table tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--br); border-radius: var(--r); } #istt-cont .istt-table td { display: block; padding: 0; border: 0; } #istt-cont .istt-table__id { font-size: 16px; } #istt-cont .istt-table__muted { text-align: right; font-size: 14px; } #istt-cont .istt-table__main { grid-column: 1 / -1; } #istt-cont .istt-table__total { text-align: right; } #istt-cont .istt-table__acts { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--br); } #istt-cont .istt-table__acts .istt-btn { flex: 1; margin: 0; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { #istt-cont * { transition: none; } } /* Coloana ingusta din Detalii comanda: eticheta deasupra valorii. */ #istt-cont .istt-split__side .istt-kv > div { flex-direction: column; gap: 2px; } #istt-cont .istt-split__side .istt-kv dd { text-align: left; } /* Navigare AJAX: continutul se estompeaza doar daca incarcarea dureaza peste 120 ms. */ #istt-cont .istt-acc__main { transition: opacity .15s; } #istt-cont[aria-busy="true"] .istt-acc__main { opacity: .5; pointer-events: none; } #istt-cont .istt-acc__title:focus { outline: none; } /* Biletele de pe pagina comenzii */ #istt-cont .istt-vt { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--br); border-radius: 12px; } #istt-cont .istt-vt + .istt-vt { margin-top: 4px; } #istt-cont .istt-vt__head { display: flex; gap: 16px; align-items: center; } #istt-cont .istt-vt__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #istt-cont .istt-vt__title { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--tx); } #istt-cont .istt-vt__title:hover { color: var(--p); } #istt-cont .istt-vt__people { display: flex; flex-direction: column; border-top: 1px dashed var(--br); } #istt-cont .istt-vt__people li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--br); font-size: 15px; } #istt-cont .istt-vt__people li:last-child { border-bottom: 0; padding-bottom: 0; } #istt-cont .istt-vt__name { font-weight: 600; } #istt-cont .istt-vt__code { color: var(--mu); font-size: 14px; } @media (max-width: 767px) { #istt-cont .istt-vt { padding: 14px; } #istt-cont .istt-vt__head { align-items: flex-start; } #istt-cont .istt-vt__people li { flex-direction: column; gap: 2px; } #istt-cont .istt-vt .istt-btn { width: 100%; } } #istt-cont .istt-vt__people li { align-items: center; } #istt-cont .istt-vt__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #istt-cont .istt-vt__acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } @media (max-width: 767px) { #istt-cont .istt-vt__people li { align-items: stretch; gap: 10px; } #istt-cont .istt-vt__acts { justify-content: stretch; } #istt-cont .istt-vt__acts .istt-btn { flex: 1; } } /* ===================================================== * 2.4.0 * ===================================================== */ #istt-cont .woocommerce-notices-wrapper:empty { display: none; } #istt-cont .istt-nav__short { display: none; } #istt-cont .istt-nav__arrow { display: none; } #istt-cont .istt-i--custom { display: inline-flex; width: 20px; height: 20px; } #istt-cont .istt-i--custom svg { width: 100%; height: 100%; } #istt-cont .istt-i--img { object-fit: contain; } #istt-cont .istt-card__sub { margin-top: 4px; font-size: 14px; color: var(--mu); } #istt-cont .istt-linkbtn { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--p); font: 600 14px/1.4 var(--font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } #istt-cont .istt-linkbtn:hover { color: var(--p-h); } #istt-cont .istt-form__msg { margin: 0; font-size: 14px; color: var(--p-h); } #istt-cont .istt-form__msg.is-error, #istt-cont .istt-form__err { margin: 0; font-size: 14px; color: var(--red); } #istt-cont .is-target { outline: 3px solid var(--p); outline-offset: 3px; } /* Buton patrat doar cu iconita (PDF, Wallet) */ #istt-cont .istt-iconbtn { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-s); border: 1px solid #b9d1cc; background: var(--card); color: var(--p); display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s; } #istt-cont .istt-iconbtn:hover { background: var(--p-t); border-color: var(--p); color: var(--p-h); } /* ---------- Biletele mele: carduri ---------- */ #istt-cont .istt-tk2s { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } #istt-cont .istt-tk2 { background: var(--card); border: 1px solid var(--br); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 24px; } #istt-cont .istt-tk2__head { background: var(--p); color: #fff; padding: 18px 20px; display: flex; gap: 14px; align-items: center; } #istt-cont .istt-tk2--wait .istt-tk2__head, #istt-cont .istt-tk2--past .istt-tk2__head { background: #8c8a82; } #istt-cont .istt-tk2__date { width: 56px; height: 60px; flex-shrink: 0; border-radius: 12px; background: rgba(255, 255, 255, .16); display: flex; flex-direction: column; align-items: center; justify-content: center; } #istt-cont .istt-tk2__date span:first-child { font-size: 22px; font-weight: 700; line-height: 1; } #istt-cont .istt-tk2__date span:last-child { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } #istt-cont .istt-tk2__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #istt-cont .istt-tk2__kind { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .88; } #istt-cont .istt-tk2__title { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; } #istt-cont .istt-tk2__title:hover { color: #fff; text-decoration: underline; } #istt-cont .istt-tk2__perf { position: relative; height: 0; margin: 0 18px; border-top: 2px dashed var(--br); } #istt-cont .istt-tk2__perf::before, #istt-cont .istt-tk2__perf::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--page, #fffdf2); } #istt-cont .istt-tk2__perf::before { left: -30px; } #istt-cont .istt-tk2__perf::after { right: -30px; } #istt-cont .istt-tk2__rows { margin: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } #istt-cont .istt-tk2__rows > div { display: flex; justify-content: space-between; gap: 12px; } #istt-cont .istt-tk2__rows dt { color: var(--mu); } #istt-cont .istt-tk2__rows dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; } #istt-cont .istt-tk2__foot { display: flex; gap: 8px; padding: 0 20px 20px; } #istt-cont .istt-tk2__foot .istt-tk2__qr { flex-grow: 1; min-height: 44px; } #istt-cont .istt-tk2__foot--stack { flex-direction: column; align-items: stretch; } #istt-cont .istt-tk2__foot--wait { flex-direction: column; align-items: stretch; gap: 10px; } #istt-cont .istt-tk2__foot--wait .istt-badge { align-self: flex-start; } /* ---------- Detalii comanda: fasia biletului ---------- */ #istt-cont .istt-tix { gap: 14px; } #istt-cont .istt-tix__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } #istt-cont .istt-tix__event { font-size: 14px; color: var(--mu); text-decoration: none; } #istt-cont .istt-tix__event:hover { color: var(--p); } #istt-cont .istt-stubs { display: flex; flex-direction: column; gap: 10px; } #istt-cont .istt-stub { display: flex; align-items: stretch; background: #f8f6ef; border: 1px solid var(--br); border-radius: 14px; scroll-margin-top: 24px; } #istt-cont .istt-stub__main { flex: 1; min-width: 0; padding: 16px 20px; display: flex; gap: 14px; align-items: center; } #istt-cont .istt-stub__ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--p-t); color: var(--p); display: grid; place-items: center; } #istt-cont .istt-stub__ic .istt-i { width: 22px; height: 22px; } #istt-cont .istt-stub__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #istt-cont .istt-stub__text strong { font-size: 16px; } #istt-cont .istt-stub__text span { font-size: 14px; color: var(--mu); } #istt-cont .istt-stub__acts { position: relative; flex-shrink: 0; border-left: 2px dashed var(--br); padding: 16px 20px; display: flex; align-items: center; gap: 8px; } #istt-cont .istt-stub__acts::before, #istt-cont .istt-stub__acts::after { content: ""; position: absolute; left: -12px; width: 22px; height: 11px; background: var(--card); border: 1px solid var(--br); } #istt-cont .istt-stub__acts::before { top: -1px; border-top: 0; border-radius: 0 0 11px 11px; } #istt-cont .istt-stub__acts::after { bottom: -1px; border-bottom: 0; border-radius: 11px 11px 0 0; } /* ---------- Ferestre (dialog) ---------- */ html.istt-modal-open { overflow: hidden; } #istt-cont .istt-modal { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); color: var(--tx); font-family: var(--font); } #istt-cont .istt-modal::backdrop { background: rgba(29, 29, 27, .55); } #istt-cont .istt-modal__box { width: 460px; max-width: 100%; box-sizing: border-box; background: #fff; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .18); } #istt-cont .istt-modal--sm .istt-modal__box { width: 420px; } /* Intrare: fade in up. La inchidere JS pune .is-closing si asteapta animatia. */ #istt-cont .istt-modal[open] .istt-modal__box { animation: istt-modal-in .26s cubic-bezier(.22, 1, .36, 1); } #istt-cont .istt-modal[open]::backdrop { animation: istt-fade-in .26s ease-out; } #istt-cont .istt-modal.is-closing .istt-modal__box { animation: istt-modal-out .18s ease-in forwards; } #istt-cont .istt-modal.is-closing::backdrop { animation: istt-fade-out .18s ease-in forwards; } @keyframes istt-modal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes istt-modal-out { to { opacity: 0; transform: translateY(16px); } } @keyframes istt-sheet-in { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } } @keyframes istt-sheet-out { to { opacity: 0; transform: translateY(56px); } } @keyframes istt-fade-in { from { opacity: 0; } } @keyframes istt-fade-out { to { opacity: 0; } } #istt-cont .istt-modal__grab { display: none; } #istt-cont .istt-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } #istt-cont .istt-modal__head .istt-meta { margin-top: 6px; } #istt-cont .istt-modal__title { font-size: 19px; line-height: 1.3; font-weight: 700; } #istt-cont .istt-modal__x { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--br); background: #fff; color: var(--tx); display: grid; place-items: center; cursor: pointer; padding: 0; } #istt-cont .istt-modal__x:hover { background: var(--sec); } #istt-cont .istt-modal__acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* Pereche PDF + Apple Wallet (cardul de bilet si fereastra QR). Un singur element = latime completa. */ #istt-cont .istt-pair { display: flex; gap: 8px; } #istt-cont .istt-pair > * { flex: 1 1 0; min-width: 0; min-height: 44px; } #istt-cont .istt-pair > [hidden] { display: none; } #istt-cont .istt-modal .istt-pair > * { min-height: 48px; } #istt-cont .istt-pdf .istt-i { width: 18px; height: 18px; } #istt-cont .istt-wallet { display: flex; align-items: center; justify-content: center; border-radius: var(--r-s); background: #000; color: #fff; text-decoration: none; overflow: hidden; transition: opacity .15s; } #istt-cont .istt-wallet:hover { opacity: .86; } #istt-cont .istt-wallet:not(.istt-wallet--text) { background: none; border-radius: 0; } #istt-cont .istt-wallet img { display: block; height: 44px; width: auto; max-width: 100%; object-fit: contain; } #istt-cont .istt-modal .istt-wallet img { height: 48px; } #istt-cont .istt-wallet--text { gap: 8px; padding: 0 12px; font-size: 14px; font-weight: 600; white-space: nowrap; } #istt-cont .istt-wallet--text .istt-i { width: 18px; height: 18px; flex-shrink: 0; } #istt-cont .istt-wallet:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; } #istt-cont .istt-qr { background: var(--sec); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; } #istt-cont .istt-qr__who { font-size: 15px; text-align: center; } #istt-cont .istt-qr__img { width: 260px; height: 260px; max-width: 100%; border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 10px; box-sizing: border-box; font-size: 14px; color: var(--mu); text-align: center; } #istt-cont .istt-qr__img img { width: 100%; height: 100%; image-rendering: pixelated; } #istt-cont .istt-qr__img[aria-busy="true"] { background: linear-gradient(90deg, #f3f1ea 25%, #fbfaf6 50%, #f3f1ea 75%); background-size: 200% 100%; animation: istt-shimmer 1.2s infinite linear; } @keyframes istt-shimmer { to { background-position: -200% 0; } } #istt-cont .istt-qr__code { font-size: 15px; letter-spacing: .08em; color: var(--mu); } #istt-cont .istt-qr__hint { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; color: var(--mu); } #istt-cont .istt-qr__hint .istt-i { width: 18px; height: 18px; } /* Codul de 6 cifre */ #istt-cont .istt-code__label { margin-bottom: -8px; } #istt-cont .istt-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } #istt-cont .istt-code__box { width: 100%; height: 56px; padding: 0; text-align: center; font: 700 24px/1 var(--font); border: 1px solid var(--in); border-radius: var(--r-s); background: #fff; color: var(--tx); } #istt-cont .istt-code__box:focus { border-color: var(--p); outline: 2px solid var(--p-t); } /* ---------- Notificari (toast) ---------- */ #istt-cont .istt-toasts { position: fixed; top: 24px; right: 24px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; width: 400px; max-width: calc(100vw - 32px); pointer-events: none; } #istt-cont .istt-toast { position: relative; pointer-events: auto; overflow: hidden; background: #fff; border: 1px solid #cfe1dd; border-left-width: 1px; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); padding: 16px 52px 16px 18px; font-size: 15px; animation: istt-toast-in .25s ease-out; } #istt-cont .istt-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; } #istt-cont .istt-toast__body > * { margin: 0; padding: 0; border: 0; background: none; list-style: none; } #istt-cont .istt-toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--p); transform-origin: left; } #istt-cont .istt-toast.is-running .istt-toast__bar { animation: istt-bar var(--istt-t, 6000ms) linear forwards; } #istt-cont .istt-toast.is-paused .istt-toast__bar { animation-play-state: paused; } @keyframes istt-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes istt-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } #istt-cont .istt-toast__x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--mu); display: grid; place-items: center; cursor: pointer; padding: 0; } #istt-cont .istt-toast__x:hover { background: var(--sec); color: var(--tx); } #istt-cont .woocommerce-error { position: relative; padding-right: 52px; } #istt-cont .woocommerce-error .istt-toast__x { position: absolute; top: 8px; right: 8px; } /* ---------- Adresa: lista eticheta / valoare ---------- */ #istt-cont .istt-addr { gap: 12px; } #istt-cont .istt-addr .istt-card__head { align-items: center; } #istt-cont .istt-rowlist { margin: 8px 0 0; border: 1px solid var(--br); border-radius: 12px; overflow: hidden; } #istt-cont .istt-rowlist > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 14px 18px; border-top: 1px solid var(--br); font-size: 15px; } #istt-cont .istt-rowlist > div:first-child { border-top: 0; } #istt-cont .istt-rowlist dt { color: var(--mu); } #istt-cont .istt-rowlist dd { font-weight: 600; overflow-wrap: anywhere; } /* Select-urile native: sageata si padding identice */ #istt-cont .istt-acc__main > form select, #istt-cont select.istt-input { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%235c5b55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 13l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px; } /* ---------- Sectiuni (cursuri) ---------- */ #istt-cont .istt-section { display: flex; flex-direction: column; gap: 20px; } #istt-cont .istt-section + .istt-section { margin-top: 16px; padding-top: 32px; border-top: 1px solid var(--br); } #istt-cont .istt-section__title { font-size: 22px; font-weight: 700; } #istt-cont .istt-co--expired .istt-co__img img { filter: grayscale(1); opacity: .7; } /* ---------- Tableta si mobil: meniul ca banda orizontala ---------- */ @media (max-width: 1024px) { #istt-cont .istt-nav__band { position: relative; margin: 0 -24px; background: var(--sec); border-top: 1px solid var(--br); border-bottom: 1px solid var(--br); } #istt-cont .istt-nav__list { flex-direction: row; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 10px 24px; scroll-padding: 0 48px; } #istt-cont .istt-nav__list::-webkit-scrollbar { display: none; } #istt-cont .istt-nav__list > li { scroll-snap-align: start; flex-shrink: 0; } #istt-cont .istt-nav__out { margin: 0; padding: 0; border: 0; } #istt-cont .istt-nav__link { position: relative; flex-direction: column; justify-content: center; gap: 5px; min-width: 76px; min-height: 60px; padding: 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--br); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; } #istt-cont .istt-nav__link .istt-i { width: 20px; height: 20px; } #istt-cont .istt-nav__link.is-active { background: var(--p); border-color: var(--p); color: #fff; } #istt-cont .istt-nav__link.is-active .istt-i { color: #fff; } #istt-cont .istt-nav__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #istt-cont .istt-nav__short { display: block; } #istt-cont .istt-nav__arrow { position: absolute; top: 0; bottom: 0; z-index: 2; width: 48px; border: 0; padding: 0; display: flex; align-items: center; cursor: pointer; } #istt-cont .istt-nav__arrow[hidden] { display: none; } #istt-cont .istt-nav__arrow--prev { left: 0; justify-content: flex-start; padding-left: 6px; background: linear-gradient(90deg, var(--sec) 40%, rgba(239, 236, 227, 0)); } #istt-cont .istt-nav__arrow--next { right: 0; justify-content: flex-end; padding-right: 6px; background: linear-gradient(270deg, var(--sec) 40%, rgba(239, 236, 227, 0)); } #istt-cont .istt-nav__arrow > span { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); display: grid; place-items: center; color: var(--tx); } #istt-cont .istt-nav__arrow .istt-i { width: 16px; height: 16px; } #istt-cont .istt-tk2s { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { #istt-cont .istt-nav__band { margin: 0 -16px; } #istt-cont .istt-nav__list { padding: 10px 16px; } #istt-cont .istt-stub { flex-direction: column; } #istt-cont .istt-stub__acts { border-left: 0; border-top: 2px dashed var(--br); padding: 14px 16px; } #istt-cont .istt-stub__acts::before, #istt-cont .istt-stub__acts::after { display: none; } #istt-cont .istt-stub__acts .istt-tk2__qr { flex: 1; min-height: 44px; } #istt-cont .istt-stub__main { padding: 14px 16px; } #istt-cont .istt-rowlist > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } #istt-cont .istt-code { gap: 6px; } #istt-cont .istt-code__box { height: 52px; font-size: 22px; } #istt-cont .istt-modal__acts .istt-btn { flex: 1; } /* QR pe mobil: fereastra urca de jos */ #istt-cont .istt-modal--qr { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 92dvh; } #istt-cont .istt-modal--qr .istt-modal__box { width: 100vw; border-radius: 24px 24px 0 0; padding: 12px 22px calc(24px + env(safe-area-inset-bottom)); max-height: 92dvh; overflow-y: auto; } #istt-cont .istt-modal--qr[open] .istt-modal__box { animation: istt-sheet-in .34s cubic-bezier(.22, 1, .36, 1); } #istt-cont .istt-modal--qr.is-closing .istt-modal__box { animation: istt-sheet-out .22s ease-in forwards; } #istt-cont .istt-modal--qr .istt-modal__grab { display: block; width: 44px; height: 5px; border-radius: 999px; background: var(--br); margin: 0 auto 4px; } #istt-cont .istt-qr__img { width: 250px; height: 250px; } #istt-cont .istt-toasts { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } } @media (prefers-reduced-motion: reduce) { #istt-cont .istt-toast, #istt-cont .istt-qr__img[aria-busy="true"] { animation: none; } #istt-cont .istt-toast.is-running .istt-toast__bar { animation: none; } #istt-cont .istt-modal[open] .istt-modal__box, #istt-cont .istt-modal[open]::backdrop, #istt-cont .istt-modal.is-closing .istt-modal__box, #istt-cont .istt-modal.is-closing::backdrop { animation: none; } }