/*
 * 订阅积木的样式 —— Odoo 19 website_mass_mailing 的三份 scss 里**用得上**的那部分。
 *
 * ## 为什么不是照抄
 *
 * 上游那三份 scss 里大半是给 website_mass_mailing_edit_mode（Odoo 建站器画布）
 * 和 o_newsletter_popup 在 Odoo 弹窗系统里的定位用的，本仓两样都不同：画布是
 * vertex 的，弹窗是本模块自己那段裸 JS 切 class。抄过来的规则要么选不中任何元素，
 * 要么与 vertex 的画布样式打架。
 *
 * ## 只写三类安全的选择器（同 [[p_builder_block_options]] 第二节）
 *
 * 本模块自有的 class、Bootstrap 原生类、以及内联样式。**不写**依赖
 * website/static/css/snippets.css 里某个 data-vcss 版本的变体类 —— 那份是编译
 * 产物，同一个变体类往往只对某一版模板生效，对不上就是一条规则都不生效。
 */

/* 表单本体：让输入框与按钮在窄屏上不挤成一团。 */
.s_newsletter_subscribe_form .input-group {
    flex-wrap: nowrap;
}

.s_newsletter_subscribe_form_input {
    min-width: 0; /* flex 子项默认 min-width:auto，长 placeholder 会把按钮挤出容器 */
}

.s_newsletter_subscribe_form_input_small {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .875rem;
}

/* 居中那一档：input-group 默认 flex:1 会把整行撑满，居中就看不出来。 */
.s_newsletter_centered .input-group.justify-content-center {
    flex-wrap: wrap;
    row-gap: .5rem;
}
.s_newsletter_centered .o_subscribe_input {
    flex: 0 1 22rem;
}

/*
 * 表单样式与圆角 —— 建站器「表单样式」「圆角」两个选项（vertex newsletter_options.ts）
 * 往表单根 `.s_newsletter_subscribe_form` 上写的类。
 *
 *   样式  （无）相连：Bootstrap input-group，按钮贴在框右侧（出厂，Odoo 同）
 *         o_nl_inline  按钮收进输入框里：外面一个框，框里输入区 + 按钮
 *         o_nl_split   分开：输入框与按钮各自成形，中间留缝，窄屏按钮换到下一行
 *   圆角  （无）跟随主题：输入框读 --o-input-radius、按钮读 --o-btn-radius
 *         o_nl_square / o_nl_rounded / o_nl_pill
 *
 * 不带类时一条规则都不命中 —— 早先存下来的积木长得和从前一模一样。
 *
 * ## 接入主题
 *
 * 框的底色/边框粗细/字号/内边距读主题页签「输入框」那组 --o-input-*，按钮仍是
 * `.btn btn-primary`（颜色、字重、大写跟着主题与色彩组合走；选中按钮本身还能换
 * 主/次/描边），聚焦光圈取主色 --o-color-1。圆角选「跟随主题」时外框跟输入框、
 * 框里的按钮按「外圆角 − 内缩」同心收一圈（不同心的话按钮四角会顶出外框的弧线）。
 *
 * ## 为什么圆角那几条带 !important
 *
 * Bootstrap 的 input-group 用 `.input-group:not(.has-validation)>:not(:last-child)
 * :not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating)` 这种 (0,6,0) 的
 * 选择器把相邻两边的圆角清零、给第二个孩子 margin-left:-1px。按钮在框内/分开这两档
 * 恰恰要四角都圆、不叠边，不压过它就是「选了胶囊，按钮左边还是直的」。
 *
 * ★ 圆角写成变量 --o-nl-radius：三档样式各自要的是外框、两件各自、外侧两角，
 * 读同一个值；「跟随主题」就是不设它，各处回落到自己那个主题变量。
 */
.s_newsletter_subscribe_form {
    --o-nl-inset: .3rem; /* 按钮在框内时与外框的间隙 */
}
.o_nl_square { --o-nl-radius: 0px; }
.o_nl_rounded { --o-nl-radius: .75rem; }
.o_nl_pill { --o-nl-radius: 50rem; }

/* 相连 + 指定圆角：只改外侧两角，内侧仍由 input-group 拼成一条。 */
.s_newsletter_subscribe_form:is(.o_nl_square, .o_nl_rounded, .o_nl_pill):not(.o_nl_inline, .o_nl_split) .js_subscribe_wrap > .input-group > .form-control {
    border-start-start-radius: var(--o-nl-radius);
    border-end-start-radius: var(--o-nl-radius);
}
.s_newsletter_subscribe_form:is(.o_nl_square, .o_nl_rounded, .o_nl_pill):not(.o_nl_inline, .o_nl_split) .js_subscribe_wrap > .input-group > .btn {
    border-start-end-radius: var(--o-nl-radius);
    border-end-end-radius: var(--o-nl-radius);
}
.o_nl_pill:not(.o_nl_inline, .o_nl_split) .js_subscribe_wrap > .input-group > .form-control {
    padding-inline-start: calc(var(--o-input-padding-x, .75rem) + .5rem);
}

/* 按钮在框内：input-group 本身变成那个框。 */
.s_newsletter_subscribe_form.o_nl_inline .js_subscribe_wrap > .input-group {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--o-nl-inset);
    padding: var(--o-nl-inset);
    background-color: var(--o-input-bg, var(--bs-body-bg));
    border: var(--o-input-border-width, var(--bs-border-width)) solid var(--bs-border-color);
    border-radius: var(--o-nl-radius, var(--o-input-radius, var(--bs-border-radius)));
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* 光圈画在外框上：输入区自己的那圈被下面摘掉了，不补的话键盘用户看不出焦点在哪。 */
.s_newsletter_subscribe_form.o_nl_inline .js_subscribe_wrap > .input-group:focus-within {
    border-color: color-mix(in srgb, var(--o-color-1, #0d6efd) 55%, var(--bs-border-color));
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--o-color-1, #0d6efd) 25%, transparent);
}
.s_newsletter_subscribe_form.o_nl_inline .js_subscribe_wrap > .input-group > .form-control {
    flex: 1 1 auto;
    width: auto;
    border: 0;
    border-radius: 0 !important;
    background-color: transparent;
    box-shadow: none;
}
.s_newsletter_subscribe_form.o_nl_inline .js_subscribe_wrap > .input-group > .form-control:focus {
    box-shadow: none;
}
.s_newsletter_subscribe_form.o_nl_inline.o_nl_pill .js_subscribe_wrap > .input-group > .form-control {
    padding-inline-start: calc(var(--o-input-padding-x, .75rem) + .5rem);
}
.s_newsletter_subscribe_form.o_nl_inline .js_subscribe_wrap > .input-group > .btn {
    flex: 0 0 auto;
    margin-left: 0 !important;
    border-radius: max(0px, calc(var(--o-nl-radius, var(--o-input-radius, var(--bs-border-radius))) - var(--o-nl-inset))) !important;
}
.o_nl_inline.o_nl_pill .js_subscribe_wrap > .input-group > .btn {
    padding-inline: calc(var(--o-btn-padding-x, .75rem) + .5rem);
}

/* 分开：两件各自成形。 */
.s_newsletter_subscribe_form.o_nl_split .js_subscribe_wrap > .input-group {
    flex-wrap: wrap;
    gap: .5rem;
}
.s_newsletter_subscribe_form.o_nl_split .js_subscribe_wrap > .input-group > .form-control {
    flex: 1 1 12rem;
    border-radius: var(--o-nl-radius, var(--o-input-radius, var(--bs-border-radius))) !important;
}
.s_newsletter_subscribe_form.o_nl_split .js_subscribe_wrap > .input-group > .btn {
    flex: 0 0 auto;
    margin-left: 0 !important;
    border-radius: var(--o-nl-radius, var(--o-btn-radius, var(--bs-border-radius))) !important;
}
.o_nl_split.o_nl_pill .js_subscribe_wrap > .input-group > .form-control {
    padding-inline-start: calc(var(--o-input-padding-x, .75rem) + .5rem);
}
@media (max-width: 575.98px) {
    /* 换到下一行时独占一整行，不然一颗小按钮缩在左下角。 */
    .s_newsletter_subscribe_form.o_nl_split .js_subscribe_wrap > .input-group > .btn {
        flex-grow: 1;
    }
}

/* 居中那一档：框内/分开都别撑满整行，收在中间一段。 */
.s_newsletter_centered .s_newsletter_subscribe_form:is(.o_nl_inline, .o_nl_split) .js_subscribe_wrap > .input-group {
    max-width: 30rem;
    margin-inline: auto;
}
.s_newsletter_centered .s_newsletter_subscribe_form.o_nl_inline .o_subscribe_input {
    flex: 1 1 auto;
}

/* 按钮置灰（还没选列表时）。用 pointer-events 而不是 disabled 属性：
   模板里是 <a role="button">，<a> 上没有 disabled。 */
.s_newsletter_subscribe_form .js_subscribe_btn.disabled {
    pointer-events: none;
    opacity: .55;
}

/* 反馈行留空时不占位（否则每个积木底下平白多出一行的空隙）。 */
.js_subscribe_feedback:empty {
    display: none;
}

/*
 * 弹窗。**不依赖 Bootstrap 的 JS**，所以 .show 的显示由这里负责：
 * Bootstrap 的 .modal.show 只管 opacity，display 是 JS 设的。本模块那段裸 JS
 * 两样都设，这里补一条兜底 —— 站点的主题若覆盖了 .modal 的 display，
 * 弹窗会"弹出来了但看不见"。
 */
.o_newsletter_popup .modal.show {
    display: block;
}
.o_newsletter_popup .modal-dialog {
    margin: auto;
    max-width: 640px;
}
.o_newsletter_popup .s_popup_close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    z-index: 2;
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/*
 * 编辑器画布里的弹窗：画布会把 <script> 剥掉，所以上面那段 JS 不跑，
 * 弹窗永远是 display:none —— 站长在建站器里**编不到它**。
 * 画布给可编辑区加了 .o_editable，据此把它摊平成普通区块。
 */
.o_editable .o_newsletter_popup .modal {
    display: block;
    position: static;
    background-color: transparent !important;
}

/*
 * 蜜罐字段：真人看不见，脚本看得见。
 *
 * ★ 不能用 display:none 或 visibility:hidden —— 那两个是脚本第一眼就会跳过的判据
 * （headless 浏览器会算 computed style）。挪出视口更难被识别，而对读屏用户的影响
 * 由模板上的 aria-hidden + tabindex=-1 兜住。

 */
.js_subscribe_hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}