/*
 * 申请收录页「网址输入框 + 获取TDK 按钮」排版（各主题共用）
 *
 * 手机端改成上下两行：输入框占满一整行、按钮单独一行。
 * 之前是同一行的 flex 布局，按钮 `white-space:nowrap` 撑得很宽，
 * 输入框被挤到只剩 30px 左右，手机上根本没法看自己输的网址。
 */

.apply-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.apply-url-row .apply-url-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* theme4 / 默认主题把 input 包在 <label class="oz-form-field"> 里：
   label 默认是 inline-block，行内基线会多留 ~8px，把整行撑高、按钮还会浮下去 4px。
   这里让它变成 flex 容器，输入框刚好填满。 */
.apply-url-row label.apply-url-input {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.apply-url-row label.apply-url-input > input {
    margin: 0;
}

.apply-url-row .apply-url-input > input,
.apply-url-row input.apply-url-input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
}

/* 桌面端同一行时输入框和按钮必须一样高，否则看着是歪的。
   各主题自己的 .oz-btn / .io-btn / .form-control 高度都不一样（36/38/42），
   这里统一压成 44，权重也够（.apply-url-row .apply-tdk-btn = 0,2,0）。 */
.apply-url-row .apply-tdk-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    box-sizing: border-box;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}

/* iowen 主题：按钮原来是内联样式上色，统一收到这里 */
.apply-url-row .apply-tdk-btn.io-btn {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

/* theme4 / 默认主题：input-group-append 自带左间距，手机端要去掉 */
.apply-url-row > .input-group-append,
.apply-url-row > .apply-tdk-append {
    margin-left: 0;
}

@media (max-width: 768px) {
    .apply-url-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .apply-url-row .apply-url-input {
        flex: 0 0 auto;
        width: 100%;
    }

    .apply-url-row .apply-url-input > input,
    .apply-url-row input.apply-url-input {
        height: 46px;
        /* iOS 上字号小于 16px 会自动放大页面，这里必须 16px */
        font-size: 16px;
        padding: 0 14px;
        line-height: 1.4;
    }

    .apply-url-row .apply-tdk-btn {
        width: 100%;
        height: 46px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.2;
    }
}