/* ExpoFolio account pages. Colours and fonts come from the theme. */

.ef-account
{
   --ef-accent: var(--the7-accent-color, var(--e-global-color-accent, #333));
}

/*
 * Main buttons, in the same style as the search button of the overview. Extra
 * classes: themes give buttons their own height, borders and colours.
 */
.ef-account.ef-account .ef-account__actions button,
.ef-account.ef-account .ef-news-panel__buttons button,
.ef-account.ef-account .ef-news-panel__new,
.ef-account.ef-account .ef-panel__button
{
   background: var(--ef-accent);
   border: 0;
   border-radius: var(--ef-radius, 8px);
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
   display: inline-block;
   font: inherit;
   height: auto;
   line-height: 1.2;
   margin: 0;
   min-height: 40px;
   padding: 10px 20px;
   text-decoration: none;
}

.ef-account.ef-account .ef-account__actions button:hover,
.ef-account.ef-account .ef-account__actions button:focus-visible,
.ef-account.ef-account .ef-news-panel__buttons button:hover,
.ef-account.ef-account .ef-news-panel__buttons button:focus-visible,
.ef-account.ef-account .ef-news-panel__new:hover,
.ef-account.ef-account .ef-news-panel__new:focus-visible,
.ef-account.ef-account .ef-panel__button:hover,
.ef-account.ef-account .ef-panel__button:focus-visible
{
   opacity: 0.85;
}

/* A button stays recognisable while it has to wait for an upload. */
.ef-account.ef-account button:disabled
{
   cursor: wait;
   opacity: 0.5;
}

/* The second choice next to a main button: an outline in the same colour. */
.ef-account.ef-account .ef-news-panel__buttons button + button
{
   background: transparent;
   box-shadow: inset 0 0 0 1px var(--ef-accent);
   color: var(--ef-accent);
}

/* Small buttons in the forms: neutral, because they are not the main action. */
.ef-account.ef-account .ef-drop__remove,
.ef-account.ef-account [data-ef-gallery-remove],
.ef-account.ef-account .ef-editor__bar button,
.ef-account.ef-account .ef-tabs__tab
{
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: var(--ef-radius, 8px);
   color: inherit;
   cursor: pointer;
   font: inherit;
   font-size: 0.9em;
   height: auto;
   line-height: 1.2;
   margin: 0;
   min-height: 0;
   padding: 6px 12px;
}

.ef-account.ef-account .ef-drop__remove:hover,
.ef-account.ef-account [data-ef-gallery-remove]:hover,
.ef-account.ef-account .ef-editor__bar button:hover,
.ef-account.ef-account .ef-tabs__tab:hover
{
   background: rgba(0, 0, 0, 0.05);
}

.ef-account.ef-account .ef-tabs__tab[aria-selected="true"]
{
   background: var(--ef-accent);
   border-color: var(--ef-accent);
   color: #fff;
   font-weight: 600;
   text-decoration: none;
}

/* How far a short text is: a bar with a colour and a word. */
.ef-count
{
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   font-size: 0.85em;
   gap: 4px 10px;
   margin-top: 6px;
}

.ef-count__bar
{
   background: rgba(0, 0, 0, 0.1);
   border-radius: 3px;
   flex: 1 1 120px;
   height: 6px;
   max-width: 220px;
   overflow: hidden;
}

.ef-count__fill
{
   background: #b4b4b4;
   display: block;
   height: 100%;
}

.ef-count--short .ef-count__fill
{
   background: #d98b00;
}

.ef-count--good .ef-count__fill
{
   background: #2e8540;
}

/*
 * Always the full width up to the maximum. Without width: 100%, a flex parent
 * of the theme or Elementor shrinks the box to its content, so the panel
 * became wider or narrower depending on the length of the texts per language.
 */
.ef-account
{
   box-sizing: border-box;
   margin: 0 auto;
   max-width: 480px;
   width: 100%;
}

.ef-account__form h2
{
   margin-top: 0;
}

.ef-account__field label
{
   display: block;
   font-weight: 600;
   margin-bottom: 4px;
}

.ef-account__field input
{
   box-sizing: border-box;
   max-width: 100%;
   width: 100%;
}

.ef-account__actions
{
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

.ef-account__message
{
   border-left: 4px solid currentColor;
   padding: 10px 14px;
}

.ef-account__message--error
{
   background: #fcf0f1;
   color: #8a2424;
}

.ef-account__message--success
{
   background: #edfaef;
   color: #005c12;
}

/*
 * Panel. Wider than the login forms, with neutral lines that suit any theme.
 * One distance between all sections, so the form reads as one calm column.
 */

.ef-account:has(.ef-panel)
{
   --ef-section-gap: 56px;
   max-width: 960px;
}

/* The button to the public profile, on the right above the tabs. */
.ef-panel__view.ef-panel__view
{
   display: flex;
   justify-content: flex-end;
   margin: 0 0 16px;
}

.ef-panel__top
{
   margin-bottom: 40px;
}

.ef-panel__meter
{
   background: rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   height: 8px;
   margin-bottom: 8px;
   overflow: hidden;
}

.ef-panel__meter span
{
   background: #2e7d32;
   display: block;
   height: 100%;
}

.ef-panel__section
{
   margin-top: var(--ef-section-gap, 56px);
}

.ef-panel__section h2
{
   margin-top: 0;
}

/* The first section follows the meter directly. */
.ef-panel__form > .ef-panel__section:first-of-type
{
   margin-top: 0;
}

.ef-panel__company .ef-panel__note
{
   margin-bottom: 20px;
}

.ef-panel__note,
.ef-account__field small
{
   display: block;
   font-size: 0.9em;
   opacity: 0.8;
}

.ef-panel__grid,
.ef-panel__images
{
   display: grid;
   gap: 0 24px;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ef-panel select,
.ef-panel textarea
{
   box-sizing: border-box;
   max-width: 100%;
   width: 100%;
}

.ef-drop
{
   border: 2px dashed rgba(0, 0, 0, 0.25);
   border-radius: 6px;
   margin-top: 6px;
   padding: 16px;
   position: relative;
   text-align: center;
}

.ef-drop.is-over
{
   background: rgba(0, 0, 0, 0.05);
   border-color: rgba(0, 0, 0, 0.5);
}

.ef-drop img
{
   display: block;
   margin: 0 auto 8px;
   max-height: 140px;
   max-width: 100%;
}

.ef-drop__label
{
   cursor: pointer;
   display: block;
}

.ef-account.ef-account .ef-drop__remove
{
   margin-top: 25px;
}

.ef-drop__label input
{
   height: 1px;
   opacity: 0;
   position: absolute;
   width: 1px;
}

.ef-drop__label:focus-within span
{
   text-decoration: underline;
}

.ef-drop__status
{
   font-size: 0.9em;
   min-height: 1.4em;
}

.ef-tabs
{
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin: 12px 0 0;
}

/* One distance between the fields of a language and the tabs above them. */
.ef-tabs__panel > .ef-account__field
{
   margin: 24px 0 0;
}


.ef-editor
{
   margin-top: 8px;
}

.ef-editor__bar
{
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-bottom: 4px;
}

.ef-editor__bar[hidden],
.ef-editor__area[hidden]
{
   display: none;
}

.ef-editor__area
{
   border: 1px solid rgba(0, 0, 0, 0.25);
   border-radius: 4px;
   min-height: 220px;
   overflow-wrap: anywhere;
   padding: 12px;
}

.ef-gallery
{
   display: grid;
   gap: 12px;
   grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
   margin: 12px 0;
}

.ef-gallery:empty
{
   display: none;
}

.ef-gallery__item
{
   cursor: move;
   text-align: center;
}

.ef-gallery__item img
{
   aspect-ratio: 1;
   display: block;
   object-fit: cover;
   width: 100%;
}

/* Some room between the photo and its button. */
.ef-account.ef-account .ef-gallery__item [data-ef-gallery-remove]
{
   margin-top: 10px;
}

/* The only line in the form: it separates the content from confirming and saving. */
.ef-panel__section.ef-panel__consent
{
   border-top: 1px solid rgba(0, 0, 0, 0.15);
   margin-top: calc(var(--ef-section-gap, 56px) + 40px);
   padding-top: 24px;
}

.ef-panel__consent label
{
   display: block;
}

.ef-panel__form > .ef-account__actions
{
   margin: 25px 0 0;
}

.ef-panel__password
{
   border-top: 1px solid rgba(0, 0, 0, 0.15);
   margin-top: 40px;
   padding-top: 16px;
}

.ef-panel__password summary
{
   cursor: pointer;
   font-weight: 600;
}

/* The tabs of the panel. */
.ef-panel__nav
{
   align-items: center;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   display: flex;
   flex-wrap: wrap;
   gap: 4px 24px;
   margin-bottom: 24px;
}

.ef-panel__nav a
{
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   padding: 8px 0;
   text-decoration: none;
}

.ef-panel__nav a[aria-current="page"]
{
   border-bottom-color: currentColor;
   font-weight: 600;
}

.ef-panel__nav .ef-panel__logout
{
   margin-left: auto;
}

/* News in the panel. */
.ef-news-panel__top
{
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 12px 24px;
   justify-content: space-between;
   margin-bottom: 24px;
}

.ef-news-panel__top p
{
   flex: 1 1 280px;
   margin: 0;
}

.ef-news-panel__item
{
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   display: flex;
   gap: 16px;
   padding: 16px 0;
}

.ef-news-panel__image
{
   aspect-ratio: 16 / 9;
   background: rgba(0, 0, 0, 0.05);
   border-radius: 4px;
   flex: 0 0 128px;
   overflow: hidden;
}

.ef-news-panel__image img
{
   display: block;
   height: 100%;
   object-fit: cover;
   width: 100%;
}

.ef-news-panel__body
{
   flex: 1;
   min-width: 0;
}

.ef-news-panel__body h3
{
   margin: 0 0 4px;
   overflow-wrap: anywhere;
}

.ef-news-panel__body p
{
   margin: 0 0 8px;
}

.ef-news-panel__status
{
   background: rgba(0, 0, 0, 0.08);
   border-radius: 4px;
   margin-right: 8px;
   padding: 2px 8px;
}

.ef-news-panel__status--published
{
   background: #dff3e4;
   color: #17603a;
}

.ef-news-panel__status--pending
{
   background: #fdf1d3;
   color: #7a5200;
}

.ef-news-panel__status--refused
{
   background: #fbe3e4;
   color: #8a1f24;
}

.ef-news-panel__reason
{
   background: #fbe3e4;
   border-radius: 4px;
   color: #8a1f24;
   padding: 8px 12px;
   white-space: pre-line;
}

.ef-news-panel__actions
{
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 4px 16px;
}

.ef-news-panel__actions form
{
   margin: 0;
}

/* A delete button looks like the links next to it, a bit lighter. */
.ef-panel .ef-news-panel__actions button
{
   background: none;
   border: 0;
   color: inherit;
   cursor: pointer;
   font: inherit;
   height: auto;
   line-height: inherit;
   margin: 0;
   min-height: 0;
   opacity: 0.6;
   padding: 0;
   text-decoration: none;
}

.ef-panel .ef-news-panel__actions button:hover,
.ef-panel .ef-news-panel__actions button:focus-visible
{
   opacity: 1;
}

.ef-news-panel__back
{
   margin: 0 0 24px;
}

.ef-news-panel__excerpt textarea
{
   width: 100%;
}

.ef-news-panel__upload .ef-drop img
{
   aspect-ratio: 16 / 9;
   object-fit: cover;
   width: 100%;
}

.ef-news-panel__upload .ef-drop img[hidden]
{
   display: none;
}

.ef-news-panel__library
{
   border: 0;
   display: grid;
   gap: 12px;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   margin: 16px 0 0;
   padding: 0;
}

.ef-news-panel__library legend
{
   font-weight: 600;
   margin-bottom: 8px;
   padding: 0;
}

.ef-news-panel__choice
{
   align-items: center;
   border: 2px solid rgba(0, 0, 0, 0.12);
   border-radius: 4px;
   cursor: pointer;
   display: flex;
   gap: 8px;
   padding: 6px;
   position: relative;
}

.ef-news-panel__choice:has(input:checked)
{
   border-color: currentColor;
}

.ef-news-panel__choice input
{
   background: #fff;
   left: 10px;
   margin: 0;
   position: absolute;
   top: 10px;
}

.ef-news-panel__choice--none input
{
   position: static;
}

.ef-news-panel__choice img
{
   aspect-ratio: 16 / 9;
   display: block;
   object-fit: cover;
   width: 100%;
}

.ef-news-panel__buttons
{
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}