/* ---------------------------------------------------------------------------
   wwwroot/css/shared/global/13-panel.css

   Loaded by _Layout.cshtml as part 13 of 17 for every page.
   Cascade order is the file order in that <link> list:
     previous: 12-modal.css
     next:     14-contact-modal.css

   Split out of a single monolithic stylesheet. Do not reorder the <link>
   tags and do not move a rule between these files: both change the cascade.
--------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   STANDARD CENTRED PANEL
   The simple "one card, a heading, some copy and an action" layout used by the
   onboarding flow and the placeholder pages. Those views each hand-rolled the
   same card out of inline styles with slightly different values; this is the
   single standard version. A page that needs to deviate adds an override in
   its own stylesheet rather than an inline style.
   -------------------------------------------------------------------------- */
.mmrp-panel {
    max-width: 620px;
    margin: 60px auto;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: var(--c-surface);
}

.mmrp-panel--centered {
    text-align: center;
}

.mmrp-panel--wide {
    max-width: 720px;
}

.mmrp-panel__title {
    margin-top: 0;
    margin-bottom: 1rem;
}

.mmrp-panel__text {
    margin-bottom: 16px;
}

.mmrp-panel__text:last-child {
    margin-bottom: 0;
}

.mmrp-panel__note {
    margin-top: 20px;
    margin-bottom: 0;
    color: var(--c-text-secondary);
    font-size: 0.95rem;
}

.mmrp-panel__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.mmrp-panel__actions--centered {
    justify-content: center;
}

/* Width constraint for content that is centred by Bootstrap utilities rather
   than by .mmrp-panel itself (the onboarding confirmation steps). */
.mmrp-panel__constrain {
    max-width: 520px;
}

.mmrp-panel__constrain--wide {
    max-width: 720px;
}

/* Actions inside a panel. .mmrp-panel-btn is the shape; the modifiers are the
   three intents used across the onboarding flow. */
.mmrp-panel-btn {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.mmrp-panel-btn--primary {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #fff;
}

.mmrp-panel-btn--secondary {
    background: var(--c-surface);
    border-color: #0a66c2;
    color: #0a66c2;
}

.mmrp-panel-btn--tertiary {
    background: var(--c-surface);
    border-color: #9ca3af;
    color: #6b7280;
}

.mmrp-panel__inline-link {
    color: #0a66c2;
    text-decoration: underline;
    cursor: pointer;
}

/* A quieter inset block inside a panel, for status or placeholder copy. */
.mmrp-panel__callout {
    background: var(--mil-cloud);
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    padding: 2rem;
    margin-bottom: 2rem;
}

.mmrp-panel__callout p {
    margin: 0;
    font-size: 1.125rem;
    color: #525252;
    line-height: 1.6;
}

/* Responsive product-preview rules. These were byte-identical in both
   pages/home.css and pages/dashboard.css, and the markup they target
   (_LandingProductGrid / _DashboardProductGrid) is shared by those two pages,
   so one copy lives here. Anything either page wants to differ on stays in its
   own file as a clearly-marked override. */
@media (min-width: 400px) {

    .modal-product-preview-close {
        float: right;
        top: 20px;
        right: 20px;
        font-size: 0.75rem;
    }

    .img-product-preview {
        margin-left: 8px;
    }
}

@media (max-width: 400px) {

    .modal-product-preview-close {
        float: none;
        width: 50%;
        margin-left: 25%;
        margin-top: -3px;
    }
}

.modal-header {
    padding: 16px 20px;
    background-color: var(--c-brand);
    color: white;
    text-align: center;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    justify-content: center;
    align-items: center;
    position: relative;
}

.modal-header h2 {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 0;
    margin: 0;
    flex: 1;
}

.modal-close-circle {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    position: absolute;
    right: 16px;
    top: 16px;
}

.modal-close-circle:hover {
    transform: scale(1.1);
}

.modal-close-circle svg {
    width: 20px;
    height: 20px;
}/* Hidden until contact.js adds .is-visible. Was a `style="display:none"`
   attribute driven by jQuery .hide()/.show(). */
#form-errors-contact{
    display: none;
    border:3px solid red;
    padding:7px;
}

#form-errors-contact.is-visible {
    display: block;
}

.form-label.contact{

    font-size: 1.3rem;
    color:rgb(22,22,22);
    font-weight:600;
}

p.contact-sender{

    text-align:center;
    font-weight:600;
    
}

.form-text-area-box
{
    width:100%;
}

@media screen and (min-width: 768px) {
    #contactModalForm {
        width: 33%;
    }
}

@media screen and (max-width: 768px) {

    #contactModalForm {
        width: 62%;
    }
}

@media screen and (max-width: 768px) {

    .modal-content {
        width: 80%;
    }

    .modal {
        padding-top: 60px;
    }
}

@media screen and (max-width: 480px) {

    .modal-content {
        width: 95%;
    }

    .modal {
        padding-top: 20px;
    }

    #form-button-cancel-contact,
    #form-button-submit-contact {
        padding: 10px 14px;
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 1024px) {
    #tb-contact-subject {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 600px) {

    #tb-contact-subject {
        font-size:0.625rem;
    }
}

@media screen and (max-width: 400px) {
    p.contact-sender {
        font-weight:normal;
    }
}

.required {
    color: red;
}

.form-text-box {
    width: 90%;
    padding: 5px;
}

#resultModal .modal-content {
    background-color: var(--c-brand);
}

#result-button-ok {
    background-color: #393939;
    border: 1px solid #fff;
    color: #fff;
    padding-top: 4px;
    margin-top:6px;
    padding:7px;
    border-radius:2px;
}

/* Hidden until contact-info.js adds .is-visible. Was a `style="display:none"`
   attribute driven by jQuery .hide()/.show(). */
#form-errors {
    display: none;
    border: 3px solid red;
    padding: 7px;
}

#form-errors.is-visible {
    display: block;
}

#contactInfoModal {
    display: none;
}

.required-indicator {
    color: #da1e28;
    margin-left: 2px;
}

.form-group {
    margin-bottom: 24px;
}
#contactForm label {
    font-size: 1.3rem;
}

input::placeholder{
    font-size:0.8rem;
}

.form-control{
    padding: 0.25rem;
}