/* ============================================================
   WP Contest Jury - Frontend styles
   Mobile-first, responsive
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root {
    --wpcj-primary:      #1a73e8;
    --wpcj-success:      #1e8a3c;
    --wpcj-danger:       #b32d2e;
    --wpcj-star:         #f5a623;
    --wpcj-star-off:     #d0d3d8;
    --wpcj-border:       #e0e0e0;
    --wpcj-bg:           #f8f9fa;
    --wpcj-card-bg:      #ffffff;
    --wpcj-text:         #1d2327;
    --wpcj-muted:        #646970;
    --wpcj-radius:       8px;
    --wpcj-shadow:       0 1px 4px rgba(0,0,0,.10);
    --wpcj-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --wpcj-font-ui:      'Bricolage Grotesque', system-ui, sans-serif;
}

.wpcj-panel { max-width: 1200px; margin: 0 auto; padding: 16px; font-family: var(--wpcj-font-ui); color: var(--wpcj-text); width: 100%; box-sizing: border-box; }
.wpcj-panel h1,
.wpcj-panel h2,
.wpcj-panel h3,
.wpcj-panel h4,
.wpcj-panel p,
.wpcj-panel span,
.wpcj-panel a,
.wpcj-panel label,
.wpcj-panel input,
.wpcj-panel button,
.wpcj-panel select,
.wpcj-panel textarea { font-family: var(--wpcj-font-ui); }

/* ── Buttons ──────────────────────────────────────────────── */
.wpcj-btn { display: inline-block; padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; text-align: center; transition: opacity .15s; }
.wpcj-btn--primary   { background: var(--wpcj-primary); color: #fff; }
.wpcj-btn--secondary { background: #fff; color: var(--wpcj-primary); border: 1px solid var(--wpcj-primary); }
.wpcj-btn--submit    { background: var(--wpcj-success); color: #fff; padding: 10px 24px; }
.wpcj-btn--disabled,
.wpcj-btn:disabled   { opacity: .45; cursor: not-allowed; }
.wpcj-btn:hover:not(:disabled) { opacity: .88; }

/* ── Login ─────────────────────────────────────────────────── */
.wpcj-login-wrap  { display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; min-height: 100vh; padding: 48px 16px; gap: 36px; box-sizing: border-box; }
.wpcj-login-hero  { text-align: center; max-width: 600px; width: 100%; }
.wpcj-login-hero__title    { font-family: var(--wpcj-font-display); font-size: clamp(36px, 6vw, 68px); font-weight: 200; font-style: normal; color: var(--wpcj-text); line-height: 1.08; margin: 0 0 16px; letter-spacing: -.02em; }
.wpcj-login-hero__subtitle { font-family: var(--wpcj-font-ui); font-size: 11px; color: var(--wpcj-muted); margin: 0; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.wpcj-login-card  { background: var(--wpcj-card-bg); border: 1px solid var(--wpcj-border); border-radius: 2px; padding: 40px; width: 100%; max-width: 360px; box-shadow: none; }
.wpcj-login-card .login-username,
.wpcj-login-card .login-password,
.wpcj-login-card .login-remember  { margin-bottom: 20px; }
.wpcj-login-card label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px; font-family: var(--wpcj-font-ui); color: var(--wpcj-muted); }
.wpcj-login-card input[type="text"],
.wpcj-login-card input[type="password"] { width: 100%; padding: 10px 0; border: none; border-bottom: 1px solid var(--wpcj-border); border-radius: 0; font-size: 15px; font-family: var(--wpcj-font-ui); font-weight: 300; box-sizing: border-box; background: transparent; outline: none; }
.wpcj-login-card input[type="text"]:focus,
.wpcj-login-card input[type="password"]:focus { border-bottom-color: var(--wpcj-text); }
.wpcj-login-card input[type="submit"] { width: 100%; padding: 14px; background: var(--wpcj-text); color: #fff; border: none; border-radius: 2px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-family: var(--wpcj-font-ui); cursor: pointer; transition: opacity .15s; margin-top: 8px; }
.wpcj-login-card input[type="submit"]:hover { opacity: .8; }

/* ── Selection screen ─────────────────────────────────────── */
.wpcj-welcome-message { background: #e8f0fe; border-left: 4px solid var(--wpcj-primary); padding: 14px 18px; border-radius: 0 6px 6px 0; margin-bottom: 24px; font-size: 15px; line-height: 1.6; }
.wpcj-section-title   { font-size: 20px; margin: 0 0 16px; }
.wpcj-round-cards     { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.wpcj-round-card      { background: var(--wpcj-card-bg); border: 1px solid var(--wpcj-border); border-radius: var(--wpcj-radius); padding: 20px; box-shadow: var(--wpcj-shadow); display: flex; flex-direction: column; gap: 10px; }
.wpcj-round-card__header { display: flex; justify-content: space-between; align-items: center; }
.wpcj-round-card__gallery { font-size: 12px; color: var(--wpcj-muted); text-transform: uppercase; letter-spacing: .04em; }
.wpcj-round-card__name { margin: 0; font-size: 17px; }
.wpcj-round-card__progress { display: flex; flex-direction: column; gap: 4px; }
.wpcj-round-state { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.wpcj-state--new       { background: #f0f0f1; color: var(--wpcj-muted); }
.wpcj-state--progress  { background: #fff3cd; color: #856404; }
.wpcj-state--submitted { background: #d5f0de; color: var(--wpcj-success); }
.wpcj-logout-link { margin-top: 32px; font-size: 13px; color: var(--wpcj-muted); }
.wpcj-logout-link a { color: var(--wpcj-muted); }

/* ── Progress bar ─────────────────────────────────────────── */
.wpcj-progress-bar  { background: var(--wpcj-border); border-radius: 99px; height: 6px; overflow: hidden; }
.wpcj-progress-bar__fill { background: var(--wpcj-success); height: 100%; border-radius: 99px; transition: width .3s ease; }
.wpcj-progress-label { font-size: 12px; color: var(--wpcj-muted); }

/* ── Voting header ────────────────────────────────────────── */
.wpcj-voting-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.wpcj-voting-header__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wpcj-back-link { font-size: 13px; color: var(--wpcj-primary); text-decoration: none; white-space: nowrap; }
.wpcj-back-link:hover { text-decoration: underline; }
.wpcj-round-name { font-size: 15px; font-weight: 600; }
.wpcj-readonly-badge { font-size: 12px; background: #f0f0f1; color: var(--wpcj-muted); padding: 4px 10px; border-radius: 20px; font-weight: 600; }
.wpcj-progress-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wpcj-progress-wrap .wpcj-progress-bar { flex: 1; }

/* ── Filter tabs ──────────────────────────────────────────── */
.wpcj-filter-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.wpcj-filter-tab  { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--wpcj-border); font-size: 13px; text-decoration: none; color: var(--wpcj-text); background: #fff; transition: background .15s, color .15s; }
.wpcj-filter-tab.active,
.wpcj-filter-tab:hover  { background: var(--wpcj-primary); color: #fff; border-color: var(--wpcj-primary); }

/* ── Entry grid ───────────────────────────────────────────── */
.wpcj-entries-front { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 600px)  { .wpcj-entries-front { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .wpcj-entries-front { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .wpcj-entries-front { grid-template-columns: repeat(5, 1fr); } }

.wpcj-entry-front { background: var(--wpcj-card-bg); border: 2px solid var(--wpcj-border); border-radius: var(--wpcj-radius); overflow: hidden; box-shadow: var(--wpcj-shadow); transition: border-color .2s; display: flex; flex-direction: column; }
.wpcj-entry-front.is-voted   { border-color: var(--wpcj-success); }
.wpcj-entry-front.is-unvoted { border-color: var(--wpcj-border); }

.wpcj-entry-front__thumb-link { position: relative; display: block; }
.wpcj-entry-front__thumb-link img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.wpcj-voted-badge { position: absolute; top: 6px; right: 6px; background: var(--wpcj-success); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.wpcj-score-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 10px; line-height: 1.4; pointer-events: none; }
.wpcj-score-badge--hidden { display: none; }

.wpcj-entry-front__meta { padding: 6px 8px 0; display: flex; flex-direction: column; gap: 2px; }
.wpcj-entry-front__id     { font-size: 11px; color: var(--wpcj-muted); }
.wpcj-entry-front__title  { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpcj-entry-front__author { font-size: 11px; color: var(--wpcj-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wpcj-entry-front__vote { padding: 6px 8px 10px; margin-top: auto; }
.wpcj-vote-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.wpcj-stars-front { display: flex; gap: 2px; }
.wpcj-star-front  { background: none; border: none; font-size: 20px; color: var(--wpcj-star-off); cursor: pointer; padding: 2px; line-height: 1; transition: color .1s; }
.wpcj-star-front.active { color: var(--wpcj-star); }
.wpcj-star-front:not([disabled]):hover,
.wpcj-stars-front:hover .wpcj-star-front:not([disabled]) { color: var(--wpcj-star); }
.wpcj-stars-front:hover .wpcj-star-front:not([disabled]):hover ~ .wpcj-star-front { color: var(--wpcj-star-off); }
.wpcj-star-front[disabled] { cursor: default; }

/* Reset vote button */
.wpcj-reset-vote { background: none; border: 1px solid var(--wpcj-border); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--wpcj-muted); cursor: pointer; padding: 0; flex-shrink: 0; position: relative; transition: border-color .15s, color .15s; }
.wpcj-reset-vote:hover { border-color: var(--wpcj-danger); color: var(--wpcj-danger); }
.wpcj-reset-vote::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 11px; white-space: nowrap; padding: 3px 8px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.wpcj-reset-vote:hover::after { opacity: 1; }

.wpcj-hidden { display: none !important; }

.wpcj-notes-front { width: 100%; font-size: 11px; padding: 4px 6px; border: 1px solid var(--wpcj-border); border-radius: 4px; resize: none; box-sizing: border-box; margin-top: 2px; }
.wpcj-notes-readonly { font-size: 11px; color: var(--wpcj-muted); margin: 4px 0 0; font-style: italic; }
.wpcj-save-indicator { display: block; font-size: 10px; color: var(--wpcj-muted); min-height: 14px; }
.wpcj-save-indicator.saved { color: var(--wpcj-success); }

/* ── Pagination ───────────────────────────────────────────── */
.wpcj-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 24px; flex-wrap: wrap; }
.wpcj-page-btn  { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--wpcj-border); border-radius: 6px; font-size: 13px; text-decoration: none; color: var(--wpcj-text); background: #fff; transition: background .15s; }
.wpcj-page-btn.active,
.wpcj-page-btn:hover { background: var(--wpcj-primary); color: #fff; border-color: var(--wpcj-primary); }
.wpcj-page-ellipsis { padding: 0 4px; color: var(--wpcj-muted); }

/* ── Card fields ──────────────────────────────────────────── */
.wpcj-card-field         { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpcj-card-field--small  { font-size: 10px; color: var(--wpcj-muted); }
.wpcj-card-field--normal { font-size: 12px; color: var(--wpcj-text); font-weight: 400; }
.wpcj-card-field--large  { font-size: 14px; color: var(--wpcj-text); }
.wpcj-card-field--bold   { font-weight: 700; }
.wpcj-card-field__label  { font-weight: 600; }

/* ── Misc ─────────────────────────────────────────────────── */
.wpcj-empty         { color: var(--wpcj-muted); padding: 32px 0; text-align: center; }
.wpcj-access-denied { color: var(--wpcj-danger); }
.wpcj-error         { color: var(--wpcj-danger); }

/* ── Author filter ────────────────────────────────────────── */
.wpcj-author-filter-wrap { margin-bottom: 12px; }
.wpcj-author-filter__input { width: 100%; max-width: 320px; padding: 7px 12px; border: 1px solid var(--wpcj-border); border-radius: 20px; font-size: 13px; outline: none; transition: border-color .15s; box-sizing: border-box; }
.wpcj-author-filter__input:focus { border-color: var(--wpcj-primary); }

/* ── Detail modal ─────────────────────────────────────────── */
#wpcj-detail-modal,
#wpcj-detail-modal * { font-family: var(--wpcj-font-ui); }
.wpcj-body-lock { overflow: hidden; }
.wpcj-modal { display: none; position: fixed; inset: 0; z-index: 99999; }
.wpcj-modal.is-open { display: flex; }
.wpcj-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.88); cursor: pointer; }
.wpcj-modal__box { position: relative; z-index: 1; display: flex; width: 100%; height: 100%; overflow: hidden; }
.wpcj-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(0,0,0,.5); border: none; color: #fff; font-size: 24px; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s; }
.wpcj-modal__close:hover { background: rgba(0,0,0,.8); }
.wpcj-modal__image-side { position: relative; flex: 1; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; padding: 56px 24px 24px; min-width: 0; min-height: 0; }
.wpcj-modal__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; will-change: transform; user-select: none; -webkit-user-drag: none; }
.wpcj-modal__info-side { width: 320px; flex-shrink: 0; background: #fff; display: flex; flex-direction: column; overflow-y: auto; padding: 56px 22px 24px; gap: 4px; }
.wpcj-modal__entry-id { font-size: 11px; color: var(--wpcj-muted); }
.wpcj-modal__author { font-size: 15px; font-weight: 700; color: var(--wpcj-text); margin-bottom: 12px; }
.wpcj-modal__fields { flex: 1; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding-right: 2px; }
.wpcj-modal__field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wpcj-muted); margin-bottom: 3px; }
.wpcj-modal__field-value { font-size: 14px; color: var(--wpcj-text); line-height: 1.6; white-space: normal; word-break: break-word; }
.wpcj-modal__vote-display { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wpcj-border); font-size: 13px; font-weight: 600; color: var(--wpcj-muted); }
/* ── Modal carousel ───────────────────────────────────────── */
.wpcj-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(0,0,0,.45); border: none; color: #fff; font-size: 44px; width: 48px; height: 72px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; border-radius: 4px; line-height: 1; padding: 0; }
.wpcj-modal__nav:hover { background: rgba(0,0,0,.78); }
.wpcj-modal__prev { left: 8px; }
.wpcj-modal__next { right: 8px; }
.wpcj-modal__counter { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.5); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none; }
.wpcj-modal__caption { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); max-width: 80%; background: rgba(0,0,0,.62); color: #fff; font-size: 14px; font-weight: 600; padding: 5px 16px; border-radius: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

/* ── Modal main / grid / carousel layout ──────────────────── */
.wpcj-modal__main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; }

.wpcj-modal__grid-view { flex: 1; overflow-y: auto; padding: 56px 20px 20px; background: #111; }
.wpcj-modal__grid-photos { display: grid; gap: 16px; } /* columns set by JS */
.wpcj-modal__grid-item { display: flex; flex-direction: column; gap: 6px; }
.wpcj-modal__grid-thumb { position: relative; overflow: hidden; border-radius: 6px; height: clamp(200px, 38vh, 400px); cursor: pointer; }
.wpcj-modal__grid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.wpcj-modal__grid-thumb:hover img { opacity: .82; }
.wpcj-modal__grid-caption { font-size: 12px; color: #ddd; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }

.wpcj-modal__carousel-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

/* Back button (carousel → grid) */
.wpcj-modal__back { position: absolute; top: 14px; left: 14px; z-index: 4; background: rgba(0,0,0,.55); border: none; color: #fff; font-size: 13px; padding: 6px 14px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: background .15s; }
.wpcj-modal__back:hover { background: rgba(0,0,0,.82); }

/* Image wrap - clips the zoom transform */
.wpcj-modal__img-wrap { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* ── Grid stars ────────────────────────────────────────────── */
.wpcj-stars-modal-grid { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.wpcj-grid-save-indicator { display: block; font-size: 10px; color: #777; text-align: center; min-height: 12px; }
.wpcj-grid-save-indicator.saved { color: #5aab6c; }

/* ── Star button (shared: grid + carousel modal) ───────────── */
.wpcj-star-modal { background: none; border: none; font-size: 18px; color: var(--wpcj-star-off); cursor: pointer; padding: 1px; line-height: 1; transition: color .1s; }
.wpcj-star-modal.active { color: var(--wpcj-star); }
.wpcj-stars-modal-grid:hover .wpcj-star-modal:not([disabled]) { color: var(--wpcj-star); }
.wpcj-stars-modal-grid:hover .wpcj-star-modal:not([disabled]):hover ~ .wpcj-star-modal { color: var(--wpcj-star-off); }

/* ── Per-photo vote area (carousel info panel) ─────────────── */
.wpcj-modal__photo-vote { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wpcj-border); display: flex; flex-direction: column; gap: 6px; }
.wpcj-modal__photo-label { font-size: 12px; font-weight: 600; color: var(--wpcj-muted); }
.wpcj-stars-modal { display: flex; gap: 3px; }
.wpcj-stars-modal .wpcj-star-modal { font-size: 24px; }
.wpcj-stars-modal:hover .wpcj-star-modal:not([disabled]) { color: var(--wpcj-star); }
.wpcj-stars-modal:hover .wpcj-star-modal:not([disabled]):hover ~ .wpcj-star-modal { color: var(--wpcj-star-off); }
.wpcj-reset-photo-vote { align-self: flex-start; background: none; border: 1px solid var(--wpcj-border); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--wpcj-muted); cursor: pointer; padding: 0; transition: border-color .15s, color .15s; }
.wpcj-reset-photo-vote:hover { border-color: var(--wpcj-danger); color: var(--wpcj-danger); }
.wpcj-photo-save-indicator { font-size: 11px; color: var(--wpcj-muted); min-height: 14px; }
.wpcj-photo-save-indicator.saved { color: var(--wpcj-success); }

/* ── Per-photo card status ─────────────────────────────────── */
.wpcj-perphoto-status { padding: 4px 8px 8px; }
.wpcj-perphoto-count { font-size: 11px; color: var(--wpcj-muted); }

/* ── Criteria scoring grid ─────────────────────────────────── */
.wpcj-criteria-grid { display: flex; flex-direction: column; gap: 5px; padding: 5px 8px 8px; }

.wpcj-criterion-row-vote { display: flex; align-items: center; gap: 6px; }

.wpcj-criterion-label {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--wpcj-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.wpcj-criterion-label small { color: var(--wpcj-muted); font-size: 9px; font-weight: 400; }

.wpcj-criterion-input {
    width: 52px;
    flex-shrink: 0;
    padding: 3px 5px;
    border: 1px solid var(--wpcj-border);
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--wpcj-font-ui);
    text-align: center;
    outline: none;
    transition: border-color .15s;
    /* hide browser spinner arrows */
    -moz-appearance: textfield;
}
.wpcj-criterion-input::-webkit-outer-spin-button,
.wpcj-criterion-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wpcj-criterion-input:focus { border-color: var(--wpcj-primary); }
.wpcj-criterion-input:valid:not(:placeholder-shown) { border-color: var(--wpcj-success); background: #f6fbf7; }

.wpcj-criterion-score-ro { font-size: 12px; font-weight: 600; color: var(--wpcj-text); flex-shrink: 0; }

.wpcj-criteria-footer { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.wpcj-criteria-footer .wpcj-reset-vote {
    border-radius: 4px;
    width: auto;
    height: 20px;
    padding: 0 7px;
    font-size: 10px;
    border: 1px solid var(--wpcj-border);
}
.wpcj-criteria-footer .wpcj-reset-vote::after { content: none; }

@media (max-width: 680px) {
    .wpcj-modal__box { flex-direction: column; }
    .wpcj-modal__image-side { flex: none; height: 45vh; padding: 48px 12px 12px; }
    .wpcj-modal__info-side { width: 100%; flex: 1; padding: 16px; }
}