/* The card is the panel, not one option's value.

   Fusion lays every option out as a label column beside a value column, and sizes the value column to its
   content: the card came out at 180px of the sidebar's 350px empty, 278px with a module in it. The param
   declares no heading, so that label column is holding nothing. The row gives the card the whole width.

   This has to live here rather than in sr7-avada-live.css. Everything in that file dresses the canvas
   preview widget, which is a different document from the sidebar; this file is the one both builders
   load, which is also why the cap below is scoped by selector rather than by which file it sits in. */
.fusion-builder-option.info:has(.sr--avada--card) {
    display: block;
}
.fusion-builder-option.info:has(.sr--avada--card) .fusion-builder-option-container,
.fusion-builder-option.info:has(.sr--avada--card) .fusion-option-info {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    box-sizing: border-box;
}

.sr--avada--card {
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
}

/* The backend builder only, which is the one screen where the opposite is wanted: its dialog is nearly
   the width of the screen, and a card let loose there upscales a 388px thumbnail to fill the first
   screenful, pushing the details and the buttons below the fold. The live builder runs on the front end,
   so wp-admin is what separates the two. */
body.wp-admin .sr--avada--card {
    max-width: 388px;
}

/* Avada dresses the "info" option it draws us in as a notice: a blue exclamation badge before every
   <strong>, each one on a line of its own, and each one recoloured and enlarged. Ours are not notices,
   they are the card's own labels - the module's title, and the "Alias:" and "Type:" that read as one line
   with the value beside them - so all five of those are put back.

   Colour and size come from the card, which sets them on the row; weight is the browser's own for
   <strong>, which is what the same card gets in every other builder. !important is not decoration here:
   Avada's rule carries six classes, so nothing short of it wins. */
.sr--avada--card strong {
    display: inline !important;
    margin-bottom: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: bold !important;
}
.sr--avada--card strong::before {
    content: none !important;
}

/* the module card in the backend builder's element block (templates/sr7-preview.php) */
.sr--avada--module--preview--card .sr--module--info--thumb {
    width: 120px;
    height: 67.5px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Avada sizes its own element icons with font-size:1em and lets them sit on the text baseline
   (.fusion-module-icon). A fixed pixel box towers over the label wherever the surrounding text is
   smaller - the element list, the navigator tree, the block outline - so match how they scale. */
.sr7--avada--icon::before {
    background: url(../images/sr7-logo.svg) no-repeat center center;
    background-size: contain;
    content: ' ';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.fusion-builder-enabled sr-popups,
.fusion-builder-enabled sr-pleasewait {
    width: 100% !important;
    margin-left: 0 !important;
}
.fusion-builder-live .sr--basic--library sr-modal-header {
    height: 60px;
}
.fusion-builder-live sr-sp[h="10"] {
    height: 10px;
}
/* inline-flex, not flex: the library lays these out inline-block and there are two of them on a template,
   Preview and Details. A block-level box gives each one a line of its own. The centring is what this rule
   is for, and inline-flex centres just the same. */
.fusion-builder-live lib-i-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fusion-builder-live sr-input .sr--input--icon--left svg {
    margin-top: 6px;
}
/* The settings dialog's close icon, in the live builder only.

   Something on the front end states a height for this button - 30px, against the 40px it gets on an admin
   screen - and with border-box the 20px line box has nowhere to go, so the icon rides the top. The admin
   builder is a wp-admin screen and has none of this, which is why the shared stylesheet must not carry
   the correction: it would push the icon down where nothing had moved it. A nudge, not a derivation. */
.fusion-builder-live sr-modal#block_settings sr-modal-close {
    padding-top: 15px;
}

.fusion-builder-live .sr--basic--library .sr--library--right sr-modal-close {
    top: 11px;
}
