/*
 * 订阅积木的样式 —— 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;
}

/* 按钮置灰（还没选列表时）。用 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;
}