/* ==========================================================================
   WizBrand — the post composer.

   There are three of these in the project and they all do the same job:

     resources/views/pages/profile.blade.php      #websiteDetailModal  (create)
     resources/views/pages/profile.blade.php      #postForm's modal    (edit)
     resources/views/pages/profilepost.blade.php  #sb-post-modal       (the
                                                  influencer dashboard's)

   Each grew its own ids, its own styles and its own buttons, so the same
   action looked like three different products depending on where you pressed
   it. This file is the one look; the three keep their own ids, because their
   submit handlers are wired to them and rewiring working JS to tidy a
   stylesheet is a bad trade.

   Everything is scoped under .wzc so nothing here can reach a modal that is
   not a composer.
   ========================================================================== */

.wzc {
    --wzc-ink: #0f1b34;
    --wzc-ink-2: #41506b;
    --wzc-muted: #5c6e8b;
    --wzc-line: #e3eaf5;
    --wzc-brand: #1d4ed8;
    --wzc-tint: #eaf1ff;
    --wzc-good: #1b7f45;
    --wzc-warn: #9a5b00;
    --wzc-danger: #b91c1c;

    border: 1px solid var(--wzc-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(9, 18, 40, .14) !important;
    overflow: hidden;
    font-size: 15px;
}

/* ---- header ------------------------------------------------------------
   Was an 84px band of solid blue carrying two words. That space belongs to
   the thing being written. */
.wzc .modal-header,
.wzc .sb-modal-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--wzc-line) !important;
    background: #fff !important;
    color: var(--wzc-ink) !important;
}

.wzc .modal-header h3,
.wzc .modal-titles,
.wzc .sb-modal-header h3 {
    margin: 0 !important;
    color: var(--wzc-ink) !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
}

.wzc .btn-close,
.wzc .sb-close {
    width: 32px;
    height: 32px;
    margin: 0 0 0 auto !important;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #eef2f9;
    color: var(--wzc-ink);
    opacity: 1;
    font-size: 16px;
    line-height: 1;
}

.wzc .btn-close:hover,
.wzc .sb-close:hover {
    background: #e2e8f4;
}

/* ---- who is posting ---- */
.wzc .website-user-info,
.wzc .user-info,
.wzc .sb-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 0 !important;
    border: 0 !important;
    background: none !important;
}

.wzc .website-user-avatar img,
.wzc .user-avatar img,
.wzc .sb-user-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.wzc .website-user-name,
.wzc .composer-name,
.wzc .sb-user-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--wzc-ink);
}

/* ---- body ---- */
.wzc .modal-body,
.wzc .sb-modal-body {
    padding: 12px 18px 16px !important;
}

/* The headline: an invitation, not a demand. No box, just a line that looks
   like the heading it is going to become. */
.wzc .wz-post-title-input {
    width: 100%;
    margin: 0 0 4px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--wzc-line);
    background: none;
    color: var(--wzc-ink);
    font: 700 1.15rem/1.3 inherit;
}

.wzc .wz-post-title-input::placeholder {
    color: #9aa8c0;
    font-weight: 600;
}

.wzc input.wz-post-title-input:focus {
    outline: none;
    border-bottom-color: var(--wzc-brand);
}

.wzc textarea {
    width: 100%;
    min-height: 128px;
    margin-top: 10px;
    padding: 10px 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--wzc-ink-2);
    font: inherit;
    resize: vertical;
}

.wzc textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ---- how much is written, and how much the card will show --------------
   The card clamps a description to three lines. Until now the writer had no
   way to know that, so the first three lines were often spent on a greeting. */
.wzc-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--wzc-muted);
}

.wzc-meter b {
    color: var(--wzc-ink-2);
    font-weight: 700;
}

.wzc-meter__track {
    flex: 1 1 auto;
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: #eef2f9;
    overflow: hidden;
}

.wzc-meter__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--wzc-brand);
    transition: width .12s;
}

.wzc-meter__fill.is-over {
    background: var(--wzc-warn);
}

/* ---- hashtags the server will turn into links ---- */
.wzc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.wzc-tags:empty {
    display: none;
}

.wzc-tags span {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--wzc-tint);
    color: var(--wzc-brand);
    font-size: 11.5px;
    font-weight: 700;
}

/* ---- media ---- */
.wzc .website-image-preview-wrapper img,
.wzc #imagePreview,
.wzc #sb-image-preview,
.wzc #websiteImagePreview {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}

.wzc .sb-upload-area,
.wzc .upload-area,
.wzc .website-upload-area {
    margin-top: 14px;
    padding: 18px 16px;
    border: 1.5px dashed #cfdcf0 !important;
    border-radius: 12px;
    background: #f8fafe;
    color: var(--wzc-muted);
    font-size: 13px;
    text-align: center;
}

.wzc .sb-upload-area:hover,
.wzc .upload-area:hover,
.wzc .website-upload-area:hover,
.wzc .is-dragover {
    border-color: var(--wzc-brand) !important;
    background: var(--wzc-tint);
    color: var(--wzc-brand);
}

/* The rule is "a picture or a video, not both". It used to arrive as red
   text AFTER you had already chosen the second one. It is a quiet line under
   the buttons now, and the other button is disabled before you press it. */
.wzc [id$="utual-ex-msg"],
.wzc [id$="utualExMsg"] {
    color: var(--wzc-muted) !important;
    font-size: 12px !important;
    margin: 8px 0 0 !important;
}

/* ---- the action bar ---- */
.wzc .website-post-options,
.wzc .post-options,
.wzc .sb-post-options {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px !important;
    padding: 12px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--wzc-line) !important;
    background: none !important;
    box-shadow: none !important;
}

.wzc .website-add-to-post-text,
.wzc .add-to-post-text,
.wzc .sb-add-to-post-text {
    margin: 0 2px 0 0 !important;
    color: var(--wzc-muted);
    font-size: 12.5px;
    font-weight: 700;
}

/* Every "add" control reads the same, wherever it came from. */
.wzc .website-post-options button,
.wzc .post-options button,
.wzc .sb-option-buttons button,
.wzc .sb-post-options button:not([type="submit"]) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--wzc-line);
    border-radius: 999px;
    background: #fff;
    color: var(--wzc-ink-2);
    font-size: 12.5px;
    font-weight: 700;
}

.wzc .website-post-options button:hover:not(:disabled),
.wzc .post-options button:hover:not(:disabled),
.wzc .sb-option-buttons button:hover:not(:disabled) {
    border-color: var(--wzc-brand);
    background: var(--wzc-tint);
    color: var(--wzc-brand);
}

.wzc .website-post-options button:disabled,
.wzc .post-options button:disabled,
.wzc .sb-option-buttons button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ---- the footer ---- */
.wzc .website-form-actions,
.wzc .form-actions,
.wzc .sb-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px -18px -16px;
    padding: 14px 18px;
    border-top: 1px solid var(--wzc-line);
    background: #fbfcfe;
}

.wzc-draft {
    margin-right: auto;
    font-size: 12px;
    color: var(--wzc-muted);
}

.wzc-draft b {
    color: var(--wzc-good);
    font-weight: 700;
}

.wzc .website-post-btn,
.wzc .post-btn,
.wzc .sb-post-btn {
    padding: 9px 18px !important;
    border: 1px solid var(--wzc-brand) !important;
    border-radius: 10px !important;
    background: var(--wzc-brand) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

.wzc .website-post-btn:disabled,
.wzc .post-btn:disabled,
.wzc .sb-post-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Replaced a "privacy" select that had one option and no column behind it. */
.wz-audience {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--wzc-tint, #eaf1ff);
    color: var(--wzc-brand, #1d4ed8);
    font-size: 11.5px;
    font-weight: 700;
}

@media (max-width: 575px) {
    .wzc .modal-body,
    .wzc .sb-modal-body {
        padding: 12px 14px 14px !important;
    }

    .wzc .website-form-actions,
    .wzc .form-actions,
    .wzc .sb-form-actions {
        margin: 14px -14px -14px;
        padding: 12px 14px;
    }
}

/* ==========================================================================
   Carried over from the per-modal blocks this file replaces.

   These are genuinely id-specific -- each composer's buttons are different
   elements -- so they could not be folded into the shared rules above. The
   labels in particular are drawn by CSS: the markup for those buttons is an
   icon and nothing else, so deleting these would leave three unlabelled
   circles.
   ========================================================================== */

/* ---- button labels ---- */
#websitePhotoBtn::after   { content: 'Photo'; }
#websiteYoutubeBtn::after { content: 'Video'; }
#websiteFeelingBtn::after { content: 'Feeling'; }
#websiteTagUrlBtn::after  { content: 'Link'; }

#photoBtn::after   { content: 'Photo'; }
#youtubeBtn::after { content: 'Video'; }
#feelingBtn::after { content: 'Feeling'; }
#tagUrlBtn::after  { content: 'Link'; }

#sb-photo-btn::after    { content: 'Photo'; }
#sb-youtube-btn::after  { content: 'Video'; }
#sb-feeling-btn::after  { content: 'Feeling'; }
#sb-tag-url-btn::after  { content: 'Link'; }

/* ---- "take this picture off again" ---- */
.wzc [id$="emoveImage"],
.wzc [id$="emoveVideo"],
.wzc #sb-remove-image,
.wzc #sb-remove-video {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(15, 27, 52, .7);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.wzc [id$="emoveImage"]:hover,
.wzc [id$="emoveVideo"]:hover,
.wzc #sb-remove-image:hover,
.wzc #sb-remove-video:hover {
    background: rgba(15, 27, 52, .92);
}

.wzc .website-main-text-area,
.wzc .main-text-area,
.wzc .sb-main-text-area {
    position: relative;
}

.wzc iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
}

/* The dialog holds two columns now -- the writing and the card it is being
   written for -- so 560px is no longer the right box. At 560 the preview was
   237px wide and the card's own headline wrapped over three lines, which is
   not what it does in the feed.

   Written against the ids because that is what the old rule did, and an id
   beats the .wzc-dialog class it would otherwise be fighting. */
#websiteDetailModal .modal-dialog,
#editPostModal .modal-dialog {
    max-width: 920px;
}

/* ==========================================================================
   Properties the shared rules did not name, so the old ones survived.

   Found by measuring the rendered modal rather than reading the file: the
   headline still had a box and an 11px radius, the "add" buttons were still
   38px circles (border-radius: 50%; width: 38px; height: 38px), and Publish
   still spanned the footer (width: 100%). A declaration you do not write
   does not win -- it simply leaves the old one standing.
   ========================================================================== */
/* input.  -- not decoration.

   wizbrand-profile.css carries `.modal input[type="text"] { border-radius:
   11px !important; border: 1.5px ... !important }`. That is (0,2,1) against
   this rule's (0,2,0), and among !important declarations the more specific
   one wins -- which is why the headline kept its box however many properties
   were named here. Adding the element to the selector makes it (0,2,1) too,
   and this file loads later. */
.wzc input.wz-post-title-input {
    /* Every side named: a shorthand somewhere else was putting the box back,
       and border-radius alone left it rounded. */
    border: 0 !important;
    border-bottom: 1px solid var(--wzc-line) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.wzc .wz-post-title-input:focus {
    border-bottom-color: var(--wzc-brand) !important;
}

/* Pills with their labels, not circles. The label itself is drawn by the
   ::after rules above, so a 38px circle cropped it to nothing. */
.wzc .website-option-btn,
.wzc .option-btn,
.wzc .sb-option-btn,
.wzc .website-option-buttons button,
.wzc .option-buttons button,
.wzc .sb-option-buttons button {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    border-radius: 999px !important;
}

.wzc .website-option-buttons,
.wzc .option-buttons,
.wzc .sb-option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Publish is a button, not a bar. */
.wzc .website-post-btn,
.wzc .post-btn,
.wzc .sb-post-btn {
    width: auto !important;
    margin-left: auto;
}


/* ==========================================================================
   The split composer — writing on the left, the card on the right.

   A post is written for a card, but until now the card only existed after
   publishing. Everything on the right is drawn to the same numbers the feed
   card uses (headline 16.5px/700, body 13.5px clamped to three lines), so
   what is shown is what will be there.

   The frame lives in resources/views/components/wz/composer.blade.php and is
   shared by Create post and Edit post. The forms inside keep their own ids
   and classes; only this frame is common, which is what stops the two
   drifting into different screens again.
   ========================================================================== */

/* The dialog has to be wide enough for two columns and still fit a laptop. */
.wzc-dialog {
    max-width: 920px;
}

.wzc--split {
    display: flex;
    flex-direction: column;
}

/* ---- the head ---- */
.wzc__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #142c60, #0d1f45);
    color: #fff;
}

.wzc__mark {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

.wzc__h {
    flex: 1 1 auto;
    margin: 0;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
}

.wzc__x {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background .14s;
}

.wzc__x:hover,
.wzc__x:focus-visible {
    background: rgba(255, 255, 255, .24);
}

/* ---- two columns ---- */
.wzc__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    min-height: 0;
}

.wzc__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wzc__who {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px 2px;
}

.wzc__av {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #dbe4f3;
}

.wzc__whotx {
    min-width: 0;
}

.wzc__nm {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--wzc-ink);
}

.wzc__aud {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
    padding: 1px 8px;
    border-radius: 20px;
    background: #f1f5fb;
    font-size: 11px;
    font-weight: 600;
    color: var(--wzc-muted);
}

/* ---- the preview column ---- */
/* A tint you can actually see. At #f8fafd the column read as white space
   left over beside the form rather than as a panel of its own, and the part
   below the card looked like a rendering fault. */
.wzc__side {
    min-width: 0;
    padding: 14px 16px 16px;
    border-left: 1px solid var(--wzc-line);
    background: #eef3fa;
}

.wzc__sidelbl {
    margin: 0 0 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #8396b3;
}

.wzc__sidenote {
    margin: 9px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--wzc-muted);
}

/* ---- the card itself, at the feed's own numbers ---- */
.wzc-card {
    border: 1px solid var(--wzc-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.wzc-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #dde6f5;
}

.wzc-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wzc-card__badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(15, 27, 52, .78);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

.wzc-card__body {
    padding: 11px 13px 12px;
}

.wzc-card__t {
    margin: 0 0 5px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--wzc-ink);
}

/* Three lines then "..." -- the same clamp the feed card uses, so the cut
   shown here is the cut that happens. */
.wzc-card__p {
    margin: 0 0 9px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--wzc-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.wzc-card__p:empty::before {
    content: "Your post will show here as you type.";
    color: #9fb0c9;
}

.wzc-card__m {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--wzc-muted);
}

.wzc-card__more {
    margin-left: auto;
    color: var(--wzc-brand);
    font-weight: 700;
}

/* ---- phone ----

   One column, and the preview moves ABOVE the writing.

   Underneath it would sit below the Publish button -- the end of a form
   nobody scrolls past once they can publish -- so the card would never be
   seen on a phone, which is the whole feature.

   Its picture is dropped there: the attached photo is already on screen in
   the form a few hundred pixels below, and a 16/9 box at the top of a phone
   pushes the writing off the screen. What is left is what the preview is
   actually for on a small screen -- how far the headline runs and where the
   text stops. */
@media (max-width: 820px) {
    .wzc__cols {
        display: flex;
        flex-direction: column;
    }

    .wzc__side {
        order: -1;
        border-left: 0;
        border-bottom: 1px solid var(--wzc-line);
    }

    .wzc-card__media {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wzc__x {
        transition: none;
    }
}


/* A long post must not push the preview off the screen.

   The page grows the textarea to fit what is in it (autoResizeTextarea), so
   a long post made the dialog thousands of pixels tall and the card -- the
   whole point of this layout -- ended up far above the writing. max-height
   beats the inline height that script sets, so the box stops growing and
   scrolls instead, and the card stays beside the words being typed. */
.wzc .post-textarea,
.wzc .website-detail-textarea {
    max-height: 300px;
    overflow-y: auto;
}

.wzc__side {
    position: sticky;
    top: 0;
    align-self: start;
}

@media (max-width: 820px) {
    .wzc__side {
        position: static;
    }
}


/* The attached picture is a receipt, not a preview.

   It filled the whole column at 16/9, which in a 490px pane is a 275px
   block -- and the card on the right is already showing the picture in the
   place it will actually appear. Narrowing it leaves the writing and the
   card as the two things on screen. */
.wzc--split #imagePreview,
.wzc--split #websiteImagePreview,
.wzc--split #sb-image-preview {
    max-width: 260px;
}


/* The action row is the DIALOG's footer, not the form's.

   Left where it was, it ended at the right edge of the writing column and
   Publish sat in the middle of the dialog, with the preview panel carrying
   on past it. Pinning the row across the whole width puts Publish in the
   corner, where the eye goes last.

   The button stays inside the <form> on purpose. The submit handler finds it
   with this.querySelector('button[type="submit"]') to disable it against a
   second click, and lifting the button out of the form -- even with a form=
   attribute -- would quietly take that away. So the row is placed, not
   moved: absolute against .wzc--split, with .wzc__cols reserving its
   height so nothing ends up underneath it. */
.wzc--split {
    position: relative;
}

/* Bootstrap gives .modal-body position: relative, which made IT the box the
   footer was pinned to -- so "across the whole dialog" came out as "across
   the writing column", 528px of 920. Nothing inside needs it: the emoji
   picker is appended to <body> and positions itself from the button's screen
   rectangle, and the two media previews carry their own position: relative
   for their x buttons. */
.wzc--split .modal-body,
.wzc--split .sb-modal-body {
    position: static;
}

.wzc--split .website-form-actions,
.wzc--split .form-actions,
.wzc--split .sb-form-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 18px;
    justify-content: flex-end;
    background: #f8fafd;
}

.wzc--split .wzc__cols {
    padding-bottom: 61px;
}

@media (max-width: 820px) {
    .wzc--split .website-form-actions,
    .wzc--split .form-actions,
    .wzc--split .sb-form-actions {
        padding: 11px 14px;
    }

    .wzc--split .wzc__cols {
        padding-bottom: 57px;
    }
}


/* ---- the influencer dashboard's composer -------------------------------

   Not a Bootstrap modal: #sb-post-modal is its own fixed overlay, so the
   sizing Bootstrap would have given .modal-dialog has to be written here.
   It also had a <style> block of its own in the blade, which is gone -- this
   file is the one look for all three composers. */
#sb-post-modal {
    align-items: flex-start;
    padding: 24px 16px;
    overflow-y: auto;
}

#sb-post-modal .wzc--split {
    width: 100%;
    max-width: 920px;
    margin: auto;
}

/* Publish spanned the footer and sat in the middle of a 540px box. In the
   corner of a 920px one it does not need to shout. */
#sb-post-modal .sb-post-btn {
    width: auto;
    padding: 10px 22px;
    border-radius: 10px;
    background: var(--wzc-brand);
}